@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* ─── Root Variables: LIGHT (default) ───────────────────────────────────────── */
:root {
    --a27-bg:        #f5f4f0;
    --a27-card:      #ffffff;
    --a27-card-2:    #f0efe8;
    --a27-accent:    #a87820;
    --a27-accent-2:  #c8972a;
    --a27-text:      #1a1a2e;
    --a27-muted:     #5a5a6e;
    --a27-border:    #dddbd0;
    --a27-success:   #16a34a;
    --a27-error:     #dc2626;
    --a27-radius:    16px;
    --a27-radius-sm: 10px;
    --a27-shadow:    0 4px 24px rgba(0,0,0,.12);
    --a27-hero-bg:   linear-gradient(160deg, #fff8f0 0%, #fff3e0 50%, #f5f0e8 100%);
    --a27-hero-glow: radial-gradient(ellipse at 50% 0%, rgba(200,151,42,.08) 0%, transparent 70%);
    --a27-hero-border: #e8e0d0;
    --a27-logo-dark-display: none;
    --a27-logo-light-display: block;
    --a27-input-bg:  #f5f4f0;
    --a27-toggle-bg: rgba(0,0,0,.07);
    --a27-toggle-hover: rgba(0,0,0,.12);
    --a27-form-hint: #888;
}

/* ─── Dark mode ─────────────────────────────────────────────────────────────── */
html.a27-dark .a27-ticket-wrap,
html.a27-dark .a27-access-form-wrap {
    --a27-bg:        #0f0f18;
    --a27-card:      #1a1a28;
    --a27-card-2:    #12121e;
    --a27-accent:    #c8972a;
    --a27-accent-2:  #e8b84b;
    --a27-text:      #e8e8f0;
    --a27-muted:     #888899;
    --a27-border:    #2a2a40;
    --a27-success:   #22c55e;
    --a27-error:     #ef4444;
    --a27-shadow:    0 8px 32px rgba(0,0,0,.5);
    --a27-hero-bg:   linear-gradient(160deg, #0f0f18 0%, #1a1228 50%, #0f1418 100%);
    --a27-hero-glow: radial-gradient(ellipse at 50% 0%, rgba(200,151,42,.12) 0%, transparent 70%);
    --a27-hero-border: #2a2a40;
    --a27-logo-dark-display: block;
    --a27-logo-light-display: none;
    --a27-input-bg:  #0f0f18;
    --a27-toggle-bg: rgba(255,255,255,.1);
    --a27-toggle-hover: rgba(255,255,255,.15);
    --a27-form-hint: #666;
}

/* ─── Base ──────────────────────────────────────────────────────────────────── */
.a27-ticket-wrap,
.a27-access-form-wrap {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--a27-text);
    -webkit-font-smoothing: antialiased;
    background: var(--a27-bg);
    transition: background .3s ease, color .3s ease;
}

/* The toggle button shows ☀️/🌙 and is managed by a27-theme.js */
.a27-theme-toggle {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 999;
    display: flex;
    align-items: center;
    gap: 7px;
    background: var(--a27-toggle-bg);
    border: 1.5px solid var(--a27-border);
    border-radius: 30px;
    padding: 7px 14px 7px 10px;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--a27-text);
    backdrop-filter: blur(10px);
    transition: background .2s, border-color .2s, transform .15s;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
}

.a27-theme-toggle:hover {
    background: var(--a27-toggle-hover);
    transform: translateY(-1px);
    border-color: var(--a27-accent);
}

.a27-theme-toggle:active { transform: translateY(0); }
.a27-theme-toggle .a27-tt-icon  { font-size: 16px; }

/* ─── Access Form ───────────────────────────────────────────────────────────── */
.a27-access-form-wrap {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    border-radius: var(--a27-radius);
    margin: -20px;
}

.a27-access-form {
    background: var(--a27-card);
    border: 1px solid var(--a27-border);
    border-radius: 24px;
    padding: 48px 40px;
    max-width: 480px;
    width: 100%;
    text-align: center;
    box-shadow: var(--a27-shadow);
}

.a27-access-logo img { max-width: 160px; margin: 0 auto 24px; display: block; }

.a27-access-form h1 { font-size: 28px; font-weight: 800; color: var(--a27-text); margin: 0 0 12px; }
.a27-access-form p  { color: var(--a27-muted); font-size: 14px; line-height: 1.6; margin: 0 0 28px; }

.a27-form { text-align: left; }
.a27-form-group { margin-bottom: 16px; }

