/* ============================================================
   Ramadan & Eid — system skin: the pieces every page shares.
   Forms, buttons, tabs, tables, pagination, toasts, dialogs,
   the consent card, the onboarding tour, empty states, policy
   pages, auth forms and the error pages.

   Loaded in <head> from functions.php (ramadan_skin_links()), so page
   and component CSS printed later in <body> would win on order alone;
   every rule is scoped "html body …" (or "html.dark body …") to win on
   specificity instead. Page content lives in main#px-spa-content.
   ============================================================ */

/* ── Fields ──
   Ivory fields with a soft edge; on focus the edge turns lantern gold and
   a little lamplight gathers under it. Only fields that carry their own
   border or input classes are touched, so bespoke inputs (search pills,
   game boards) keep their looks. */
html body #px-spa-content :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]), textarea, select):is([class*="border"], [class*="input"], [class*="form-"], [class*="field"]) {
  background-color: var(--paper-2);
  border-color: var(--rule);
  border-radius: 12px;
  color: var(--ink);
  font-family: var(--font-ui);
}
html body #px-spa-content :is(input, textarea, select):is([class*="border"], [class*="input"], [class*="form-"], [class*="field"]):focus {
  border-color: var(--theme-500);
  box-shadow: 0 0 0 3px var(--gold-soft), 0 8px 16px -12px rgba(246, 195, 92, .9);
  outline: none;
}
html body #px-spa-content :is(input, textarea)::placeholder { color: var(--ink-soft); opacity: .85; }
html body :is(input[type="checkbox"], input[type="radio"], input[type="range"], progress) { accent-color: var(--theme-500); }
html body #px-spa-content label:not([class*="hidden"]) { font-family: var(--font-ui); }

/* ── Headings: Reem Kufi, the theme's display face ── */
html body #px-spa-content :is(h1, h2):is(.font-bold, .font-extrabold, .font-black, .font-semibold) {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0;
}

/* ── Tabs and pills ──
   Shared filter rows (orders, bids, tickets, transactions) are rows of
   rounded buttons; the chosen one is the theme's button. */
html body .re-pill-on,
html body #px-spa-content :is(button, a):is(.bg-theme-600, .bg-theme-500, .bg-gray-900, .bg-black, .bg-slate-900):is(.rounded-full, .rounded-xl, .rounded-lg):not(.w-full):not([class*="py-3"]):not([class*="py-4"]) {
  position: relative;
  background: var(--btn-bg) !important;
  color: var(--btn-ink) !important;
  border-color: var(--btn-edge) !important;
  box-shadow: var(--btn-shadow);
}
html.dark body #px-spa-content :is(button, a):is(.bg-gray-900, .bg-black, .bg-slate-900, .dark\:bg-white) { color: var(--btn-ink) !important; }

/* ── Tables: the head row sits on a line of khatam stars ── */
html body #px-spa-content table { border-collapse: separate; border-spacing: 0; }
html body #px-spa-content thead { background: var(--paper-3); }
html body #px-spa-content thead th {
  font-family: var(--font-ui);
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--theme-700);
  border-bottom: 0;
  padding-bottom: calc(.75rem + 6px);
  background-image: var(--khatam-line);
  background-size: 24px 8px; background-position: bottom; background-repeat: repeat-x;
}
html.dark body #px-spa-content thead th { color: var(--theme-300); }
html body #px-spa-content tbody tr + tr > td { border-top: 1px dotted var(--rule); }
html body #px-spa-content tbody tr:nth-child(even) > td { background: color-mix(in srgb, var(--theme-500) 5%, transparent); }
html body #px-spa-content tbody tr:hover > td { background: var(--gold-soft); }
/* Status pills in table cells, ringed in brass like the lanterns */
html body #px-spa-content td :is(span, div)[class*="rounded-full"][class*="bg-"]:not(:has(img, svg:only-child)) { border-radius: 999px; font-family: var(--font-ui); font-weight: 600; letter-spacing: .02em; box-shadow: inset 0 0 0 1px currentColor, 0 0 0 2px rgba(var(--theme-500-rgb), .22); }
/* The "nothing here yet" row: lantern light pooled behind the message */
html body #px-spa-content td[colspan] {
  padding-block: 2.2rem !important; text-align: center; color: var(--ink-soft);
  background: radial-gradient(110px 50px at 50% 50%, rgba(246, 195, 92, .2), transparent 70%) !important;
}

/* ── Pagination ──
   The current page is an eight-point star with the number on it; the
   others are plain round numbers. */
