/* ──────────────────────────────────────────────
   EVENTS.CSS — Styles for the /events/ page (Arokya Payanam 2026)
   Loaded AFTER ../css/styles.css, so it reuses the "Forest Calm"
   colour variables, buttons, container and floating buttons.
   Mobile-first: base styles are for phones, min-width queries
   enhance for tablet/desktop.

   TABLE OF CONTENTS:
   1. Header + sub-navigation
   2. Hero
   3. Generic section helpers
   4. Registration (status + disabled button state)
   5. About + objectives + stats
   6. Audience
   7. Agenda timeline
   8. Competitions
   9. Organisers
   10. Footer
   ────────────────────────────────────────────── */


/* ──────────────────────────────────────────────
   1. HEADER + SUB-NAVIGATION
   A simple solid white header (the homepage's transparent
   header only makes sense on top of the hero video).
   The section links sit in a second row that scrolls
   sideways on small screens.
   ────────────────────────────────────────────── */
body.events-page {
  padding-top: 112px; /* space for the fixed header + sub-nav on mobile */
}

.ev-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background-color: var(--color-white);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
}

.ev-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 16px;
}

.ev-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.ev-logo img {
  width: 38px;
  height: 38px;
  object-fit: contain;
  flex-shrink: 0;
}

.ev-logo span {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--color-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ev-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* Language toggle — recoloured for the white header */
.ev-header .lang-toggle {
  border-color: var(--color-secondary);
  color: var(--color-secondary);
  min-height: 36px;
}

.ev-header .lang-toggle:hover {
  background-color: var(--color-secondary);
  color: var(--color-white);
}

.ev-home-link {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-primary);
  padding: 6px 4px;
}

.ev-home-link:hover {
  color: var(--color-secondary);
}

/* Sub-navigation row */
.ev-subnav {
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.ev-subnav::-webkit-scrollbar {
  display: none;
}

.ev-subnav ul {
  display: flex;
  gap: 4px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 12px;
  width: max-content;
  min-width: 100%;
}

.ev-subnav a {
  display: block;
  padding: 11px 12px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-dark-text);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  /* Touch-target safety (WCAG 2.5.5): 11px top/bottom + 22px text ≈ 44px tall —
     comfortably above the 40px floor the mobile audit enforces. */
  min-height: 40px;
  display: flex;
  align-items: center;
}

.ev-subnav a:hover {
  color: var(--color-secondary);
  border-bottom-color: var(--color-secondary);
}

/* Anchored sections shouldn't hide behind the fixed header.
   #ticket-lookup added 2026-10-26: a shared …/events/#ticket-lookup link
   used to scroll the lookup card under the fixed header. */
.ev-section,
#event-top,
#ticket-lookup {
  scroll-margin-top: 110px;
}

@media (min-width: 768px) {
  body.events-page { padding-top: 118px; }
  .ev-header-top { padding: 12px 20px; }
  .ev-logo img { width: 44px; height: 44px; }
  .ev-logo span { font-size: 1.05rem; }
  .ev-subnav ul { padding: 0 20px; gap: 12px; }
  .ev-subnav a { font-size: 0.9rem; }
  .ev-section, #event-top, #ticket-lookup { scroll-margin-top: 120px; }
}


/* ──────────────────────────────────────────────
   2. HERO
   ────────────────────────────────────────────── */
