/* ============================================================
   NAMAZ VAXTI v4.0 — Light Theme + Fixed Dropdown
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700&family=Nunito:wght@400;600;700;800&display=swap');

:root {
  --nv-bg:         #f0f7f2;
  --nv-surface:    #ffffff;
  --nv-surface2:   #f5faf6;
  --nv-border:     rgba(26,74,46,0.10);
  --nv-gd:         #1a4a2e;   /* dark green */
  --nv-gm:         #2d7a4f;   /* mid green  */
  --nv-gl:         #3daa6e;   /* light green*/
  --nv-gp:         #d4f0e0;   /* pale green */
  --nv-gold:       #b5800a;
  --nv-gold-bg:    #fef9ec;
  --nv-text:       #1a2e1f;
  --nv-text-mid:   #3d5a45;
  --nv-text-dim:   #7a9a82;
  --nv-sky:        #e8f5fe;
  --nv-r:          16px;
  --nv-sh:         0 2px 16px rgba(26,74,46,0.10);
  --nv-shl:        0 8px 36px rgba(26,74,46,0.16);
  --nv-font:       'Nunito', sans-serif;
  --nv-fh:         'Cinzel', serif;
}

/* ── WRAPPER ── */
.nv-wrap {
  width:100%; max-width:1100px;
  margin:0 auto 28px; padding:0 12px;
  box-sizing:border-box;
}
.nv-home { width:100%; }

/* ── H2 ── */
.nv-h2 {
  font-family:var(--nv-fh);
  font-size:clamp(0.92rem,2vw,1.22rem);
  color:var(--nv-gd); text-align:center;
  margin:0 0 14px; padding:12px 16px;
  background:linear-gradient(135deg,var(--nv-gold-bg),#fff);
  border:1px solid rgba(181,128,10,0.18);
  border-radius:10px; line-height:1.4; font-weight:600;
}

/* ════════════════════════════════════════
   CITY SELECTOR BAR
   Styled to match site header dropdown look
   (dark green bg, white text, contained width)
════════════════════════════════════════ */
.nv-selector-bar {
  display:flex; align-items:center; justify-content:center;
  flex-wrap:wrap; gap:12px;
  padding:12px 24px;
  max-width:560px; margin:0 auto 24px;
  background:#1a4a2e;
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.08);
  box-shadow:0 4px 18px rgba(0,0,0,0.22);
}
.nv-sel-label {
  display:flex; align-items:center; gap:6px;
  color:#c8f0d8; font-family:var(--nv-font);
  font-size:0.80rem; font-weight:700;
  letter-spacing:1px; text-transform:uppercase;
  white-space:nowrap;
}

/* The <select> button */
.nv-sel {
  background:#1a4a2e;
  border:1.5px solid rgba(255,255,255,0.22);
  color:#ffffff;
  padding:9px 38px 9px 14px;
  border-radius:6px;
  font-family:var(--nv-font); font-size:0.93rem; font-weight:600;
  cursor:pointer; appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7'%3E%3Cpath d='M0 0l5.5 7L11 0z' fill='%23c8f0d8'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 13px center;
  min-width:210px; max-width:270px;
  transition:background-color 0.18s, border-color 0.18s;
}
.nv-sel:hover,
.nv-sel:focus {
  background-color:#245f3a;
  border-color:rgba(255,255,255,0.45);
  outline:none;
}

/* Option items inside the native dropdown */
/* Native select hidden — replaced by custom dropdown via JS */
.nv-sel { display:none !important; }