html body :is(.pagination, nav[aria-label*="agination"], [class*="pagination"]) :is(a, button, span):is([class*="rounded"], .page-link, .page-btn) {
  font-family: var(--font-display); font-weight: 600;
  border-radius: 999px;
}
html body :is(.pagination, nav[aria-label*="agination"], [class*="pagination"]) :is(a, span, button):is([aria-current="page"], .active, .is-active, .bg-theme-600, .bg-theme-500, .bg-gray-900) {
  position: relative;
  background: transparent !important;
  color: #12343b !important;
  border-color: transparent !important;
  isolation: isolate;
}
html body :is(.pagination, nav[aria-label*="agination"], [class*="pagination"]) :is(a, span, button):is([aria-current="page"], .active, .is-active, .bg-theme-600, .bg-theme-500, .bg-gray-900)::before {
  content: ''; position: absolute; inset: -6px; z-index: -1;
  background: var(--btn-bg);
  -webkit-mask: var(--star-mask) center / contain no-repeat; mask: var(--star-mask) center / contain no-repeat;
}
html.dark body :is(.pagination, nav[aria-label*="agination"], [class*="pagination"]) :is(a, span, button):is([aria-current="page"], .active, .is-active, .bg-theme-600, .bg-theme-500, .bg-gray-900) { color: #1d1405 !important; }

/* ── Breadcrumbs: brass separators between the steps ── */
html body nav[aria-label*="readcrumb"] :is(svg, .sep, [aria-hidden="true"]):not(:has(path[d*="M3 12"])) { color: var(--theme-500); }
html body nav[aria-label*="readcrumb"] a:hover { color: var(--pomegranate); }

/* ── Badges and chips ──
   Stock Tailwind status chips take the season's colours: mint for done,
   lantern gold for waiting, pomegranate for trouble, teal for information. */
html body #px-spa-content :is(.bg-green-100, .bg-emerald-100):is(.text-green-700, .text-green-800, .text-emerald-700, .text-emerald-800) { background: color-mix(in srgb, var(--mint) 15%, var(--paper-2)) !important; color: #23694b !important; }
html body #px-spa-content :is(.bg-yellow-100, .bg-amber-100):is(.text-yellow-700, .text-yellow-800, .text-amber-700, .text-amber-800) { background: color-mix(in srgb, var(--theme-400) 22%, var(--paper-2)) !important; color: #6b4a0c !important; }
html body #px-spa-content .bg-red-100:is(.text-red-700, .text-red-800, .text-red-600) { background: var(--pome-soft) !important; color: #8f2c25 !important; }
html body #px-spa-content .bg-blue-100:is(.text-blue-700, .text-blue-800) { background: var(--teal-soft) !important; color: #0b5c60 !important; }
html.dark body #px-spa-content :is(.bg-green-100, .bg-emerald-100):is(.text-green-700, .text-green-800, .text-emerald-700, .text-emerald-800) { background: rgba(111, 211, 160, .16) !important; color: #8fe0b5 !important; }
html.dark body #px-spa-content :is(.bg-yellow-100, .bg-amber-100):is(.text-yellow-700, .text-yellow-800, .text-amber-700, .text-amber-800) { background: rgba(231, 180, 80, .16) !important; color: #f4cf7e !important; }
html.dark body #px-spa-content .bg-red-100:is(.text-red-700, .text-red-800, .text-red-600) { background: var(--pome-soft) !important; color: #f6a596 !important; }
html.dark body #px-spa-content .bg-blue-100:is(.text-blue-700, .text-blue-800) { background: var(--teal-soft) !important; color: #7fe0d2 !important; }

html body #px-spa-content :is(.text-green-500, .text-green-600, .text-emerald-500, .text-emerald-600) { color: #2b7d5a; }
html body #px-spa-content :is(.text-red-500, .text-red-600) { color: var(--pomegranate); }
html body #px-spa-content :is(.text-yellow-500, .text-yellow-600, .text-amber-500, .text-amber-600) { color: var(--theme-600); }
html.dark body #px-spa-content :is(.text-green-500, .text-green-600, .text-emerald-500, .text-emerald-600) { color: var(--mint); }
html.dark body #px-spa-content :is(.text-yellow-500, .text-yellow-600, .text-amber-500, .text-amber-600) { color: var(--theme-400); }

/* ── Account cards ──
   The account and seller pages build their panels from one Tailwind
   recipe (white, a grey hairline, #121218 after dark). Here they are the
   theme's cards: ivory or night paper with a fine brass double rule. */
html body #px-spa-content :is(.rounded-2xl, .rounded-3xl, .rounded-xl):is([class*="dark:bg-[#121218]"], [class*="dark:bg-[#0f0f14]"], [class*="dark:bg-[#16161d]"]):is(.bg-white, [class*="border-gray-100"]) {
  background-color: var(--paper-2) !important;
  border-color: rgba(var(--theme-500-rgb), .26) !important;
  box-shadow: var(--frame-inset), var(--shadow);
}
html body #px-spa-content .rounded-2xl:is([class*="dark:bg-[#121218]"]) { border-radius: 18px; }

/* Stat cards: a line of khatam stars along the top, girih in the corner, the
   number set big in the display face. */
html body #px-spa-content :is(.rounded-2xl, .rounded-xl):has(> :is(.text-3xl, .text-2xl):is(.font-extrabold, .font-black, .font-bold)):not(:has(img)),
html body #px-spa-content :is(.rounded-2xl, .rounded-xl):has(> div > :is(.text-3xl, .text-2xl):is(.font-extrabold, .font-black)):not(:has(img)) {
  position: relative; overflow: hidden;
  padding-top: 1.5rem !important;
}
html body #px-spa-content :is(.rounded-2xl, .rounded-xl):has(> :is(.text-3xl, .text-2xl):is(.font-extrabold, .font-black, .font-bold)):not(:has(img))::before,
html body #px-spa-content :is(.rounded-2xl, .rounded-xl):has(> div > :is(.text-3xl, .text-2xl):is(.font-extrabold, .font-black)):not(:has(img))::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 6px;
  background: var(--khatam-line) repeat-x; background-size: 24px 8px;
}
html body #px-spa-content :is(.rounded-2xl, .rounded-xl):has(> :is(.text-3xl, .text-2xl):is(.font-extrabold, .font-black, .font-bold)):not(:has(img))::after,
html body #px-spa-content :is(.rounded-2xl, .rounded-xl):has(> div > :is(.text-3xl, .text-2xl):is(.font-extrabold, .font-black)):not(:has(img))::after {
  content: ''; position: absolute; top: 10px; inset-inline-end: 8px; width: 26px; height: 26px; pointer-events: none;
  background: var(--girih-corner) no-repeat; opacity: .8;
}
html[dir="rtl"] body #px-spa-content :is(.rounded-2xl, .rounded-xl):has(> :is(.text-3xl, .text-2xl):is(.font-extrabold, .font-black, .font-bold)):not(:has(img))::after { transform: scaleX(-1); }
html body #px-spa-content :is(.rounded-2xl, .rounded-xl) > :is(.text-3xl, .text-2xl):is(.font-extrabold, .font-black),
html body #px-spa-content :is(.rounded-2xl, .rounded-xl) > div > :is(.text-3xl, .text-2xl):is(.font-extrabold, .font-black) {
  font-family: var(--font-display); font-weight: 600; letter-spacing: 0;
  overflow-wrap: normal;
}

