/* Radio Riya website — naya design (design/desktop-reference.html + design/mobile-reference.html).
   Light theme only. Mobile-first:
     <= 480px  phone
     481–899   tablet (ek column, beech me max 640px)
     >= 900px  desktop (2 column hero, top nav)
   Player card apni chaudai ke hisaab se badalta hai (container queries), viewport se nahi. */

:root {
  --ivory: #FFF9F4;      /* page background */
  --rose: #C51C60;       /* primary */
  --rose-dark: #A8154F;  /* link text / hover — ivory aur white par contrast pass */
  --gold: #B88A3B;
  --plum: #352331;       /* text */
  --muted: #756570;
  --pale-rose: #FBEAF0;
  --line: #EBDCCC;
  --white: #FFFFFF;
  --focus: #A57A32;      /* gold ka thoda gehra shade: ivory par 3.7:1 (WCAG 3:1 se upar) */
  --gold-45: rgba(184, 138, 59, 0.45);
  --gold-55: rgba(184, 138, 59, 0.55);

  --r-card: 24px;
  --r-banner: 24px;
  --r-btn: 18px;
  --r-chip: 999px;

  --shadow-card: 0 10px 28px rgba(53, 35, 49, 0.06);
  --shadow-banner: 0 14px 30px rgba(53, 35, 49, 0.07);

  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: Manrope, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --pad: 16px;            /* container ki side padding */
  --container: 1180px;

  color-scheme: light;
}

/* ---------- base ---------- */

*, *::before, *::after { box-sizing: border-box; }

/* `hidden` attribute hamesha jeete, chahe class me display likha ho. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 16px;
}
/* Koi dialog khula ho to peeche ka page scroll na ho. */
html:has(dialog[open]) { overflow: hidden; }

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  background: var(--ivory);
  color: var(--plum);
  font: 400 16px/1.5 var(--font-body);
  -webkit-tap-highlight-color: transparent;
}
main { flex: 1; }
img { max-width: 100%; }
button, input { font: inherit; color: inherit; }
a { color: var(--rose-dark); text-decoration: none; }
/* Hover rang sirf asli hover wale devices par (phone par tap ke baad "chipka" na rahe) */
@media (hover: hover) {
  a:hover { color: var(--rose); }
}

/* Focus ring: gold, sirf keyboard focus par. */
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
/* Fill/stroke har icon ke <symbol> par likha hai; yahan sirf size. */
.icon { width: 24px; height: 24px; flex: none; }
.icon-16 { width: 16px; height: 16px; }
.icon-18 { width: 18px; height: 18px; }
.icon-20 { width: 20px; height: 20px; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 20;
  padding: 10px 16px;
  border-radius: 12px;
  background: var(--plum);
  color: var(--white);
  font-weight: 600;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; color: var(--white); }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: max(var(--pad), env(safe-area-inset-left)) max(var(--pad), env(safe-area-inset-right));
}

/* ---------- header ---------- */

.site-header {
  border-bottom: 1px solid var(--line);
  background: var(--ivory);
  padding-top: env(safe-area-inset-top);
}
/* Mobile: [menu] [logo + naam beech me] [share] */
.header-inner {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 12px;
  padding-block: 14px;
}

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--white);
  color: var(--plum);
  cursor: pointer;
}

.brand {
  display: flex;
  align-items: center;
  justify-self: center;
  gap: 10px;
  min-width: 0;
  min-height: 44px; /* touch target */
  color: var(--plum);
}
.brand-logo {
  width: 36px;
  height: 36px;
  flex: none;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--white);
  object-fit: cover;
}
.wordmark {
  overflow: hidden;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.35; /* Playfair ka ascent+descent ~1.33em — overflow:hidden "y" ki poonchh na kaate */
  white-space: nowrap;
  text-overflow: ellipsis;
}

.main-nav { display: none; }
.main-nav-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 12px;
  color: var(--plum);
  font-size: 15px;
  font-weight: 600;
}
.pill-outline {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-left: 8px;
  padding: 10px 18px;
  border: 1px solid var(--rose);
  border-radius: var(--r-chip);
  color: var(--rose);
  font-size: 15px;
  font-weight: 600;
}

/* ---------- hero (mobile: ek column — intro → banner → player → CTAs) ---------- */

