/* ============================================
   SIPO live components — CocoGo
   ============================================
   Only the top status strip. No modals or
   popups are rendered by this build.
   ============================================ */

/* Stickiness lives on the .site-header wrapper that holds the strip and the
   navbar together — see assets/site.css. */
.status-strip{
  background:var(--green-dark, #002d17);
  color:#eafff0;
  font-size:13px;
  font-weight:700;
  letter-spacing:.2px;
  padding:10px 0;
  transition:background .3s ease;
}
.status-strip.open{ background:#04421f; }
.status-strip.closed{ background:#6d1616; }
.status-strip.error{ background:#5a4a12; }

.status-strip-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}

.status-strip-state{
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-width:0;
}

.status-strip-dot{
  width:9px;
  height:9px;
  border-radius:50%;
  flex:0 0 auto;
  background:#cbd5cf;
}
.status-strip.open .status-strip-dot{
  background:#4ade80;
  box-shadow:0 0 0 0 rgba(74,222,128,.7);
  animation:strip-pulse 2s infinite;
}
.status-strip.closed .status-strip-dot{ background:#f87171; }
.status-strip.error .status-strip-dot{ background:#fbbf24; }

@keyframes strip-pulse{
  70%{ box-shadow:0 0 0 8px rgba(74,222,128,0); }
  100%{ box-shadow:0 0 0 0 rgba(74,222,128,0); }
}

.status-strip-text{ font-weight:800; }
.countdown-timer{
  font-variant-numeric:tabular-nums;
  font-weight:900;
  color:#ffd166;
}

.status-strip-meta{
  color:rgba(234,255,240,.78);
  font-weight:600;
  min-width:0;
}
.status-strip-meta a{ color:inherit; }
.status-strip-meta a:hover{ color:#ffd166; }
.status-strip-meta .sep{ opacity:.45; margin:0 4px; }

/* When ordering is switched off at the POS */
.ordering-disabled .order-link,
.ordering-disabled .nav-order-btn,
.ordering-disabled .floating-order,
.ordering-disabled [data-order-url]{
  pointer-events:none;
  opacity:.5;
  filter:grayscale(1);
}

/* Below this the address + phone can't share a line with the status text,
   so the strip would wrap to two rows and make the sticky header tall. */
@media (max-width: 900px){
  .status-strip{ font-size:12px; text-align:center; }
  .status-strip-inner{ justify-content:center; gap:4px 10px; }
  .status-strip-meta{ display:none; }
}