/* ============================================
   SIPO API component styles — Mr. Kebab
   ============================================
   Status strip, offer banner, live hours and
   popular items. Colours come from the brand
   tokens defined in css/styles.css.
   ============================================ */

/* ---------- status strip ---------- */
.status-strip{
  position:relative;z-index:120;
  background:var(--maroon-dk,#4d0d10);color:#fff;
  font-size:.83rem;font-weight:500;letter-spacing:.01em;
  text-align:center;
}
.status-strip-inner{
  width:min(1180px,calc(100% - 2.5rem));margin-inline:auto;
  display:flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.55rem 0;flex-wrap:wrap;
}
.status-strip-dot{
  width:8px;height:8px;border-radius:50%;flex:none;
  background:#9ca3af;box-shadow:0 0 0 3px rgba(255,255,255,.12);
}
.status-strip a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.status-strip a:hover{color:var(--amber,#ec882b)}

.status-strip.open{background:#14532d}
.status-strip.open .status-strip-dot{
  background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.25);
  animation:strip-pulse 2.2s ease-in-out infinite;
}
.status-strip.closed{background:#7f1d1d}
.status-strip.closed .status-strip-dot{background:#f87171;box-shadow:0 0 0 3px rgba(248,113,113,.22)}
.status-strip.error{background:var(--char,#231f20)}
.status-strip.error .status-strip-dot{background:var(--amber,#ec882b)}

.countdown-timer{font-variant-numeric:tabular-nums;font-weight:700}

@keyframes strip-pulse{
  0%,100%{box-shadow:0 0 0 3px rgba(34,197,94,.25)}
  50%{box-shadow:0 0 0 6px rgba(34,197,94,.08)}
}
@media (prefers-reduced-motion:reduce){
  .status-strip.open .status-strip-dot{animation:none}
}

/* ---------- offer banner (replaces the old popup) ---------- */
.offer-banner{
  position:relative;z-index:119;
  background:linear-gradient(100deg,var(--amber,#ec882b),var(--flame,#e55321));
  color:#fff;
}
.offer-banner__inner{
  width:min(1180px,calc(100% - 2.5rem));margin-inline:auto;
  display:flex;align-items:center;gap:.85rem;padding:.7rem 0;
}
.offer-banner__img{width:36px;height:36px;border-radius:8px;object-fit:cover;flex:none}
.offer-banner__text{margin:0;font-size:.9rem;font-weight:600;flex:1}
.offer-banner__close{
  border:0;background:rgba(255,255,255,.18);color:#fff;cursor:pointer;
  width:28px;height:28px;border-radius:50%;font-size:1.1rem;line-height:1;flex:none;
}
.offer-banner__close:hover{background:rgba(255,255,255,.32)}

/* ---------- live hours ---------- */
.hours-list{list-style:none;margin:0;padding:0}
.hours-list li,
.hours-row{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding:.5rem 0;font-size:.94rem;
}
.hours-list li + li,
.hours-row + .hours-row{border-top:1px dashed var(--line,rgba(112,20,24,.14))}
.hours-list .day,.hours-row .day{font-weight:600;color:var(--char,#231f20)}
.hours-list .time,.hours-row .time{color:var(--ink-soft,#6a5c5c);text-align:right}
.hours-list li.today,.hours-row.today{
  color:var(--maroon,#701418);
  font-weight:700;
}
.hours-list li.today .day,.hours-row.today .day,
.hours-list li.today .time,.hours-row.today .time{color:var(--maroon,#701418)}
.closed-day{color:#b91c1c !important}
.hours-unavailable{margin:0;font-size:.92rem;color:var(--ink-soft,#6a5c5c)}

/* dark contexts (footer) */
.site-footer .hours-list .day{color:rgba(255,255,255,.9)}
.site-footer .hours-list .time{color:rgba(255,255,255,.66)}
.site-footer .hours-list li + li{border-top-color:rgba(255,255,255,.12)}
.site-footer .hours-list li.today .day,
.site-footer .hours-list li.today .time{color:var(--amber,#ec882b)}

/* ---------- popular items (home page) ---------- */
.pop-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;
}
.pop-card{
  background:var(--paper,#fff);border:1px solid var(--line,rgba(112,20,24,.14));
  border-radius:var(--r-lg,26px);padding:1.6rem 1.5rem;
  box-shadow:var(--shadow,0 18px 40px -22px rgba(77,13,16,.45));
  display:flex;flex-direction:column;
}
.pop-card__cat{
  margin:0 0 .5rem;font-size:.68rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--flame,#e55321);
}
.pop-card h3{
  font-family:var(--f-display,serif);font-size:1.25rem;font-weight:700;
  color:var(--maroon,#701418);margin:0 0 .5rem;
}
.pop-card__desc{margin:0 0 1rem;font-size:.9rem;color:var(--ink-soft,#6a5c5c);flex:1}
.pop-card__price{
  margin:auto 0 0;font-family:var(--f-display,serif);font-weight:700;
  font-size:1.15rem;color:var(--char,#231f20);
}
@media (max-width:880px){.pop-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.pop-grid{grid-template-columns:1fr}}

/* ---------- menu page states ---------- */
.menu-loading{
  text-align:center;color:var(--ink-soft,#6a5c5c);padding:3rem 0;font-size:.95rem;
}
.menu-loading::before{
  content:"";display:block;width:28px;height:28px;margin:0 auto 1rem;
  border:3px solid var(--line,rgba(112,20,24,.2));border-top-color:var(--flame,#e55321);
  border-radius:50%;animation:menu-spin .8s linear infinite;
}
@keyframes menu-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.menu-loading::before{animation-duration:2.4s}}

.menu-empty{text-align:center;color:var(--ink-soft,#6a5c5c);padding:2.5rem 0}
.menu-empty a{color:var(--maroon,#701418);font-weight:600}

.dish__size{
  display:inline-block;margin-left:.6rem;font-size:.9rem;
  color:var(--maroon,#701418);white-space:nowrap;
}
.dish__size:first-child{margin-left:0}

/* ---------- ordering disabled ---------- */
body.ordering-disabled [data-order-url],
body.ordering-disabled .order-link,
body.ordering-disabled .nav-order-btn{
  opacity:.5;pointer-events:none;
}