/* Icon tiles: the little rounded squares holding an icon become
   eight-point stars, the icon in ivory; their stock tint picks the colour. */
html body #px-spa-content :is(.w-8, .w-9, .w-10, .w-11, .w-12, .w-14).rounded-xl:is(.flex, .grid):has(> :is(i, svg)):not(:has(img)),
html body #px-spa-content :is(.w-8, .w-9, .w-10, .w-11, .w-12, .w-14).rounded-2xl:is(.flex, .grid):has(> :is(i, svg)):not(:has(img)) {
  --tile: var(--teal);
  background: var(--tile) !important;
  color: #fffdf7 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  -webkit-mask: var(--star-mask) center / contain no-repeat; mask: var(--star-mask) center / contain no-repeat;
}
html body #px-spa-content :is(.w-8, .w-9, .w-10, .w-11, .w-12, .w-14):is(.rounded-xl, .rounded-2xl):has(> :is(i, svg)) > :is(i, svg) { color: #fffdf7 !important; position: relative; transform: scale(.85); }
html.dark body #px-spa-content :is(.w-8, .w-9, .w-10, .w-11, .w-12, .w-14):is(.rounded-xl, .rounded-2xl):has(> :is(i, svg)):not(:has(img)) { color: #082027 !important; }
html.dark body #px-spa-content :is(.w-8, .w-9, .w-10, .w-11, .w-12, .w-14):is(.rounded-xl, .rounded-2xl):has(> :is(i, svg)) > :is(i, svg) { color: #082027 !important; }
html body #px-spa-content :is(.rounded-xl, .rounded-2xl):has(> :is(i, svg)):is([class*="emerald"], [class*="green"], [class*="lime"]) { --tile: var(--mint); }
html body #px-spa-content :is(.rounded-xl, .rounded-2xl):has(> :is(i, svg)):is([class*="blue"], [class*="sky"], [class*="cyan"], [class*="teal"]) { --tile: var(--teal); }
html body #px-spa-content :is(.rounded-xl, .rounded-2xl):has(> :is(i, svg)):is([class*="amber"], [class*="orange"], [class*="yellow"]) { --tile: var(--theme-500); }
html body #px-spa-content :is(.rounded-xl, .rounded-2xl):has(> :is(i, svg)):is([class*="slate"], [class*="gray"]) { --tile: var(--date); }
html body #px-spa-content :is(.rounded-xl, .rounded-2xl):has(> :is(i, svg)):is([class*="red"], [class*="rose"], [class*="pink"]) { --tile: var(--pomegranate); }
html body #px-spa-content :is(.rounded-xl, .rounded-2xl):has(> :is(i, svg)):is([class*="purple"], [class*="violet"], [class*="indigo"]) { --tile: var(--theme-600); }

/* Avatars sit in a brass ring with a teal one outside it */
html body #px-spa-content img.rounded-full:is(.w-16, .w-20, .w-24, .w-28, .w-32, [class*="w-["]):not(.no-ring) {
  border: 0 !important;
  box-shadow: 0 0 0 3px var(--paper-2), 0 0 0 5px #c9922f, 0 0 0 8px var(--paper-2), 0 0 0 9.5px var(--teal) !important;
}

/* ── Skeletons: a slow drift of lamplight instead of grey ── */
html body .animate-pulse :is(.bg-gray-200, .bg-gray-100, .bg-gray-300, [class*="bg-white/"]),
html body .animate-pulse:is(.bg-gray-200, .bg-gray-100, .bg-gray-300) {
  background: linear-gradient(90deg, var(--paper-3), color-mix(in srgb, var(--theme-400) 22%, var(--paper-3)), var(--paper-3)) 0 0 / 200% 100% !important;
}

/* ── Tooltips: a night slip edged in gold ── */
html body [role="tooltip"]:not(#ob-tooltip) {
  background: #10323d; color: #f5ecd9;
  border: 1px solid rgba(231, 180, 80, .45);
  border-radius: 10px;
  font-family: var(--font-ui);
}

/* ── Toasts ──
   Each one is an ivory (or night) slip with a line of stars down its
   leading side, its icon sitting in an eight-point star of the matching colour. The
   time left runs down as a brass bar with a star at its tip. */