.a27-form-group label {
    display: block; font-size: 12px; font-weight: 600;
    color: var(--a27-muted); text-transform: uppercase;
    letter-spacing: 0.8px; margin-bottom: 8px;
}

.a27-form-group input {
    width: 100%; background: var(--a27-input-bg);
    border: 1.5px solid var(--a27-border);
    border-radius: var(--a27-radius-sm);
    padding: 13px 16px; color: var(--a27-text);
    font-size: 15px; font-family: inherit;
    transition: border-color .2s; box-sizing: border-box;
}

.a27-form-group input:focus { outline: none; border-color: var(--a27-accent); }

.a27-form-hint { font-size: 12px; color: var(--a27-form-hint); margin-top: 5px; display: block; }

/* ─── Buttons ───────────────────────────────────────────────────────────────── */
.a27-btn-primary {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 8px;
    background: linear-gradient(135deg, var(--a27-accent), var(--a27-accent-2));
    color: #fff; font-family: inherit; font-size: 16px; font-weight: 700;
    padding: 14px 28px; border: none; border-radius: 50px; cursor: pointer;
    text-decoration: none;
    transition: transform .2s, box-shadow .2s, opacity .2s;
    width: 100%; margin-top: 8px;
}

.a27-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(200,151,42,.35); color: #fff; }

.a27-btn-secondary {
    display: inline-flex; align-items: center; gap: 6px;
    background: transparent; color: var(--a27-accent);
    border: 1.5px solid var(--a27-accent);
    font-family: inherit; font-size: 14px; font-weight: 600;
    padding: 10px 20px; border-radius: 50px; cursor: pointer;
    text-decoration: none; transition: background .2s, color .2s;
}
.a27-btn-secondary:hover { background: var(--a27-accent); color: #fff; }
.a27-btn-sm { font-size: 13px; padding: 7px 16px; }
.a27-btn-full { width: 100%; }

/* Hide the WordPress theme page title on the Mein Ticket page */
.a27-ticket-wrap ~ * h1.entry-title,
body.page .a27-ticket-wrap + h1,
.entry-header:has(+ .a27-ticket-wrap),
h1.page-title:has(~ .a27-ticket-wrap) { display: none; }

/* ─── Ticket wrap ───────────────────────────────────────────────────────────── */
.a27-ticket-wrap { max-width: 800px; margin: 0 auto; padding: 0 0 60px; }

/* ─── Hero ──────────────────────────────────────────────────────────────────── */
.a27-hero {
    background: var(--a27-hero-bg);
    border-radius: var(--a27-radius);
    padding: 36px 32px 28px;
    text-align: center;
    border: 1px solid var(--a27-hero-border);
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
    transition: background .3s;
    box-shadow: 0 2px 16px rgba(0,0,0,.07);
}

.a27-hero::before {
    content: ''; position: absolute; inset: 0;
    background: var(--a27-hero-glow); pointer-events: none;
}

/* Dual logos for dark/light mode */
.a27-hero-logo-dark  { display: var(--a27-logo-dark-display); }
.a27-hero-logo-light { display: var(--a27-logo-light-display); }

.a27-hero-logo img {
    max-width: 80px;
    height: auto;
    margin: 0 auto 16px;
    display: block;
    border-radius: 8px;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,.15));
}

.a27-hero-title { font-size: 28px; font-weight: 900; color: var(--a27-text); margin: 0 0 6px; letter-spacing: -0.5px; }
.a27-hero-subtitle { color: var(--a27-accent); font-size: 12px; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase; margin: 0 0 16px; }

.a27-hero-meta { display: flex; justify-content: center; gap: 24px; flex-wrap: wrap; }
.a27-hero-meta-item { font-size: 14px; color: var(--a27-muted); }
.a27-hero-meta-item strong { color: var(--a27-text); }

/* ─── Cards ─────────────────────────────────────────────────────────────────── */
.a27-card {
    background: var(--a27-card);
    border: 1px solid var(--a27-border);
    border-radius: var(--a27-radius);
    padding: 28px 32px;
    margin: 0 16px 20px;
    box-shadow: 0 4px 16px rgba(0,0,0,.12);
    transition: border-color .2s, background .3s, box-shadow .3s;
}

.a27-card-title {
    font-size: 11px; font-weight: 700; color: var(--a27-accent);
    text-transform: uppercase; letter-spacing: 2px;
    margin: 0 0 20px; display: flex; align-items: center; gap: 8px;
}

