/* The guest extras (extras/*.js): the Details button, the Details sheet and its cards, the thank-you page,
   and the small additions on the card and the pass. Logical properties only, so Arabic mirrors itself.
   Tokens come from styles.css. Cards, not ruled rows (DD-22). */

/* ---------- the always-there button ---------- */
.x-fab {
  position: fixed; z-index: 45; inset-block-start: calc(var(--safe-t) + var(--s2)); inset-inline-end: calc(var(--s4) + var(--lang-w, 96px) + var(--s2));
  min-inline-size: 48px; min-block-size: 48px; padding-inline: 0; border-radius: var(--r-full); border: 1px solid var(--night-edge);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  background: var(--night-glass); color: var(--cream); box-shadow: 0 6px 18px rgba(8, 14, 32, 0.4);
  transition: transform var(--d-press) var(--ease-arrive);
}
html.is-looking .x-fab, html[data-camera="look"] .x-fab { visibility: hidden; pointer-events: none; }
.x-fab:active { transform: scale(0.95); }
.x-fab svg { inline-size: 22px; block-size: 22px; color: var(--gold); }
.x-fab .lbl { display: none; font: 600 var(--t-small)/1 var(--f-ui); }
@media (min-width: 700px) { .x-fab { padding-inline: var(--s4); } .x-fab .lbl { display: inline; } }
@media (hover: hover) { .x-fab:hover { border-color: var(--gold); } }
/* on the narrowest phones the title row has no room for a third control: the button drops under the language switch, icon only */
@media (max-width: 360px) {
  .x-fab { inset-inline-end: var(--s4); inset-block-start: calc(var(--safe-t) + var(--s2) + 48px + var(--s2) + 56px + var(--s2)); }   /* under the language switch and the look toggle */
}
/* on the narrowest phones the reply sheet needs the whole width: the button waits until the reply is sent or closed */
@media (max-width: 360px) { html[data-step="reply"] .x-fab { visibility: hidden; pointer-events: none; } }
/* the top bars keep clear of the button */
html[data-extras]:not([data-step="card"]):not([data-step="ticket"]) .topbar { padding-inline-end: calc(var(--s4) + var(--lang-w, 96px) + var(--s2) + 48px + var(--s2)); }
@media (min-width: 700px) {
  html[data-extras]:not([data-step="card"]):not([data-step="ticket"]) .topbar { padding-inline-end: calc(var(--s4) + var(--lang-w, 96px) + var(--s2) + 150px + var(--s2)); }
}
@media (max-width: 360px) {
  html[data-extras]:not([data-step="card"]):not([data-step="ticket"]) .topbar { padding-inline-end: calc(var(--s4) + var(--lang-w, 96px) + var(--s2)); }
}