.hero {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-block: 20px 18px;
}
.hero-intro { order: 1; display: flex; flex-direction: column; align-items: center; text-align: center; }
.banner { order: 2; }
.player-card { order: 3; }
.cta-row { order: 4; }

.live-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0;
}
.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: var(--r-chip);
  background: var(--pale-rose);
  color: var(--rose-dark);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.badge-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--rose); }
.live-caption { color: var(--muted); font-size: 13px; }

.hero-title {
  margin: 12px 0 0;
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--plum);
}
/* "Sab Ka Jiya" kabhi beech se na toote — line badle to poora phrase neeche ("Jo Chura Le / Sab Ka Jiya") */
.hero-title em { color: var(--rose); font-style: italic; white-space: nowrap; }
.hero-lede {
  max-width: 480px;
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.6;
}
.noscript {
  margin: 12px 0 0;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--white);
}

/* ---------- player card ---------- */

.player-card {
  container: player / inline-size;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 20px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--white);
  box-shadow: var(--shadow-card);
}

.player-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.status-main { display: flex; align-items: center; gap: 10px; min-width: 0; }
.live-dot {
  width: 9px;
  height: 9px;
  flex: none;
  border-radius: 50%;
  background: var(--rose);
  box-shadow: 0 0 0 4px var(--pale-rose);
}
/* Chalte waqt halka sa "saans" lene wala halo */
.player-card[data-status="playing"] .live-dot { animation: live-pulse 1.8s ease-in-out infinite; }
.player-card[data-status="error"] .live-dot { background: var(--muted); box-shadow: 0 0 0 4px var(--line); }
.status { margin: 0; font-size: 15px; font-weight: 600; }
.player-meta { display: none; color: var(--muted); font-size: 13px; white-space: nowrap; }

.player-main { display: flex; flex-direction: column; gap: 18px; }
.play-wrap { display: flex; justify-content: center; }

/* Bada gol Play/Pause: 6px safed ring + 1px gold ring + rose shadow */
.play-btn {
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  flex: none;
  padding: 0; /* rings box-shadow hain — card ke gap/padding me failte hain, layout me jagah nahi lete */
  border: 0;
  border-radius: 50%;
  background: var(--rose);
  color: var(--white);
  box-shadow: 0 0 0 6px var(--white), 0 0 0 7px var(--gold-55), 0 14px 28px rgba(197, 28, 96, 0.22);
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.1s ease;
}
.play-btn:active { transform: scale(0.97); }
.play-btn:focus-visible { outline-offset: 10px; }
.play-btn > * { grid-area: 1 / 1; }
.play-btn .icon { width: 38px; height: 38px; }
.play-btn .pause-icon,
.play-btn .spinner { display: none; }
.play-btn[data-state="pause"] .play-icon,
.play-btn[data-state="loading"] .play-icon { display: none; }
.play-btn[data-state="pause"] .pause-icon { display: block; }
/* Connecting / buffering: spinner ke beech chhota pause icon */
.play-btn[data-state="loading"] .pause-icon { display: block; width: 18px; height: 18px; }
.play-btn[data-state="loading"] .spinner { display: block; }
.spinner {
  width: 34px;
  height: 34px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: var(--white);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}

