/* Rawna.Weather — Yandex-like clean dark UI */
:root{
  --bg: radial-gradient(1000px 600px at 20% 0%, #132038 0%, #0b1220 45%, #070d18 100%);
  --glass: rgba(255,255,255,.06);
  --stroke: rgba(255,255,255,.12);
  --text: #e8f0ff;
  --muted: #a8b3c7;
  --brand: #0db6e9;
  --ok: #6ee7b7;
  --warn: #fcbf49;
  --bad: #fb7185;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background: var(--bg), #0b1220 no-repeat fixed center/cover;
}

.wrap{min-height:100%;display:flex;flex-direction:column}

.topbar{
  position:sticky;top:0;z-index:10;
  backdrop-filter:saturate(140%) blur(10px);
  background:linear-gradient( to bottom, rgba(4,8,16,.75), transparent);
  padding:16px clamp(16px,4vw,32px);
  border-bottom:1px solid var(--stroke);
}
.brand{display:flex;align-items:center;gap:12px;font-size:20px;letter-spacing:.3px}
.brand img{width:28px;height:28px;border-radius:8px;box-shadow:0 0 0 2px rgba(255,255,255,.15) inset}
.brand strong{color:var(--brand)}

.searchbar{
  display:flex; gap:8px; align-items:center; margin-top:12px; flex-wrap:wrap;
}
.inputwrap{position:relative;flex:1;min-width:260px}
#q{
  width:100%; padding:14px 14px;
  background:rgba(255,255,255,.08);
  border:1px solid var(--stroke);
  border-radius:12px; color:var(--text);
  outline:none;
}
#q:focus{border-color:rgba(98,168,255,.6); box-shadow:0 0 0 3px rgba(98,168,255,.15)}

.suggest{
  position:absolute; left:0; right:0; top:calc(100% + 6px);
  background:#0e1626; border:1px solid var(--stroke); border-radius:12px;
  padding:6px; list-style:none; margin:0; max-height:280px; overflow:auto;
  box-shadow:0 10px 30px rgba(0,0,0,.45);
}
.suggest li{
  padding:10px 12px; border-radius:8px; cursor:pointer; color:var(--muted);
}
.suggest li:hover{background:rgba(255,255,255,.06); color:var(--text)}
.hidden{display:none}

.btn{
  padding:12px 16px; border-radius:12px; border:1px solid var(--stroke);
  background:linear-gradient(180deg,#2a4c8a, #1a2e58); color:white; cursor:pointer;
}
.btn.ghost{background:transparent}
.btn:hover{filter:brightness(1.05)}

.content{flex:1; padding: 20px clamp(16px,4vw,32px) 40px}
.where{opacity:.8; margin:4px 0 16px 4px}
.panels{display:grid; gap:16px}
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid var(--stroke); border-radius:18px; padding:14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.card h3{margin:6px 8px 12px; font-weight:600; color:#cfe1ff}

.nowgrid{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px;
}
.nowgrid .kv{background:rgba(255,255,255,.05); border:1px solid var(--stroke); border-radius:14px; padding:12px}
.k{font-size:12px; color:var(--muted)}
.v{font-size:22px; font-weight:700}

.scroller{display:flex; gap:10px; overflow:auto; padding-bottom:6px}
.badge{
  min-width:116px;
  background:rgba(255,255,255,.05); border:1px solid var(--stroke);
  border-radius:14px; padding:10px;
}
.badge .lg{font-size:18px; font-weight:700}
.badge .sm{font-size:11px; opacity:.8}

.footer{padding:22px; text-align:center; color:var(--muted); border-top:1px solid var(--stroke)}

@media (max-width:980px){
  .nowgrid{grid-template-columns:repeat(2, minmax(0,1fr))}
}
/* 1) पूरे पेज पर overflow-x बंद */
html, body {
  width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}

/* 2) मुख्य container चौड़ाई नियंत्रित + सुरक्षित padding */
.container {
  max-width: 1200px;     /* चाहे तो 1280px कर सकते हैं */
  margin: 0 auto;
  padding: 16px;
}

/* 3) Hourly/Daily सेक्शन = responsive grid (wraps, no side scroll) */
#hours, #days {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;                  /* कार्ड्स के बीच spacing */
  width: 100%;
}

/* 4) कार्ड्स flexible रखें – fixed width हटा दें */
#hours .badge, #days .badge,
#hours .card,  #days .card {
  min-width: 0;        /* flex/grid shrink की परमीशन */
  width: auto;         /* कोई fixed width नहीं */
}

/* 5) अगर कहीं flex का इस्तेमाल है तो wrap ON रखें */
.row, .hours-row, .days-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* 6) छोटी स्क्रीन के लिए थोड़ी compact styling */
@media (max-width: 768px) {
  #hours, #days {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
  }
  .search-bar {
    grid-template-columns: 1fr auto auto; /* input | search | gps */
  }
}
/* ===== Logo pop (badge + glow), overlap safe ===== */
:root{
  --brand-size: 34px;             /* logo ka size */
  --accent: #62e9ff;
  --badge1: rgba(98,233,255,.14);  /* thoda halka rakha */
  --badge2: rgba(98,233,255,.05);
}
/* ==== Rawna.Weather footer chip ==== */
.center-chip{
  display:flex;
  justify-content:center;
  margin:18px 0 34px;
}

