/* ═══ EVENT INFO PAGE, SECTION 6: THE BOOKING BOX AND THE PHONE BAR (window 14) ═
   The box's base rules (.evp-widget, -from, -body, -group, -label, .evp-date,
   .evp-time, .evp-btn-proceed) are already in event-page.css, which is the
   design's own event-page.css. This file adds what the prototype's oep.css
   layers on top of them (oep.css 39, 69-71, 75, 89-91, 95, 116-130, 142-143,
   273-275), scoped to #eipBooking and the bar so nothing else moves.

   WHERE THE BIBLE AND THE PROTOTYPE DISAGREE, THE BIBLE WINS (the brief's rule
   0.3), and each is listed in the report:
     - radius 28px (Bible 10), not the prototype's 24;
     - the price 22px currency / 44px amount (Bible 10), not 18 / 32;
     - the dates pill on a white 18% fill (Bible 10), not 12%;
     - Find tickets a 56px pill (Bible 10);
     - a sold-out time struck through as well as disabled (Bible 10);
     - the phone bar on a 28px top radius with an upward shadow (Bible 15, by
       Mac's ruling), not the prototype's top hairline.

   Logical properties only. The site's body line-height is 28px and the
   prototype's root is normal, so every sized control here restates it --
   window 3 measured 49px pills against the design's 39 for exactly that.
   ═══════════════════════════════════════════════════════════════════════════ */

#eipBooking { position: relative; font-size: 16px; line-height: normal; background: var(--eip-surface);
  border: 1px solid var(--eip-line); border-radius: var(--eip-r-lg); box-shadow: var(--eip-shadow-box); }
#eipBooking p { line-height: normal; }

/* the red band (Bible 10: "FROM", currency 22, amount 44/800, dates pill 18%) */
#eipBooking .evp-widget-from { border-start-start-radius: inherit; border-start-end-radius: inherit; }
#eipBooking .evp-widget-from .ccy { font-size: 22px; }
#eipBooking .evp-widget-from .price { font-size: 44px; }
#eipBooking .evp-widget-from-r { background: rgba(255, 255, 255, .18); }
#eipBooking .evp-widget-body { background: var(--eip-surface); border-end-start-radius: inherit;
  border-end-end-radius: inherit; }

/* labels and arrows (oep.css 123-124) */
#eipBooking .oep-wl { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 10px; }
#eipBooking .oep-wl .evp-widget-label { margin: 0; }
#eipBooking .oep-arr { display: flex; gap: 6px; }
#eipBooking .oep-arr button { display: grid; place-items: center; width: 32px; height: 32px; padding: 0;
  border-radius: 50%; border: 1px solid var(--eip-line); background: var(--eip-surface); color: var(--eip-ink);
  cursor: pointer; line-height: normal; }
#eipBooking .oep-arr button:disabled { opacity: .35; cursor: default; }
[dir="rtl"] #eipBooking .eip-flip, [dir="rtl"] .eip-mbar .eip-flip { transform: scaleX(-1); }

/* the strips (oep.css 125-127) */
#eipBooking .oep-scroll { display: flex; flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity;
  scrollbar-width: none; gap: 8px; }
#eipBooking .oep-scroll::-webkit-scrollbar { display: none; }
#eipBooking .oep-scroll > .oep-chip { flex: 0 0 calc((100% - 32px) / 5); scroll-snap-align: start;
  box-shadow: none; }
#eipBooking .oep-scroll > .evp-time.oep-chip { flex-basis: auto; min-width: 72px; display: inline-flex;
  align-items: center; justify-content: center; line-height: normal; }
#eipBooking .eip-bk-day[hidden] { display: none; }

/* the chips: cream, selected black (Bible 10; oep.css 128-129, 142, 273) */
#eipBooking .oep-chip { background: var(--eip-cream); border-color: var(--eip-cream-line); color: var(--eip-ink);
  font-family: var(--o5-display); line-height: normal; }
#eipBooking .evp-date.oep-chip { min-width: 0; }
#eipBooking .oep-dsel { cursor: pointer; }
#eipBooking .oep-dsel:hover { border-color: var(--eip-ink3); }
#eipBooking .oep-dsel.is-sel, #eipBooking .oep-dsel.is-sel:hover { background: var(--eip-ink); color: var(--eip-bg);
  border-color: var(--eip-ink); }
