/* =====================================================================
   Sh8adat — styles
   Aubergine ink, foil gold, cool pearl. Aref Ruqaa for headlines,
   Readex Pro for everything else. Logical properties keep RTL and LTR in sync.
   ===================================================================== */

:root {
    --ink: #2A1433;
    --plum: #4B2453;
    --gold: #B8893B;
    --gold-deep: #8C6424;      /* gold dark enough for small text on light backgrounds */
    --gold-soft: #E9D7AE;
    --pearl: #FAF7FB;
    --mist: #EADFEA;
    --line: #E2D4E2;
    --muted: #6A5570;
    --white: #FFFFFF;

    --wa-bg: #EFE7DD;
    --wa-head: #075E54;
    --wa-out: #D9FDD3;
    --wa-blue: #53BDEB;

    --font-display: "Aref Ruqaa", "Times New Roman", serif;
    --font-body: "Readex Pro", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;

    --wrap: 1160px;
    --gutter: clamp(16px, 4vw, 32px);
    --radius-sm: 8px;
    --radius: 14px;
    --radius-lg: 28px;
}

/* Hidden elements stay hidden even when a class sets display — except inside Moyasar's form, which manages its own */
[hidden]:not(.mysr-form *) { display: none !important; }
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
    margin: 0;
    background: var(--pearl);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.75;
    font-weight: 400;
    overflow-x: hidden;
}
html[dir="ltr"] body { line-height: 1.6; }

img, svg { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0; font-weight: 700; }

:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

.skip {
    position: absolute; inset-inline-start: 12px; top: -60px; z-index: 50;
    background: var(--ink); color: var(--white); padding: 10px 16px; border-radius: var(--radius-sm);
    text-decoration: none;
}
.skip:focus { top: 12px; }

/* ----------------------------------------------------------- Buttons */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5em;
    min-height: 48px; padding: 0 1.5em;
    border: 2px solid transparent; border-radius: 999px;
    font: 600 1rem/1 var(--font-body); text-decoration: none; cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn--gold { background: var(--gold); color: var(--ink); }
