/* ── Reset ─────────────────────────────────────────────────────────── */
/* Tilda blocks (.t-records) use Tilda's own reset (content-box), see tilda-grid.css */
:where(*:not(.t-records *)), :where(*:not(.t-records *))::before, :where(*:not(.t-records *))::after { box-sizing: border-box; margin: 0; padding: 0; }
/* WP-owned widgets inside the Tilda area keep the theme's reset */
.gallery-scroll *, .rsvp-form-wrap *, .form-success * { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: #fff; color: #372d24; font-family: 'Open Sans', 'Noto Sans Arabic', Arial, sans-serif; overflow-x: hidden; }
img  { display: block; }
a    { color: inherit; text-decoration: none; }

/* ── Admin bar offset ──────────────────────────────────────────────── */
.admin-bar #lang-switcher { top: 48px; }
.admin-bar #audio-btn     { bottom: 24px; } /* audio stays bottom, no change needed */

@media screen and (max-width: 782px) {
  .admin-bar #lang-switcher { top: 62px; } /* mobile admin bar is 46px */
}

/* ── Language switcher ─────────────────────────────────────────────── */
#lang-switcher {
  position: fixed;
  top: 16px; right: 16px;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,.88);
  border: 1px solid #dee6ed;
  border-radius: 20px;
  padding: 6px 14px;
  box-shadow: 0 2px 10px rgba(55,45,36,.10);
}
.lang-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Montserrat', 'Noto Sans Arabic', Arial, sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #aaa;
  letter-spacing: 1px;
  transition: color .15s;
  padding: 0;
}
.lang-btn.active { color: #372d24; }
.lang-btn:hover  { color: #629ebc; }
.lang-sep        { color: #ccc; font-size: 12px; user-select: none; }

/* ── Music button ──────────────────────────────────────────────────── */
#audio-btn {
  position: fixed;
  bottom: 24px; right: 24px;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  border: 1px solid #dee6ed;
  box-shadow: 0 2px 12px rgba(55,45,36,.12);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
  transition: transform .2s;
}
#audio-btn:hover { transform: scale(1.1); }
#audio-btn svg { width: 18px; height: 18px; fill: #372d24; }
#audio-btn.playing svg { fill: #629ebc; }

/* ── Hero — Envelope ───────────────────────────────────────────────── */
/* Positions mirror Tilda Zero Block rec1948900101:
   left = grid-left (--gx) + X, top = grid-top (--gy) + Y, artboard valign center.
   Grids: ≥1200 → 1200×550, 960–1199 → 960×550, 640–959 → 640×650,
   480–639 → 480×650, ≤479 → 320×700 (own layout below). */
#hero {
  position: relative;
  height: 100vh;
  min-height: 550px;
  background: #dcf3fe;
  overflow: hidden;
  --gx: calc(50% - 600px);
  --gy: calc(max(550px, 100vh) / 2 - 275px);
}
.hn-elem {
  position: absolute;
  z-index: 3;
}
.hn-elem img {
  display: block;
  width: 100%;
  height: auto;
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}
.hn-bg {
  top: calc(var(--gy) - 200px);
  left: calc(var(--gx) - 227px - 50vw);
  width: calc(1655px + 100vw);
  height: 1060px;
  background-color: #dcf3fe;
}
.hn-right    { top: calc(var(--gy) + 64px);  left: calc(var(--gx) - 173px); width: 735px; transform: rotate(90deg); }
.hn-right1   { top: calc(var(--gy) + 63px);  left: calc(var(--gx) + 636px); width: 735px; transform: rotate(90deg); }
.hn-top1     { top: calc(var(--gy) - 304px); left: calc(var(--gx) + 258px); width: 684px; transform: rotate(90deg); }
.hn-top      { top: calc(var(--gy) - 360px); left: calc(var(--gx) + 250px); width: 700px; transform: rotate(90deg); }
.hn-envelope { top: calc(var(--gy) + 28px);  left: calc(var(--gx) + 411px); width: 378px; }
.hn-text {
  top: calc(var(--gy) + 311px);
  left: calc(var(--gx) + 400px);
  width: 400px;
  color: #629ebc;
  text-align: center;
  font-family: 'Open Sans', 'Noto Sans Arabic', Arial, sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.55;
  pointer-events: none;
}
.hn-seal {
  top: calc(var(--gy) + 400px);
  left: calc(var(--gx) + 450px);
  width: 306px;
}
@media (max-width: 1199px) { #hero { --gx: calc(50% - 480px); } }
@media (max-width: 959px)  { #hero { --gx: calc(50% - 320px); --gy: calc(max(650px, 100vh) / 2 - 325px); min-height: 650px; } }
@media (max-width: 639px)  { #hero { --gx: calc(50% - 240px); } }
.hn-seal img { pointer-events: none; transition: transform .25s ease; }
/* M&M seal artwork fills its canvas more than the original Tilda seal:
   scale/offset it so the wax sits in the same spot and size (588px canvas → 460px at 66,30). */
.hn-seal img { width: 78.23%; margin: 5.1% auto 0 11.22%; } /* auto right margin keeps it put in RTL */

/* ── Envelope click overlay ──────────────────────────────────────────── */
.hn-overlay {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  z-index: 6;
  background: transparent;
}

/* ── Envelope opening animation ──────────────────────────────────────── */
.envelope-opening .hn-right {
  transition: transform 1.5s ease-in, opacity 1s ease;
  transform: rotate(90deg) translateY(-150vw);
  opacity: 0;
}
.envelope-opening .hn-right1 {
  transition: transform 1.5s ease-in, opacity 1s ease;
  transform: rotate(90deg) translateY(150vw);
  opacity: 0;
}
.envelope-opening .hn-top1 {
  transition: transform 1.5s ease-in, opacity 1s ease;
  transform: rotate(90deg) translateX(150vh);
  opacity: 0;
}
.envelope-opening .hn-top {
  transition: transform 1.5s ease-in, opacity 1s ease;
  transform: rotate(90deg) translateX(-150vh);
  opacity: 0;
}
.envelope-opening .hn-bg,
.envelope-opening .hn-envelope,
.envelope-opening .hn-text {
  transition: opacity 0.8s ease;
  opacity: 0;
}
.envelope-opening .hn-overlay {
  pointer-events: none;
}

/* Mobile ≤479px — Hero (Tilda res-320: grid 320×700, no rotation) */
@media (max-width: 479px) {
  #hero { min-height: 700px; --gx: calc(50% - 160px); --gy: calc(max(700px, 100vh) / 2 - 350px); }
  .hn-bg       { top: calc(var(--gy) - 61px);  left: calc(var(--gx) - 416px); width: 1152px; height: 1067px; }
  .hn-right    { top: calc(var(--gy) + 446px); left: calc(var(--gx) - 63px);  width: 446px; transform: none; }
  .hn-right1   { top: calc(var(--gy) - 29px);  left: calc(var(--gx) - 63px);  width: 446px; transform: none; }
  .hn-top1     { top: calc(var(--gy) - 28px);  left: calc(var(--gx) - 30px);  width: 411px; transform: none; }
  .hn-top      { top: calc(var(--gy) - 29px);  left: calc(var(--gx) - 59px);  width: 412px; transform: none; }
  .hn-envelope { top: calc(var(--gy) + 41px);  left: calc(var(--gx) + 30px);  width: 261px; }
  .hn-text     { top: calc(var(--gy) + 498px); left: calc(var(--gx) + 40px);  width: 241px;
                 font-size: 18px; line-height: 28px; color: #7aa6bc; }
  .hn-seal     { top: calc(var(--gy) + 254px); left: calc(var(--gx) + 170px); width: 240px; }
  .hn-overlay  { top: calc(var(--gy) + 153px); left: calc(var(--gx) - 336px); width: 1860px; height: 410px; }

  .envelope-opening .hn-right  { transform: translateX(-1500px); }
  .envelope-opening .hn-right1 { transform: translateX(1500px); }
  .envelope-opening .hn-top1   { transform: translateY(1500px); }
  .envelope-opening .hn-top    { transform: translateY(-1500px); }
}

/* ── Invitation content (hidden until seal click) ──────────────────── */
#invitation { display: none; }
#invitation.visible { display: block; }

/* ── Ported Tilda blocks: bits the original rendered with JS ───────── */
/* As on the live original: the white comes from <body>; the wrapper must stay transparent,
   otherwise the invite Zero Block (artboard z-index:-1) disappears under it */
#allrecords { background-color: transparent; overflow: hidden; }
/* Decorative Zero Block images (huge watercolor washes, flowers) overlap neighbouring blocks.
   On the original they swallow clicks on the RSVP form and galleries — keep them click-through. */
#allrecords .tn-elem[data-elem-type="image"] { pointer-events: none; }
/* Single-image blocks (T670): background "contain" in a fixed-ratio box */
.t670__imgwrapper .t-slds__bgimg { background-size: contain; background-position: 50%; background-repeat: no-repeat; }
.t670__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; direction: ltr; } /* coordinates are LTR in both languages */
.t670__svg text { font-family: 'Montserrat', 'Noto Sans Arabic', serif; font-weight: 300; font-size: 100px; fill: #372d24; }
.t670__svg--names text { font-size: 24px; text-transform: uppercase; }
.t670__svg--names .t670__amp, .t670__svg--names text.t670__amp { font-family: 'GreatVibesnormalinterlight', 'Great Vibes', cursive; font-weight: 400; font-size: 30px; text-transform: none; }
.tn-atom b { font-weight: 600; }
.t670__bullets { height: 16px; padding: 16px 0 0; } /* empty Tilda slider bullets row */
/* The date ("12 ДЕКАБРЯ 2026") is longer than the original's: widen its box around the same centre */
@media (min-width: 1200px) {
  #rec1948900141 .tn-elem[data-elem-id="1771669605325000001"] { width: 420px; margin-left: -80.5px; }
}

/* ── Дресс-код: horizontal galleries (Tilda T1148 metrics) ───────── */
/* Images start at the content column edge: 760 / 620 / 600px column, 20px inset on phones */
.gallery-scroll {
  --col: 760px;
  display: flex;
  gap: 20px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 max(20px, calc((100% - var(--col)) / 2));
  scrollbar-width: none;
  cursor: grab;
}
.gallery-scroll::-webkit-scrollbar { display: none; }
.gallery-scroll.is-dragging { cursor: grabbing; }
.gallery-scroll img {
  height: 500px;
  width: auto;
  display: block;
  flex-shrink: 0;
  user-select: none;
  -webkit-user-drag: none;
}
.gallery-wrap { position: relative; }
.gallery-scroll { scroll-behavior: smooth; }
.gallery-scroll.is-dragging { scroll-behavior: auto; }
@media (max-width: 1199px) { .gallery-scroll { --col: 620px; } }
@media (max-width: 959px)  { .gallery-scroll { --col: 600px; } }
@media (max-width: 640px)  { .gallery-scroll img { height: 350px; } }

/* ── Анкета гостя: form (Tilda Zero form metrics) ──────────────────── */
.rsvp-form-wrap { padding: 22px 0 60px; }
.rsvp-form { width: 460px; max-width: calc(100% - 40px); margin: 0 auto; text-align: start; }
@media (max-width: 1199px) {
  .rsvp-form-wrap { padding-bottom: 50px; }
  .rsvp-form { width: 315px; }
}
.form-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-group { margin-bottom: 20px; }
.form-label {
  display: block;
  font-family: 'Open Sans', 'Noto Sans Arabic', Arial, sans-serif;
  font-size: 17px;
  font-weight: 500;
  line-height: normal;
  color: #372d24;
  padding-bottom: 5px;
}
.form-input {
  display: block;
  width: 100%;
  height: 50px;
  border: none;
  border-bottom: 1px solid #372d24;
  border-radius: 0;
  background: transparent;
  padding: 0;
  font-family: 'Open Sans', 'Noto Sans Arabic', Arial, sans-serif;
  font-size: 17px;
  font-weight: 300;
  color: #372d24;
  outline: none;
}
.form-input::placeholder { color: #372d24; opacity: .5; }
.rsvp-form .radio-list { list-style: none; margin: 8px 0 0; padding: 0; } /* beats Tilda's .t-records ul */
.radio-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 20px;
  margin-bottom: 10px;
  font-family: 'Open Sans', 'Noto Sans Arabic', Arial, sans-serif;
  font-size: 15px;
  font-weight: 300;
  line-height: 18px;
  color: #372d24;
  cursor: pointer;
}
.radio-list li:last-child .radio-item { margin-bottom: 0; }
.radio-item input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px; height: 20px;
  border: 2px solid #372d24;
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
}
.radio-item input[type="radio"]:checked::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #372d24;
  transform: translate(-50%, -50%);
}
.form-submit {
  display: block;
  width: 160px;
  height: 50px;
  margin: 0 auto;
  padding: 0;
  background: #305676;
  color: #fff;
  font-family: 'Open Sans', 'Noto Sans Arabic', Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: background .2s;
}
.form-submit:hover { background: #3f6a8e; }
.form-success {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, .8);
}
.form-success.show { display: flex; }
.form-success__box {
  position: relative;
  width: 100%;
  max-width: 360px;
  padding: 40px 30px 36px;
  background: #fff;
  text-align: center;
  animation: form-success-in .25s ease;
}
.form-success__close {
  position: absolute;
  top: 8px; right: 10px;
  width: 28px; height: 28px;
  background: none;
  border: none;
  font-size: 26px;
  line-height: 1;
  color: #372d24;
  cursor: pointer;
  opacity: .6;
}
.form-success__close:hover { opacity: 1; }
.form-success__icon {
  width: 40px; height: 40px;
  margin: 0 auto 18px;
  fill: none;
  stroke: #62a87c;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.form-success__icon circle { stroke-opacity: .45; }
.form-success__text {
  font-family: 'Playfair Display', 'Noto Sans Arabic', serif;
  font-size: 16px;
  color: #372d24;
  line-height: 1.6;
}
@keyframes form-success-in { from { opacity: 0; transform: translateY(10px); } }
body.modal-open { overflow: hidden; }

/* ══════════════════════════════════════════════════════════════════════
   ARABIC (RTL)
   ══════════════════════════════════════════════════════════════════════ */
html[lang="ar"] body * { letter-spacing: 0 !important; } /* spacing breaks Arabic letter joining */
html[dir="rtl"] #lang-switcher,
html[dir="rtl"] .gallery-scroll { direction: ltr; }
html[dir="rtl"] .form-success__close { right: auto; left: 10px; }
/* Timing cards: flex row + t-prefix offset would mirror to the right in RTL; keep the LTR layout, RTL text */
html[dir="rtl"] #timing .t850__container { direction: ltr; }
html[dir="rtl"] #timing .t850__inner-col { direction: rtl; }

/* Invitation card, AR: Quran texts (template-parts/ar-hero.php) in flow over the Tilda card's
   florals; the Tilda card's own texts, line and "&" are hidden. Same type and colour as the card. */
.ar-card { display: none; }
html[lang="ar"] #invite-card { position: relative; }
html[lang="ar"] #rec1948900141 { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
html[lang="ar"] #rec1948900141 .tn-elem[data-elem-type="text"],
html[lang="ar"] #rec1948900141 .tn-elem[data-elem-type="shape"],
html[lang="ar"] #rec1948900141 .tn-elem[data-elem-id="1771669329125"] { display: none; }
/* The Arabic text is taller than the artboard: stretch it and pin the lower florals to its bottom
   (same gaps as the original layout) so they stay under the text. */
html[lang="ar"] #rec1948900141 .t396,
html[lang="ar"] #rec1948900141 .t396__artboard,
html[lang="ar"] #rec1948900141 .t396__carrier,
html[lang="ar"] #rec1948900141 .t396__filter { height: 100%; }
html[lang="ar"] #rec1948900141 .tn-elem[data-elem-id="1667232729746"]        { top: auto; bottom: -312px; }
html[lang="ar"] #rec1948900141 .tn-elem[data-elem-id="1771669166883000010"] { top: auto; bottom: -175px; }
@media screen and (max-width: 1199px) {
  html[lang="ar"] #rec1948900141 .tn-elem[data-elem-id="1667232729746"]        { bottom: -128px; }
  html[lang="ar"] #rec1948900141 .tn-elem[data-elem-id="1771669166883000010"] { bottom: -36px; }
}
html[lang="ar"] .ar-card {
  display: block;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  max-width: 496px;
  min-height: max(770px, 100vh);
  margin: 0 auto;
  padding: 90px 20px 180px;
  text-align: center;
  color: #372d24;
  font-family: 'Noto Sans Arabic', sans-serif;
  font-weight: 300;
}
.ar-card p { margin: 0; }
.ar-card__basmala { font-size: 26px; line-height: 1.6; font-weight: 400; }
.ar-card__ayah    { margin-top: 18px !important; font-size: 19px; line-height: 2; }
.ar-card__small   { margin-top: 6px !important; font-size: 14px; }
.ar-card__rule    { width: 100px; height: 1px; margin: 26px auto; border: 0; background: #372d24; }
.ar-card__text    { margin-top: 18px !important; font-size: 17px; line-height: 1.8; }
.ar-card__hosts   { margin-top: 14px !important; font-size: 20px; line-height: 1.6; font-weight: 400; }
.ar-card__name    { margin-top: 26px !important; font-size: 50px; line-height: 1.4; }
.ar-card__and     { font-size: 30px; line-height: 1.2; }
.ar-card__and + .ar-card__name { margin-top: 0 !important; }
.ar-card__name + .ar-card__text { margin-top: 30px !important; }
.ar-card__date    { margin-top: 40px !important; font-size: 30px; line-height: 1.55; }
.ar-card__date + .ar-card__rule { margin: 12px auto; }
.ar-card__time    { font-size: 16px; line-height: 1.55; }
@media screen and (max-width: 1199px) {
  html[lang="ar"] .ar-card { max-width: 348px; min-height: max(945px, 100vh); padding: 70px 14px 350px; }
  .ar-card__name { font-size: 44px; }
  .ar-card__date { font-size: 25px; }
}