/* Frontend opening-hours accordion — one block per delivery method.
 * Scoped under .opt-frontend so it doesn't leak into other moreinfo cards.
 */
.opt-frontend {
  --opt-fe-ink:        #2a2a2a;
  --opt-fe-ink-2:      #595c5f;
  --opt-fe-muted:      #888;
  --opt-fe-line:       #d3d3d3;
  --opt-fe-line-2:     #9b9b9b;
  --opt-fe-surface:    #fff;
  --opt-fe-surface-2:  #fafafa;
  --opt-fe-open:       #1f9d63;
  --opt-fe-open-bg:    #e6f4eb;
  --opt-fe-closed:     #b8b8b8;
  --opt-fe-accent:     #595c5f;
  --opt-fe-radius:     6px;
}

.opt-frontend .opt-method-block {
  border: 1px solid var(--opt-fe-line);
  border-radius: var(--opt-fe-radius);
  background: var(--opt-fe-surface);
  margin: 0 0 8px;
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}
.opt-frontend .opt-method-block[open] {
  border-color: var(--opt-fe-line-2);
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
}

.opt-frontend .opt-method-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  padding: 12px 10px;
  cursor: pointer;
  user-select: none;
  list-style: none;
  font-size: 14px;
  color: var(--opt-fe-ink);
  outline: none;
}
.opt-frontend .opt-method-status {
  flex: 1 1 auto;
  min-width: 0;
}
.opt-frontend .opt-chevron { margin-left: auto; }
.opt-frontend .opt-method-summary::-webkit-details-marker { display: none; }

.opt-frontend .opt-method-name {
  font-weight: 600;
  letter-spacing: 0.005em;
}

.opt-frontend .opt-method-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--opt-fe-ink-2);
}
.opt-frontend .opt-status-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--opt-fe-closed);
  flex: none;
}
.opt-frontend .opt-method-block.is-open  .opt-status-dot {
  background: var(--opt-fe-open);
  box-shadow: 0 0 0 3px var(--opt-fe-open-bg);
}
.opt-frontend .opt-status-text strong { font-weight: 600; color: var(--opt-fe-ink); }
.opt-frontend .opt-status-text .opt-until {
  color: var(--opt-fe-muted);
  margin-left: 4px;
}

.opt-frontend .opt-chevron {
  color: var(--opt-fe-muted);
  font-size: 12px;
  line-height: 1;
  transition: transform .18s ease;
  transform-origin: center;
}
.opt-frontend .opt-method-block[open] .opt-chevron { transform: rotate(180deg); }

