/* test2 3.1: the parts that came with the 3.0/3.1 code (test4 3.0.4 and test5 3.0), in the autumn colours of this card. */

/* Couple's names in Persian (panel «عروس و داماد» → «اسم‌های بالای کارت»): nastaliq or shekasteh. */
#heroCoupleNames[data-names="fa"], .footer-couple[data-names="fa"] {
  direction: rtl;
  font-family: "Mina Miremad", var(--fa);
  font-weight: 400;
  letter-spacing: 0;
  word-spacing: normal;
}
body.names-shekasteh :is(#heroCoupleNames, .footer-couple)[data-names="fa"],
body.names-shekasteh .message-monogram[data-names="fa"] .monogram-letter,
body.names-shekasteh .closing-photo .names-fa-caption { font-family: "Dima Shekasteh", "Mina Miremad", var(--fa); }
#heroCoupleNames[data-names="fa"] {
  font-size: clamp(2.9rem, 12.5vw, 6.6rem);
  line-height: 1.7;
  padding: 0 .04em .12em;
  margin: -.2em 0 .1em;
}
body.names-shekasteh #heroCoupleNames[data-names="fa"] { font-size: clamp(2.8rem, 12vw, 6.2rem); line-height: 1.55; }
.footer-couple[data-names="fa"] { font-size: clamp(2.1rem, 7vw, 3.4rem); line-height: 1.85; padding: 0; }
:is(#heroCoupleNames, .footer-couple)[data-names="fa"] span { padding-inline: .08em; }
:is(#heroCoupleNames, .footer-couple)[data-names="fa"] b {
  font-family: inherit;
  font-size: .72em;
  font-style: normal;
  line-height: 1;
  transform: translateY(.06em);
}
.message-monogram[data-names="fa"] { direction: rtl; }
.message-monogram[data-names="fa"] .monogram-letter { font-family: "Mina Miremad", var(--fa); line-height: 1.6; }
.message-monogram[data-names="fa"] .monogram-amp { font-family: "Mina Miremad", var(--fa); }
.closing-photo .names-fa-caption { font-family: "Mina Miremad", var(--fa); letter-spacing: 0; line-height: 1.9; }

/* Opening line, date caption (panel «متن‌های کارت»). */
.opening-quote { margin: 0 auto .5rem; max-width: 26rem; color: #fbeedd; font: 400 clamp(17px, 4.6vw, 21px)/2 "Mina Miremad", var(--fa); text-align: center; text-shadow: 0 1px 12px rgba(40, 20, 10, .55); }
.hero-date .date-caption { display: block; margin-bottom: .1rem; color: #f2dfb7; font-size: 12px; letter-spacing: 0; text-shadow: 0 1px 8px rgba(40, 20, 10, .5); }

/* Panel: intro after the quiz. The video intro waits behind the quiz until the guest passes it. */
.intro-after-quiz.quiz-active .wedding-intro { display: none !important; }

/* A section moved by the couple keeps its own spacing; the guestbook on its own starts without the forms' top gap. */
.participation#guestbook .participation-forms:first-child { margin-top: 0; }

/* Special program countdown (panel: «نمایش شمارش معکوس»). */
.special-countdown { margin: 14px auto 16px; max-width: 340px; padding: 10px 6px 8px; border-block: 1px solid var(--line); }
.special-countdown-units { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); direction: ltr; }
.special-countdown-units[hidden] { display: none; }
.special-countdown-units > span { display: block; border-right: 1px solid var(--line); padding: 2px; }
.special-countdown-units > span:last-child { border: 0; }
.special-countdown strong { display: block; color: var(--wine); font-size: 22px; font-weight: 400; line-height: 1.5; font-variant-numeric: tabular-nums; }
.special-countdown small { display: block; color: var(--muted); font-size: 11px; }
.special-countdown-state { margin: 0; color: var(--wine); font-size: 15px; }
.special-countdown.is-done .special-countdown-state { color: var(--muted); font-size: 13px; }

/* Left-to-right languages: the forms read from the left. */
html[dir="ltr"] .wedding-form, html[dir="ltr"] .special-rsvp { text-align: left; }

/* Box colour chosen in the panel («کادر بخش‌ها»); «طرح خود کارت» (box-theme) leaves the autumn boxes as they are. */
html:not(.box-theme)[class*="box-"] :is(.countdown-content, .program-paper, .dress-code-paper, .venue-card, .wedding-form, .guestbook-wall, .guest-media-paper, .special-card, #invitationText .message-card) {
  background-color: var(--box-bg, #fbf7eff7) !important;
  background-image: none !important;
  border-color: var(--box-line, #e6d3bf) !important;
}

/* Glass: the card behind shows through, blurred. */
html.box-glass :is(.countdown-content, .program-paper, .dress-code-paper, .venue-card, .wedding-form, .guestbook-wall, .guest-media-paper, .special-card, #invitationText .message-card) {
  background: linear-gradient(150deg, rgba(255, 252, 247, .68), rgba(255, 248, 240, .46)) !important;
  border: 1px solid rgba(255, 255, 255, .7) !important;
  box-shadow: 0 18px 45px rgba(60, 30, 15, .18), inset 0 1px 0 rgba(255, 255, 255, .8) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.2) !important;
  backdrop-filter: blur(16px) saturate(1.2) !important;
}

/* A dark box colour: light text inside the boxes. */
html.box-dark :is(.countdown-content, .program-paper, .dress-code-paper, .venue-card, .wedding-form, .guestbook-wall, .guest-media-paper, .special-card, #invitationText .message-card) {
  --ink: #fbf4ec; --muted: #eadbcd; --wine: #f6e2d2; --wine-deep: #fff2e6; --wine-soft: #f0d6c4; --rose: #ecc9b8; --gold: #edd29e; --gold-soft: #f2dfb7; --line: rgba(255, 255, 255, .22);
  color: var(--ink);
}
html.box-dark :is(.countdown-content, .program-paper, .dress-code-paper, .venue-card, .wedding-form, .guestbook-wall, .guest-media-paper, .special-card, #invitationText .message-card) :is(h1, h2, h3, h4, p, span, small, strong, time, figcaption, legend, label, li, b, dt, dd, address, cite, blockquote):not(input, textarea, select, button, .button, a.button) {
  color: inherit !important;
}
html.box-dark .wedding-form select option { color: #222; }

/* Auto-delete warning inside the guest album. */
.media-delete-warning { max-width: 520px; margin: -6px auto 22px; padding: 12px 16px; color: #7a3b2c; font: 600 14px/2.1 var(--fa); text-align: center; background: #fbf1ea; border: 1px solid rgba(122, 59, 44, .25); border-radius: 16px; }
.media-delete-warning span { color: var(--wine); }

/* RSVP fields the couple added in the panel. */
.wedding-form .rsvp-help { display: block; margin-top: 4px; font-size: 12.5px; line-height: 1.8; opacity: .75; font-weight: 400; }
.wedding-form select { width: 100%; margin-top: .38rem; padding: .68rem .15rem; color: var(--ink); font: inherit; background: transparent; border: 0; border-bottom: 1px solid rgba(122, 82, 60, .28); border-radius: 0; outline: none; }
.wedding-form select:focus { border-color: var(--wine); }
.wedding-form fieldset.rsvp-custom { display: flex; flex-wrap: wrap; gap: .4rem .6rem; }
.wedding-form fieldset.rsvp-custom legend { width: 100%; }
/* Nastaliq ends like ن sweep far under the line: room under the names so they never touch the date. */
body:not(.names-shekasteh) #heroCoupleNames[data-names="fa"] { padding-bottom: .42em; }
body:not(.names-shekasteh) .footer-couple[data-names="fa"] { padding-bottom: .35em; }
/* Small light badges inside a dark box. */
html.box-dark :is(.message-monogram, .special-seal, .special-intro) { background: rgba(255, 255, 255, .14) !important; border-color: rgba(255, 255, 255, .3) !important; color: #fff3e6 !important; }
html.box-dark .countdown-content::before { border-color: rgba(255, 255, 255, .2) !important; }