/* Glamora shared stylesheet — luxury black/gold theme, used by the client pages,
the center-admin dashboard, and (scoped) inside wp-admin's Glamora screens. */
.glamora-scope {
--g-bg-dark: oklch(0.18 0.015 285);
--g-bg-dark-2: oklch(0.223 0.02 285);
--g-bg-dark-3: oklch(0.27 0.02 285);
--g-border-dark: oklch(0.34 0.02 285);
--g-text-dark: oklch(0.95 0.01 80);
--g-text-muted-dark: oklch(0.68 0.02 280);
/* v1.20.0 — light mode re-tuned: a soft champagne / blush ground instead of near-white, deep plum
ink, warm muted secondary text. Easier on the eyes, still bright. */
--g-bg-light: oklch(0.935 0.02 65);
--g-bg-light-2: oklch(0.965 0.016 70);
--g-bg-light-3: oklch(0.905 0.026 60);
--g-border-light: oklch(0.855 0.03 55);
--g-text-light: oklch(0.26 0.04 330);
--g-text-muted-light: oklch(0.49 0.035 320);
--g-gold: oklch(0.76 0.135 80);
--g-gold-2: oklch(0.68 0.13 77);
--g-gold-soft: oklch(0.93 0.05 85);
--g-success: oklch(0.62 0.13 148);
--g-success-bg: oklch(0.92 0.045 148);
--g-pending: oklch(0.72 0.15 60);
--g-pending-bg: oklch(0.93 0.06 65);
--g-danger: oklch(0.58 0.17 25);
--g-danger-bg: oklch(0.93 0.05 25);
font-family: "Cairo", system-ui, sans-serif;
box-sizing: border-box;
}
.glamora-scope *, .glamora-scope *::before, .glamora-scope *::after { box-sizing: inherit; }
.glamora-scope a { text-decoration: none; color: var(--g-gold-2); }
.glamora-scope button { font-family: inherit; cursor: pointer; }
/* Arabic is always Cairo — form controls don't inherit the page font by default, so make them. */
.glamora-scope input, .glamora-scope select, .glamora-scope textarea, .glamora-scope optgroup { font-family: inherit; }
.glamora-scope h1, .glamora-scope h2, .glamora-scope h3, .glamora-scope h4, .glamora-scope h5, .glamora-scope h6, .glamora-scope summary { font-family: inherit; } /* site themes style headings with their own font — Arabic stays Cairo */
.glamora-scope .glamora-logotype { font-family: "Cormorant Garamond", serif; font-style: italic; font-weight: 600; }
/* Glamora Plus wordmark image (assets/img/logo-dark.png / logo-light.png) — replaces the old plain-text .glamora-logotype in every spot that renders the brand mark. */
.glamora-logo-img { height: 48px; width: auto; display: block; } /* v1.20.4 — new stacked emblem logo (≈2:1) needs more height than the old wide wordmark */
/* Light/dark wordmark swap — a spot that can be in either mode (see the theme switch) renders BOTH
![]()
variants (class glamora-logo-for-dark / glamora-logo-for-light, same markup pattern each time)
and this shows only the one matching the currently-active scope, so the near-white logo-dark.png
wordmark never ends up sitting unreadably on a light background (or vice-versa). A spot that's always
one mode regardless of the switch (e.g. the dashboard's always-dark topbar) keeps a single plain
.glamora-logo-img with no variant classes, unaffected by this rule. */
.glamora-logo-for-dark, .glamora-logo-for-light { display: none; }
.glamora-dark .glamora-logo-for-dark, .glamora-light .glamora-logo-for-light { display: block; }
/* Semantic tokens: resolve to the dark or light token set depending on which of .glamora-dark /
.glamora-light is currently applied to the scope (see the light/dark/system theme switch below).
Components written against these (rather than the literal -dark/-light suffixed tokens) automatically
follow whichever mode the visitor picked, with no extra CSS needed per component. Components that must
stay a fixed shade regardless of mode (e.g. dark text for contrast on a gold button, or the WhatsApp
Messages inbox which intentionally keeps its own always-light chat-app look) keep referencing the
literal tokens directly and are left alone. */
.glamora-dark {
--g-bg: var(--g-bg-dark); --g-bg-2: var(--g-bg-dark-2); --g-bg-3: var(--g-bg-dark-3);
--g-border: var(--g-border-dark); --g-text: var(--g-text-dark); --g-text-muted: var(--g-text-muted-dark);
background: var(--g-bg); color: var(--g-text);
}
.glamora-light {
--g-bg: var(--g-bg-light); --g-bg-2: var(--g-bg-light-2); --g-bg-3: var(--g-bg-light-3);
--g-border: var(--g-border-light); --g-text: var(--g-text-light); --g-text-muted: var(--g-text-muted-light);
--g-gold-2: oklch(0.6 0.13 70); /* deeper gold for links/text on the light ground (contrast) */
background:
radial-gradient(1100px 520px at 100% -8%, oklch(0.88 0.06 15 / .55), transparent 62%),
radial-gradient(900px 480px at -8% 12%, oklch(0.9 0.07 85 / .6), transparent 60%),
radial-gradient(1000px 600px at 50% 110%, oklch(0.88 0.05 330 / .35), transparent 60%),
var(--g-bg);
background-attachment: fixed;
color: var(--g-text);
}
/* The client-facing full-page templates (centers list / "home", the single-center booking page, the
login screen) wrap their content in `.glamora-scope` with nothing else in the page body — but that div
was only ever as tall as its own content. On a tall viewport with modest content (e.g. only a couple of
centers listed) the background stopped partway down and the plain white WordPress page background
showed through below it. Forcing the scope to at least fill the viewport closes that gap; on pages
already taller than the viewport this has no visible effect. Applies regardless of mode (was dark-only
before the light/dark switch existed, when every one of these pages was always dark). */
.glamora-scope { min-height: 100vh; }
/* Top-of-page "Register your center" bar — Settings > Glamora Plus > "شريط الإعلان" (see
Glamora_Public::announcement_bar_html()). Full-bleed like .glamora-hero (a sibling of .glamora-shell,
not inside it), always the same gold-on-dark treatment regardless of the page's own light/dark mode —
it's a promo strip, not page content. */
.glamora-announcement-bar { width: 100%; box-sizing: border-box; background: linear-gradient(90deg, var(--g-gold), var(--g-gold-2), var(--g-gold)); color: var(--g-bg-dark); padding: 10px 20px; display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; text-align: center; }
.glamora-announcement-bar .txt { font-size: 13px; font-weight: 700; }
.glamora-announcement-bar .glamora-btn { padding: 7px 18px; font-size: 12px; white-space: nowrap; }
/* v1.20.7 — "Contact Us" button + popup (Glamora_Contact) */
.glamora-announcement-actions { display: inline-grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 8px; } /* equal columns → both buttons always the same width, whatever the language */
/* Both bar buttons share one box: same border width, padding, font, height and min-width. */
.glamora-announcement-actions .glamora-btn { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 128px; height: 34px; padding: 0 18px; font-size: 12px; line-height: 1; border: 1.5px solid var(--g-bg-dark); text-decoration: none; font-family: inherit; }
.glamora-announcement-bar .glamora-contact-open { background: transparent; color: var(--g-bg-dark); cursor: pointer; }
.glamora-announcement-bar .glamora-contact-open:hover { background: var(--g-bg-dark); color: var(--g-gold); }
.glamora-announcement-bar .glamora-contact-open:focus-visible, .glamora-contact-modal :focus-visible { outline: 2px solid var(--g-gold); outline-offset: 2px; }
.glamora-contact-backdrop[hidden] { display: none; }
.glamora-contact-modal { position: relative; max-width: 460px; padding: 26px 24px 22px; border: 1px solid var(--g-border); }
.glamora-contact-modal h2 { font-size: 19px; font-weight: 800; margin: 0 0 6px; }
.glamora-contact-sub { font-size: 12.5px; color: var(--g-text-muted); margin: 0 0 16px; line-height: 1.6; }
.glamora-contact-x { position: absolute; top: 12px; inset-inline-end: 12px; width: 32px; height: 32px; border-radius: 50%; border: none; background: var(--g-bg-3); color: var(--g-text); font-size: 20px; line-height: 1; cursor: pointer; }
.glamora-contact-x:hover { background: var(--g-border); }
.glamora-contact-ways { display: grid; gap: 8px; }
.glamora-contact-way { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 14px; background: var(--g-bg-2); border: 1px solid var(--g-border); color: inherit; text-decoration: none; transition: border-color .15s ease, transform .12s ease; }
.glamora-contact-way:hover { border-color: var(--g-gold); transform: translateY(-1px); }
.glamora-contact-way .ic { flex: 0 0 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.glamora-contact-way .ic-mail { background: color-mix(in oklab, var(--g-gold) 18%, transparent); color: var(--g-gold); }
.glamora-contact-way .ic-wa { background: color-mix(in oklab, #25d366 18%, transparent); color: #25d366; }
.glamora-contact-way .tx { display: flex; flex-direction: column; min-width: 0; }
.glamora-contact-way .lb { font-size: 11px; color: var(--g-text-muted); font-weight: 600; }
.glamora-contact-way .vl { font-size: 14px; font-weight: 700; overflow-wrap: anywhere; text-align: start; }
.glamora-contact-sep { display: flex; align-items: center; gap: 10px; margin: 18px 0 12px; font-size: 12px; font-weight: 700; color: var(--g-text-muted); }
.glamora-contact-sep::before, .glamora-contact-sep::after { content: ""; flex: 1; height: 1px; background: var(--g-border); }
.glamora-contact-form textarea { resize: vertical; min-height: 90px; }
.glamora-contact-hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.glamora-contact-err { background: var(--g-danger-bg); color: var(--g-danger); font-size: 12px; padding: 9px 12px; border-radius: 10px; margin-bottom: 10px; }
.glamora-contact-err[hidden], .glamora-contact-ok[hidden], .glamora-contact-form[hidden] { display: none; }
.glamora-contact-send { width: 100%; padding: 12px; font-size: 14px; cursor: pointer; }
.glamora-contact-send:disabled { opacity: .65; cursor: progress; }
.glamora-contact-ok { text-align: center; padding: 10px 0 4px; }
.glamora-contact-ok .tick { width: 56px; height: 56px; border-radius: 50%; margin: 6px auto 12px; display: flex; align-items: center; justify-content: center; font-size: 26px; background: color-mix(in oklab, #25d366 18%, transparent); color: #25d366; }
.glamora-contact-ok .h { font-size: 16px; font-weight: 800; }
.glamora-contact-ok .b { font-size: 13px; color: var(--g-text-muted); margin: 6px 0 16px; }
.glamora-contact-ok .glamora-btn { padding: 10px 26px; cursor: pointer; }
@media (max-width: 480px) { .glamora-contact-modal { padding: 22px 16px 18px; } .glamora-announcement-bar { gap: 8px; padding: 9px 12px; } }
.glamora-shell { max-width: 1000px; margin: 0 auto; padding: 24px 20px 60px; }
.glamora-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 16px; border-bottom: 1px solid var(--g-border); margin-bottom: 20px; }
.glamora-header .glamora-logotype { font-size: 24px; color: var(--g-gold); }
.glamora-header .glamora-logo-img { height: 82px; align-self: center; } /* client centers-list header — 100% larger per Wissam's request (was 30px) */
.glamora-lang-switch { display: flex; align-items: center; gap: 6px; background: var(--g-bg-2); border: 1px solid var(--g-border); border-radius: 20px; padding: 5px 12px; font-size: 12px; color: var(--g-text-muted); }
.glamora-lang-switch a { color: inherit; }
.glamora-lang-switch a.is-active { color: var(--g-gold); font-weight: 700; }
/* ---- narrow-viewport fix (v1.19.2) — .glamora-header packed logo + controls into one row with no
breakpoint, so at app/phone widths (the app's WebView is always this narrow) the controls cluster —
worst on center-list.php, which also had a "My Bookings" chip before it moved to the bottom nav —
ran past the edge (the language switch specifically, since it's last in the row / first in RTL's
reading order... it sits at the row's *end*, which is the visual left in RTL, same side it was
reported cut off on). Logo drops to its own full-width row, controls wrap below it, matching what
Wissam asked for (logo first, controls under it) instead of guessing at a narrower logo/controls fit. */
@media (max-width: 480px) {
.glamora-header { flex-direction: column; align-items: stretch; gap: 12px; }
.glamora-header > .glamora-flex { justify-content: flex-end; flex-wrap: wrap; }
/* v1.19.5 fix: align-items:stretch above (kept so the controls row still fills the width nicely)
was also stretching the logo ![]()
itself — a flex item's auto cross-size (here, width:auto,
since the header is now a column so width IS the cross axis) gets stretched to fill by default,
which overrides the image's own aspect ratio and squashed/widened the wordmark. align-self pins
the logo back to its own intrinsic width regardless of the row's align-items. */
.glamora-header .glamora-logo-img { height: 60px; align-self: flex-start; }
}
/* ---- light/dark/system theme switch — a 3-button pill (data-theme-btn="light|dark|system" on each
button, see wireThemeSwitch() in glamora-client.js / glamora-dashboard.js). Uses the semantic tokens
above so it always matches whichever mode is currently active. */
.glamora-theme-switch { display: flex; align-items: center; gap: 2px; background: var(--g-bg-2); border: 1px solid var(--g-border); border-radius: 20px; padding: 3px; flex-shrink: 0; }
.glamora-theme-switch button { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: none; border: none; color: var(--g-text-muted); transition: background-color .15s ease, color .15s ease; }
.glamora-theme-switch button:hover { color: var(--g-text); }
.glamora-theme-switch button.is-active { background: var(--g-gold); color: var(--g-bg-dark); }
.glamora-theme-switch svg { width: 14px; height: 14px; }
.glamora-page-title h1 { font-size: 20px; font-weight: 800; margin: 0 0 20px; }
/* ---- centers list: dynamic hero (headline + booking/center-owner toggle + search + category chips
+ hero photo). Full-bleed — rendered as a sibling of `.glamora-shell`, not inside it, so its background
spans the full viewport width regardless of the shell's own 1000px max-width. Deliberately dark/gold
regardless of the site's light/dark toggle (same precedent as .glamora-hero-slider/.glamora-ads-slide
below, which are also fixed-dark marketing surfaces) — the `-dark` suffixed tokens are used directly
rather than the semantic `--g-bg`/`--g-text` ones a light/dark visitor would otherwise get. */
.glamora-hero {
margin-top: 6px;
padding: 62px 20px 53px; /* ~10% taller than the original 56/48 — more breathing room around the floating demo card */
position: relative;
background:
radial-gradient(circle at 20% 15%, oklch(0.34 0.06 60 / 0.55), transparent 55%),
linear-gradient(135deg, oklch(0.3 0.04 40), oklch(0.19 0.03 30));
}
/* Subtle diagonal hairline texture — decorative only, never clipped (no overflow:hidden here: an earlier
draft of this hero clipped the floating demo card by putting overflow:hidden on this same element). */
.glamora-hero::before {
content: "";
position: absolute; inset: 0;
background-image: repeating-linear-gradient(115deg, oklch(0.76 0.135 80 / 0.05) 0px, oklch(0.76 0.135 80 / 0.05) 1px, transparent 1px, transparent 64px);
pointer-events: none;
}
.glamora-hero-inner { max-width: 1000px; margin: 0 auto; position: relative; display: flex; align-items: center; gap: 44px; flex-wrap: wrap; }
.glamora-hero-text { flex: 1 1 380px; min-width: 0; }
.glamora-hero-headline { font-size: 40px; font-weight: 800; line-height: 1.28; margin: 0; color: var(--g-text-dark); }
.glamora-hero-headline .accent { color: var(--g-gold); }
.glamora-hero-sub { font-size: 15px; color: var(--g-text-muted-dark); margin: 14px 0 0; max-width: 480px; line-height: 1.85; }
.glamora-hero-toggle { display: inline-flex; background: var(--g-bg-dark-2); border: 1px solid var(--g-border-dark); border-radius: 30px; padding: 4px; margin-top: 28px; }
.glamora-hero-toggle span, .glamora-hero-toggle a { padding: 11px 22px; border-radius: 26px; font-weight: 700; font-size: 13px; }
.glamora-hero-toggle span.is-active { background: var(--g-gold); color: var(--g-bg-dark); }
.glamora-hero-toggle a { color: var(--g-text-muted-dark); }
.glamora-hero-toggle a:hover { color: var(--g-text-dark); }
.glamora-hero-search { margin-top: 20px; background: var(--g-bg-dark-2); border: 1px solid var(--g-border-dark); border-radius: 16px; padding: 8px; display: flex; align-items: center; gap: 10px; max-width: 520px; box-shadow: 0 18px 34px rgba(0,0,0,.3); }
.glamora-hero-search svg { flex-shrink: 0; color: var(--g-text-muted-dark); margin-inline-start: 8px; }
.glamora-hero-search input { flex: 1; min-width: 0; border: none; background: none; color: var(--g-text-dark); font-size: 14px; font-family: inherit; padding: 8px 0; }
.glamora-hero-search input:focus { outline: none; }
.glamora-hero-search input::placeholder { color: var(--g-text-muted-dark); }
.glamora-hero-search .glamora-btn { padding: 12px 24px; white-space: nowrap; }
.glamora-hero-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
/* v1.19.30 — "now live on Google Play" strip at the foot of the hero text column (center-list.php).
Always-dark like the rest of the hero; Google's own badge PNG carries its own black fill and a little
transparent padding, so no frame is drawn around it here. Hidden in the Android app (rule below). */
.glamora-hero-app { margin-top: 22px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.glamora-hero-app-text { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--g-text-dark); }
.glamora-hero-app-new { background: var(--g-gold); color: var(--g-bg-dark); font-size: 10.5px; font-weight: 800; padding: 3px 10px; border-radius: 20px; flex-shrink: 0; }
.glamora-hero-app-badge { display: inline-block; line-height: 0; border-radius: 10px; }
.glamora-hero-app-badge img { height: 58px; width: auto; display: block; transition: transform .15s ease; }
.glamora-hero-app-badge:hover img, .glamora-hero-app-badge:focus-visible img { transform: translateY(-2px); }
.glamora-hero-app-badge:focus-visible { outline: 2px solid var(--g-gold); outline-offset: 2px; }
.glamora-home-page.glamora-in-app .glamora-hero-app { display: none; }
.glamora-hero-media { flex: 0 0 368px; width: 368px; position: relative; }
.glamora-hero-photo { border-radius: 22px; overflow: hidden; width: 100%; aspect-ratio: 4/3; box-shadow: 0 24px 54px rgba(0,0,0,.4); }
.glamora-hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 58% 50%; display: block; }
/* v1.19.6: fallback once glamoraHeroPhotoRetry() (center-list.php) gives up on the real photo — a plain
branded gradient beats a broken-image glyph sitting in the hero for the rest of the visit. */
.glamora-hero-photo.img-failed img { display: none; }
.glamora-hero-photo.img-failed { background: linear-gradient(135deg, var(--g-bg-dark-2), var(--g-bg-dark)); }
.glamora-hero-demo-card { position: absolute; left: -18px; top: calc(100% - 52px); width: 210px; background: var(--g-bg-dark-2); border: 1px solid var(--g-border-dark); border-radius: 16px; padding: 14px 16px; box-shadow: 0 20px 38px rgba(0,0,0,.45); }
.glamora-hero-demo-card .status { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.glamora-hero-demo-card .status-label { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: var(--g-text-muted-dark); }
.glamora-hero-demo-card .status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--g-gold); display: inline-block; flex-shrink: 0; }
.glamora-hero-demo-card .service { font-size: 13.5px; font-weight: 700; color: var(--g-text-dark); }
.glamora-hero-demo-card .duration { font-size: 11px; color: var(--g-text-muted-dark); margin-top: 2px; }
.glamora-hero-demo-card .footer-row { display: flex; justify-content: space-between; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--g-border-dark); }
.glamora-hero-demo-card .footer-row .lbl { font-size: 9.5px; color: var(--g-text-muted-dark); }
.glamora-hero-demo-card .footer-row .val { font-size: 11px; font-weight: 600; margin-top: 2px; color: var(--g-text-dark); }
.glamora-browse-heading { display: flex; align-items: baseline; justify-content: space-between; margin: 8px 0 20px; }
.glamora-browse-heading .title { font-size: 20px; font-weight: 800; }
@media (max-width: 720px) {
.glamora-hero { padding: 44px 16px 40px; } /* ~10% taller, same reasoning as the desktop rule above */
.glamora-hero-inner { flex-direction: column; align-items: stretch; gap: 0; }
.glamora-hero-headline { font-size: 30px; }
.glamora-hero-sub { max-width: none; }
.glamora-hero-search { max-width: none; }
/* v1.19.5 fix: the demo card below is absolutely positioned (out of normal flow), overhanging past
the photo's own bottom edge by design (card height minus its "top: calc(100% - 44px)" offset).
On desktop that overhang sits comfortably inside .glamora-hero's padding because the row layout's
height is governed by the taller text column next to it — but here .glamora-hero-inner stacks into
a single column, so the media block's own height is all that's reserved, and the card's overhang
(~70px) poked past .glamora-hero's 40px bottom padding into the "تصفح المراكز" section below it.
This margin-bottom reserves that space directly on the element that needs it, regardless of
.glamora-hero's own padding. */
.glamora-hero-media { width: 100%; max-width: 300px; margin: 26px auto 80px; }
.glamora-hero-demo-card { width: 190px; left: -10px; top: calc(100% - 44px); padding: 12px 14px; }
.glamora-hero-demo-card .service { font-size: 12.5px; }
}
/* v1.19.7 — the 80px bottom margin above exists only to reserve room for .glamora-hero-demo-card's
overhang on the stacked mobile layout (see that rule's own comment). Inside the app, that card is
hidden entirely (glamora-home-page.glamora-in-app rules further down), so on the app that margin was
just left over as empty dead space at the bottom of the hero — this trims it back to a plain breathing
gap there. Website visitors (mobile or desktop) still see the card and keep the full margin; higher
specificity here (two classes + this one) wins over the plain `.glamora-hero-media` rule above
regardless of the media query it's declared in. */
.glamora-home-page.glamora-in-app .glamora-hero-media { margin-bottom: 26px; }
/* ---- centers grid (client landing) ---- */
.glamora-centers-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.glamora-loading { color: var(--g-text-muted); text-align: center; padding: 30px; grid-column: 1 / -1; }
/* Animated spinner modifier — added alongside .glamora-loading only where the message is a genuine
"still fetching" state (never on empty-state/error reuses of the same base class, e.g. "لا يوجد أحد في
قائمة الانتظار حالياً", so a spinner never spins next to a message saying there's nothing to load). */
.glamora-loading.is-spinner { display: flex; align-items: center; justify-content: center; gap: 9px; }
.glamora-loading.is-spinner::before { content: ""; width: 14px; height: 14px; flex-shrink: 0; border-radius: 50%; border: 2px solid var(--g-border); border-top-color: var(--g-gold); animation: glamora-spin .7s linear infinite; }
@keyframes glamora-spin { to { transform: rotate(360deg); } }
.glamora-center-card { background: var(--g-bg-2); border: 1px solid var(--g-border); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; }
.glamora-center-card .cover { height: 120px; background: linear-gradient(135deg, oklch(0.3 0.04 40), oklch(0.19 0.03 30)); position: relative; display: flex; align-items: center; gap: 10px; padding: 12px; }
.glamora-center-card .cover .avatar { align-self: flex-end; }
/* Client-side "center logo" avatar (shows the center's own logo image via inline background-image,
or an initial letter as fallback) — used on both the centers-list cards and the booking-page hero.
Previously scoped only to `.glamora-center-card .avatar`, which meant the booking-page hero's avatar
(same markup/class, no card wrapper around it) had no width/height/shape at all and silently rendered
invisible there — this base rule now covers both, sized 50% larger than the original 50px. */
.avatar { width: 75px; height: 75px; border-radius: 50%; background: var(--g-bg); border: 2px solid var(--g-gold); display: flex; align-items: center; justify-content: center; font-family: "Cormorant Garamond", serif; font-style: italic; font-weight: 600; color: var(--g-gold); font-size: 30px; flex-shrink: 0; }
/* flex:1 lets .body fill whatever extra height the grid row's tallest card gives this one (the grid
stretches every .glamora-center-card to a common row height by default); combined with the "احجز الآن"
button's own margin-top:auto (see renderCenterCard() in glamora-client.js) this pushes the button to the
same y-position on every card in a row, regardless of how many lines its name/meta/rating happen to take. */
.glamora-center-card .body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.glamora-center-card .name { font-size: 16px; font-weight: 700; }
.glamora-center-card .meta { font-size: 12px; color: var(--g-text-muted); }
/* Offers ticker — fills the otherwise-idle cover space beside the logo (not a thin strip above it),
one short offer line at a time sliding bottom-to-top (see startOfferTickers() in glamora-client.js).
Cards with no active offers get no ticker element at all, so the cover looks exactly as it did before. */
.glamora-center-card .cover .offer-ticker { flex: 1; align-self: stretch; position: relative; overflow: hidden; min-width: 0; }
.glamora-center-card .cover .offer-ticker-line { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4px 2px; transform: translateY(120%); opacity: 0; transition: transform .5s ease, opacity .5s ease; }
.glamora-center-card .cover .offer-ticker-line.is-active { transform: translateY(0); opacity: 1; }
.glamora-center-card .cover .offer-ticker-line.is-leaving { transform: translateY(-120%); opacity: 0; }
/* Two explicit lines (line1/line2, entered separately in the offer form — see offerLinesHtml() in
glamora-client.js), stacked exactly as typed rather than auto-wrapped. Each line is its own row and is
individually truncated with an ellipsis if it's too long for the card, instead of reflowing the stack. */
.glamora-center-card .cover .offer-ticker-line .ln1, .glamora-center-card .cover .offer-ticker-line .ln2 { display: block; width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.5); }
.glamora-center-card .cover .offer-ticker-line .ln1 { font-size: 14.5px; font-weight: 800; }
.glamora-center-card .cover .offer-ticker-line .ln2 { font-size: 12px; font-weight: 600; margin-top: 2px; opacity: .9; }
/* Booking-page hero slider — the bigger, image-capable sibling of the offer-ticker above (see
heroSlideHtml()/startHeroSlider() in glamora-client.js). Only rendered when the center has offers. */
.glamora-hero-slider { position: relative; height: 224px; border-radius: 16px; overflow: hidden; margin-bottom: 18px; background: linear-gradient(135deg, oklch(0.3 0.04 40), oklch(0.19 0.03 30)); } /* ~20% taller than the original 187px */
.glamora-hero-slide { position: absolute; inset: 0; background-size: cover; background-position: center; display: flex; align-items: flex-end; transform: translateY(120%); opacity: 0; transition: transform .6s ease, opacity .6s ease; }
.glamora-hero-slide.is-active { transform: translateY(0); opacity: 1; }
.glamora-hero-slide.is-leaving { transform: translateY(-120%); opacity: 0; }
.glamora-hero-slide .caption { display: block; width: 100%; padding: 16px 18px; background: linear-gradient(to top, rgba(0,0,0,.68), rgba(0,0,0,0)); color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.glamora-hero-slide .caption .ln1, .glamora-hero-slide .caption .ln2 { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.glamora-hero-slide .caption .ln1 { font-size: 16px; font-weight: 800; }
.glamora-hero-slide .caption .ln2 { font-size: 13px; font-weight: 600; margin-top: 3px; opacity: .9; }
.glamora-hero-slide.no-image { align-items: center; justify-content: center; text-align: center; }
.glamora-hero-slide.no-image .caption { background: none; padding: 20px; }
.glamora-hero-slide.no-image .caption .ln1 { font-size: 19px; }
.glamora-hero-slide.no-image .caption .ln2 { font-size: 14px; }
@media (max-width: 640px) { .glamora-hero-slider { height: 185px; } } /* ~20% taller than the original 154px */
/* Site-wide advertising banner slider — centers-list page hero, between the page title and the search
box (see loadAds()/adSlideHtml()/startAdsSlider() in glamora-client.js). Managed only in wp-admin
("الإعلانات"), one plain image per slide, optionally click-through to an external link in a new tab.
No element at all is rendered when there are no active ads. */
.glamora-ads-slider { position: relative; height: 130px; border-radius: 16px; overflow: hidden; margin: 4px 0 22px; background: var(--g-bg-2); }
.glamora-ads-slide { position: absolute; inset: 0; transform: translateY(120%); opacity: 0; transition: transform .6s ease, opacity .6s ease; }
.glamora-ads-slide.is-active { transform: translateY(0); opacity: 1; }
.glamora-ads-slide.is-leaving { transform: translateY(-120%); opacity: 0; }
.glamora-ads-slide, .glamora-ads-slide > a { display: flex; align-items: flex-end; width: 100%; height: 100%; }
.glamora-ads-slide > a { position: absolute; inset: 0; }
.glamora-ads-slide-img { position: absolute; inset: 0; background-size: cover; background-position: center; }
.glamora-ads-slide .caption { position: relative; z-index: 1; display: block; width: 100%; padding: 14px 16px; background: linear-gradient(to top, rgba(0,0,0,.68), rgba(0,0,0,0)); color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.glamora-ads-slide .caption .ln1, .glamora-ads-slide .caption .ln2 { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.glamora-ads-slide .caption .ln1 { font-size: 16px; font-weight: 800; }
.glamora-ads-slide .caption .ln2 { font-size: 13px; font-weight: 600; margin-top: 3px; opacity: .9; }
@media (max-width: 640px) { .glamora-ads-slider { height: 100px; } }
/* ---- buttons / chips / badges ---- */
.glamora-btn { border: none; border-radius: 12px; padding: 11px 18px; font-size: 13px; font-weight: 700; transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .12s ease, box-shadow .15s ease, opacity .15s ease; }
.glamora-btn.gold { background: var(--g-gold); color: var(--g-bg-dark); }
.glamora-btn.gold:hover { background: var(--g-gold-2); }
.glamora-btn.outline { background: transparent; border: 1px solid var(--g-border-light); color: inherit; }
.glamora-btn.outline.dark-border { border-color: var(--g-border-dark); }
.glamora-btn.dark { background: var(--g-bg-dark); color: var(--g-gold); }
.glamora-btn.dark:hover { background: var(--g-bg-dark-2); }
.glamora-btn.danger { background: transparent; color: var(--g-danger); border: 1px solid var(--g-danger-bg); }
.glamora-btn:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(0,0,0,.1); }
.glamora-btn:not(:disabled):active { transform: translateY(0); box-shadow: none; }
.glamora-btn:disabled { opacity: .5; cursor: not-allowed; }
.glamora-chip { display: inline-flex; align-items: center; font-size: 12px; padding: 7px 16px; border-radius: 20px; background: var(--g-bg-dark-2); border: 1px solid var(--g-border-dark); color: var(--g-text-muted-dark); cursor: pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .12s ease; }
.glamora-chip:hover:not(.is-active) { background: var(--g-bg-dark-3); color: var(--g-text-dark); transform: translateY(-1px); }
.glamora-light .glamora-chip { background: var(--g-bg-light-2); border-color: var(--g-border-light); color: var(--g-text-muted-light); }
.glamora-light .glamora-chip:hover:not(.is-active) { background: var(--g-bg-light-3); color: var(--g-text-light); }
.glamora-chip.is-active { background: var(--g-gold); color: var(--g-bg-dark); border-color: var(--g-gold); font-weight: 700; }
.glamora-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 8px; transition: background-color .2s ease, color .2s ease; }
.glamora-badge.success { background: var(--g-success-bg); color: var(--g-success); }
.glamora-badge.pending { background: var(--g-pending-bg); color: var(--g-pending); }
.glamora-badge.danger { background: var(--g-danger-bg); color: var(--g-danger); }
/* ---- toggle switch ---- */
.glamora-toggle { width: 34px; height: 19px; border-radius: 10px; background: var(--g-border-light); position: relative; display: inline-block; cursor: pointer; flex-shrink: 0; border: none; padding: 0; }
.glamora-toggle::after { content: ""; width: 15px; height: 15px; border-radius: 50%; background: #fff; position: absolute; top: 2px; inset-inline-end: 2px; transition: inset-inline .15s; }
.glamora-toggle.is-on { background: var(--g-gold); }
.glamora-toggle.is-on::after { inset-inline-start: 2px; inset-inline-end: auto; }
/* ---- forms ---- */
.glamora-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.glamora-field label { font-size: 12px; color: var(--g-text-muted-dark); font-weight: 600; }
.glamora-light .glamora-field label { color: var(--g-text-muted-light); }
.glamora-field input, .glamora-field select, .glamora-field textarea {
background: var(--g-bg-dark-2); border: 1px solid var(--g-border-dark); color: var(--g-text-dark);
border-radius: 10px; padding: 11px 13px; font-size: 13px; font-family: inherit;
}
.glamora-light .glamora-field input, .glamora-light .glamora-field select, .glamora-light .glamora-field textarea {
background: #fff; border-color: var(--g-border-light); color: var(--g-text-light);
}
/* Checkboxes/radios living inside a .glamora-field (e.g. a "which services this staff member can
perform" list) are independent form controls, not text fields — the padded, rounded text-input
look above squashed them into a shape that made their checked/unchecked state hard to see. Give
them a normal small box with a visible border in both states, and a high-contrast checked color
(the muted gold used elsewhere reads too close to the page background to see a checkmark on it). */
.glamora-field input[type="checkbox"], .glamora-field input[type="radio"] {
background: none; border-radius: 3px; padding: 0; margin: 0;
width: 16px; height: 16px; flex-shrink: 0;
border: 1.5px solid var(--g-border-dark); accent-color: var(--g-text-dark);
}
.glamora-light .glamora-field input[type="checkbox"], .glamora-light .glamora-field input[type="radio"] {
border-color: var(--g-border-light); accent-color: var(--g-text-light);
}
.glamora-field input[type="radio"] { border-radius: 50%; }
.glamora-field.required label::after { content: " *"; color: var(--g-gold); }
/* wp-admin's category multi-select checkboxes (the center/service edit modals' "التصنيفات" picker —
see .c-category-cb/.s-category-cb in glamora-admin.js). The first attempt at fixing these (a plain
`accent-color`) never actually took over rendering: wp-admin's own core CSS styles every
`` on every admin screen (`input[type=checkbox]{...}` — a type+attribute
selector, which out-specifies a bare class selector like `.c-category-cb` on its own), painting a
checked box with the site's admin color-scheme accent and its own dashicon glyph — never designed
against Glamora's own modal, and hard to see clearly under some schemes. This time: take over the
box completely (`appearance: none`, wp-admin's `:before` glyph stripped) and draw our own checkmark
with a plain CSS shape instead of relying on accent-color or any icon font, with `!important` on
every rule so nothing in wp-admin's stylesheet can win regardless of load order. wp-admin only ever
renders these inside .glamora-light, so only the light border token is needed — no dark-mode
variant. */
.c-category-cb, .s-category-cb {
-webkit-appearance: none !important;
appearance: none !important;
width: 18px !important;
height: 18px !important;
min-width: 18px !important;
flex-shrink: 0 !important;
margin: 0 !important;
padding: 0 !important;
border-radius: 4px !important;
border: 1.5px solid var(--g-border-light) !important;
background: #fff !important;
box-shadow: none !important;
position: relative !important;
cursor: pointer !important;
}
.c-category-cb::before, .s-category-cb::before { content: none !important; }
.c-category-cb:checked, .s-category-cb:checked {
background: var(--g-gold) !important;
border-color: var(--g-gold) !important;
}
.c-category-cb:checked::after, .s-category-cb:checked::after {
content: "" !important;
position: absolute !important;
inset: 0 !important;
margin: auto !important;
width: 5px !important;
height: 9px !important;
border: solid var(--g-bg-dark) !important;
border-width: 0 2px 2px 0 !important;
transform: rotate(45deg) translate(-1px, -2px) !important;
}
/* ---- generic table ---- */
.glamora-table { width: 100%; border-collapse: collapse; background: var(--g-bg-2); border: 1px solid var(--g-border); border-radius: 16px; overflow: hidden; }
.glamora-table th { text-align: start; font-size: 11px; color: var(--g-text-muted); font-weight: 700; padding: 12px 16px; border-bottom: 1px solid var(--g-border); }
.glamora-table td { padding: 12px 16px; border-bottom: 1px solid var(--g-border); font-size: 13px; vertical-align: middle; }
.glamora-table tr:last-child td { border-bottom: none; }
.glamora-table tbody tr { transition: background-color .15s ease; }
.glamora-table tbody tr:hover { background: var(--g-bg-3); }
/* Branch cards (dashboard "الفروع والموظفين") reuse .glamora-table as a plain bordered/rounded card
rather than an actual — give just those a gentle hover lift, scoped to their grid container so
it never affects a real data table. */
#branches-grid > .glamora-table { transition: transform .18s ease, box-shadow .18s ease; animation: glamora-card-in .3s ease-out backwards; }
#branches-grid > .glamora-table:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,.07); }
.glamora-table .actions { display: flex; gap: 10px; font-size: 11px; font-weight: 700; }
.glamora-table .actions a, .glamora-table .actions button { background: none; border: none; padding: 0; color: var(--g-gold-2); font-size: 11px; font-weight: 700; }
.glamora-table .actions .danger { color: var(--g-danger); }
/* ---- dashboard shell (top header bar + sidebar layout) ---- */
.glamora-dash-shell { display: flex; flex-direction: column; min-height: 640px; }
/* Header of the dashboard body: Glamora Plus' own mark plus the logged-in center's own logo/name,
both 50% larger than their old sizes inside the sidebar (the sidebar now holds nav only). */
.glamora-dash-topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 14px 28px; background: var(--g-bg-dark); color: var(--g-text-dark); border-bottom: 1px solid var(--g-border-dark); }
.glamora-dash-topbar .topbar-glamora-logo { height: 82px; width: auto; display: block; } /* was 46px */
.glamora-dash-topbar .topbar-center { display: flex; align-items: center; gap: 14px; }
.glamora-dash-topbar .topbar-center-logo { width: 66px; height: 66px; border-radius: 16px; object-fit: cover; background: var(--g-bg-dark-3); } /* was 34px, then 51px, +30% again */
.glamora-dash-topbar .topbar-center-name { font-size: 27px; font-weight: 700; color: var(--g-text-dark); line-height: 1.2; } /* was 18px */
.glamora-dash-body { display: flex; flex: 1; }
.glamora-dash-sidebar { width: 236px; flex-shrink: 0; background: var(--g-bg-dark); color: var(--g-text-dark); display: flex; flex-direction: column; padding: 20px 14px; }
.glamora-dash-nav { display: flex; flex-direction: column; gap: 4px; }
.glamora-dash-nav .navitem { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 10px; font-size: 13px; color: var(--g-text-muted-dark); background: none; border: none; text-align: start; width: 100%; transition: background-color .18s ease, color .18s ease, transform .15s ease; }
.glamora-dash-nav .navitem svg { transition: transform .18s ease; flex-shrink: 0; }
.glamora-dash-nav .navitem:hover:not(.is-active) { background: var(--g-bg-dark-2); color: var(--g-text-dark); }
.glamora-dash-nav .navitem:hover:not(.is-active) svg { transform: scale(1.15); }
.glamora-dash-nav .navitem.is-active { background: var(--g-gold); color: var(--g-bg-dark); font-weight: 700; }
.glamora-dash-nav .navitem:active { transform: scale(.97); }
.glamora-dash-nav .navitem .nav-badge { margin-inline-start: auto; background: var(--g-danger); color: #fff; border-radius: 10px; padding: 1px 7px; font-size: 10px; font-weight: 700; transition: background-color .2s ease, color .2s ease; }
.glamora-dash-nav .navitem.is-active .nav-badge { background: var(--g-bg-dark); color: var(--g-text-dark); }
/* Badge "pop" — replayed via JS (popBadge() in glamora-dashboard.js) whenever an unread-messages or
waiting-list count actually changes, so a new arrival catches the eye instead of silently updating. */
.nav-badge.is-pop { animation: glamora-badge-pop .35s ease-out; }
@keyframes glamora-badge-pop { 0% { transform: scale(.5); opacity: .3; } 55% { transform: scale(1.2); } 100% { transform: scale(1); opacity: 1; } }
.glamora-dash-main { flex: 1; padding: 26px 32px; display: flex; flex-direction: column; gap: 20px; overflow-x: auto; }
.glamora-dash-main h1 { font-size: 20px; font-weight: 800; margin: 0; }
.glamora-dash-main .subtitle { font-size: 12px; color: var(--g-text-muted); margin-top: 4px; }
/* View-switch entrance — replayed via JS (animateViewIn() in glamora-dashboard.js) every time a nav item
is clicked, so each of the dashboard's sections (not just Messages, which already has its own bubble
animation) feels alive as it appears instead of the content just snapping into place. */
.glamora-dash-main.glamora-view-anim { animation: glamora-view-in .3s ease-out; }
@keyframes glamora-view-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* ---- shared footer (client pages: centers list + booking page — see client_footer_html() in
class-glamora-public.php; and the Center Manager dashboard shell — see dashFooterHtml() in
glamora-dashboard.js). Optional Privacy Policy / Terms of Use / Contact Us links (each only rendered
when set in Settings > Glamora Plus) plus a fixed "Powered by" credit. Styled for the dark scope by
default (client pages); the .glamora-light override below covers the dashboard shell. */
.glamora-footer { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 20px 20px 4px; margin-top: 10px; border-top: 1px solid var(--g-border-dark); font-size: 11.5px; color: var(--g-text-muted-dark); text-align: center; }
.glamora-footer-links { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; }
.glamora-footer-links a { color: var(--g-text-muted-dark); transition: color .15s ease; }
.glamora-footer-links a:hover { color: var(--g-gold-2); }
.glamora-footer-links .sep { opacity: .5; }
.glamora-footer-credit a { color: var(--g-gold-2); font-weight: 600; }
.glamora-light .glamora-footer { border-top-color: var(--g-border-light); color: var(--g-text-muted-light); }
.glamora-light .glamora-footer-links a { color: var(--g-text-muted-light); }
@media (max-width: 640px) { .glamora-footer { padding: 16px 16px 4px; } }
/* ---- legal/contact pages (Privacy Policy, Terms of Use, Contact Us — public/templates/legal-page.php,
selectable from Page Attributes as "قالب Glamora Plus") ---- */
.glamora-legal-content { font-size: 14px; line-height: 1.9; color: var(--g-text); }
.glamora-legal-content h1, .glamora-legal-content h2, .glamora-legal-content h3 { color: var(--g-text); margin: 26px 0 10px; }
.glamora-legal-content h1:first-child, .glamora-legal-content h2:first-child, .glamora-legal-content h3:first-child { margin-top: 0; }
.glamora-legal-content p { margin: 0 0 14px; }
.glamora-legal-content ul, .glamora-legal-content ol { margin: 0 0 14px; padding-inline-start: 22px; }
.glamora-legal-content a { color: var(--g-gold-2); text-decoration: underline; }
/* [glamora_contact_info] shortcode output — used on a Contact Us page (see shortcode_contact_info()
in class-glamora-public.php); values come from Settings > Glamora Plus > معلومات التواصل. */
.glamora-contact-info { display: flex; flex-direction: column; gap: 14px; margin: 6px 0; }
.glamora-contact-info .row { display: flex; align-items: flex-start; gap: 14px; background: var(--g-bg-2); border: 1px solid var(--g-border); border-radius: 14px; padding: 16px 18px; }
.glamora-contact-info .ico { flex-shrink: 0; color: var(--g-gold); margin-top: 2px; }
.glamora-contact-info .label { font-size: 11px; color: var(--g-text-muted); font-weight: 700; margin-bottom: 4px; }
.glamora-contact-info .val { font-size: 14.5px; font-weight: 600; }
.glamora-contact-info .val a { color: var(--g-text); }
.glamora-contact-info .val a:hover { color: var(--g-gold-2); }
/* ---- calendar day list ---- */
.glamora-cal-row { display: grid; grid-template-columns: 60px 1fr; padding: 10px 16px; border-bottom: 1px solid var(--g-border); align-items: center; }
.glamora-cal-row:last-child { border-bottom: none; }
.glamora-cal-slot { border-radius: 10px; padding: 9px 12px; display: flex; align-items: center; justify-content: space-between; font-size: 12px; transition: transform .15s ease, box-shadow .15s ease; animation: glamora-card-in .3s ease-out backwards; }
.glamora-cal-slot:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,0,0,.06); }
/* --g-pending-bg/--g-success-bg are fixed light tints regardless of light/dark mode (by design — a
status highlight, not a themed surface), so their text must stay a fixed dark shade too. Previously
this relied on inheriting the surrounding text color, which is fine in light mode (already dark) but
turned unreadable in dark mode (near-white dashboard text on a near-white badge). */
.glamora-cal-slot.pending { background: var(--g-pending-bg); color: var(--g-text-light); }
.glamora-cal-slot.confirmed { background: var(--g-success-bg); color: var(--g-text-light); }
/* .glamora-muted (the staff-name aside, e.g. "— (Ahmed)") sets its own color rather than inheriting, and
its `.glamora-dark .glamora-muted` variant would otherwise win here by specificity — repeat the fixed
dark-on-light-badge override for it too, so it stays legible instead of going near-invisible in dark mode. */
.glamora-cal-slot.pending .glamora-muted, .glamora-cal-slot.confirmed .glamora-muted { color: var(--g-text-muted-light); }
.glamora-cal-slot.no-show { background: var(--g-danger-bg); color: var(--g-text-light); }
.glamora-cal-slot.no-show .glamora-muted { color: var(--g-text-muted-light); }
.glamora-cal-slot.open { border: 1px dashed var(--g-border); color: var(--g-text-muted); }
.glamora-cal-slot.closed { background: var(--g-bg-3); color: var(--g-text-muted); }
/* ---- modal ---- */
.glamora-modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; z-index: 9999; padding: 20px; animation: glamora-fade-in .18s ease-out; }
.glamora-modal { background: var(--g-bg); color: var(--g-text); border-radius: 18px; padding: 24px; width: 100%; max-width: 440px; max-height: 86vh; overflow-y: auto; animation: glamora-modal-in .22s cubic-bezier(.2,.9,.3,1.2); }
.glamora-modal h2 { margin: 0 0 16px; font-size: 16px; }
@keyframes glamora-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes glamora-modal-in { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
/* ---- in-app notification log (v1.19.12; moved from a header bell into the bottom nav's own tab in
v1.19.13 — see bottom_nav_html()'s docblock). The unread badge sits on the bottom-nav icon itself
(.glamora-nav-icon-wrap, that tab's own wrapper around its