/* ═══ EVENT INFO PAGE: THE PROTOTYPE'S SHARED PIECES (window 10) ═══════════════
   Rules the approved prototype keeps in oep/oep.css and several sections use:
   the section card, the buttons, the modal, the form fields, the note and the
   done state. oep.css is not loaded on this site, so they are ported here once
   rather than copied into each section's file.

   Ported as drawn, with three kinds of change only:
     - colours and radii through the --eip-* tokens (event-page.css :root),
       never a literal the token already names;
     - logical properties only, so Arabic mirrors without a second rule;
     - where the Bible and the prototype disagree the Bible wins: the modal is
       560px with a 28px radius (Bible §16), not the prototype's 520 and 24.

   [hidden] is restated wherever a rule sets display, because any author
   display beats the user agent's display:none for the attribute (window 3's
   share menu rendered open at the foot of the page for exactly that reason).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── THE DESIGN'S TEXT BASE, restored inside every section and overlay ──
   The prototype's root is 16px with line-height: normal. This site's body is
   28px line-height from master's stack, and Bootstrap sets h1-h6 to 1.1, so
   without this every pill grew from 42px to 52px, a one-line meta row to 27px
   and each heading lost 4px -- measured on both sides, not judged from the
   picture. */
.oep-csec, .oep-mov { font-size: 16px; line-height: normal; }
.oep-csec h2, .oep-csec h3, .oep-mov h2, .oep-mov h3 { line-height: normal; }

/* ── the section card (oep.css 106-111, 120) ── */
.oep-csec { background: var(--eip-surface); border: 1px solid var(--eip-line);
  border-radius: 24px; overflow: hidden; font-family: var(--o5-display); }
.oep-csec-h { padding: 22px 30px; background: var(--eip-surface-2); }
.oep-csec-h h2 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.015em;
  color: var(--eip-ink); }
.oep-csec-h p { margin: 4px 0 0; font-size: 14px; color: var(--eip-ink2); line-height: 1.5; }
.oep-csec-b { padding: 26px 30px 30px; }
.oep-csec-b > :first-child { margin-top: 0; }
@media (max-width: 760px) {
  .oep-csec-h { padding: 18px 20px; }
  .oep-csec-b { padding: 20px; }
  .oep-csec { border-radius: 20px; }
}

/* ── buttons (oep.css 21-22) ── */
.oep-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--eip-h-ctl); padding: 0 22px; border-radius: var(--eip-r-pill);
  border: 1px solid var(--eip-line); background: var(--eip-surface); color: var(--eip-ink);
  font-family: var(--o5-display); font-size: 14px; font-weight: 800; cursor: pointer;
  white-space: nowrap; }
.oep-btn:hover { border-color: var(--eip-ink); }
.oep-btn.is-red { background: var(--eip-red); border-color: var(--eip-red); color: #fff; }
.oep-btn.is-red:hover { background: var(--eip-red-hover); }
.oep-btn.is-ghost { background: none; }
.oep-btn[disabled] { opacity: .6; cursor: default; }

/* ── the modal (oep.css 36-40, 66; size and radius from Bible §16) ── */
.oep-mov { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center;
  justify-content: center; padding: 20px; background: rgba(20, 16, 14, .6);
  backdrop-filter: blur(3px); }
.oep-mov[hidden] { display: none; }
.oep-modal { width: min(560px, 100%); max-height: calc(100vh - 40px); display: flex;
  flex-direction: column; background: var(--eip-surface); border-radius: var(--eip-r-lg);
  box-shadow: 0 40px 80px -24px rgba(0, 0, 0, .45); font-family: var(--o5-display);
  color: var(--eip-ink); }
.oep-modal:focus { outline: none; }
.oep-modal-h { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 18px 22px; }
.oep-modal-h h3 { margin: 0; font-size: 18px; font-weight: 800; color: var(--eip-ink); }
.oep-x { display: grid; place-items: center; width: 38px; height: 38px; flex: none;
  border-radius: 50%; border: 1px solid var(--eip-line); background: var(--eip-surface);
  color: var(--eip-ink); cursor: pointer; padding: 0; }
.oep-modal-b { padding: 0 22px 22px; overflow-y: auto; }
.oep-modal-a { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }
body.eip-scroll-lock { overflow: hidden; }

/* ── note, fields, errors (oep.css 62-65) ── */
.oep-note { display: flex; gap: 8px; align-items: flex-start; padding: 12px 14px;
  margin-bottom: 14px; border-radius: 14px; background: var(--eip-surface-2); font-size: 13.5px;
  line-height: 1.45; color: var(--eip-ink); }
.oep-note .oi { flex: none; margin-top: 1px; }
/* font-weight: 400 because Bootstrap makes every label 700, and the inputs take
   it through font: inherit -- every field typed bold until this was measured. */
.oep-f { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; font-weight: 400; max-width: none; }
.oep-f > span { font-size: 12.5px; font-weight: 700; }
.oep-f input, .oep-f textarea { width: 100%; height: var(--eip-h-ctl); padding: 0 18px;
  border: 1px solid var(--eip-field); border-radius: var(--eip-r-pill); background: var(--eip-surface);
  font: inherit; font-size: 14px; color: var(--eip-ink); outline: none; box-sizing: border-box; }
.oep-f textarea { height: auto; padding: 12px 18px; border-radius: var(--eip-r-md); resize: vertical; }
.oep-f input:focus, .oep-f textarea:focus { border-color: var(--eip-ink); }
.oep-f input[readonly] { background: var(--eip-surface-2); color: var(--eip-ink2); }
.oep-f.has-err input, .oep-f.has-err textarea { border-color: var(--eip-red); }
.oep-f em, .oep-err { font-style: normal; font-size: 12px; font-weight: 700; color: var(--eip-red-hover); }
.oep-f em[hidden], .oep-err[hidden] { display: none; }
/* The autofill highlight reset, which the Tixbox rulings ask of every stylesheet. */
.oep-f input:-webkit-autofill, .oep-f input:-webkit-autofill:hover, .oep-f input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 40px var(--eip-surface) inset; -webkit-text-fill-color: var(--eip-ink);
  transition: background-color 9999s; }