html body .px-toast {
  font-family: var(--font-ui);
  font-size: .95rem;
  background: var(--paper-2);
  border: 1px solid rgba(var(--theme-500-rgb), .35);
  border-radius: 14px;
  padding-inline-start: 1.4rem;
  box-shadow: var(--frame-inset), 0 18px 34px -16px rgba(18, 52, 59, .45);
}
html.dark body .px-toast { box-shadow: var(--frame-inset), 0 18px 34px -16px rgba(0, 0, 0, .8); }
html body .px-toast::before {
  width: 8px;
  background: var(--theme-500);
  -webkit-mask: var(--star-mask) center top / 8px 10px repeat-y; mask: var(--star-mask) center top / 8px 10px repeat-y;
}
html body .px-toast--success::before { background: var(--mint); }
html body .px-toast--error::before   { background: var(--pomegranate); }
html body .px-toast--warning::before { background: var(--theme-500); }
html body .px-toast--info::before    { background: var(--teal); }
html body .px-toast__icon {
  position: relative; isolation: isolate;
  flex-basis: 36px; width: 36px; height: 36px;
  background: transparent; color: #fffdf7;
}
html body .px-toast__icon::before {
  content: ''; position: absolute; inset: -3px; z-index: -1;
  background: var(--teal);
  -webkit-mask: var(--star-mask) center / contain no-repeat; mask: var(--star-mask) center / contain no-repeat;
}
html body .px-toast--success .px-toast__icon::before { background: var(--mint); }
html body .px-toast--error .px-toast__icon::before { background: var(--pomegranate); }
html body .px-toast--warning .px-toast__icon { color: #12343b; }
html body .px-toast--warning .px-toast__icon::before { background: var(--theme-400); }
html.dark body .px-toast__icon { color: #082027 !important; }
html body .px-toast__message { line-height: 1.4; font-weight: 500; }
html body .px-toast__progress { height: 4px; background: var(--paper-3); overflow: visible; }
html body .px-toast__progress > i { position: relative; background: var(--brass-leaf); opacity: 1; }
html body .px-toast__progress > i::after {
  content: ''; position: absolute; inset-inline-end: -6px; top: -4px; width: 12px; height: 12px;
  background: var(--star-img) center / contain no-repeat;
}

/* ── Confirm dialog: a string of lights hangs across its top ── */
html body .px-confirm__backdrop { background: rgba(8, 32, 39, .58); }
html body .px-confirm__card {
  font-family: var(--font-ui);
  padding-top: 2.6rem;
  border-radius: 20px;
  background: var(--girih), var(--paper-2);
  border: 1px solid rgba(var(--theme-500-rgb), .35);
  box-shadow: var(--frame-inset), 0 30px 60px -24px rgba(0, 0, 0, .6);
  overflow: hidden;
}
html body .px-confirm__card::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 30px;
  background: var(--lantern-string) repeat-x; background-size: 72px 30px;
}
html body .px-confirm__title { font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; }
html body .px-confirm__btn { border-radius: 12px; font-family: var(--font-ui); font-weight: 600; }
html body .px-confirm__btn--ok { background: var(--btn-bg); color: var(--btn-ink); border: 1px solid var(--btn-edge); box-shadow: var(--btn-shadow); }
html body .px-confirm__btn--ok.px-confirm__btn--destructive { background: linear-gradient(180deg, #b23a32, #8f2c25); color: #fff; border-color: #5c1a15; box-shadow: none; }

/* ── Modals ──
   Shared Tailwind dialogs (fixed overlays with a white panel) take the
   theme's paper, a night-teal veil and a string of lights across the top. */
html body :is(.fixed.inset-0) > :is(.absolute.inset-0, .fixed.inset-0):is(.bg-black\/50, .bg-black\/60, .bg-black\/40, .bg-gray-900\/50, .bg-black\/70, [class*="bg-black/"]) { background-color: rgba(8, 32, 39, .6) !important; }
html body .re-modal-string { position: relative; padding-top: 1.9rem !important; }
html body .re-modal-string::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 30px; z-index: 2; pointer-events: none;
  background: var(--lantern-string) repeat-x; background-size: 72px 30px;
}

/* ── Cookie consent: a card under a line of stars, a crescent rising
   from its corner, both buttons the same weight ── */
html body .px-consent {
  background: var(--girih), var(--paper-2);
  border: 1px solid rgba(var(--theme-500-rgb), .35);
  border-radius: 18px;
  overflow: hidden;
  font-family: var(--font-ui);
  box-shadow: var(--frame-inset), 0 22px 48px -20px rgba(18, 52, 59, .55);
}
html body .px-consent::before {
  content: ''; display: block; height: 8px;
  background: var(--khatam-line) repeat-x; background-size: 24px 8px;
}
html body .px-consent::after {
  content: ''; position: absolute; inset-inline-end: -40px; bottom: -40px; width: 120px; height: 120px;
  background: var(--crescent-img) center / contain no-repeat; opacity: .28; pointer-events: none;
}
html body .px-consent__inner { position: relative; z-index: 1; padding: 14px 18px 18px; }
html body .px-consent__title { font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; }
html body .px-consent__btn { border-radius: 12px; font-family: var(--font-ui); font-weight: 700; }
html body .px-consent__btn--accept { background: var(--btn-bg); color: var(--btn-ink); border: 1px solid var(--btn-edge); box-shadow: var(--btn-shadow); }
html body .px-consent__btn--reject { background: var(--paper-2); color: var(--ink); border: 1.5px solid var(--theme-500); }

/* ── Onboarding: the welcome card under a string of lights, its emoji in a
   lamplit arch; the tour tooltip a night slip ── */
html body #ob-backdrop { background: rgba(8, 32, 39, .62); }
html body #ob-card {
  position: relative;
  padding-top: 2.8rem;
  background: var(--girih), var(--paper-2);
  border: 1px solid rgba(var(--theme-500-rgb), .35);
  border-radius: 24px;
  overflow: hidden;
  font-family: var(--font-ui);
}
html body #ob-card::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 30px;
  background: var(--lantern-string) repeat-x; background-size: 72px 30px;
}
html body #ob-card::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 8px;
  background: var(--khatam-line) repeat-x; background-size: 24px 8px;
}
html body .ob-emoji {
  width: 84px; height: 96px; border-radius: 50% 50% 14px 14px / 40% 40% 14px 14px;
  background: var(--lantern-glow), var(--night-panel);
  box-shadow: 0 0 0 3px #e7b450, 0 0 0 5px #714d0f, 0 12px 20px -8px rgba(18, 52, 59, .55);
}
html body .ob-h { font-family: var(--font-display); font-size: 1.6rem; font-weight: 600; letter-spacing: 0; }
html body .ob-h b { color: var(--teal); font-weight: 600; }
html body .ob-pill.is-active { background: var(--gold-soft); border-color: var(--theme-400); }
html body .ob-pill.is-active .ob-pill-num { background: var(--theme-500); color: #12343b; }
html body .ob-btn-primary { background: var(--btn-bg); color: var(--btn-ink); border: 1px solid var(--btn-edge); border-radius: 12px; box-shadow: var(--btn-shadow); font-family: var(--font-ui); }
html body .ob-btn-ghost { border-radius: 12px; font-family: var(--font-ui); }
html body #ob-tooltip {
  background: var(--night-panel);
  color: #f5ecd9;
  border: 1px solid rgba(231, 180, 80, .45);
  border-radius: 16px;
  font-family: var(--font-ui);
}
html body #ob-tooltip .ob-tt-title { color: #f4cf7e; font-family: var(--font-display); font-weight: 600; }
html body #ob-tooltip .ob-tt-desc { color: rgba(245, 236, 217, .82); }
html body #ob-tooltip .ob-badge { color: #f4cf7e; background: rgba(231, 180, 80, .16); }
html body #ob-spotlight { box-shadow: 0 0 0 3px #e7b450, 0 0 0 9999px rgba(8, 32, 39, .6) !important; }

