/*
VERSIONING NOTE
Format: major.minor.patch.build

major = big redesign, breaking change, architecture shift
minor = new feature or visible enhancement
patch = bug fix, polish, small non-breaking tweak
build = small iteration within same release line

File: cards.css
Version: 2.0.17.0.1
Purpose: Card styles for Home Prayer Timetable — moon, weather, fasting, prayer rows
*/

.moonCard,
.weatherCard,
.fastingCard,
.pRow{
  position:relative;
  border-radius:18px;
  overflow:hidden;
  border:1px solid var(--cardBorder);
}

.moonCard,
.weatherCard{
  box-shadow:var(--shadowMoon);
  background:
    radial-gradient(900px 160px at 15% 10%, rgba(99,102,241,.12), transparent 55%),
    radial-gradient(900px 160px at 85% 20%, rgba(37,99,235,.08), transparent 55%),
    linear-gradient(135deg, rgba(15,23,42,.03), rgba(255,255,255,.24));
  margin:5px 0 7px;
}

.moonInner,
.weatherInner{
  position:relative;
  z-index:2;
  padding:10px 14px;
}

.moonSplit{
  display:grid;
  grid-template-columns: 1.35fr .65fr;
  gap:12px;
  align-items:center;
}


.moonCol{
  min-width:0;
}

.moonColLeft{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding-right:14px;
  border-right:1px solid rgba(15,23,42,.10);
}

.moonColRight{
  display:flex;
  flex-direction:column;
  gap:6px;
  justify-content:center;
  padding-left:2px;
}

.moonProgress{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:6px;
  margin-top:6px;
}
.moonPct{
  font-size:11px;
  font-weight:850;
  color:rgba(15,23,42,.72);
}

.weatherMetricLine{
  font-size:11px;
  font-weight:900;
  color:rgba(15,23,42,.78);
  line-height:1.15;
  white-space:nowrap;
}


.moonTop,
.weatherTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

.moonLeft,
.weatherMain{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
  flex:1 1 auto;
}

.moonBadge{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  font-size:32px;
  flex:0 0 auto;
  /* no background — emoji displayed directly on card surface */
}

.weatherEmoji{
  width:46px;
  height:46px;
  border-radius:16px;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.93);
  border:1px solid rgba(15,23,42,.10);
  box-shadow:0 10px 20px rgba(15,23,42,.08);
  font-size:21px;
  flex:0 0 auto;
}

.moonLabelWrap,
.weatherText{
  min-width:0;
}