.ev-hero {
  background: linear-gradient(135deg, #2D5A3D 0%, #3a7a52 45%, #5B8C5A 100%);
  color: var(--color-white);
  padding: 48px 0 56px;
  text-align: center;
}

/* Event logo lockup — white rounded card behind the artwork so it
   reads cleanly against the dark green gradient hero. Centered, and
   sized big on all screens per the official design, scaling down
   gracefully on narrow phones. */
.ev-hero-logo {
  max-width: 320px;
  margin: 0 auto 24px;
  padding: 16px;
  background-color: var(--color-white);
  border-radius: 20px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.ev-hero-logo img {
  width: 100%;
  height: auto;
  display: block;
}

.ev-badge {
  display: inline-block;
  background-color: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  padding: 6px 16px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.ev-hero h1 {
  color: var(--color-white);
  font-size: 2.2rem;
  margin-bottom: 10px;
}

.ev-tagline {
  color: var(--color-light-green);
  font-size: 1.1rem;
  font-weight: 400;
  font-style: italic;
  margin-bottom: 28px;
}

/* Date / time / venue / theme cards */
.ev-facts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  max-width: 900px;
  margin: 0 auto 28px;
  text-align: left;
}

.ev-fact {
  background-color: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 12px;
  padding: 14px 18px;
}

.ev-fact dt {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-light-green);
  margin-bottom: 2px;
}

.ev-fact dd {
  font-size: 1rem;
  font-weight: 400;
  color: var(--color-white);
}

.ev-hero-ctas {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

.ev-hero .ev-reg-btn.is-disabled {
  background-color: rgba(255, 255, 255, 0.85);
  color: var(--color-primary);
}

@media (min-width: 768px) {
  .ev-hero { padding: 72px 0 80px; }
  .ev-hero-logo { max-width: 440px; padding: 24px; margin-bottom: 32px; }
  .ev-hero h1 { font-size: 3.2rem; }
  .ev-tagline { font-size: 1.3rem; }
  .ev-facts { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}


/* ──────────────────────────────────────────────
   3. GENERIC SECTION HELPERS
   ────────────────────────────────────────────── */
.ev-section {
  padding: 48px 0;
}

.ev-section.alt { background-color: var(--color-white); }
.ev-section.green { background-color: var(--color-light-green); }

.ev-section h2 {
  font-size: 1.8rem;
}

@media (min-width: 768px) {
  .ev-section { padding: 72px 0; }
  .ev-section h2 { font-size: 2.25rem; }
}


/* ──────────────────────────────────────────────
   4. REGISTRATION
   `.is-disabled` is added by js/event-config.js while no
   Razorpay link is set. It looks inactive and ignores clicks.
   ────────────────────────────────────────────── */
.ev-register-card {
  max-width: 640px;
  margin: 0 auto;
  background-color: var(--color-white);
  border-radius: 16px;
  padding: 32px 24px;
  text-align: center;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
}

.ev-status-pill {
  display: inline-block;
  background-color: var(--color-accent);
  color: var(--color-white);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 4px 14px;
  border-radius: 999px;
  margin-bottom: 14px;
}

.ev-register-card h2 {
  margin-bottom: 12px;
}

.ev-register-card p {
  color: var(--color-light-text);
  font-size: 0.95rem;
  margin-bottom: 20px;
}

.ev-reg-btn.is-disabled {
  background-color: #b9c4b9;
  color: var(--color-white);
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
  transform: none;
}

.ev-reg-btn {
  min-height: 48px;
}

.ev-contact-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  justify-content: center;
  margin-top: 18px;
  font-size: 0.9rem;
}

.ev-contact-row a {
  color: var(--color-primary);
  font-weight: 600;
  padding: 6px 2px;
}

.ev-contact-row a:hover {
  color: var(--color-secondary);
  text-decoration: underline;
}


/* ──────────────────────────────────────────────
   5. ABOUT + OBJECTIVES + STATS
   ────────────────────────────────────────────── */
.ev-about-text {
  max-width: 800px;
  margin: 0 auto 36px;
  text-align: center;
}

.ev-about-text p {
  font-size: 1rem;
  color: var(--color-dark-text);
}

.ev-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-bottom: 40px;
}

.ev-stat {
  background-color: var(--color-background);
  border-radius: 12px;
  padding: 20px 12px;
  text-align: center;
}

.ev-stat strong {
  display: block;
  font-size: 2rem;
  line-height: 1.1;
  color: var(--color-primary);
}

.ev-stat span {
  font-size: 0.85rem;
  color: var(--color-light-text);
}

.ev-subheading {
  font-size: 1.4rem;
  text-align: center;
  margin-bottom: 20px;
}

.ev-objectives {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  max-width: 900px;
  margin: 0 auto;
}

.ev-objectives li {
  position: relative;
  background-color: var(--color-background);
  border-radius: 10px;
  padding: 14px 16px 14px 46px;
  font-size: 0.95rem;
}

.ev-objectives li::before {
  content: '✓';
  position: absolute;
  left: 14px;
  top: 13px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: var(--color-secondary);
  color: var(--color-white);
  font-size: 0.8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 768px) {
  .ev-stats { grid-template-columns: repeat(4, 1fr); gap: 20px; }
  .ev-objectives { grid-template-columns: repeat(2, 1fr); }
}


/* ──────────────────────────────────────────────
   6. AUDIENCE
   ────────────────────────────────────────────── */
.ev-audience-sub {
  max-width: 700px;
  margin: 0 auto 32px;
  text-align: center;
  color: var(--color-dark-text);
}

.ev-audience-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 20px;
}

