/* =====================================================================
   Event page — reproduces the two designs you supplied.
   Every colour comes from a CSS variable set per event in event.php,
   so the same markup renders the Red Bull night and the Master Cup
   night without duplicating any layout code.
   ================================================================== */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--deep-bg);
  overflow-x: hidden;
}

body {
  font-family: 'IBM Plex Sans Arabic', system-ui, -apple-system, sans-serif;
  background: var(--page-bg);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--gold); text-decoration: none; }
input { font-family: inherit; }
input::placeholder { color: #8d8ba6; }

.wrap { max-width: 560px; margin: 0 auto; }

/* ---------- hero --------------------------------------------------- */
.hero {
  position: relative;
  padding: 28px 20px 10px;
  background: var(--hero-grad);
}

.hero .grain {
  position: absolute;
  inset: 0;
  opacity: var(--grain-opacity, .12);
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/></filter><rect width='220' height='220' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
}

.hero-inner {
  position: relative;
  text-align: center;
  animation: heroIn .9s cubic-bezier(.2, .7, .2, 1) both;
}

@keyframes heroIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

.hero .mark {
  width: var(--logo-w);
  height: auto;
  display: block;
  margin: 0 auto 18px;
  filter: var(--logo-shadow, none);
}

/* two marks side by side in the header — sized by height so a wide
   logo and a square one sit level with each other */
.marks {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 4.5vw, 30px);
  margin-bottom: 18px;
  flex-wrap: nowrap;
}

.marks .mark--pair {
  width: auto;
  height: var(--logo-h);
  margin: 0;
}

.marks .mark2 {
  width: auto;
  height: var(--logo2-h);
  filter: var(--logo-shadow, none);
}

.kicker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 16px;
}

.kicker span.line { height: var(--kicker-rule-h, 2px); width: 30px; background: var(--kicker-rule); }

.kicker span.text {
  font-family: var(--display-font);
  font-weight: 700;
  letter-spacing: .2em;
  font-size: 12px;
  color: var(--gold);
}

h1.title {
  margin: 0 0 14px;
  font-weight: 700;
  font-size: clamp(30px, 9.5vw, 56px);
  line-height: 1.16;
  color: var(--text);
  text-shadow: var(--title-shadow, none);
}

h1.title .en {
  display: block;
  margin-top: 6px;
  font-family: var(--display-font);
  font-weight: 700;
  font-size: clamp(28px, 8vw, 48px);
  line-height: 1.08;
  white-space: nowrap;
  color: var(--title-en-color);
  background: var(--title-en-bg, none);
  -webkit-background-clip: var(--title-en-clip, border-box);
  background-clip: var(--title-en-clip, border-box);
}

.lede {
  margin: 0 auto 22px;
  max-width: 26em;
  font-size: clamp(15px, 4.4vw, 19px);
  line-height: 1.75;
  color: var(--muted);
}

/* ---------- countdown ---------------------------------------------- */
.countdown {
  padding: 14px 20px 32px;
  background: var(--deep-bg);
  border-bottom: var(--deep-border);
  text-align: center;
}

.countdown h2 {
  margin: 0 0 14px;
  font-size: clamp(19px, 5.4vw, 24px);
  font-weight: 600;
  color: var(--text);
}

.tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.tile {
  padding: 16px 4px 12px;
  background: var(--tile-bg);
  border: 1px solid var(--tile-border);
}

.tile .num {
  font-family: var(--display-font);
  font-size: clamp(26px, 8.6vw, 42px);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--tile-num-color);
  background: var(--tile-num-bg, none);
  -webkit-background-clip: var(--tile-num-clip, border-box);
  background-clip: var(--tile-num-clip, border-box);
  text-shadow: var(--tile-num-shadow, none);
}

.tile .ar { margin-top: 8px; font-size: 12px; font-weight: 600; color: var(--tile-label); }
.tile .en { font-family: var(--display-font); font-size: 9px; font-weight: 600; letter-spacing: .16em; color: var(--tile-sublabel); }

/* ---------- rsvp card ---------------------------------------------- */
.rsvp { padding: 48px 20px; background: var(--rsvp-grad); }
.rsvp .wrap { max-width: 480px; }

.rsvp-head { text-align: center; margin-bottom: 20px; }

.rsvp-head h2 {
  margin: 0 0 8px;
  font-size: clamp(24px, 7vw, 34px);
  font-weight: 700;
  color: var(--text);
}

.rsvp-head p { margin: 0; font-size: 14px; color: var(--muted); }

.card {
  padding: 22px 20px 24px;
  background: var(--card-bg);
  border-top: var(--card-top);
  border-left: var(--card-side, none);
  border-right: var(--card-side, none);
  border-bottom: var(--card-side, none);
  box-shadow: 0 16px 34px rgba(0, 0, 0, .4);
}

.fields { display: grid; gap: 14px; }

.field > span.lab {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
}

.field span.opt {
  font-size: 12px;
  font-weight: 500;
  color: var(--sub-ink);
}

.field span.en {
  font-family: var(--display-font);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--sub-ink);
}

.field input {
  width: 100%;
  padding: 14px;
  font-size: 16px;
  color: var(--ink);
  background: var(--field-bg);
  border: 1px solid var(--field-bd);
  outline: none;
}

.field input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-ring);
}

.field input.ltr { text-align: left; }
.field input[aria-invalid="true"] { border-color: var(--accent); }

.hint { display: block; margin-top: 6px; font-size: 12px; line-height: 1.6; color: var(--sub-ink); }
.hint.bad { color: var(--accent); }