.btn--gold:hover { background: #C99A4A; }
.btn--ink { background: var(--ink); color: var(--pearl); }
.btn--ink:hover { background: var(--plum); }
.btn--ghost { border-color: currentColor; color: var(--ink); background: transparent; }
.btn--ghost:hover { background: var(--mist); }
.btn--small { min-height: 40px; padding: 0 1.1em; font-size: .9375rem; }
.btn--block { width: 100%; }
.btn.is-disabled { opacity: .5; cursor: not-allowed; }
.btn small { font-weight: 400; font-size: .8em; }

.linkbtn { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.inline { display: inline; margin: 0; }

/* ----------------------------------------------------------- Top bar */
.topbar { position: sticky; top: 0; z-index: 20; background: rgba(250, 247, 251, .92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.topbar__inner { display: flex; align-items: center; gap: 24px; min-height: 68px; }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.logo__mark { width: 34px; height: 34px; }
.logo__text { font-family: var(--font-display); font-size: 1.6rem; line-height: 1; font-weight: 700; }
.mainnav { display: flex; gap: 28px; margin-inline-start: 16px; }
.mainnav a { text-decoration: none; font-size: .9375rem; color: var(--muted); }
.mainnav a:hover { color: var(--ink); }
.topbar__actions { display: flex; align-items: center; gap: 18px; margin-inline-start: auto; }
.topbar__login { text-decoration: none; font-size: .9375rem; }
.langswitch { font-size: .875rem; text-decoration: none; color: var(--muted); padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; }
.langswitch:hover { color: var(--ink); border-color: var(--ink); }

@media (max-width: 860px) {
    .mainnav { display: none; }
}
@media (max-width: 480px) {
    /* Phones: only "Log in" in the header (the page itself has the big "Create your invitation" button) */
    .topbar__start { display: none; }
    .topbar__login { display: inline-flex; align-items: center; min-height: 40px; padding: 0 1.1em; border-radius: 999px;
                     background: var(--ink); color: var(--pearl); font-weight: 600; font-size: .9375rem; }
    .topbar__actions { gap: 10px; }
    .logo__text { font-size: 1.35rem; }
}

/* ----------------------------------------------------------- Flash messages */
.flashes { padding-top: 16px; }
.flash { margin: 0 0 10px; padding: 12px 16px; border-radius: var(--radius-sm); font-size: .9375rem; border-inline-start: 4px solid; }
.flash--success { background: #EAF5EC; border-color: #2E7D4A; color: #1D5432; }
.flash--error   { background: #FBECEC; border-color: #B23A3A; color: #7E2222; }
.flash--info    { background: var(--mist); border-color: var(--plum); color: var(--ink); }

/* ----------------------------------------------------------- Hero */
.hero { padding: clamp(40px, 7vw, 88px) 0 clamp(56px, 8vw, 104px); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.hero__title {
    font-family: var(--font-display);
    font-size: clamp(2.6rem, 6vw, 4.6rem);
    line-height: 1.22;
    letter-spacing: 0;
    max-width: 12ch;
}
html[dir="ltr"] .hero__title { line-height: 1.08; max-width: 14ch; }
.hero__lead { margin-top: 24px; font-size: 1.1875rem; color: var(--muted); max-width: 46ch; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero__points { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 8px; font-size: .9375rem; color: var(--muted); }
.hero__points li { display: flex; align-items: center; gap: 10px; }
.hero__points li::before {
    content: ""; width: 18px; height: 18px; flex: none; border-radius: 50%;
    background: var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.4 7.8 12 13 6.5' fill='none' stroke='%232A1433' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat;
}

.hero__stage { display: flex; justify-content: center; position: relative; }
.hero__stage::before {           /* a quiet arch behind the phone, like an invitation frame */
    content: ""; position: absolute; inset: 6% 8% -4%;
    border: 2px solid var(--gold-soft);
    border-radius: 999px 999px var(--radius-lg) var(--radius-lg);
    z-index: 0;
}

/* Phone */
.phone {
    position: relative; z-index: 1;
    width: min(340px, 100%);
    background: var(--ink);
    border-radius: 44px;
    padding: 12px;
    box-shadow: 0 30px 60px -28px rgba(42, 20, 51, .55);
}
.phone__notch { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 92px; height: 22px; background: var(--ink); border-radius: 0 0 14px 14px; z-index: 2; }
.chat { background: var(--wa-bg); border-radius: 34px; overflow: hidden; direction: inherit; }
.chat__head { display: flex; align-items: center; gap: 10px; background: var(--wa-head); color: var(--white); padding: 30px 14px 12px; }
.chat__avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--plum); display: grid; place-items: center; flex: none; }
.chat__avatar svg { width: 26px; height: 26px; }
.chat__who { display: grid; line-height: 1.3; }
.chat__name { font-weight: 600; font-size: .9375rem; }
.chat__status { font-size: .75rem; opacity: .85; }
.chat__body {
    padding: 14px 12px 18px;
    display: flex; flex-direction: column; gap: 6px;
    background-image: radial-gradient(rgba(42, 20, 51, .06) 1px, transparent 1px);
    background-size: 14px 14px;
}

.bubble { position: relative; max-width: 88%; border-radius: 10px; font-size: .875rem; line-height: 1.6; box-shadow: 0 1px 1px rgba(0, 0, 0, .08); }
.bubble--in { align-self: flex-start; background: var(--white); padding: 4px 4px 6px; border-start-start-radius: 2px; }
.bubble--out { align-self: flex-end; background: var(--wa-out); padding: 6px 10px 4px; margin-top: 8px; border-start-end-radius: 2px; }
.bubble__text { margin: 8px 8px 0; color: #111B21; }
.bubble__time { display: inline-flex; align-items: center; gap: 3px; float: inline-end; font-size: .6875rem; color: #667781; margin: 2px 8px 0; direction: ltr; }
.bubble--out .bubble__time { margin: 4px 0 0 10px; }
.ticks { width: 16px; height: 11px; color: var(--wa-blue); }

.guestname { color: var(--plum); font-weight: 700; display: inline-block; transition: opacity .25s ease; }
.guestname.is-swapping { opacity: 0; }

/* The invitation card inside the bubble */
.card { background: var(--ink); border-radius: 8px; padding: 10px; color: var(--gold-soft); }
.card__frame {
    border: 1.5px solid var(--gold);
    border-radius: 120px 120px 6px 6px;
    padding: 26px 12px 18px;
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px;
}
.card__kicker { font-size: .6875rem; letter-spacing: .02em; opacity: .9; }
.card__title { font-family: var(--font-display); font-size: 1.05rem; color: var(--white); margin-top: 4px; }
.card__names { font-family: var(--font-display); font-size: 1.7rem; line-height: 1.35; color: var(--gold); }
.card__rule { width: 40px; height: 1px; background: var(--gold); margin: 6px 0; }
.card__date { font-size: .75rem; }

.qr-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; max-width: 88%; align-self: flex-start; width: 100%; }
.qr-btn {
    background: var(--white); border-radius: 8px; text-align: center; padding: 8px 4px;
    color: #027EB5; font-size: .8125rem; font-weight: 500; box-shadow: 0 1px 1px rgba(0, 0, 0, .08);
}

@media (max-width: 900px) {
    .hero__grid { grid-template-columns: 1fr; }
    .hero__title { max-width: 16ch; }
    .hero__stage { margin-top: 8px; }
    .hero__stage::before { display: none; }   /* the arch reads as a stray box when stacked */
}

/* ----------------------------------------------------------- Sections */
.section { padding: clamp(56px, 8vw, 104px) 0; }
.section__title {
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 3.6vw, 2.75rem);
    line-height: 1.3;
    max-width: 22ch;
    margin-bottom: clamp(28px, 4vw, 48px);
}
html[dir="ltr"] .section__title { line-height: 1.15; }
.section__title--small { font-size: clamp(1.6rem, 3vw, 2.1rem); margin-bottom: 0; }

/* Steps — a real sequence, numbered with the page's own numerals */
.how { background: var(--white); border-block: 1px solid var(--line); }
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; counter-reset: step; }
.step { counter-increment: step; position: relative; padding-top: 72px; }
.step::before {
    content: counter(step);
    position: absolute; top: 0; inset-inline-start: 0;
    width: 52px; height: 52px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--ink); color: var(--gold);
    font-family: var(--font-display); font-size: 1.6rem; line-height: 1;
}
html[lang="ar"] .step::before { content: counter(step, arabic-indic); }
.step::after {                      /* the thread connecting the steps */
    content: ""; position: absolute; top: 26px;
    inset-inline-start: 64px; inset-inline-end: -20px;
    height: 0; border-top: 2px dotted var(--gold);
}
.step:last-child::after { display: none; }
.step__title { font-size: 1.125rem; font-weight: 600; margin-bottom: 8px; }
.step__text { color: var(--muted); font-size: .9375rem; margin: 0; }

@media (max-width: 900px) {
    .steps { grid-template-columns: 1fr 1fr; row-gap: 40px; }
    .step:nth-child(2)::after { display: none; }
}
@media (max-width: 560px) {
    .steps { grid-template-columns: 1fr; }
    .step { padding-top: 0; padding-inline-start: 72px; min-height: 52px; }
    .step::after { display: none; }
}

/* Occasions */
.occasions { padding-block: clamp(40px, 6vw, 72px); }
.occasions__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 24px 48px; }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.chip { padding: 8px 18px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--white); font-size: .9375rem; }
.chip:first-child { border-color: var(--gold); background: var(--ink); color: var(--gold-soft); }

/* Features */
.features { padding-top: 0; }
.featlist { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 64px; }
.featlist__item { padding: 22px 0; border-top: 1px solid var(--line); }
.featlist dt { font-weight: 600; font-size: 1.0625rem; margin-bottom: 4px; }
.featlist dd { margin: 0; color: var(--muted); font-size: .9375rem; max-width: 48ch; }
@media (max-width: 720px) { .featlist { grid-template-columns: 1fr; } }

/* Delivery paths */
.paths { background: var(--ink); color: var(--pearl); }
.paths .section__title { color: var(--white); }
.paths__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.path { border: 1px solid rgba(233, 215, 174, .35); border-radius: var(--radius); padding: 28px; }
.path__icon { width: 44px; height: 44px; color: var(--gold); margin-bottom: 16px; }
.path__title { font-size: 1.1875rem; font-weight: 600; margin-bottom: 8px; color: var(--white); }
.path p { color: rgba(250, 247, 251, .82); margin: 0; font-size: .9375rem; max-width: 52ch; }
.paths__note {
    margin: 28px 0 0; padding-inline-start: 16px; border-inline-start: 3px solid var(--gold);
    color: var(--gold-soft); font-size: .9375rem; max-width: 72ch;
}
@media (max-width: 720px) { .paths__grid { grid-template-columns: 1fr; } }

/* Pricing */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; align-items: stretch; }
.plan {
    display: flex; flex-direction: column;
    background: var(--white); border: 1.5px solid var(--line); border-radius: var(--radius-lg);
    padding: 32px 28px;
}
.plan--featured { background: var(--plum); border-color: var(--plum); color: var(--pearl); }
.plan__badge { align-self: flex-start; margin: -8px 0 14px; padding: 4px 12px; border-radius: 999px; background: var(--gold); color: var(--ink); font-size: .8125rem; font-weight: 600; }
.plan__name { font-size: 1.125rem; font-weight: 600; }
.plan__guests { margin: 4px 0 18px; color: var(--muted); }
.plan--featured .plan__guests, .plan--featured .plan__per { color: rgba(250, 247, 251, .78); }
.plan__price { font-family: var(--font-display); font-size: 3.2rem; line-height: 1; margin: 0 0 6px; direction: ltr; text-align: start; }
html[dir="rtl"] .plan__price { text-align: right; }
.plan--featured .plan__price { color: var(--gold-soft); }
.plan__per { font-size: .875rem; color: var(--muted); }
.plan__inc { list-style: none; padding: 0; margin: 8px 0 28px; display: grid; gap: 8px; font-size: .9375rem; flex: 1; }
.plan__inc li { padding-inline-start: 22px; position: relative; }
.plan__inc li::before { content: ""; position: absolute; inset-inline-start: 0; top: .7em; width: 10px; height: 2px; background: var(--gold); }
.plan--featured .btn--gold { background: var(--gold); }
.pricing__note { margin: 24px 0 0; color: var(--muted); font-size: .9375rem; max-width: 72ch; }
@media (max-width: 900px) { .plans { grid-template-columns: 1fr; max-width: 460px; } }

/* FAQ */
.faq { background: var(--white); border-top: 1px solid var(--line); }
.faq__inner { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 48px; align-items: start; }
.faq__list { border-top: 1px solid var(--line); }
.qa { border-bottom: 1px solid var(--line); }
.qa summary {
    list-style: none; cursor: pointer; padding: 20px 0; font-weight: 600;
    display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
    content: ""; width: 12px; height: 12px; flex: none;
    border-inline-end: 2px solid var(--gold-deep); border-bottom: 2px solid var(--gold-deep);
    transform: rotate(45deg); transition: transform .2s ease; margin-top: -6px;
}
.qa[open] summary::after { transform: rotate(-135deg); margin-top: 4px; }
.qa p { margin: 0 0 20px; color: var(--muted); max-width: 62ch; }
@media (max-width: 860px) { .faq__inner { grid-template-columns: 1fr; gap: 0; } }

/* Closing */
.closing { background: var(--plum); color: var(--pearl); padding: clamp(56px, 8vw, 96px) 0; text-align: center; }
.closing__inner { display: flex; flex-direction: column; align-items: center; }
.closing__title { font-family: var(--font-display); font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.3; max-width: 20ch; color: var(--white); }
.closing__text { margin: 16px 0 28px; color: rgba(250, 247, 251, .82); }

/* Footer */
.footer { background: var(--ink); color: rgba(250, 247, 251, .75); padding: 32px 0; font-size: .875rem; }
.footer__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; }
.footer__brand { display: flex; align-items: baseline; gap: 12px; color: var(--pearl); }
.footer__tag { color: rgba(250, 247, 251, .65); }
.footer__wa { color: var(--gold-soft); }
.footer__copy { margin: 0; margin-inline-start: auto; }