.ev-audience-card {
  background-color: var(--color-white);
  border-radius: 14px;
  padding: 24px 20px;
  text-align: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.ev-audience-card strong {
  display: block;
  font-size: 2rem;
  color: var(--color-primary);
  line-height: 1.1;
  margin-bottom: 6px;
}

.ev-audience-card span {
  font-size: 0.9rem;
  color: var(--color-dark-text);
}

.ev-public-card {
  background-color: var(--color-primary);
  color: var(--color-white);
  border-radius: 14px;
  padding: 24px 20px;
  text-align: center;
}

.ev-public-card h3 {
  color: var(--color-white);
  margin-bottom: 8px;
}

.ev-public-card p {
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 0;
}

.ev-footfall {
  text-align: center;
  font-weight: 600;
  color: var(--color-primary);
  margin: 20px 0 0;
}

@media (min-width: 768px) {
  /* 3 columns again — the General Public count card was removed and the
     Students card raised to 1000+ (owner correction 2026-10-26). Four
     columns would leave an empty slot beside three cards. The full-width
     General Public description card below the grid is unchanged. */
  .ev-audience-grid { grid-template-columns: repeat(3, 1fr); }
}


/* ──────────────────────────────────────────────
   7. AGENDA TIMELINE
   Each row = time + programme. Speaker sessions are
   highlighted; breaks are muted and italic.
   ────────────────────────────────────────────── */
.ev-agenda-note {
  max-width: 700px;
  margin: 0 auto 28px;
  text-align: center;
  color: var(--color-light-text);
  font-size: 0.95rem;
}

.ev-agenda {
  max-width: 820px;
  margin: 0 auto;
  border-left: 3px solid var(--color-light-green);
  padding-left: 0;
}

.ev-agenda-item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px 12px 22px;
  margin-bottom: 8px;
  background-color: var(--color-white);
  border-radius: 0 10px 10px 0;
}

.ev-agenda-item::before {
  content: '';
  position: absolute;
  left: -9px;
  top: 18px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: var(--color-white);
  border: 3px solid var(--color-secondary);
}

.ev-agenda-time {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-secondary);
  white-space: nowrap;
}

.ev-agenda-title {
  font-size: 0.98rem;
  color: var(--color-dark-text);
}

.ev-agenda-tag {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 2px;
}

/* Speaker sub-line under each scientific session (owner agenda update
   2026-10-26: named speakers + credentials). Muted, smaller, wraps
   gracefully on phones; green inside the dark .session rows. */
.ev-agenda-speaker {
  display: block;
  margin-top: 4px;
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--color-light-text);
  line-height: 1.45;
}
.ev-agenda-item.session .ev-agenda-speaker {
  color: var(--color-light-green);
}

.ev-agenda-item.session {
  background-color: var(--color-primary);
}

.ev-agenda-item.session::before {
  background-color: var(--color-primary);
  border-color: var(--color-light-green);
}

.ev-agenda-item.session .ev-agenda-time,
.ev-agenda-item.session .ev-agenda-tag {
  color: var(--color-light-green);
}

.ev-agenda-item.session .ev-agenda-title {
  color: var(--color-white);
  font-weight: 600;
}

.ev-agenda-item.break {
  background-color: transparent;
  border: 1px dashed var(--color-light-text);
  border-left: none;
}

.ev-agenda-item.break .ev-agenda-title {
  font-style: italic;
  color: var(--color-light-text);
}

@media (min-width: 640px) {
  .ev-agenda-item {
    flex-direction: row;
    align-items: baseline;
    gap: 20px;
  }
  .ev-agenda-time { flex: 0 0 190px; }
}


/* ──────────────────────────────────────────────
   8. COMPETITIONS
   ────────────────────────────────────────────── */
.ev-comp-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin: 28px 0;
}

.ev-comp-card {
  background-color: var(--color-white);
  border-radius: 14px;
  padding: 24px 20px;
  text-align: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.ev-comp-card .ev-icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background-color: var(--color-background);
  color: var(--color-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ev-comp-card h3 {
  font-size: 1.1rem;
  margin-bottom: 8px;
}

/* Google-Form registration link inside each competition card
   (owner request 2026-10-26). Green, tappable (40px), opens in a
   new tab with rel="noopener noreferrer". */
.ev-comp-link {
  margin-bottom: 0;
}
.ev-comp-link a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-secondary);
}
.ev-comp-link a:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