#eipBooking .oep-dsel.is-sel * { color: inherit; }
#eipBooking .oep-chip.is-disabled { opacity: .45; cursor: not-allowed; }
#eipBooking .evp-time.is-out { text-decoration: line-through; }
#eipBooking .oep-dsel:focus { outline: none; }
#eipBooking .oep-dsel:focus-visible { outline: 2px solid var(--eip-ink); outline-offset: 2px; }
#eipBooking .oep-fdot { display: inline-block; width: 7px; height: 7px; margin-inline-start: 6px; border-radius: 50%;
  background: var(--eip-amber); }

/* the notes (oep.css 71, 130, 143) */
#eipBooking .oep-wnote { display: flex; align-items: center; gap: 6px; margin: 10px 0 0;
  font-family: var(--o5-display); font-size: 13px; font-weight: 700; color: var(--eip-ink2); }
#eipBooking .oep-wnote[hidden] { display: none; }
#eipBooking .oep-wnote.is-few { color: var(--eip-amber-text); }
#eipBooking .oep-wnote.is-sold { color: var(--eip-red-hover); }
#eipBooking .oep-wnote .oi { flex: none; }

/* Find tickets: the full-width red 56px pill (Bible 10; oep.css 69, 101) */
.eip-booking .evp-btn-proceed { height: var(--eip-h-cta); padding: 0 22px; line-height: normal;
  text-decoration: none; color: #fff; }
.eip-booking .evp-btn-proceed:hover, .eip-booking .evp-btn-proceed:focus { color: #fff; text-decoration: none; }
.eip-booking .evp-btn-proceed:focus-visible { outline: 2px solid var(--eip-ink); outline-offset: 3px; }
.eip-booking .evp-btn-proceed[aria-disabled="true"] { opacity: .4; pointer-events: none; cursor: default; }

/* the advertisement's card: the box's band and its one link */
.eip-booking-advert { font-size: 16px; line-height: normal; background: var(--eip-surface);
  border: 1px solid var(--eip-line); border-radius: var(--eip-r-lg); box-shadow: var(--eip-shadow-box); }

/* the sheet's close button, shown only in the sheet (oep.css 39, 91) */
#eipSheetClose { display: none; }

/* ── the phone bar (Bible 15) and the sheet (Bible 16; oep.css 75, 89-91, 95) ── */
.eip-mbar, .eip-mbar-space, .eip-sheet-ov { display: none; }

@media (max-width: 760px) {
  /* The box lives in the sheet on a phone; the bar is how it is reached.
     Not in preview, which has no bar (ruled): there the box stays in the page. */
  #eipBooking:not(.is-sheet):not([data-preview]) { display: none; }
  .eip-booking-advert { display: none; }

  .eip-mbar { position: fixed; inset-inline: 0; bottom: 0; z-index: 900; display: flex; align-items: center;
    justify-content: space-between; gap: 12px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: var(--eip-surface); border-radius: var(--eip-r-lg) var(--eip-r-lg) 0 0;
    box-shadow: 0 -1px 2px rgba(20, 20, 20, .04), 0 -12px 28px -8px rgba(20, 20, 20, .14);
    font-family: var(--o5-display); line-height: normal; }
  .eip-mbar small { display: block; font-size: 12px; color: var(--eip-ink2); line-height: normal; }
  .eip-mbar b { font-size: 18px; font-weight: 800; color: var(--eip-ink); line-height: normal; }
  .eip-mbar .oep-btn { text-decoration: none; }
  .eip-mbar a.oep-btn, .eip-mbar a.oep-btn:hover { color: #fff; }
  /* The page's bottom padding is the bar's own height: 46px button + 24px. */
  .eip-mbar-space { display: block; height: calc(70px + env(safe-area-inset-bottom)); }

  .eip-sheet-ov { position: fixed; inset: 0; z-index: 1200; display: block; background: rgba(20, 16, 14, .55); }
  .eip-sheet-ov[hidden] { display: none; }
  #eipBooking.is-sheet { position: fixed; inset-inline: 0; bottom: 0; z-index: 1201; display: block;
    max-height: 88vh; overflow-y: auto; padding-top: 8px; border: 0; box-shadow: none;
    border-radius: 24px 24px 0 0; }
  #eipBooking.is-sheet .evp-widget-from { border-radius: 24px 24px 0 0; }
  #eipBooking.is-sheet #eipSheetClose { display: grid; place-items: center; position: absolute; top: 14px;
    inset-inline-end: 14px; z-index: 2; width: 38px; height: 38px; padding: 0; border-radius: 50%;
    border: 1px solid var(--eip-line); background: var(--eip-surface); color: var(--eip-ink); cursor: pointer; }
}

@media (prefers-reduced-motion: reduce) {
  #eipBooking .oep-scroll { scroll-behavior: auto; }
}