/* ── Upload progress ──
   components/upload-progress-modal.php is overridden (.re-up); the
   manage-auction and manage-shop-listing forms still include the core
   file by path, so its inline-styled markup is dressed to match here. */
html body #uploadProgressOverlay { background: rgba(8, 32, 39, .62) !important; }
html body #uploadProgressOverlay [role="dialog"]:not(.re-up) {
  position: relative;
  background: var(--girih), var(--paper-2) !important;
  border: 1px solid rgba(var(--theme-500-rgb), .35);
  border-radius: 20px !important;
  box-shadow: var(--frame-inset), 0 24px 60px -12px rgba(8, 32, 39, .55) !important;
  padding-top: 2.7rem !important;
  overflow: hidden;
  font-family: var(--font-ui);
}
html body #uploadProgressOverlay [role="dialog"]:not(.re-up)::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 30px;
  background: var(--lantern-string) repeat-x; background-size: 72px 30px;
}
html body #uploadProgressOverlay [role="dialog"]:not(.re-up) > div:first-child > span:first-child {
  position: relative; isolation: isolate;
  width: 50px !important; height: 50px !important; border-radius: 50% !important; color: #10323d !important;
  background: var(--night-panel) !important; box-shadow: var(--brass-rim);
}
html body #uploadProgressOverlay [role="dialog"]:not(.re-up) > div:first-child > span:first-child::before {
  content: ''; position: absolute; inset: 7px; z-index: -1; background: var(--lamp);
  -webkit-mask: var(--star-mask); mask: var(--star-mask);
}
html body #uploadProgressOverlay [role="dialog"]:not(.re-up) > div:first-child > span:first-child svg { width: 15px; height: 15px; }
html body #uploadProgressOverlay #upTitle { color: var(--ink) !important; font-family: var(--font-display); font-weight: 600 !important; font-size: 1.4rem !important; line-height: 1.2; }
html body #uploadProgressOverlay #upSub, html body #uploadProgressOverlay #upMsg { color: var(--ink-soft) !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; overflow-wrap: anywhere; }
html body #uploadProgressOverlay div:has(> #upBar) { background: var(--paper-3) !important; box-shadow: inset 0 0 0 1px rgba(var(--theme-500-rgb), .35); }
html body #uploadProgressOverlay #upBar { background: var(--brass-leaf) !important; }
html body #uploadProgressOverlay #upPct { color: var(--theme-700) !important; font-family: var(--font-display); font-weight: 600 !important; font-size: 1.05rem !important; }

/* ── Install sheet (#pwaModal): a cream sheet under the string of lights
   with a brass inner rule and the star band along its foot, the app icon
   in a brass-rimmed arch, an eight-point star for each benefit and the
   steps on night medallions. ── */