/* One common registration link for ALL competitions (owner request
   2026-10-25): the fireless-cooking and poster cards no longer carry
   individual form links — this single button (below the grid) registers
   for any of them. The reels card keeps its own submission link. */
.ev-comp-common {
  text-align: center;
  margin: 4px 0 24px;
}
.ev-comp-common a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 24px;
  border: 2px solid var(--color-secondary);
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-secondary);
  background-color: var(--color-white);
}
.ev-comp-common a:hover,
.ev-comp-common a:focus {
  background-color: var(--color-secondary);
  color: var(--color-white);
  text-decoration: none;
}

.ev-comp-info {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.ev-info-card {
  background-color: var(--color-white);
  border-radius: 14px;
  padding: 24px 20px;
}

.ev-info-card h3 {
  margin-bottom: 12px;
}

.ev-info-card ul {
  list-style: disc;
  padding-left: 20px;
}

.ev-info-card li {
  margin-bottom: 8px;
  font-size: 0.95rem;
  font-weight: 300;
}

.ev-info-card p {
  margin-bottom: 0;
  font-size: 0.95rem;
}

@media (min-width: 768px) {
  .ev-comp-grid { grid-template-columns: repeat(3, 1fr); }
  .ev-comp-info { grid-template-columns: repeat(2, 1fr); }
}


/* ──────────────────────────────────────────────
   9. ORGANISERS
   ────────────────────────────────────────────── */

/* Combined logo strip (INYGMA, AR Group, SKT Nature Cure, Owl I) in a
   white card so it separates cleanly from the cream section background.
   Image is wide/short — cap the width and let height scale with it. */
.ev-org-logos {
  max-width: 480px;
  margin: 24px auto 0;
  padding: 20px 24px;
  background-color: var(--color-white);
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.ev-org-logos img {
  width: 100%;
  height: auto;
  display: block;
}

@media (min-width: 768px) {
  .ev-org-logos { max-width: 650px; padding: 28px 32px; }
}

.ev-org-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  max-width: 900px;
  margin: 24px auto 0;
}

.ev-org-list li {
  background-color: var(--color-white);
  border: 1px solid var(--color-light-green);
  border-radius: 10px;
  padding: 12px 18px;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-primary);
  text-align: center;
}


/* ──────────────────────────────────────────────
   10. FOOTER
   ────────────────────────────────────────────── */
.ev-footer {
  background-color: var(--color-primary);
  color: rgba(255, 255, 255, 0.85);
  padding: 32px 0;
  text-align: center;
}

.ev-footer p {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.9rem;
  margin-bottom: 8px;
}

.ev-footer a {
  color: var(--color-white);
  text-decoration: underline;
  /* Touch-target safety: footer links are inline text; 40px tall keeps a
     phone tap from landing between the link and its neighbours. */
  display: inline-flex;
  align-items: center;
  min-height: 40px;
}

/* Floating buttons — 48px on phones like the homepage */
@media (max-width: 767px) {
  .floating-buttons { bottom: 20px; right: 16px; }
  .fab { width: 48px; height: 48px; }
}


/* ============================================
   REGISTRATION FORM (events/index.html #register-form)
   PURPOSE: Mobile-first form card. 16px inputs stop iOS zoom-on-focus;
            44px+ tap targets for thumbs.
   ============================================ */