/* ── CUSTOM DROPDOWN ── */
.nv-dd {
  position: relative;
  min-width: 220px;
  max-width: 280px;
  font-family: var(--nv-font);
  user-select: none;
}
.nv-dd-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: #245f3a;
  border: 1.5px solid rgba(255,255,255,0.25);
  color: #ffffff;
  padding: 10px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.93rem;
  font-weight: 600;
  transition: background 0.18s, border-color 0.18s;
  white-space: nowrap;
  overflow: hidden;
}
.nv-dd-btn:hover { background:#2d7a4f; border-color:rgba(255,255,255,0.5); }
.nv-dd-btn svg { flex-shrink:0; transition: transform 0.2s; }
.nv-dd.open .nv-dd-btn svg { transform: rotate(180deg); }

.nv-dd-list {
  display: none;
  position: absolute;
  top: calc(100% + 5px);
  left: 0; right: 0;
  background: #1a4a2e;
  border: 1.5px solid rgba(255,255,255,0.18);
  border-radius: 8px;
  overflow: hidden;
  z-index: 9999;
  box-shadow: 0 8px 32px rgba(0,0,0,0.35);
  max-height: 280px;
  overflow-y: auto;
}
.nv-dd.open .nv-dd-list { display: block; }

/* Scrollbar styling */
.nv-dd-list::-webkit-scrollbar { width: 5px; }
.nv-dd-list::-webkit-scrollbar-track { background: #1a4a2e; }
.nv-dd-list::-webkit-scrollbar-thumb { background: #3daa6e; border-radius: 10px; }

.nv-dd-item {
  padding: 10px 16px;
  color: #ffffff;
  font-size: 0.90rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.nv-dd-item:last-child { border-bottom: none; }
.nv-dd-item:hover {
  background: #ffffff;
  color: #1a4a2e;
  font-weight: 700;
}
.nv-dd-item.selected {
  background: #3daa6e;
  color: #ffffff;
  font-weight: 800;
}

@media(max-width:540px){
  .nv-dd { min-width:100%; max-width:100%; }
}

/* ════════════════════════════════════════
   CARDS BLOCK
════════════════════════════════════════ */
.nv-cards-block {
  background:var(--nv-surface); border-radius:var(--nv-r);
  padding:20px 16px 18px; box-shadow:var(--nv-sh);
  border:1px solid var(--nv-border);
}

/* Top bar */
.nv-topbar {
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:8px; margin-bottom:16px;
  padding-bottom:14px; border-bottom:1px solid var(--nv-border);
}
.nv-city-tag {
  display:flex; align-items:center; gap:5px;
  font-family:var(--nv-font); font-size:0.76rem;
  font-weight:700; color:var(--nv-gm);
  letter-spacing:1px; text-transform:uppercase;
}
.nv-clock {
  font-family:var(--nv-font);
  font-size:clamp(1.4rem,3.5vw,1.9rem);
  font-weight:900; color:var(--nv-gd);
  letter-spacing:2px; font-variant-numeric:tabular-nums;
}
.nv-datestr {
  font-family:var(--nv-font); font-size:0.70rem;
  color:var(--nv-text-dim); font-weight:600;
  text-align:right; line-height:1.6;
}

/* Cards grid */
.nv-grid {
  display:grid; grid-template-columns:repeat(5,1fr); gap:10px;
}
@media(max-width:900px){ .nv-grid{grid-template-columns:repeat(3,1fr);} }
@media(max-width:540px){ .nv-grid{grid-template-columns:1fr 1fr;} }

/* Single card */
.nv-card {
  background:var(--nv-surface); border:1.5px solid var(--nv-border);
  border-radius:14px; padding:18px 10px 16px;
  text-align:center; position:relative; overflow:hidden;
  box-shadow:0 1px 8px rgba(26,74,46,0.07);
  transition:transform .28s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease, border-color .22s ease;
  opacity:0; animation:nv-in .5s cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes nv-in{from{opacity:0;transform:translateY(16px) scale(.94)}to{opacity:1;transform:translateY(0) scale(1)}}
.nv-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--nv-gl),#a8e8c8,var(--nv-gl));opacity:0;transition:opacity .2s;}
.nv-card:hover{transform:translateY(-7px) scale(1.03);box-shadow:var(--nv-shl);border-color:rgba(45,122,79,.22);}
.nv-card:hover::before{opacity:1;}
.nv-card.nv-passed{opacity:.38;filter:grayscale(.3);}
.nv-card.nv-passed:hover{transform:translateY(-3px);opacity:.55;}
.nv-card.nv-active{background:linear-gradient(150deg,var(--nv-gp) 0%,#edfaf3 100%);border-color:rgba(45,122,79,.38);box-shadow:0 0 0 3px rgba(61,170,110,.12),var(--nv-shl);transform:translateY(-4px) scale(1.04);opacity:1!important;filter:none!important;}
.nv-card.nv-active::before{opacity:1;}
.nv-card.nv-active:hover{transform:translateY(-9px) scale(1.06);}

.nv-active-tag{display:none;position:absolute;top:8px;right:8px;background:var(--nv-gm);color:#fff;font-family:var(--nv-font);font-size:.52rem;font-weight:900;letter-spacing:1px;text-transform:uppercase;padding:2px 8px;border-radius:50px;}
.nv-card.nv-active .nv-active-tag{display:inline-block;}

.nv-card-icon{font-size:1.5rem;margin-bottom:6px;display:block;filter:saturate(.7);transition:filter .2s,transform .2s;}
.nv-card:hover .nv-card-icon{filter:saturate(1.1);transform:scale(1.1);}
.nv-card.nv-active .nv-card-icon{filter:saturate(1.2);}
.nv-card-name{font-family:var(--nv-fh);font-size:clamp(.75rem,1.5vw,.95rem);font-weight:700;color:var(--nv-text);margin-bottom:2px;}
.nv-card.nv-active .nv-card-name{color:var(--nv-gd);}
.nv-card-sub{font-family:var(--nv-font);font-size:.58rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--nv-text-dim);margin-bottom:12px;}
.nv-card.nv-active .nv-card-sub{color:var(--nv-gm);}
.nv-card-time{font-family:var(--nv-font);font-size:clamp(1.4rem,2.5vw,1.9rem);font-weight:900;color:var(--nv-gd);letter-spacing:-.5px;margin-bottom:10px;font-variant-numeric:tabular-nums;line-height:1;}
.nv-card.nv-active .nv-card-time{color:var(--nv-gm);}
.nv-card-div{width:24px;height:1.5px;background:var(--nv-border);margin:0 auto 10px;border-radius:10px;transition:width .3s,background .3s;}
.nv-card.nv-active .nv-card-div{width:40px;background:var(--nv-gl);}
.nv-countdown{display:inline-flex;align-items:center;gap:4px;font-family:var(--nv-font);font-size:.65rem;font-weight:700;padding:4px 10px;border-radius:50px;background:var(--nv-surface2);color:var(--nv-text-dim);border:1px solid var(--nv-border);}
.nv-card.nv-active .nv-countdown{background:var(--nv-gp);color:var(--nv-gm);border-color:rgba(45,122,79,.25);animation:nv-pulse 2s ease-in-out infinite;}
@keyframes nv-pulse{0%,100%{box-shadow:0 0 0 0 rgba(45,122,79,.25)}50%{box-shadow:0 0 0 5px rgba(45,122,79,0)}}
.nv-cd-dot{width:5px;height:5px;border-radius:50%;background:currentColor;display:none;animation:nv-blink 1s ease infinite;}
.nv-card.nv-active .nv-cd-dot{display:inline-block;}
@keyframes nv-blink{0%,100%{opacity:1}50%{opacity:.15}}
.nv-prog{margin-top:10px;height:3px;background:var(--nv-border);border-radius:10px;overflow:hidden;display:none;}
.nv-card.nv-active .nv-prog{display:block;}
.nv-prog-fill{height:100%;border-radius:10px;background:linear-gradient(90deg,var(--nv-gl),#8ae0b4);transition:width 60s linear;}

/* ════════════════════════════════════════
   TABLE BLOCK
════════════════════════════════════════ */
.nv-table-block{background:var(--nv-surface);border-radius:var(--nv-r);overflow:hidden;box-shadow:var(--nv-sh);border:1px solid var(--nv-border);}
.nv-table-ctrl{background:linear-gradient(135deg,var(--nv-gd),#0f3520);padding:14px 20px;display:flex;align-items:center;justify-content:center;gap:14px;}
.nv-mbtn{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);color:#fff;width:32px;height:32px;border-radius:50%;cursor:pointer;font-size:1rem;display:inline-flex;align-items:center;justify-content:center;transition:background .2s,transform .2s;}
.nv-mbtn:hover{background:rgba(255,255,255,.28);transform:scale(1.1);}
.nv-mlabel{font-family:var(--nv-fh);font-size:.9rem;color:#fff;min-width:140px;text-align:center;letter-spacing:1px;}
.nv-table-body{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.nv-ptable{width:100%;border-collapse:collapse;min-width:580px;font-family:var(--nv-font);}
.nv-ptable thead tr{background:linear-gradient(135deg,#1a4a2e,#0f3520);}
.nv-ptable thead th{padding:11px 8px;color:rgba(255,255,255,.82);font-size:.72rem;font-weight:800;letter-spacing:.6px;text-align:center;text-transform:uppercase;white-space:nowrap;border-bottom:2px solid rgba(212,168,83,.22);}
.nv-ptable thead th:first-child{color:#f0d080;}
.nv-ptable tbody tr{background:var(--nv-surface);border-bottom:1px solid rgba(26,74,46,.06);transition:background .12s;}
.nv-ptable tbody tr:nth-child(even){background:var(--nv-surface2);}
.nv-ptable tbody tr:hover{background:var(--nv-sky);}
.nv-ptable tbody tr.nv-today{background:linear-gradient(90deg,#d4f5e2,#edfdf4)!important;border-left:3px solid var(--nv-gl);}
.nv-ptable tbody tr.nv-today td{font-weight:800;color:var(--nv-gd);}
.nv-ptable td{padding:9px 8px;text-align:center;font-size:.84rem;color:var(--nv-text-mid);font-variant-numeric:tabular-nums;white-space:nowrap;}
.nv-ptable td:first-child{color:var(--nv-text-dim);font-weight:700;font-size:.78rem;}
.nv-ptable .col-fajr{background:rgba(254,249,236,.6);}
.nv-ptable .col-makruh{background:rgba(224,242,254,.5);font-size:.79rem;}
.nv-today-tag{display:inline-block;background:var(--nv-gm);color:#fff;font-size:.55rem;padding:1px 6px;border-radius:50px;margin-left:4px;font-weight:900;vertical-align:middle;}

/* ── LOADING / ERROR ── */
.nv-loading{display:flex;align-items:center;justify-content:center;padding:40px;grid-column:1/-1;}
.nv-spin{display:inline-block;width:26px;height:26px;border:3px solid var(--nv-border);border-top-color:var(--nv-gm);border-radius:50%;animation:nv-rot .7s linear infinite;}
@keyframes nv-rot{to{transform:rotate(360deg)}}
.nv-error{background:#fff5f5;border:1px solid #fca5a5;border-radius:10px;padding:16px;text-align:center;color:#c0392b;font-family:var(--nv-font);font-size:.82rem;font-weight:700;grid-column:1/-1;}

/* ── SEO para ── */
.nv-seo-p{margin-top:20px;padding:14px 18px;background:var(--nv-gold-bg);border:1px solid rgba(181,128,10,.15);border-radius:10px;font-family:var(--nv-font);font-size:.82rem;color:var(--nv-text-mid);line-height:1.8;}
.nv-seo-p strong{color:var(--nv-gd);}

/* ── Fade in ── */
.nv-fade{animation:nv-fi .35s ease forwards;}
@keyframes nv-fi{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

/* ── Responsive ── */
@media(max-width:900px){
  .nv-grid .nv-card:nth-child(4){grid-column:1;}
  .nv-grid .nv-card:nth-child(5){grid-column:2;}
}
@media(max-width:540px){
  .nv-grid .nv-card:nth-child(5){grid-column:1/-1;max-width:180px;margin:0 auto;width:100%;}
  .nv-topbar{flex-direction:column;text-align:center;}
  .nv-datestr{text-align:center;}
  .nv-selector-bar{max-width:100%;flex-direction:column;padding:14px;}
  .nv-sel{min-width:100%;max-width:100%;}
  .nv-h2{font-size:.88rem;}
  .nv-card-time{font-size:1.4rem;}
}
@media(max-width:360px){
  .nv-card{padding:14px 8px 12px;}
  .nv-card-time{font-size:1.2rem;}
}

/* ════════════════════════════════════════
   v5 — 4-STATE CARDS
   nv-state-upcoming / active / warning / expired
════════════════════════════════════════ */

/* UPCOMING — default look, override old classes */
.nv-card.nv-state-upcoming { opacity:1; filter:none; }

/* ACTIVE — green glow (same as old nv-active) */
.nv-card.nv-state-active {
  background:linear-gradient(150deg,var(--nv-gp) 0%,#edfaf3 100%);
  border-color:rgba(45,122,79,.38);
  box-shadow:0 0 0 3px rgba(61,170,110,.12),var(--nv-shl);
  transform:translateY(-4px) scale(1.04);
  opacity:1!important; filter:none!important;
}
.nv-card.nv-state-active::before { opacity:1; }
.nv-card.nv-state-active:hover { transform:translateY(-9px) scale(1.06); }
.nv-card.nv-state-active .nv-active-tag { display:inline-block; }
.nv-card.nv-state-active .nv-card-name  { color:var(--nv-gd); }
.nv-card.nv-state-active .nv-card-sub   { color:var(--nv-gm); }
.nv-card.nv-state-active .nv-card-time  { color:var(--nv-gm); }
.nv-card.nv-state-active .nv-card-div   { width:40px; background:var(--nv-gl); }
.nv-card.nv-state-active .nv-countdown  {
  background:var(--nv-gp); color:var(--nv-gm);
  border-color:rgba(45,122,79,.25);
  animation:nv-pulse 2s ease-in-out infinite;
}
.nv-card.nv-state-active .nv-cd-dot     { display:inline-block; }
.nv-card.nv-state-active .nv-prog       { display:block; }
.nv-card.nv-state-active .nv-prog-fill  {
  background:linear-gradient(90deg,var(--nv-gl),#8ae0b4);
}

/* WARNING — orange/amber pulse, time running out! */
.nv-card.nv-state-warning {
  background:linear-gradient(150deg,#fff8e6 0%,#fffbf0 100%);
  border-color:rgba(211,136,0,.45);
  box-shadow:0 0 0 3px rgba(211,136,0,.10),var(--nv-shl);
  transform:translateY(-4px) scale(1.04);
  opacity:1!important; filter:none!important;
}
.nv-card.nv-state-warning::before {
  opacity:1;
  background:linear-gradient(90deg,#f59e0b,#fde68a,#f59e0b);
}
.nv-card.nv-state-warning .nv-active-tag {
  display:inline-block;
  background:#d97706;
  animation:nv-warn-blink 0.8s ease-in-out infinite;
}
@keyframes nv-warn-blink{0%,100%{opacity:1}50%{opacity:.4}}
.nv-card.nv-state-warning .nv-card-name  { color:#92400e; }
.nv-card.nv-state-warning .nv-card-time  { color:#b45309; }
.nv-card.nv-state-warning .nv-card-div   { width:40px; background:#f59e0b; }
.nv-card.nv-state-warning .nv-countdown  {
  background:#fef3c7; color:#b45309;
  border-color:rgba(217,119,6,.35);
  animation:nv-warn-pulse 1s ease-in-out infinite;
}
@keyframes nv-warn-pulse{0%,100%{box-shadow:0 0 0 0 rgba(245,158,11,.3)}50%{box-shadow:0 0 0 6px rgba(245,158,11,0)}}
.nv-dot-warn { display:inline-block!important; background:#f59e0b!important; }
.nv-card.nv-state-warning .nv-prog { display:block; }
.nv-card.nv-state-warning .nv-prog-fill {
  background:linear-gradient(90deg,#f59e0b,#fcd34d);
}

/* EXPIRED — greyed out, muted */
.nv-card.nv-state-expired {
  opacity:0.35;
  filter:grayscale(0.5);
  background:var(--nv-surface2);
  border-color:rgba(26,74,46,.06);
  transform:none;
}
.nv-card.nv-state-expired:hover {
  opacity:0.5;
  transform:translateY(-2px);
  filter:grayscale(0.2);
}
.nv-card.nv-state-expired .nv-card-time  { color:var(--nv-text-dim); }
.nv-card.nv-state-expired .nv-countdown  {
  background:transparent; color:var(--nv-text-dim);
  border-color:transparent; font-style:italic;
}

/* ════════════════════════════════════════
   PRINT / DOWNLOAD BUTTON
════════════════════════════════════════ */
.nv-table-actions {
  padding:12px 16px 8px;
  display:flex;
  justify-content:flex-end;
}
.nv-print-btn {
  background:linear-gradient(135deg,var(--nv-gd),var(--nv-gm));
  color:#fff;
  border:none;
  padding:9px 18px;
  border-radius:8px;
  font-family:var(--nv-font);
  font-size:0.82rem;
  font-weight:700;
  cursor:pointer;
  letter-spacing:0.3px;
  transition:opacity .2s, transform .2s;
  box-shadow:0 2px 8px rgba(26,74,46,.25);
}
.nv-print-btn:hover {
  opacity:0.88;
  transform:translateY(-1px);
}

/* Table scroll wrapper */
.nv-table-scroll {
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

/* ════════════════════════════════════════
   RAMADAN MODULE — v1.0
════════════════════════════════════════ */

/* ── Homepage Widget ── */
.nv-ram-widget {
  background: linear-gradient(135deg, #0d2e1a 0%, #1a4a2e 60%, #2d7a4f 100%);
  border-radius: 18px;
  padding: 20px 24px;
  color: #fff;
  box-shadow: 0 8px 32px rgba(13,46,26,0.30);
  border: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 24px;
}

.nv-ram-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}

.nv-ram-moon { font-size: 1.3rem; }

.nv-ram-title {
  font-family: var(--nv-font);
  font-size: 0.90rem;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  flex: 1;
}

.nv-ram-title strong { color: #fff; font-weight: 800; }

.nv-ram-day {
  font-family: var(--nv-font);
  font-size: 0.78rem;
  font-weight: 700;
  color: rgba(255,255,255,0.70);
  display: flex;
  align-items: center;
  gap: 6px;
}

.nv-ram-badge {
  background: rgba(201,151,42,0.22);
  border: 1px solid rgba(201,151,42,0.40);
  color: #e8bb5a;
  padding: 2px 8px;
  border-radius: 50px;
  font-size: 0.72rem;
  font-weight: 700;
}

.nv-ram-times {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  align-items: center;
}

.nv-ram-time-box {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  padding: 14px 12px;
  text-align: center;
}

.nv-ram-icon { font-size: 1.4rem; margin-bottom: 4px; display: block; }

.nv-ram-label {
  font-family: var(--nv-font);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-bottom: 4px;
}

.nv-ram-val {
  font-family: var(--nv-font);
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  font-weight: 900;
  color: #fff;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.5px;
}

.nv-ram-sehri .nv-ram-val { color: #fcd34d; }
.nv-ram-iftar .nv-ram-val  { color: #86efac; }

.nv-ram-countdown-wrap {
  text-align: center;
  padding: 0 8px;
}

.nv-ram-cd-label {
  font-family: var(--nv-font);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin-bottom: 4px;
}

.nv-ram-cd {
  font-family: var(--nv-font);
  font-size: clamp(1.1rem, 2.5vw, 1.5rem);
  font-weight: 900;
  color: #c9972a;
  font-variant-numeric: tabular-nums;
  letter-spacing: 1px;
  animation: nv-ram-pulse 2s ease-in-out infinite;
}

@keyframes nv-ram-pulse {
  0%,100% { opacity: 1; }
  50%      { opacity: 0.65; }
}

.nv-ram-cd.nv-ram-opened {
  color: #86efac;
  animation: none;
  font-size: 1rem;
}

.nv-ram-footer {
  margin-top: 14px;
  text-align: center;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.10);
}

.nv-ram-link {
  display: inline-block;
  font-family: var(--nv-font);
  font-size: 0.82rem;
  font-weight: 700;
  color: #e8bb5a;
  text-decoration: none;
  padding: 8px 20px;
  border: 1px solid rgba(201,151,42,0.40);
  border-radius: 8px;
  background: rgba(201,151,42,0.10);
  transition: background 0.2s, color 0.2s;
}

.nv-ram-link:hover {
  background: rgba(201,151,42,0.25);
  color: #fff;
}

/* ── Off-season message ── */
.nv-ram-off { padding: 20px; }
.nv-ram-off-msg {
  text-align: center;
  font-family: var(--nv-font);
  font-size: 0.90rem;
  color: rgba(255,255,255,0.70);
  padding: 16px;
  background: rgba(255,255,255,0.06);
  border-radius: 10px;
}

/* ── Full Page Today Card ── */
.nv-ram-page { width: 100%; }

.nv-ram-today-wrap {
  margin: 0 0 28px;
}

.nv-ram-today-card {
  background: linear-gradient(135deg, #0d2e1a 0%, #1a4a2e 100%);
  border-radius: 20px;
  padding: 24px 20px 20px;
  color: #fff;
  box-shadow: 0 12px 40px rgba(13,46,26,0.30);
  border: 1px solid rgba(255,255,255,0.08);
}

.nv-ram-today-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  font-family: var(--nv-font);
  font-size: 0.88rem;
  font-weight: 700;
  color: rgba(255,255,255,0.75);
}

.nv-ram-today-date {
  background: rgba(201,151,42,0.18);
  border: 1px solid rgba(201,151,42,0.35);
  color: #e8bb5a;
  padding: 3px 12px;
  border-radius: 50px;
  font-size: 0.78rem;
}

.nv-ram-today-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  gap: 16px;
  align-items: center;
}

.nv-ram-today-box {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 14px;
  padding: 18px 12px;
  text-align: center;
}

.nv-ram-today-icon { font-size: 1.8rem; margin-bottom: 6px; display: block; }

.nv-ram-today-lbl {
  font-family: var(--nv-font);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.50);
  margin-bottom: 6px;
}

.nv-ram-today-time {
  font-family: var(--nv-font);
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 900;
  color: #fff;
  font-variant-numeric: tabular-nums;
  letter-spacing: -1px;
}

/* Sehri gold, Iftar green */
.nv-ram-today-grid > .nv-ram-today-box:first-child .nv-ram-today-time { color: #fcd34d; }
.nv-ram-today-grid > .nv-ram-today-box:last-child  .nv-ram-today-time { color: #86efac; }

/* Center countdown box */
.nv-ram-today-center {
  background: rgba(201,151,42,0.10);
  border-color: rgba(201,151,42,0.25);
  padding: 20px 10px;
}

.nv-ram-cd-big-lbl {
  font-family: var(--nv-font);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin-bottom: 6px;
}

.nv-ram-cd-big {
  font-family: var(--nv-font);
  font-size: clamp(1.3rem, 3.5vw, 2rem);
  font-weight: 900;
  color: #c9972a;
  font-variant-numeric: tabular-nums;
  letter-spacing: 2px;
  animation: nv-ram-pulse 2s ease-in-out infinite;
  margin-bottom: 10px;
}

.nv-ram-cd-big.nv-ram-opened {
  color: #86efac;
  animation: none;
  font-size: 1rem;
}

.nv-ram-cd-bar-wrap {
  height: 4px;
  background: rgba(255,255,255,0.10);
  border-radius: 10px;
  overflow: hidden;
  margin-top: 6px;
}

.nv-ram-cd-bar {
  height: 100%;
  background: linear-gradient(90deg, #c9972a, #e8bb5a);
  border-radius: 10px;
  transition: width 1s linear;
}

/* ── Ramadan Table special columns ── */
.nv-ram-table .nv-ram-im  { color: #b45309; font-weight: 700; }
.nv-ram-table .nv-ram-ift { color: #1a4a2e; font-weight: 700; }
.nv-ram-table .nv-ram-dur { color: #7a9a82; font-size: 0.80rem; }
.nv-ram-table tr.nv-today .nv-ram-im  { color: #92400e !important; }
.nv-ram-table tr.nv-today .nv-ram-ift { color: #0f3520 !important; }

/* ── Responsive ── */
@media (max-width: 600px) {
  .nv-ram-times         { grid-template-columns: 1fr; gap: 10px; }
  .nv-ram-today-grid    { grid-template-columns: 1fr; gap: 10px; }
  .nv-ram-countdown-wrap { order: -1; }
  .nv-ram-today-center  { order: -1; }
  .nv-ram-today-time    { font-size: 1.8rem; }
  .nv-ram-cd-big        { font-size: 1.4rem; }
}

@media (max-width: 400px) {
  .nv-ram-today-card    { padding: 16px 12px; }
  .nv-ram-widget        { padding: 14px 12px; }
}

/* ════════════════════════════════════════
   v5.2 — MOBILE RESPONSIVE FIXES
   Cards, table, dropdown all devices
════════════════════════════════════════ */

/* ── Cards: better mobile grid ── */
@media (max-width: 768px) {
  .nv-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }
}

@media (max-width: 520px) {
  .nv-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 7px !important;
  }
  /* 5th card (Isha) full width centered on mobile */
  .nv-grid .nv-card:last-child {
    grid-column: 1 / -1 !important;
    max-width: 200px !important;
    margin: 0 auto !important;
  }
  .nv-card { padding: 14px 8px 12px !important; }
  .nv-card-time { font-size: 1.3rem !important; }
  .nv-card-name { font-size: 0.75rem !important; }
  .nv-card-sub  { font-size: 0.55rem !important; }
  .nv-card-icon { font-size: 1.2rem !important; }
}

@media (max-width: 360px) {
  .nv-card-time { font-size: 1.1rem !important; }
  .nv-clock     { font-size: 1.3rem !important; }
}

/* ── Topbar mobile ── */
@media (max-width: 600px) {
  .nv-topbar {
    flex-direction: column !important;
    text-align: center !important;
    gap: 4px !important;
  }
  .nv-datestr { text-align: center !important; }
  .nv-city-tag { justify-content: center !important; }
}

/* ── Selector bar mobile ── */
@media (max-width: 600px) {
  .nv-selector-bar {
    flex-direction: column !important;
    padding: 12px 14px !important;
    gap: 8px !important;
    max-width: 100% !important;
  }
  .nv-dd,
  .nv-dd-btn {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .nv-dd-list {
    left: 0 !important;
    right: 0 !important;
    max-height: 240px !important;
  }
}

/* ── Table mobile ── */
@media (max-width: 768px) {
  .nv-table-scroll {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .nv-ptable {
    min-width: 520px !important;
    font-size: 0.78rem !important;
  }
  .nv-ptable td,
  .nv-ptable th { padding: 7px 5px !important; }

  /* Hide makruh column on small screens */
  .col-makruh { display: none !important; }

  .nv-table-ctrl { padding: 10px 14px !important; }
  .nv-mlabel { font-size: 0.80rem !important; }
}

@media (max-width: 480px) {
  .nv-ptable { min-width: 380px !important; font-size: 0.73rem !important; }
  .nv-ptable td,
  .nv-ptable th { padding: 6px 4px !important; }
  .col-fajr { display: none !important; }
}

/* ── H2 headings mobile ── */
@media (max-width: 600px) {
  .nv-h2 {
    font-size: 0.82rem !important;
    padding: 10px 12px !important;
  }
}

/* ── Table actions mobile ── */
@media (max-width: 480px) {
  .nv-table-actions { padding: 8px 10px !important; }
  .nv-print-btn {
    font-size: 0.75rem !important;
    padding: 7px 12px !important;
  }
}

/* ── Ramadan widget mobile ── */
@media (max-width: 540px) {
  .nv-ram-times {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .nv-ram-countdown-wrap {
    grid-column: 1 / -1 !important;
    order: -1 !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    border-radius: 12px !important;
    padding: 10px !important;
    background: rgba(255,255,255,0.05) !important;
  }
  .nv-ram-today-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .nv-ram-today-center {
    grid-column: 1 / -1 !important;
    order: -1 !important;
  }
}

/* ── Wrap padding mobile ── */
@media (max-width: 520px) {
  .nv-wrap { padding: 0 6px !important; }
  .nv-cards-block { padding: 14px 10px 12px !important; }
  .nv-table-block { border-radius: 10px !important; }
}

/* ════════════════════════════════════════
   DROPDOWN Z-INDEX FIX
   Ensure dropdown always shows above table
════════════════════════════════════════ */
.nv-dd { position: relative; z-index: 100; }
.nv-dd-list { z-index: 9999 !important; }

/* Dropdown button full width on mobile inside selector bar */
@media (max-width: 600px) {
  .nv-selector-bar .nv-dd { width: 100% !important; }
  .nv-selector-bar .nv-dd-btn { width: 100% !important; box-sizing: border-box !important; }
}

/* ════════════════════════════════════════
   INTERLINKING CITY BUTTONS
   For Other Cities page — city cards below tool
════════════════════════════════════════ */
.nv-city-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  margin: 28px 0 8px;
}

.nv-city-card-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 16px 10px;
  background: var(--nv-surface);
  border: 1.5px solid var(--nv-border);
  border-radius: 14px;
  text-decoration: none !important;
  color: var(--nv-text) !important;
  font-family: var(--nv-font);
  font-size: 0.88rem;
  font-weight: 700;
  text-align: center;
  box-shadow: 0 2px 10px rgba(26,74,46,0.07);
  transition: all 0.22s ease;
  cursor: pointer;
}

.nv-city-card-btn:hover {
  background: var(--nv-green-pale, #d4f0e0);
  border-color: rgba(45,122,79,0.35);
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(26,74,46,0.14);
  color: var(--nv-gd, #1a4a2e) !important;
}

.nv-city-card-btn .nv-ccb-icon {
  font-size: 1.6rem;
}

.nv-city-card-btn .nv-ccb-name {
  font-family: var(--nv-fh);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--nv-gd);
}

.nv-city-card-btn .nv-ccb-sub {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--nv-text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

@media (max-width: 480px) {
  .nv-city-cards-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .nv-city-card-btn { padding: 12px 8px !important; }
}

/* ════════════════════════════════════════
   v5.3 — MOBILE TABLE: CARD LAYOUT
   On mobile, each row becomes a card
════════════════════════════════════════ */
@media (max-width: 600px) {

  /* Hide normal table headers */
  .nv-ptable thead { display: none !important; }

  /* Table itself full width, no min-width */
  .nv-ptable {
    min-width: unset !important;
    width: 100% !important;
    font-size: 0.85rem !important;
    border-collapse: separate !important;
    border-spacing: 0 6px !important;
  }

  /* Each row = a card */
  .nv-ptable tbody tr {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 0 !important;
    background: var(--nv-surface) !important;
    border: 1.5px solid var(--nv-border) !important;
    border-radius: 12px !important;
    padding: 10px 8px !important;
    margin-bottom: 6px !important;
    box-shadow: 0 1px 6px rgba(26,74,46,0.07) !important;
    position: relative !important;
  }

  /* Today row highlight */
  .nv-ptable tbody tr.nv-today {
    background: linear-gradient(90deg,#d4f5e2,#edfdf4) !important;
    border-color: rgba(61,170,110,0.40) !important;
    border-left: 3px solid var(--nv-gl) !important;
  }

  /* All cells */
  .nv-ptable td {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 4px 2px !important;
    border: none !important;
    text-align: center !important;
    font-size: 0.80rem !important;
    white-space: normal !important;
  }

  /* Label above each cell using data-label */
  .nv-ptable td::before {
    content: attr(data-label) !important;
    display: block !important;
    font-size: 0.55rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase !important;
    color: var(--nv-text-dim) !important;
    margin-bottom: 2px !important;
  }

  /* Date cell — full row on top */
  .nv-ptable td:first-child {
    grid-column: 1 / -1 !important;
    flex-direction: row !important;
    justify-content: center !important;
    gap: 8px !important;
    padding-bottom: 6px !important;
    border-bottom: 1px solid var(--nv-border) !important;
    margin-bottom: 4px !important;
    font-size: 0.88rem !important;
    font-weight: 800 !important;
    color: var(--nv-gd) !important;
  }

  .nv-ptable td:first-child::before { display: none !important; }

  /* Imsak, Subh, Makruh, Zohr, Asr, Maghrib, Isha */
  .nv-ptable td:nth-child(2)  { color: #b45309 !important; font-weight: 700 !important; } /* Imsak */
  .nv-ptable td:nth-child(3)  { color: var(--nv-gm) !important; }  /* Subh */
  .nv-ptable td:nth-child(4)  { font-size: 0.70rem !important; color: #6b7280 !important; } /* Makruh */
  .nv-ptable td:nth-child(5)  { font-weight: 700 !important; }     /* Zohr */
  .nv-ptable td:nth-child(6)  { font-weight: 700 !important; }     /* Asr */
  .nv-ptable td:nth-child(7)  { color: #d97706 !important; font-weight: 700 !important; }  /* Maghrib */
  .nv-ptable td:nth-child(8)  { color: var(--nv-gd) !important; font-weight: 700 !important; }   /* Isha */

  /* Time value styling */
  .nv-ptable td span.nv-t {
    font-size: 1.05rem !important;
    font-weight: 900 !important;
    font-variant-numeric: tabular-nums !important;
  }

  /* Hide makruh on very small screens */
  .nv-ptable td.col-makruh { display: none !important; }

  /* Ramadan table mobile */
  .nv-ram-table tbody tr {
    grid-template-columns: auto 1fr 1fr 1fr !important;
  }

  /* Print button full width */
  .nv-table-actions { justify-content: stretch !important; }
  .nv-print-btn { width: 100% !important; text-align: center !important; }

  /* Scroll wrapper — no overflow needed on mobile with cards */
  .nv-table-scroll { overflow-x: unset !important; }
}

/* ════════════════════════════════════════
   v5.3 — CARD ENTRANCE ANIMATION
   Subtle reveal on page load
════════════════════════════════════════ */
.nv-card {
  opacity: 0;
  transform: translateY(20px);
  animation: nv-card-enter 0.55s cubic-bezier(0.34, 1.4, 0.64, 1) forwards;
}

@keyframes nv-card-enter {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Stagger each card */
.nv-grid .nv-card:nth-child(1) { animation-delay: 0.05s; }
.nv-grid .nv-card:nth-child(2) { animation-delay: 0.12s; }
.nv-grid .nv-card:nth-child(3) { animation-delay: 0.19s; }
.nv-grid .nv-card:nth-child(4) { animation-delay: 0.26s; }
.nv-grid .nv-card:nth-child(5) { animation-delay: 0.33s; }

/* Cards block itself fades in */
.nv-cards-block {
  animation: nv-block-enter 0.4s ease forwards;
}
@keyframes nv-block-enter {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Topbar clock area slides in */
.nv-topbar {
  animation: nv-topbar-enter 0.35s ease forwards;
}
@keyframes nv-topbar-enter {
  from { opacity: 0; }
  to   { opacity: 1; }
}