/* ==========================================================================
   GeoShia.com — design tokens from "GeoShia Home v2" (data-mode theming)
   ========================================================================== */

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg)}

[data-mode="normal"]{
  --bg:#F5F1E6; --surface:#FFFFFF; --surface-2:#FBF7EC; --ink:#16241C; --muted:#5C6A60;
  --brand:#0E6B4F; --brand-2:#0A4A37; --brand-soft:rgba(14,107,79,.10);
  --gold:#B08529; --gold-2:#E3C77A; --gold-soft:rgba(176,133,41,.12);
  --maroon:#8E2A22; --line:rgba(20,40,30,.12);
  --ink-dark:#0C1512; --on-dark:#EFEAD9; --on-dark-mut:rgba(239,234,217,.66);
  --shadow:0 20px 54px -28px rgba(13,52,38,.42); --shadow-sm:0 8px 24px -16px rgba(13,52,38,.35);
  --hero:radial-gradient(110% 80% at 88% -15%, rgba(227,199,122,.36), transparent 52%),radial-gradient(100% 90% at -5% 105%, rgba(14,107,79,.14), transparent 58%),linear-gradient(180deg,#F8F3E6,#F0E9D7);
}
[data-mode="muharram"]{
  --bg:#08090B; --surface:#101116; --surface-2:#14151B; --ink:#ECE7DA; --muted:#8E867B;
  --brand:#2C7158; --brand-2:#173B2E; --brand-soft:rgba(44,113,88,.16);
  --gold:#B69245; --gold-2:#CBA753; --gold-soft:rgba(182,146,69,.14);
  --maroon:#A02A2A; --line:rgba(255,255,255,.09);
  --ink-dark:#050608; --on-dark:#E6E0D2; --on-dark-mut:rgba(230,224,210,.6);
  --shadow:0 24px 64px -30px rgba(0,0,0,.85); --shadow-sm:0 10px 30px -18px rgba(0,0,0,.7);
  --hero:radial-gradient(110% 80% at 88% -15%, rgba(160,42,42,.22), transparent 52%),radial-gradient(100% 90% at -5% 105%, rgba(44,113,88,.16), transparent 58%),linear-gradient(180deg,#0A0B0E,#070809);
}

@keyframes ghFadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes ghTwinkle{0%,100%{opacity:.5;transform:scale(.85)}50%{opacity:1;transform:scale(1.12)}}
@keyframes ghGlow{0%,100%{filter:drop-shadow(0 0 0 rgba(227,199,122,0))}50%{filter:drop-shadow(0 0 11px rgba(227,199,122,.6))}}
@keyframes ghShine{0%{transform:translateX(-120%) skewX(-18deg)}55%,100%{transform:translateX(280%) skewX(-18deg)}}
@keyframes ghDrop{0%{transform:translateY(-10px) scaleY(.7);opacity:0}10%{opacity:.85}82%{opacity:.8}100%{transform:translateY(108vh) scaleY(1.1);opacity:0}}
@keyframes ghSway{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}

/* Shahadat (martyr) profile theme — blood/maroon */
[data-shaheed="1"]{
  --bg:#0c0606; --surface:#160a0a; --surface-2:#1d0d0d; --ink:#f3e3e1; --muted:#b98c89;
  --brand:#8E2A22; --brand-2:#5d1614; --brand-soft:rgba(160,42,42,.16);
  --gold:#C09A4B; --gold-2:#E3C77A; --line:rgba(255,180,180,.12);
}

/* Helper utility classes used by Blade partials */
.gh-wrap{max-width:1240px;margin:0 auto;padding-left:30px;padding-right:30px}
a{color:inherit}
[x-cloak]{display:none!important}

/* ---- Compatibility helper classes (mapped to design tokens) ---- */
.font-latin{font-family:'Plus Jakarta Sans',sans-serif}
.font-arabic{font-family:'Amiri','Noto Naskh Arabic',serif}
.font-urdu{font-family:'Noto Nastaliq Urdu',serif}
.bg-theme{background-color:var(--bg)}
.bg-theme-section{background-color:var(--surface-2)}
.bg-theme-card{background-color:var(--surface)}
.text-theme{color:var(--ink)}
.text-theme-mid{color:var(--muted)}
.text-green{color:var(--brand)}
.bg-green{background-color:var(--brand)}
.bg-green-dark{background-color:var(--brand-2)}
.text-gold{color:var(--gold)}
.bg-gold{background-color:var(--gold)}
.border-theme{border-color:var(--line)}
.card{background-color:var(--surface);border:1px solid var(--line);border-radius:18px;transition:transform .18s,box-shadow .18s,background-color .5s}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm)}
.btn{display:inline-flex;align-items:center;gap:.4rem;padding:.6rem 1.15rem;border-radius:999px;font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:.9rem;transition:all .18s;cursor:pointer;text-decoration:none}
.btn-primary{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;border:none}
.btn-primary:hover{filter:brightness(1.08)}
.btn-gold{background:var(--gold);color:#16241C;border:none}
.btn-gold:hover{background:var(--gold-2)}
.btn-outline{border:1.5px solid var(--brand);color:var(--brand);background:transparent}
.btn-outline:hover{background:var(--brand);color:#fff}
.verified-badge{display:inline-flex;vertical-align:middle}
.verified-badge svg{width:1.05em;height:1.05em}
.verified-badge .vb-tick{transform-origin:center;animation:ghGlow 2.6s ease-in-out infinite}
.status-dot{width:.55rem;height:.55rem;border-radius:9999px;display:inline-block}
.status-alive{background:#35b06a;box-shadow:0 0 0 3px rgba(53,176,106,.18)}
.status-deceased{background:#9a9a9a}

/* ---- Blood drops (Muharram + shaheed) ---- */
.blood-layer{position:fixed;inset:0;pointer-events:none;z-index:60;display:none;overflow:hidden}
[data-mode="muharram"] .blood-layer,[data-shaheed="1"] .blood-layer{display:block}
.blood-drop{position:absolute;top:0;width:5px;height:15px;border-radius:0 0 60% 60%;background:linear-gradient(var(--maroon),#4d0f0f)}
@media (prefers-reduced-motion:reduce){.blood-layer{display:none!important}}

/* ---- RTL Support (Urdu / Arabic) ---- */
[dir="rtl"] { text-align: right; }
[dir="rtl"] .gh-wrap { direction: rtl; }
[dir="rtl"] nav { direction: rtl; }
[dir="rtl"] .gh-nav-links { flex-direction: row-reverse; }
[dir="rtl"] .gh-hero-text { text-align: right; }
[dir="rtl"] input, [dir="rtl"] textarea, [dir="rtl"] select { text-align: right; direction: rtl; }
[dir="rtl"] .gh-card { text-align: right; }
[dir="rtl"] .gh-footer { direction: rtl; }
[dir="rtl"] .ms-auto { margin-right: auto; margin-left: 0; }
[dir="rtl"] .me-auto { margin-left: auto; margin-right: 0; }

/* Video modal overlay — centering lives in this class (NOT inline) because Alpine x-show
   clears the inline `display` property when it reveals the element, which would wipe an
   inline `display:flex` and leave the modal top-left aligned. With flex in the class,
   x-show only toggles inline display:none (hide) vs cleared (show → class flex applies). */
.gh-video-overlay{display:flex;align-items:center;justify-content:center;overflow:auto;}