/* ─── Ticket card ───────────────────────────────────────────────────────────── */
.a27-ticket-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.a27-ticket-name   { font-size: 28px; font-weight: 800; color: var(--a27-text); line-height: 1.1; }
.a27-ticket-city   { font-size: 15px; color: var(--a27-accent); margin-top: 4px; font-weight: 500; }
.a27-ticket-meta   { text-align: right; }
.a27-ticket-number { font-size: 13px; color: var(--a27-muted); margin-bottom: 6px; }
.a27-ticket-date   { font-size: 11px; color: var(--a27-muted); margin-top: 6px; }

.a27-status-badge { display: inline-block; padding: 4px 14px; border-radius: 20px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; }
.a27-status-badge.paid    { background: rgba(34,197,94,.12); color: var(--a27-success); border: 1px solid rgba(34,197,94,.25); }
.a27-status-badge.pending { background: rgba(234,179,8,.12); color: #d97706; border: 1px solid rgba(234,179,8,.25); }

/* ─── Meals section ─────────────────────────────────────────────────────────── */
.a27-meal-section { margin-bottom: 8px; }
.a27-meal-section:last-child { margin-bottom: 0; }

.a27-meal-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 0; border-bottom: 1px solid var(--a27-border);
}

.a27-meal-section:last-child .a27-meal-row { border-bottom: none; }

.a27-meal-info  { display: flex; align-items: center; gap: 12px; }
.a27-meal-icon  { font-size: 22px; }

.a27-meal-label { font-size: 16px; font-weight: 600; color: var(--a27-text); }
.a27-meal-label small { display: block; font-size: 12px; font-weight: 400; color: var(--a27-muted); margin-top: 2px; }

.a27-meal-status { display: flex; align-items: center; gap: 10px; }

.a27-check { font-size: 22px; }
.a27-check.yes { color: var(--a27-success); }
.a27-check.no  { color: var(--a27-border); }

.a27-meal-booked-text { font-size: 14px; color: var(--a27-success); font-weight: 600; }
.a27-meal-unbooked    { font-size: 13px; color: var(--a27-muted); }

/* ─── Menu choice / Meal groups ─────────────────────────────────────────────── */
.a27-menu-choice-wrap {
    background: var(--a27-card-2);
    border: 1px solid var(--a27-border);
    border-radius: var(--a27-radius-sm);
    margin: 10px 0 6px;
    overflow: hidden;
    animation: a27FadeIn .3s ease;
    transition: background .3s, border-color .3s;
}

.a27-menu-choice-header {
    display: flex; align-items: center; gap: 8px;
    padding: 11px 16px; font-size: 13px; font-weight: 600;
    color: var(--a27-accent); border-bottom: 1px solid var(--a27-border);
    background: rgba(200,151,42,.05);
}

.a27-menu-price { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--a27-accent); }

.a27-meal-groups { display: flex; flex-direction: column; }

.a27-meal-group {
    border-bottom: 1px solid var(--a27-border);
    transition: background .15s;
}

.a27-meal-group:last-child { border-bottom: none; }

.a27-meal-group-main { display: flex; align-items: center; position: relative; }

.a27-meal-group input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }

.a27-meal-group-label {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px; cursor: pointer; width: 100%;
    transition: background .15s; user-select: none;
}

.a27-meal-group-label:hover { background: rgba(200,151,42,.05); }

.a27-meal-group input[type="radio"]:checked + .a27-meal-group-label {
    background: rgba(200,151,42,.08);
}

.a27-meal-group.selected { background: rgba(200,151,42,.04); }

.a27-menu-radio {
    width: 18px; height: 18px;
    border: 2px solid var(--a27-border); border-radius: 50%;
    flex-shrink: 0; display: flex; align-items: center; justify-content: center;
    transition: border-color .2s, background .2s;
}

.a27-meal-group input[type="radio"]:checked + .a27-meal-group-label .a27-menu-radio {
    border-color: var(--a27-accent); background: var(--a27-accent);
    box-shadow: 0 0 0 3px rgba(200,151,42,.15);
}

.a27-menu-radio::after { content: ''; width: 7px; height: 7px; background: #fff; border-radius: 50%; display: none; }
.a27-meal-group input[type="radio"]:checked + .a27-meal-group-label .a27-menu-radio::after { display: block; }

.a27-meal-emoji    { font-size: 20px; }
.a27-meal-group-name { font-size: 15px; font-weight: 600; color: var(--a27-text); flex: 1; }

.a27-meal-group input[type="radio"]:checked + .a27-meal-group-label .a27-meal-group-name {
    color: var(--a27-accent);
}

/* Vegi toggle */
.a27-vegi-toggle {
    padding: 0 16px 12px 60px;
    animation: a27FadeIn .25s ease;
}

.a27-vegi-hidden { display: none; }

.a27-vegi-label {
    display: inline-flex; align-items: center; gap: 10px;
    cursor: pointer; user-select: none;
}

.a27-vegi-label input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; }