.ev-form {
  max-width: 640px;
  margin: 28px auto 0;
  padding: 24px 18px;
  background-color: var(--color-white);
  border-radius: 14px;
  box-shadow: 0 4px 18px rgba(45, 90, 61, 0.12);
  text-align: left;
}
.ev-form h3 { color: var(--color-primary); margin-bottom: 12px; text-align: center; }
.ev-form-closed {
  background: var(--color-background);
  color: var(--color-accent);
  padding: 12px 14px;
  border-radius: 8px;
  text-align: center;
  font-weight: 600;
}
.ev-form-fields { border: 0; padding: 0; margin: 0; min-width: 0; }
.ev-form-fields:disabled { opacity: 0.45; }
.ev-field { margin-bottom: 16px; }
.ev-field label, .ev-label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  color: var(--color-dark-text);
  font-size: 0.95rem;
}
.ev-field input[type="text"],
.ev-field input[type="tel"],
.ev-field input[type="email"],
.ev-field select,
.ev-field textarea {
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  font: inherit;
  font-size: 16px;
  border: 1.5px solid var(--color-light-green);
  border-radius: 8px;
  background: var(--color-white);
  color: var(--color-dark-text);
}
.ev-field input:focus, .ev-field select:focus, .ev-field textarea:focus {
  outline: 3px solid rgba(91, 140, 90, 0.35);
  border-color: var(--color-secondary);
}
.ev-field textarea { resize: vertical; }
.ev-check {
  display: flex !important;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-weight: 400 !important;
  cursor: pointer;
}
.ev-check input { width: 22px; height: 22px; flex-shrink: 0; accent-color: var(--color-primary); }
.ev-coupon-row { display: flex; gap: 8px; }
.ev-coupon-row input { flex: 1; min-width: 0; text-transform: uppercase; }
.ev-coupon-row .btn { min-height: 46px; padding: 0 16px; }
.ev-error { display: block; color: #b3261e; font-size: 0.85rem; margin-top: 4px; }
.ev-error:empty { display: none; }
.ev-form-error { text-align: center; margin: 8px 0; font-weight: 600; }
.ev-price-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  margin-bottom: 16px;
  background: var(--color-background);
  border-radius: 10px;
  color: var(--color-primary);
}
.ev-price-box strong { font-size: 1.3rem; }
/* Price list under the category dropdown (tap-friendly, highlights the chosen row) */
.ev-price-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.ev-price-list[hidden] { display: none; }
.ev-price-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--color-border, #d9e2dc);
  border-radius: 10px;
  font-size: 0.95rem;
}
.ev-price-list li.is-selected {
  border-color: var(--color-primary);
  background: var(--color-background);
  color: var(--color-primary);
  font-weight: 600;
}
/* Marketing flair: crossed-out "original" price + the real price in a bright colour.
   Values come from js/event-config.js (display only — the server always re-prices). */
.ev-price-list .ev-price-old {
  color: var(--color-light-text);
  font-weight: 500;
  font-size: 0.9em;
  margin-right: 8px;
  text-decoration: line-through;
}
.ev-price-list .ev-price-now { color: #e85d04; font-weight: 700; }
.ev-price-list li.is-selected .ev-price-now { color: #d94f04; }
.ev-pay-btn { width: 100%; min-height: 50px; font-size: 1.05rem; }
.ev-pay-btn:disabled { opacity: 0.6; cursor: wait; }
.ev-form-note { font-size: 0.82rem; color: var(--color-light-text); text-align: center; margin-top: 10px; }
.ev-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ev-status-box {
  max-width: 640px;
  margin: 20px auto 0;
  padding: 16px;
  border-radius: 10px;
  background: var(--color-white);
  border-left: 5px solid var(--color-accent);
  font-weight: 600;
  overflow-wrap: anywhere;
}
.ev-status-box.is-paid { border-left-color: var(--color-secondary); color: var(--color-primary); }
.ev-status-box .btn { margin-top: 10px; }

/* "Do not refresh" warning while the Coaxlure tab is open in the other tab */
.ev-status-box .ev-pay-warning {
  margin: 12px 0 0;
  padding: 10px 14px;
  background: #fff8e1;                    /* soft amber = caution, not error */
  border-left: 4px solid #f9a825;
  border-radius: 8px;
  font-size: 0.92rem;
  line-height: 1.45;
  color: #6d4c00;
  text-align: left;
}
/* Secondary buttons on WHITE surfaces must be visible on them.
   The site's .btn-secondary (transparent bg + WHITE text + WHITE border,
   styles.css) is a dark-surface style. Every white card on this page made
   it render white-on-white — present in the DOM, invisible until hover:
     - .ev-status-box    → "Check payment status now", "Check again",
                           "Done" (owner bug report 2026-10-25)
     - .ev-form          → the coupon "Apply" button (same latent bug,
                           found in the 2026-10-26 audit)
     - .ev-ticket-lookup → the lookup card's "Find my ticket" button AND
                           the result-box actions (owner bug report
                           2026-10-26: "Find my ticket is not visible")
   ONE re-skin for every white surface on this page; the palette is
   unchanged. scripts/validate.php regex-checks this rule, so removing
   it or reverting the colour fails the deploy. */
.ev-form .btn-secondary,
.ev-status-box .btn-secondary,
.ev-ticket-lookup .btn-secondary {
  background-color: transparent;
  color: var(--color-primary);
  border: 2px solid var(--color-secondary);
}
.ev-form .btn-secondary:hover,
.ev-form .btn-secondary:focus-visible,
.ev-status-box .btn-secondary:hover,
.ev-status-box .btn-secondary:focus-visible,
.ev-ticket-lookup .btn-secondary:hover,
.ev-ticket-lookup .btn-secondary:focus-visible {
  background-color: var(--color-secondary);
  color: var(--color-white);
}

/* Paid confirmation box: the reference and the Download ticket button sit
   on one tidy row, then the ticket hint below it. */
.ev-status-box.is-paid .ev-paid-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}
.ev-status-box.is-paid .ev-paid-row .btn { margin-top: 0; flex: 0 0 auto; }
.ev-ticket-hint {
  margin-top: 8px;
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--color-light-text);
}
.ev-cat-block[hidden] { display: none; }
@media (min-width: 640px) {
  .ev-form { padding: 32px; }
}

