/* ── Escape Room Ijtema — Public Styles ───────────────────────────────────
   Dark, card-based, app-like — matches the Ijtema Programme plugin's visual
   language, with teal as the accent instead of orange. */
:root {
    --erij-surface:   #1a1d2e;
    --erij-border:    rgba(255,255,255,0.1);
    --erij-teal:      #1da39a;
    --erij-teal-d:    #147e77;
    --erij-text:      #ffffff;
    --erij-muted:     #94a3b8;
    --erij-green:     #10b981;
    --erij-red:       #ef4444;
    --erij-amber:     #d9a441;
    --erij-purple:    #a855f7;
    --erij-radius:    14px;
    --erij-radius-sm: 8px;
}

.erij-wrap * { box-sizing: border-box; }
.erij-wrap h1, .erij-wrap h2, .erij-wrap h3, .erij-wrap p { color: var(--erij-text) !important; }

/* Forces the theme's content column to full width so our dark cards aren't
   squashed into a narrow sidebar layout. This is enqueued (loaded in
   <head> before the page body ever renders) rather than injected as an
   inline <style> tag partway through the page content — a tag sitting
   in the middle of the HTML is parsed at that point in the stream,
   which can visibly reflow/resize everything above it once it takes
   effect. Being enqueued up front means it's already applied before
   anything is laid out, so there's no jump. */
.site-content, #content, #primary, .content-area, .site-main, #main, .entry-content, .page-content, .hentry {
    width: 100% !important; max-width: 100% !important; float: none !important;
}

/* No forced background here on purpose — the page just sits on whatever
   background the theme itself provides (which is already dark), rather
   than imposing our own colour on top of it. Only individual cards get
   their own semi-transparent dark fill. */
.erij-wrap {
    max-width: 1000px;
    margin: 0 auto;
    padding: 32px 16px 100px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    position: relative;
    z-index: 1;
}

.erij-back-link { display: inline-block; color: var(--erij-muted) !important; text-decoration: none; font-size: 17px; font-weight: 700; margin-bottom: 24px; }
.erij-back-link:hover { color: var(--erij-teal) !important; }

