/* ============================================================
   Arabesque Elegant Template — Mawada/Nisba
   Rich Arab/Islamic visual layer with gold accents, warm cream
   backgrounds, geometric patterns, and oriental elements.

   STRATEGY: Override CSS custom properties at :root so the
   ENTIRE base theme (app.css + frontend-polish.css) inherits
   the arabesque palette automatically. Then add targeted
   !important overrides for hardcoded values (#fff, #145c4b, etc.)
   and decorative arabesque elements.

   Loaded AFTER app.css + frontend-polish.css + mobile.css.
   Visual-only — no layout or functional changes.
   ============================================================ */

/* ── ROOT TOKEN OVERRIDES ─────────────────────────────────────
   By redefining these CSS custom properties, 80%+ of the base
   theme automatically adopts the arabesque palette without
   needing individual class overrides.                               */
:root {
  /* Arabesque palette */
  --arab-bg:            #f8f3e8;
  --arab-surface:       #fff8ed;
  --arab-surface-alt:   #f3ebd8;
  --arab-surface-deep:  #ede4d0;
  --arab-text:          #1e1409;
  --arab-text-soft:     #5a4a36;
  --arab-text-faint:    #8a7a66;
  --arab-gold:          #c9952e;
  --arab-gold-bright:   #daa844;
  --arab-gold-deep:     #9a7020;
  --arab-gold-pale:     #f0d9a0;
  --arab-green:         #1a7a5c;
  --arab-green-deep:    #0e5c42;
  --arab-green-soft:    #d4ede4;
  --arab-brown:         #6b4c2a;
  --arab-brown-light:   #b89a6e;
  --arab-rose:          #c4636e;
  --arab-border:        #dcc9a8;
  --arab-border-gold:   #d4b876;
  --arab-shadow:        rgba(42, 31, 20, 0.10);
  --arab-shadow-md:     rgba(42, 31, 20, 0.16);
  --arab-shadow-gold:   rgba(201, 149, 46, 0.12);
  --arab-pattern-opacity: 0.07;
  --arab-radius:        10px;

  /* ── Override base theme tokens ────────────────────────────── */
  --bg:                 var(--arab-bg);
  --bg-soft:            var(--arab-surface-alt);
  --surface:            var(--arab-surface);
  --surface-strong:     var(--arab-surface);
  --surface-muted:      var(--arab-surface-alt);
  --primary:            var(--arab-gold);
  --primary-soft:       var(--arab-gold-pale);
  --accent:             var(--arab-gold);
  --accent-soft:        var(--arab-gold-pale);
  --text:               var(--arab-text);
  --text-soft:          var(--arab-text-soft);
  --text-faint:         var(--arab-text-faint);
  --border:             var(--arab-border);
  --border-strong:      rgba(212, 184, 118, 0.28);
  --brand:              var(--arab-gold);
  --color-primary:      var(--arab-gold);
  --color-secondary:    var(--arab-brown);
  --line:               var(--arab-border);
  --shadow:             0 22px 55px var(--arab-shadow);
  --shadow-soft:        var(--arab-shadow);
  --fp-elevation-1:     0 1px 3px var(--arab-shadow), 0 1px 2px var(--arab-shadow-gold);
  --fp-elevation-2:     0 4px 12px var(--arab-shadow), 0 2px 4px var(--arab-shadow-gold);
  --fp-elevation-3:     0 6px 16px var(--arab-shadow-md), 0 2px 4px var(--arab-shadow-gold);
  --fp-radius-card:     var(--arab-radius);
  --fp-radius-soft:     var(--arab-radius);

  /* ── RGB companions (for rgba() calls in app.css) ──────────── */
  --primary-rgb:        201, 149, 46;
  --secondary:          var(--arab-gold-deep);
  --secondary-rgb:      154, 112, 32;
  --surface-rgb:        255, 248, 237;
  --surface-warm:       var(--arab-surface-alt);
  --shadow-rgb:         42, 31, 20;
}

/* ══════════════════════════════════════════════════════════════
   GLOBAL — body, page, links
   ══════════════════════════════════════════════════════════════ */
html body,
html body.is-public-viewport {
  background: var(--arab-bg) !important;
  color: var(--arab-text) !important;
}

/* ── GLOBAL WHITE-BACKGROUND OVERRIDE ─────────────────────────
   This is the KEY rule: any container element that uses #fff or
   white as background gets converted to warm cream automatically.
   We use :where() to keep specificity low but !important to win.  */
html body :where(section, article, aside, div, main, form, fieldset, details, dialog)[style*="background"],
html body .card,
html body .panel,
html body .box,
html body .content-card,
html body .settings-card,
html body .filter-card,
html body .profile-card,
html body .form-card,
html body .account-card,
html body .account-form-card,
html body .account-page-hero,
html body .account-promo-bar,
html body .account-user-card,
html body .account-summary-card,
html body .account-kpi-card,
html body .account-notifications-box,
html body .account-directory-head,
html body .account-side-stats,
html body .account-side-note,
html body .account-search-box,
html body .account-dashboard-panel,
html body .account-dashboard-status-card,
html body .account-dashboard-hero,
html body .account-dashboard-check-item:hover,
html body .account-dashboard-action:hover,
html body .account-dashboard-status-mini:hover,
html body .account-dashboard-suggestion-card:hover,
html body .dashboard-card,
html body .notification-card,
html body .profile-visit-card,
html body .account-interest-compact-item,
html body .account-match-row,
html body .account-feed-item,
html body .directory-member-card,
html body .blog-card,
html body .blog-post-card,
html body .blog-post-card--guest,
html body .fc-stat,
html body .fc-section,
html body .fc-create-section[open] .fc-form,
html body .fc-link[open] .fc-form,
html body .fc-link[open] .fc-link__danger,
html body .home-member-tile,
html body .is-public-viewport .card,
html body .is-public-viewport .profile-panel,
html body .is-public-viewport .account-search-box,
html body .is-public-viewport .account-dashboard-panel,
html body .is-public-viewport .account-dashboard-status-card,
html body .is-public-viewport .account-dashboard-check-item:hover,
html body .is-public-viewport .account-dashboard-action:hover,
html body .is-public-viewport .account-dashboard-suggestion-card:hover,
html body .is-public-viewport .account-dashboard-status-mini:hover,
html body .is-public-viewport .directory-member-card,
html body .is-public-viewport .icon-action:hover,
html body .is-public-viewport .icon-link:hover,
html body .is-public-viewport .key-fact:hover,
html body .is-public-viewport .reg-flow-inner,
html body .is-public-viewport .reg-gender-card,
html body .is-public-viewport .form-card.registration-stepper,
html body .is-public-viewport .reg-pledge-check-row:hover,
html body .is-public-viewport .account-dashboard-check-icon,
html body .is-public-viewport .account-dashboard-action-icon,
html body .is-home-route .home-member-card,
html body .is-home-route .home-premium-stat-card,
html body .is-home-route .home-shortcut-card,
html body .is-home-route .home-hero-search--premium {
  background: var(--arab-surface) !important;
  border-color: var(--arab-border) !important;
  border-top-color: var(--arab-gold-pale) !important;
  border-top-width: 2px !important;
  border-top-style: solid !important;
  box-shadow: 0 2px 12px var(--arab-shadow), 0 1px 3px var(--arab-shadow-gold) !important;
  border-radius: var(--arab-radius) !important;
}

/* ── Hover states use slightly warmer surface ──────────────── */
html body .card:hover,
html body .directory-member-card:hover,
html body .notification-card:hover,
html body .profile-visit-card:hover,
html body .account-interest-compact-item:hover,
html body .is-public-viewport .directory-member-card:hover,
html body .is-home-route .home-member-card:hover,
html body .is-home-route .home-shortcut-card:hover {
  border-color: var(--arab-gold) !important;
  box-shadow: 0 6px 20px var(--arab-shadow-md), 0 2px 6px var(--arab-shadow-gold) !important;
}

/* ── Unread notification gets subtle gold gradient ──────────── */
html body .notification-card.is-unread {
  background: linear-gradient(135deg, rgba(201, 149, 46, 0.06), rgba(201, 149, 46, 0.02) 45%, var(--arab-surface)) !important;
}

/* ══════════════════════════════════════════════════════════════
   EMPTY STATES
   ══════════════════════════════════════════════════════════════ */
html body .account-empty-box,
html body .is-public-viewport .account-empty-box,
html body .account-empty-panel {
  background: var(--arab-surface-alt) !important;
  border-color: var(--arab-border-gold) !important;
  border-style: dashed !important;
  border-radius: var(--arab-radius) !important;
}
html body .account-empty-panel__icon {
  background: var(--arab-gold-pale) !important;
  color: var(--arab-gold-deep) !important;
}
html body .account-empty-box strong {
  color: var(--arab-brown) !important;
}

/* ══════════════════════════════════════════════════════════════
   HEADER / NAVIGATION
   ══════════════════════════════════════════════════════════════ */
html body .site-header {
  background: linear-gradient(180deg, rgba(248, 243, 232, 0.97), rgba(248, 243, 232, 0.88)) !important;
  border-bottom: 2px solid var(--arab-border-gold) !important;
}

html body .nav-shell {
  background: rgba(255, 248, 237, 0.80) !important;
  border-color: var(--arab-border-gold) !important;
  box-shadow: 0 14px 40px var(--arab-shadow-gold) !important;
}