.player-controls {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 18px; /* mobile reference: har block ke beech 18px */
  min-width: 0;
}
.control-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.control-icon { color: var(--rose); }
.control-label { flex: none; font-size: 13px; font-weight: 600; }
.control-value {
  width: 38px;
  flex: none;
  color: var(--muted);
  font-size: 13px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.volume-note { color: var(--muted); font-size: 13px; }
.volume-row.is-unsupported .range,
.volume-row.is-unsupported .control-value { display: none; }

/* Volume slider: native range + rose accent. Chhune ke liye 44px oonchi, par
   negative margin se layout me sirf ~20px (reference ki line jitni) */
.range {
  flex: 1;
  min-width: 0;
  height: 44px;
  margin: -12px 0;
  accent-color: var(--rose);
  cursor: pointer;
}
.range:disabled { cursor: not-allowed; opacity: 0.45; }

/* Sleep: stacked me "Sleep timer · Off" ek line, chips neeche; inline me "Sleep in" + chips saath */
.sleep-row { flex-wrap: wrap; row-gap: 8px; }
.label-inline { display: none; }
.timer-state { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
/* Hamesha 3 + 3 ki saaf grid (compact, chip apni chaudai jitna) — kisi bhi width par
   akela "120 min" doosri line me nahi latakta, aur kabhi overflow nahi. */
.chips { display: grid; flex-basis: 100%; grid-template-columns: repeat(3, max-content); gap: 6px; }
.chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-chip);
  background: var(--white);
  color: var(--plum);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
/* Dikhne me 36px, chhune ke liye 44px */
.chip::after { content: ""; position: absolute; inset: -4px -2px; }
.chip[aria-pressed="true"] { border-color: var(--plum); background: var(--plum); color: var(--white); }

/* Desktop jaisa "row" player: play bayen, controls dayen, "Sleep in" label aur
   bade chips. Sirf phone se bade screen par (phone hamesha mobile reference jaisa
   stacked), aur tab jab card ka content kam se kam 380px ho — 900px par card
   patla hota hai to wahan bhi stacked. Container query card ke content box ko
   naapti hai (padding ke andar). */
@media (min-width: 480.02px) {
  @container player (min-width: 380px) {
    .player-status { justify-content: space-between; }
    .player-meta { display: inline; }
    .player-main { flex-direction: row; align-items: center; gap: 24px; }
    .player-controls { gap: 14px; }
    .play-btn { width: 88px; height: 88px; }
    .play-btn .icon { width: 36px; height: 36px; }
    .live-dot { width: 10px; height: 10px; }

    .control-row { gap: 12px; }
    .control-label { width: 60px; }
    .label-inline { display: inline; }
    .label-stacked,
    .timer-state { display: none; }
    /* Reference jaisa: "Sleep in" apni line par, chips poori chaudai me neeche */
    .sleep-row { row-gap: 12px; }
    .chip { min-height: 40px; padding: 0 16px; font-size: 14px; }
    .chip::after { inset: -2px; }
  }
}

/* ---------- CTAs ---------- */

.cta-row { display: flex; flex-direction: column; gap: 18px; }
.cta-secondary { display: flex; gap: 10px; }
.cta-secondary > * { flex: 1 1 0; min-width: 0; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: 16px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
}
.btn-primary { min-height: 54px; border-radius: var(--r-btn); background: var(--rose); color: var(--white); font-size: 15px; font-weight: 700; }
.btn-outline { border-color: var(--line); background: var(--white); color: var(--plum); }
.btn-outline-rose { border-color: var(--rose); background: var(--white); color: var(--rose); font-weight: 700; }
.btn-compact { min-height: 48px; padding: 0 24px; }

.btn-square {
  display: none;
  place-items: center;
  width: 52px;
  height: 52px;
  flex: none;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  background: var(--white);
  color: var(--plum);
  cursor: pointer;
}

/* ---------- banner slider ---------- */

.banner { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

.banner-card {
  padding: 10px;
  border: 1px solid var(--gold-45);
  border-radius: var(--r-banner);
  background: var(--white);
  box-shadow: var(--shadow-banner);
}
.banner-viewport {
  position: relative;
  aspect-ratio: 1.16;
  overflow: hidden;
  border-radius: 16px;
  background: var(--white);
  touch-action: pan-y; /* upar-neeche scroll browser ka, left-right swipe hamara */
  user-select: none;
  -webkit-user-select: none;
}
.banner-viewport:focus-visible { outline-offset: 4px; }

/* Loading / error / khali list: station logo */
.banner-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--white);
}
.banner-viewport.has-banners .banner-fallback { visibility: hidden; }

.banner-track {
  position: absolute;
  inset: 0;
  display: flex;
  transition: transform 650ms cubic-bezier(0.65, 0, 0.35, 1); /* easeInOutCubic */
  will-change: transform;
}
.banner-track.no-anim { transition: none; }
.banner-slide { position: relative; flex: 0 0 100%; height: 100%; background: var(--white); }
/* Image decode hone tak logo (placeholder) */
.banner-slide:not(.is-loaded) { background: var(--white) url("/assets/logo.jpeg") center / contain no-repeat; }
.banner-link { display: block; height: 100%; }
.banner-link:focus-visible { outline-offset: -3px; }
.banner-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  -webkit-user-drag: none;
}
.banner-slide.is-loaded .banner-img { opacity: 1; }
.banner-slide.is-broken .banner-img { visibility: hidden; }