/* ----------------------------------------------------------- Auth pages */
.auth { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: calc(100vh - 69px - 90px); }
.auth__panel { width: 100%; max-width: 480px; margin: 0 auto; padding: clamp(32px, 6vw, 72px) var(--gutter); }
.auth__title { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 2.6rem); line-height: 1.3; }
.auth__sub { color: var(--muted); margin: 8px 0 28px; }
.auth__switch { margin-top: 24px; font-size: .9375rem; color: var(--muted); }
.auth__switch a { color: var(--ink); font-weight: 600; }
.auth__side { background: var(--ink); color: var(--pearl); padding: clamp(32px, 6vw, 72px); display: flex; flex-direction: column; justify-content: center; }
.auth__side-title { font-family: var(--font-display); font-size: clamp(1.8rem, 3vw, 2.4rem); line-height: 1.3; color: var(--white); margin-bottom: 8px; }
.auth__side-text { color: rgba(250, 247, 251, .78); margin-bottom: 32px; }
@media (max-width: 860px) {
    .auth { grid-template-columns: 1fr; }
    .auth__side { display: none; }
}

.tally { list-style: none; margin: 0; padding: 0; max-width: 380px; border-top: 1px solid rgba(233, 215, 174, .25); }
.tally__row { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid rgba(233, 215, 174, .25); font-size: .9375rem; }
.tally__state { font-size: .8125rem; padding: 2px 10px; border-radius: 999px; }
.tally__state--yes { background: var(--gold); color: var(--ink); }
.tally__state--no { border: 1px solid rgba(250, 247, 251, .45); }
.tally__state--pending { color: rgba(250, 247, 251, .6); }