/* ── the done state (oep.css 67) ── */
.oep-done { display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 8px; padding: 20px 0; }
.oep-done[hidden] { display: none; }
.oep-done-i { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  background: var(--eip-green); color: #fff; }
.oep-done p { margin: 0 0 10px; color: var(--eip-ink2); font-size: 14px; }

/* ── the cream icon square, used by key points and amenities (oep.css) ── */
.oep-amen-i { display: grid; place-items: center; width: 40px; height: 40px; flex: none;
  border-radius: var(--eip-r-sm); background: var(--eip-surface-2); color: var(--eip-ink); }

/* ── "Read the full terms" / "Show N more" (oep.css, its two rules merged as they cascade) ── */
.oep-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 20px; height: 44px;
  padding: 0 20px; border: 0; border-radius: var(--eip-r-pill); background: var(--eip-surface-2);
  font-family: var(--o5-display); font-size: 14px; font-weight: 600; color: var(--eip-ink);
  cursor: pointer; text-decoration: none; line-height: normal; }
.oep-more:hover { background: var(--eip-line); }
[dir="rtl"] .eip-flip { transform: scaleX(-1); }

/* ── the drawer (oep.css; width and scrim from Bible §16: 520px, 40% black,
      shadow only while open) ── */
.oep-dov { position: fixed; inset: 0; z-index: 1250; background: rgba(0, 0, 0, 0);
  transition: background .25s; font-size: 16px; line-height: normal; }
.oep-dov[hidden] { display: none; }
.oep-dov.is-o { background: rgba(0, 0, 0, .4); }
.oep-dw { position: absolute; top: 0; bottom: 0; inset-inline-end: 0; width: min(520px, 100vw);
  display: flex; flex-direction: column; background: var(--eip-surface);
  border-start-start-radius: 24px; border-end-start-radius: 24px; box-shadow: none;
  transform: translateX(104%); transition: transform .28s cubic-bezier(.22, .61, .36, 1), box-shadow .28s;
  font-family: var(--o5-display); color: var(--eip-ink); }
[dir="rtl"] .oep-dw { transform: translateX(-104%); }
.oep-dov.is-o .oep-dw { transform: none; box-shadow: -30px 0 60px -30px rgba(0, 0, 0, .4); }
[dir="rtl"] .oep-dov.is-o .oep-dw { box-shadow: 30px 0 60px -30px rgba(0, 0, 0, .4); }
.oep-dw:focus { outline: none; }
.oep-dw-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 24px 26px 18px; border-bottom: 1px solid var(--eip-line); }
.oep-dw-h h3 { margin: 0; font-size: 20px; font-weight: 800; line-height: normal; color: var(--eip-ink); }
.oep-dw-h p { margin: 4px 0 0; font-size: 13.5px; color: var(--eip-ink2); }
.oep-dw-b { flex: 1; overflow-y: auto; padding: 22px 26px 32px; }
@media (max-width: 760px) { .oep-dw { width: 100vw; border-radius: 0; } }
@media (prefers-reduced-motion: reduce) { .oep-dov, .oep-dw { transition: none; } }