/* ── Buttons ─────────────────────────────────────────────────────────── */
.erij-btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 14px 22px; font-size: 15px; font-weight: 600;
    border-radius: var(--erij-radius-sm); border: none; cursor: pointer;
    text-decoration: none !important; transition: all 0.2s; gap: 8px;
}
.erij-btn-primary { background: linear-gradient(135deg, var(--erij-teal), var(--erij-teal-d)) !important; color: #fff !important; }
.erij-btn-primary:hover { filter: brightness(1.12); color: #fff !important; }
.erij-btn-outline { background: transparent !important; border: 2px solid var(--erij-border); color: var(--erij-text) !important; }
.erij-btn-outline:hover { border-color: var(--erij-teal); color: var(--erij-teal) !important; }
.erij-full { width: 100%; }
.erij-sm { padding: 9px 16px; font-size: 13px; }
.erij-lg { padding: 16px 26px; font-size: 16px; margin-top: 22px; }
.erij-btn:disabled { opacity: 0.5; cursor: default; }

/* ── Inputs ──────────────────────────────────────────────────────────── */
.erij-input {
    width: 100% !important; padding: 13px 15px !important; font-size: 15px;
    border: 2px solid rgba(255,255,255,0.15) !important; border-radius: var(--erij-radius-sm) !important;
    background: var(--erij-surface) !important; color: var(--erij-text) !important; transition: border-color 0.2s;
    box-sizing: border-box;
}
.erij-input:focus { outline: none; border-color: var(--erij-teal) !important; box-shadow: 0 0 0 3px rgba(29,163,154,0.2); }

/* Belt-and-suspenders reinforcement for the remaining plain text inputs:
   some themes apply their own reset to inputs inside grid/row layout
   wrappers with enough specificity to beat a plain class selector.
   Anchoring to the form's unique ID pushes specificity high enough that
   no realistic theme rule can win, regardless of what selector it uses. */
#erij-register-form input.erij-input,
#erij-lookup-form input.erij-input {
    width: 100% !important; padding: 13px 15px !important;
    border: 2px solid rgba(255,255,255,0.15) !important; border-radius: 8px !important;
    background: var(--erij-surface) !important; color: var(--erij-text) !important;
    box-sizing: border-box !important;
}

.erij-form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.erij-form-group label { font-size: 13px; font-weight: 600; color: var(--erij-text) !important; }
.erij-fieldgrid { display: grid; gap: 12px; }

/* ── Custom dropdown (replaces native <select> everywhere in the form) ──
   Native select dropdown POPUPS are drawn by the browser/OS, not by CSS —
   Chrome, Safari and Firefox each render them differently, and none of
   them reliably accept our dark theme (this is what caused the washed-
   out, low-contrast lists across multiple browsers). This is a plain,
   fully custom widget built from ordinary divs, so it renders exactly
   the same everywhere. The real <select> stays in the DOM (hidden) purely
   so existing form-value logic (.val(), 'change' events) keeps working
   unchanged. */
.erij-select { position: relative; }
.erij-select-native { display: none !important; }
.erij-select-trigger {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 13px 15px; font-size: 15px; text-align: left; cursor: pointer;
    border: 2px solid rgba(255,255,255,0.15); border-radius: var(--erij-radius-sm);
    background: var(--erij-surface); color: var(--erij-text);
    box-sizing: border-box;
}
.erij-select-trigger:focus { outline: none; border-color: var(--erij-teal); box-shadow: 0 0 0 3px rgba(29,163,154,0.2); }
.erij-select-trigger.erij-select-open { border-color: var(--erij-teal); }
.erij-select-trigger-text.erij-select-placeholder { color: var(--erij-muted); }
.erij-select-caret { color: var(--erij-muted); font-size: 11px; flex-shrink: 0; transition: transform 0.15s; }
.erij-select-trigger.erij-select-open .erij-select-caret { transform: rotate(180deg); }
.erij-select-panel {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 500;
    max-height: 260px; overflow-y: auto;
    background: #1a1d2e; border: 1px solid var(--erij-border); border-radius: var(--erij-radius-sm);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.erij-select-option { padding: 11px 15px; font-size: 14px; color: var(--erij-text) !important; cursor: pointer; }
.erij-select-option:hover, .erij-select-option.erij-select-option-active { background: rgba(29,163,154,0.16); }
.erij-select-option.erij-select-option-selected { color: var(--erij-teal) !important; font-weight: 700; }

.erij-fieldgrid-4 { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

/* ── Card ────────────────────────────────────────────────────────────── */
.erij-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--erij-border);
    border-radius: var(--erij-radius);
    padding: 22px 20px;
    margin-bottom: 16px;
}
.erij-card h3 { font-size: 15px; margin: 0 0 8px; }
.erij-card-lg { background: rgba(0,0,0,0.55); padding: 32px 26px; }

.erij-sub { color: var(--erij-muted) !important; font-size: 14px; max-width: 600px; }
.erij-sub-small { color: var(--erij-muted) !important; font-size: 12px; }
.erij-team-name-ok { color: #6ee7b7 !important; font-weight: 600; }

.erij-autocomplete { position: relative; }
.erij-autocomplete-list {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 20;
    background: #0f172a; border: 1px solid var(--erij-border); border-radius: var(--erij-radius-sm);
    max-height: 220px; overflow-y: auto; margin-top: 4px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}
.erij-autocomplete-item { padding: 13px 14px; font-size: 15px; color: var(--erij-text); cursor: pointer; }
.erij-autocomplete-item:hover, .erij-autocomplete-item:active { background: rgba(255,255,255,0.08); }
.erij-autocomplete-item + .erij-autocomplete-item { border-top: 1px solid rgba(255,255,255,0.06); }
.erij-team-name-taken { color: #fca5a5 !important; font-weight: 600; }
.erij-form-heading { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--erij-border); font-size: 18px; }

/* ── Notice ──────────────────────────────────────────────────────────── */
.erij-notice { padding: 14px 16px; border-radius: var(--erij-radius-sm); font-size: 14px; margin-top: 16px; }
.erij-notice.erij-err { background: rgba(239,68,68,0.12); color: #fca5a5 !important; border: 1px solid #ef4444; }

/* ── Section title ───────────────────────────────────────────────────── */
.erij-section-title { font-size: 20px; margin: 8px 0 14px; }

/* ── Landing hero box ────────────────────────────────────────────────── */
.erij-landing-box {
    background: rgba(0,0,0,0.65);
    border: 1px solid var(--erij-border);
    border-radius: var(--erij-radius);
    padding: 44px 32px;
    text-align: center;
    max-width: 480px;
    margin: 0 auto 44px;
}
.erij-landing-icon { font-size: 52px; display: block; margin-bottom: 14px; }
.erij-landing-title { font-size: 32px; font-weight: 800; margin: 0 0 10px; line-height: 1.15; }
.erij-landing-sub { color: var(--erij-muted) !important; font-size: 15px; margin: 0 0 24px; }
.erij-landing-actions { display: flex; flex-direction: column; gap: 10px; }
.erij-landing-lb-link { display: inline-block; margin-top: 20px; color: var(--erij-muted) !important; font-size: 13px; text-decoration: none; }
.erij-landing-lb-link:hover { color: var(--erij-teal) !important; }

/* ── Room grid (landing / register choice) ──────────────────────────── */
.erij-room-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.erij-room-card { background: rgba(255,255,255,0.04); border: 1px solid var(--erij-border); border-radius: var(--erij-radius-sm); padding: 18px; }
.erij-room-card h3 { margin-top: 8px; font-size: 16px; }
.erij-room-card p { font-size: 13px; color: var(--erij-muted) !important; margin: 0 0 12px; }
.erij-room-card-desc { font-size: 13px; color: var(--erij-muted) !important; margin: 0 0 12px; }
.erij-room-card-desc p { margin: 0 0 8px; }
.erij-room-card-desc p:last-child { margin-bottom: 0; }
.erij-room-card-top { display: flex; gap: 6px; flex-wrap: wrap; }
.erij-room-card-foot { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--erij-muted) !important; }
.erij-accordion-body .erij-room-card-foot { margin-bottom: 12px; }
.erij-room-full-badge { color: var(--erij-red) !important; font-weight: 700; }

/* ── Status pills ────────────────────────────────────────────────────── */
.erij-status-pill { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; padding: 4px 10px; border-radius: 20px; background: rgba(255,255,255,0.08); color: var(--erij-text) !important; margin: 6px 6px 0 0; }
.erij-status-upcoming    { background: rgba(255,255,255,0.08); color: #cbd5e1 !important; }
.erij-status-active      { background: rgba(16,185,129,0.18); color: #6ee7b7 !important; }
.erij-status-ended       { background: rgba(148,163,184,0.2); color: #cbd5e1 !important; }
.erij-status-registered  { background: rgba(255,255,255,0.08); color: #cbd5e1 !important; }
.erij-status-arrived     { background: rgba(29,163,154,0.18); color: #5eead4 !important; }
.erij-status-in_progress { background: rgba(217,164,65,0.2); color: #fbbf24 !important; }
.erij-status-completed   { background: rgba(16,185,129,0.18); color: #6ee7b7 !important; }
.erij-status-missed      { background: rgba(217,164,65,0.2); color: #fbbf24 !important; }
.erij-status-dnf         { background: rgba(148,163,184,0.2); color: #cbd5e1 !important; }
.erij-status-delay       { background: rgba(239,68,68,0.15); color: #fca5a5 !important; }

/* ── Home page: two-column grid + accordion + register button ────────── */
.erij-home-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; margin-bottom: 24px; }
.erij-home-col .erij-section-title { margin-top: 0; }

.erij-accordion { display: flex; flex-direction: column; gap: 10px; }
.erij-accordion-item { background: rgba(255,255,255,0.04); border: 1px solid var(--erij-border); border-radius: var(--erij-radius-sm); overflow: hidden; }
.erij-accordion-header {
    width: 100%; display: flex; align-items: center; gap: 10px;
    background: none; border: none; padding: 16px 18px; cursor: pointer;
    font-size: 15px; font-weight: 700; color: var(--erij-text) !important; text-align: left;
}
.erij-accordion-title { flex: 1; }
.erij-accordion-caret { transition: transform 0.2s; color: var(--erij-muted); }
.erij-accordion-open .erij-accordion-caret { transform: rotate(180deg); }
.erij-accordion-body {
    max-height: 0; overflow: hidden; transition: max-height 0.25s ease;
    padding: 0 18px; font-size: 13px; color: var(--erij-muted) !important;
}
.erij-accordion-open .erij-accordion-body { max-height: 500px; padding: 0 18px 18px; }
.erij-accordion-body p { color: var(--erij-muted) !important; margin: 0 0 10px; }

.erij-home-lb { padding: 16px; }
.erij-home-lb-link { margin-top: 14px; }

.erij-home-register { text-align: center; }
.erij-home-register .erij-landing-lb-link { display: inline-block; margin-top: 14px; }

@media (max-width: 800px) {
    .erij-home-grid { grid-template-columns: 1fr; }
}

/* ── Room choice (register step) — plain select, no popup ────────────── */
#erij-room-desc { margin-top: 6px; }

/* ── Member rows ─────────────────────────────────────────────────────── */
.erij-member-row { display: grid; grid-template-columns: repeat(4, 1fr) auto; gap: 10px; align-items: end; margin-bottom: 10px; padding: 14px; background: rgba(255,255,255,0.03); border-radius: var(--erij-radius-sm); border: 1px solid var(--erij-border); }
.erij-remove-member { align-self: center; background: none; border: none; font-size: 20px; color: var(--erij-red) !important; cursor: pointer; padding: 0 6px; }

/* ── Code / success box ──────────────────────────────────────────────── */
.erij-success-box { max-width: 460px; }
.erij-check { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: var(--erij-green); color: #fff !important; font-size: 26px; margin-bottom: 10px; }
.erij-code-box { background: rgba(0,0,0,0.5); border: 2px dashed var(--erij-teal); border-radius: var(--erij-radius-sm); padding: 26px 20px; text-align: center; margin: 20px 0; }
.erij-code-warn { font-size: 13px; color: var(--erij-amber) !important; font-weight: 600; margin-bottom: 12px; }
.erij-success-team-name { font-size: 20px; font-weight: 800; color: var(--erij-text) !important; margin: 4px 0; }
.erij-success-returning { font-size: 13px; color: #6ee7b7 !important; background: rgba(16,185,129,0.14); border-radius: var(--erij-radius-sm); padding: 10px 14px; margin: 8px 0; }
.erij-code-display { font-size: 30px; font-weight: 800; font-family: monospace; letter-spacing: 4px; word-break: break-all; color: var(--erij-text) !important; }
.erij-code-label { display: block; font-size: 11px; color: var(--erij-muted) !important; text-transform: uppercase; letter-spacing: 0.08em; margin-top: 6px; }
.erij-success-box img { margin: 16px 0; border-radius: 8px; border: 1px solid var(--erij-border); }

/* ── Inline lookup form (My Time Slot) ───────────────────────────────── */
.erij-inline-form { display: flex; flex-direction: column; gap: 10px; }

/* ── View header (My Time Slot team card) ────────────────────────────── */
.erij-view-header {
    background: rgba(0,0,0,0.6);
    border: 1px solid var(--erij-border);
    border-radius: var(--erij-radius);
    padding: 28px 24px; margin-bottom: 16px; text-align: center;
}
.erij-view-qr { border-radius: 8px; border: 1px solid var(--erij-border); margin-bottom: 12px; }
.erij-view-team-name { font-size: 28px; font-weight: 800; color: var(--erij-text) !important; margin-bottom: 2px; }
.erij-view-name { font-size: 15px; font-weight: 700; letter-spacing: 0.04em; color: var(--erij-muted) !important; margin-bottom: 4px; }
.erij-view-captain { font-size: 14px; color: var(--erij-muted) !important; margin-bottom: 10px; }
.erij-queue-line { font-weight: 700; font-size: 15px; margin: 4px 0; color: var(--erij-text) !important; }
.erij-wait-banner { background: rgba(29,163,154,0.14); border: 1px solid rgba(29,163,154,0.4); border-radius: var(--erij-radius-sm); padding: 10px 14px; font-size: 14px; font-weight: 600; color: #5eead4 !important; margin-top: 10px; }

.erij-room-name { font-weight: 700; margin: 0 0 4px; font-size: 18px; color: var(--erij-text) !important; }
.erij-view-event { background: rgba(255,255,255,0.03); border: 1px solid var(--erij-border); border-radius: var(--erij-radius-sm); padding: 12px 14px; font-size: 14px; color: var(--erij-text) !important; }

/* Team roster table (My Time Slot) */
.erij-team-table { width: 100%; border-collapse: collapse; font-size: 13px; text-align: left; }
.erij-team-table th, .erij-team-table td { text-align: left; }
.erij-team-table th { padding: 8px 10px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--erij-muted) !important; border-bottom: 2px solid var(--erij-border); }
.erij-team-table td { padding: 10px; border-bottom: 1px solid rgba(255,255,255,0.06); color: var(--erij-text) !important; }
.erij-team-table td:first-child { width: 24px; }
.erij-captain-row td { background: rgba(29,163,154,0.08); font-weight: 600; }
.erij-captain-mark {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--erij-teal); color: #fff !important; font-size: 11px; font-weight: 800;
}

/* ── Flash messages ──────────────────────────────────────────────────── */
.erij-messages { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.erij-flash {
    display: flex; align-items: flex-start; gap: 10px;
    background: rgba(29,163,154,0.12); border-left: 4px solid var(--erij-teal);
    padding: 14px 16px; border-radius: var(--erij-radius-sm); font-size: 13px; color: #e2fbf9 !important;
    animation: erij-flash-in 0.25s ease-out;
}
.erij-flash-override {
    background: rgba(217,164,65,0.16); border-left-color: var(--erij-amber); color: #fef3c7 !important;
    box-shadow: 0 2px 14px rgba(217,164,65,0.2);
}
.erij-flash-icon { font-size: 17px; line-height: 1.4; }
.erij-flash-text { flex: 1; line-height: 1.45; font-weight: 600; }
.erij-flash-dismiss { background: none; border: none; font-size: 18px; line-height: 1; cursor: pointer; color: inherit; opacity: 0.6; padding: 0 2px; }
.erij-flash-dismiss:hover { opacity: 1; }
.erij-flash-out { animation: erij-flash-out 0.2s ease-in forwards; }
@keyframes erij-flash-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes erij-flash-out { to { opacity: 0; transform: translateY(-6px); } }

/* ── Countdown / forfeit banners (My Time Slot) ─────────────────────── */
.erij-countdown-banner, .erij-missed-banner {
    display: flex; align-items: flex-start; gap: 12px;
    border-radius: var(--erij-radius); padding: 16px 18px; margin-bottom: 16px;
}
.erij-countdown-banner {
    background: rgba(217,164,65,0.16); border: 2px solid var(--erij-amber);
    animation: erij-countdown-pulse 2s ease-in-out infinite;
}
.erij-missed-banner { background: rgba(217,164,65,0.16); border: 2px solid var(--erij-amber); }
.erij-countdown-icon { font-size: 24px; line-height: 1; }
.erij-countdown-banner strong, .erij-missed-banner strong { display: block; font-size: 15px; margin-bottom: 4px; color: var(--erij-text) !important; }
.erij-countdown-banner p, .erij-missed-banner p { margin: 0; font-size: 13px; color: var(--erij-text) !important; opacity: 0.9; }
#erij-countdown-timer { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--erij-amber); }
@keyframes erij-countdown-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(217,164,65,0.4); }
    50% { box-shadow: 0 0 0 6px rgba(217,164,65,0); }
}

/* ── Leaderboard ─────────────────────────────────────────────────────── */
.erij-prog-title { font-size: 30px; font-weight: 800; margin-bottom: 20px; }

.erij-lb-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; overflow-x: auto; }
.erij-lb-tab { background: rgba(255,255,255,0.05); border: 2px solid transparent; color: var(--erij-text) !important; padding: 10px 16px; border-radius: var(--erij-radius-sm); font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.erij-lb-tab-active { background: rgba(29,163,154,0.18); border-color: var(--erij-teal); color: #5eead4 !important; }
.erij-active-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.erij-active-item { background: rgba(217,164,65,0.12); border: 1px solid rgba(217,164,65,0.4); color: #fbbf24 !important; padding: 7px 14px; border-radius: 20px; font-size: 12px; font-weight: 700; }
.erij-lb-provisional-note { background: rgba(217,164,65,0.14); border: 1px solid var(--erij-amber); border-radius: var(--erij-radius-sm); padding: 10px 14px; font-size: 13px; color: #fbbf24 !important; margin-bottom: 14px; }
.erij-lb-table { width: 100%; border-collapse: collapse; background: rgba(255,255,255,0.03); border-radius: var(--erij-radius); overflow: hidden; border: 1px solid var(--erij-border); }
.erij-lb-table th { text-align: left; background: rgba(255,255,255,0.05); padding: 12px 16px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--erij-muted) !important; }
.erij-lb-table td { padding: 14px 16px; border-top: 1px solid rgba(255,255,255,0.06); font-size: 14px; color: var(--erij-text) !important; }
.erij-lb-team-name { font-weight: 700; color: var(--erij-text) !important; }
.erij-lb-members { font-size: 12px; color: var(--erij-muted) !important; margin-top: 3px; }
.erij-lb-table tr:first-child td { font-weight: 800; color: var(--erij-amber) !important; font-size: 15px; }

.erij-empty { color: var(--erij-muted) !important; font-size: 13px; padding: 16px 0; text-align: center; }

/* ── Room Detail page (/escape-room/room/?id=…) ───────────────────────
   Deliberately navy + gold, matching the specific reference design given
   for this page — its own visual language, separate from the teal used
   on the rest of the plugin. Scoped entirely under .erij-room-detail so
   it can't leak onto or clash with any other page. */
.erij-room-detail {
    --rd-navy: #0d1b2e;
    --rd-navy-2: #14263d;
    --rd-gold: #d4af37;
    --rd-gold-bright: #f1c94a;
    background: var(--rd-navy);
    min-height: 100vh;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.erij-room-detail * { box-sizing: border-box; }
.erij-room-detail .erij-back-link { color: #94a3b8 !important; }
.erij-room-detail .erij-back-link:hover { color: var(--rd-gold) !important; }

.erij-rd-inner { max-width: 640px; margin: 0 auto; padding: 24px 20px 60px; text-align: center; }

.erij-rd-hero {
    width: 100%; aspect-ratio: 16/10; border-radius: var(--erij-radius);
    background-size: cover; background-position: center;
    margin: 16px 0 20px; border: 1px solid rgba(255,255,255,0.08);
}
.erij-rd-hero-fallback {
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--rd-navy-2), var(--rd-navy));
}
.erij-rd-hero-fallback span { font-size: 26px; font-weight: 800; color: var(--rd-gold); text-align: center; padding: 0 20px; }

.erij-rd-book-row { margin-bottom: 8px; }
.erij-rd-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 13px 30px; border: 2px solid var(--rd-gold); border-radius: 999px;
    color: var(--rd-gold) !important; font-weight: 700; font-size: 14px;
    letter-spacing: 0.03em; text-decoration: none !important; text-transform: uppercase;
    transition: background 0.15s;
}
.erij-rd-btn:hover { background: rgba(212,175,55,0.12); }

.erij-rd-divider { border: none; border-top: 1px solid rgba(255,255,255,0.12); margin: 24px 0; }

.erij-rd-info { display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; }
.erij-rd-info div { font-size: 14px; color: #fff; }
.erij-rd-info-label { color: var(--rd-gold); font-weight: 700; }
.erij-rd-key { opacity: 0.25; font-size: 15px; }
.erij-rd-key-filled { opacity: 1; }

.erij-rd-title { font-size: 30px; font-weight: 900; color: #fff; letter-spacing: 0.02em; margin: 0 0 12px; text-transform: uppercase; }

.erij-rd-live-status { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.erij-rd-live-badge { display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 700; }
.erij-rd-live-open { background: rgba(16,185,129,0.18); color: #6ee7b7; }
.erij-rd-live-closed { background: rgba(255,255,255,0.08); color: #94a3b8; }
.erij-rd-queue-count { font-size: 13px; color: #cbd5e1; font-weight: 600; }

.erij-rd-location { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; font-size: 14px; color: #cbd5e1; margin-bottom: 20px; }
.erij-rd-location a { color: var(--rd-gold) !important; font-weight: 700; text-decoration: none; }
.erij-rd-location a:hover { text-decoration: underline; }

.erij-rd-core-task { text-align: left; background: rgba(212,175,55,0.08); border: 1px solid rgba(212,175,55,0.3); border-radius: var(--erij-radius); padding: 18px 20px; margin-bottom: 20px; }
.erij-rd-core-task p { color: #e2e8f0; font-size: 14px; line-height: 1.7; margin: 0; }
.erij-rd-subheading { font-size: 13px; font-weight: 800; color: var(--rd-gold); text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 8px; }

.erij-rd-tabs { display: flex; border-top: 1px solid rgba(255,255,255,0.12); }
.erij-rd-tab {
    flex: 1; background: none; border: none; border-bottom: 3px solid transparent;
    color: #fff; font-size: 14px; font-weight: 700; padding: 14px 8px; cursor: pointer;
    border-top: 1px solid rgba(255,255,255,0.12); margin-top: -1px;
}
.erij-rd-tab-active { border-bottom-color: var(--rd-gold); color: var(--rd-gold); }
.erij-rd-panels { text-align: left; padding: 20px 4px; }
.erij-rd-panel { display: none; }
.erij-rd-panel-active { display: block; }
.erij-rd-panel p { color: #e2e8f0; font-size: 15px; line-height: 1.7; text-align: center; }
.erij-rd-description { color: #e2e8f0; font-size: 15px; line-height: 1.7; padding: 20px 4px; }

.erij-rd-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.erij-rd-gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; border: 1px solid rgba(255,255,255,0.1); }

.erij-rd-trailer-row { margin-top: 20px; }

@media (max-width: 480px) {
    .erij-rd-tab { font-size: 12px; padding: 12px 4px; }
    .erij-rd-title { font-size: 24px; }
}


@media (max-width: 640px) {
    .erij-member-row { grid-template-columns: 1fr 1fr; }
    .erij-landing-box, .erij-card-lg { padding: 30px 20px; }
    .erij-landing-title { font-size: 26px; }
    .erij-code-display { font-size: 22px; letter-spacing: 2px; }

    /* Centre everything on mobile — matches the app-like feel */
    .erij-wrap { text-align: center; }
    .erij-wrap .erij-form-group { text-align: left; }
    .erij-back-link { display: block; }
    .erij-room-grid { justify-content: center; }
    .erij-room-card { text-align: left; }
    .erij-active-list { justify-content: center; }
    .erij-lb-tabs { justify-content: center; }
    .erij-lb-table th, .erij-lb-table td { text-align: center; }
    .erij-team-table th, .erij-team-table td { padding: 8px 6px; font-size: 12px; }
    .erij-accordion-header { text-align: left; }
    .erij-home-lb-link { width: 100%; }
}