/* Forms */
.form { display: grid; gap: 18px; }
.field { display: grid; gap: 6px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 480px) { .field-row { grid-template-columns: 1fr; } }
.field label { font-weight: 500; font-size: .9375rem; }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field input[type="password"] {
    width: 100%; min-height: 48px; padding: 10px 14px;
    border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: var(--white);
    font: inherit; color: var(--ink);
}
.field input:focus { outline: none; border-color: var(--plum); box-shadow: 0 0 0 3px rgba(75, 36, 83, .15); }
.field input[aria-invalid="true"] { border-color: #B23A3A; }
html[dir="rtl"] .field input[dir="ltr"] { text-align: right; }
.field__hint { margin: 0; font-size: .8125rem; color: var(--muted); }
.field__error { margin: 0; font-size: .8125rem; color: #9E2B2B; }
.check { display: flex; align-items: flex-start; gap: 10px; font-size: .9375rem; cursor: pointer; }
.check input { width: 18px; height: 18px; margin-top: .3em; accent-color: var(--plum); flex: none; }

/* ----------------------------------------------------------- Dashboard */
.dash { padding-block: clamp(28px, 5vw, 56px) 80px; }
.dash__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px; }
.dash__title { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 2.6rem); line-height: 1.3; }
.dash__credits { display: grid; text-align: end; }
.dash__credits-label { font-size: .875rem; color: var(--muted); }
.dash__credits-value { font-family: var(--font-display); font-size: 2.2rem; line-height: 1.2; }
.dash__credits-value small { font-family: var(--font-body); font-size: .9375rem; color: var(--muted); }
.dash__actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 40px; }
.dash__h2 { font-size: 1.25rem; font-weight: 600; margin-bottom: 16px; }

.empty { text-align: center; padding: 56px 24px; border: 1.5px dashed var(--line); border-radius: var(--radius-lg); background: var(--white); }
.empty__art { width: 120px; margin: 0 auto 16px; color: var(--plum); }
.empty__title { font-weight: 600; font-size: 1.125rem; margin-bottom: 4px; }
.empty__text { color: var(--muted); margin: 0 auto; max-width: 44ch; }

.eventlist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.eventlist__row { display: grid; grid-template-columns: 1fr auto auto auto; gap: 20px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); }
.eventlist__title { font-weight: 600; }
.eventlist__meta { color: var(--muted); font-size: .875rem; }
.pill { font-size: .8125rem; padding: 3px 12px; border-radius: 999px; background: var(--mist); }
.pill--sent { background: var(--ink); color: var(--gold-soft); }
.pill--sending, .pill--paid { background: var(--gold-soft); }
@media (max-width: 640px) {
    .eventlist__row { grid-template-columns: 1fr auto; }
    .eventlist__meta { display: none; }
}