.a27-vegi-check {
    width: 18px; height: 18px;
    border: 2px solid var(--a27-border); border-radius: 4px;
    flex-shrink: 0; display: flex; align-items: center; justify-content: center;
    transition: border-color .2s, background .2s;
}

.a27-vegi-label input[type="checkbox"]:checked + .a27-vegi-check {
    border-color: #16a34a; background: #16a34a;
    box-shadow: 0 0 0 2px rgba(22,163,74,.15);
}

.a27-vegi-check::after { content: '✓'; font-size: 11px; color: #fff; display: none; font-weight: 800; }
.a27-vegi-label input[type="checkbox"]:checked + .a27-vegi-check::after { display: block; }

.a27-vegi-text { font-size: 14px; color: var(--a27-muted); font-weight: 500; }
.a27-vegi-label input[type="checkbox"]:checked ~ .a27-vegi-text { color: #16a34a; font-weight: 600; }

/* Saved / pending status */
.a27-menu-saved, .a27-menu-pending {
    padding: 10px 16px; font-size: 12px;
    border-top: 1px solid var(--a27-border);
}
.a27-menu-saved  { color: var(--a27-success); background: rgba(34,197,94,.06); }
.a27-menu-pending { color: #d97706; background: rgba(245,158,11,.05); }

/* ─── Sessions ──────────────────────────────────────────────────────────────── */
.a27-sessions-intro {
    color: var(--a27-muted); font-size: 14px; margin: 0 0 24px; line-height: 1.6;
}

.a27-sessions-intro strong { color: var(--a27-text); }

.a27-sessions-tba {
    color: var(--a27-muted); font-size: 14px; font-style: italic;
    padding: 16px; background: var(--a27-card-2); border-radius: 10px;
}

.a27-slot-wrap { margin-bottom: 20px; }
.a27-slot-wrap:last-of-type { margin-bottom: 0; }

.a27-slot-header {
    font-size: 13px; font-weight: 700; color: var(--a27-muted);
    text-transform: uppercase; letter-spacing: 1.5px;
    margin-bottom: 12px; display: flex; align-items: center; gap: 8px;
}

.a27-slot-time {
    background: var(--a27-accent); color: #fff;
    font-size: 10px; padding: 2px 10px; border-radius: 20px; font-weight: 600;
}

.a27-session-option { position: relative; margin-bottom: 8px; }
.a27-session-option input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }

.a27-session-label {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 16px 18px; background: var(--a27-card-2);
    border: 1.5px solid var(--a27-border); border-radius: var(--a27-radius-sm);
    cursor: pointer; transition: border-color .2s, background .2s; user-select: none;
}

.a27-session-label:hover { border-color: #4a4a60; background: var(--a27-bg); }
.a27-session-option input[type="radio"]:checked + .a27-session-label { border-color: var(--a27-accent); background: rgba(200,151,42,.07); }

.a27-session-radio {
    width: 20px; height: 20px; border: 2px solid var(--a27-border);
    border-radius: 50%; flex-shrink: 0; margin-top: 2px;
    transition: border-color .2s, background .2s;
    display: flex; align-items: center; justify-content: center;
}

.a27-session-option input[type="radio"]:checked + .a27-session-label .a27-session-radio {
    border-color: var(--a27-accent); background: var(--a27-accent);
    box-shadow: 0 0 0 3px rgba(200,151,42,.2);
}

.a27-session-radio::after { content: ''; width: 8px; height: 8px; background: #fff; border-radius: 50%; display: none; }
.a27-session-option input[type="radio"]:checked + .a27-session-label .a27-session-radio::after { display: block; }

.a27-session-info { flex: 1; }

.a27-session-title { font-size: 15px; font-weight: 600; color: var(--a27-text); margin-bottom: 4px; display: block; }
.a27-session-meta  { font-size: 12px; color: var(--a27-muted); display: flex; gap: 12px; flex-wrap: wrap; }

.a27-session-capacity      { font-size: 11px; color: var(--a27-muted); margin-top: 4px; display: block; }
.a27-session-capacity.full { color: var(--a27-error); }

/* ─── Message / Feedback ────────────────────────────────────────────────────── */
.a27-message {
    padding: 14px 20px; border-radius: var(--a27-radius-sm); font-size: 14px;
    font-weight: 500; margin-top: 16px; display: none;
    animation: a27FadeIn .3s ease;
}

.a27-message.visible { display: block; }

@keyframes a27FadeIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.a27-message.success { background: rgba(34,197,94,.12); border: 1px solid rgba(34,197,94,.3); color: #4ade80; }
.a27-message.error   { background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.3); color: #f87171; }

/* Light mode message adjustments */
.a27-light .a27-message.success { color: #16a34a; }
.a27-light .a27-message.error   { color: #dc2626; }

/* ─── Meal purchase success banner ──────────────────────────────────────────── */
.a27-meal-success-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(22,163,74,.12);
    border: 1.5px solid rgba(22,163,74,.35);
    border-radius: var(--a27-radius-sm);
    padding: 14px 18px;
    margin: 0 16px 20px;
    font-size: 14px;
    font-weight: 500;
    color: var(--a27-success);
    animation: a27FadeIn .5s ease;
}

.a27-meal-success-banner span:first-child { font-size: 20px; flex-shrink: 0; }
.a27-meal-success-banner span:nth-child(2) { flex: 1; }

html.a27-dark .a27-meal-success-banner { color: #4ade80; }

/* ─── Footer note ───────────────────────────────────────────────────────────── */
.a27-footer-note { text-align: center; padding: 24px 16px 0; font-size: 12px; color: var(--a27-muted); }

/* ─── Error box ─────────────────────────────────────────────────────────────── */
.a27-error {
    background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.3);
    color: #f87171; padding: 16px 20px; border-radius: var(--a27-radius-sm); margin: 20px 0;
}

/* ─── Loading spinner ───────────────────────────────────────────────────────── */
.a27-spinner {
    display: inline-block; width: 16px; height: 16px;
    border: 2px solid rgba(255,255,255,.3); border-top-color: #fff;
    border-radius: 50%; animation: a27Spin .7s linear infinite;
}

@keyframes a27Spin { to { transform: rotate(360deg); } }

/* ─── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .a27-card { padding: 20px 18px; margin: 0 8px 16px; }
    .a27-hero  { padding: 40px 18px 28px; }
    .a27-hero-title { font-size: 26px; }
    .a27-ticket-header { flex-direction: column; }
    .a27-ticket-meta { text-align: left; }
    .a27-hero-meta { gap: 12px; }
    .a27-theme-toggle { top: 12px; right: 12px; padding: 6px 12px 6px 8px; font-size: 12px; }
    .a27-vegi-toggle { padding-left: 48px; }
}

/* ── Deadline Banner ─────────────────────────────────────────────────── */
.a27-deadline-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 16px;
}
.a27-deadline-banner span:last-child {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.a27-deadline-banner small {
    font-size: 11px;
    opacity: 0.7;
    font-weight: 400;
}
.a27-deadline-open {
    background: #fef9ec;
    border: 1px solid #c8972a;
    color: #92400e;
}
.a27-deadline-locked {
    background: #f4f4f8;
    border: 1px solid #c0c0d0;
    color: #555;
}
.a27-deadline-icon {
    font-size: 18px;
    flex-shrink: 0;
}

/* ── Locked Menu Choice ──────────────────────────────────────────────── */
.a27-menu-locked {
    opacity: 0.55;
    pointer-events: none;
    filter: grayscale(0.3);
}

/* ── Card Hover Shadow (like booking form) ────────────────────── */
.a27-card-hover {
    transition: box-shadow .25s ease, transform .25s ease;
    cursor: default;
}
.a27-card-hover:hover {
    box-shadow: 0 12px 40px rgba(0,0,0,.18);
    transform: translateY(-2px);
}

/* ── Pulsing CTA Arrow ────────────────────────────────────────── */
.a27-scroll-cta {
    text-align: center;
    padding: 24px 16px 8px;
    user-select: none;
}
.a27-scroll-cta-text {
    font-size: 15px;
    font-weight: 700;
    color: #c8972a;
    margin: 0 0 12px;
    letter-spacing: .3px;
}
.a27-scroll-arrow {
    font-size: 36px;
    color: #c8972a;
    animation: a27-bounce 1.4s ease-in-out infinite;
    display: inline-block;
    line-height: 1;
}
@keyframes a27-bounce {
    0%, 100% { transform: translateY(0);    opacity: 1; }
    50%       { transform: translateY(10px); opacity: .6; }
}