/* "ANNOUNCEMENT" pill — sirf jab asli banners hon (logo fallback par nahi) */
.banner-pill {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  display: none;
  padding: 5px 9px;
  border-radius: var(--r-chip);
  background: rgba(53, 35, 49, 0.78);
  color: var(--white);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  pointer-events: none;
}
.banner-viewport.has-banners .banner-pill { display: block; }

.chip-button {
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--r-chip);
  background: var(--pale-rose);
  color: var(--plum);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.banner-retry-image { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); }

.banner-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 0 2px;
}
.banner-dots { display: flex; align-items: center; gap: 5px; }
.banner-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--r-chip);
  background: var(--line);
  transition: width 0.2s ease, background-color 0.2s ease;
}
.banner-dot.is-active { width: 20px; background: var(--rose); }

.banner-arrows { display: none; gap: 6px; }
.round-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--white);
  color: var(--plum);
  cursor: pointer;
}
/* Dikhne me 36px, click/touch ke liye 44px */
.round-btn::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; }

/* App ka LinearProgressIndicator jaisa patla loading bar */
.banner-progress {
  position: relative;
  height: 2px;
  overflow: hidden;
  border-radius: 2px;
  background: var(--pale-rose);
}
.banner-progress::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 40%;
  background: var(--rose);
  animation: progress 1.2s ease-in-out infinite;
}

.text-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  margin-inline: auto;
  padding: 0 14px;
  border: 0;
  border-radius: 12px;
  background: none;
  color: var(--rose-dark);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.banner-caption { display: none; margin: 0; color: var(--muted); font-size: 13px; text-align: center; }

/* ---------- info strip (mobile: sirf ek chhota note) ---------- */

.info { padding-block: 0 24px; }
.info-grid { display: none; margin: 0; padding: 0; list-style: none; }
.info-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--white);
}
.info-icon { color: var(--gold); }
.info-title { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.3; }
.info-text { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
/* 44px touch target, par dikhne me reference jaisa (margin se jagah barabar) */
.info-link {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  min-height: 44px;
  margin: -6px 0 -12px;
  font-size: 14px;
  font-weight: 700;
}
.link-btn {
  padding: 0;
  border: 0;
  background: none;
  color: var(--rose-dark);
  cursor: pointer;
}
.info-note { margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; text-align: center; }

/* ---------- footer ---------- */

.site-footer {
  border-top: 1px solid var(--line);
  background: var(--white);
  padding-bottom: env(safe-area-inset-bottom);
}
.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding-block: 12px;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}
.footer-brand { display: flex; align-items: center; gap: 10px; padding-top: 4px; }
.footer-brand img { display: none; width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 50%; object-fit: cover; }
.footer-brand strong { color: var(--plum); }
.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* 44px oonchai li par; link khud bhi 44px (touch target). "© 2026 Radio Riya" wala
   span normal inline rehta hai — flex banta to beech ke space gayab ho jaate. */
.footer-links > li { display: flex; align-items: center; min-height: 44px; }
.footer-links > li > a { display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- dialogs: drawer + sheet ---------- */

dialog {
  padding: 0;
  border: 0;
  background: var(--ivory);
  color: var(--plum);
}
dialog::backdrop { background: rgba(53, 35, 49, 0.42); }

/* Menu drawer — left se, 16px radius panel */
.drawer {
  width: min(86vw, 320px);
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0 auto 0 0;
  overflow-y: auto;
  border-radius: 0 16px 16px 0;
}
.drawer[open] { animation: drawer-in 0.22s ease-out; }
.drawer-body {
  min-height: 100%;
  padding: env(safe-area-inset-top) 0 max(16px, env(safe-area-inset-bottom)) env(safe-area-inset-left);
}
.drawer-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 12px 14px 20px;
  border-bottom: 1px solid var(--line);
}
.drawer-head img { width: 36px; height: 36px; flex: none; border: 1px solid var(--line); border-radius: 50%; object-fit: cover; }
.drawer-close { margin-left: auto; }
.drawer-list { margin: 0; padding: 12px; list-style: none; }
.menu-item {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 56px;
  padding: 0 14px;
  border: 0;
  border-radius: 16px;
  background: none;
  color: var(--plum);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
}
.menu-item .icon { width: 20px; height: 20px; color: var(--rose); }
.menu-divider { height: 1px; margin: 8px 6px; background: var(--line); }