/* ---------- the sheet: bottom sheet on a phone, side panel on a desktop ---------- */
.x-layer { position: fixed; inset: 0; z-index: 55; }
.x-scrim { position: absolute; inset: 0; background: rgba(8, 14, 32, 0.6); }
.x-panel {
  position: absolute; inset-inline: 0; inset-block-end: 0; margin-inline: auto; inline-size: min(100%, 540px);
  max-block-size: calc(100dvh - var(--safe-t) - 68px); display: flex; flex-direction: column; overflow: hidden;
  background: #16244A; color: var(--cream); border: 1px solid var(--night-edge); border-block-end: 0;
  border-start-start-radius: 22px; border-start-end-radius: 22px; box-shadow: var(--night-shadow);
}
.x-grab { display: block; flex: none; inline-size: 44px; block-size: 4px; border-radius: 2px; margin: 10px auto 0; background: rgba(185, 198, 228, 0.4); }
.x-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s2) var(--s4) var(--s1) var(--s5); }
.x-head h2 { font: 400 var(--t-h1)/1.15 var(--f-display); color: var(--cream); }
html[lang="ar"] .x-head h2, html[lang="ar"] .xcard h3 { font-family: var(--f-ar); font-weight: 500; }
.x-nav { flex: none; display: flex; gap: var(--s2); padding: var(--s2) var(--s5) var(--s3); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
.x-nav::-webkit-scrollbar { display: none; }
.x-chip {
  flex: none; scroll-snap-align: start; display: inline-flex; align-items: center; gap: var(--s2); min-block-size: 48px; padding-inline: var(--s4);
  border: 0; border-radius: var(--r-full); background: rgba(246, 240, 230, 0.08); color: var(--cream); font: 600 var(--t-small)/1 var(--f-ui);
  transition: transform var(--d-press) var(--ease-arrive), background var(--d-small);
}
.x-chip svg { inline-size: 18px; block-size: 18px; color: var(--gold); }
.x-chip:active { transform: scale(0.96); }
@media (hover: hover) { .x-chip:hover { background: rgba(246, 240, 230, 0.16); } }
.x-body { flex: 1; min-block-size: 0; overflow-y: auto; overscroll-behavior: contain; display: grid; gap: var(--s3); align-content: start; padding: var(--s1) var(--s5) calc(var(--safe-b) + var(--s6)); scroll-behavior: auto; }
@media (min-width: 900px) {
  .x-panel { inset-block: 0; inset-inline: auto 0; margin: 0; inline-size: 460px; max-block-size: none; border: 0; border-inline-start: 1px solid var(--night-edge); border-radius: 0; border-start-start-radius: 22px; border-end-start-radius: 22px; }
  html[dir="rtl"] .x-panel { border-radius: 0; border-start-end-radius: 22px; border-end-end-radius: 22px; }
  .x-grab { display: none; }
  .x-head { padding-block-start: 68px; }
}

/* ---------- the rounded cards ---------- */
.xcard { background: rgba(246, 240, 230, 0.06); border: 1px solid rgba(185, 198, 228, 0.14); border-radius: 18px; padding: var(--s4); display: grid; gap: var(--s3); scroll-margin-block-start: var(--s2); }
.xhead { display: flex; align-items: center; gap: var(--s3); }
.xico { inline-size: 36px; block-size: 36px; border-radius: 50%; display: grid; place-items: center; flex: none; background: rgba(214, 181, 101, 0.16); color: var(--gold); }
.xico svg { inline-size: 20px; block-size: 20px; }
.xcard h3 { font: 500 var(--t-h2)/1.25 var(--f-display); color: var(--cream); }
.xcard h4 { font: 500 1.0625rem/1.3 var(--f-display); color: var(--cream); }
.xp { color: var(--mist); font-size: var(--t-small); line-height: 1.55; }
.xp.xnote, .xnote { color: var(--cream); font-size: var(--t-body); line-height: 1.5; }
.xsub { margin-block-start: var(--s2); }
.xcard h3, .xcard h4, .xcard p, .xitem *, .xtile .k, .xtile .v { margin: 0; }
.xtile { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s3); border-radius: 12px; background: rgba(8, 14, 32, 0.28); }
.xtile > svg { inline-size: 22px; block-size: 22px; flex: none; color: var(--gold); margin-block-start: 1px; }
.xtile .xt { display: grid; gap: 2px; min-inline-size: 0; }
.xtile .k { font: 600 var(--t-label)/1.3 var(--f-ui); letter-spacing: .06em; font-variant-caps: all-small-caps; color: var(--gold); }
.xtile .v { color: var(--cream); font-size: var(--t-small); line-height: 1.5; }
html[lang="ar"] .xtile .k, html[lang="ar"] .x-fab .lbl { letter-spacing: 0; font-variant-caps: normal; }
.btn.small { min-block-size: 48px; font-size: var(--t-small); padding-inline: var(--s3); }
.btn.main.small { min-block-size: 52px; }
.xbtns { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s2); }
.xbtns.three { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
.xcard .btn.quiet { justify-content: flex-start; padding-inline: 0; }

/* countdown */
.xnums { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.xnum { border-radius: 14px; padding: var(--s3); text-align: center; background: rgba(8, 14, 32, 0.34); }
.xnum .n { display: block; font: 400 2.75rem/1 var(--f-display); color: var(--candle); }
.xnum .u { display: block; margin-block-start: var(--s1); font: 600 var(--t-label)/1.3 var(--f-ui); letter-spacing: .06em; font-variant-caps: all-small-caps; color: var(--mist); }
html[lang="ar"] .xnum .u { letter-spacing: 0; font-variant-caps: normal; font-size: var(--t-small); }
.xcount { display: grid; gap: var(--s2); }

/* the day */
.xlist { display: grid; gap: var(--s2); }
.xitem { display: grid; gap: var(--s1); padding: var(--s3); border-radius: 14px; background: rgba(8, 14, 32, 0.28); }
.xitem .xwhen { color: var(--candle); font-weight: 600; font-size: var(--t-small); }
.xitem .xwhere { color: var(--mist); font-size: var(--t-small); }
.xitem .xbtns { margin-block-start: var(--s2); }

/* the door pass inside the sheet */
.xdoor { display: grid; justify-items: center; gap: var(--s2); padding: var(--s4); border-radius: 14px; background: var(--paper); color: var(--ink); text-align: center; }
.xdoor .qr, .ticket .qr { inline-size: 196px; block-size: 196px; padding: var(--s3); background: #fff; border-radius: var(--r-field); }
.xdoor .qr svg { inline-size: 100%; block-size: 100%; display: block; }
.xdoor .xcode { font-size: var(--t-label); letter-spacing: .06em; color: var(--ink-soft); word-break: break-all; }
.xdoor .xshow { font: 500 var(--t-h2)/1.3 var(--f-display); color: var(--ink); }
html[lang="ar"] .xdoor .xshow { font-family: var(--f-ar); }

/* the dua */
.xdua { margin: 0; display: grid; gap: var(--s2); text-align: center; padding: var(--s4) var(--s3); border-radius: 14px; background: rgba(8, 14, 32, 0.28); }
.xdua .ar { margin: 0; font: 500 1.625rem/1.9 var(--f-ar); color: var(--gold-bright); }
.xdua .en { color: var(--cream); font-size: var(--t-small); line-height: 1.5; }
.xdua figcaption { color: var(--mist); font-size: var(--t-label); }
.xdua.compact { background: transparent; padding-block: var(--s2); }
.invite .xdua { background: var(--paper-deep); margin-block-start: var(--s4); }
.invite .xdua .ar { color: var(--gold-ink); font-size: 1.375rem; }
.invite .xdua .en { color: var(--ink); }
.invite .xdua figcaption { color: var(--ink-soft); }

/* menu */
.xmenu { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.xmenu li { display: flex; align-items: center; gap: var(--s3); padding: var(--s3); border-radius: 14px; background: rgba(8, 14, 32, 0.28); color: var(--cream); font-size: var(--t-small); line-height: 1.45; }
.xmenu .xno { flex: none; inline-size: 30px; block-size: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(214, 181, 101, 0.18); color: var(--gold-bright); font: 600 var(--t-small)/1 var(--f-ui); }

/* prayer */
.xtimes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.xtime { border-radius: 14px; padding: var(--s3); background: rgba(8, 14, 32, 0.34); display: grid; gap: var(--s1); }
.xtime .k { font: 600 var(--t-label)/1.3 var(--f-ui); color: var(--mist); }
html[lang="ar"] .xtime .k { font-size: var(--t-small); }
.xtime .v { font: 400 1.5rem/1.1 var(--f-display); color: var(--candle); }

/* help */
.xcontact { display: grid; gap: var(--s2); padding: var(--s3); border-radius: 14px; background: rgba(8, 14, 32, 0.28); }
.xline { color: var(--cream); font-size: var(--t-small); text-align: start; }

/* forms */
.xform { display: grid; gap: var(--s2); }
.xform label { font: 600 var(--t-label)/1.3 var(--f-ui); color: var(--mist); }
html[lang="ar"] .xform label { font-size: var(--t-small); }
.xin { inline-size: 100%; min-block-size: 48px; padding: var(--s3); border-radius: 12px; border: 1.5px solid rgba(185, 198, 228, 0.4); background: rgba(8, 14, 32, 0.4); color: var(--cream); font-size: 1rem; }
textarea.xin { resize: vertical; line-height: 1.5; }
.xin::placeholder { color: rgba(185, 198, 228, 0.65); }
.xin:focus-visible { outline: 2px solid var(--cream); outline-offset: 2px; border-color: transparent; }
.xerr { color: var(--candle); font-size: var(--t-small); }
.xok { color: var(--cream); font-size: var(--t-small); padding: var(--s2) var(--s3); border-radius: 12px; background: rgba(214, 181, 101, 0.16); }
.xwishes { display: grid; gap: var(--s2); }
.xwish { padding: var(--s3) var(--s4); border-radius: 14px; background: rgba(8, 14, 32, 0.28); display: grid; gap: var(--s1); border-inline-start: 3px solid var(--gold); }
.xwish .w { color: var(--cream); font-size: var(--t-small); line-height: 1.55; }
.xwish .by { color: var(--gold); font: 600 var(--t-label)/1.3 var(--f-ui); }

/* ---------- the thank-you page ---------- */
.xthanks { position: fixed; inset: 0; z-index: 60; overflow-y: auto; overscroll-behavior: contain; background: radial-gradient(90% 50% at 50% 0%, rgba(46, 71, 133, 0.75), transparent 70%), var(--night); }
.xthanks-in { inline-size: min(100%, 640px); margin-inline: auto; padding: calc(var(--safe-t) + var(--s7)) var(--s5) calc(var(--safe-b) + var(--s7)); display: grid; gap: var(--s4); justify-items: center; text-align: center; }
.xstar svg { inline-size: 36px; block-size: 36px; color: var(--gold); }
.xthanks h2 { font: 400 var(--t-show)/1.1 var(--f-display); color: var(--cream); }
.xthanks h3 { font: 500 var(--t-h2)/1.3 var(--f-display); color: var(--cream); margin-block-start: var(--s4); }
html[lang="ar"] .xthanks h2, html[lang="ar"] .xthanks h3 { font-family: var(--f-ar); font-weight: 500; }
.xnames { font: italic 400 1.375rem/1.3 var(--f-display); color: var(--gold-bright); }
html[lang="ar"] .xnames { font-style: normal; font-family: var(--f-ar); }
.xmsg { max-inline-size: 36ch; color: var(--cream); font-size: 1.125rem; line-height: 1.65; }
.xgal { inline-size: 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s2); }
.xgal img, .xg-tile { inline-size: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 14px; display: block; background: var(--dusk); overflow: hidden; }
.xg-tile svg { inline-size: 100%; block-size: 100%; display: block; }
.xsamples { max-inline-size: 40ch; }
.xthanks .btn.main { max-inline-size: 360px; margin-block-start: var(--s4); }

/* ---------- on the card and the pass ---------- */
.invite .xdetails { justify-content: center; inline-size: 100%; margin-block-start: var(--s3); gap: var(--s2); }
.invite .xdetails svg { inline-size: 20px; block-size: 20px; }
.ticket-actions .btn svg { inline-size: 20px; block-size: 20px; margin-inline-end: var(--s2); }
.ticket .xnotes { display: grid; gap: var(--s2); padding: 0 var(--s5) var(--s2); }
.ticket .xnote-tile { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s2) var(--s3); border-radius: var(--r-field); background: var(--paper-deep); font-size: var(--t-small); line-height: 1.45; color: var(--ink); text-align: start; }
.ticket .xnote-tile svg { inline-size: 20px; block-size: 20px; flex: none; color: var(--gold-ink); margin-block-start: 1px; }
.ticket .stub .xshow { font-weight: 600; color: var(--ink); }
.ticket .stub .xcode { word-break: break-all; letter-spacing: .06em; }

@media (max-height: 640px) { .x-body { padding-block-end: calc(var(--safe-b) + var(--s5)); } .xnum .n { font-size: 2.25rem; } }
@media (prefers-reduced-motion: reduce) { .x-fab, .x-chip { transition: none; } }