.brand-chip{
  --ring: rgba(98,233,255,.25);
  --bg:  #0f1626;            /* डार्क pill */
  --bg2: #0a0f1c;
  --txt: #dfe9ff;

  display:inline-flex; align-items:center; gap:10px;
  padding:10px 16px;
  border-radius:14px;
  background: linear-gradient(180deg,var(--bg),var(--bg2));
  border:1px solid rgba(255,255,255,.06);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.03),
    0 8px 22px rgba(0,0,0,.45);
  color:var(--txt);
  text-decoration:none;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.brand-chip:hover{
  transform: translateY(-1px);
  border-color: var(--ring);
  box-shadow:
    0 0 0 3px rgba(98,233,255,.07),
    0 10px 26px rgba(0,0,0,.5);
}

.chip-logo{
  width:26px; height:26px; border-radius:50%;
  display:grid; place-items:center;
  background:
    radial-gradient(60% 60% at 35% 35%, rgba(98,233,255,.18), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.06), transparent);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.06),
    0 6px 18px rgba(0,0,0,.4);
  overflow:hidden;
}
.chip-logo img{
  width:18px; height:18px; object-fit:contain;
  filter: drop-shadow(0 0 6px rgba(98,233,255,.24));
}

.chip-label{
  font-weight:600; letter-spacing:.2px;
}
.chip-label b{
  color:#62e9ff; text-shadow:0 0 10px rgba(98,233,255,.28);
}
.made-by{
  max-width: 1200px;
  margin: 28px auto 40px;
  text-align: center;
  color: var(--muted, #a8b0c2);
  font-size: 12.5px;
  opacity: .95;
}

.made-by a{
  color: #51d0ff;             /* लिंक का रंग */
  text-decoration: none;      /* underline ऑफ */
  border-bottom: none;        /* सुरक्षा के लिए */
}

.made-by a:hover{
  color: #78e6ff;             /* hover रंग */
  text-decoration: underline; /* चाहें तो hover पर underline */
}
/* --- R.All floating button --- */
.rall-fab{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 999;
  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding: 10px 14px;
  border-radius: 999px;

  color: #dfe7ff;
  background: rgba(16, 28, 52, 0.65);
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(8px);

  text-decoration: none;
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
  transition: transform .15s ease, background .2s ease, border-color .2s ease;
}

.rall-fab .label{
  font-size: 13px;
  letter-spacing: .2px;
  opacity: .95;
}

.rall-fab:hover{
  transform: translateY(-2px);
  background: rgba(24, 44, 84, 0.75);
  border-color: rgba(98,168,255,0.25);
}

@media (max-width: 640px){
  .rall-fab{
    right: 14px;
    bottom: 14px;
    padding: 9px 12px;
    gap: 8px;
  }
  .rall-fab .label{ font-size: 12px; }
}
/* Default night-ish gradient */
body {
  background: radial-gradient(1200px 700px at 10% -10%, #172033 0%, #0d1422 55%, #0a101b 100%);
}

/* ये theme accents JS से set होंगे (नीचे JS देखें) */
body[data-cond="clear"] {
  background: radial-gradient(1200px 700px at 90% -10%, #1a2740 0%, #0f1a30 55%, #0a121f 100%);
}
body[data-cond="cloudy"] {
  background: radial-gradient(1200px 700px at 20% -10%, #202a3e 0%, #141b2b 55%, #0d1321 100%);
}
body[data-cond="rain"] {
  background: radial-gradient(1200px 700px at 80% -10%, #14263a 0%, #0d1c2e 55%, #091524 100%);
}
body[data-cond="storm"] {
  background: radial-gradient(1200px 700px at 70% -10%, #332040 0%, #241430 55%, #180e22 100%);
}
body[data-cond="snow"] {
  background: radial-gradient(1200px 700px at 40% -10%, #233247 0%, #172538 55%, #0e1a2a 100%);
}
/* Weather icons */
.wxicon { font-size: 18px; line-height: 1; vertical-align: -2px; margin-right: 6px; }
.wxicon-xl { font-size: 32px; line-height: 1; vertical-align: -4px; margin-right: 8px; }
/* icon sizes */
.wxicon-xl{ font-size:40px; line-height:1; vertical-align:-6px; margin-right:10px; }
.wxicon   { font-size:18px; line-height:1; vertical-align:-2px; margin-right:6px; }

/* --- Sunrise/Sunset compact row --- */
.sunrow{
  display:flex;
  justify-content:center;   /* बीच में */
  align-items:center;
  gap:12px;                 /* दोनों pills में छोटा gap */
  margin:14px auto 0;
  width:100%;
}

.sunpill{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:12px;
  background: rgba(255,255,255,0.04);     /* हल्का कार्ड */
  backdrop-filter: blur(4px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.25) inset,
              0 1px 0 rgba(255,255,255,0.06);
  min-width: 160px;
}

.sunicon{ font-size:20px; line-height:1; }

.suntext .label{
  font-size:12px;
  opacity:.8;
}

.suntext .time{
  font-size:16px;
  font-weight:600;
}

/* छोटे स्क्रीन पर और कॉम्पैक्ट */
@media (max-width: 520px){
  .sunrow{ gap:10px; }
  .sunpill{ padding:8px 12px; min-width: 140px; }
  .suntext .time{ font-size:15px; }
}