.moonName{
  font-weight:950;
  letter-spacing:.2px;
  font-size:17px;
  line-height:1.1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.moonSub,
.weatherSub{
  margin-top:4px;
  color:rgba(15,23,42,.68);
  font-size:12.8px;
  font-weight:850;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.weatherTitle{
  font-weight:950;
  letter-spacing:.2px;
  font-size:15px;
  line-height:1.1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.weatherTemp{
  font-size:20px;
  font-weight:950;
  color:rgba(15,23,42,.86);
  white-space:nowrap;
  flex:0 0 auto;
}

.weatherMeta{
  margin-top:12px;
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  font-size:13px;
  font-weight:900;
  color:rgba(15,23,42,.76);
}

.sectionDivider{
  height:1px;
  margin:14px 2px 14px;
  background:linear-gradient(90deg,
    rgba(15,23,42,0),
    rgba(15,23,42,.12),
    rgba(15,23,42,0));
}

.pRow{
  box-shadow:var(--shadowCard);
  background:var(--card);
  margin:4px 0;
}

.pBg{
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:9px;
  z-index:1;
}

.bg-fajr{ background:linear-gradient(180deg, var(--fajr), #224b9c); }
.bg-dhuhr{ background:linear-gradient(180deg, var(--dhuhr), #a97808); }
.bg-asr{ background:linear-gradient(180deg, var(--asr), #547032); }
.bg-mughrib{ background:linear-gradient(180deg, var(--mughrib), #9f5325); }
.bg-isha{ background:linear-gradient(180deg, var(--isha), #24427f); }

.pRow.active{
  box-shadow:0 20px 42px rgba(15,23,42,.12), 0 6px 14px rgba(15,23,42,.06);
}

.pInner{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:24px minmax(0, 1fr) auto;
  grid-template-areas:
    "name name time"
    "left status time";
  align-items:center;
  padding:8px 14px 8px 14px;
  gap:2px 10px;
}

.pInnerActive{
  display:grid;
  /* Time is now inline in the name row — no dedicated right column needed */
  grid-template-columns:58px minmax(0, 1fr);
  grid-template-areas:
    "name name"
    "left status";
  align-items:center;
  gap:4px 10px;
  padding:10px 14px 12px 4px;
}

/* Active card: right column removed — suppress .pRight so it doesn't get auto-placed */
.pInnerActive .pRight{
  display:none;
}

.pLeft{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  flex:0 0 auto;
  width:24px;
}

/* Vertical progress bar — replaces the old icon capsule */
.pLeftVBar{
  flex-direction:row;
  align-items:center;
  justify-content:flex-start;
  gap:5px;
  width:58px;
}

.pLeftSpacer{
  width:24px;
}

.vProgress{
  display:flex;
  flex-direction:column;
  gap:2px;
  align-items:center;
  justify-content:center;
}

.vSeg{
  width:14px;
  height:3px;
  border-radius:2px;
  background:rgba(36,48,24,.15);
  flex:0 0 auto;
  transition:background .3s;
}

.vSeg.is-on{
  background:rgba(36,48,24,.70);
  box-shadow:0 0 4px rgba(36,48,24,.25);
}

.vSeg.is-pulse{
  animation:vSegPulse 0.85s ease-in-out infinite;
}

.vSeg.is-complete{
  background:rgba(36,48,24,.80);
}

@keyframes vSegPulse{
  0%, 100%{
    background:rgba(36,48,24,.35);
    box-shadow:none;
  }
  50%{
    background:rgba(36,48,24,1);
    box-shadow:0 0 4px 1px rgba(36,48,24,.30);
  }
}

.pName{
  font-weight:950;
  letter-spacing:.2px;
  font-size:18px;
  text-transform:uppercase;
}

.pTime{
  font-variant-numeric:tabular-nums;
  font-weight:950;
  letter-spacing:.2px;
  font-size:20px;
  white-space:nowrap;
  text-align:right;
  width:100%;
}

.pRight{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  justify-content:center;
  min-width:0;
  width:auto;
  flex:0 0 auto;
}

.pRightActive{
  min-width:180px;
  width:180px;
  align-items:flex-end;
}

.pTimeSub{
  margin-top:0;
  font-size:11px;
  font-weight:850;
  color:rgba(15,23,42,.72);
  white-space:nowrap;
  text-align:left;
  display:inline-flex;
  align-items:center;
  gap:3px;
}

.pRightActive .pTime{
  width:100%;
  text-align:right;
}

.pRightActive .pTimeSub{
  width:150px;
  align-self:flex-end;
  text-align:left;
}

.detail{
  position:relative;
  z-index:2;
  padding:10px 12px 16px 18px;
  display:none;
}

.active .detail{ display:block; }

@media (min-width: 900px){
  .pInner{
    grid-template-columns:24px minmax(0, 1fr) 220px;
    grid-template-areas:
      "name name time"
      "left status time";
    gap:6px 12px;
  }

  /* pInnerActive keeps its 2-column layout at all sizes */
  .pInnerActive{
    gap:6px 12px;
  }

  .pRightActive{
    min-width:220px;
    width:220px;
  }

  .pRightActive .pTimeSub{
    width:190px;
  }}

.meta{
  margin-top:4px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
  color:rgba(15,23,42,.72);
  font-size:13px;
  font-weight:850;
}

.metaCenter{
  justify-content:center;
}

.countdownBlock{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:0;
  text-align:left;
}

.countdownInline{
  flex:0 0 auto;
  min-width:0;
}

.countdownPct{
  font-size:12px;
  font-weight:950;
  color:rgba(15,23,42,.82);
  line-height:1;
}

.countdownTime{
  font-size:11px;
  font-weight:850;
  color:rgba(15,23,42,.75);
  line-height:1.1;
}

.ringWrap{
  position:relative;
  width:64px;
  height:42px;
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
}

.ringSvg{
  width:64px;
  height:30px;
  overflow:visible;
  display:block;
}

.ringTrack{
  fill:none;
  stroke:var(--ring-track);
  stroke-linecap:round;
}

.ringFill{
  fill:none;
  stroke:var(--ring-fill);
  stroke-linecap:round;
  transition:stroke-dashoffset .6s ease;
}

.ringText{
  margin-top:2px;
  font-size:12px;
  font-weight:950;
  color:rgba(15,23,42,.82);
  letter-spacing:-.2px;
  line-height:1;
  text-align:center;
}

.ringPct{
  font-size:.7em;
  margin-left:1px;
}

.footer{
  padding:12px 14px 14px;
  border-top:1px solid rgba(15,23,42,.08);
  text-align:center;
  background:rgba(255,255,255,.78);
  box-shadow:0 -1px 0 rgba(255,255,255,.7);
}

.fTitle{
  font-weight:950;
  font-size:13px;
  letter-spacing:.15px;
  margin-bottom:0;
  color:rgba(30,41,59,.88);
}

#footerSrv{
  display:none !important;
  height:0 !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
}

.fStatusBtn{
  border:none;
  background:transparent;
  padding:0;
  margin:0;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}

.fStatus{
  font-weight:900;
  font-size:12.5px;
  color:rgba(15,23,42,.72);
}

.err{
  display:none;
  padding:12px 16px;
  margin:12px;
  border-radius:14px;
  white-space:pre-wrap;
  background:#fff1f2;
  color:#881337;
  border:1px solid #fecdd3;
  box-shadow:var(--shadowCard);
}

@media (max-width:390px){
  .moonName{ font-size:16px; }
  .pName{ font-size:17px; }
  .pTime{ font-size:18px; }
  .weatherTemp{ font-size:18px; }
}


.pNameTop{
  grid-area:name;
  font-weight:950;
  letter-spacing:.2px;
  font-size:17px;
  line-height:1.0;
  align-self:center;
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:nowrap;
}

.pLeft{
  grid-area:left;
}

.countdownInline{
  grid-area:status;
  justify-self:center;
  min-width:0;
}

.pRight{
  grid-area:time;
}

.pLeft .pName{
  display:none;
}

.pRow.passed{
  opacity:.58;
}

.pRow.passed .pBg{
  filter:saturate(.18) brightness(1.04);
}

.pRow.passed .ico{
  opacity:.72;
}

.pRow.passed .pName,
.pRow.passed .pTime,
.pRow.passed .pTimeSub,
.pRow.passed .countdownPct{
  color:rgba(15,23,42,.52);
}


.pFx{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  overflow:hidden;
}

.pFxFajr{
  background:
    radial-gradient(120px 80px at 18% 18%, rgba(255,255,255,.10), transparent 70%),
    radial-gradient(220px 120px at 18% 100%, rgba(251,191,36,.10), transparent 72%),
    linear-gradient(180deg, rgba(8,15,40,.78) 0%, rgba(20,36,78,.52) 58%, rgba(245,158,11,.08) 100%);
}

.pFxStars{
  position:absolute;
  inset:0;
}

.pFxStars span{
  position:absolute;
  width:3px;
  height:3px;
  border-radius:999px;
  background:rgba(255,255,255,.95);
  box-shadow:0 0 8px rgba(255,255,255,.45);
  animation:fajrTwinkle 3.8s ease-in-out infinite;
}

.pFxStars span:nth-child(1){ top:16%; left:14%; animation-delay:0s; }
.pFxStars span:nth-child(2){ top:24%; left:31%; animation-delay:.8s; }
.pFxStars span:nth-child(3){ top:11%; left:48%; animation-delay:1.6s; }
.pFxStars span:nth-child(4){ top:27%; left:62%; animation-delay:2.2s; }
.pFxStars span:nth-child(5){ top:18%; left:74%; animation-delay:1.1s; }
.pFxStars span:nth-child(6){ top:30%; left:84%; animation-delay:2.8s; }

.pFxMoon{
  position:absolute;
  top:14px;
  left:18px;
  font-size:28px;
  line-height:1;
  filter:drop-shadow(0 0 12px rgba(255,255,255,.22));
  opacity:.92;
  animation:fajrMoonGlow 5.2s ease-in-out infinite;
}

.pFxName{
  position:absolute;
  left:108px;
  top:12px;
  font-size:28px;
  font-weight:950;
  letter-spacing:.4px;
  color:rgba(255,255,255,.12);
  text-shadow:0 1px 0 rgba(255,255,255,.05);
  user-select:none;
}

.pRow.active .pFx + .pInner{
  position:relative;
  z-index:2;
}

.pRow.active .pFxFajr + .pInner .ico,
.pRow.active .pFxFajr + .pInner .pTime,
.pRow.active .pFxFajr + .pInner .pTimeSub,
.pRow.active .pFxFajr + .pInner .countdownPct{
  color:#f8fafc;
}

.pRow.active .pFxFajr + .pInner .ico{
  color:transparent;
  background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 10px 20px rgba(2,6,23,.22);
}

/* .pRow.active .pFxFajr + .pInner .pNameTop — overlay removed; rule no longer needed */

.pRow.active .pFxFajr + .pInner .ringTrack{
  stroke:rgba(255,255,255,.18);
}

.pRow.active .pFxFajr + .pInner .ringFill{
  stroke:#f8fafc;
}

@keyframes fajrTwinkle{
  0%, 100% { opacity:.28; transform:scale(.85); }
  50% { opacity:1; transform:scale(1.2); }
}

@keyframes fajrMoonGlow{
  0%, 100% { opacity:.82; transform:translateY(0); }
  50% { opacity:1; transform:translateY(-1px); }
}


.pLeftFajrSpacer{
  grid-area:left;
  width:0;
  min-width:0;
}

.countdownInlineFajr{
  justify-self:start;
  align-self:center;
  margin-left:10px;
}

.pRow.active .pFxFajr + .pInner{
  grid-template-columns:minmax(0, 1fr) 180px;
  grid-template-areas:
    "status time";
  padding:14px 14px 12px 18px;
  min-height:140px;
}

.pRow.active .pFxFajr + .pInner .countdownInlineFajr{
  grid-area:status;
}

.pRow.active .pFxFajr + .pInner .pRightActive{
  grid-area:time;
  align-self:center;
}

.pRow.active .pFxFajr + .pInner .pTime{
  font-size:22px;
}

.pRow.active .pFxFajr + .pInner .pTimeSub{
  width:100%;
  text-align:left;
}

.pRow.active .pFxFajr + .pInner .ringWrap{
  width:70px;
  height:46px;
}

.pRow.active .pFxFajr + .pInner .ringSvg{
  width:70px;
  height:32px;
}


/* ─────────────────────────────────────────────────────────
   Fasting Card  (v2.0.2 — renamed from infoCard, greenish LCD background)
   ───────────────────────────────────────────────────────── */
.fastingCard{
  background:linear-gradient(180deg, #bcc8a0 0%, #aab78b 48%, #98a47a 100%);
  border:1px solid rgba(69, 85, 46, .42) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 -10px 18px rgba(53, 67, 37, .12),
    0 10px 22px rgba(15,23,42,.07);
  margin:8px 0;
}

.fastingCardInner{
  position:relative;
  z-index:2;
  padding:7px 14px 9px;
}

.fastingCardHeading{
  text-align:center;
  font-size:16px;
  font-weight:950;
  letter-spacing:.2px;
  text-transform:uppercase;
  color:rgba(36, 48, 24, .72);
  margin-bottom:6px;
}

.fastingChips{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  justify-content:center;
}

/* ─────────────────────────────────────────────────────────
   Fast/Qasr Chip tokens — LCD ghost and active states
   ───────────────────────────────────────────────────────── */
.fastChip{
  display:inline-flex;
  align-items:center;
  padding:3px 8px;
  border-radius:99px;
  font-family:ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace;
  font-size:11px;
  font-weight:700;
  letter-spacing:.02em;
  white-space:nowrap;
  /* Ghost / off state — nearly invisible */
  color:rgba(36,48,24,.22);
  background:rgba(36,48,24,.06);
  border:1px solid rgba(36,48,24,.10);
  transition:color .2s, background .2s, border-color .2s;
}

.fastChip--on{
  /* Amber / active state */
  color:rgba(120,53,15,.92);
  background:rgba(251,191,36,.22);
  border-color:rgba(251,191,36,.50);
}

.fastChip--qasr{
  /* Bright yellow — travel Qasr indicator */
  color:rgba(30,20,0,.90);
  background:#FFD600;
  border-color:rgba(180,130,0,.60);
}

.qasrChip{
  /* Qasr chip — inline beside prayer name */
  display:inline-flex;
  vertical-align:middle;
  margin-left:6px;
  font-size:9px;
  position:static;
}

/* LCD dashboard segments for dash progress */
.dashProgress{
  display:flex;
  gap:3px;
  align-items:center;
  justify-content:center;
}

.dashSeg{
  font-size:14px;
  font-weight:900;
  line-height:1;
  color:rgba(15,23,42,.13);
  transition:color .3s, text-shadow .3s;
  user-select:none;
}

.dashSeg.is-on{
  color:rgba(15,23,42,.80);
  text-shadow:0 0 6px rgba(15,23,42,.28), 0 1px 0 rgba(255,255,255,.18);
}

.dashSeg.is-pulse{
  animation:segPulse 1s ease-in-out infinite;
}

.dashSeg.is-complete{
  color:rgba(15,23,42,.85);
  text-shadow:0 0 6px rgba(15,23,42,.28), 0 1px 0 rgba(255,255,255,.18);
}

@keyframes segPulse{
  0%, 100% { opacity:.72; }
  50% { opacity:1; }
}

/* LCD countdown digits */
.lcdCountdown{
  font-family:ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;
}

.pTimeSubValueColon{
  animation:colonBlink 1s step-start infinite;
}

@keyframes colonBlink{
  0%, 100%{ opacity:1; }
  50%{      opacity:0.12; }
}

/* Seconds digit tick — class added/removed by JS each second */
.pTimeSubValueSec{
  display:inline-block;
}
.pTimeSubValueSec.digitTick{
  animation:digitTick 0.35s ease-out forwards;
}

@keyframes digitTick{
  0%  { opacity:0.25; transform:translateY(-3px); }
  100%{ opacity:1;    transform:translateY(0);    }
}

/* ── Prayer time inline in active card name row ── */
.pNameTime{
  margin-left:auto;          /* push to right of the flex row */
  font-size:19px;
  font-weight:950;
  font-variant-numeric:tabular-nums;
  letter-spacing:.2px;
  white-space:nowrap;
}

/* ── Countdown in status row (active card bottom area) ── */
.pInnerActive .countdownInline .pTimeSub{
  font-size:14px;
  font-weight:850;
  color:rgba(15,23,42,.80);
  display:flex;
  align-items:center;
  gap:4px;
}
.pInnerActive .countdownInline .lcdCountdown{
  font-size:14px;
  font-weight:850;
}
.pInnerActive .countdownInline .pTimeSubLabel{
  font-size:12px;
  font-weight:700;
  opacity:.70;
  margin-right:2px;
  text-transform:uppercase;
  letter-spacing:.04em;
}

/* ── Header clock (hLine4 Makkah time) — same animation as prayer-card colons/seconds ── */
.hdrClockColon{
  animation:colonBlink 1s step-start infinite;
}
.hdrClockSec,
.hdrCdSec{
  display:inline-block;
}
.hdrClockSec.digitTick,
.hdrCdSec.digitTick{
  animation:digitTick 0.35s ease-out forwards;
}
/* Makkah countdown container — monospace so digits don't jitter */
.hdrMakkahCd{
  font-family:ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;
}

/* ── ⚡️ bolt: hidden by default, blinks when ≤10 min remain ── */
.cdBolt{
  display:none;
  font-style:normal;
}
.cdBolt.is-active{
  display:inline-block;
  animation:boltPulse 0.9s ease-in-out infinite;
}
@keyframes boltPulse{
  0%, 100%{ opacity:0.12; transform:scale(0.82); }
  50%{      opacity:1;    transform:scale(1.18); }
}