/* ============== Daily Panchangam Card ============== */

.panch-card{
  background: #fbf7ff;            /* light sacred lilac */
  border: 2px solid #a855f7;       /* purple ring (matches site theme) */
  border-radius: 18px;
  padding: 14px 14px 10px;
}

.panch-divider{
  height:1px; background:#eadcff; border-radius:1px; margin:8px 0 6px;
}

/* location pill (only when fallback is used) */
.panch-loc-row{
  display:flex; justify-content:flex-end; margin-top:4px;
}
.panch-location{
  display:inline-flex; align-items:center; gap:4px;
  font-weight:600; font-size:0.8rem; color:#5b21b6;
  background:#eee6ff; border:1px solid #d9c8ff; border-radius:999px;
  padding:2px 7px;
}
.panch-location .loc-emoji{ font-size:.95rem; }

/* rows: emoji | label | value [hint optional] */
.panch-body{ padding-top:4px; }
.panch-row{
  display:flex; align-items:baseline;
  gap:10px;
  padding:8px 4px;
  flex-wrap:wrap;                          /* allows hint to break to next line */
}

/* tiny entrance animation (optional) */
.panch-row.fade-in{ opacity:.001; transform:translateY(3px); transition:.18s ease; }
.panch-row.fade-in.visible{ opacity:1; transform:none; }

.panch-row .emoji{ width:22px; text-align:center; font-size:0.85rem; }
.panch-label{
  font-weight:700;
  color:#1f2937;
  flex: 1 1 auto;                          /* takes remaining space */
  min-width: 120px;                         /* prevents over-squeeze on very small phones */
}

.panch-value{
  margin-left:auto;                         /* pushes value to the right edge */
  font-weight:800;
  color:#6b21a8;
  flex: 0 0 auto;                           /* keep value as one unit */
  white-space:nowrap;                       /* "6:01 AM" stays intact */
}

.panch-value--primary{ font-size:0.85rem; }
.panch-value--small{   font-size:.82rem;  }

.panch-hint{
  flex: 0 0 auto;
  color:#6b7280;
  white-space:nowrap;                       /* keep “(Upto 8:17 PM)” intact */
  margin-left:10px;
  font-size:.92rem;
}

/* Gowri chips row (if you render it) */
.panch-gowri{ margin-top:6px; display:flex; gap:6px; flex-wrap:wrap; }
.gowri-chip{
  font: 600 .8rem/1.6 system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans Tamil", "Noto Sans", sans-serif;
  border-radius:999px; padding:2px 8px; border:1px solid #e5e7eb; background:#fff;
}
.gowri-chip[title*="AMR"], .gowri-chip[title*="DHA"],
.gowri-chip[title*="LAB"], .gowri-chip[title*="SUB"]{ border-color:#bbf7d0; background:#ecfdf5; }
.gowri-chip[title*="VIS"]{ border-color:#fde68a; background:#fff7ed; }
.gowri-chip[title*="MAR"], .gowri-chip[title*="SOG"], .gowri-chip[title*="ROG"]{ border-color:#fecaca; background:#fef2f2; }

/* “updated at …” line if you show it somewhere */
.panch-updated{ margin-top:6px; color:#6b7280; font-size:.88rem; }

/* ---------- responsive tweaks ---------- */
@media (max-width: 480px){
  .panch-row{ padding:6px 2px; gap:8px; }
  .panch-label{ font-weight:700; }
  .panch-value{ font-weight:800; }
  /* when space is tight, allow the hint to fall to a new line while aligning right */
  .panch-hint{
    flex-basis: 100%;
    text-align: right;
    margin-left: 0;
    padding-left: calc(22px + 10px + 0.2rem); /* indent roughly under the value */
  }
}

/* --- uniform 0.85rem text for the 7 rows --- */
#panch-body .panch-row{ font-size:.8rem; }
#panch-body .panch-label,
#panch-body .panch-value,
#panch-body .panch-hint{ font-size:inherit !important; }

/* neutralize any previous value-size variants */
#panch-body .panch-value--primary,
#panch-body .panch-value--small{ font-size:inherit !important; }

/* keep the same size when the hint drops to a new line on mobile */
@media (max-width:480px){
  #panch-body .panch-hint{ font-size:inherit !important; }
}

/* --- compact Panchangam rows (v1) --- */

/* Card padding a bit tighter */
.panch-card{ padding: 10px 12px !important; }

/* Make each row shorter: less padding + smaller gaps */
#panch-body .panch-row{
  padding: 4px 2px !important;   /* was 8px 4px */
  gap: 6px !important;           /* was 10px/8px */
  line-height: 1.15 !important;  /* tighter line-height */
}

/* Keep everything at 0.8rem */
#panch-body .panch-row{ font-size: .8rem !important; }
#panch-body .panch-label,
#panch-body .panch-value,
#panch-body .panch-hint,
#panch-body .panch-value--primary,
#panch-body .panch-value--small{ font-size: inherit !important; }

/* Slightly smaller emoji so rows feel denser */
#panch-body .emoji{ width: 20px !important; font-size: .95rem !important; }

/* Visual weight tuned down a touch for less “bulk” */
#panch-body .panch-label{ font-weight: 600 !important; }
#panch-body .panch-value{ font-weight: 700 !important; }

/* Space under the faint divider */
.panch-divider{ margin: 6px 0 4px !important; }

/* Numbers align nicely (6:01/5:45 line up) */
#panch-body .panch-value{ font-variant-numeric: tabular-nums; }

/* Mobile: hint on its own line but even tighter */
@media (max-width: 480px){
  #panch-body .panch-hint{
    flex-basis: 100%;
    text-align: right;
    margin-left: 0;
    padding-left: calc(20px + 6px); /* indent under emoji */
    margin-top: 0;                   /* no extra vertical gap */
  }
}