html body .pwa-modal { background: rgba(8, 32, 39, .62); }
html body .pwa-sheet {
  overflow: hidden;
  padding-top: 2.7rem;
  background: var(--girih), var(--paper-2);
  border-color: rgba(var(--theme-500-rgb), .35);
  font-family: var(--font-ui);
  box-shadow: var(--frame-inset), 0 -24px 60px -24px rgba(8, 32, 39, .65);
}
html body .pwa-sheet::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 30px; z-index: 1; background: var(--lantern-string) repeat-x; background-size: 72px 30px; pointer-events: none; }
html body .pwa-sheet::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: var(--khatam-line); pointer-events: none; }
html body .pwa-sheet__grip { position: relative; z-index: 1; background: var(--theme-400); opacity: .6; }
html body .pwa-x { z-index: 2; top: 2.2rem; }
html body .pwa-x:hover { background: var(--gold-soft); color: var(--theme-700); }
html body .pwa-brand__icon { border: 0; border-radius: 50% 50% 10px 10px / 62% 62% 10px 10px; padding: 7px; background: var(--night-panel); box-shadow: var(--brass-rim), 0 0 18px rgba(246, 195, 92, .3); }
html body .pwa-brand__title { font-family: var(--font-display); font-weight: 600; font-size: 1.45rem; }
html body .pwa-benefits li::before { top: .1rem; width: 17px; height: 17px; background: var(--lamp) !important; -webkit-mask: var(--star-mask); mask: var(--star-mask); }
html body .pwa-benefits li:nth-child(2)::before { background: var(--theme-500) !important; }
html body .pwa-benefits li:nth-child(3)::before { background: #3cc0b0 !important; }
html body .pwa-steps li { background: var(--paper); border: 1px solid rgba(var(--theme-500-rgb), .3); border-radius: 14px; box-shadow: inset 0 0 0 3px var(--paper), inset 0 0 0 4px rgba(var(--theme-500-rgb), .18); }
html body .pwa-steps__ic { border: 0; border-radius: 50%; color: #f4cf7e; background: var(--night-panel); box-shadow: var(--brass-rim); }
html body .pwa-steps__ic::after { border-radius: 0; width: 22px; height: 22px; top: -9px; inset-inline-start: -9px; background: var(--lamp); color: #10323d; -webkit-mask: var(--star-mask); mask: var(--star-mask); }
html body .pwa-panel__title { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; }
html body .pwa-later { font-weight: 600; color: var(--theme-700); }
html body .pwa-later:hover { color: var(--ink); }
html body .pwa-toast__card { background: var(--girih), var(--paper-2); border: 1px solid rgba(var(--theme-500-rgb), .35); border-radius: 16px; box-shadow: var(--frame-inset), 0 18px 34px -16px rgba(8, 32, 39, .6); }
html body .pwa-toast__title { font-family: var(--font-display); font-weight: 600; }

/* ── Empty states (components/cards/empty-state.php) ──
   A card under a line of stars with girih in two corners, a small
   drawing of the season in the middle. */
html body .re-es {
  position: relative; isolation: isolate;
  overflow: hidden;
  text-align: center;
  padding: 2.75rem 1.5rem 2.5rem;
  background: var(--girih), var(--paper-2);
  border: 1px solid rgba(var(--theme-500-rgb), .3);
  border-radius: 22px;
  box-shadow: var(--frame-inset), var(--shadow);
}
html body .re-es--compact { padding: 2rem 1.25rem; }
html body .re-es::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 8px;
  background: var(--khatam-line) repeat-x; background-size: 24px 8px;
}
html body .re-es__corner {
  position: absolute; z-index: -1; width: 46px; height: 46px; pointer-events: none;
  background: var(--girih-corner) no-repeat;
}
html body .re-es__corner--a { top: 14px; inset-inline-end: 10px; }
html body .re-es__corner--b { bottom: 10px; inset-inline-start: 10px; transform: rotate(180deg); }
html[dir="rtl"] body .re-es__corner--a { transform: scaleX(-1); }
html[dir="rtl"] body .re-es__corner--b { transform: rotate(180deg) scaleX(-1); }
html body .re-es__art { position: relative; width: min(190px, 60%); margin: .2rem auto .6rem; }
html body .re-es--compact .re-es__art { width: min(150px, 52%); }
html body .re-es__art .re-art { display: block; width: 100%; height: auto; }
html body .re-es__icon {
  position: absolute; inset-inline-end: -6px; top: -4px;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--paper-2); color: var(--theme-600);
  box-shadow: var(--brass-rim), 0 8px 14px -8px rgba(18, 52, 59, .5);
}
html.dark body .re-es__icon { color: var(--theme-400); }
html body .re-es__icon svg { width: 20px; height: 20px; }
html body .re-es__icon i { font-size: 17px; }
html body .re-es__icon img { width: 24px; height: 24px; }
html body .re-es__eyebrow { margin: 0 0 .4rem; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--theme-600); }
html.dark body .re-es__eyebrow { color: var(--theme-400); }
html body .re-es__title { margin: 0 0 .45rem; font-family: var(--font-display); font-size: clamp(1.3rem, 2.6vw, 1.6rem); font-weight: 600; line-height: 1.2; color: var(--ink); overflow-wrap: anywhere; }
html body .re-es__desc { margin: 0 auto; max-width: 26rem; font-size: .98rem; line-height: 1.55; color: var(--ink-soft); }
html body .re-es__cta { margin-top: 1.5rem; }
@media (prefers-reduced-motion: no-preference) {
  html body .re-es .re-art__glow { animation: re-flicker 2.8s ease-in-out 4 both; }
}

/* ── Policy pages (pages/policy-page.css) ──
   The text sits on a sheet of ivory; headings are in the display face with
   a small lantern hung in front, links teal. */
html body .policy-prose { font-family: var(--font-ui); font-size: 1.04rem; line-height: 1.75; color: var(--ink-2); }
html body .policy-prose :is(h2, h3) {
  position: relative;
  font-family: var(--font-display); font-weight: 600; letter-spacing: 0;
  color: var(--ink);
  padding-inline-start: 1.9rem;
}
html body .policy-prose :is(h2, h3)::before {
  content: ''; position: absolute; inset-inline-start: .2rem; top: .05em; width: .85rem; height: 1.45rem;
  background: var(--lantern-img) center / contain no-repeat;
}
html body .policy-prose a { color: var(--teal); text-decoration-color: color-mix(in srgb, var(--teal) 45%, transparent); text-underline-offset: 3px; }
html body .policy-prose ul > li::marker { color: var(--theme-500); content: '✦  '; font-size: .8em; }
html body .policy-prose img { border-radius: 16px; }
html body .policy-notice, html body .policy-preferences, html body .policy-processors {
  position: relative; overflow: hidden;
  background: var(--girih), var(--paper-2);
  border: 1px solid rgba(var(--theme-500-rgb), .3);
  border-radius: 18px;
  box-shadow: var(--frame-inset);
}
html body :is(.policy-notice, .policy-preferences)::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 6px;
  background: var(--khatam-line) repeat-x; background-size: 24px 8px;
}
/* The contents list and help card beside the policy text take the same face. */
html body :is(.policy-toc, .policy-help) {
  background: var(--girih), var(--paper-2);
  border: 1px solid rgba(var(--theme-500-rgb), .3);
  border-radius: 18px;
  box-shadow: var(--frame-inset);
}

