/* ============================================================
   Tiba Karbala — colour themes (html[data-theme=...]) + picker UI
   Base palette (navy-gold) lives in style.css :root.
   ============================================================ */

/* 1) زمردي — أخضر داكن + زمردي */
:root[data-theme="emerald"] {
  --navy: #053b23; --navy-2: #075334; --navy-3: #0a7a4d;
  --gold: #34e0a1; --gold-dark: #0b8f61; --gold-ink: #0a6f4a;
  --ink: #0e2a1e; --muted: #4f6b5e; --bg: #f0f9f4; --card: #ffffff; --line: #d7ece1;
}

/* 2) محيطي — أزرق ليلي + سماوي */
:root[data-theme="ocean"] {
  --navy: #062a45; --navy-2: #083e63; --navy-3: #0b5c92;
  --gold: #4cc3ff; --gold-dark: #0a72b8; --gold-ink: #0a659c;
  --ink: #0d2436; --muted: #4c6478; --bg: #eef6fc; --card: #ffffff; --line: #d5e6f2;
}

/* 3) غروب — فحمي + برتقالي */
:root[data-theme="sunset"] {
  --navy: #211c19; --navy-2: #2e2723; --navy-3: #4a3d34;
  --gold: #ff8a3d; --gold-dark: #d1580f; --gold-ink: #a34b08;
  --ink: #241d18; --muted: #6c5f55; --bg: #faf5f0; --card: #ffffff; --line: #eee1d6;
}

/* 4) ملكي — نيلي + بنفسجي */
:root[data-theme="royal"] {
  --navy: #1e1840; --navy-2: #2a2160; --navy-3: #3b2f8a;
  --gold: #b69cff; --gold-dark: #6a49cc; --gold-ink: #5b39b8;
  --ink: #1c1836; --muted: #5b557e; --bg: #f5f3fc; --card: #ffffff; --line: #e4e0f3;
}

/* 5) فاتح (Paper) — أبيض + قرمزي للقراءة المريحة نهارًا */
:root[data-theme="paper"] {
  --navy: #1f2937; --navy-2: #27354a; --navy-3: #3b4c66;
  --gold: #dc2626; --gold-dark: #b91c1c; --gold-ink: #b01b1b;
  --ink: #17202a; --muted: #566273; --bg: #f7f8fa; --card: #ffffff; --line: #e4e8ee;
}
:root[data-theme="paper"] .btn-gold { color: #fff; }
:root[data-theme="paper"] .btn-gold:hover { background: #991b1b; color: #fff; }
:root[data-theme="paper"] .stat b { color: #f87171; }
:root[data-theme="paper"] .kicker { color: var(--gold-ink); }
:root[data-theme="paper"] .login-body { background: linear-gradient(150deg, var(--navy), var(--navy-3)); }
/* Paper: the crimson accent is only legible on light surfaces, so dark bands
   (header, hero, stats, footer, contact card) switch to a light red (AA 5.3:1). */
:root[data-theme="paper"] .main-nav a.active,
:root[data-theme="paper"] .hero .kicker,
:root[data-theme="paper"] .site-footer a:hover,
:root[data-theme="paper"] .info-item a:hover,
:root[data-theme="paper"] .info-card h3 { color: #f87171; }

/* Text-on-accent safety for bright accents used as buttons (emerald/ocean/royal) */
:root[data-theme="emerald"] .btn-gold { color: #04321e; }
:root[data-theme="ocean"] .btn-gold { color: #05273e; }
:root[data-theme="royal"] .btn-gold { color: #1e1840; }

/* Focus visibility everywhere (readability on all devices) */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--gold); outline-offset: 2px;
}

/* ---------- Theme picker (reader-facing, floating) ---------- */
.theme-fab-wrap { position: fixed; bottom: 24px; inset-inline-start: 24px; z-index: 70; }
.theme-fab {
  width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--gold); font-size: 1.35rem; box-shadow: 0 12px 30px rgba(0,0,0,.3);
  transition: transform .2s;
}
.theme-fab:hover { transform: scale(1.08); }
.theme-panel {
  position: absolute; bottom: 64px; inset-inline-start: 0; width: 240px;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 22px 60px rgba(0,0,0,.28); padding: 14px; animation: pop .18s ease;
}
.theme-panel[hidden] { display: none; }
@keyframes pop { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.theme-panel-title { font-weight: 800; font-size: .88rem; color: var(--navy); margin-bottom: 10px; }
.theme-options { display: flex; flex-direction: column; gap: 6px; }
.theme-option {
  display: flex; align-items: center; gap: 10px; background: var(--bg); border: 1.5px solid transparent;
  border-radius: 10px; padding: 9px 11px; cursor: pointer; font: inherit; text-align: start;
  transition: border-color .15s, background .15s;
}
.theme-option:hover { border-color: var(--gold); }
.theme-option.active { border-color: var(--gold); background: var(--card); box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.theme-option .swatches { display: inline-flex; }
.theme-option .swatches i {
  width: 17px; height: 17px; border-radius: 50%; display: inline-block; border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,.18);
}
.theme-option .swatches i:first-child { margin-inline-end: -6px; }
.theme-name { font-weight: 700; font-size: .86rem; color: var(--ink); }

/* ---------- Google Map ---------- */
.map-wrap { margin-top: 46px; text-align: center; }
.map-title { color: var(--navy); font-size: 1.25rem; margin-bottom: 16px; }
.map-box {
  position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
  aspect-ratio: 16 / 9; background: var(--bg);
}
.map-box iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.map-caption { color: var(--muted); font-size: .9rem; margin-top: 12px; }
.map-open { margin-top: 10px; }
.map-open a { font-weight: 700; color: var(--gold-ink); }
.map-open a:hover { text-decoration: underline; }
@media (max-width: 700px) { .map-box { aspect-ratio: 4 / 3; } }

/* ---------- Social buttons ---------- */
.social-row { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.social-label { font-size: .85rem; color: inherit; opacity: .85; font-weight: 700; }
.social-btn {
  width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.1); color: #fff; transition: background .2s, transform .2s;
}
.social-btn svg { width: 19px; height: 19px; }
.social-btn:hover { background: var(--gold); color: var(--navy); transform: translateY(-2px); }
.info-card .social-btn { background: rgba(255,255,255,.12); }
.site-footer .social-row { margin-top: 6px; }