/* ── Week grid ─────────────────────────────────────── */
.opt-frontend .opt-week {
  border-top: 1px solid var(--opt-fe-line);
  background: var(--opt-fe-surface-2);
  padding: 4px 0;
}
.opt-frontend .opt-week-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  padding: 8px 14px;
  gap: 12px;
  font-size: 13px;
  border-bottom: 1px dashed var(--opt-fe-line);
}
.opt-frontend .opt-week-row:last-child { border-bottom: 0; }
.opt-frontend .opt-week-row.is-today {
  background: linear-gradient(to right, rgba(0,0,0,.05) 0%, rgba(0,0,0,.01) 70%, transparent 100%);
  border-left: 2px solid var(--opt-fe-line-2);
  padding-left: 12px;
}
.opt-frontend .opt-week-row.is-today .opt-week-day-name {
  color: var(--opt-fe-ink);
}
.opt-frontend .opt-week-day-name {
  font-weight: 600;
  color: var(--opt-fe-ink);
  min-width: 80px;
}
.opt-frontend .opt-week-day-date {
  font-size: 11px;
  color: var(--opt-fe-muted);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.opt-frontend .opt-week-hours {
  color: var(--opt-fe-ink-2);
  font-variant-numeric: tabular-nums;
  margin-left: auto;
}
.opt-frontend .opt-week-hours em {
  font-style: italic;
  color: var(--opt-fe-muted);
}
.opt-frontend .opt-week-slot + .opt-week-slot::before {
  content: '·';
  margin: 0 6px;
  color: var(--opt-fe-muted);
}

/* The chip wrapper inherits its padding/border from the template's
   `.list-restaurants-body .rest-info div { … }` rule — we don't override it. */

/* ── Compact status pill + popover (mobile-first, works on desktop) ───
 *
 * Pill: a real <button> the user can tap to reveal per-method detail.
 * Popover: absolute below the pill on desktop, drops into a bottom sheet on small screens.
 * Hard-coded colors (no var() dependency) so it works in any container.
 */
/* Structural styling on whatever element the layout rendered as its outer wrapper.
   Class is caller-controlled; this attribute gives the wrapper the popover-anchor
   behavior regardless of class name. */
[data-opt-status] {
  position: relative;
}

.opt-status-pill {
  appearance: none;
  background: transparent;
  border: 0;
  /* Vertical padding + min-height give a >=24px touch target (WCAG 2.2 2.5.8);
     content was ~16px tall and failed the touch-target audit. align-items:center
     keeps the single line vertically centred in the taller box. */
  padding: 4px 2px;
  margin: 0;
  min-height: 24px;
  box-sizing: border-box;
  font: inherit;
  color: #595c5f;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Single-line pill content: methods + time inline. State is conveyed entirely by
   per-method colour + strikethrough; no leading dot, no "Open / Closed" word needed. */
.opt-status-pill-content {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  font-size: .825rem;
  line-height: 1.25;
  color: #595c5f;
}
.opt-status-pill-method {
  font-weight: 600;
  letter-spacing: 0.005em;
}
.opt-status-pill-method.is-open   { color: #198352; }
.opt-status-pill-method.is-closed {
  color: #c54f4f;
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}
.opt-status-pill-sep {
  color: #b8b8b8;
  font-weight: 400;
  margin: 0 1px;
}
.opt-status-pill-time {
  color: #2a2a2a;
  font-weight: 500;
}
.opt-status-pill-primary {
  color: #2a2a2a;
  font-weight: 600;
}

/* Subtle "tap me" affordance: a CSS-drawn chevron (border corner) that rotates when
   the popover opens. Border-corner is symmetric on both axes — centers cleanly inside
   the circle and stays centered after the 90deg rotation, which a `›` text glyph wouldn't. */
.opt-status-pill-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;     /* override the pill's `align-items: baseline` */
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .06);
  color: #595c5f;
  flex: none;
  transition: transform .18s ease, background .15s;
}
.opt-status-pill-icon::before {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  /* -1px X compensates for the L-shape's optical center being slightly right of geometric. */
  transform: translateX(-1px) rotate(-45deg);
}
.opt-status-pill:hover .opt-status-pill-icon,
.opt-status-pill:focus-visible .opt-status-pill-icon {
  background: rgba(0, 0, 0, .12);
}
.opt-status-pill[aria-expanded="true"] .opt-status-pill-icon {
  /*transform: rotate(90deg);*/
  background: rgba(0, 0, 0, .12);
}

/* ── Popover — right-side drawer ─────────────────────────
 * Same animation pattern as the project's login modal and cart drawer:
 *   1. JS adds .is-animatable     → enables the transition
 *   2. JS adds .is-open next frame → triggers translateX(100%) → 0
 *   3. JS removes .is-open         → slides back out
 *
 * The element never moves in the DOM — `position: fixed` pins it to the viewport
 * (top-right corner) and we just slide it in/out via transform.
 */
.opt-status-popover {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 380px;
  max-width: 92vw;
  margin: 0;
  padding: 0;
  background: #fefefe;
  box-shadow: -12px 0 32px rgba(0, 0, 0, .12);
  font-size: 14px;
  line-height: 1.45;
  color: #2a2a2a;
  z-index: 55700;
  overflow-y: auto;
  overscroll-behavior: contain;

  transform: translateX(100%);
  will-change: transform;
  pointer-events: auto;
}
.opt-status-popover[hidden]            { display: none; }
.opt-status-popover .opt-frontend      { padding: 14px 14px 0; }
.opt-status-popover.is-animatable      { transition: transform 130ms ease-in; }
.opt-status-popover.is-open            { transform: none; }
.opt-status-popover.is-open.is-animatable { transition: transform 330ms ease-out; }

/* Mobile: full-width drawer. */
@media (max-width: 480px) {
  .opt-status-popover {
    width: 100%;
    max-width: 100%;
  }
}

/* Header — same look as the project's reviews / moreinfo headers but standalone
   (the .reviews-header rule in template.css is scoped to .reviews descendants
   so it doesn't apply to a drawer that lives elsewhere). We re-declare the
   styles here against our own class. The .close-btn-outer + .close-btn
   utilities are unscoped in the template and apply as-is, giving us the
   back-arrow chevron for free. */
.opt-status-popover-header {
  position: sticky;
  top: 0;
  height: var(--top-header-height);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--top-header-bgcolor);
  color: var(--top-header-textcolor);
  box-shadow: 0 1px 7px 0 rgba(0, 0, 0, .13);
  font-weight: 600;
  z-index: 1;
}
.opt-status-popover-close { cursor: pointer; }

/* Custom backdrop — reliably absorbs clicks (native ::backdrop leaks on some browsers). */
.opt-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(0, 0, 0, 0);
  pointer-events: none;
  transition: background .22s ease;
}
.opt-backdrop.is-active {
  background: rgba(0, 0, 0, .35);
  pointer-events: auto;
}

/* Fallback list (when raw opening_times isn't available — caller didn't pass it). */
.opt-status-popover-fallback {
  list-style: none;
  margin: 0;
  padding: 0;
}
.opt-status-popover-fallback li {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 8px 16px;
  padding: 12px 18px;
  border-bottom: 1px solid #f1f1f1;
  border-left: 2px solid transparent;
}
.opt-status-popover-fallback li:last-child { border-bottom: 0; }
.opt-status-popover-fallback li.is-open {
  border-left-color: #1f9d63;
}
.opt-status-popover-fallback .method-name {
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.005em;
}
.opt-status-popover-fallback .method-detail {
  font-size: 12.5px;
  color: #6e6e6e;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.opt-status-popover-fallback li.is-closed .method-name {
  color: #c54f4f;
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}
.opt-status-popover-fallback li.is-closed .method-detail {
  color: #9b9b9b;
}


@media (max-width: 480px) {
  .opt-frontend .opt-method-summary {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "name chevron"
      "status status";
    row-gap: 4px;
  }
  .opt-frontend .opt-method-name   { grid-area: name; }
  .opt-frontend .opt-method-status { grid-area: status; }
  .opt-frontend .opt-chevron       { grid-area: chevron; }
  .opt-frontend .opt-week-row {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}