/* «آسمان آبی» blue-sky theme for the Mina Wedding Card 3.1 (test4 code). Loaded last: it restyles the shared card. */
@font-face { font-family: "Sky Naskh"; src: url("../fonts/NotoNaskhArabic-var.woff") format("woff"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Sky Serif"; src: url("../fonts/Cormorant-var.woff") format("woff"); font-weight: 300 700; font-display: swap; }

:root {
  --navy: #1f4b6e; --navy2: #2f6286; --sky: #a9c4d9; --rose-ink: #8a5464; --sky-text: #24496a; --sky-muted: #355a77;
  --glass: linear-gradient(160deg, rgba(255,255,255,.32), rgba(255,255,255,.10));
  --glass-line: rgba(255,255,255,.55);
  --glass-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 10px 30px rgba(31,75,110,.12);
  --sky-glow: 0 0 14px rgba(255,255,255,.95), 0 0 4px rgba(255,255,255,.85);
  --sky-col: 460px;
  --ivory: #dfe8ef; --paper: rgba(255,255,255,.7); --ink: #1f4b6e; --muted: #355a77; --rose: #8a5464; --rose-deep: #8a5464;
  --sage: #1f4b6e; --sage-deep: #1f4b6e; --champagne: #8a5464; --gold: #8a5464; --gold-soft: #f3e4e8;
  --line: rgba(31,75,110,.22); --soft-line: rgba(31,75,110,.12); --shadow: 0 10px 30px rgba(31,75,110,.12);
}

html, body { background: #b9cfdf; }
body { color: var(--navy); background: #c9d6df url("../img/sky/sky-paint.webp") center top / max(100%, 760px) auto repeat-y; }
/* One phone-width column on every screen; on a wide screen the painted sky fills the sides. */
#invitation, .site-footer { width: 100%; max-width: var(--sky-col); margin-inline: auto; }
#invitation { position: relative; overflow: clip; background: #d9d4cc url("../img/sky/sky-paint.webp") center top / 170% auto repeat-y; }
@media (min-width: 520px) {
  #invitation, .site-footer { box-shadow: 0 0 60px rgba(31,75,110,.22); }
  body::before { content: ""; position: fixed; inset: 0; background: rgba(185,207,223,.4); pointer-events: none; z-index: -1; }
}
#main-bg-video, .petal-rain { display: none !important; }

#invitation > section, .section-pad { padding: 56px 22px; }
.section-heading { margin: 0 auto 1.4rem; }
.section-heading > p, .section-kicker { font-family: "Sky Naskh", var(--fa); font-size: 15px; letter-spacing: 0; color: var(--rose-ink); text-transform: none; text-shadow: var(--sky-glow); margin-bottom: 2px; }
.section-heading h2, .venue-card h2, #invitation h2 {
  font-family: "Sky Naskh", var(--fa); font-weight: 600; font-size: 30px; line-height: 1.6; color: var(--navy);
  letter-spacing: 0; padding: 0; margin: 0 0 6px; text-shadow: var(--sky-glow);
}
#invitation p { color: var(--sky-text); }
.sky-glass {
  background: var(--glass) !important; border: 1px solid var(--glass-line) !important; box-shadow: var(--glass-shadow) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.15); backdrop-filter: blur(14px) saturate(1.15); border-radius: 26px;
}

/* ---------- hero: names plain on the sky, rose vines swaying in the corners ---------- */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 18px !important; background: none !important; overflow: hidden; }
.hero::before, .hero::after { display: none !important; }
.sky-vine { position: absolute; top: -10px; width: 92px; height: auto; pointer-events: none; transform-origin: top center; animation: sky-sway 7s ease-in-out infinite; z-index: 2; }
.sky-vine-l { left: -6px; }
.sky-vine-r { right: -6px; transform: scaleX(-1); animation-name: sky-sway-r; animation-duration: 8s; }
@keyframes sky-sway { 50% { transform: rotate(2.2deg); } }
@keyframes sky-sway-r { 0%, 100% { transform: scaleX(-1) rotate(0); } 50% { transform: scaleX(-1) rotate(2.2deg); } }
.hero-content { position: relative; z-index: 3; width: 100%; max-width: 380px; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; text-align: center; }
.hero-content h1, .hero-content h1.names-fa, .hero-content h1.names-en {
  display: flex !important; flex-direction: column; align-items: center; gap: 0 !important; width: 100%; margin: 0; padding: 0 !important;
  color: var(--navy) !important; text-shadow: 0 0 22px rgba(255,255,255,.95), 0 0 6px rgba(255,255,255,.8);
}
.hero-content h1 span { display: block; }
.hero-content h1.names-fa.names-font-nastaliq, .hero-content h1.names-fa { font-size: clamp(52px, 16vw, 68px) !important; line-height: 1.2 !important; }
.hero-content h1.names-fa b { display: block; font-family: "Sky Naskh", var(--fa) !important; font-size: 26px !important; line-height: 1; margin: 4px 0 8px; color: var(--navy) !important; }
.hero-content h1.names-en { font-family: "Sky Serif", Georgia, serif !important; font-weight: 500; font-size: clamp(44px, 13vw, 58px) !important; line-height: 1.05 !important; }
.hero-content h1.names-en span { letter-spacing: .08em; text-transform: uppercase; }
.hero-content h1.names-en b { font-family: "Sky Serif", Georgia, serif !important; font-style: italic; font-weight: 400; font-size: 40px; line-height: 1.1; color: var(--navy) !important; }
.hero-content h1.names-en.names-font-script, .hero-content h1.names-en.names-font-vibes { font-family: "Wedding Script", "Name Vibes", cursive !important; }
.hero-content h1.names-en.names-font-script span, .hero-content h1.names-en.names-font-vibes span { text-transform: none; letter-spacing: 0; }
.hero-date { margin-top: 70px !important; color: var(--navy) !important; font-family: "Sky Naskh", var(--fa); font-size: 18px; text-shadow: var(--sky-glow); background: none !important; border: 0 !important; padding: 0 !important; }
.hero-date::before, .hero-date::after { display: none !important; }
.hero-date span, .hero-date time { color: inherit !important; font: inherit !important; letter-spacing: .02em; }
.hero-date .date-caption { display: block; font-size: 13px; color: var(--rose-ink) !important; margin-bottom: 4px; }
html:not([data-lang="fa"]) .hero-date { font-family: "Sky Serif", Georgia, serif; font-size: 20px; letter-spacing: .12em; }
.opening-quote { color: var(--sky-text) !important; text-shadow: var(--sky-glow); margin-bottom: 26px; }
.hero-kicker { display: block !important; font-family: "Sky Serif", serif; letter-spacing: .3em; color: var(--navy2) !important; margin-bottom: 12px; text-shadow: var(--sky-glow); }
.hero .personal-welcome { margin: 0 auto 22px !important; color: var(--navy) !important; background: rgba(255,255,255,.38) !important; border: 1px solid var(--glass-line) !important; border-radius: 22px !important; padding: 10px 18px !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: none !important; max-width: 320px; }
.personal-welcome span { color: var(--sky-muted) !important; font-size: 13px !important; }
.personal-welcome strong { display: block; font-family: "Mina Miremad", "Sky Naskh", serif !important; font-weight: 400 !important; font-size: 30px !important; line-height: 1.6 !important; color: var(--navy) !important; }
.scroll-cue { position: absolute !important; bottom: 22px; left: 50%; transform: translateX(-50%); color: #fff; z-index: 3; text-decoration: none; text-align: center; }
.scroll-cue-text { display: block; font-size: 12px; color: #fff !important; text-shadow: 0 1px 4px rgba(30,70,100,.6); }
.scroll-cue i { display: block; width: 1px !important; height: 34px !important; margin: 8px auto 0; background: linear-gradient(#fff, transparent) !important; border: 0 !important; border-radius: 0 !important; }
.scroll-cue i b { display: none !important; }

/* ---------- invitation: the couple photo inside the painted floral arch ---------- */
.invitation-message { padding-top: 20px !important; background: none !important; }
.invitation-message::before, .invitation-message::after { display: none !important; }
.message-card, .message-card.is-simple { position: relative; width: 100% !important; max-width: 380px; margin: 0 auto; padding: 14px 10px 34px !important; text-align: center; overflow: visible; }
.message-card::before, .message-card::after { display: none !important; }
.message-card .message-content { padding: 0 12px !important; background: none !important; border: 0 !important; box-shadow: none !important; }
.message-card .message-content::before, .message-card .message-content::after { display: none !important; }
.sky-photo-frame { position: relative; width: 100%; aspect-ratio: 676 / 843; }
.sky-photo { position: absolute; left: 17.46%; top: 14.23%; width: 65.83%; height: 76.75%; -webkit-mask: url("../img/sky/photo-mask.png") center / 100% 100% no-repeat; mask: url("../img/sky/photo-mask.png") center / 100% 100% no-repeat; }
.sky-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sky-photo-flowers { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#invitation .message-card h2 { font-family: "Mina Miremad", "Sky Naskh", serif; font-weight: 400; font-size: 34px; line-height: 1.6; margin: 4px 0 8px; padding-left: .3em; }
.message-card .families-name { font-family: "Sky Naskh", var(--fa); font-size: 17px; color: var(--navy); margin: 0 0 10px; }
.message-card .families-name i { color: var(--rose-ink); font-style: normal; margin: 0 8px; }
#invitation .invitation-copy { font-size: 14.5px; line-height: 2.05; color: var(--sky-text); text-shadow: 0 0 8px rgba(255,255,255,.7); }
.message-card strong { display: block; margin-top: 12px; font-family: "Sky Naskh", var(--fa); color: var(--navy); }

/* ---------- date: one line above the round rose frame, the month inside, swans below, painted countdown ---------- */
#invitation .sky-date { padding-top: 10px; background: none !important; }
.sky-date::before, .sky-date::after { display: none !important; }
.sky-date .calendar-card { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; max-width: 400px; width: 100%; margin: 0 auto; -webkit-backdrop-filter: none; backdrop-filter: none; }
.sky-date .calendar-card::before, .sky-date .calendar-card::after { display: none !important; }
.sky-date-top { text-align: center; margin-bottom: 6px; color: var(--navy); text-shadow: var(--sky-glow); }
.sky-date-kicker { font-family: "Sky Naskh", var(--fa); font-size: 15px; color: var(--rose-ink) !important; margin: 0; }
#invitation .sky-date-top h2 { font-family: "Mina Miremad", "Sky Naskh", serif; font-weight: 400; font-size: clamp(30px, 9vw, 38px); color: var(--rose-ink); line-height: 1.4; padding-left: .5em; margin: 0; }
.sky-date-line { display: block; font-family: "Sky Naskh", var(--fa); font-weight: 600; font-size: clamp(22px, 6.6vw, 28px); white-space: nowrap; margin-top: 2px; color: var(--navy); }
html:not([data-lang="fa"]) .sky-date-line { font-family: "Sky Serif", Georgia, serif; letter-spacing: .06em; }
.sky-round { position: relative; width: min(100%, 380px); margin: 0 auto; padding-bottom: 30%; }
.sky-round-frame { display: block; width: 100%; height: auto; filter: drop-shadow(0 8px 14px rgba(31,75,110,.22)); }
.sky-round-in { position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 695 / 746; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 24% 1.5%; text-align: center; color: #3b2a33; text-shadow: 0 0 10px rgba(255,255,255,.95), 0 0 3px rgba(255,255,255,.9); }
.sky-month { width: 100%; display: grid; grid-template-columns: repeat(7, 1fr); font-family: "Sky Naskh", var(--fa); font-size: clamp(11.5px, 3.3vw, 14px); line-height: 1.85; }
.sky-month b { font-weight: 600; font-size: .85em; color: var(--rose-ink); }
.sky-month span { position: relative; }
.sky-month span.is-day { color: #fff; z-index: 0; text-shadow: none; }
.sky-month span.is-day::before { content: ""; position: absolute; left: 50%; top: 50%; width: 1.9em; height: 1.75em; transform: translate(-50%, -52%); z-index: -1; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 21C5 15 1 11 1 6.5 1 3.4 3.4 1 6.3 1c2.4 0 4.4 1.5 5.7 3.4C13.3 2.5 15.3 1 17.7 1 20.6 1 23 3.4 23 6.5 23 11 19 15 12 21z' fill='%238a5464'/%3E%3C/svg%3E"); }
#invitation .sky-time { font-family: "Sky Naskh", var(--fa); font-size: 14px; margin: 6px 0 0; color: var(--navy); }
.sky-swans { position: absolute; left: 10%; width: 80%; height: auto; bottom: 0; filter: drop-shadow(0 10px 10px rgba(31,75,110,.25)); }
.sky-countdown { display: flex !important; justify-content: center; gap: clamp(8px, 3vw, 16px) !important; margin: 91px 0 0 !important; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; direction: ltr; grid-template-columns: none !important; }
.sky-countdown .countdown-unit { position: relative; text-align: center; background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; min-width: 0 !important; width: auto !important; height: auto !important; aspect-ratio: auto !important; }
.sky-countdown .countdown-unit::before, .sky-countdown .countdown-unit::after { display: none !important; }
.sky-countdown .countdown-unit + .countdown-unit { padding-left: clamp(8px, 3vw, 16px) !important; border-left: 1px solid rgba(31,75,110,.28) !important; }
#invitation .sky-digits { display: flex; direction: ltr; justify-content: center; align-items: flex-end; height: clamp(36px, 11vw, 48px); margin: 0; filter: drop-shadow(0 0 6px rgba(255,255,255,.95)) drop-shadow(0 0 2px rgba(255,255,255,.9)); }
.sky-digits span { display: inline-flex; justify-content: center; height: 100%; width: clamp(22px, 6.9vw, 30px); }
.sky-digits img { height: 100%; width: auto; flex: none; }
.sky-countdown .calendar-label { display: block; margin-top: 6px; font-family: "Sky Naskh", var(--fa); font-size: 13px; color: var(--navy) !important; text-shadow: 0 0 8px #fff; letter-spacing: 0; text-transform: none; }
.sky-countdown.has-digits .sky-sr { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; padding: 0; }
/* Until the digit images are ready (or without script) the plain numbers stay readable. */
.sky-countdown:not(.has-digits) .sky-digits { display: none; }
.sky-countdown:not(.has-digits) .sky-sr { display: block; font-family: "Sky Naskh", var(--fa); font-size: 34px; line-height: 1.3; color: var(--navy); }
#invitation .after-event-note, #invitation .ceremony-note { text-align: center; margin-top: 18px; color: var(--sky-text); text-shadow: var(--sky-glow); font-size: 14px; line-height: 2; }

/* ---------- program: jars, the heart under the title and a heart that runs down the line ---------- */
#invitation .sky-program { padding-top: 35px; background: none !important; }
.sky-program::before, .sky-program::after { display: none !important; }
.sky-program .program-paper { position: relative; margin: 35px auto 0 !important; padding: 0 0 30px !important; max-width: 420px; width: 100% !important; }
.sky-program .program-paper::before, .sky-program .program-paper::after { display: none !important; }
.sky-jars { display: block; width: 78%; height: auto; margin: -56px auto -10px; position: relative; z-index: 2; transform-origin: top center; animation: sky-sway 9s ease-in-out infinite; }
.sky-program .program-heading { margin-bottom: 4px; }
.sky-program-heart { display: block; width: 12px; height: 11px; margin: 6px auto 0; visibility: hidden; }
.sky-program-heart svg, .sky-runner svg { width: 100%; height: 100%; display: block; }
.sky-program-heart svg path { fill: var(--navy); }
.sky-timeline { position: relative; padding: 0 12px !important; margin: 0 !important; }
.sky-timeline::before, .sky-timeline::after { display: none !important; }
.sky-line { position: absolute; top: 0; bottom: 40px; left: 50%; width: 1px; background: linear-gradient(transparent, rgba(31,75,110,.25) 10%, rgba(31,75,110,.25) 90%, transparent); }
.sky-runner { position: absolute; left: 50%; top: 0; width: 22px; height: 20px; margin-left: -11px; z-index: 3; filter: drop-shadow(0 0 6px #fff) drop-shadow(0 2px 3px rgba(31,75,110,.3)); will-change: transform; }
.sky-runner svg path { fill: var(--rose-ink); }
.program-timeline .program-route, .timeline-runner, .program-end-heart, .program-week, .program-bow { display: none !important; }
.sky-item { position: relative; display: flex !important; align-items: center; gap: 8px; margin: 18px 0 !important; padding: 0 !important; text-align: center; background: none !important; border: 0 !important; box-shadow: none !important; width: auto !important; max-width: none !important; inset: auto !important; transform: none; }
.sky-item.reveal:not(.visible) { transform: translateY(16px); }
.sky-item::before, .sky-item::after, .sky-item .program-marker { display: none !important; }
.sky-item.event-left { flex-direction: row-reverse; }
.sky-item-pic { width: 44%; flex: none; }
.sky-item-pic img { width: 100%; max-height: 150px; height: auto; object-fit: contain; display: block; filter: drop-shadow(0 6px 8px rgba(31,75,110,.18)); }
.sky-item .program-copy { flex: 1; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; text-align: center !important; }
.sky-item .program-copy::before, .sky-item .program-copy::after { display: none !important; }
.sky-item time { display: block; font-family: "Sky Naskh", var(--fa); font-size: 28px; font-weight: 600; color: var(--navy) !important; background: none !important; padding: 0 !important; border: 0 !important; line-height: 1.5; }
#invitation .sky-item h3 { font-family: Vazirmatn, var(--fa); font-size: 13.5px; font-weight: 500; color: var(--sky-muted); margin: 0; line-height: 1.8; }
#invitation .sky-item p { font-size: 12px; line-height: 1.8; color: var(--sky-muted); margin: 2px 0 0; }

/* ---------- venue ---------- */
#invitation .venue-section { background: none !important; }
.venue-section::before, .venue-section::after { display: none !important; }
.venue-card { width: 100% !important; max-width: 380px; padding: 0 0 18px !important; overflow: hidden; border-radius: 24px !important; background: rgba(255,255,255,.88) !important; border: 1px solid rgba(255,255,255,.8) !important; box-shadow: 0 14px 30px rgba(31,75,110,.2) !important; }
.venue-card::before, .venue-card::after { display: none !important; }
.venue-card .section-kicker { margin: 16px 0 0; }
.venue-pin { display: none !important; }
.venue-photo, .sky-venue-default { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; margin: 0 0 6px !important; border-radius: 0 !important; border: 0 !important; box-shadow: none !important; max-width: none !important; }
#invitation .venue-card h2 { font-size: 22px; text-shadow: none; margin: 10px 16px 0; line-height: 1.6; }
.venue-card address { color: var(--sky-muted) !important; font-size: 13.5px !important; margin: 4px 16px 12px !important; }
.venue-card .map-preview { margin: 0 14px 12px !important; border-radius: 16px !important; overflow: hidden; }
.neshan-route { margin: 0 14px 10px !important; border-radius: 18px !important; border: 1px solid rgba(31,75,110,.25) !important; background: rgba(255,255,255,.7) !important; color: var(--navy) !important; }
.neshan-route svg { stroke: var(--navy) !important; }
.venue-actions { display: flex !important; gap: 8px !important; justify-content: center; flex-wrap: wrap; margin: 0 14px !important; }
.venue-action, .sky-btn {
  display: inline-flex !important; align-items: center; gap: 4px; font: inherit; font-size: 13px !important; text-decoration: none; cursor: pointer; width: auto !important; min-height: 0 !important;
  border: 1px solid var(--navy) !important; color: var(--navy) !important; background: transparent !important; padding: 8px 16px !important; border-radius: 30px !important; box-shadow: none !important;
}
.sky-btn.is-solid { background: var(--navy) !important; color: #fff !important; }
.sky-btns { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }
.sky-count { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--navy); color: #fff; font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; }

/* ---------- RSVP and the guestbook card ---------- */
#invitation .participation { background: none !important; padding-top: 40px; }
.participation::before, .participation::after { display: none !important; }
.participation-forms { width: 100% !important; max-width: 400px; }
.wedding-form#rsvpForm, .rsvp-done {
  position: relative; padding: 50px 22px 40px !important; border-radius: 26px !important; margin-top: 30px !important;
  background: var(--glass) !important; border: 1px solid var(--glass-line) !important; box-shadow: var(--glass-shadow) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.15); backdrop-filter: blur(14px) saturate(1.15);
}
.wedding-form#rsvpForm::before { content: ""; position: absolute; width: 120px; height: 149px; top: -46px; left: -6px; transform: rotate(-10deg); background: url("../img/sky/pressed.webp") center / contain no-repeat; z-index: 3; pointer-events: none; }
#invitation .wedding-form h3 { font-family: "Sky Naskh", var(--fa); font-weight: 600; font-size: 28px; color: var(--navy); text-align: center; text-shadow: var(--sky-glow); line-height: 1.6; }
.wedding-form label, .wedding-form legend { color: var(--navy) !important; font-size: 13px !important; font-weight: 600; }
.wedding-form input:not([type="radio"]):not([type="checkbox"]), .wedding-form textarea, .wedding-form select {
  margin-top: 6px; padding: 11px 16px !important; border: 1px solid rgba(31,75,110,.55) !important; border-radius: 22px !important;
  background: rgba(255,255,255,.5) !important; color: var(--navy) !important; font-weight: 400; font-size: 16px; font-family: inherit; width: 100%;
}
.wedding-form input:not([type="radio"]):not([type="checkbox"]) { border-radius: 30px !important; }
.wedding-form input:focus, .wedding-form textarea:focus, .wedding-form select:focus { outline: none; border-color: var(--navy) !important; box-shadow: 0 0 0 3px rgba(31,75,110,.15) !important; }
.wedding-form .choice { display: flex !important; margin: 8px 4px !important; font-weight: 400; font-size: 14px !important; }
.wedding-form .choice input { accent-color: var(--navy) !important; width: 17px; height: 17px; }
.wedding-form button[type="submit"], .rsvp-done button {
  width: 100%; margin-top: 18px; padding: 12px !important; border: 0 !important; border-radius: 30px !important; background: var(--navy) !important; color: #fff !important;
  font: inherit; font-size: 15px !important; box-shadow: 0 8px 20px rgba(31,75,110,.25) !important; cursor: pointer;
}
.wedding-form button[type="submit"]:disabled { opacity: .7; }
.form-result { text-align: center; font-size: 13.5px; color: var(--navy) !important; margin-top: 10px; }
.rsvp-help, .rsvp-max { display: block; font-weight: 400; color: var(--sky-muted) !important; font-size: 12px; }
#invitation .rsvp-notice { color: var(--sky-text); text-shadow: var(--sky-glow); font-size: 13.5px; }
.sky-guestbook { margin-top: 40px; padding: 30px 18px 26px; text-align: center; }
.sky-book { display: block; width: 86%; max-width: 320px; height: auto; margin: 0 auto; }
#invitation .sky-guestbook h3 { font-family: "Sky Naskh", var(--fa); font-weight: 600; font-size: 28px; color: var(--navy); margin: 0 0 4px; text-shadow: var(--sky-glow); line-height: 1.6; }
#invitation .sky-guestbook p { font-size: 13.5px; line-height: 2; color: var(--sky-text); text-shadow: 0 0 8px rgba(255,255,255,.7); margin: 0; }

/* the guestbook pop-up: a glass sheet that slides up from the bottom */
.sky-sheet { position: fixed; inset: 0; z-index: 2147482000; display: flex; align-items: flex-end; justify-content: center; background: rgba(31,75,110,.28); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; transition: opacity .35s; }
.sky-sheet[hidden] { display: none !important; }
.sky-sheet.is-open { opacity: 1; }
.sky-sheet-panel {
  position: relative; width: 100%; max-width: var(--sky-col); max-height: 88vh; max-height: 88svh; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding: 22px 20px calc(24px + env(safe-area-inset-bottom)); border-radius: 28px 28px 0 0; text-align: center;
  background: linear-gradient(170deg, rgba(255,255,255,.9), rgba(236,244,250,.82)); -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2);
  border: 1px solid rgba(255,255,255,.8); border-bottom: 0; box-shadow: 0 -14px 40px rgba(31,75,110,.25);
  transform: translateY(105%); transition: transform .45s cubic-bezier(.2,.8,.2,1);
}
.sky-sheet.is-open .sky-sheet-panel { transform: none; }
.sky-sheet-panel::before { content: ""; display: block; width: 44px; height: 4px; border-radius: 4px; background: rgba(31,75,110,.25); margin: -8px auto 10px; }
.sky-sheet-close { position: absolute; top: 14px; left: 14px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(31,75,110,.25); background: rgba(255,255,255,.7); color: var(--navy); font-size: 22px; line-height: 1; cursor: pointer; z-index: 2; padding: 0; }
html[dir="ltr"] .sky-sheet-close { left: auto; right: 14px; }
.sky-sheet-book { display: block; width: 120px; height: auto; margin: 0 auto 2px; }
.sky-sheet .wedding-form { padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none; backdrop-filter: none; text-align: start; margin: 0 !important; }
.sky-sheet .wedding-form h3, .sky-sheet .guestbook-wall h3 { font-family: "Mina Miremad", "Sky Naskh", serif !important; font-weight: 400 !important; font-size: 30px !important; line-height: 1.9 !important; padding-left: .4em; margin: 0 !important; text-shadow: none !important; text-align: center; color: var(--navy) !important; }
.sky-sheet .sky-sheet-sub { font-size: 13px; color: var(--sky-muted); margin: 0 0 6px; text-align: center; }
.sky-counter { display: block; text-align: left; font-size: 11px; font-weight: 400; color: #5b7c96; margin-top: 3px; }
.sky-sheet .form-result { margin: 8px 0 0; }
.sky-sheet-done { padding: 26px 0 8px; }
.sky-sheet-done b { display: block; font-family: "Mina Miremad", "Sky Naskh", serif; font-weight: 400; font-size: 30px; line-height: 1.8; color: var(--navy); outline: none; }
.sky-sheet-done p { font-size: 13.5px; color: var(--sky-muted); line-height: 2; }
.sky-sheet .guestbook-wall { margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; width: auto !important; opacity: 1 !important; transform: none !important; }
.sky-sheet .guestbook-wall::before, .sky-sheet .guestbook-wall::after { display: none !important; }
.sky-sheet .guestbook-wall header { display: block !important; text-align: center; padding: 0 !important; border: 0 !important; }
.sky-sheet .guest-notes { display: flex !important; flex-direction: column; gap: 12px; margin-top: 12px; text-align: start; columns: auto !important; max-height: none !important; overflow: visible !important; padding: 0 !important; }
.sky-sheet .guest-notes blockquote { position: relative; margin: 0 !important; padding: 14px 16px 12px !important; border-radius: 20px !important; background: rgba(255,255,255,.7) !important; border: 1px solid rgba(255,255,255,.9) !important; box-shadow: 0 6px 16px rgba(31,75,110,.08) !important; break-inside: avoid; width: auto !important; transform: none !important; }
.sky-sheet .guest-notes blockquote::before, .sky-sheet .guest-notes blockquote::after { display: none !important; }
.sky-sheet .guest-notes p { font-size: 14px !important; line-height: 1.95 !important; color: var(--sky-text) !important; margin: 0 !important; overflow-wrap: anywhere; }
.sky-sheet .guest-notes cite { display: block; margin-top: 6px; font-style: normal; font-family: "Sky Naskh", var(--fa); font-weight: 600; font-size: 14px; color: var(--rose-ink) !important; }
.sky-sheet .guestbook-empty { text-align: center; color: var(--sky-muted) !important; padding: 20px 0; }
html.sky-sheet-lock, html.sky-sheet-lock body { overflow: hidden !important; }

/* ---------- closing on the painted landscape ---------- */
#invitation .closing-section { position: relative; min-height: 560px; padding: 70px 22px 40px; display: flex; flex-direction: column; align-items: center; background: none !important; }
.closing-section::before, .closing-section::after { display: none !important; }
.sky-land { position: absolute; left: 0; right: 0; bottom: 0; height: 460px; background: url("../img/sky/land.webp") 40% bottom / cover no-repeat; -webkit-mask: linear-gradient(transparent, #000 42%); mask: linear-gradient(transparent, #000 42%); pointer-events: none; }
.closing-section > :not(.sky-land) { position: relative; }
#invitation .closing-copy { font-family: "Mina Miremad", "Sky Naskh", serif; font-size: 34px; line-height: 1.7; color: #fff; text-shadow: 0 2px 14px rgba(31,75,110,.55); text-align: center; background: none; border: 0; max-width: 340px; }
.closing-photo { margin: 26px auto 0 !important; width: min(80%, 300px) !important; border-radius: 999px 999px 18px 18px !important; overflow: hidden; border: 5px solid rgba(255,255,255,.95) !important; box-shadow: 0 14px 30px rgba(31,75,110,.25) !important; padding: 0 !important; background: none !important; }
.closing-photo img { display: block; width: 100%; height: auto; border-radius: 0 !important; }
.closing-photo figcaption { display: none; }

/* ---------- footer: only the Mina logo. After the closing landscape it sits on that same picture (no second copy);
   anywhere else it is a plain sky band. ---------- */
.site-footer { position: relative; background: linear-gradient(#bcd2e2, #a3bfd4) !important; color: var(--navy); padding: 18px 16px 24px !important; border: 0 !important; margin-top: 0 !important; z-index: 3; }
.site-footer::before { display: none !important; }
.site-footer > * { position: relative; }
.site-footer .footer-couple, .site-footer .footer-stars { display: none !important; }
.site-footer .footer-logo-link { margin-top: 0; }
.footer-instagram { color: var(--navy) !important; }
main:has(> .closing-section:last-child) + .site-footer { background: none !important; margin-top: -190px !important; padding-bottom: 30px !important; }
main:has(> .closing-section:last-child) + .site-footer .footer-instagram { color: #fff !important; text-shadow: 0 1px 6px rgba(15,35,55,.6); }
main:has(> .closing-section:last-child) > .closing-section { padding-bottom: 210px; min-height: 640px; }

/* ---------- small pieces ---------- */
.music-toggle { background: rgba(255,255,255,.82) !important; color: var(--navy) !important; border: 1px solid rgba(255,255,255,.9) !important; box-shadow: 0 4px 14px rgba(31,75,110,.25) !important; }
.lang-switch summary { background: rgba(255,255,255,.75) !important; color: var(--navy) !important; }

@media (prefers-reduced-motion: reduce) {
  .sky-vine, .sky-jars { animation: none !important; }
  .sky-sheet, .sky-sheet-panel { transition: none !important; }
}

/* ---------- panel «ظاهر کادرها»: glass (default) keeps the sky look; a colour paints the boxes ---------- */
html.box-glass #invitation :is(.program-paper, .dress-code-paper, .venue-card, .wedding-form, .guestbook-wall, .guest-media-paper, .special-card, .sky-guestbook, .message-card, .calendar-card) {
  background: var(--glass) !important; border: 1px solid var(--glass-line) !important; box-shadow: var(--glass-shadow) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.15) !important; backdrop-filter: blur(14px) saturate(1.15) !important;
}
html[class*="box-"]:not(.box-glass) #invitation :is(.sky-guestbook, .message-card) { background: var(--box-bg, #fbf7eff7) !important; border-color: var(--box-line, #eddfce) !important; }
html[class*="box-"] #invitation .sky-date .calendar-card, html[class*="box-"] #gbWrite.sky-sheet .sky-sheet-panel .wedding-form, html[class*="box-"] #gbRead.sky-sheet .sky-sheet-panel .guestbook-wall {
  background: none !important; border: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}

/* ---------- قاب‌های عاشقانه: arched photos in a white border, navy signature, glass arrows ---------- */
#invitation .gallery-section, #invitation .clips-section { background: none !important; }
#invitation .love-gallery .love-gallery-card { background: none !important; border: 0 !important; box-shadow: none !important; padding: 6px 4px 6px !important; aspect-ratio: auto; border-radius: 0; overflow: visible; }
#invitation .love-gallery .love-gallery-photo { position: relative; border-radius: 999px 999px 18px 18px; border: 5px solid rgba(255,255,255,.95); box-shadow: 0 0 0 1px rgba(31,75,110,.22), 0 14px 30px rgba(31,75,110,.22); background: #cfdde8; }
#invitation .love-gallery .love-gallery-photo::after { content: ""; position: absolute; inset: 6px; border: 1px solid rgba(255,255,255,.7); border-radius: 999px 999px 13px 13px; pointer-events: none; }
#invitation .love-gallery .love-gallery-card img { border-radius: 0; }
#invitation .love-gallery-signature { color: var(--navy); font-family: "Sky Serif", Georgia, serif; font-style: italic; font-size: clamp(20px, 5vw, 26px); text-shadow: var(--sky-glow); padding-top: 8px; }
#invitation .love-gallery-arrow { background: rgba(255,255,255,.55); color: var(--navy); border: 1px solid rgba(31,75,110,.3); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
#invitation .love-gallery-hint, #invitation .love-gallery-count { color: #355a77; text-shadow: 0 0 8px #fff; }

/* ---------- ریلز فرمالیته: the couple's clip in a glass phone frame; several clips swipe ---------- */
.clips-section { padding-top: 20px; }
.sky-clips { display: flex; justify-content: center; align-items: center; gap: 14px; margin: 10px 0 0; padding: 6px 0 10px; }
.sky-clips.is-many { justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin-inline: -16px; padding-inline: calc(50% - min(34vw, 145px)); }
.sky-clips.is-many::-webkit-scrollbar { display: none; }
.sky-clip { flex: 0 0 min(68vw, 290px); margin: 0; scroll-snap-align: center; padding: 7px; border-radius: 30px; background: linear-gradient(160deg, rgba(255,255,255,.5), rgba(255,255,255,.18)); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.7); box-shadow: 0 16px 34px rgba(31,75,110,.22); }
.sky-clip.is-landscape { flex-basis: min(88vw, 400px); border-radius: 22px; }
.sky-clip.is-square { flex-basis: min(80vw, 340px); }
.sky-clip-frame { position: relative; aspect-ratio: 9 / 16; border-radius: 24px; overflow: hidden; background: #cfdde8 url("../img/sky/sky-paint.webp") center / cover; }
.sky-clip.is-landscape .sky-clip-frame { aspect-ratio: 16 / 9; border-radius: 16px; }
.sky-clip.is-square .sky-clip-frame { aspect-ratio: 1; }
.sky-clip video { display: block; width: 100%; height: 100%; object-fit: cover; background: transparent; }
.sky-clip-bar { position: absolute; top: 10px; left: 12px; right: 12px; height: 3px; border-radius: 3px; background: rgba(255,255,255,.4); pointer-events: none; }
.sky-clip-bar i { display: block; height: 100%; width: 0; border-radius: 3px; background: #fff; }
.sky-clip-play { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; padding: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,.85); background: rgba(255,255,255,.35); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); cursor: pointer; display: grid; place-items: center; transition: opacity .3s, transform .3s; }
.sky-clip-play svg { width: 28px; fill: #fff; margin-left: 4px; filter: drop-shadow(0 1px 3px rgba(0,0,0,.3)); }
.sky-clip.is-playing .sky-clip-play { opacity: 0; transform: scale(.8); }
.sky-clip.is-loading .sky-clip-play { animation: skyClipWait 1s ease-in-out infinite alternate; }
@keyframes skyClipWait { to { transform: scale(.9); opacity: .6; } }
.sky-clip-sound { position: absolute; bottom: 12px; left: 12px; width: 38px; height: 38px; padding: 0; border-radius: 50%; border: 0; background: rgba(0,0,0,.38); cursor: pointer; display: none; place-items: center; }
.sky-clip.is-started .sky-clip-sound { display: grid; }
.sky-clip-sound svg { width: 18px; fill: #fff; stroke: #fff; stroke-width: 2; stroke-linecap: round; }
.sky-clip-sound[aria-pressed="true"] .is-off, .sky-clip-sound[aria-pressed="false"] .is-on { display: none; }
.sky-clip-sound .is-on { fill: none; }
.sky-clip figcaption { position: absolute; bottom: 0; left: 0; right: 0; padding: 40px 16px 16px 58px; text-align: start; color: #fff; font-size: 13px; line-height: 1.8; background: linear-gradient(transparent, rgba(15,35,55,.6)); text-shadow: 0 1px 4px rgba(0,0,0,.4); pointer-events: none; }
.sky-clip-dots { display: flex; gap: 6px; justify-content: center; margin-top: 4px; }
.sky-clip-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(31,75,110,.25); transition: all .3s; }
.sky-clip-dots i.is-on { width: 20px; border-radius: 4px; background: var(--navy); }
.sky-clip :focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
#gbRead #guestNotes > blockquote { min-height: 0 !important; }
/* While the entrance is up, the painted pieces far down the card wait, so the clouds come in first. */
body:has(#sky-intro) .wedding-form#rsvpForm::before, body:has(#sky-intro) .sky-land { background-image: none !important; }

/* ---------- cards in Latin-script languages: the Naskh and nastaliq faces have no good Latin, so headings use the serif ---------- */
html:not([data-script="arabic"]) :is(.section-heading h2, .venue-card h2, #invitation h2, #invitation .message-card h2, #invitation .sky-date-top h2, .sky-date-line, .hero-date, #invitation .wedding-form h3, #invitation .sky-guestbook h3, .sky-sheet .wedding-form h3, .sky-sheet .guestbook-wall h3, .sky-sheet-done b, #invitation .closing-copy, .personal-welcome strong, .message-card strong, .message-card .families-name, .section-heading > p, .section-kicker, .sky-date-kicker) {
  font-family: "Sky Serif", Georgia, serif !important; letter-spacing: 0 !important; word-spacing: normal !important; font-weight: 600 !important;
}
html:not([data-script="arabic"]) :is(#invitation .message-card h2, #invitation .sky-date-top h2, .sky-sheet .wedding-form h3, .sky-sheet .guestbook-wall h3, .sky-sheet-done b, #invitation .closing-copy, .personal-welcome strong) { font-style: italic; font-weight: 500 !important; line-height: 1.25 !important; }
html:not([data-script="arabic"]) .section-heading > p, html:not([data-script="arabic"]) .sky-date-kicker { font-weight: 500 !important; font-style: italic; text-transform: none !important; letter-spacing: .02em !important; }
html:not([data-script="arabic"]) :is(.sky-month, .sky-time, .sky-item time, .sky-countdown .calendar-label, .sky-sheet .guest-notes cite) { font-family: "Sky Serif", Georgia, serif; }
html[data-script="cjk"] :is(.section-heading h2, #invitation h2, .sky-date-line) , html[data-script="devanagari"] :is(.section-heading h2, #invitation h2, .sky-date-line) { font-style: normal !important; }