/* =================================================
   main.css — Clean Recode (Theme-aware Light/Dark)
   Uses: html[data-theme="dark"]
   ================================================= */


/* ===== FORCE STATUS COLORS (put at end of file) ===== */
#srStatusPill.sr-status[data-state="open"]{
  background: #e6f9ef !important;
  color: #16a34a !important;
  border-color: rgba(22,163,74,.35) !important;
}
#srStatusPill.sr-status[data-state="open"] .sr-status__dot{
  background: #16a34a !important;
  box-shadow: 0 0 8px rgba(22,163,74,.6) !important;
}
#srStatusPill.sr-status[data-state="closed"]{
  background: #fde8e8 !important;
  color: #dc2626 !important;
  border-color: rgba(220,38,38,.35) !important;
}
#srStatusPill.sr-status[data-state="closed"] .sr-status__dot{
  background: #dc2626 !important;
  box-shadow: 0 0 8px rgba(220,38,38,.6) !important;
}

/* =========================
   0) Tokens
   ========================= */
:root{
  --sr-bg:#fafafa;
  --sr-card:#ffffff;
  --sr-text:#111827;
  --sr-muted:#6b7280;
  --sr-border:#e5e7eb;
  --sr-shadow:0 10px 24px rgba(0,0,0,.10);

  /* Brand / Accent */
  --sr-accent:#e86800;
  --sr-accent2:#c93c20;

  /* HERO gradients (LIGHT) */
  --sr-hero-grad-1: radial-gradient(circle at 50% 20%, rgba(232,104,0,.18), transparent 60%);
  --sr-hero-grad-2: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);

  /* Stars */
  --sr-star-off:#e5e7eb;
  --sr-star-on:#f59e0b;

  /* Buttons */
  --sr-btn-bg: var(--sr-card);
  --sr-btn-text: var(--sr-text);
  --sr-btn-border: var(--sr-border);
  --sr-btn-hover-bg: color-mix(in srgb, var(--sr-card) 85%, var(--sr-bg) 15%);
  --sr-btn-hover-border: color-mix(in srgb, var(--sr-border) 70%, #000 30%);

  --sr-primary-grad: linear-gradient(180deg, #ff9a00, var(--sr-accent));
  --sr-primary-shadow: 0 10px 30px rgba(232,104,0,.35);

  /* Status pill colors */
  --sr-open-bg:#e6f9ef;
  --sr-open-text:#16a34a;
  --sr-open-dot:#16a34a;

  --sr-closed-bg:#fde8e8;
  --sr-closed-text:#dc2626;
  --sr-closed-dot:#dc2626;

  --sr-loading-bg: color-mix(in srgb, var(--sr-card) 70%, var(--sr-bg));
  --sr-loading-text: color-mix(in srgb, var(--sr-text) 65%, var(--sr-muted));
  --sr-loading-dot: color-mix(in srgb, var(--sr-muted) 70%, #fff 30%);
}

html[data-theme="dark"]{
  --sr-bg:#0b0f17;
  --sr-card:#0f172a;
  --sr-text:#e5e7eb;
  --sr-muted:#9ca3af;
  --sr-border:rgba(255,255,255,.10);
  --sr-shadow:0 14px 36px rgba(0,0,0,.45);

  /* HERO gradients (DARK) */
  --sr-hero-grad-1: radial-gradient(circle at 50% 20%, rgba(232,104,0,.22), transparent 60%);
  --sr-hero-grad-2: linear-gradient(180deg, rgba(15,23,42,.95) 0%, rgba(11,15,23,1) 100%);

  /* Buttons */
  --sr-btn-hover-border: color-mix(in srgb, var(--sr-border) 55%, #fff 45%);

  /* Status in dark (slightly deeper) */
  --sr-open-bg: color-mix(in srgb, #16a34a 18%, var(--sr-card));
  --sr-closed-bg: color-mix(in srgb, #dc2626 18%, var(--sr-card));
  --sr-loading-bg: color-mix(in srgb, var(--sr-card) 75%, #000 25%);
}

/* =========================
   1) Layout
   ========================= */
.container{
  max-width:1200px;
  margin:0 auto;
  padding:0 16px;
}

.sr-main{
  min-height:60vh;
  background: var(--sr-bg);
  color: var(--sr-text);
}

/* =========================
   2) HERO
   ========================= */
.sr-hero{
  position:relative;
  overflow:hidden;
  padding:80px 0 60px;
  background: var(--sr-hero-grad-1), var(--sr-hero-grad-2);
}

.sr-hero__bg,
.sr-hero__shade{
  display:none;
}

.sr-hero__inner{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:18px;
}

/* =========================
   3) STATUS PILL (ONE SOURCE OF TRUTH)
   data-state: loading | open | closed
   ========================= */
.sr-status{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 16px;
  border-radius:999px;

  border:1px solid color-mix(in srgb, var(--sr-border) 75%, transparent);
  background: var(--sr-loading-bg);
  color: var(--sr-loading-text);

  font-weight:900;
  font-size:14px;
  letter-spacing:.01em;
  box-shadow: var(--sr-shadow);
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}

.sr-status__dot{
  width:10px;
  height:10px;
  border-radius:999px;
  background: var(--sr-loading-dot);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--sr-loading-dot) 22%, transparent);
  transition: background .2s ease, box-shadow .2s ease;
}

.sr-status[data-state="open"]{
  background: var(--sr-open-bg);
  color: green;
  border-color: color-mix(in srgb, var(--sr-open-dot) 30%, var(--sr-border));
}

.sr-status[data-state="open"] .sr-status__dot{
  background: var(--sr-open-dot);
  box-shadow: 0 0 10px color-mix(in srgb, var(--sr-open-dot) 55%, transparent);
}

.sr-status[data-state="closed"]{
  background: var(--sr-closed-bg);
  color: var(--sr-closed-text);
  border-color: color-mix(in srgb, var(--sr-closed-dot) 30%, var(--sr-border));
}

.sr-status[data-state="closed"] .sr-status__dot{
  background: var(--sr-closed-dot);
  box-shadow: 0 0 10px color-mix(in srgb, var(--sr-closed-dot) 55%, transparent);
}

/* Optional: tiny pulse when open (subtle) */
@media (prefers-reduced-motion: no-preference){
  .sr-status[data-state="open"] .sr-status__dot{
    animation: srPulse 1.6s ease-in-out infinite;
  }
}
@keyframes srPulse{
  0%, 100% { box-shadow: 0 0 10px color-mix(in srgb, var(--sr-open-dot) 55%, transparent); }
  50%      { box-shadow: 0 0 16px color-mix(in srgb, var(--sr-open-dot) 65%, transparent); }
}

/* =========================
   4) AVATAR
   ========================= */
.sr-avatar{
  width:92px;
  height:92px;
  border-radius:999px;
  display:grid;
  place-items:center;

  background: linear-gradient(180deg, #ff9a00, var(--sr-accent));
  box-shadow: 0 12px 30px color-mix(in srgb, var(--sr-accent) 25%, transparent);
}

.sr-avatar__letter{
  font-weight:1000;
  font-size:38px;
  color:#ffffff;
}

/* =========================
   5) TITLE / SUBTITLE
   ========================= */
.sr-hero__title{
  font-weight:1000;
  font-size:clamp(32px, 5vw, 56px);
  line-height:1.15;
  letter-spacing:-.02em;
  margin:10px 0 0;
  color: var(--sr-text);
}

.sr-hero__subtitle{
  font-size:clamp(15px, 2.2vw, 18px);
  max-width:60ch;
  color: var(--sr-muted);
  font-weight:700;
}

/* =========================
   6) META (Rating + Price)
   ========================= */
.sr-meta{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  flex-wrap:wrap;
  margin-top:6px;
  color: color-mix(in srgb, var(--sr-text) 80%, var(--sr-muted));
}

.sr-stars{
  position:relative;
  font-size:18px;
  letter-spacing:2px;
  line-height:1;
}

.sr-stars__off{ color: var(--sr-star-off); }

.sr-stars__on{
  position:absolute;
  left:0;
  top:0;
  width:90%;
  overflow:hidden;
  color: var(--sr-star-on);
  white-space:nowrap;
}

.sr-meta__num{
  font-weight:1000;
  font-size:18px;
  color: var(--sr-text);
}

.sr-meta__reviews{
  color: var(--sr-muted);
  font-weight:700;
}

.sr-meta__price{
  font-weight:900;
  color: color-mix(in srgb, var(--sr-text) 85%, var(--sr-muted));
}

/* =========================
   7) CTA BUTTONS
   ========================= */
.sr-cta{
  margin-top:24px;
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:14px;
  width:min(1000px, 100%);
}

.sr-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:15px 14px;
  border-radius:14px;

  border:1px solid var(--sr-btn-border);
  background: var(--sr-btn-bg);
  color: var(--sr-btn-text);

  text-decoration:none;
  font-weight:900;
  transition:.2s ease;
  box-shadow: var(--sr-shadow);
}

.sr-btn:hover{
  border-color: var(--sr-btn-hover-border);
  background: var(--sr-btn-hover-bg);
  transform:translateY(-2px);
}

.sr-btn--primary{
  background: var(--sr-primary-grad);
  border:0;
  color:#ffffff;
  box-shadow: var(--sr-primary-shadow);
}

.sr-btn--primary:hover{
  transform:translateY(-2px);
  box-shadow: var(--sr-primary-shadow);
}

.sr-btn__icon{
  width:18px;
  display:inline-flex;
  justify-content:center;
  opacity:.9;
}

/* =========================
   8) SECTIONS
   ========================= */
.sr-section{
  padding:60px 0;
  border-top:1px solid color-mix(in srgb, var(--sr-border) 70%, transparent);
}

.sr-section__title{
  font-weight:1000;
  margin-bottom:10px;
  letter-spacing:-.01em;
}

.sr-section__muted{ color: var(--sr-muted); }

/* =========================
   9) Responsive
   ========================= */
@media (max-width: 900px){
  .sr-cta{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}

@media (max-width: 560px){
  .sr-hero{ padding:60px 0 50px; }
  .sr-avatar{ width:80px; height:80px; }
  .sr-btn{ padding:14px 12px; }
}