/* Letters from Santa pages (/letters, /letters/free). Loaded after site.css. */
.lineup { display: grid; gap: 1rem; padding: 0; list-style: none; }
@media (min-width: 52rem) { .lineup { grid-template-columns: repeat(2, 1fr); } }
.lineup > li { margin: 0; }
.product { background: #fff; border-radius: var(--radius); padding: 1.1rem 1.2rem; box-shadow: 0 2px 10px rgba(43, 29, 18, .08); height: 100%; }
.product.free { border: 3px solid var(--green); }
.product h3 { margin-bottom: .2rem; }
.product .price { font-family: var(--serif); font-size: 1.25rem; font-weight: 700; color: var(--red); margin-bottom: .5rem; }
.product .soon { display: inline-block; background: #fff3cd; border: 2px dashed #8a6d00; border-radius: 999px; padding: .1rem .8rem; font-weight: 700; font-size: 1rem; }
.product .actions { margin-top: .6rem; }
.langs { columns: 2 10rem; padding: 0; list-style: none; }
.langs li { break-inside: avoid; margin-bottom: .25rem; }
.langs li[dir="rtl"] { text-align: left; }
.disclaimer { border-left: 5px solid var(--gold); background: #fff; border-radius: 0 8px 8px 0; padding: .7rem 1rem; }

/* The free form */
.writing { text-align: center; padding: 2rem 1rem; }
.writing .quill { font-family: var(--script); font-size: 2.6rem; color: var(--red); line-height: 1.2; }
.writing .dots span { display: inline-block; width: .7rem; height: .7rem; margin: 0 .25rem; border-radius: 50%; background: var(--gold); }
@media (prefers-reduced-motion: no-preference) {
  .writing .quill { animation: quill 1.6s ease-in-out infinite; }
  .writing .dots span { animation: twinkle 1.2s ease-in-out infinite; }
  .writing .dots span:nth-child(2) { animation-delay: .2s; }
  .writing .dots span:nth-child(3) { animation-delay: .4s; }
}
@keyframes quill { 0%, 100% { transform: translateX(-.6rem) rotate(-3deg); } 50% { transform: translateX(.6rem) rotate(3deg); } }
@keyframes twinkle { 0%, 100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }
.letter-ready { background: #fff; border-radius: var(--radius); padding: 1.2rem; box-shadow: 0 2px 10px rgba(43, 29, 18, .08); }
.oops { background: #fde2e1; border: 3px solid #b3202a; border-radius: var(--radius); padding: 1rem 1.2rem; }
.oops .btn { margin-top: .5rem; }
.friendly { background: #fff3cd; border: 2px dashed #8a6d00; border-radius: var(--radius); padding: .9rem 1.1rem; font-weight: 700; }

/* The order page */
.child-card { background: #fff; border-radius: var(--radius); padding: 1rem 1.2rem; margin-bottom: 1.2rem; box-shadow: 0 2px 10px rgba(43, 29, 18, .08); border-top: 5px solid var(--green); }
.child-card.is-blocked { border-top-color: #b3202a; }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.card-head h4 { margin: 0; }
.card-fields { border: 0; padding: 0; margin: .8rem 0 0; }
.card-fields:disabled { opacity: .6; }
.card-address { border-top: 2px dashed #e4d3b4; padding-top: .8rem; margin-top: 1rem; }
.card-address legend { font-weight: 700; float: left; width: 100%; margin-bottom: .4rem; }
.card-address legend + * { clear: both; }
.preview { margin-top: .8rem; }
.letter-text { white-space: pre-line; font-family: var(--serif); font-size: 1.1rem; line-height: 1.6; background: #fdf6e3; border: 1px solid #e8d9b0; border-radius: 8px; padding: 1rem 1.2rem; }
.note { font-weight: 700; }
.linkish { background: none; border: 0; padding: 0; font: inherit; color: var(--red); text-decoration: underline; cursor: pointer; }
.helpers { background: #fff; border-radius: var(--radius); padding: 1rem 1.2rem; box-shadow: 0 2px 10px rgba(43, 29, 18, .08); }
.helpers > legend { float: left; width: 100%; font-size: 1.25rem; }
.helpers > legend + * { clear: both; }
.total p { margin: .2rem 0; }
.soon { display: inline-block; background: #fff3cd; border: 2px dashed #8a6d00; border-radius: 999px; padding: 0 .6rem; font-weight: 700; font-size: .9rem; }
.kids { list-style: none; padding: 0; margin: 1rem 0 0; }
.kids .child-card h3 { margin: 0 0 .3rem; }

/* /v/ voice page */
.voice-page { text-align: center; }
.voice-santa { display: block; width: 10rem; height: auto; margin: 0 auto 1rem; }
.voice-note { font-style: italic; }
.voice-player { margin: 1.5rem 0; }
.voice-play { font-size: 1.25rem; padding: .9rem 1.6rem; }
.voice-player audio { display: block; width: 100%; max-width: 26rem; margin: 1.2rem auto 0; }