/* ── Back to top ── */
html body #backToTop, html body .back-to-top { font-family: var(--font-ui); }

/* ── Auth pages (login, register, forgot, reset, step-up) ──
   The form sits on ivory under a string of lights; the brand panel is the
   night sky with lanterns hung across its top, a crescent, and the
   features on night cards edged in brass. */
html:has(> body.re-auth) { background: var(--paper); }
html body.re-auth { background: var(--girih), var(--paper) !important; font-family: var(--font-ui); }
html body.re-auth h1 { font-family: var(--font-display); font-weight: 600 !important; letter-spacing: 0 !important; }
html body .re-auth-string { height: 30px; margin: 0 0 1.25rem; background: var(--lantern-string) repeat-x; background-size: 72px 30px; }
html body.re-auth .auth-input {
  border-radius: 12px;
  border: 1.5px solid var(--rule);
  background: var(--paper-2);
  font-family: var(--font-ui);
}
html body.re-auth .auth-input:focus { border-color: var(--theme-500); box-shadow: 0 0 0 3px var(--gold-soft); }
html.dark body.re-auth .auth-input { background: #082027; border-color: rgba(231, 180, 80, .25); color: #f5ecd9; }
html body.re-auth .auth-btn {
  border-radius: 12px !important;
  background: var(--btn-bg) !important; color: var(--btn-ink) !important;
  border: 1px solid var(--btn-edge) !important;
  box-shadow: var(--btn-shadow) !important;
  font-size: 1.02rem; font-weight: 700;
}
html body.re-auth .auth-btn:hover { background: var(--btn-bg-hover) !important; transform: translateY(-1px); }
html body.re-auth .social-btn { width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid rgba(var(--theme-500-rgb), .4); background: var(--paper-2); }
html body.re-auth .social-btn:hover { border-color: var(--theme-500); box-shadow: 0 0 0 4px var(--gold-soft); }
html.dark body.re-auth .social-btn img { filter: invert(1) hue-rotate(180deg); }
html body.re-auth .brand-panel { isolation: isolate; }
html body .re-auth-scene { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; background: var(--stars-field) repeat; }
html body .re-auth-scene > .re-lantern-row { position: absolute; left: 0; right: 0; top: 0; height: 110px; }
html body .re-auth-scene > .re-band { position: absolute; left: 0; right: 0; bottom: 0; }
html body .re-auth-lamp { display: block; width: 180px; height: auto; margin: 0 auto 1rem; }
html body.re-auth .brand-panel h2 { font-size: 2.5rem; letter-spacing: 0 !important; color: #f4cf7e; }
html body.re-auth .brand-panel .space-y-3 > div {
  position: relative;
  background: rgba(8, 32, 39, .55) !important;
  border: 1px solid rgba(231, 180, 80, .4) !important;
  border-radius: 14px !important;
  box-shadow: inset 0 0 0 3px rgba(8, 32, 39, .55), inset 0 0 0 4px rgba(231, 180, 80, .2);
  backdrop-filter: none;
}
html body.re-auth .brand-panel .space-y-3 > div > div:first-child {
  width: 2.6rem; height: 2.6rem;
  background: #f2836f !important; border-radius: 0 !important;
  -webkit-mask: var(--star-mask) center / contain no-repeat; mask: var(--star-mask) center / contain no-repeat;
}
html body.re-auth .brand-panel .space-y-3 > div:nth-child(2) > div:first-child { background: var(--theme-500) !important; }
html body.re-auth .brand-panel .space-y-3 > div:nth-child(3) > div:first-child { background: #3cc0b0 !important; }
html body.re-auth .brand-panel .space-y-3 > div > div:first-child svg { color: #082027 !important; }
html body.re-auth .brand-panel > div > .flex.justify-center:first-child { display: none; }

/* ── Error scenes (errors/maintenance, rate-limited, banned,
   session-expired): each a small scene of the season's night, lanterns
   hung across the top and the star band along the foot. ── */
html body .re-err {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 70vh;
  display: grid; place-items: center;
  padding: 7rem 1.25rem 4.5rem;
  background: var(--stars-field) repeat, var(--night-panel);
  color: #f5ecd9;
  font-family: var(--font-ui);
  text-align: center;
  --re-dune: #164250; --re-dune-2: #1c5260; --re-glass-off: #24464f;
}
html body .re-err > .re-lantern-row { position: absolute; left: 0; right: 0; top: 0; }
html body .re-err__card { position: relative; z-index: 1; max-width: 34rem; }
html body .re-err__art { width: min(230px, 62vw); height: auto; margin: 0 auto 1.25rem; display: block; }
html body .re-err__kicker {
  display: inline-flex; align-items: center; gap: .55rem;
  margin: 0 0 .7rem;
  font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: #e7b450;
}
html body .re-err__kicker::before { content: ''; width: 18px; height: 16px; background: var(--crescent-img) center / contain no-repeat; }
html body .re-err__title { margin: 0 0 .8rem; font-family: var(--font-display); font-size: clamp(2.1rem, 6vw, 3.2rem); font-weight: 600; line-height: 1.08; color: #f4cf7e; overflow-wrap: anywhere; }
html body .re-err__text { margin: 0 auto 1.6rem; max-width: 28rem; font-size: 1.05rem; line-height: 1.6; color: rgba(245, 236, 217, .86); }
html body .re-err__meta { margin-top: 1rem; font-size: .9rem; color: rgba(245, 236, 217, .7); }
html body .re-err__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; }
html body .re-err .ed-btn-secondary { background: rgba(8, 32, 39, .5); color: #f5ecd9; border-color: rgba(231, 180, 80, .45); }
html body .re-err > .re-band { position: absolute; left: 0; right: 0; bottom: 0; }
html body .re-err__form { display: grid; gap: .7rem; max-width: 22rem; margin: 0 auto; text-align: start; }
html body .re-err__input { width: 100%; padding: .8rem 1rem; border-radius: 12px; border: 1.5px solid rgba(231, 180, 80, .4); background: rgba(8, 32, 39, .6); color: #f5ecd9; font-family: var(--font-ui); }
html body .re-err__input:focus { outline: none; border-color: #e7b450; box-shadow: 0 0 0 3px rgba(231, 180, 80, .2); }
html body .re-err__error { margin: 0; font-size: .9rem; font-weight: 600; color: #f6a596; }
html body .re-err .ed-btn-primary { justify-content: center; background: #e7b450; color: #1d1405; box-shadow: 0 2px 0 #a57a24, 0 8px 22px -8px rgba(231, 180, 80, .45); }
html body .re-err .ed-btn-primary:hover { background: #f4cf7e; color: #1d1405; }
html body > main.re-err { min-height: 100vh; }
@media (prefers-reduced-motion: no-preference) {
  html body .re-err .re-art__glow { animation: re-flicker 2.8s ease-in-out 4 both; }
}
@media (prefers-reduced-motion: reduce) {
  html body .re-es *, html body .re-err * { animation: none !important; }
}

/* Some language files wrap a heading word in a stock Tailwind gradient
   (text-transparent bg-clip-text bg-gradient-to-r …) that the compiled sheet
   doesn't fully carry, leaving a coloured box; here it is plain gold like
   the English .text-gradient-theme. */
html body .bg-clip-text.text-transparent { background: none !important; color: var(--theme-500) !important; -webkit-text-fill-color: currentColor; }

/* ── Phone language sheet ──
   header.css forces .dark #langSheet to near-black; here it is the night
   paper with a brass edge. */
html.dark body #langSheet > div:not(.absolute),
html.dark body #langSheet .bg-white { background: var(--paper-2) !important; border-color: rgba(231, 180, 80, .25) !important; }

/* Search and filter buttons drawn in stock near-black take the theme's button */
html body #px-spa-content :is(button, a, input[type="submit"]):is(.bg-gray-900, .bg-black, .bg-slate-900) {
  background: var(--btn-bg) !important; color: var(--btn-ink) !important; border: 1px solid var(--btn-edge);
}

/* Plugin pages that print their own dashed "nothing here" box (lottery
   catalogue and others) get the empty-state card: a line of stars on top,
   girih paper, lamplight behind the icon, girih in the corner. */
html body #px-spa-content :is(.border-2, .border).border-dashed.rounded-2xl.text-center:not(:has(input)) {
  border: 1px solid rgba(var(--theme-500-rgb), .3) !important;
  background: var(--girih-corner) right 10px top 16px / 46px no-repeat, var(--lantern-glow) 50% 2.6rem / 220px 160px no-repeat, var(--girih), var(--paper-2) !important;
  box-shadow: var(--frame-inset), var(--shadow);
}
html body #px-spa-content :is(.border-2, .border).border-dashed.rounded-2xl.text-center:not(:has(input))::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 8px; z-index: 1;
  background: var(--khatam-line) repeat-x; background-size: 24px 8px;
}
html body #px-spa-content :is(.border-2, .border).border-dashed.rounded-2xl.text-center :is(h3, h2).font-bold { font-family: var(--font-display); font-weight: 600; font-size: 1.4rem; }

/* Product and prize names printed by kernel or plugin markup without
   dir="auto" ("8-Sheet Cross-Cut" turning into "Sheet Cross-Cut-8" in
   Arabic): each title takes the direction of its own first letter. */
html[dir="rtl"] body :is([id^="cart-row-"] .font-bold.text-sm, .wishlist-item h3, .wnc-name, .wnc-prize-text, .winning-card h2, .ed-sim-card h3, .ad-name, .tx-row .font-semibold) { unicode-bidi: plaintext; }

/* Stock gradient buttons (blue or accent, white lettering) in dialogs and
   forms are the theme's own button. */
html body :is(button, a).text-white:is(.bg-gradient-to-r, .bg-gradient-to-br):is([class*="from-blue-"], [class*="from-theme-"], [class*="from-indigo-"], [class*="from-purple-"]) {
  background: var(--btn-bg) !important;
  color: var(--btn-ink) !important;
  box-shadow: var(--btn-shadow) !important;
}
html body :is(button, a).text-white:is(.bg-gradient-to-r, .bg-gradient-to-br):is([class*="from-blue-"], [class*="from-theme-"], [class*="from-indigo-"], [class*="from-purple-"]):hover { background: var(--btn-bg-hover) !important; }