html body .brand-mark {
  background: linear-gradient(160deg, var(--arab-gold-deep), var(--arab-gold)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}
html body .brand-mark::after { border-color: rgba(255, 255, 255, 0.22) !important; }
html body .brand-copy strong { color: var(--arab-brown) !important; }
html body .brand-copy small { color: var(--arab-text-faint) !important; }
html body .nav-links a { color: var(--arab-text-soft) !important; }
html body .nav-links a:hover { color: var(--arab-gold-deep) !important; }
html body .nav-toggle span,
html body .nav-toggle span::before,
html body .nav-toggle span::after { background: var(--arab-brown) !important; }

/* ══════════════════════════════════════════════════════════════
   AUTH HEADER (logged-in pages) — cream/gold arabesque
   ══════════════════════════════════════════════════════════════ */
html body .site-header.site-header-auth {
  background: linear-gradient(180deg, rgba(248, 243, 232, 0.97), rgba(248, 243, 232, 0.90)) !important;
  border-bottom: 2px solid var(--arab-border-gold) !important;
}
html body .site-header.site-header-auth .auth-header-shell {
  background: rgba(255, 248, 237, 0.80) !important;
  border: 1px solid var(--arab-border-gold) !important;
  border-radius: 18px !important;
  box-shadow: 0 8px 24px var(--arab-shadow-gold) !important;
}
html body .site-header.site-header-auth .brand-mark {
  background: linear-gradient(160deg, var(--arab-gold-deep), var(--arab-gold)) !important;
}
html body .site-header.site-header-auth .brand-copy strong { color: var(--arab-brown) !important; }
html body .site-header.site-header-auth .brand-copy small { color: var(--arab-text-faint) !important; }
html body .site-header.site-header-auth .nav-links a { color: var(--arab-text-soft) !important; }
html body .site-header.site-header-auth .nav-links a:hover { color: var(--arab-gold-deep) !important; }
html body .site-header.site-header-auth .lang-switch {
  background: rgba(201, 149, 46, 0.10) !important;
  border-color: var(--arab-border-gold) !important;
}
html body .site-header.site-header-auth .lang-switch a { color: var(--arab-text-soft) !important; }
html body .site-header.site-header-auth .lang-switch a.is-active {
  background: var(--arab-gold) !important;
  color: #fff !important;
}
html body .site-header.site-header-auth .nav-toggle {
  background: rgba(201, 149, 46, 0.10) !important;
  border-color: var(--arab-border-gold) !important;
}
html body .site-header.site-header-auth .nav-toggle span,
html body .site-header.site-header-auth .nav-toggle span::before,
html body .site-header.site-header-auth .nav-toggle span::after { background: var(--arab-brown) !important; }
html body .site-header.site-header-auth .account-tabs-nav {
  background: rgba(201, 149, 46, 0.08) !important;
  border: 1px solid var(--arab-border-gold) !important;
}
html body .site-header.site-header-auth .account-tab { color: var(--arab-text-soft) !important; }
html body .site-header.site-header-auth .account-tab:hover,
html body .site-header.site-header-auth .account-tab.is-active {
  color: var(--arab-gold-deep) !important;
  border-bottom-color: var(--arab-gold) !important;
}
html body .site-header.site-header-auth .nav-actions .btn,
html body .site-header.site-header-auth .nav-actions button {
  border-color: var(--arab-border-gold) !important;
}

/* ══════════════════════════════════════════════════════════════
   BUTTONS — override ALL green/blue gradients
   ══════════════════════════════════════════════════════════════ */
html body .btn-primary,
html body .is-public-viewport .btn-primary,
html body .is-home-route .btn-primary,
html body .home-cta-btn-primary,
html body .account-dashboard-inline-actions .btn-primary,
html body .account-search-submit-group .btn-primary,
html body .account-dashboard-priority-callout .btn-primary,
html body .notification-card-actions .btn-success,
html body .chat-composer__send:not(:disabled),
html body .home-hero-search-btn {
  background: linear-gradient(135deg, var(--arab-gold-bright), var(--arab-gold), var(--arab-gold-deep)) !important;
  border-color: var(--arab-gold-deep) !important;
  color: #fff !important;
  text-shadow: 0 1px 1px rgba(0,0,0,0.15) !important;
  box-shadow: 0 2px 6px var(--arab-shadow-gold) !important;
}
html body .btn-primary:hover,
html body .is-public-viewport .btn-primary:hover,
html body .home-cta-btn-primary:hover,
html body .chat-composer__send:not(:disabled):hover {
  background: linear-gradient(135deg, var(--arab-gold), var(--arab-gold-deep), #7a5818) !important;
  box-shadow: 0 4px 12px var(--arab-shadow-gold) !important;
}

html body .btn-secondary,
html body .is-public-viewport .btn-secondary,
html body .account-dashboard-inline-actions .btn-secondary,
html body .account-search-submit-group .btn-secondary,
html body .account-dashboard-priority-callout .btn-secondary {
  border: 2px solid var(--arab-gold) !important;
  color: var(--arab-gold-deep) !important;
  background: transparent !important;
}
html body .btn-secondary:hover,
html body .is-public-viewport .btn-secondary:hover {
  background: var(--arab-gold) !important;
  color: #fff !important;
  text-shadow: 0 1px 1px rgba(0,0,0,0.15) !important;
}

html body .btn-outline-primary,
html body .is-public-viewport .btn-outline-primary,
html body .home-cta-btn-ghost,
html body .home-member-btn,
html body .discover-search-chips .btn-ghost,
html body .discover-search-chips .btn-outline {
  border-color: var(--arab-gold) !important;
  color: var(--arab-gold-deep) !important;
}
html body .btn-outline-primary:hover,
html body .is-public-viewport .btn-outline-primary:hover,
html body .home-cta-btn-ghost:hover,
html body .home-member-btn:hover,
html body .discover-search-chips .btn-ghost:hover,
html body .discover-search-chips .btn-outline:hover {
  background: var(--arab-gold) !important;
  color: #fff !important;
}

html body .btn-back { color: var(--arab-gold-deep) !important; }

/* ══════════════════════════════════════════════════════════════
   HOMEPAGE — Hero
   ══════════════════════════════════════════════════════════════ */
html body .home-premium-hero {
  background:
    radial-gradient(ellipse at 8% 8%, rgba(201, 149, 46, 0.25), transparent 35%),
    radial-gradient(ellipse at 92% 85%, rgba(26, 122, 92, 0.15), transparent 35%),
    radial-gradient(ellipse at 50% 50%, rgba(201, 149, 46, 0.06), transparent 60%),
    linear-gradient(135deg, #f0e6d0 0%, #fff8ed 40%, #f3ebd8 100%) !important;
  border-bottom: 3px solid var(--arab-gold-pale) !important;
}
html body .home-premium-country-chip {
  background: var(--arab-gold-pale) !important;
  color: var(--arab-gold-deep) !important;
  border-color: var(--arab-border-gold) !important;
}

/* ══════════════════════════════════════════════════════════════
   HOMEPAGE — Sections
   ══════════════════════════════════════════════════════════════ */
html body .home-section--alt {
  background: var(--arab-surface-alt) !important;
  border-top: 1px solid var(--arab-border-gold) !important;
  border-bottom: 1px solid var(--arab-border-gold) !important;
}
html body .home-section { border-top: 1px solid var(--arab-border-gold) !important; }
html body .home-section-head h2 { color: var(--arab-brown) !important; }
html body .home-blog-card { border-top: 2px solid var(--arab-gold-pale) !important; }
html body .home-blog-cat { background: var(--arab-gold-pale) !important; color: var(--arab-gold-deep) !important; }
html body .home-story-card {
  border-top: 2px solid var(--arab-gold-pale) !important;
  background: var(--arab-surface) !important;
}
html body .home-story-quote-icon { color: var(--arab-gold) !important; }
html body .home-member-name { color: var(--arab-brown) !important; }
html body .home-member-badge-tag { background: var(--arab-gold) !important; color: #fff !important; }

/* ── Homepage hero — override frontend-polish green radials ──── */
html body.is-home-route .home-premium-hero,
html body .is-home-route .home-premium-hero {
  background:
    radial-gradient(ellipse 80% 60% at 15% 20%, rgba(201, 149, 46, 0.08), transparent 70%),
    radial-gradient(ellipse 70% 50% at 85% 80%, rgba(184, 154, 110, 0.06), transparent 60%),
    linear-gradient(135deg, #f0e6d0 0%, #fff8ed 40%, #f3ebd8 100%) !important;
}

/* ── Homepage hero search box ──────────────────────────────────── */
html body .home-hero-search,
html body .is-home-route .home-hero-search--premium {
  background: rgba(255, 248, 237, 0.88) !important;
  border-color: var(--arab-border-gold) !important;
  box-shadow: 0 4px 20px var(--arab-shadow-gold) !important;
}
html body .home-hero-search-field select {
  border-color: var(--arab-border) !important;
}
html body .home-hero-search-field select:focus {
  border-color: var(--arab-gold) !important;
  box-shadow: 0 0 0 3px rgba(201, 149, 46, 0.12) !important;
}
html body .home-hero-search-btn,
html body .is-home-route .home-hero-search-btn {
  background: linear-gradient(135deg, var(--arab-gold-bright), var(--arab-gold), var(--arab-gold-deep)) !important;
  color: #fff !important;
  border-color: var(--arab-gold-deep) !important;
}

/* ── Homepage hero spotlight card ──────────────────────────────── */
html body .home-hero-spotlight {
  border-color: var(--arab-border) !important;
  background: var(--arab-surface) !important;
}

/* ── Avatar placeholders — green/teal → gold/brown ─────────────── */
html body .home-preview-avatar--green {
  background: linear-gradient(135deg, var(--arab-gold-deep), var(--arab-gold)) !important;
}
html body .home-preview-avatar--teal {
  background: linear-gradient(135deg, var(--arab-brown-light), var(--arab-gold-deep)) !important;
}
html body .home-preview-avatar--gold {
  background: linear-gradient(135deg, var(--arab-gold-bright), var(--arab-gold)) !important;
}

/* ── Homepage stat cards — green accents → gold ────────────────── */
html body .is-home-route .home-premium-stat-card,
html body .home-premium-stat-card {
  border-color: var(--arab-border) !important;
}
html body .is-home-route .home-premium-stat-card:hover,
html body .home-premium-stat-card:hover {
  border-color: var(--arab-gold) !important;
  box-shadow: 0 6px 18px var(--arab-shadow-gold) !important;
}
html body .is-home-route .home-premium-stat-card strong,
html body .home-premium-stat-card strong {
  color: var(--arab-gold-deep) !important;
}

/* ── Homepage shortcut cards — green → gold ────────────────────── */
html body .is-home-route .home-shortcut-card,
html body .home-shortcut-card {
  border-color: var(--arab-border) !important;
}
html body .is-home-route .home-shortcut-card:hover,
html body .home-shortcut-card:hover {
  border-color: var(--arab-gold) !important;
  color: var(--arab-gold-deep) !important;
  box-shadow: 0 6px 18px var(--arab-shadow-gold) !important;
}

/* ── Homepage hero trust chips ─────────────────────────────────── */
html body .home-hero-trust span svg,
html body .home-hero-points span svg {
  color: var(--arab-gold) !important;
}
html body .home-hero-trust span,
html body .home-hero-points span {
  background: rgba(201, 149, 46, 0.08) !important;
  border-color: var(--arab-border-gold) !important;
}

/* ── Hero preview mock-up cards — green → gold/beige ────────────── */
html body .home-preview-card {
  background: rgba(255, 248, 237, 0.92) !important;
  border-color: var(--arab-border) !important;
  box-shadow: 0 6px 20px var(--arab-shadow-gold) !important;
}
html body .home-preview-line {
  background: rgba(201, 149, 46, 0.14) !important;
}
html body .home-preview-line--sub {
  background: rgba(201, 149, 46, 0.08) !important;
}

/* ── Homepage stat cards — blue borders → gold ─────────────────── */
html body .home-premium-stat-card {
  border-color: var(--arab-border) !important;
  background: var(--arab-surface) !important;
}

/* ── Homepage country/popularity chip — blue → gold ────────────── */
html body .home-premium-country-chip {
  color: var(--arab-gold-deep) !important;
  border-color: var(--arab-border-gold) !important;
  background: rgba(201, 149, 46, 0.10) !important;
}

/* ── Discover search chips — green → gold ──────────────────────── */
html body .discover-search-chips .btn-ghost {
  background: rgba(201, 149, 46, 0.08) !important;
  border-color: var(--arab-border-gold) !important;
  color: var(--arab-gold-deep) !important;
}
html body .discover-search-chips .btn-ghost:hover,
html body .discover-search-chips .btn-ghost:focus-visible {
  background: rgba(201, 149, 46, 0.18) !important;
  border-color: var(--arab-gold) !important;
  color: var(--arab-gold-deep) !important;
}
html body .discover-search-chips .btn-outline {
  background: var(--arab-surface) !important;
  border-color: var(--arab-gold) !important;
  color: var(--arab-gold-deep) !important;
}
html body .discover-search-chips .btn-outline:hover,
html body .discover-search-chips .btn-outline:focus-visible {
  background: rgba(201, 149, 46, 0.12) !important;
  border-color: var(--arab-gold) !important;
  box-shadow: 0 2px 8px var(--arab-shadow-gold) !important;
}

/* ── Homepage member tile — green borders → gold ───────────────── */
html body .home-member-tile {
  border-color: var(--arab-border) !important;
}
html body .home-member-tile:hover {
  box-shadow: 0 22px 48px rgba(201, 149, 46, 0.14) !important;
}

/* ══════════════════════════════════════════════════════════════
   BLOG — hero, categories, cards
   ══════════════════════════════════════════════════════════════ */

/* ── Blog hero (footer-page-hero) — green/blue → brown/gold ──── */
html body .footer-page-hero {
  background: linear-gradient(135deg, var(--arab-brown), var(--arab-gold-deep)) !important;
}
html body .footer-page-hero h1 { color: #fff !important; }
html body .footer-page-hero p { color: rgba(255, 248, 237, 0.80) !important; }
html body .footer-page-hero .eyebrow { color: var(--arab-gold-pale) !important; }

/* ── Blog category chips — green → gold ────────────────────────── */
html body .blog-category-chips .badge-inline {
  background: rgba(201, 149, 46, 0.08) !important;
  border-color: var(--arab-border-gold) !important;
  color: var(--arab-gold-deep) !important;
}
html body .blog-category-chips .badge-inline:hover {
  background: rgba(201, 149, 46, 0.15) !important;
  border-color: var(--arab-gold) !important;
}
html body .blog-category-chips .badge-inline--active {
  background: var(--arab-gold) !important;
  color: #fff !important;
  border-color: var(--arab-gold) !important;
}
html body .blog-category-chips__count {
  background: rgba(201, 149, 46, 0.12) !important;
  color: var(--arab-gold-deep) !important;
}
html body .blog-category-chips .badge-inline--active .blog-category-chips__count {
  background: rgba(255, 255, 255, 0.25) !important;
}

/* ── Blog cards — green shadows/borders → gold ─────────────────── */
html body .blog-card {
  border-color: var(--arab-border) !important;
}
html body .blog-card:hover {
  box-shadow: 0 20px 44px rgba(201, 149, 46, 0.14) !important;
}
html body .blog-card--featured {
  border-color: var(--arab-border) !important;
}
html body .blog-listing-page .blog-card {
  border-color: var(--arab-border) !important;
  box-shadow: 0 10px 30px var(--arab-shadow) !important;
}
html body .blog-card-meta .text-link {
  color: var(--arab-gold-deep) !important;
}

/* ── Blog post page card ───────────────────────────────────────── */
html body .blog-post-card,
html body .blog-post-card .blog-card-image,
html body .blog-post-card .blog-post-image,
html body .blog-post-card--guest {
  background: var(--arab-surface) !important;
}
html body .blog-post-page .blog-post-card {
  border-color: var(--arab-border) !important;
}

/* ── Blog scrollbar (mobile category chips) ────────────────────── */
html body .blog-category-chips::-webkit-scrollbar-thumb {
  background: rgba(201, 149, 46, 0.3) !important;
}

/* ══════════════════════════════════════════════════════════════
   SUCCESS STORIES — green accents → gold
   ══════════════════════════════════════════════════════════════ */
html body .home-story-card:hover {
  box-shadow: 0 12px 32px rgba(201, 149, 46, 0.14) !important;
}

/* ══════════════════════════════════════════════════════════════
   CTA BAND
   ══════════════════════════════════════════════════════════════ */
html body .home-cta-band {
  background: linear-gradient(135deg, #0e5c42 0%, #1a7a5c 40%, #1d8a68 70%, #1a7a5c 100%) !important;
  border-top: 4px solid var(--arab-gold) !important;
  position: relative;
}
html body .home-cta-band::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.08;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='0.6'%3E%3Cpath d='M40 0L80 40L40 80L0 40Z'/%3E%3Ccircle cx='40' cy='40' r='18'/%3E%3Ccircle cx='40' cy='40' r='8'/%3E%3Cpath d='M40 10V70M10 40H70'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 80px 80px;
  pointer-events: none;
}
html body .home-cta-band > * { position: relative; z-index: 1; }

/* ══════════════════════════════════════════════════════════════
   FOOTER — override green teal
   ══════════════════════════════════════════════════════════════ */
html body .footer-cms-shell {
  background: linear-gradient(135deg, #1e1409 0%, #2a1d14 40%, #3d2b1f 100%) !important;
  border-top: 4px solid var(--arab-gold) !important;
  box-shadow: inset 0 1px 0 rgba(201, 149, 46, 0.15) !important;
}
html body .footer-cms-shell .footer-cms-section__title { color: #fff !important; }
html body .footer-cms-shell .footer-cms-section--brand .footer-cms-section__title {
  background: linear-gradient(135deg, #fff, var(--arab-gold-pale)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
html body .footer-cms-shell .footer-cms-description { color: rgba(232, 221, 198, 0.78) !important; }
html body .footer-cms-shell .footer-cms-description a { color: var(--arab-gold-bright) !important; }
html body .footer-cms-shell .footer-cms-link { color: rgba(232, 221, 198, 0.82) !important; }
html body .footer-cms-shell .footer-cms-link:hover,
html body .footer-cms-shell .footer-cms-link:focus-visible { color: #fff !important; }
html body .footer-cms-shell .footer-cms-bottom { border-top-color: rgba(201, 149, 46, 0.18) !important; }
html body .footer-cms-shell .footer-cms-copy { color: rgba(232, 221, 198, 0.68) !important; }
html body .footer-cms-shell .footer-cms-locale { color: #fff !important; background: rgba(201, 149, 46, 0.20) !important; }

/* ══════════════════════════════════════════════════════════════
   HERO-SHELL — universal hero background fix
   ══════════════════════════════════════════════════════════════ */
html body .hero-shell {
  background: var(--arab-surface) !important;
  border-color: var(--arab-border) !important;
}
html body .hero-shell::before {
  background: radial-gradient(circle, rgba(201, 149, 46, 0.18), transparent 70%) !important;
}

/* ── Eyebrow badges — green → gold globally ────────────────── */
html body .eyebrow {
  background: rgba(201, 149, 46, 0.10) !important;
  color: var(--arab-gold-deep) !important;
}

/* ══════════════════════════════════════════════════════════════
   SUCCESS STORIES page
   ══════════════════════════════════════════════════════════════ */
html body .success-stories-hero {
  background: var(--arab-surface) !important;
  border-color: var(--arab-border) !important;
}
html body .success-stories-hero .section-heading h1 {
  font-size: clamp(1.4rem, 3vw, 2rem) !important;
  color: var(--arab-brown) !important;
  background: none !important;
  -webkit-text-fill-color: var(--arab-brown) !important;
}
html body .success-stories-hero .section-heading p {
  color: var(--arab-text-soft) !important;
  font-size: 1rem !important;
}
html body .success-stories-empty-card {
  background: var(--arab-surface) !important;
  border-color: var(--arab-border) !important;
}
html body .success-story-card {
  background: var(--arab-surface) !important;
  border-color: var(--arab-border) !important;
  box-shadow: 0 8px 24px var(--arab-shadow) !important;
}
html body .success-story-card:hover {
  border-color: var(--arab-gold) !important;
  box-shadow: 0 14px 36px var(--arab-shadow-md) !important;
}

/* ══════════════════════════════════════════════════════════════
   AUTH / LOGIN / REGISTER
   ══════════════════════════════════════════════════════════════ */
html body .auth-shell {
  border-top: 3px solid var(--arab-gold-pale) !important;
  background: var(--arab-surface) !important;
}
html body .auth-form-wrap {
  background: var(--arab-surface) !important;
}
html body .auth-form-wrap .card,
html body .auth-form-wrap .form-card {
  background: rgba(255, 248, 237, 0.95) !important;
  border-color: var(--arab-border) !important;
}
html body .auth-copy {
  background:
    linear-gradient(180deg, rgba(107, 76, 42, 0.88), rgba(154, 112, 32, 0.92)),
    radial-gradient(circle at 20% 80%, rgba(201, 149, 46, 0.3), transparent 50%) !important;
  color: #fff8ed !important;
}
html body .auth-copy p,
html body .auth-copy li {
  color: rgba(255, 248, 237, 0.86) !important;
}
html body .auth-copy h1 { color: #fff !important; }
html body .auth-copy .eyebrow {
  color: var(--arab-gold-pale) !important;
  background: rgba(201, 149, 46, 0.20) !important;
}
html body .auth-foot a,
html body .stack-link { color: var(--arab-gold-deep) !important; }

html body .reg-flow-shell {
  border-top: 3px solid var(--arab-gold) !important;
  background: var(--arab-bg) !important;
}
html body .reg-flow-head h1 { color: var(--arab-brown) !important; }
html body .reg-flow-head .eyebrow { color: var(--arab-gold-deep) !important; }
html body.is-public-viewport .reg-flow-inner,
html body .is-public-viewport .reg-flow-inner {
  background: var(--arab-surface) !important;
  border-color: var(--arab-border) !important;
}
html body.is-public-viewport .reg-gender-card,
html body .is-public-viewport .reg-gender-card {
  background: var(--arab-surface) !important;
  border-color: var(--arab-border) !important;
}
html body.is-public-viewport .reg-gender-card:hover,
html body .is-public-viewport .reg-gender-card:hover {
  border-color: var(--arab-gold) !important;
  box-shadow: 0 8px 24px var(--arab-shadow-gold) !important;
}
html body.is-public-viewport .reg-gender-card::before,
html body .is-public-viewport .reg-gender-card::before {
  background: linear-gradient(135deg, rgba(201, 149, 46, 0.04), rgba(184, 154, 110, 0.04)) !important;
}

html body .reg-step-bubble {
  background: var(--arab-surface) !important;
  border: 2px solid var(--arab-gold) !important;
  color: var(--arab-gold-deep) !important;
  font-weight: 700 !important;
}
html body .reg-step-bubble.is-active {
  background: var(--arab-gold) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px var(--arab-shadow-gold) !important;
}
html body .reg-step-connector { background: var(--arab-gold-pale) !important; }
html body .reg-step-connector--done { background: var(--arab-gold) !important; }

/* ── Registration compact layout ─────────────────────────────── */
html body .reg-flow-shell {
  min-height: auto !important;
  padding: 20px 16px 32px !important;
}
html body .reg-step-bar {
  margin-bottom: 20px !important;
}
html body .reg-flow-inner {
  gap: 16px !important;
}
html body .reg-pledge-wrap {
  padding: 20px 22px 18px !important;
  gap: 14px !important;
  border-radius: 16px !important;
}
html body .reg-pledge-icon-wrap {
  width: 48px !important;
  height: 48px !important;
}
html body .reg-pledge-icon-wrap svg {
  width: 24px !important;
  height: 24px !important;
}
html body .reg-flow-head h1 {
  margin-top: 4px !important;
  font-size: clamp(1.2rem, 2.5vw, 1.5rem) !important;
}
html body .reg-flow-lead {
  margin-top: 4px !important;
  font-size: 0.92rem !important;
  line-height: 1.5 !important;
}
html body .reg-pledge-oath {
  padding: 12px 16px 12px 20px !important;
  border-radius: 0 10px 10px 0 !important;
  background: rgba(201, 149, 46, 0.06) !important;
  border-inline-start-color: var(--arab-gold) !important;
}
[dir="rtl"] html body .reg-pledge-oath {
  padding: 12px 20px 12px 16px !important;
  border-radius: 10px 0 0 10px !important;
}
html body .reg-pledge-oath-icon {
  font-size: 3rem !important;
  color: var(--arab-gold) !important;
}
html body .reg-pledge-oath p {
  font-size: 0.9rem !important;
  line-height: 1.6 !important;
}
html body .reg-pledge-points {
  gap: 6px !important;
}
html body .reg-pledge-points li {
  font-size: 0.9rem !important;
  line-height: 1.4 !important;
  gap: 8px !important;
}
html body .reg-pledge-points li svg {
  color: var(--arab-gold) !important;
}
html body .reg-pledge-confirm {
  gap: 10px !important;
}
html body .reg-pledge-check-row {
  padding: 10px 14px !important;
  border-radius: 10px !important;
  background: var(--arab-surface-alt) !important;
  border-color: var(--arab-border) !important;
}
html body .reg-pledge-back {
  font-size: 0.88rem !important;
}
html body .reg-step-bubble {
  width: 32px !important;
  height: 32px !important;
  font-size: 0.8rem !important;
}
html body .reg-step-label {
  font-size: 0.72rem !important;
}

/* ── Registration chooser compact ─────────────────────────────── */
html body .is-public-viewport .reg-flow-inner {
  padding: clamp(18px, 3vw, 28px) !important;
}
html body .is-public-viewport .reg-gender-card {
  padding: clamp(16px, 2.5vw, 24px) 16px !important;
}

@media (max-width: 560px) {
  html body .reg-flow-shell {
    padding: 14px 10px 24px !important;
  }
  html body .reg-pledge-wrap {
    padding: 16px 14px 14px !important;
    gap: 12px !important;
  }
  html body .reg-step-bar {
    margin-bottom: 14px !important;
  }
  html body .reg-pledge-oath {
    padding: 10px 12px 10px 16px !important;
  }
  html body .reg-pledge-points li {
    font-size: 0.85rem !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   FORM INPUTS — override ALL white backgrounds
   ══════════════════════════════════════════════════════════════ */
html body input[type="text"],
html body input[type="email"],
html body input[type="password"],
html body input[type="search"],
html body input[type="tel"],
html body input[type="url"],
html body input[type="number"],
html body select,
html body textarea,
html body .is-public-viewport select,
html body .is-public-viewport input[type="text"],
html body .is-public-viewport input[type="email"],
html body .is-public-viewport input[type="password"],
html body .is-public-viewport input[type="search"],
html body .is-public-viewport input[type="tel"],
html body .is-public-viewport textarea,
html body .field-select,
html body .field-textarea,
html body .is-public-viewport .account-search-grid select,
html body .is-public-viewport .account-search-grid input {
  background: var(--arab-surface) !important;
  border-color: var(--arab-border) !important;
  color: var(--arab-text) !important;
  border-radius: 6px !important;
}
html body input:focus,
html body select:focus,
html body textarea:focus,
html body .field-select:focus,
html body .field-textarea:focus {
  border-color: var(--arab-gold) !important;
  box-shadow: 0 0 0 3px rgba(201, 149, 46, 0.2), 0 0 8px rgba(201, 149, 46, 0.1) !important;
}

html body .field-error { color: var(--arab-rose) !important; }
html body input.input-error,
html body select.input-error,
html body textarea.input-error {
  border-color: rgba(196, 99, 110, 0.45) !important;
  box-shadow: 0 0 0 4px rgba(196, 99, 110, 0.08) !important;
}

/* ══════════════════════════════════════════════════════════════
   SIDEBAR — user card, banner, links, badges, stats
   ══════════════════════════════════════════════════════════════ */
html body .account-user-banner {
  background:
    radial-gradient(circle at 82% 28%, rgba(255, 255, 255, 0.18), transparent 18%),
    linear-gradient(180deg, var(--arab-gold-deep), var(--arab-gold)) !important;
}
html body .account-user-avatar-shell,
html body .account-user-avatar-shell-refined {
  border-color: var(--arab-border-gold) !important;
  box-shadow: 0 4px 12px var(--arab-shadow-gold) !important;
}
html body .account-user-kicker { color: var(--arab-gold-deep) !important; letter-spacing: 0.06em !important; }
html body .account-user-intro strong { color: var(--arab-brown) !important; }
html body .account-user-intro p { color: var(--arab-text-faint) !important; }

html body .account-side-links a { color: var(--arab-text-soft) !important; border-radius: 8px !important; }
html body .account-side-links a[aria-current="page"] {
  background: rgba(201, 149, 46, 0.12) !important;
  color: var(--arab-gold-deep) !important;
  border-inline-start: 3px solid var(--arab-gold) !important;
}
html body .account-side-links a:hover {
  background: rgba(201, 149, 46, 0.08) !important;
  color: var(--arab-gold-deep) !important;
}

html body .account-side-link-badge,
html body .account-side-link-badge-message,
html body .account-side-link-badge-interest,
html body .account-side-link-badge-visit {
  background: rgba(201, 149, 46, 0.12) !important;
  color: var(--arab-gold-deep) !important;
}
html body .account-side-link-badge.has-count,
html body .account-side-link-badge-message.has-count,
html body .account-side-link-badge-interest.has-count,
html body .account-side-link-badge-visit.has-count {
  background: var(--arab-gold) !important;
  color: #fff !important;
}

html body .account-side-stat {
  border-inline-end-color: var(--arab-border-gold) !important;
  border-bottom-color: var(--arab-border-gold) !important;
}
html body .account-side-stat strong { color: var(--arab-gold-deep) !important; }
html body .account-side-stat span { color: var(--arab-text-faint) !important; }
html body .account-side-note h4 { color: var(--arab-brown) !important; }
html body .account-side-note p { color: var(--arab-text-soft) !important; }

/* ══════════════════════════════════════════════════════════════
   ACCOUNT PAGE TEXT / HEADINGS
   ══════════════════════════════════════════════════════════════ */
html body .account-directory-head h1,
html body .account-dashboard-hero h1 { color: var(--arab-brown) !important; }
html body .account-directory-head p,
html body .account-dashboard-hero p { color: var(--arab-text-soft) !important; }
html body .account-dashboard-eyebrow { color: var(--arab-gold-deep) !important; letter-spacing: 0.06em !important; }
html body .account-section-title h2 { color: var(--arab-brown) !important; border-bottom: 2px solid var(--arab-gold-pale) !important; padding-bottom: 8px !important; }
html body .dashboard-card-head h2 { color: var(--arab-brown) !important; }
html body .dashboard-card-head p { color: var(--arab-text-soft) !important; }
html body .account-directory-count { color: var(--arab-text-faint) !important; }

html body .ghost-badge { background: var(--arab-gold-pale) !important; color: var(--arab-gold-deep) !important; border-color: var(--arab-border-gold) !important; }
html body .badge-inline { background: var(--arab-gold) !important; color: #fff !important; }
html body .account-summary-pill { background: var(--arab-gold-pale) !important; color: var(--arab-gold-deep) !important; border-color: var(--arab-border-gold) !important; }
html body .account-summary-pill.is-pending { background: var(--arab-gold) !important; color: #fff !important; }

html body .account-security-page .password-toggle { background: var(--arab-surface-alt) !important; border-color: var(--arab-border) !important; color: var(--arab-text-soft) !important; }
html body .account-security-page .stack-list li { color: var(--arab-text) !important; }
html body .account-security-page .stack-list li::marker { color: var(--arab-gold) !important; }

/* ══════════════════════════════════════════════════════════════
   NOTIFICATIONS — specific overrides
   ══════════════════════════════════════════════════════════════ */
html body .notification-card h2 { color: var(--arab-brown) !important; }
html body .notification-card p { color: var(--arab-text-soft) !important; }
html body .notification-card-icon { background: var(--arab-gold-pale) !important; color: var(--arab-gold-deep) !important; }
html body .notification-card-icon-message,
html body .notification-card-icon-profile_visit { background: rgba(201, 149, 46, 0.12) !important; color: var(--arab-gold-deep) !important; }
html body .notification-card-icon-match { background: rgba(201, 149, 46, 0.18) !important; color: var(--arab-gold-deep) !important; }
html body .notification-card-icon-like { background: rgba(196, 99, 110, 0.12) !important; color: var(--arab-rose) !important; }
html body .notification-card-icon-verification_approved { background: rgba(26, 122, 92, 0.12) !important; color: var(--arab-green-deep) !important; }
html body .notification-card-icon-verification_rejected { background: rgba(191, 77, 77, 0.12) !important; color: #b54848 !important; }
html body .notification-status-chip.is-unread { background: rgba(196, 99, 110, 0.10) !important; color: var(--arab-rose) !important; }
html body .notification-status-chip.is-read { background: rgba(201, 149, 46, 0.08) !important; color: var(--arab-gold-deep) !important; }
html body .notification-time { color: var(--arab-text-faint) !important; }
html body .notifications-total-pill { background: var(--arab-gold-pale) !important; color: var(--arab-gold-deep) !important; }
html body .notifications-total-pill strong { background: var(--arab-gold) !important; color: #fff !important; }

/* ══════════════════════════════════════════════════════════════
   VISIT / INTEREST CARDS — specific text colors
   ══════════════════════════════════════════════════════════════ */
html body .profile-visit-card__name { color: var(--arab-gold-deep) !important; }
html body .profile-visit-card__city { color: var(--arab-text-faint) !important; }
html body .profile-visit-card__meta strong { color: var(--arab-brown) !important; }
html body .profile-visit-card__time { color: var(--arab-text-faint) !important; }
html body .account-interest-compact-item__media { border-color: var(--arab-border-gold) !important; box-shadow: 0 4px 12px var(--arab-shadow-gold) !important; }
html body .account-interest-compact-item__name { color: var(--arab-gold-deep) !important; }
html body .account-interest-compact-item__city { color: var(--arab-text-faint) !important; }
html body .account-interest-compact-item__message { color: var(--arab-text-soft) !important; }

/* ══════════════════════════════════════════════════════════════
   CHAT — override green gradients
   ══════════════════════════════════════════════════════════════ */
html body .chat-row--mine .chat-bubble {
  background: linear-gradient(135deg, var(--arab-gold-deep), var(--arab-gold)) !important;
  color: #fff !important;
  border-color: transparent !important;
}
html body .chat-input-wrap input,
html body .chat-input-wrap textarea {
  background: var(--arab-surface) !important;
  border-color: var(--arab-border) !important;
}
html body .online-dot {
  background: var(--arab-green) !important;
  box-shadow: 0 0 6px rgba(26, 122, 92, 0.4) !important;
}

/* ══════════════════════════════════════════════════════════════
   ALERTS / PAGINATION
   ══════════════════════════════════════════════════════════════ */
html body .form-alert-success { border-left: 4px solid var(--arab-green) !important; background: var(--arab-green-soft) !important; }
html body .form-alert-danger { border-left: 4px solid var(--arab-rose) !important; }
html body .form-alert-info { border-left: 4px solid var(--arab-gold) !important; background: var(--arab-gold-pale) !important; }

html body .pagination a,
html body .pagination span {
  background: var(--arab-surface) !important;
  border-color: var(--arab-border) !important;
  color: var(--arab-text-soft) !important;
  border-radius: 6px !important;
}
html body .pagination a:hover { background: var(--arab-gold) !important; color: #fff !important; border-color: var(--arab-gold) !important; }
html body .pagination .active span { background: var(--arab-gold) !important; color: #fff !important; border-color: var(--arab-gold) !important; box-shadow: 0 2px 4px var(--arab-shadow-gold) !important; }

/* ══════════════════════════════════════════════════════════════
   PREMIUM / BLOG / MISC
   ══════════════════════════════════════════════════════════════ */
html body .plan-box { border-color: var(--arab-border) !important; border-top: 2px solid var(--arab-gold-pale) !important; }
html body .plan-box.featured {
  border: 2px solid var(--arab-gold) !important;
  box-shadow: 0 0 0 1px var(--arab-gold), 0 12px 32px var(--arab-shadow-md), 0 4px 12px var(--arab-shadow-gold) !important;
}
html body .hint-text.info { color: var(--arab-gold-deep) !important; }
html body .blog-card-meta .text-link { color: var(--arab-gold-deep) !important; background: var(--arab-gold-pale) !important; }
html body .footer-page-hero { background: linear-gradient(135deg, var(--arab-gold-deep), var(--arab-brown)) !important; }
html body .home-preview-avatar--green,
html body .home-preview-avatar--teal { background: linear-gradient(135deg, var(--arab-gold-deep), var(--arab-gold)) !important; }
html body .registration-progress-item.is-active span { background: linear-gradient(135deg, var(--arab-gold), var(--arab-gold-deep)) !important; }
html body .editor-tool.is-active { background: var(--arab-gold) !important; }
html body .account-side-link-badge-message { background: rgba(201, 149, 46, 0.12) !important; color: var(--arab-gold-deep) !important; }

/* ══════════════════════════════════════════════════════════════
   NUCLEAR — override frontend-polish.css hardcoded #fff
   These selectors match frontend-polish.css but with html body
   prefix for higher specificity.
   ══════════════════════════════════════════════════════════════ */
html body .is-home-route .home-hero-search--premium,
html body .is-home-route .home-premium-stat-card,
html body .is-home-route .home-shortcut-card,
html body .is-home-route .home-member-card {
  background: var(--arab-surface) !important;
  border-color: var(--arab-border) !important;
}
html body .is-public-viewport .directory-member-card,
html body .is-public-viewport .card,
html body .is-public-viewport .profile-panel,
html body .is-public-viewport .account-search-box,
html body .is-public-viewport .account-dashboard-status-card,
html body .is-public-viewport .account-dashboard-panel,
html body .is-public-viewport .reg-flow-inner,
html body .is-public-viewport .reg-gender-card,
html body .is-public-viewport .form-card.registration-stepper,
html body .is-public-viewport .toast,
html body .is-public-viewport .report-form .field-textarea {
  background: var(--arab-surface) !important;
  border-color: var(--arab-border) !important;
}
/* Restore highlight card gradient — the rule above wipes it */
html body .is-public-viewport .account-dashboard-status-card.is-highlight {
  background: linear-gradient(135deg, var(--primary) 0%, #1d7a64 100%) !important;
  border-color: transparent !important;
  color: #fff !important;
}
html body .is-public-viewport .account-dashboard-status-card.is-highlight span,
html body .is-public-viewport .account-dashboard-status-card.is-highlight p {
  color: rgba(255, 255, 255, 0.88) !important;
}
html body .is-public-viewport .account-dashboard-status-card.is-highlight strong {
  color: #fff !important;
}
html body .is-public-viewport .icon-action:hover,
html body .is-public-viewport .icon-link:hover,
html body .is-public-viewport .key-fact:hover,
html body .is-public-viewport .account-dashboard-check-item:hover,
html body .is-public-viewport .account-dashboard-action:hover,
html body .is-public-viewport .account-dashboard-status-mini:hover,
html body .is-public-viewport .account-dashboard-suggestion-card:hover,
html body .is-public-viewport .reg-pledge-check-row:hover {
  background: var(--arab-surface-alt) !important;
}
html body .is-public-viewport .account-search-grid input,
html body .is-public-viewport .account-search-grid select,
html body .is-home-route .home-hero-search-field select {
  background: var(--arab-surface) !important;
  border-color: var(--arab-border) !important;
}

/* ══════════════════════════════════════════════════════════════
   ARABESQUE DECORATIVE ELEMENTS
   ══════════════════════════════════════════════════════════════ */
.arabesque-pattern-bg { position: relative; }
.arabesque-pattern-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: var(--arab-pattern-opacity);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23c9952e' stroke-width='0.6'%3E%3Cpath d='M50 5L95 50L50 95L5 50Z'/%3E%3Ccircle cx='50' cy='50' r='22'/%3E%3Ccircle cx='50' cy='50' r='10'/%3E%3Cpath d='M50 5V95M5 50H95'/%3E%3Cpath d='M22 22L78 78M78 22L22 78'/%3E%3Cpath d='M50 28L72 50L50 72L28 50Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 100px 100px;
  pointer-events: none;
  z-index: 0;
}
.arabesque-pattern-bg > * { position: relative; z-index: 1; }

.arabesque-corners { position: relative; }
.arabesque-corners::before,
.arabesque-corners::after {
  content: '';
  position: absolute;
  width: 160px;
  height: 160px;
  opacity: 0.18;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%23c9952e' stroke-width='1'%3E%3Ccircle cx='80' cy='80' r='75'/%3E%3Ccircle cx='80' cy='80' r='58'/%3E%3Ccircle cx='80' cy='80' r='42'/%3E%3Ccircle cx='80' cy='80' r='26'/%3E%3Ccircle cx='80' cy='80' r='12'/%3E%3Cpath d='M80 5V155M5 80H155'/%3E%3Cpath d='M27 27L133 133M133 27L27 133'/%3E%3Cpath d='M80 22L138 80L80 138L22 80Z'/%3E%3Cpath d='M80 38L122 80L80 122L38 80Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}
.arabesque-corners::before { top: -20px; left: -20px; }
.arabesque-corners::after { bottom: -20px; right: -20px; transform: rotate(180deg); }

.arabesque-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 32px 0;
  color: var(--arab-gold);
}
.arabesque-divider::before,
.arabesque-divider::after {
  content: '';
  flex: 1;
  max-width: 220px;
  height: 2px;
  background: linear-gradient(to var(--arab-end, right), transparent, var(--arab-gold), transparent);
}
[dir="rtl"] .arabesque-divider::before,
[dir="rtl"] .arabesque-divider::after { --arab-end: left; }
.arabesque-divider svg { width: 36px; height: 36px; fill: none; stroke: currentColor; stroke-width: 1.2; }

.arabesque-arch {
  position: relative;
  overflow: hidden;
  border-top: 3px solid var(--arab-gold-pale) !important;
}
.arabesque-arch::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 50px;
  border-radius: 0 0 50% 50%;
  background: linear-gradient(180deg, var(--arab-gold-pale), transparent);
  opacity: 0.25;
  pointer-events: none;
}

.arabesque-scallop { position: relative; }
.arabesque-scallop::after {
  content: '';
  position: absolute;
  bottom: -12px;
  left: 0;
  right: 0;
  height: 24px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24' viewBox='0 0 48 24'%3E%3Cpath d='M0 0Q24 24 48 0' fill='%23f8f3e8'/%3E%3C/svg%3E");
  background-size: 48px 24px;
  background-repeat: repeat-x;
  pointer-events: none;
}

.arabesque-accent-line {
  height: 4px;
  border: none;
  margin: 28px 0;
  background:
    linear-gradient(90deg, transparent 5%, var(--arab-gold-pale) 5%, var(--arab-gold-pale) 100%),
    linear-gradient(90deg, transparent, var(--arab-gold), transparent);
  background-size: 100% 1px, 100% 4px;
  background-position: 0 0, 0 2px;
  background-repeat: no-repeat;
}

.arabesque-quote { position: relative; padding-inline-start: 2.5rem; }
.arabesque-quote::before {
  content: '\201D';
  position: absolute;
  inset-inline-start: 0;
  top: -0.4em;
  font-size: 4rem;
  color: var(--arab-gold);
  opacity: 0.35;
  line-height: 1;
  font-family: Georgia, serif;
}

/* ══════════════════════════════════════════════════════════════
   PAGES WITH INLINE <style> — Override hardcoded colors
   These pages ship their own <style> blocks with #fff / green
   values that the base :root override cannot reach.
   ══════════════════════════════════════════════════════════════ */

/* ── Privacy page ───────────────────────────────────────────── */
html body .privacy-settings {
  background: var(--arab-surface) !important;
  border-color: var(--arab-border) !important;
  box-shadow: 0 2px 12px var(--arab-shadow), 0 1px 3px var(--arab-shadow-gold) !important;
  border-radius: 14px !important;
}
html body .privacy-row {
  border-bottom-color: var(--arab-border) !important;
}
html body .privacy-row--premium {
  background: linear-gradient(180deg, rgba(201, 149, 46, 0.06) 0%, var(--arab-surface) 100%) !important;
}
html body .privacy-head__intro {
  color: var(--arab-text-soft) !important;
}
html body .privacy-notice {
  background: var(--arab-gold-pale) !important;
  border-color: var(--arab-border-gold) !important;
  color: var(--arab-brown) !important;
}
html body .privacy-flash--success {
  background: var(--arab-green-soft) !important;
  color: var(--arab-green-deep) !important;
  border-color: var(--arab-green) !important;
}
html body .privacy-flash--info {
  background: var(--arab-gold-pale) !important;
  color: var(--arab-gold-deep) !important;
  border-color: var(--arab-border-gold) !important;
}
html body .privacy-flash--error {
  background: rgba(196, 99, 110, 0.10) !important;
  color: var(--arab-rose) !important;
  border-color: rgba(196, 99, 110, 0.25) !important;
}
html body .privacy-segments {
  background: var(--arab-surface-alt) !important;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) !important;
}
html body .privacy-segment {
  position: relative !important;
}
html body .privacy-segment input {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  pointer-events: none !important;
}
html body .privacy-segment__inner {
  background: var(--arab-surface) !important;
  border: 1px solid var(--arab-border) !important;
  justify-content: center !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease !important;
}
html body .privacy-segment:hover .privacy-segment__inner {
  border-color: var(--arab-gold) !important;
  box-shadow: 0 2px 8px var(--arab-shadow-gold) !important;
}
html body .privacy-segment input:checked ~ .privacy-segment__inner {
  background: linear-gradient(135deg, var(--arab-gold-deep), var(--arab-gold)) !important;
  color: #fff !important;
  border-color: var(--arab-gold-deep) !important;
  box-shadow: 0 4px 12px var(--arab-shadow-gold) !important;
}
html body .privacy-segment input:focus-visible ~ .privacy-segment__inner {
  outline: 2px solid var(--arab-gold) !important;
  outline-offset: 2px !important;
}
html body .privacy-toggle__slider {
  background: var(--arab-border) !important;
}
html body .privacy-toggle input:checked ~ .privacy-toggle__slider {
  background: var(--arab-gold) !important;
}
html body .privacy-toggle__slider::after {
  background: #fff !important;
  box-shadow: 0 2px 4px var(--arab-shadow) !important;
}
html body .privacy-toggle__label {
  color: var(--arab-text) !important;
}
html body .privacy-toggle__label small {
  color: var(--arab-text-faint) !important;
}
html body .privacy-locked-inline {
  background: var(--arab-surface-alt) !important;
  border-color: var(--arab-border-gold) !important;
  border-style: dashed !important;
}
html body .privacy-locked-inline__text {
  color: var(--arab-text-soft) !important;
}
html body .privacy-input__label {
  color: var(--arab-text-soft) !important;
}
html body .privacy-input__field {
  background: var(--arab-surface) !important;
  border-color: var(--arab-border) !important;
  color: var(--arab-text) !important;
}
html body .privacy-input__field:focus {
  border-color: var(--arab-gold) !important;
  box-shadow: 0 0 0 3px rgba(201, 149, 46, 0.2), 0 0 8px rgba(201, 149, 46, 0.1) !important;
}
html body .privacy-input__field--disabled {
  background: var(--arab-surface-alt) !important;
  color: var(--arab-text-faint) !important;
}
html body .privacy-input__hint {
  color: var(--arab-text-faint) !important;
}
html body .privacy-upgrade {
  background: linear-gradient(135deg, rgba(201, 149, 46, 0.08) 0%, rgba(201, 149, 46, 0.04) 100%) !important;
  border-color: var(--arab-border-gold) !important;
  box-shadow: 0 4px 14px var(--arab-shadow-gold) !important;
}
html body .privacy-upgrade strong {
  color: var(--arab-gold-deep) !important;
}
html body .privacy-upgrade p {
  color: var(--arab-text-soft) !important;
}
html body .privacy-upgrade__cta {
  background: var(--arab-gold-deep) !important;
}
html body .privacy-upgrade__cta:hover {
  background: var(--arab-brown) !important;
}
html body .privacy-account-section {
  border-top-color: var(--arab-border) !important;
}
html body .privacy-account-section__label {
  color: var(--arab-text-faint) !important;
}
html body .privacy-logout-row {
  background: var(--arab-surface) !important;
  border-color: rgba(196, 99, 110, 0.20) !important;
}
html body .privacy-logout-row:hover {
  background: rgba(196, 99, 110, 0.06) !important;
  border-color: rgba(196, 99, 110, 0.30) !important;
}
html body .privacy-logout-row__icon,
html body .privacy-logout-row svg {
  width: 20px !important;
  height: 20px !important;
  max-width: 20px !important;
  max-height: 20px !important;
  flex: 0 0 auto !important;
}
html body .privacy-segment__inner {
  color: var(--arab-text-soft) !important;
}
html body .privacy-row__help {
  color: var(--arab-text-faint) !important;
}

/* ── Premium / Plans page ───────────────────────────────────── */
html body .plan-card,
html body .plan-box {
  background: var(--arab-surface) !important;
  border-color: var(--arab-border) !important;
}
html body .plan-card:hover,
html body .plan-box:hover {
  border-color: var(--arab-gold) !important;
  box-shadow: 0 8px 24px var(--arab-shadow-gold) !important;
}

/* ── Gifts page ─────────────────────────────────────────────── */
html body .gift-alert,
html body .gift-upgrade,
html body .gift-flow-hero,
html body .gift-inline-warning {
  background: var(--arab-surface) !important;
  border-color: var(--arab-border) !important;
  box-shadow: 0 4px 14px var(--arab-shadow) !important;
}
html body .gift-category-filter {
  background: linear-gradient(135deg, rgba(255, 248, 237, 0.95), rgba(243, 235, 216, 0.9)) !important;
  border-color: var(--arab-border-gold) !important;
  box-shadow: 0 8px 20px var(--arab-shadow-gold) !important;
}
html body .gift-category-filter button {
  border-color: var(--arab-border-gold) !important;
  background: var(--arab-surface) !important;
  color: var(--arab-gold-deep) !important;
  box-shadow: 0 4px 12px var(--arab-shadow) !important;
}
html body .gift-category-filter button:hover {
  border-color: var(--arab-gold) !important;
}
html body .gift-category-filter button.is-active {
  background: linear-gradient(135deg, var(--arab-gold-deep), var(--arab-gold)) !important;
  color: #fff !important;
  border-color: transparent !important;
}
html body .gift-card__top {
  background: radial-gradient(circle at 50% 35%, rgba(255, 248, 237, 0.92), rgba(243, 235, 216, 0.78)), linear-gradient(145deg, #fff8ed, #f3ebd8) !important;
  border-color: var(--arab-border) !important;
}
html body .gift-card__badges span {
  background: var(--arab-gold-pale) !important;
  color: var(--arab-gold-deep) !important;
}
html body .gift-card__badges span:last-child {
  background: rgba(201, 149, 46, 0.12) !important;
  color: var(--arab-gold-deep) !important;
}
html body .gift-card h2 { color: var(--arab-brown) !important; }
html body .gift-card p { color: var(--arab-text-soft) !important; }
html body .gift-card small { color: var(--arab-gold-deep) !important; }
html body .gift-empty {
  background: var(--arab-surface-alt) !important;
  border-color: var(--arab-border-gold) !important;
  color: var(--arab-text-faint) !important;
}
html body .gift-visual {
  background: radial-gradient(circle at 30% 25%, rgba(255, 248, 237, 0.95), transparent 34%), linear-gradient(145deg, #fffaf0, #f3ebd8) !important;
  border-color: var(--arab-border-gold) !important;
  box-shadow: 0 18px 36px var(--arab-shadow), inset 0 0 0 8px rgba(255, 248, 237, 0.55) !important;
  color: var(--arab-gold-deep) !important;
}
html body .gift-send-trigger {
  box-shadow: 0 12px 24px var(--arab-shadow-gold) !important;
}
html body .gift-history-links a {
  color: var(--arab-gold-deep) !important;
}
html body .gift-alert--success {
  background: var(--arab-green-soft) !important;
  border-color: var(--arab-green) !important;
  color: var(--arab-green-deep) !important;
}
html body .gift-alert--error {
  background: rgba(196, 99, 110, 0.10) !important;
  border-color: rgba(196, 99, 110, 0.25) !important;
  color: var(--arab-rose) !important;
}
html body .gift-upgrade {
  background: linear-gradient(135deg, rgba(201, 149, 46, 0.08), rgba(201, 149, 46, 0.04)) !important;
  border-color: var(--arab-border-gold) !important;
}
html body .gift-upgrade strong { color: var(--arab-gold-deep) !important; }
html body .gift-upgrade p { color: var(--arab-text-soft) !important; }
html body .gift-inline-warning {
  background: rgba(196, 99, 110, 0.08) !important;
  border-color: rgba(196, 99, 110, 0.25) !important;
  color: var(--arab-rose) !important;
}

/* ── Discover / Smart matches ───────────────────────────────── */
html body .discover-search-shell {
  background: var(--arab-surface) !important;
  border-color: var(--arab-border) !important;
}
html body .smart-score-high {
  background: var(--arab-green-soft) !important;
  color: var(--arab-green-deep) !important;
}
html body .smart-score-medium {
  background: var(--arab-gold-pale) !important;
  color: var(--arab-gold-deep) !important;
}
html body .smart-score-low {
  background: rgba(196, 99, 110, 0.10) !important;
  color: var(--arab-rose) !important;
}
html body .smart-match-highlight {
  border-color: var(--arab-border-gold) !important;
}

/* ── Referrals page ─────────────────────────────────────────── */
html body .referral-code-box {
  background: var(--arab-surface) !important;
  border-color: var(--arab-border-gold) !important;
}

/* ── PWA install banner ─────────────────────────────────────── */
html body .pwa-install-banner {
  background: var(--arab-surface) !important;
  border-color: var(--arab-border-gold) !important;
  box-shadow: 0 8px 24px var(--arab-shadow-gold) !important;
}

/* ── Account / Two-Factor inline styles ─────────────────────── */
html body .account-security-page [style*="background:#fffbeb"],
html body .account-security-page [style*="background: #fffbeb"] {
  background: rgba(201, 149, 46, 0.08) !important;
  border-color: var(--arab-border-gold) !important;
}
html body .account-security-page [style*="background:#fff"],
html body .account-security-page [style*="background: #fff"] {
  background: var(--arab-surface) !important;
  border-color: var(--arab-border) !important;
}

/* ── Dashboard sidebar premium accordion ────────────────────── */
html body .account-side-premium-accordion {
  background: var(--arab-surface) !important;
  border-color: var(--arab-border-gold) !important;
}

/* ── Registration progress (inline in register.blade.php) ──── */
html body .registration-progress-item span {
  background: var(--arab-gold-pale) !important;
  color: var(--arab-gold-deep) !important;
}
html body .registration-progress-item.is-active span {
  background: linear-gradient(135deg, var(--arab-gold), var(--arab-gold-deep)) !important;
  color: #fff !important;
}
html body .registration-step .card {
  background: var(--arab-surface) !important;
  border-color: var(--arab-border) !important;
  box-shadow: 0 2px 12px var(--arab-shadow), 0 1px 3px var(--arab-shadow-gold) !important;
}
html body .registration-actions .btn-primary {
  background: linear-gradient(135deg, var(--arab-gold-bright), var(--arab-gold), var(--arab-gold-deep)) !important;
  border-color: var(--arab-gold-deep) !important;
  color: #fff !important;
}

/* ── Generic white-background card nuclear override ───────────
   Catches any remaining cards/containers that use inline
   background:#fff and aren't caught by the more specific
   rules above. Uses [style] attribute selector.            */
html body .is-public-viewport [style*="background:#fff"],
html body .is-public-viewport [style*="background: #fff"],
html body .is-public-viewport [style*="background:white"] {
  background: var(--arab-surface) !important;
}

/* ══════════════════════════════════════════════════════════════
   RTL
   ══════════════════════════════════════════════════════════════ */
[dir="rtl"] .arabesque-divider::before { background: linear-gradient(to left, transparent, var(--arab-gold), transparent); }
[dir="rtl"] .arabesque-divider::after { background: linear-gradient(to left, transparent, var(--arab-gold), transparent); }
[dir="rtl"] html body .form-alert-success,
[dir="rtl"] html body .form-alert-danger,
[dir="rtl"] html body .form-alert-info,
[dir="rtl"] html body .toast {
  border-left: none !important;
  border-right: 4px solid var(--arab-gold) !important;
}

/* ══════════════════════════════════════════════════════════════
    HOMEPAGE — PREMIUM HERO OVERRIDES
    ══════════════════════════════════════════════════════════════ */

/* ── Hero section body background ──── */
html body .is-home-route .is-public-viewport,
html body.is-home-route .is-public-viewport {
  background: var(--arab-bg) !important;
}

/* ── Hero copy card (left) ──── */
html body .is-home-route .home-premium-copy,
html body.is-home-route .home-premium-copy {
  background: linear-gradient(145deg, rgba(255,248,237,0.97), rgba(243,235,216,0.94)) !important;
  border: 1.5px solid var(--arab-gold-pale) !important;
  border-top: 3px solid var(--arab-gold) !important;
  border-radius: 22px !important;
  box-shadow:
    0 16px 42px var(--arab-shadow),
    0 2px 8px var(--arab-shadow-gold),
    inset 0 1px 0 rgba(201,149,46,0.08) !important;
  position: relative !important;
  overflow: hidden !important;
}
html body .is-home-route .home-premium-copy::before,
html body.is-home-route .home-premium-copy::before {
  content: '';
  position: absolute;
  top: -40px;
  right: -40px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,149,46,0.10), transparent 70%);
  pointer-events: none;
}
html body .is-home-route .home-premium-copy::after,
html body.is-home-route .home-premium-copy::after {
  content: '';
  position: absolute;
  bottom: -30px;
  left: -30px;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,149,46,0.06), transparent 70%);
  pointer-events: none;
}

/* ── Hero visual card (right) ──── */
html body .is-home-route .home-premium-visual,
html body.is-home-route .home-premium-visual {
  background: linear-gradient(145deg, rgba(255,248,237,0.95), rgba(243,235,216,0.90)) !important;
  border: 1.5px solid var(--arab-gold-pale) !important;
  border-top: 3px solid var(--arab-gold) !important;
  border-radius: 22px !important;
  box-shadow:
    0 16px 42px var(--arab-shadow),
    0 2px 8px var(--arab-shadow-gold),
    inset 0 1px 0 rgba(201,149,46,0.08) !important;
  position: relative !important;
  overflow: hidden !important;
}

/* ── Visual media area — the mockup image container ──── */
html body .is-home-route .home-premium-visual-media,
html body.is-home-route .home-premium-visual-media {
  background: linear-gradient(135deg, rgba(201,149,46,0.08), rgba(184,154,110,0.05), rgba(201,149,46,0.03)) !important;
  border: 1px solid var(--arab-gold-pale) !important;
  border-radius: 16px !important;
  position: relative !important;
  min-height: 260px !important;
}

/* ── Arabesque mockup overlay — CSS-only profile preview on right side ──── */
html body .is-home-route .home-premium-visual-media::before,
html body.is-home-route .home-premium-visual-media::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    /* Avatar circle */
    radial-gradient(circle 42px at 50% 32%, rgba(201,149,46,0.18), transparent 44px),
    /* Name line */
    linear-gradient(90deg, rgba(201,149,46,0.22), rgba(201,149,46,0.12)) 38% 50% / 80px 8px no-repeat,
    /* Location line */
    linear-gradient(90deg, rgba(184,154,110,0.18), rgba(184,154,110,0.10)) 38% 58% / 55px 6px no-repeat,
    /* Verified badge */
    radial-gradient(circle 6px at 62% 50%, rgba(201,149,46,0.35), transparent 7px),
    /* Trust bar */
    linear-gradient(90deg, rgba(201,149,46,0.10), rgba(201,149,46,0.06), rgba(201,149,46,0.10)) 25% 70% / 120px 5px no-repeat,
    /* Decorative dots */
    radial-gradient(circle 2px at 20% 80%, rgba(201,149,46,0.25), transparent 3px),
    radial-gradient(circle 2px at 25% 85%, rgba(201,149,46,0.15), transparent 3px),
    radial-gradient(circle 2px at 80% 80%, rgba(201,149,46,0.25), transparent 3px),
    radial-gradient(circle 2px at 75% 85%, rgba(201,149,46,0.15), transparent 3px),
    /* Gold accent line */
    linear-gradient(0deg, var(--arab-gold-pale), transparent) 0 100% / 100% 3px no-repeat,
    /* Top gold accent */
    linear-gradient(180deg, var(--arab-gold-pale), transparent) 0 0 / 100% 3px no-repeat;
  border-radius: 16px;
  pointer-events: none;
  z-index: 1;
}
html body .is-home-route .home-premium-visual-media::after,
html body.is-home-route .home-premium-visual-media::after {
  content: '✓ Verified';
  position: absolute;
  top: 12px;
  right: 12px;
  background: linear-gradient(135deg, var(--arab-gold), var(--arab-gold-deep));
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  letter-spacing: 0.04em;
  box-shadow: 0 2px 6px var(--arab-shadow-gold);
  pointer-events: none;
  z-index: 2;
}

/* ── Eyebrow text ──── */
html body .is-home-route .home-eyebrow,
html body.is-home-route .home-eyebrow {
  color: var(--arab-gold-deep) !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

/* ── Hero h1 ──── */
html body .is-home-route .home-premium-copy h1,
html body.is-home-route .home-premium-copy h1 {
  color: var(--arab-brown) !important;
}

/* ── Hero paragraph ──── */
html body .is-home-route .home-premium-copy p,
html body.is-home-route .home-premium-copy p {
  color: var(--arab-text-soft) !important;
}

/* ── Search form styling ──── */
html body .is-home-route .home-hero-search--premium,
html body.is-home-route .home-hero-search--premium {
  background: rgba(243,235,216,0.50) !important;
  border: 1px solid var(--arab-gold-pale) !important;
  border-radius: 14px !important;
  padding: 12px !important;
}
html body .is-home-route .home-hero-search-field select,
html body.is-home-route .home-hero-search-field select {
  background: var(--arab-surface) !important;
  border: 1px solid var(--arab-border) !important;
  color: var(--arab-text) !important;
  border-radius: 8px !important;
}
html body .is-home-route .home-hero-search-field select:focus,
html body.is-home-route .home-hero-search-field select:focus {
  border-color: var(--arab-gold) !important;
  box-shadow: 0 0 0 2px rgba(201,149,46,0.15) !important;
}
html body .is-home-route .home-premium-search-note,
html body.is-home-route .home-premium-search-note {
  color: var(--arab-text-faint) !important;
}

/* ── Stat cards — more refined ──── */
html body .is-home-route .home-premium-stat-card,
html body.is-home-route .home-premium-stat-card {
  background: linear-gradient(145deg, rgba(255,248,237,0.95), rgba(248,241,224,0.90)) !important;
  border: 1px solid var(--arab-gold-pale) !important;
  border-top: 2px solid var(--arab-gold) !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 8px var(--arab-shadow-gold) !important;
  transition: all 0.25s ease !important;
}
html body .is-home-route .home-premium-stat-card:hover,
html body.is-home-route .home-premium-stat-card:hover {
  transform: translateY(-2px) !important;
  border-color: var(--arab-gold) !important;
  box-shadow: 0 8px 22px var(--arab-shadow-gold) !important;
}
html body .is-home-route .home-premium-stat-card strong,
html body.is-home-route .home-premium-stat-card strong {
  color: var(--arab-gold-deep) !important;
  font-size: 1.25rem !important;
}
html body .is-home-route .home-premium-stat-card span,
html body.is-home-route .home-premium-stat-card span {
  color: var(--arab-text-soft) !important;
  font-size: 0.78rem !important;
}

/* ── Shortcut cards ──── */
html body .is-home-route .home-shortcut-card,
html body.is-home-route .home-shortcut-card {
  background: linear-gradient(145deg, rgba(255,248,237,0.96), rgba(248,241,224,0.90)) !important;
  border: 1px solid var(--arab-gold-pale) !important;
  border-radius: 14px !important;
  color: var(--arab-brown) !important;
  transition: all 0.25s ease !important;
}
html body .is-home-route .home-shortcut-card:hover,
html body.is-home-route .home-shortcut-card:hover {
  background: linear-gradient(145deg, rgba(255,248,237,1), rgba(243,235,216,1)) !important;
  border-color: var(--arab-gold) !important;
  color: var(--arab-gold-deep) !important;
  box-shadow: 0 6px 18px var(--arab-shadow-gold) !important;
}

/* ── Section headings ──── */
html body .is-home-route .home-section-head h2,
html body.is-home-route .home-section-head h2 {
  color: var(--arab-brown) !important;
}

/* ── Section backgrounds — ensure no white ──── */
html body .is-home-route .home-section,
html body.is-home-route .home-section {
  background: var(--arab-bg) !important;
  border-top: 1px solid var(--arab-border-gold) !important;
}
html body .is-home-route .home-section--alt,
html body.is-home-route .home-section--alt {
  background: var(--arab-surface-alt) !important;
  border-top: 1px solid var(--arab-border-gold) !important;
  border-bottom: 1px solid var(--arab-border-gold) !important;
}

/* ── Story cards ──── */
html body .is-home-route .home-story-card,
html body.is-home-route .home-story-card {
  background: linear-gradient(145deg, rgba(255,248,237,0.97), rgba(248,241,224,0.92)) !important;
  border: 1px solid var(--arab-gold-pale) !important;
  border-top: 2px solid var(--arab-gold) !important;
  border-radius: 16px !important;
  box-shadow: 0 2px 10px var(--arab-shadow-gold) !important;
}
html body .is-home-route .home-story-quote-icon,
html body.is-home-route .home-story-quote-icon {
  color: var(--arab-gold) !important;
  font-size: 2.5rem !important;
  opacity: 0.6 !important;
}

/* ── Blog cards ──── */
html body .is-home-route .home-blog-card,
html body.is-home-route .home-blog-card {
  background: linear-gradient(145deg, rgba(255,248,237,0.96), rgba(248,241,224,0.90)) !important;
  border: 1px solid var(--arab-gold-pale) !important;
  border-top: 2px solid var(--arab-gold) !important;
  border-radius: 16px !important;
  box-shadow: 0 2px 10px var(--arab-shadow-gold) !important;
  overflow: hidden !important;
}
html body .is-home-route .home-blog-cat,
html body.is-home-route .home-blog-cat {
  background: var(--arab-gold-pale) !important;
  color: var(--arab-gold-deep) !important;
}

/* ── CTA band — already styled but enhance ──── */
html body .is-home-route .home-cta-band h2,
html body.is-home-route .home-cta-band h2 {
  color: #fff !important;
}
html body .is-home-route .home-cta-band p,
html body.is-home-route .home-cta-band p {
  color: rgba(255,255,255,0.85) !important;
}

/* ── Gold line dividers between sections ──── */
html body .is-home-route .home-section::before,
html body.is-home-route .home-section::before {
  content: '';
  display: block;
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--arab-gold-pale), transparent);
  margin: 0 auto 0;
  position: relative;
  top: -1px;
}

/* ── Mandala decorative background for hero ──── */
html body .is-home-route .home-premium-hero.arabesque-pattern-bg::after,
html body.is-home-route .home-premium-hero.arabesque-pattern-bg::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 500px;
  height: 500px;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle, rgba(201,149,46,0.04) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

/* ── btn-outline-primary override for Arabesque homepage ──── */
html body .is-home-route .btn-outline-primary,
html body.is-home-route .btn-outline-primary {
  border-color: var(--arab-gold) !important;
  color: var(--arab-gold-deep) !important;
}
html body .is-home-route .btn-outline-primary:hover,
html body.is-home-route .btn-outline-primary:hover {
  background: var(--arab-gold) !important;
  color: #fff !important;
  border-color: var(--arab-gold-deep) !important;
}

/* ══════════════════════════════════════════════════════════════
    GLOBAL POLISH — Alignment, Spacing, Readability
    ══════════════════════════════════════════════════════════════ */

/* ── Card content alignment ──── */
html body .is-public-viewport .card,
html body .is-public-viewport .form-card,
html body .is-public-viewport .account-form-card,
html body .is-public-viewport .account-dashboard-panel,
html body .is-public-viewport .account-dashboard-status-card,
html body .is-public-viewport .settings-card,
html body .card,
html body .form-card,
html body .blog-card,
html body .notification-card,
html body .profile-visit-card,
html body .success-story-card,
html body .home-story-card,
html body .home-blog-card {
  padding: 28px 32px !important;
  line-height: 1.65 !important;
}
html body .is-public-viewport .card h1,
html body .is-public-viewport .card h2,
html body .is-public-viewport .card h3,
html body .is-public-viewport .form-card h1,
html body .is-public-viewport .form-card h2,
html body .is-public-viewport .form-card h3 {
  margin-bottom: 12px !important;
  line-height: 1.3 !important;
}
html body .is-public-viewport .card p,
html body .is-public-viewport .form-card p {
  margin-bottom: 12px !important;
  line-height: 1.7 !important;
}
html body .is-public-viewport .card > :last-child,
html body .is-public-viewport .form-card > :last-child {
  margin-bottom: 0 !important;
}

/* ── Auth shell balance ──── */
html body .auth-shell {
  padding: 40px 0 !important;
}
html body .auth-grid {
  gap: 24px !important;
  align-items: stretch !important;
}
html body .auth-copy {
  padding: 40px 36px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 16px !important;
}
html body .auth-copy h1 {
  margin-bottom: 4px !important;
  line-height: 1.2 !important;
}
html body .auth-copy p {
  line-height: 1.7 !important;
  margin-bottom: 0 !important;
}
html body .auth-form-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
html body .auth-form-wrap .form-card {
  padding: 32px 36px !important;
  width: 100% !important;
  max-width: 460px !important;
}
html body .auth-form-wrap .form-card h1 {
  margin-bottom: 6px !important;
}
html body .auth-form-wrap .form-card p {
  margin-bottom: 18px !important;
}
html body .auth-form-wrap .form-card .field {
  margin-bottom: 16px !important;
}
html body .auth-form-wrap .form-card .field label {
  margin-bottom: 6px !important;
  font-weight: 600 !important;
  color: var(--arab-text) !important;
}
html body .auth-form-wrap .form-card .field input,
html body .auth-form-wrap .form-card .field select {
  padding: 10px 14px !important;
  font-size: 0.95rem !important;
}
html body .auth-form-wrap .form-card .btn {
  padding: 11px 24px !important;
  font-size: 0.95rem !important;
  margin-top: 4px !important;
}
html body .auth-foot {
  margin-top: 18px !important;
  text-align: center !important;
}
html body .auth-foot a {
  color: var(--arab-gold-deep) !important;
  font-weight: 600 !important;
}
html body .social-login-actions {
  margin-bottom: 16px !important;
  gap: 10px !important;
}
html body .social-login-actions .btn {
  padding: 10px 16px !important;
}

/* ── Blog hero polish ──── */
html body .footer-page-hero {
  padding: 48px 32px !important;
  text-align: center !important;
}
html body .footer-page-hero h1 {
  margin-bottom: 10px !important;
  line-height: 1.25 !important;
}
html body .footer-page-hero .eyebrow {
  display: inline-block !important;
  margin-bottom: 10px !important;
}
html body .blog-category-chips {
  gap: 8px !important;
  padding: 12px 0 !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
}
html body .blog-category-chips .badge-inline {
  padding: 6px 16px !important;
  font-size: 0.85rem !important;
  border-radius: 999px !important;
}
html body .blog-listing-page {
  padding: 28px 0 !important;
}

/* ── Empty states ──── */
html body .account-empty-box,
html body .account-empty-panel,
html body .is-public-viewport .account-empty-box,
html body .is-public-viewport .account-empty-panel {
  padding: 40px 28px !important;
  text-align: center !important;
  border-radius: 16px !important;
}
html body .account-empty-panel__icon {
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 14px !important;
  font-size: 1.5rem !important;
}
html body .account-empty-box strong,
html body .account-empty-panel strong {
  display: block !important;
  margin-bottom: 6px !important;
  font-size: 1.1rem !important;
}
html body .account-empty-box p,
html body .account-empty-panel p {
  font-size: 0.92rem !important;
  line-height: 1.6 !important;
}

/* ── Account sidebar + content harmony ──── */
html body .account-layout {
  gap: 28px !important;
}
html body .account-sidebar {
  min-width: 240px !important;
}
html body .account-user-banner {
  padding: 24px 20px !important;
  border-radius: 16px !important;
}
html body .account-side-links {
  gap: 2px !important;
  padding: 8px 0 !important;
}
html body .account-side-links a {
  padding: 10px 14px !important;
  font-size: 0.9rem !important;
  border-radius: 8px !important;
}
html body .account-side-stat {
  padding: 12px 14px !important;
}
html body .account-side-stat strong {
  font-size: 1.1rem !important;
}
html body .account-side-note {
  padding: 14px !important;
}

/* ── Account panels/cards ──── */
html body .account-dashboard-panel,
html body .account-dashboard-status-card {
  padding: 24px 28px !important;
  border-radius: 14px !important;
}
html body .account-dashboard-hero {
  padding: 28px !important;
}
html body .account-dashboard-hero h1 {
  margin-bottom: 8px !important;
}
html body .account-section-title h2 {
  padding-bottom: 10px !important;
  margin-bottom: 18px !important;
}
html body .account-directory-head {
  padding: 24px 28px !important;
}
html body .account-search-box {
  padding: 20px 24px !important;
}
html body .account-form-card {
  padding: 28px 32px !important;
}
html body .account-form-actions {
  margin-top: 20px !important;
  gap: 10px !important;
}
html body .account-form-actions .btn {
  min-width: 140px !important;
  padding: 10px 20px !important;
}

/* ── Privacy page polish ──── */
html body .privacy-settings {
  padding: 28px 32px !important;
}
html body .privacy-head {
  margin-bottom: 20px !important;
}
html body .privacy-row {
  padding: 14px 0 !important;
}
html body .privacy-toggle {
  gap: 12px !important;
  align-items: flex-start !important;
}
html body .privacy-toggle__label {
  font-size: 0.92rem !important;
  line-height: 1.5 !important;
}
html body .privacy-toggle__label small {
  display: block !important;
  margin-top: 3px !important;
  font-size: 0.82rem !important;
}
html body .privacy-segments {
  padding: 6px !important;
  gap: 6px !important;
  border-radius: 10px !important;
}
html body .privacy-segment__inner {
  padding: 8px 16px !important;
  border-radius: 8px !important;
  font-size: 0.88rem !important;
  text-align: center !important;
}
html body .privacy-upgrade {
  padding: 20px 24px !important;
  border-radius: 14px !important;
}
html body .privacy-input {
  margin-top: 10px !important;
  gap: 6px !important;
}
html body .privacy-input__field {
  padding: 8px 14px !important;
  border-radius: 8px !important;
}

/* ── Notification cards polish ──── */
html body .notification-card {
  padding: 18px 22px !important;
  gap: 14px !important;
}
html body .notification-card h2 {
  font-size: 0.95rem !important;
  margin-bottom: 4px !important;
}
html body .notification-card p {
  font-size: 0.88rem !important;
  line-height: 1.55 !important;
}
html body .notification-card-actions {
  margin-top: 8px !important;
  gap: 8px !important;
}
html body .notification-card-actions .btn {
  padding: 6px 14px !important;
  font-size: 0.82rem !important;
}

/* ── Member/profile cards polish ──── */
html body .directory-member-card {
  padding: 16px !important;
  border-radius: 14px !important;
}
html body .directory-member-card .member-avatar {
  border-radius: 12px !important;
}
html body .directory-member-card .member-name {
  font-size: 0.95rem !important;
  font-weight: 600 !important;
}
html body .directory-member-card .member-meta {
  font-size: 0.82rem !important;
  line-height: 1.45 !important;
}
html body .home-member-card {
  border-radius: 14px !important;
  overflow: hidden !important;
}
html body .home-member-card .home-member-photo {
  border-radius: 0 !important;
}
html body .home-member-card .home-member-body {
  padding: 12px 14px !important;
}
html body .home-member-name {
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  margin-bottom: 4px !important;
}

/* ── Premium plan cards ──── */
html body .plan-box {
  padding: 28px 24px !important;
  border-radius: 16px !important;
}
html body .plan-box.featured {
  padding: 32px 28px !important;
}
html body .plan-box h2 {
  margin-bottom: 8px !important;
}
html body .plan-box .plan-price {
  margin-bottom: 14px !important;
}
html body .plan-box .btn {
  margin-top: 12px !important;
  width: 100% !important;
}

/* ── Form fields global polish ──── */
html body .is-public-viewport .field,
html body .field {
  margin-bottom: 14px !important;
}
html body .is-public-viewport .field label,
html body .field label {
  display: block !important;
  margin-bottom: 5px !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  color: var(--arab-text) !important;
}
html body .is-public-viewport .field input,
html body .is-public-viewport .field select,
html body .is-public-viewport .field textarea,
html body .field input,
html body .field select,
html body .field textarea {
  padding: 10px 14px !important;
  font-size: 0.92rem !important;
  line-height: 1.5 !important;
  border-radius: 8px !important;
  width: 100% !important;
}
html body .is-public-viewport .field .field-error,
html body .field .field-error {
  font-size: 0.8rem !important;
  margin-top: 4px !important;
}

/* ── Section spacing ──── */
html body .home-section {
  padding: 36px 0 !important;
}
html body .home-section-head {
  margin-bottom: 20px !important;
  gap: 12px !important;
}
html body .home-section-head h2 {
  font-size: clamp(1.25rem, 2.5vw, 1.6rem) !important;
  line-height: 1.3 !important;
}
html body .home-section-lead {
  font-size: 0.92rem !important;
  line-height: 1.6 !important;
  color: var(--arab-text-soft) !important;
  max-width: 60ch !important;
}

/* ── Buttons alignment ──── */
html body .is-public-viewport .btn,
html body .btn {
  padding: 9px 20px !important;
  font-size: 0.9rem !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  line-height: 1.4 !important;
}
html body .is-public-viewport .btn-lg,
html body .btn-lg,
html body .home-btn-lg {
  padding: 12px 28px !important;
  font-size: 1rem !important;
}
html body .is-public-viewport .btn-sm,
html body .btn-sm {
  padding: 6px 14px !important;
  font-size: 0.82rem !important;
}

/* ── Blog cards polish ──── */
html body .blog-card,
html body .blog-post-card {
  padding: 0 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}
html body .blog-card .blog-card-body,
html body .blog-post-card .blog-post-body {
  padding: 18px 22px !important;
}
html body .blog-card h2,
html body .blog-card h3,
html body .blog-post-card h2,
html body .blog-post-card h3 {
  font-size: 1rem !important;
  line-height: 1.4 !important;
  margin-bottom: 8px !important;
}
html body .blog-card p,
html body .blog-post-card p {
  font-size: 0.88rem !important;
  line-height: 1.6 !important;
}
html body .blog-card-meta {
  font-size: 0.8rem !important;
  margin-top: 8px !important;
  gap: 8px !important;
}

/* ── Success story cards ──── */
html body .home-story-card {
  padding: 22px 24px !important;
}
html body .home-story-quote-icon {
  font-size: 2rem !important;
  margin-bottom: 4px !important;
}
html body .home-story-text {
  font-size: 0.92rem !important;
  line-height: 1.65 !important;
  margin-bottom: 12px !important;
}
html body .home-story-card footer {
  font-size: 0.85rem !important;
}
html body .home-story-stars {
  color: var(--arab-gold) !important;
  font-size: 0.9rem !important;
}

/* ── Chat composer ──── */
html body .chat-composer {
  padding: 12px 16px !important;
  gap: 10px !important;
}
html body .chat-composer input,
html body .chat-composer textarea {
  padding: 10px 14px !important;
  border-radius: 10px !important;
}

/* ── Pagination polish ──── */
html body .pagination {
  gap: 4px !important;
  margin-top: 24px !important;
}
html body .pagination a,
html body .pagination span {
  padding: 8px 12px !important;
  font-size: 0.85rem !important;
  min-width: 36px !important;
  text-align: center !important;
}

/* ── RTL alignment fixes ──── */
[dir="rtl"] html body .auth-copy {
  text-align: right !important;
}
[dir="rtl"] html body .auth-form-wrap .form-card {
  text-align: right !important;
}
[dir="rtl"] html body .field label {
  text-align: right !important;
}
[dir="rtl"] html body .privacy-toggle {
  flex-direction: row-reverse !important;
}
[dir="rtl"] html body .privacy-toggle__label {
  text-align: right !important;
}
[dir="rtl"] html body .account-side-links a[aria-current="page"] {
  border-inline-start: 3px solid var(--arab-gold) !important;
  border-left: none !important;
}
[dir="rtl"] html body .blog-category-chips {
  justify-content: center !important;
}
[dir="rtl"] html body .notification-card {
  text-align: right !important;
}
[dir="rtl"] html body .home-story-card {
  text-align: right !important;
}
[dir="rtl"] html body .form-alert-success,
[dir="rtl"] html body .form-alert-danger,
[dir="rtl"] html body .form-alert-info {
  border-left: none !important;
  border-right: 4px solid !important;
}
[dir="rtl"] html body .form-alert-success { border-right-color: var(--arab-green) !important; }
[dir="rtl"] html body .form-alert-danger { border-right-color: var(--arab-rose) !important; }
[dir="rtl"] html body .form-alert-info { border-right-color: var(--arab-gold) !important; }

/* ── Mobile responsive overrides ──── */
@media (max-width: 768px) {
  html body .auth-shell {
    padding: 20px 12px !important;
  }
  html body .auth-grid {
    grid-template-columns: 1fr !important;
  }
  html body .auth-copy {
    padding: 28px 22px !important;
    text-align: center !important;
  }
  html body .auth-form-wrap .form-card {
    padding: 24px 20px !important;
    max-width: 100% !important;
  }
  html body .card,
  html body .form-card,
  html body .account-form-card,
  html body .account-dashboard-panel,
  html body .account-dashboard-status-card,
  html body .settings-card {
    padding: 20px 18px !important;
  }
  html body .home-section {
    padding: 24px 0 !important;
  }
  html body .footer-page-hero {
    padding: 32px 18px !important;
  }
  html body .account-layout {
    grid-template-columns: 1fr !important;
  }
  html body .account-sidebar {
    min-width: auto !important;
  }
  html body .privacy-settings {
    padding: 20px 16px !important;
  }
  html body .plan-box {
    padding: 22px 18px !important;
  }
  html body .notification-card {
    padding: 14px 16px !important;
  }
  html body .blog-card .blog-card-body,
  html body .blog-post-card .blog-post-body {
    padding: 14px 16px !important;
  }
  html body .home-story-card {
    padding: 18px 16px !important;
  }
  html body .directory-member-card {
    padding: 12px !important;
  }
  [dir="rtl"] html body .auth-copy,
  [dir="rtl"] html body .auth-form-wrap .form-card {
    text-align: center !important;
  }
}
@media (max-width: 480px) {
  html body .auth-form-wrap .form-card {
    padding: 20px 14px !important;
  }
  html body .card,
  html body .form-card {
    padding: 16px 14px !important;
  }
  html body .btn-lg,
  html body .home-btn-lg {
    padding: 10px 18px !important;
    font-size: 0.92rem !important;
  }
  html body .home-premium-actions {
    flex-direction: column !important;
  }
  html body .home-premium-actions .btn {
    width: 100% !important;
  }
}

/* ══════════════════════════════════════════════════════════════
    MOBILE — ARABESQUE OVERRIDES
    ══════════════════════════════════════════════════════════════ */

/* ── Mobile page container ──── */
html body.is-mobile-view .m-page {
  background: var(--arab-bg) !important;
}
html body.is-mobile-view .m-page__title {
  color: var(--arab-brown) !important;
}
html body.is-mobile-view .m-page__subtitle {
  color: var(--arab-text-soft) !important;
}

/* ── Mobile buttons ──── */
html body.is-mobile-view .m-btn--primary {
  background: linear-gradient(135deg, var(--arab-gold-bright), var(--arab-gold), var(--arab-gold-deep)) !important;
  border-color: var(--arab-gold-deep) !important;
  color: #fff !important;
  text-shadow: 0 1px 1px rgba(0,0,0,0.12) !important;
}
html body.is-mobile-view .m-btn--ghost {
  border-color: var(--arab-gold) !important;
  color: var(--arab-gold-deep) !important;
  background: transparent !important;
}

/* ── Mobile KPI ──── */
html body.is-mobile-view .m-kpi {
  background: linear-gradient(145deg, rgba(255,248,237,0.95), rgba(248,241,224,0.90)) !important;
  border: 1px solid var(--arab-gold-pale) !important;
  border-top: 2px solid var(--arab-gold) !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 8px var(--arab-shadow-gold) !important;
}
html body.is-mobile-view .m-kpi__value {
  color: var(--arab-gold-deep) !important;
}
html body.is-mobile-view .m-kpi__label {
  color: var(--arab-text-soft) !important;
}

/* ── Mobile section ──── */
html body.is-mobile-view .m-section {
  background: var(--arab-surface-alt) !important;
}
html body.is-mobile-view .m-section__title {
  color: var(--arab-brown) !important;
}
html body.is-mobile-view .m-section__link {
  color: var(--arab-gold-deep) !important;
}

/* ── Mobile member cards ──── */
html body.is-mobile-view .m-member-card {
  background: linear-gradient(145deg, rgba(255,248,237,0.97), rgba(248,241,224,0.92)) !important;
  border: 1px solid var(--arab-gold-pale) !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 8px var(--arab-shadow-gold) !important;
}
html body.is-mobile-view .m-member-card__name {
  color: var(--arab-brown) !important;
}
html body.is-mobile-view .m-member-card__meta {
  color: var(--arab-text-soft) !important;
}
html body.is-mobile-view .m-member-card.is-premium {
  border-color: var(--arab-gold) !important;
  box-shadow: 0 4px 14px var(--arab-shadow-gold) !important;
}
html body.is-mobile-view .m-member-card__premium-tag {
  background: linear-gradient(135deg, var(--arab-gold-bright), var(--arab-gold)) !important;
  color: #fff !important;
}

/* ── Mobile blog card ──── */
html body.is-mobile-view .m-card {
  background: linear-gradient(145deg, rgba(255,248,237,0.96), rgba(248,241,224,0.90)) !important;
  border: 1px solid var(--arab-gold-pale) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
}

/* ── Mobile rail ──── */
html body.is-mobile-view .m-rail {
  scrollbar-color: var(--arab-gold-pale) transparent !important;
}

/* ══════════════════════════════════════════════════════════════
    MOBILE RESPONSIVE
    ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .arabesque-corners::before,
  .arabesque-corners::after { width: 80px; height: 80px; opacity: 0.12; }
  .arabesque-divider { padding: 20px 0; }
  .arabesque-divider::before,
  .arabesque-divider::after { max-width: 100px; }
  .arabesque-arch::before { width: 80%; height: 35px; }
  html body .is-home-route .home-member-card:hover { transform: none !important; }
}
@media (max-width: 480px) {
  .arabesque-corners::before,
  .arabesque-corners::after { width: 50px; height: 50px; opacity: 0.08; }
  .arabesque-divider svg { width: 24px; height: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  html body .is-home-route .home-member-card:hover { transform: none !important; }
}

@media print {
  .arabesque-corners::before,
  .arabesque-corners::after,
  .arabesque-pattern-bg::before,
  .arabesque-arch::before,
  .arabesque-scallop::after,
  html body .home-cta-band::before { display: none; }
}

/* Contrast safety for arabesque template loaded after base/mobile styles. */
:root {
    --text: #13231e;
    --text-soft: #3f514a;
    --text-faint: #5f6d66;
    --m-text: #13231e;
    --m-text-soft: #3f514a;
    --m-text-faint: #5f6d66;
    --m-primary: #145c4b;
    --m-accent: #7a4f12;
}
:where(.account-dashboard-status-card.is-highlight,.account-dashboard-panel,.account-dashboard-status-mini,.account-dashboard-metric,.account-dashboard-feed-card,.account-dashboard-thread-card,.account-dashboard-check-item,.account-dashboard-action,.card,.form-card,.m-card,.m-kpi) {
    color: var(--text) !important;
}
:where(.account-dashboard-status-card.is-highlight,.account-dashboard-panel,.account-dashboard-status-mini,.account-dashboard-metric,.account-dashboard-feed-card,.account-dashboard-thread-card,.account-dashboard-check-item,.account-dashboard-action,.card,.form-card,.m-card,.m-kpi) :where(h1,h2,h3,h4,strong,b,label) {
    color: var(--text) !important;
}
:where(.account-dashboard-status-card.is-highlight,.account-dashboard-panel,.account-dashboard-status-mini,.account-dashboard-metric,.account-dashboard-feed-card,.account-dashboard-thread-card,.account-dashboard-check-item,.account-dashboard-action,.card,.form-card,.m-card,.m-kpi) :where(p,small,span,li) {
    color: var(--text-soft) !important;
}
.account-dashboard-status-card.is-highlight,
html body .is-public-viewport .account-dashboard-status-card.is-highlight {
    background: linear-gradient(135deg, rgba(200, 161, 91, 0.22), rgba(255, 248, 237, 0.98)) !important;
    border-color: rgba(120, 81, 24, 0.22) !important;
}
.account-dashboard-status-card.is-highlight :where(span,p,strong),
html body .is-public-viewport .account-dashboard-status-card.is-highlight :where(span,p,strong) {
    color: var(--text) !important;
}
.account-dashboard-check-state,
.account-dashboard-feed-state,
.account-dashboard-feed-link,
.account-dashboard-panel-links a,
.account-section-title > a {
    color: #4a2b08 !important;
}
body.is-mobile-view .m-kpi__value {
    color: var(--m-primary) !important;
}
body.is-mobile-view .m-kpi :where(.m-kpi__label,p,span) {
    color: var(--m-text-soft) !important;
}
:where(.btn-primary,.btn-primary *,.m-btn--primary,.m-btn--primary *,.btn-danger,.btn-danger *) {
    color: #fff !important;
}

/* Must beat arabesque mobile specificity. */
html body.is-mobile-view .m-kpi__value {
    color: #145c4b !important;
}
html body.is-mobile-view .m-kpi__label,
html body.is-mobile-view .m-kpi p:not(.m-kpi__value),
html body.is-mobile-view .m-kpi span {
    color: #3f514a !important;
}

/* Registration-only Arabesque balance. */
html body .auth-shell.auth-shell-register {
  background: var(--arab-bg) !important;
  padding: clamp(18px, 3vw, 34px) 16px !important;
}

html body .auth-shell-register .auth-grid-register {
  min-height: auto !important;
  align-items: start !important;
}

html body .auth-shell-register .auth-copy {
  min-height: clamp(390px, 58vh, 560px) !important;
  height: auto !important;
  align-self: start !important;
  justify-content: center !important;
  background:
    linear-gradient(180deg, rgba(91, 60, 31, 0.9), rgba(146, 104, 30, 0.92)),
    radial-gradient(circle at 20% 80%, rgba(201, 149, 46, 0.28), transparent 52%) !important;
  box-shadow: 0 20px 48px rgba(64, 39, 18, 0.16) !important;
  border: 1px solid rgba(201, 149, 46, 0.22) !important;
}

html body .auth-shell-register .auth-form-wrap {
  background: transparent !important;
  padding: 0 !important;
  align-items: flex-start !important;
}

html body .auth-shell-register .auth-form-wrap .registration-stepper {
  background: rgba(255, 248, 237, 0.96) !important;
  border-color: var(--arab-border) !important;
  box-shadow: 0 18px 42px var(--arab-shadow), 0 2px 8px var(--arab-shadow-gold) !important;
}

html body .auth-shell-register .registration-file-upload {
  background: rgba(255, 248, 237, 0.88) !important;
  border-color: var(--arab-border) !important;
}

html body .auth-shell-register .registration-file-upload__button {
  background: linear-gradient(135deg, var(--arab-gold), var(--arab-gold-deep)) !important;
  color: #fff !important;
}

@media (max-width: 1100px) {
  html body .auth-shell-register .auth-copy {
    min-height: auto !important;
    position: static !important;
  }
}

/* Compact the registration wizard only; dense female steps must fit at normal zoom. */
html body .auth-shell-register .auth-copy {
  min-height: clamp(300px, 42vh, 430px) !important;
  padding: clamp(22px, 2.4vw, 30px) !important;
  gap: 10px !important;
}

html body .auth-shell-register .auth-copy h1 {
  font-size: clamp(1.35rem, 0.95vw + 1rem, 1.88rem) !important;
  line-height: 1.28 !important;
}

html body .auth-shell-register .auth-copy p,
html body .auth-shell-register .auth-copy li {
  font-size: 0.88rem !important;
  line-height: 1.55 !important;
}

html body .auth-shell-register .auth-form-wrap .registration-stepper {
  max-width: 620px !important;
  padding: 14px 18px 16px !important;
  gap: 12px !important;
}

html body .auth-shell-register .form-card.registration-stepper .card {
  padding: 16px 18px !important;
  border-radius: 14px !important;
}

html body .auth-shell-register .registration-step .grid-2,
html body .auth-shell-register .registration-step .grid-1 {
  gap: 10px 12px !important;
}

html body .auth-shell-register .registration-step .grid-2 > label:not(.terms-check),
html body .auth-shell-register .registration-step .grid-1 > label:not(.terms-check) {
  gap: 4px !important;
  font-size: 0.82rem !important;
  line-height: 1.25 !important;
}

html body .auth-shell-register .registration-step input:not([type="hidden"]):not([type="checkbox"]):not([type="file"]),
html body .auth-shell-register .registration-step select {
  min-height: 42px !important;
  padding-block: 8px !important;
  padding-inline: 12px 34px !important;
  border-radius: 8px !important;
  font-size: 0.86rem !important;
  line-height: 1.25 !important;
}

html[dir="rtl"] body .auth-shell-register .registration-step select {
  padding-inline: 34px 12px !important;
}

html body .auth-shell-register .registration-step textarea {
  min-height: 86px !important;
  max-height: 118px !important;
  padding: 9px 11px !important;
  border-radius: 10px !important;
  font-size: 0.86rem !important;
  line-height: 1.45 !important;
}

html body .auth-shell-register .registration-textarea-guidance {
  margin-top: 4px !important;
  padding: 7px 10px !important;
  border-radius: 10px !important;
  gap: 4px !important;
  font-size: 0.74rem !important;
  line-height: 1.35 !important;
}

html body .auth-shell-register .registration-actions .btn {
  min-width: 126px !important;
  padding-block: 10px !important;
}

/* Chat pages only: final Arabesque override loaded after app.css */
html body.route-chat-index .chat-index-page,
html body.route-chat-show .chat-show-page {
  align-items: start !important;
}

html body.route-chat-index .chat-index-page .account-page-main,
html body.route-chat-show .chat-show-page .account-page-main {
  width: 100% !important;
  max-width: min(100%, 1080px) !important;
  min-width: 0 !important;
}

html body.route-chat-index .chat-index-page .account-directory-head {
  padding: 22px 28px !important;
}

html body.route-chat-index .chat-index-page .account-notifications-box {
  min-height: 430px !important;
  padding: 28px 30px !important;
  display: flex !important;
  flex-direction: column !important;
}

html body.route-chat-index .chat-index-page .account-feed-list {
  flex: 1 1 auto !important;
  min-height: 230px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 16px !important;
  padding: 0 !important;
}

html body.route-chat-index .chat-index-page .account-match-row {
  min-height: 168px !important;
  padding: 22px 24px !important;
  align-items: center !important;
  border-radius: 14px !important;
}

html body.route-chat-index .chat-index-page .chat-row-content {
  display: grid !important;
  gap: 12px !important;
  min-width: 0 !important;
}

html body.route-chat-index .chat-index-page .chat-row-footer {
  align-items: center !important;
}

html body.route-chat-show .chat-show-page {
  min-height: auto !important;
}

html body.route-chat-show .chat-show-page .account-page-main {
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

html body.route-chat-show .chat-show-page .chat-shell--messenger {
  flex: 0 1 auto !important;
  min-height: clamp(620px, calc(100vh - 225px), 760px) !important;
  border-radius: 20px !important;
}

html body.route-chat-show .chat-show-page .chat-messenger {
  min-height: inherit !important;
  height: 100% !important;
  grid-template-rows: auto minmax(360px, 1fr) auto !important;
}

html body.route-chat-show .chat-show-page .chat-thread {
  min-height: 360px !important;
  padding: 22px 24px 18px !important;
}

html body.route-chat-show .chat-show-page .chat-thread > :first-child {
  margin-top: auto !important;
}

html body.route-chat-show .chat-show-page .chat-composer {
  align-items: center !important;
  padding: 12px 18px !important;
  gap: 10px !important;
}

html body.route-chat-show .chat-show-page .chat-composer__input {
  border-radius: 18px !important;
  padding: 6px 14px !important;
}

html body.route-chat-show .chat-show-page .chat-composer__input textarea {
  min-height: 46px !important;
  max-height: 108px !important;
  padding: 9px 0 !important;
}

html body.route-chat-show .chat-show-page .chat-composer__attach,
html body.route-chat-show .chat-show-page .chat-composer__send {
  flex: 0 0 auto !important;
}

@media (max-width: 900px) {
  html body.route-chat-index .chat-index-page .account-page-main,
  html body.route-chat-show .chat-show-page .account-page-main {
    max-width: 100% !important;
  }

  html body.route-chat-index .chat-index-page .account-notifications-box {
    min-height: 330px !important;
    padding: 18px !important;
  }

  html body.route-chat-index .chat-index-page .account-feed-list {
    min-height: 160px !important;
    justify-content: flex-start !important;
  }

  html body.route-chat-index .chat-index-page .account-match-row {
    min-height: 0 !important;
    padding: 16px !important;
  }

  html body.route-chat-show .chat-show-page .chat-shell--messenger {
    min-height: calc(100svh - 175px) !important;
  }

  html body.route-chat-show .chat-show-page .chat-messenger {
    min-height: inherit !important;
    max-height: none !important;
  }

  html body.route-chat-show .chat-show-page .chat-thread {
    min-height: 260px !important;
    padding: 14px 12px 10px !important;
  }
}

/* Chat show: remove the oversized blank message area */
html body.route-chat-show .chat-show-page .chat-shell--messenger {
  min-height: 0 !important;
  height: auto !important;
}

html body.route-chat-show .chat-show-page .chat-messenger {
  min-height: 0 !important;
  height: auto !important;
  grid-template-rows: auto auto auto !important;
}

html body.route-chat-show .chat-show-page .chat-thread {
  min-height: clamp(260px, 34vh, 360px) !important;
  max-height: clamp(320px, 42vh, 460px) !important;
  overflow-y: auto !important;
}

html body.route-chat-show .chat-show-page .chat-thread > :first-child {
  margin-top: 0 !important;
}

html body.route-chat-show .chat-show-page .chat-composer {
  min-height: 84px !important;
}

@media (max-width: 900px) {
  html body.route-chat-show .chat-show-page .chat-thread {
    min-height: 240px !important;
    max-height: calc(100svh - 270px) !important;
  }
}

/* Chat show final sizing: fill the account column instead of ending early */
html body.route-chat-show .chat-show-page .chat-shell--messenger {
  height: clamp(620px, calc(100vh - 175px), 820px) !important;
  min-height: clamp(620px, calc(100vh - 175px), 820px) !important;
}

html body.route-chat-show .chat-show-page .chat-messenger {
  display: grid !important;
  height: 100% !important;
  min-height: 100% !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
}

html body.route-chat-show .chat-show-page .chat-thread {
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
  align-content: start !important;
  justify-content: flex-start !important;
}

html body.route-chat-show .chat-show-page .chat-thread > :first-child {
  margin-top: 0 !important;
}

html body.route-chat-show .chat-show-page .chat-composer {
  min-height: 92px !important;
  flex-shrink: 0 !important;
}

@media (max-width: 900px) {
  html body.route-chat-show .chat-show-page .chat-shell--messenger {
    height: calc(100svh - 165px) !important;
    min-height: 520px !important;
  }
}

/* Chat show: replace the empty white canvas with a warm message surface */
html body.route-chat-show .chat-show-page .chat-shell--messenger,
html body.route-chat-show .chat-show-page .chat-messenger {
  background: #f7efe2 !important;
}

html body.route-chat-show .chat-show-page .chat-thread {
  background:
    radial-gradient(circle at 18px 18px, rgba(184, 132, 42, 0.10) 0 1px, transparent 1.5px),
    linear-gradient(180deg, #fbf4e8 0%, #f6ecd9 100%) !important;
  background-size: 34px 34px, auto !important;
  border-top: 1px solid rgba(184, 132, 42, 0.14) !important;
  border-bottom: 1px solid rgba(184, 132, 42, 0.14) !important;
}

html body.route-chat-show .chat-show-page .chat-topbar,
html body.route-chat-show .chat-show-page .chat-composer {
  background: #fff8ed !important;
}

html body.route-chat-show .chat-show-page .chat-bubble {
  box-shadow: 0 8px 20px rgba(84, 55, 20, 0.08) !important;
}