/* ==========================================================================
   Alzahra Kulttuurikeskus — jaettu design-järjestelmä
   Pergamentti + syvä vihreä + patinoitu kulta + kaksoisvirta.
   Amiri / El Messiri / Reem Kufi. Lasipinta vain navissa ja jäsenpaneelissa.
   ========================================================================== */

:root{
  --paper:#F7F1E1; --paper-2:#FCF8ED; --paper-3:#EFE6CC;
  --ink:#16241C; --ink-soft:#3C4A3F; --ink-faint:#6B7568;
  --green-deep:#1E5631; --green-mid:#3F7A2E; --green-line:#2C6B41;
  --gold:#B8842A; --gold-bright:#D89A2E; --gold-ink:#7A5A1C;
  --primary-gold: var(--gold);
  --gold-on:#241705;
  --river:#2E7C99; --stone:#8B8A82;
  --line: rgba(22,36,28,0.14); --line-strong:rgba(22,36,28,0.24);
  --shadow: 0 18px 40px -20px rgba(22,36,28,0.35);
  --glass: color-mix(in srgb, var(--paper-2) 78%, transparent);
  --glass-border: color-mix(in srgb, var(--gold) 38%, var(--line));
  --blur: 16px;
  --radius: 16px;
  --header-h: 72px;
  --ease: cubic-bezier(.22,1,.36,1);

  --font-display:'Amiri', 'Noto Naskh Arabic', serif;
  --font-body:'El Messiri', 'Noto Kufi Arabic', sans-serif;
  --font-label:'Reem Kufi', 'Noto Kufi Arabic', sans-serif;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#0E1912; --paper-2:#152420; --paper-3:#1C2E27;
    --ink:#F3ECD8; --ink-soft:#CFC8B2; --ink-faint:#9C9684;
    --green-deep:#6FAE84; --green-mid:#8FC27A; --green-line:#4F8D69;
    --gold:#E4B44A; --gold-bright:#F3C868; --gold-ink:#F3D48A;
    --gold-on:#1A1408;
    --river:#6FC0DC; --stone:#9C9A8E;
    --line: rgba(243,236,216,0.16); --line-strong:rgba(243,236,216,0.28);
    --shadow: 0 18px 44px -18px rgba(0,0,0,0.6);
    --glass: color-mix(in srgb, var(--paper-2) 72%, transparent);
  }
}
:root[data-theme="dark"]{
  --paper:#0E1912; --paper-2:#152420; --paper-3:#1C2E27;
  --ink:#F3ECD8; --ink-soft:#CFC8B2; --ink-faint:#9C9684;
  --green-deep:#6FAE84; --green-mid:#8FC27A; --green-line:#4F8D69;
  --gold:#E4B44A; --gold-bright:#F3C868; --gold-ink:#F3D48A;
  --gold-on:#1A1408;
  --river:#6FC0DC; --stone:#9C9A8E;
  --line: rgba(243,236,216,0.16); --line-strong:rgba(243,236,216,0.28);
  --shadow: 0 18px 44px -18px rgba(0,0,0,0.6);
  --glass: color-mix(in srgb, var(--paper-2) 72%, transparent);
}
:root[data-theme="light"]{
  --paper:#F7F1E1; --paper-2:#FCF8ED; --paper-3:#EFE6CC;
  --ink:#16241C; --ink-soft:#3C4A3F; --ink-faint:#6B7568;
  --green-deep:#1E5631; --green-mid:#3F7A2E; --green-line:#2C6B41;
  --gold:#B8842A; --gold-bright:#D89A2E; --gold-ink:#7A5A1C;
  --gold-on:#241705;
  --river:#2E7C99; --stone:#8B8A82;
  --line: rgba(22,36,28,0.14); --line-strong:rgba(22,36,28,0.24);
  --shadow: 0 18px 40px -20px rgba(22,36,28,0.35);
  --glass: color-mix(in srgb, var(--paper-2) 78%, transparent);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
::selection{ background: color-mix(in srgb, var(--gold) 38%, transparent); color: var(--ink); }
:focus-visible{
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

body.az{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-body); line-height:1.65; -webkit-font-smoothing:antialiased;
}
.az img{ max-width:100%; display:block; }
.az .wrap{ max-width:920px; margin:0 auto; padding:0 20px; }
@media (max-width:520px){ .az .wrap{ padding:0 16px; } }

.az a{ color: inherit; }

.az h1,.az h2,.az h3,.az h4{
  font-family:var(--font-display); font-weight:700; color:var(--ink);
  text-wrap:balance; margin:0;
}

/* ---------------- Skip ---------------- */
.az .skip{
  position:absolute; left:12px; top:-48px; z-index:80;
  background:var(--gold); color:var(--gold-on);
  padding:8px 14px; border-radius:10px; font-family:var(--font-label); font-weight:700;
}
.az .skip:focus{ top:12px; }

/* ---------------- Buttons ---------------- */
.az .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-label); font-weight:700; letter-spacing:.02em; font-size:15px;
  padding:14px 22px; min-height:48px; border-radius:14px; border:none; cursor:pointer;
  text-decoration:none; transition: transform .15s var(--ease), box-shadow .2s ease, filter .2s ease, background .2s ease;
}
.az .btn:active{ transform:translateY(1px); }
.az .btn[disabled]{ opacity:.62; cursor:not-allowed; transform:none; }
.az .btn-gold{
  background:linear-gradient(160deg, var(--gold-bright), var(--gold));
  color:var(--gold-on);
  box-shadow: 0 14px 26px -12px color-mix(in srgb, var(--gold) 60%, transparent);
}
.az .btn-gold:hover{ filter:brightness(1.05); }
.az .btn-ghost{
  background: color-mix(in srgb, var(--paper-2) 55%, transparent);
  color: var(--paper-2);
  border: 1px solid color-mix(in srgb, var(--paper-2) 38%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.az .btn-ghost:hover{ border-color: var(--gold-bright); color: #fff; }
.az .btn-outline{
  background:transparent; color:var(--ink); border:1.5px solid var(--line-strong);
}
.az .btn-outline:hover{ border-color:var(--gold); color:var(--gold-ink); }
.az .btn-block{ width:100%; }

.az .tile{
  font-family:var(--font-label); font-size:13px; letter-spacing:.03em; font-weight:700;
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 14px; min-height:48px; border-radius:14px; border:1px solid var(--line-strong);
  background:var(--paper-2); color:var(--ink); text-decoration:none; cursor:pointer;
  transition: transform .2s var(--ease), box-shadow .2s ease, border-color .2s ease;
}
.az .tile:hover{ transform:translateY(-2px); border-color:var(--gold); }
.az .tile.gold{ background:linear-gradient(160deg, var(--gold-bright), var(--gold)); color:var(--gold-on); border-color:transparent; }
.az .tile.dark{ background:var(--green-deep); color:var(--paper); border-color:transparent; }

/* ---------------- Cards / glass ---------------- */
.az .card{
  background:var(--paper-2); border:1px solid var(--line); border-radius:20px;
  box-shadow:var(--shadow);
}
.az .card-pad{ padding:28px; }
@media (max-width:520px){ .az .card-pad{ padding:22px; } }

.az .glass{
  background: var(--glass);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--blur)) saturate(1.15);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(1.15);
  box-shadow: var(--shadow);
}

/* ---------------- Forms ---------------- */
.az input, .az textarea, .az select{
  font-family:var(--font-body); font-size:16px;
  border:1px solid var(--line-strong); padding:13px 14px; border-radius:12px;
  background:var(--paper); color:var(--ink); width:100%; outline:none;
  caret-color: var(--gold);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.az input:focus, .az textarea:focus, .az select:focus{
  border-color:var(--gold); box-shadow:0 0 0 3px color-mix(in srgb, var(--gold) 22%, transparent);
}
.az label{ display:block; font-family:var(--font-body); font-weight:600; margin-bottom:8px; color:var(--ink-soft); font-size:14.5px; }
.az .hp{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; border:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }

/* ---------------- Social ---------------- */
.az .social-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:48px; border-radius:50%; color:#fff; font-size:20px;
  transition: transform .2s var(--ease), box-shadow .2s ease;
}
.az .social-btn:hover{ transform:translateY(-3px); color:#fff; }
.az .bg-youtube{ background:#C4302B; }
.az .bg-instagram{ background:linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); }
.az .bg-facebook{ background:#1863C6; }

/* ---------------- Legacy bits still used elsewhere ---------------- */
.az .lattice{
  position:absolute; inset:0; opacity:0.05; pointer-events:none;
  background-image: repeating-conic-gradient(from 45deg, var(--ink) 0deg 90deg, transparent 90deg 180deg);
  background-size: 44px 44px;
}
.az .divider-rivers{ display:flex; flex-direction:column; gap:6px; padding:6px 0; opacity:.8; }
.az .divider-rivers svg{ width:100%; height:16px; display:block; }
.az .muted{ color:var(--ink-faint); }
.az .soft{ color:var(--ink-soft); }
.az .center{ text-align:center; }

/* ==========================================================================
   Homepage
   ========================================================================== */

.az-home{ padding-top: var(--header-h); }

.az-header{
  position:fixed; inset-inline:0; top:0; z-index:40; height:var(--header-h);
  display:flex; align-items:center;
  background: color-mix(in srgb, var(--paper) 42%, transparent);
  border-bottom: 1px solid transparent;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, backdrop-filter .2s ease;
}
.az-header.is-scrolled{
  background: var(--glass);
  border-bottom-color: var(--glass-border);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  box-shadow: 0 10px 28px -18px rgba(22,36,28,.45);
}
.az-header .bar{
  width:min(1120px, 100%); margin:0 auto; padding:0 20px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.az-brand{
  display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); min-width:0;
}
.az-brand img{
  width:40px; height:40px; border-radius:12px; object-fit:cover;
  border:1px solid color-mix(in srgb, var(--gold) 45%, var(--line));
}
.az-brand span{
  font-family:var(--font-label); font-weight:700; font-size:14px; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}
.az-header-actions{ display:flex; align-items:center; gap:8px; flex-shrink:0; }
.az-langs{ display:flex; padding:3px; border-radius:999px; border:1px solid var(--line-strong); background:var(--paper-2); }
.az-langs button{
  font-family:var(--font-label); font-weight:700; font-size:12px;
  border:0; background:transparent; color:var(--ink-soft);
  padding:8px 11px; border-radius:999px; cursor:pointer; min-height:36px;
}
.az-langs button[aria-pressed="true"]{ background:var(--green-deep); color:var(--paper-2); }
.az-header .btn{ padding:10px 16px; min-height:44px; font-size:13px; }
.az-header.is-on-field{
  background: transparent;
}
.az-header.is-on-field .az-brand{ color:#F3ECD8; }
.az-header.is-on-field .az-langs{
  background: color-mix(in srgb, #102318 50%, transparent);
  border-color: color-mix(in srgb, #F3ECD8 28%, transparent);
}
.az-header.is-on-field .az-langs button{ color:#EFE6CC; }
.az-header.is-on-field .az-langs button[aria-pressed="true"]{
  background:var(--gold); color:var(--gold-on);
}
@media (max-width:520px){
  .az-brand span{ display:none; }
}

.az-hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(ellipse 80% 70% at 80% 0%, color-mix(in srgb, var(--gold) 28%, transparent), transparent 58%),
    radial-gradient(ellipse 70% 80% at 0% 100%, color-mix(in srgb, var(--river) 22%, transparent), transparent 55%),
    linear-gradient(165deg, #143322 0%, var(--green-deep) 48%, #1a3d28 100%);
  color: #F3ECD8;
  padding: 48px 0 56px;
}
[dir="rtl"] .az-hero{
  background:
    radial-gradient(ellipse 80% 70% at 20% 0%, color-mix(in srgb, var(--gold) 28%, transparent), transparent 58%),
    radial-gradient(ellipse 70% 80% at 100% 100%, color-mix(in srgb, var(--river) 22%, transparent), transparent 55%),
    linear-gradient(195deg, #143322 0%, var(--green-deep) 48%, #1a3d28 100%);
}
.az-hero .stage{
  width:min(1120px, 100%); margin:0 auto; padding:0 20px;
  display:grid; gap:36px; align-items:center;
}
@media (min-width:900px){
  .az-hero{ padding: 56px 0 72px; }
  .az-hero .stage{ grid-template-columns: 1fr minmax(340px, 420px); gap:48px; }
}
.az-hero h1{ color:#F7F1E1; font-size:clamp(2.1rem, 5vw, 3.4rem); line-height:1.15; }
.az-hero .lead{ color: color-mix(in srgb, #F3ECD8 88%, transparent); font-size:1.15rem; max-width:38ch; margin:16px 0 0; }
.az-hero .place{ color: color-mix(in srgb, var(--gold-bright) 90%, #fff); font-family:var(--font-label); font-weight:700; font-size:13px; margin:0 0 10px; }
.az-hero .actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.az-hero .quiet-links{ display:flex; flex-wrap:wrap; gap:18px; margin-top:20px; }
.az-hero .quiet-links a{
  color: color-mix(in srgb, #F3ECD8 82%, transparent);
  font-family:var(--font-label); font-weight:700; font-size:13.5px; text-decoration:none;
  border-bottom:1px solid color-mix(in srgb, var(--gold) 45%, transparent);
  padding-bottom:2px;
}
.az-hero .quiet-links a:hover{ color:#fff; }

.az-logo{
  width:88px; height:88px; border-radius:22px; overflow:hidden; margin-bottom:22px;
  border:1px solid color-mix(in srgb, var(--gold) 55%, transparent);
  box-shadow: 0 16px 36px -16px rgba(0,0,0,.5);
}
.az-logo img{ width:100%; height:100%; object-fit:cover; }

.az-rivers{ width:min(280px, 70%); height:18px; margin:18px 0 0; overflow:visible; }
.az-rivers path{
  fill:none; stroke-width:1.7;
  stroke-dasharray: 420; stroke-dashoffset: 420;
}
.az-home.is-ready .az-rivers .gold{ stroke: var(--gold-bright); animation: river-draw .75s var(--ease) forwards; }
.az-home.is-ready .az-rivers .water{ stroke: var(--river); animation: river-draw .75s var(--ease) .12s forwards; }

@keyframes river-draw{
  to{ stroke-dashoffset: 0; }
}

.az-panel{
  border-radius: 22px;
  padding: 26px 24px 24px;
}
.az-panel h2{ font-size:1.55rem; margin-bottom:18px; color:var(--ink); }

.az-form{ display:grid; gap:14px; }
.az-form .row{ display:grid; gap:14px; }
@media (min-width:520px){ .az-form .row{ grid-template-columns:1fr 1fr; } }
.az-form .status{ text-align:center; font-weight:700; min-height:1.4em; }

.az-rest{ width:min(720px, 100%); margin:0 auto; padding:48px 20px 28px; display:grid; gap:28px; }
.az-pay{
  border-radius:20px; padding:26px;
  border:1px solid var(--line);
  background: var(--paper-2);
}
.az-pay h2{ font-size:1.45rem; margin-bottom:10px; }
.az-iban{
  margin:16px 0; padding:16px;
  border-radius:14px; border:1.5px dashed var(--gold);
  background: var(--paper);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px;
}
.az-iban strong{ font-family:var(--font-label); font-size:14px; }
.az-iban code{ font-family: ui-monospace, monospace; font-size:14px; letter-spacing:.02em; }
.az-copy{
  font-family:var(--font-label); font-weight:700; font-size:12px;
  border:1px solid var(--line-strong); background:var(--paper-2); color:var(--ink);
  border-radius:10px; padding:8px 12px; cursor:pointer; min-height:40px;
}
.az-copy:hover{ border-color:var(--gold); }
.az-mp{ background:#5A78FF; color:#fff; }
.az-mp:hover{ filter:brightness(1.06); color:#fff; }

.az-follow{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.az-follow p{ margin:0; font-family:var(--font-label); font-weight:700; }
.az-follow .row{ display:flex; gap:12px; }

.az-footer{
  padding: 28px 20px 48px; text-align:center;
  font-family:var(--font-label); font-size:12.5px; letter-spacing:.04em;
  color:var(--ink-faint);
}
.az-footer a{ color:var(--ink-soft); }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .az-rivers path, .az-home.is-ready .az-rivers path{
    animation:none; stroke-dashoffset:0;
  }
  .az .btn, .az .tile, .az-header, .az .social-btn{ transition:none; }
}

/* ==========================================================================
   Prayer times (/time)
   ========================================================================== */

body.az.az-time{
  padding: 0;
}
.az-time{
  padding-top: var(--header-h);
  padding-bottom: 0;
}
.az-time .main-wrapper{
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 0 40px;
  gap: 20px;
}
.az-time .sayegh-theme,
.az-time .events-container{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 20px !important;
  color: var(--ink) !important;
}
.az-time .sayegh-theme::before{ display:none !important; }

.az-time-hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(ellipse 80% 70% at 80% 0%, color-mix(in srgb, var(--gold) 28%, transparent), transparent 58%),
    linear-gradient(165deg, #143322 0%, var(--green-deep) 52%, #1a3d28 100%);
  color: #F3ECD8;
  padding: 28px 20px 32px;
  margin: 0 -20px 28px;
}
[dir="rtl"] .az-time-hero{
  background:
    radial-gradient(ellipse 80% 70% at 20% 0%, color-mix(in srgb, var(--gold) 28%, transparent), transparent 58%),
    linear-gradient(195deg, #143322 0%, var(--green-deep) 52%, #1a3d28 100%);
}
.az-time-hero .inner{ width:min(1120px,100%); margin:0 auto; text-align:center; }
.az-time-hero .s-location-title{
  color: color-mix(in srgb, var(--gold-bright) 88%, #fff) !important;
  font-family: var(--font-label) !important;
  font-size: 13px !important;
  letter-spacing: .04em;
  margin-bottom: 8px !important;
}
.az-time-hero .s-day-title{
  color: #F7F1E1 !important;
  font-family: var(--font-display) !important;
  font-size: clamp(2.5rem, 6vw, 3.6rem) !important;
  line-height: 1.1 !important;
  margin: 0 0 12px !important;
}
.az-time-hero .s-dates-container{
  margin-bottom: 0 !important;
  color: color-mix(in srgb, #F3ECD8 90%, transparent);
}
.az-time-hero .s-date-ar{ color:#F7F1E1 !important; font-family:var(--font-display) !important; }
.az-time-hero .s-date-en{ color: color-mix(in srgb, #F3ECD8 78%, transparent) !important; }
.az-time-hero .s-divider{ background: color-mix(in srgb, #F3ECD8 28%, transparent) !important; }

.az-time .s-toolbar{
  width:min(1120px,100%); margin: 0 auto 18px; padding: 0 20px;
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px;
}
.az-time .s-city-select{
  display:flex; align-items:center; gap:8px;
  color: var(--ink) !important;
  font-family: var(--font-label);
  font-weight: 700;
}
.az-time .s-city-select i{ color: var(--gold); }
.az-time .s-city-select select{
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  color: var(--ink) !important;
  background: var(--paper-2);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  padding: 10px 12px;
  min-height: 44px;
  cursor: pointer;
}
.az-time .s-top-actions{
  width:min(1120px,100%); margin: 0 auto 22px; padding: 0 20px;
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center;
}
.az-time .s-btn-outline,
.az-time .btn-home{
  font-family: var(--font-label);
  font-weight: 700;
  min-height: 44px;
  border-radius: 14px;
  padding: 10px 18px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.az-time .s-btn-outline{
  background: transparent;
  color: var(--gold-ink) !important;
  border: 1.5px solid var(--gold) !important;
}
.az-time .s-btn-outline:hover{ background: var(--gold) !important; color: var(--gold-on) !important; }
.az-time .btn-gold{
  background: linear-gradient(160deg, var(--gold-bright), var(--gold));
  color: var(--gold-on);
  border: none;
  border-radius: 14px;
  font-family: var(--font-label);
  font-weight: 700;
  padding: 10px 20px;
  min-height: 44px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.az-time .btn-gold:hover{ filter: brightness(1.05); color: var(--gold-on); }

.az-time .s-cards-grid{ margin-bottom: 28px; }
.az-time .s-card{
  background: var(--paper-2) !important;
  border: 1px solid var(--line) !important;
  border-radius: 20px !important;
  box-shadow: var(--shadow);
  padding: 24px 20px !important;
}
.az-time .s-card:hover{ transform: none; }
.az-time .s-icon{ color: var(--gold) !important; }
.az-time .s-card h3{ color: var(--ink) !important; font-family: var(--font-display) !important; }
.az-time .s-main-time{
  color: var(--gold-ink) !important;
  font-family: var(--font-display) !important;
  font-variant-numeric: tabular-nums;
}
.az-time .s-main-time.is-undef{
  font-size: 1.2rem !important;
  font-weight: 600 !important;
  color: var(--ink-faint) !important;
  letter-spacing: normal !important;
}
.az-time .s-row{ color: var(--ink-soft) !important; }
.az-time .s-row span:last-child{ color: var(--gold-ink) !important; font-variant-numeric: tabular-nums; }
.az-time .s-undef-link{ color: var(--gold-ink) !important; }
.az-time .s-card-note{
  margin-top: 14px; padding-top: 12px;
  border-top: 1px dashed var(--line);
  font-size: 0.78rem; line-height: 1.6; color: var(--ink-faint);
}

.az-time .s-rules-box{
  background: var(--paper-2) !important;
  border: 1px solid var(--line) !important;
  border-radius: 20px !important;
  padding: 22px !important;
  color: var(--ink);
}
.az-time .s-rules-box h4,
.az-time .events-container h3{
  color: var(--gold-ink) !important;
  font-family: var(--font-display) !important;
}
.az-time #today-event{
  background: color-mix(in srgb, var(--gold) 12%, var(--paper-2)) !important;
  border-radius: 12px;
}
.az-time .upcoming-event-row{ border-bottom-color: var(--line) !important; }

.az-time .az-donate{
  background: var(--paper);
  border: 1.5px dashed var(--gold);
  border-radius: 14px;
  padding: 16px;
  text-align: center;
  margin-bottom: 18px;
}
.az-time .az-donate i{ color: var(--gold); font-size: 22px; margin-bottom: 8px; }

.az-time .calendar-container{
  background: var(--paper) !important;
  color: var(--ink) !important;
}
.az-time .calendar-header h3{ color: var(--gold-ink) !important; font-family: var(--font-display) !important; }
.az-time #prev-month,
.az-time #next-month{
  background: var(--paper-3);
  color: var(--ink);
  border: 0;
  border-radius: 10px;
  min-width: 44px;
  min-height: 44px;
  cursor: pointer;
  font-size: 1.2rem;
}
.az-time .calendar-actions button{
  background: var(--gold) !important;
  color: var(--gold-on) !important;
  border-radius: 12px !important;
  font-family: var(--font-label);
  min-height: 44px;
}
.az-time #close-calendar-btn{ background: var(--green-deep) !important; color: var(--paper) !important; }
.az-time .s-calendar-table th{
  background: var(--green-deep) !important;
  color: var(--paper) !important;
  border-color: var(--green-deep) !important;
  font-family: var(--font-label);
}
.az-time .s-calendar-table td{ border-color: var(--line) !important; color: var(--ink-soft) !important; }
.az-time .s-calendar-table tr:nth-child(even){ background: var(--paper-2) !important; }
.az-time .s-calendar-table tr.today td{
  background: color-mix(in srgb, var(--gold) 16%, var(--paper)) !important;
  color: var(--gold-ink) !important;
}

.az-header .az-city{
  display:none;
}
@media (min-width:720px){
  .az-header .az-city{ display:flex; align-items:center; }
}

@media print{
  .az-header, .az-time-hero, .az-time .s-toolbar, .az-time .s-top-actions{ display:none !important; }
}

/* ==========================================================================
   Quran + kids
   ========================================================================== */

.az-quran, .az-kids{
  padding-top: var(--header-h);
}
.az-quran{ padding-bottom: calc(var(--player-h, 70px) + 24px); }

.az-band{
  background:
    radial-gradient(ellipse 80% 70% at 80% 0%, color-mix(in srgb, var(--gold) 28%, transparent), transparent 58%),
    linear-gradient(165deg, #143322 0%, var(--green-deep) 52%, #1a3d28 100%);
  color: #F3ECD8;
  padding: 28px 20px 32px;
  text-align: center;
}
[dir="rtl"] .az-band{
  background:
    radial-gradient(ellipse 80% 70% at 20% 0%, color-mix(in srgb, var(--gold) 28%, transparent), transparent 58%),
    linear-gradient(195deg, #143322 0%, var(--green-deep) 52%, #1a3d28 100%);
}
.az-band h1{
  color: #F7F1E1;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  line-height: 1.1;
}
.az-band p{
  margin: 10px 0 0;
  color: color-mix(in srgb, #F3ECD8 86%, transparent);
  font-size: 1.05rem;
}
.az-band .quiet-links{ margin-top: 16px; display:flex; flex-wrap:wrap; gap:16px; justify-content:center; }
.az-band .quiet-links a{
  color: #F3ECD8;
  font-family: var(--font-label);
  font-weight: 700;
  font-size: 13.5px;
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
}

.az-quran .card,
.az-quran .surah-card{
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
}
.az-quran .surah-card{ padding: 14px 16px; cursor: pointer; }
.az-quran .surah-num-pill{
  background: color-mix(in srgb, var(--gold) 16%, var(--paper));
  color: var(--ink);
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  padding: 5px 12px;
  font-family: var(--font-label);
  font-weight: 700;
}
.az-quran .title-gold{ color: var(--gold-ink); }
.az-quran .btn{
  background: linear-gradient(160deg, var(--gold-bright), var(--gold));
  color: var(--gold-on);
  border: none;
  border-radius: 14px;
  font-family: var(--font-label);
  font-weight: 700;
  padding: 10px 16px;
  min-height: 44px;
  cursor: pointer;
}
.az-quran .btn-ghost, .az-quran .icon-btn{
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  cursor: pointer;
  min-height: 40px;
  font-family: var(--font-label);
}
.az-quran input, .az-quran select{
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  padding: 12px 14px;
  width: 100%;
  font-family: var(--font-body);
  font-size: 16px;
}
.az-quran input:focus, .az-quran select:focus{
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 22%, transparent);
}
.az-quran .player{
  position: fixed; inset-inline: 0; bottom: 0; z-index: 50;
  height: var(--player-h, 70px);
  background: var(--glass);
  border-top: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
}
.az-quran .player-inner{
  height: 100%; display: flex; align-items: center; gap: 8px;
  padding: 0 16px; max-width: 1120px; margin: 0 auto;
}
.az-quran .nowtitle{ color: var(--gold-ink); font-weight: 700; }
.az-quran .ayah-row{
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  margin-bottom: 10px;
}
.az-quran .ayah-active{
  border-color: var(--gold) !important;
  background: color-mix(in srgb, var(--gold) 10%, var(--paper-2)) !important;
}
.az-quran .ayah-num{
  background: color-mix(in srgb, var(--gold) 16%, var(--paper));
  width: 40px; height: 40px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-label); font-weight: 700;
}
.az-quran .ayah-text{
  font-family: 'Scheherazade New', 'Amiri', serif;
  font-size: 1.6rem; line-height: 2.4rem;
}
.az-quran .modal-card{ background: var(--paper-2); color: var(--ink); border: 1px solid var(--line); }
.az-quran .modal-header{ border-bottom: 1px solid var(--line); }
.az-quran .backdrop{ background: rgba(22,36,28,0.55); backdrop-filter: blur(6px); }
.az-quran #modalBody{ background: var(--paper) !important; }

.az-kids-feature{
  display: block;
  padding: 28px 24px;
  border-radius: 22px;
  background: var(--paper-2);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow);
  text-decoration: none;
  color: inherit;
}
.az-kids-feature h2{
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  color: var(--ink);
  margin-bottom: 8px;
}
.az-kids-list{ display: grid; gap: 10px; margin-top: 16px; }
.az-kids-row{
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 18px; min-height: 72px;
  border-radius: 16px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
}
.az-kids-row h3{ font-size: 1.2rem; }
.az-kids-row p{ margin: 2px 0 0; font-size: 0.9rem; color: var(--ink-soft); }
.az-kids .btn-pill{
  font-family: var(--font-label);
  font-weight: 700;
  color: var(--gold-ink);
}