/* Hidden from people, still visible to scripts. Clipped rather than
   pushed off-canvas, because a negative offset creates thousands of
   pixels of sideways scroll on a right-to-left page. */
.hp {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.submit {
  width: 100%;
  margin-top: 4px;
  padding: 19px 20px;
  font-family: inherit;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  background: var(--btn-bg);
  border: var(--btn-border, none);
  cursor: pointer;
  box-shadow: var(--btn-shadow);
}

.submit:hover:not(:disabled) { filter: brightness(1.06); }
.submit:active:not(:disabled) { transform: translateY(1px); }
.submit:disabled { opacity: .6; cursor: not-allowed; }

.seats { margin: 2px 0 0; text-align: center; font-size: 12px; color: var(--sub-ink); }
.seats b { font-variant-numeric: tabular-nums; color: var(--ink); }

.form-error {
  margin: 0;
  padding: 11px 13px;
  font-size: 13px;
  line-height: 1.6;
  color: #fff;
  background: var(--accent);
}

.form-error[hidden] { display: none; }

/* ---------- footer -------------------------------------------------- */
.foot { padding: 34px 20px 30px; background: var(--foot-bg); text-align: center; }

.foot .by {
  font-family: var(--display-font);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .24em;
  color: var(--foot-by);
  margin-bottom: 18px;
}

.logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 22px clamp(24px, 6vw, 42px); }
.logos .slot { display: flex; align-items: center; justify-content: center; height: 108px; }
.logos img { width: auto; }
.logos img.event { height: var(--logo-foot-h); }
.logos img.event2 { height: var(--logo2-foot-h); }
.logos img.ess { height: 92px; }

.foot .rule { height: var(--foot-rule-h, 2px); margin: 26px auto 16px; max-width: 200px; background: var(--foot-rule); }
.foot p { margin: 0; font-size: 12px; line-height: 1.9; color: var(--foot-text); }

.back { display: inline-block; margin-top: 16px; font-size: 12px; color: var(--foot-text); text-decoration: underline; }

/* =====================================================================
   Verification modal
   ================================================================== */

.modal[hidden] { display: none; }

.modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(4, 6, 20, .78);
  animation: fadeIn .16s ease both;
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.sheet {
  position: relative;
  width: 100%;
  max-width: 420px;
  max-height: 92vh;
  overflow-y: auto;
  padding: 26px 22px 24px;
  background: var(--card-bg);
  border-top: var(--card-top);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
  animation: sheetIn .22s cubic-bezier(.2, .7, .2, 1) both;
}

@keyframes sheetIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

.sheet h3 { margin: 0 0 8px; font-size: 21px; font-weight: 700; color: var(--ink); }
.sheet p { margin: 0 0 16px; font-size: 14px; line-height: 1.75; color: var(--sub-ink); }
.sheet p b { color: var(--ink); font-variant-numeric: tabular-nums; }

.close {
  position: absolute;
  inset-inline-end: 10px;
  top: 8px;
  width: 34px;
  height: 34px;
  font-size: 22px;
  line-height: 1;
  color: var(--sub-ink);
  background: none;
  border: 0;
  cursor: pointer;
}

.close:hover { color: var(--ink); }

/* six digit boxes */
.otp {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  direction: ltr;
  margin-bottom: 14px;
}

.otp input {
  width: 100%;
  padding: 14px 0;
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  background: var(--field-bg);
  border: 1px solid var(--field-bd);
  outline: none;
  -moz-appearance: textfield;
}

.otp input::-webkit-outer-spin-button,
.otp input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.otp input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-ring); }
.otp.shake { animation: shake .3s; }

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

.resend {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 12px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  background: none;
  border: 1px solid var(--field-bd);
  cursor: pointer;
}

.resend:disabled { color: var(--sub-ink); cursor: not-allowed; }
.resend:hover:not(:disabled) { border-color: var(--accent); }

.debug {
  margin-top: 12px;
  padding: 10px;
  font-size: 12px;
  line-height: 1.6;
  color: #6b4a00;
  background: #fff4cc;
  border: 1px dashed #d4a800;
}

/* ---------- issued code -------------------------------------------- */
.issued { text-align: center; }

.issued .tick {
  font-family: var(--display-font);
  font-size: 12px;
  letter-spacing: .2em;
  font-weight: 700;
  color: var(--accent);
  direction: ltr;
}

.code-box {
  margin: 16px 0 6px;
  padding: 20px 14px;
  background: var(--field-bg);
  border: 2px dashed var(--accent);
}

.code-box .code {
  display: block;
  direction: ltr;
  font-family: var(--display-font);
  font-size: clamp(24px, 8vw, 34px);
  font-weight: 700;
  letter-spacing: .08em;
  word-break: break-all;
  color: var(--ink);
}

.copy {
  width: 100%;
  margin-top: 12px;
  padding: 15px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  background: var(--btn-bg);
  border: var(--btn-border, none);
  cursor: pointer;
}

.note { font-size: 13px; line-height: 1.9; color: var(--sub-ink); }
.note a { color: var(--accent); font-weight: 700; text-decoration: underline; }
.note b { color: var(--ink); }
.note.warn { color: var(--accent); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .hero-inner, .modal, .sheet, .otp.shake { animation: none; }
}

/* "(optional)" marker next to a field label */
.field span.opt {
  font-size: 12px;
  font-weight: 500;
  color: var(--sub-ink);
}