/* Bottom sheet (mobile) / beech ka dialog (desktop) — "How to install" */
.sheet {
  width: min(100%, 640px);
  max-width: 100%;
  max-height: calc(100dvh - 48px);
  margin: auto auto 0;
  overflow: auto;
  border-radius: 24px 24px 0 0;
}
.sheet[open] { animation: sheet-in 0.26s cubic-bezier(0.2, 0.8, 0.2, 1); }
.sheet-body { padding: 0 24px max(24px, env(safe-area-inset-bottom)); }
.sheet-handle {
  width: 32px;
  height: 4px;
  margin: 22px auto 16px;
  border-radius: 2px;
  background: rgba(117, 101, 112, 0.4);
}
.sheet-title { margin: 0; font-family: var(--font-display); font-size: 24px; font-weight: 700; line-height: 1.25; }
.sheet-help { margin: 8px 0 0; color: var(--muted); }
.install-steps { display: grid; gap: 14px; margin-top: 20px; }
.install-step {
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--white);
}
.install-step h3 { margin: 0 0 6px; font-size: 15px; font-weight: 700; }
.install-step ol { margin: 0; padding-left: 20px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.install-step strong { color: var(--plum); }
.sheet-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

/* ---------- toast (app ka floating SnackBar) ---------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: max(24px, env(safe-area-inset-bottom));
  z-index: 10;
  /* left:50% par browser chaudai aadhi kar deta — max-content se poori jagah mile */
  width: max-content;
  max-width: calc(100% - 32px);
  padding: 14px 18px;
  border-radius: 16px;
  background: var(--plum);
  color: var(--white);
  font-size: 14px;
  box-shadow: 0 6px 20px rgba(53, 35, 49, 0.2);
  opacity: 0;
  transform: translate(-50%, 16px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* ---------- hover (sirf mouse/trackpad wale devices) ----------
   Phone par :hover tap ke baad chipka rehta hai — isliye sab yahan. */

@media (hover: hover) {
  .icon-btn:hover,
  .btn-square:hover,
  .round-btn:hover,
  .text-btn:hover { background: var(--pale-rose); }
  .nav-link:hover,
  .btn-outline:hover,
  .menu-item:hover { background: var(--pale-rose); color: var(--plum); }
  .pill-outline:hover,
  .btn-outline-rose:hover { background: var(--rose); color: var(--white); }
  .play-btn:hover { background: var(--rose-dark); }
  .btn-primary:hover { background: var(--rose-dark); color: var(--white); }
  .chip:hover { border-color: var(--gold-45); background: var(--pale-rose); }
  .chip[aria-pressed="true"]:hover { border-color: var(--plum); background: var(--plum); }
  .link-btn:hover { color: var(--rose); }
}

/* ---------- phone (<= 480px): reference jaisa compact — caption/lede chhupe ---------- */

@media (max-width: 480px) {
  .live-caption,
  .hero-lede { display: none; }
}

/* ---------- tablet (481–899px): wahi ek column, beech me max 640px ---------- */

@media (min-width: 480.02px) and (max-width: 899.98px) {
  :root { --container: calc(640px + 2 * var(--pad)); }
  .hero { gap: 20px; padding-block: 28px 28px; }
  .hero-title { font-size: 40px; line-height: 1.1; }
}

/* ---------- desktop (>= 900px) ---------- */

@media (min-width: 900px) {
  :root {
    --pad: 32px;
    --container: calc(1180px + 2 * var(--pad)); /* reference: 1180px content + 32px padding dono taraf */
    --r-banner: 28px;
    --shadow-card: 0 12px 32px rgba(53, 35, 49, 0.06);
    --shadow-banner: 0 18px 40px rgba(53, 35, 49, 0.08);
  }

  .header-inner { display: flex; justify-content: space-between; gap: 24px; }
  .menu-btn,
  .header-share { display: none; }
  .brand { gap: 12px; }
  .brand-logo { width: 48px; height: 48px; }
  .wordmark { font-size: 24px; }
  .main-nav { display: block; }

  /* 2 column grid: bayen intro/player/CTAs, dayen banner. Upar-neeche ki 1fr rows
     bayen column ko banner ke saamne vertically beech me rakhti hain. */
  .hero {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: 1fr auto auto auto 1fr;
    grid-template-areas:
      ".      banner"
      "intro  banner"
      "player banner"
      "ctas   banner"
      ".      banner";
    column-gap: 56px;
    row-gap: 0;
    padding-block: 56px 40px;
  }
  .hero-intro { grid-area: intro; align-items: flex-start; text-align: left; }
  .player-card { grid-area: player; margin-top: 28px; gap: 22px; padding: 24px 28px; }
  .cta-row { grid-area: ctas; margin-top: 28px; }
  .banner { grid-area: banner; align-self: center; gap: 14px; }

  .live-row { justify-content: flex-start; }
  .live-badge { padding: 7px 12px; font-size: 12px; }
  .badge-dot { width: 8px; height: 8px; }
  .hero-title { margin-top: 28px; font-size: 58px; line-height: 1.08; }
  .hero-lede { margin-top: 12px; font-size: 17px; }

  .cta-row { flex-direction: row; flex-wrap: nowrap; gap: 12px; }
  .cta-row .btn { flex: 0 1 auto; min-width: 0; }
  .cta-secondary { display: contents; }
  .cta-secondary > * { flex: none; }
  .cta-store { display: none; }
  .btn-primary { min-height: 52px; padding: 0 24px; }
  .btn-outline { min-height: 52px; padding: 0 22px; border-radius: var(--r-btn); font-size: 15px; }
  .btn-square { display: inline-grid; }

  .banner-card { padding: 14px; }
  .banner-viewport { aspect-ratio: 1 / 1; border-radius: 20px; }
  .banner-pill { top: 14px; left: 14px; padding: 6px 10px; font-size: 11px; }
  .banner-controls { justify-content: space-between; padding: 14px 6px 2px; }
  .banner-dots { gap: 6px; }
  .banner-dot { width: 8px; height: 8px; }
  .banner-dot.is-active { width: 24px; }
  .banner-arrows { display: flex; }
  .banner-caption { display: block; }

  .info { padding-block: 8px 64px; }
  .info-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .info-note { display: none; }

  .footer-inner {
    flex-direction: row;
    justify-content: space-between;
    gap: 16px;
    padding-block: 22px;
    font-size: 13px;
    text-align: left;
  }
  .footer-brand { padding-top: 0; }
  .footer-brand img { display: block; }
  .footer-links { gap: 0 20px; }

  /* Desktop par sheet = beech me dialog */
  .sheet { width: min(100% - 48px, 520px); margin: auto; border-radius: var(--r-card); }
  .sheet[open] { animation: dialog-in 0.2s ease-out; }
  .sheet-handle { display: none; }
  .sheet-body { padding: 28px; }
  .install-steps { grid-template-columns: 1fr 1fr; }
}

/* 900–1099px: left column patla — CTA buttons ki padding kam, ek line me fit */
@media (min-width: 900px) and (max-width: 1099.98px) {
  .btn-primary { padding: 0 18px; }
  .btn-outline { padding: 0 16px; }
}
/* 900–1009px: teeno ek line me nahi aate — WhatsApp poori chaudai, neeche Contact + share */
@media (min-width: 900px) and (max-width: 1009.98px) {
  .cta-row { flex-wrap: wrap; }
  .cta-row .btn-primary { flex: 1 1 100%; }
  .cta-row .btn-outline { flex: 1 1 auto; }
}

/* Landscape phone (jaise 844x390): banner itna bada na ho ki screen se bahar jaaye */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 899.98px) {
  .banner { width: min(100%, calc((100dvh - 64px) * 1.16)); align-self: center; }
}

/* ---------- animations ---------- */

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes progress {
  from { transform: translateX(-100%); }
  to { transform: translateX(250%); }
}
@keyframes live-pulse {
  0%, 100% { box-shadow: 0 0 0 4px var(--pale-rose); }
  50% { box-shadow: 0 0 0 7px var(--pale-rose); }
}
@keyframes sheet-in { from { transform: translateY(100%); } }
@keyframes drawer-in { from { transform: translateX(-100%); } }
@keyframes dialog-in { from { opacity: 0; transform: scale(0.96); } }

/* Motion kam chahne walon ke liye slide/sheet animation band
   (spinner aur loading bar chalte rehte hain — wo status batate hain). */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .banner-track,
  .banner-dot,
  .toast,
  .play-btn { transition: none; }
  .sheet[open],
  .drawer[open],
  .player-card[data-status="playing"] .live-dot { animation: none; }
}