/* ----------------------------------------------------------- Shared utilities */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.muted { color: var(--muted); }
.tag { display: inline-block; font-size: .75rem; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--plum); color: var(--plum); margin-inline-start: 6px; vertical-align: middle; }
.pill--active { background: #E5F2E8; color: #1D5432; }
.pill--disabled { background: #F6E3E3; color: #7E2222; }
.linkbtn--danger { color: #9E2B2B; }
.btn--danger { color: #9E2B2B; border-color: #9E2B2B; }
.btn--danger:hover { background: #FBECEC; }
.field select, .field input[type="number"], .field input[type="search"], .field input[type="file"] {
    width: 100%; min-height: 48px; padding: 10px 14px;
    border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: var(--white);
    font: inherit; color: var(--ink);
}
.field input[type="file"] { padding: 10px; }
.field select:focus, .field input[type="number"]:focus { outline: none; border-color: var(--plum); box-shadow: 0 0 0 3px rgba(75, 36, 83, .15); }

/* ----------------------------------------------------------- Admin */
.admin { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 40px; padding-block: 32px 80px; align-items: start; }
.admin__nav { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 2px; }
.admin__label { font-family: var(--font-display); font-size: 1.4rem; margin: 0 0 10px; }
.admin__nav a { text-decoration: none; padding: 9px 14px; border-radius: var(--radius-sm); color: var(--muted); font-size: .9375rem; }
.admin__nav a:hover { background: var(--mist); color: var(--ink); }
.admin__nav a[aria-current="page"] { background: var(--ink); color: var(--pearl); }
.admin__nav .admin__back { margin-top: 14px; border-top: 1px solid var(--line); border-radius: 0; padding-top: 14px; }
.admin__title { font-family: var(--font-display); font-size: clamp(1.8rem, 3vw, 2.3rem); line-height: 1.3; margin-bottom: 20px; }
.admin__main { min-width: 0; }
@media (max-width: 860px) {
    .admin { grid-template-columns: 1fr; gap: 16px; padding-top: 16px; }
    .admin__nav { position: static; flex-direction: row; flex-wrap: wrap; gap: 6px; }
    .admin__label { display: none; }
    .admin__nav a { border: 1px solid var(--line); padding: 6px 12px; }
    .admin__nav .admin__back { margin-top: 0; padding-top: 6px; border-radius: var(--radius-sm); border-top: 1px solid var(--line); }
}

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0; margin: 0 0 28px; border: 1.5px solid var(--line); border-radius: var(--radius); background: var(--white); overflow: hidden; }
.stat { padding: 18px 20px; border-inline-end: 1px solid var(--line); }
.stat:last-child { border-inline-end: 0; }
.stat dt { font-size: .875rem; color: var(--muted); }
.stat dd { margin: 4px 0 0; font-family: var(--font-display); font-size: 2.1rem; line-height: 1.2; }
.stat__note { margin: 2px 0 0; font-size: .8125rem; color: var(--muted); }

.panel { background: var(--white); border: 1.5px solid var(--line); border-radius: var(--radius); padding: 22px 24px; margin-bottom: 20px; }
.panel__title { font-size: 1.0625rem; font-weight: 600; margin-bottom: 14px; }
.panel-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.panel-grid > .panel { margin-bottom: 20px; }
@media (max-width: 760px) { .panel-grid { grid-template-columns: 1fr; gap: 0; } }

.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.checklist li { display: flex; gap: 10px; align-items: center; }
.checklist li::before { content: ""; width: 16px; height: 16px; border: 2px solid var(--gold-deep); border-radius: 4px; flex: none; }
.checklist li.is-done::before { background: var(--gold); border-color: var(--gold); }
.checklist li.is-done a { color: var(--muted); text-decoration: line-through; }

.rowlist { list-style: none; margin: 0; padding: 0; }
.rowlist li { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: .9375rem; }
.rowlist li:last-child { border-bottom: 0; }
.rowlist li > :first-child { flex: 1 1 140px; font-weight: 500; }
.rowlist--plain li > :first-child { font-weight: 400; }
.rowlist .ok { color: #1D5432; }

.searchbar { display: flex; gap: 10px; margin-bottom: 8px; max-width: 560px; }
.searchbar input { flex: 1; min-height: 44px; padding: 8px 14px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); font: inherit; background: var(--white); }

.tablewrap { overflow-x: auto; margin-bottom: 12px; }
.table { width: 100%; border-collapse: collapse; font-size: .9375rem; background: var(--white); }
.table th { text-align: start; font-weight: 500; font-size: .8125rem; color: var(--muted); padding: 10px 12px; border-bottom: 1.5px solid var(--line); white-space: nowrap; }
.table td { padding: 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table .num { text-align: end; font-variant-numeric: tabular-nums; }
html[dir="rtl"] .table .ltr-cell { text-align: right; }
.table .neg { color: #9E2B2B; }
.table .pos { color: #1D5432; }
.table--form td { padding: 8px 6px; }
.table--form input:not([type="checkbox"]) { width: 100%; min-width: 110px; min-height: 40px; padding: 6px 10px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); font: inherit; }
.table--form .w-num { min-width: 80px; max-width: 110px; }
.table--form input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--plum); }

.pager { display: flex; gap: 18px; align-items: center; font-size: .9375rem; }
.crumb { margin: 0 0 8px; font-size: .9375rem; }
.userhead { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.userhead .admin__title { margin-bottom: 4px; }
.userhead p { margin: 0 0 2px; }
.userhead__tags { display: flex; gap: 8px; align-items: flex-start; }
.bignum { font-family: var(--font-display); font-size: 2.4rem; line-height: 1.2; margin: 0 0 12px; }
.bignum small { font-family: var(--font-body); font-size: .9375rem; color: var(--muted); }
.form--inline { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
.form--inline .field { flex: 1 1 200px; }
.form--inline .btn { margin-top: 30px; }
.actions-col { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.actions-col form { margin: 0; }

.form--grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.field--wide { grid-column: 1 / -1; }
.field--narrow { max-width: 280px; }
@media (max-width: 640px) { .form--grid { grid-template-columns: 1fr; } }

.filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 20px; }
.filters a { text-decoration: none; font-size: .875rem; padding: 5px 14px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--white); }
.filters a[aria-current="page"] { background: var(--ink); color: var(--pearl); border-color: var(--ink); }

.designs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 20px; }
.design { background: var(--white); border: 1.5px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.design img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--mist); }
.design.is-hidden img { opacity: .45; }
.design__body { padding: 12px 14px 14px; }
.design__title { font-weight: 600; margin: 0 0 2px; }
.design__body .muted { margin: 0 0 10px; font-size: .875rem; }
.design__actions { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: .875rem; }
.design__actions form { margin: 0; }
.sortform { display: flex; gap: 6px; align-items: center; }
.sortform input { width: 64px; min-height: 32px; padding: 2px 6px; border: 1.5px solid var(--line); border-radius: 6px; font: inherit; }
.field > .btn { justify-self: start; }
.field input:not([type]) {
    width: 100%; min-height: 48px; padding: 10px 14px;
    border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: var(--white);
    font: inherit; color: var(--ink);
}
.field input:not([type]):focus { outline: none; border-color: var(--plum); box-shadow: 0 0 0 3px rgba(75, 36, 83, .15); }
.field textarea {
    width: 100%; padding: 10px 14px; border: 1.5px solid var(--line); border-radius: var(--radius-sm);
    background: var(--white); font: inherit; color: var(--ink); line-height: 1.7; resize: vertical;
}
.field textarea:focus { outline: none; border-color: var(--plum); box-shadow: 0 0 0 3px rgba(75, 36, 83, .15); }
.field input[type="date"], .field input[type="time"], .field input[type="url"] {
    width: 100%; min-height: 48px; padding: 10px 14px;
    border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: var(--white);
    font: inherit; color: var(--ink);
}
.field input[type="date"]:focus, .field input[type="time"]:focus, .field input[type="url"]:focus { outline: none; border-color: var(--plum); box-shadow: 0 0 0 3px rgba(75, 36, 83, .15); }

/* ----------------------------------------------------------- Event wizard */
.wiz { padding-block: clamp(24px, 4vw, 48px) 80px; max-width: 1000px; }
.wiz__title { font-family: var(--font-display); font-size: clamp(1.8rem, 3.5vw, 2.4rem); line-height: 1.3; margin-bottom: 18px; }
.wiz__h2 { font-size: 1.1875rem; font-weight: 600; margin: 8px 0 14px; }
.wiz__h3 { font-size: 1rem; font-weight: 600; margin: 18px 0 12px; color: var(--muted); }
.wiz__nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 24px; }
.wiz__nav--start { justify-content: flex-start; margin-top: 14px; }
fieldset.plain { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 18px; }
fieldset.plain[disabled] { opacity: .7; }
.small { font-size: .8125rem; }

/* Step bar: a real sequence */
.wizard { list-style: none; margin: 0 0 24px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; counter-reset: wz; }
.wizard__step { counter-increment: wz; border-top: 3px solid var(--line); padding-top: 8px; font-size: .875rem; }
.wizard__step > * { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--muted); }
.wizard__step > *::before { content: counter(wz); width: 24px; height: 24px; flex: none; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center; font-size: .8125rem; }
html[lang="ar"] .wizard__step > *::before { content: counter(wz, arabic-indic); }
.wizard__step.is-done { border-top-color: var(--gold); }
.wizard__step.is-done > *::before { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.wizard__step.is-current { border-top-color: var(--ink); }
.wizard__step.is-current > * { color: var(--ink); font-weight: 600; }
.wizard__step.is-current > *::before { background: var(--ink); border-color: var(--ink); color: var(--gold-soft); }
.wizard__step a:hover { color: var(--ink); }
@media (max-width: 560px) { .wizard__step > * { font-size: .75rem; } .wizard__step > *::before { width: 20px; height: 20px; } }

/* Design picker */
.picker { list-style: none; margin: 0 0 8px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; }
.picker__item { background: var(--white); border: 2px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.picker__item.is-selected { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }
.picker__item img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--mist); }
.picker__body { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 12px; }
.picker__title { font-weight: 600; font-size: .9375rem; }
.custom-card { display: flex; gap: 18px; align-items: center; }
.custom-card img { width: 120px; border-radius: var(--radius-sm); border: 2px solid var(--gold); }

/* Guests */
.panel__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.panel--warn { border-color: #E8C9A0; background: #FFFAF2; }
.field-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 640px) { .field-row--3 { grid-template-columns: 1fr; } }
.addguest { display: grid; grid-template-columns: 1.4fr 1.2fr 90px auto; gap: 10px; align-items: end; margin: 6px 0 18px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.addguest .btn { margin-bottom: 4px; }
@media (max-width: 640px) { .addguest { grid-template-columns: 1fr 1fr; } .addguest .field:first-of-type { grid-column: 1 / -1; } }
.table--compact td { padding: 6px 10px; font-size: .875rem; white-space: nowrap; }
.table--compact tr.is-head td { font-weight: 600; background: var(--mist); }
.pill--pending { background: var(--mist); }
.pill--queued { background: var(--gold-soft); }
.pill--delivered, .pill--read { background: #E5F2E8; color: #1D5432; }
.pill--failed { background: #F6E3E3; color: #7E2222; }
.pill--draft, .pill--ready { background: var(--mist); }

/* Review */
.review { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
@media (max-width: 820px) { .review { grid-template-columns: 1fr; } }
.chat--flat { border-radius: var(--radius); max-width: 400px; }
.chat--flat .chat__body { padding: 16px 14px; }
.chat--flat .bubble { max-width: 92%; }
.bubble__img { width: 100%; border-radius: 7px; display: block; }
.qr-buttons--one { grid-template-columns: 1fr; }
.summary { margin: 0 0 16px; display: grid; gap: 0; }
.summary > div { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--line); }
.summary dt { color: var(--muted); }
.summary dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.summary .neg { color: #9E2B2B; }

/* Event status page */
.viewhead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 12px; }
.viewhead .wiz__title { margin-bottom: 4px; }
.stats--inline { margin-bottom: 10px; }

/* ----------------------------------------------------------- Billing */
.buy { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 28px; align-items: start; margin-top: 12px; }
@media (max-width: 820px) { .buy { grid-template-columns: 1fr; } }
.buy__packages { border: 0; margin: 0; padding: 0; display: grid; gap: 10px; min-width: 0; }
.pkg { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: var(--white); border: 2px solid var(--line); border-radius: var(--radius); cursor: pointer; }
.pkg:hover { border-color: var(--plum); }
.pkg:has(input:checked) { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }
.pkg input { width: 20px; height: 20px; accent-color: var(--plum); flex: none; }
.pkg__body { display: grid; flex: 1; line-height: 1.5; }
.pkg__name { font-weight: 600; }
.pkg__guests { color: var(--ink); font-size: .9375rem; }
.pkg__per { color: var(--muted); font-size: .8125rem; }
.pkg__price { font-family: var(--font-display); font-size: 1.8rem; line-height: 1; }
.buy__pay { position: sticky; top: 92px; }
.buy__total { font-weight: 600; font-size: 1.0625rem; margin-bottom: 14px; }
#paypal-buttons { min-height: 120px; }
.pill--completed { background: #E5F2E8; color: #1D5432; }
.pill--refunded { background: var(--gold-soft); }
.pill--created { background: var(--mist); }

/* Honeypot: off-screen, not display:none (some bots skip hidden fields) */
.hp { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; opacity: 0; pointer-events: none; }

/* Email confirmation page */
.verify-art { width: 96px; color: var(--plum); margin-bottom: 12px; }

/* Error pages (404 / 403 / 500) */
.errpage { min-height: 62vh; display: grid; place-items: center; padding: 48px 16px; }
.errpage__card { width: 100%; max-width: 520px; text-align: center; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 44px 28px 36px; box-shadow: 0 10px 30px rgba(42, 20, 51, .06); }
.errpage__art { width: 92px; height: 92px; color: var(--gold); margin: 0 auto 6px; display: block; }
.errpage__code { font-size: .875rem; letter-spacing: .18em; color: var(--muted); margin: 0 0 6px; }
.errpage__title { font-family: "Aref Ruqaa", serif; font-size: clamp(1.6rem, 4vw, 2.1rem); color: var(--ink); margin: 0 0 10px; line-height: 1.3; }
.errpage__text { color: var(--muted); max-width: 40ch; margin: 0 auto 26px; line-height: 1.8; }
.errpage__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* Admin: invitations log (expandable rows) */
.loghead { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.logfilter { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: 12px; align-items: end; margin: 10px 0 6px; }
.logfilter .field { margin: 0; }
.logfilter input { width: 100%; min-height: 44px; padding: 8px 12px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); font: inherit; background: var(--white); }
.logfilter__btns { display: flex; gap: 12px; align-items: center; min-height: 44px; }
.logtools { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.loglist { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 8px; }
.logitem { background: var(--white); border: 1.5px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.logitem--failed { border-inline-start: 4px solid #B23B3B; }
.logitem[open] { border-color: var(--plum); box-shadow: 0 6px 18px rgba(42, 20, 51, .07); }
.logitem__sum { display: grid; grid-template-columns: 112px minmax(0, 1.2fr) minmax(0, 1.4fr) auto 20px; gap: 14px; align-items: center; padding: 12px 16px; cursor: pointer; list-style: none; }
.logitem__sum::-webkit-details-marker { display: none; }
.logitem__sum:hover { background: var(--pearl); }
.logitem__sum:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; }
.logitem__sum .pill { justify-self: start; }
.logitem__who, .logitem__event { display: flex; flex-direction: column; min-width: 0; }
.logitem__who > *, .logitem__event > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.logitem__chev { width: 20px; height: 20px; color: var(--muted); transition: transform .2s; }
.logitem[open] .logitem__chev { transform: rotate(180deg); }
.logitem__body { border-top: 1px solid var(--line); padding: 18px 18px 20px; display: grid; gap: 18px; background: #FDFBFD; }
.logerr { background: #FBEDED; border: 1px solid #EBC9C9; border-radius: var(--radius-sm); padding: 12px 14px; color: #6E1F1F; }
.logerr p { margin: 0 0 4px; } .logerr p:last-child { margin: 0; }
.logerr__title { font-weight: 600; }
.loggrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.loggrid h3, .logmsg h3 { font-size: .8125rem; letter-spacing: .04em; color: var(--muted); font-weight: 600; margin: 0 0 8px; }
.logdl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 12px; margin: 0; font-size: .9rem; }
.logdl dt { color: var(--muted); }
.logdl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.logdl dd[dir="ltr"] { text-align: left; unicode-bidi: isolate; }
[dir="rtl"] .logdl dd[dir="ltr"], [dir="rtl"] .logitem__who [dir="ltr"] { text-align: right; }
.logdl code { font-size: .8rem; }
.logmsg { display: flex; gap: 16px; align-items: flex-start; border-top: 1px dashed var(--line); padding-top: 16px; }
.logmsg__card img { width: 96px; border-radius: 8px; display: block; border: 1px solid var(--line); }
.logmsg__text { white-space: normal; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; margin: 0 0 6px; line-height: 1.8; max-width: 60ch; }
@media (max-width: 900px) {
    .loggrid { grid-template-columns: 1fr 1fr; }
    .logfilter { grid-template-columns: 1fr 1fr; }
    .logfilter__q { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
    .logitem__sum { grid-template-columns: minmax(0, 1fr) auto 20px; gap: 6px 10px; }
    .logitem__sum .pill { grid-column: 1; grid-row: 1; }
    .logitem__time { grid-column: 2; grid-row: 1; }
    .logitem__chev { grid-column: 3; grid-row: 1 / span 3; }
    .logitem__who { grid-column: 1 / 3; }
    .logitem__event { grid-column: 1 / 3; }
    .loggrid { grid-template-columns: 1fr; }
    .logmsg { flex-direction: column; }
}

.queuewarn { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin: 6px 0 14px; }
.queuewarn p { margin: 4px 0 0; }

/* RSVP */
.pill--rsvp-yes { background: #E5F2E8; color: #1D5432; }
.pill--rsvp-no  { background: #F6E3E3; color: #7E2222; }
.rsvpstats .stat p { margin: 2px 0 0; }
.rsvpstats .stat--yes dd { color: #1D5432; }
.rsvpstats .stat--no dd { color: #7E2222; }

/* Admin: WhatsApp template picker */
.tplpick select { max-width: 100%; }
.tplmap { display: grid; gap: 10px; margin-top: 12px; }
.tplmap:empty { display: none; }
.tplmap__label { font-size: .8125rem; font-weight: 600; color: var(--muted); margin: 6px 0 0; }
.tplmap__note { margin: 0; padding: 8px 12px; background: var(--mist); border-radius: var(--radius-sm); font-size: .875rem; }
.tplmap__text { background: #E7FFDB; border-radius: 10px; padding: 10px 12px; line-height: 1.8; max-width: 60ch; font-size: .9375rem; }
.tplmap__text mark { background: var(--gold-soft); border-radius: 4px; padding: 0 3px; }
.tplmap__footer { color: var(--muted); font-size: .8125rem; margin-top: 6px; }
.tplmap__row { display: grid; grid-template-columns: minmax(90px, auto) minmax(0, 220px) minmax(0, 1fr); gap: 10px; align-items: center; }
.tplmap__row select, .tplmap__row input { min-height: 40px; padding: 6px 10px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); font: inherit; background: var(--white); width: 100%; }
.qr-btn--small { display: inline-block; padding: 4px 12px; font-size: .8125rem; }
@media (max-width: 640px) { .tplmap__row { grid-template-columns: 1fr; gap: 4px; } }
.tplrefresh { margin-top: 10px; } .design__tpl { margin: 2px 0 6px; color: var(--muted); }
.designedit { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 24px; align-items: start; } .designedit__img { width: 100%; border-radius: 12px; border: 1px solid var(--line); } @media (max-width: 760px) { .designedit { grid-template-columns: 1fr; } .designedit__img { max-width: 200px; } }

/* Support: contact form and admin inbox */
.contact { max-width: 860px; padding-top: 32px; padding-bottom: 48px; }
.contact__intro { margin-bottom: 18px; }
.contact__done { text-align: center; padding: 40px 24px; }
.contact__done svg { width: 64px; height: 64px; color: #2E7D4A; margin: 0 auto 10px; display: block; }
.contact__done h2 { margin: 0 0 8px; }
.footer__link { color: inherit; opacity: .85; }
.navbadge { display: inline-block; min-width: 20px; padding: 0 6px; margin-inline-start: 6px; border-radius: 999px; background: var(--gold); color: var(--ink); font-size: .75rem; font-weight: 700; text-align: center; line-height: 20px; }
.pill--tk-new { background: var(--gold-soft); }
.pill--tk-open { background: #E3ECF8; color: #1F3F6E; }
.pill--tk-closed { background: var(--mist); color: var(--muted); }
.ticket--new { border-inline-start: 4px solid var(--gold); }
.ticket__meta { max-width: 560px; }
.thread { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.thread__msg { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 14px; background: var(--white); max-width: 72ch; }
.thread__msg--admin { background: #F4EFE3; border-color: #E6D7B5; margin-inline-start: 32px; }
.thread__who { margin: 0 0 4px; font-weight: 600; font-size: .875rem; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.thread__body { line-height: 1.8; overflow-wrap: anywhere; }
.ticket__reply { display: grid; gap: 8px; max-width: 72ch; }
.ticket__reply textarea { width: 100%; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); font: inherit; }
.ticket__actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.ticket__status { display: flex; gap: 16px; flex-wrap: wrap; font-size: .875rem; }

/* Event details (event page) and notes */
.evdetails__sum { display: flex; justify-content: space-between; align-items: center; cursor: pointer; list-style: none; }
.evdetails__sum::-webkit-details-marker { display: none; }
.evdetails__sum .panel__title { margin: 0; }
.evdetails[open] .logitem__chev { transform: rotate(180deg); }
.evdetails__body { display: flex; gap: 20px; align-items: flex-start; margin-top: 14px; }
.evdetails__body .logdl { flex: 1; }
.evdetails__card img { width: 120px; border-radius: 10px; border: 1px solid var(--line); display: block; }
.lognotes { white-space: normal; line-height: 1.8; }
@media (max-width: 640px) { .evdetails__body { flex-direction: column; } }

/* Policy pages */
.policy { max-width: 820px; padding-top: 28px; padding-bottom: 56px; }
.policy__tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.policy__tabs a { text-decoration: none; font-size: .875rem; padding: 6px 14px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--white); }
.policy__tabs a[aria-current="page"] { background: var(--ink); color: var(--pearl); border-color: var(--ink); }
.policy__doc { background: var(--white); border: 1.5px solid var(--line); border-radius: var(--radius); padding: 28px 32px; line-height: 1.9; }
.policy__doc h2 { font-size: 1.125rem; margin: 26px 0 8px; color: var(--ink); }
.policy__doc ul { margin: 0; padding-inline-start: 1.2em; }
.policy__doc li { margin: 6px 0; }
.policy__intro { font-size: 1.0625rem; }
.policy__contact { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--line); }
.policy__agree { text-align: center; margin: 12px 0 0; }
.footer__links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
@media (max-width: 640px) { .policy__doc { padding: 20px 18px; } }

/* Payment: Moyasar / PayPal tabs */
.paytabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; background: var(--mist); padding: 4px; border-radius: 999px; margin-bottom: 16px; }
.paytab { border: 0; background: transparent; padding: 9px 8px; border-radius: 999px; font: inherit; font-size: .875rem; cursor: pointer; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.paytab[aria-selected="true"] { background: var(--white); font-weight: 600; box-shadow: 0 1px 3px rgba(42, 20, 51, .12); }
.paymethods { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.paymethods span { font-size: .75rem; padding: 3px 9px; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); background: var(--white); direction: ltr; }
.tag--test { background: #FFF4D6; color: #7A5A00; display: inline-block; margin-bottom: 10px; }
.mysr-form { margin-top: 6px; }

/* Test sends */
.testlist { list-style: none; margin: 12px 0 4px; padding: 0; display: grid; gap: 6px; }
.testlist li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.loghead__links { display: flex; gap: 8px; flex-wrap: wrap; }

/* Admin: create WhatsApp templates */
.watpl__item { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 10px; background: #FDFBFD; }
.watpl__item textarea { width: 100%; margin-top: 8px; padding: 8px 10px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); font: inherit; line-height: 1.7; }
.watpl__refresh { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 4px 0 16px; }
.watpl__newsum { display: flex; justify-content: space-between; align-items: center; cursor: pointer; list-style: none; }
.watpl__newsum::-webkit-details-marker { display: none; }
.watpl__newsum .panel__title { margin: 0; }
.watpl__new[open] .logitem__chev { transform: rotate(180deg); }
.watpl__new .form { margin-top: 16px; }
.prefixed { display: flex; align-items: stretch; border: 1.5px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; background: var(--white); }
.prefixed span { padding: 0 10px; display: flex; align-items: center; background: var(--mist); color: var(--muted); font-family: monospace; font-size: .875rem; }
.prefixed input { border: 0 !important; flex: 1; min-width: 0; }
.field-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 640px) { .field-row--3 { grid-template-columns: 1fr; } }

/* Payment links (admin) and the customer's pay page */
.row--new td { background: #FFF8E6; }
.linkacts { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.linkacts .btn, .linkacts form, .linkacts form .btn { width: 100%; white-space: nowrap; }
.linktitle { min-width: 140px; }
.linktable td { padding: 10px 8px; }
.breakall { word-break: break-all; }
.nowrap { white-space: nowrap; }
.paylink { max-width: 560px; margin: 40px auto; }
.paylink__amount { font-size: 2.4rem; font-weight: 700; margin: 6px 0 2px; }
.paylink__rows { margin: 18px 0; display: grid; gap: 8px; }
.paylink__rows div { display: flex; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.paylink__rows span { color: var(--muted); }
.paylink__done { text-align: center; }
.paylink__done svg { width: 64px; height: 64px; color: #1D5432; }
.paydue { margin: 0 0 28px; padding: 18px 20px; border: 1.5px solid var(--gold); border-radius: var(--radius); background: #FFFBF1; }
.paydue .dash__h2 { margin-top: 0; }
.paydue__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.paydue__row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.paydue__title { flex: 1 1 200px; }
.codebox { font-size: 1.6rem; letter-spacing: .5em; text-align: center; font-variant-numeric: tabular-nums; }
.codeinline { font-size: 1rem; letter-spacing: .12em; }
.paydue__title small { white-space: nowrap; }