/* ============================================
   BOOKING-ID LOOKUP (#ticket-lookup) — owner request 2026-10-26:
   "add a section after register to if they pass the ticket id in the
   input it should validate and give the three options that we show
   when the payment confirmed. If not show as invalid ticket."
   Same card language as .ev-form so the two read as one unit.
   Mobile-first: the input + button share a row ≥640px, stack below it.
   ============================================ */
.ev-ticket-lookup {
  max-width: 640px;
  margin: 20px auto 28px;
  padding: 20px 18px 24px;
  background-color: var(--color-white);
  border-radius: 14px;
  box-shadow: 0 4px 18px rgba(45, 90, 61, 0.12);
  text-align: left;
}
.ev-ticket-lookup h3 {
  color: var(--color-primary);
  text-align: center;
  margin-bottom: 6px;
}
.ev-lookup-sub {
  font-size: 0.85rem;
  color: var(--color-light-text);
  text-align: center;
  margin-bottom: 14px;
}
.ev-lookup-form {
  display: flex;
  flex-direction: column;          /* stacked on phones — thumb friendly */
  gap: 10px;
}
.ev-lookup-form input {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  font: inherit;
  font-size: 16px;                 /* 16px stops iOS zoom-on-focus */
  letter-spacing: 0.03em;          /* IDs are easier to type accurately spaced */
  text-transform: uppercase;       /* display only — JS normalises anyway */
  border: 1.5px solid var(--color-light-green);
  border-radius: 8px;
  background: var(--color-white);
  color: var(--color-dark-text);
}
.ev-lookup-form input:focus {
  outline: 3px solid rgba(91, 140, 90, 0.35);
  border-color: var(--color-secondary);
}
.ev-lookup-form .btn { min-height: 48px; }
.ev-lookup-error { text-align: center; margin: 10px 0 0; }
.ev-lookup-error[hidden] { display: none; }
/* The result box reuses the paid-box look: green edge + the three actions */
.ev-lookup-result {
  margin-top: 14px;
  padding: 16px;
  border-radius: 10px;
  background: var(--color-background);
  border-left: 5px solid var(--color-secondary);
  color: var(--color-primary);
  font-weight: 600;
  overflow-wrap: anywhere;
}
.ev-lookup-result[hidden] { display: none; }
.ev-lookup-result .ev-paid-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}
.ev-lookup-result .ev-paid-row .btn { margin-top: 0; flex: 1 1 100%; }
.ev-lookup-result .ev-paid-row .btn { margin-top: 0; }
/* (.ev-lookup-result .btn-secondary colour rules removed 2026-10-26:
   the result box lives INSIDE .ev-ticket-lookup, so the white-surface
   re-skin above already covers its three action buttons.) */
.ev-lookup-result .ev-ticket-hint {
  margin-top: 8px;
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--color-light-text);
}
@media (min-width: 640px) {
  .ev-lookup-form { flex-direction: row; }   /* input + button share the row */
  .ev-lookup-form input { flex: 1; min-width: 0; }
  .ev-lookup-form .btn { flex: 0 0 auto; padding: 0 22px; }
  .ev-lookup-result .ev-paid-row .btn { flex: 0 0 auto; }  /* buttons share a row on wide screens */
}