/* Seat booking page (Views/Show). Everything is scoped under .sb-page so it cannot leak into the admin pages. */

.sb-page {
    --sb-ink: #241F1B;
    --sb-muted: #6B6259;
    --sb-soft: #8A7F73;
    --sb-faint: #A99A89;
    --sb-line: #EAE2D5;
    --sb-input-line: #D8CFC2;
    --sb-burgundy: #6B1E23;
    --sb-accent: #B3542E;
    --sb-display: "Fraunces", Georgia, "Times New Roman", serif;

    color: var(--sb-ink);
    padding: 8px 0 64px;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.sb-page h1, .sb-page h2 { font-family: var(--sb-display); }

.sb-page :focus-visible { outline: 2px solid var(--sb-accent); outline-offset: 2px; }

/* ---- Header ---- */
.sb-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.sb-eyebrow { font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sb-soft); font-weight: 600; }
.sb-title { margin: 4px 0 0; font-size: 34px; font-weight: 600; color: var(--sb-ink); }
.sb-date { margin-top: 4px; font-size: 15px; color: var(--sb-muted); }
.sb-picker { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--sb-muted); font-weight: 600; margin: 0; }
/* Sized to fit its longest option ("show name - date time"), so nothing is ever cut off. The old Site.css caps
   every select at max-width: 280px, which is what used to clip it; this lifts that cap but still never lets it
   grow wider than the space available (100%). */
.sb-select {
    padding: 10px 14px; width: auto; min-width: 320px; max-width: 100%; border-radius: 10px; border: 1px solid var(--sb-input-line);
    background: #fff; font-size: 14px; color: var(--sb-ink); font-weight: 400;
}

/* ---- Stage banner ---- */
.sb-stage {
    position: relative; height: 120px; border-radius: 16px; overflow: hidden;
    background: linear-gradient(180deg, #3B1418 0%, #591B21 55%, #6B1E23 100%);
    display: flex; align-items: center; justify-content: center;
}
.sb-stage-glow {
    position: absolute; inset: 0;
    background:
        radial-gradient(120px 60px at 20% 0%, rgba(217, 165, 68, 0.35), transparent 70%),
        radial-gradient(120px 60px at 50% 0%, rgba(217, 165, 68, 0.35), transparent 70%),
        radial-gradient(120px 60px at 80% 0%, rgba(217, 165, 68, 0.35), transparent 70%);
}
.sb-stage-text { position: relative; color: #F6F2EC; font-family: var(--sb-display); font-size: 26px; letter-spacing: 0.16em; font-weight: 600; text-align: center; padding: 0 12px; }

/* ---- Cards ---- */
.sb-card { background: #fff; border: 1px solid var(--sb-line); border-radius: 16px; }
.sb-card-title { margin: 0 0 14px; font-size: 16px; font-weight: 600; }

/* ---- Legend ---- */
.sb-legend {
    display: flex; gap: 20px; flex-wrap: wrap; align-items: center;
    padding: 14px 18px; background: #fff; border: 1px solid var(--sb-line); border-radius: 12px;
}
.sb-legend-item { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #4A423A; }
.sb-legend-total { margin-left: auto; font-size: 13px; color: var(--sb-soft); }
.sb-swatch { width: 18px; height: 18px; border-radius: 5px; display: inline-block; }
.sb-swatch-free { background: #E7EEF2; border: 1px solid #B9C6CD; }
.sb-swatch-selected { background: #D9A544; border: 1px solid #B3862B; }
.sb-swatch-booked { background: #E3D4D2; border: 1px solid #C9A6A2; }

/* ---- Map + summary ---- */
.sb-layout { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; }
.sb-map { flex: 1 1 640px; min-width: 0; padding: 32px 28px; }
.sb-map-inner { display: flex; flex-direction: column; gap: 10px; }

.sb-row { display: flex; align-items: center; gap: 16px; }
.sb-row-label { width: 46px; flex-shrink: 0; font-size: 12px; color: var(--sb-faint); font-weight: 600; text-align: right; }
.sb-row-seats { flex: 1; display: flex; justify-content: center; }
.sb-row-inner { display: flex; align-items: center; justify-content: center; gap: 22px; }
/* Never let the blocks or the aisle shrink: every row must keep exactly the same width so the seats line up. */
.sb-block { display: flex; gap: 6px; flex-shrink: 0; }
.sb-aisle { width: 18px; flex-shrink: 0; }

.sb-divider { display: flex; align-items: center; gap: 12px; margin: 14px 0 6px; }
.sb-divider-line { flex: 1; height: 1px; background: var(--sb-line); }
.sb-divider-text { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sb-faint); font-weight: 700; white-space: nowrap; }

/* ---- Seats: the checkbox stays the real control, the span is what you see ---- */
.sb-seat { position: relative; display: block; margin: 0; cursor: pointer; }
.sb-seat input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: inherit; }
.sb-seat span {
    display: flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 7px; box-sizing: border-box;
    border: 1px solid #B9C6CD; background: #E7EEF2; color: #35424A;
    font-size: 10px; font-weight: 700;
    transition: transform 0.1s ease, background-color 0.1s ease;
}
.sb-seat input:checked + span { background: #D9A544; border-color: #B3862B; color: #2A1F06; transform: scale(1.08); }
.sb-seat input:focus-visible + span { outline: 2px solid var(--sb-accent); outline-offset: 2px; }

.sb-summary { position: sticky; top: 70px; flex: 0 0 280px; display: flex; flex-direction: column; gap: 16px; }
.sb-summary-card { padding: 22px; }
.sb-selected-list { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sb-selected-list li {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 10px; background: #FBF3E1; border: 1px solid #EFD9A4; border-radius: 8px; font-size: 13px;
}
.sb-remove { border: none; background: transparent; color: #8A6B2B; font-size: 17px; font-weight: 700; cursor: pointer; line-height: 1; padding: 2px 6px; }
.sb-empty { margin: 0 0 14px; font-size: 13px; color: var(--sb-faint); }
.sb-count-row { display: flex; align-items: center; justify-content: space-between; padding-top: 12px; border-top: 1px solid var(--sb-line); font-size: 14px; font-weight: 600; }
.sb-link-button { align-self: flex-start; border: none; background: transparent; color: var(--sb-soft); font-size: 13px; cursor: pointer; padding: 0; text-decoration: underline; }

/* Honeypot field (see _RegistrationInfo.cshtml): off-screen rather than display:none, since some bots
   specifically skip display:none fields, knowing it's a common honeypot technique. */
.sb-hp { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---- Booking form ---- */
.sb-form { padding: 28px 28px 32px; }
.sb-form .sb-card-title { font-size: 18px; margin-bottom: 18px; }
.sb-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.sb-field { display: flex; flex-direction: column; gap: 6px; }
.sb-field label { margin: 0; font-size: 13px; font-weight: 600; color: #4A423A; }
.sb-field-wide { grid-column: 1 / -1; }
.sb-input { padding: 10px 12px; border-radius: 9px; border: 1px solid var(--sb-input-line); font-size: 14px; background: #fff; width: 100%; box-sizing: border-box; }
.sb-input.input-validation-error { border-color: #B3261E; }
.sb-page .field-validation-error { color: #B3261E; font-size: 12px; }
.sb-submit {
    margin-top: 22px; padding: 13px 28px; border: none; border-radius: 10px;
    background: var(--sb-burgundy); color: #F6F2EC; font-size: 15px; font-weight: 600; cursor: pointer;
}

/* ---- Small screens ---- */
@media (max-width: 767px) {
    .sb-title { font-size: 26px; }
    .sb-stage { height: 90px; }
    .sb-stage-text { font-size: 18px; }
    .sb-map { padding: 20px 16px; }
    /* Keep the seats a comfortable size to tap and let the map scroll sideways instead. */
    .sb-map-scroll { overflow-x: auto; }
    .sb-map-inner { min-width: 700px; }
    .sb-summary { position: static; flex: 1 1 100%; }
    .sb-form { padding: 22px 18px 26px; }
    .sb-form-grid { grid-template-columns: minmax(0, 1fr); }
    .sb-submit { width: 100%; }
    .sb-picker { width: 100%; }
    /* A little smaller on phones so more of "name - date time" fits in the closed dropdown. */
    .sb-select { width: 100%; min-width: 0; font-size: 13px; padding-left: 10px; padding-right: 8px; }
}

/* =====================================================================
   The rest of the booking flow: home, confirmation, cancel pages.
   ===================================================================== */

body:has(.sb-page) { background: #F6F2EC; }

.sb-page a { color: var(--sb-accent); }
.sb-page a:hover { color: #8F3F1F; }

.sb-narrow { width: 100%; max-width: 720px; margin: 0 auto; }
.sb-panel { padding: 28px; }
.sb-lead { margin: 0 0 8px; font-family: var(--sb-display); font-size: 22px; font-weight: 600; color: var(--sb-ink); }
.sb-text { margin: 0 0 12px; font-size: 15px; line-height: 1.6; color: var(--sb-muted); }
.sb-text strong { color: var(--sb-ink); }
.sb-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 22px; }

/* Burgundy title strip (same look as the stage banner, sized to its text) */
.sb-hero {
    position: relative; overflow: hidden; border-radius: 16px; padding: 30px 32px; color: #F6F2EC;
    background: linear-gradient(180deg, #3B1418 0%, #591B21 55%, #6B1E23 100%);
}
.sb-hero .sb-stage-glow { pointer-events: none; }
.sb-hero-body { position: relative; }
.sb-hero-eyebrow { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: #D9A544; font-weight: 700; }
/* Two classes so this reliably outranks theme.css's ".sb-theme h1" rule (which would
   otherwise repaint this dark-background title in dark ink), regardless of load order. */
.sb-hero .sb-hero-title { margin: 6px 0 0; font-size: 28px; font-weight: 600; color: #F6F2EC; }
.sb-hero-sub { margin-top: 4px; font-size: 15px; color: #E5D9CC; }

/* Seat numbers as gold chips, like the selected seats on the map */
.sb-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 18px; }
.sb-chip {
    min-width: 40px; padding: 6px 10px; box-sizing: border-box; text-align: center;
    background: #D9A544; border: 1px solid #B3862B; color: #2A1F06; border-radius: 8px; font-size: 14px; font-weight: 700;
}

/* Buttons and notices */
.sb-btn {
    display: inline-block; padding: 12px 22px; border-radius: 10px; border: 1px solid transparent;
    font-size: 15px; font-weight: 600; line-height: 1.2; cursor: pointer; text-decoration: none; text-align: center;
}
.sb-btn:hover { text-decoration: none; }
.sb-page a.sb-btn-primary, .sb-btn-primary { background: var(--sb-burgundy); color: #F6F2EC; }
.sb-page a.sb-btn-primary:hover, .sb-btn-primary:hover { background: #55181C; color: #F6F2EC; }
.sb-page a.sb-btn-secondary, .sb-btn-secondary { background: #fff; border-color: var(--sb-input-line); color: var(--sb-ink); }
.sb-btn-secondary:hover { background: #F6F2EC; }
.sb-btn-danger { background: #B3261E; color: #fff; }
.sb-btn-danger:hover { background: #8F1E18; color: #fff; }
.sb-btn-warn { background: #FBF3E1; border-color: #EFD9A4; color: #7A5A12; }
.sb-btn-warn:hover { background: #F6E7BF; }
.sb-btn-small { padding: 6px 12px; font-size: 13px; border-radius: 8px; }

.sb-alert { padding: 14px 18px; border-radius: 12px; background: #FBECEA; border: 1px solid #E9C3BF; color: #8A1F17; font-size: 14px; }
.sb-phone { display: inline-block; margin-top: 4px; font-size: 20px; font-weight: 700; text-decoration: none; }

/* Tables inside cards (the cancel page) */
.sb-page .sb-table { margin: 0; width: 100%; }
.sb-page .sb-table > thead > tr > th { border-bottom: 2px solid var(--sb-line); font-size: 13px; color: var(--sb-muted); }
.sb-page .sb-table > tbody > tr > td { border-top: 1px solid var(--sb-line); vertical-align: middle; }
.sb-page .sb-table.table-striped > tbody > tr:nth-of-type(odd) { background: #FBF8F3; }
.sb-page form.confirm-delete { margin: 0; }

/* Home: list of shows */
.sb-show-list { display: flex; flex-direction: column; gap: 12px; }
.sb-show-card {
    display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap; padding: 18px 22px;
    color: var(--sb-ink); text-decoration: none; transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.sb-page a.sb-show-card { color: var(--sb-ink); }
.sb-show-card:hover { box-shadow: 0 6px 18px rgba(36, 31, 27, 0.08); transform: translateY(-1px); text-decoration: none; }
.sb-show-name { flex: 1 1 200px; font-family: var(--sb-display); font-size: 20px; font-weight: 600; }
.sb-show-date { font-size: 15px; color: var(--sb-muted); }
.sb-pill { padding: 5px 12px; border-radius: 999px; background: #E7EEF2; border: 1px solid #B9C6CD; font-size: 13px; font-weight: 600; color: #35424A; white-space: nowrap; }
.sb-pill-low { background: #FBF3E1; border-color: #EFD9A4; color: #7A5A12; }
.sb-pill-none { background: #E3D4D2; border-color: #C9A6A2; color: #7B5F5C; }

.sb-info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.sb-info-card { padding: 24px 28px; }
.sb-info-card p { margin: 0 0 8px; font-size: 14px; line-height: 1.5; color: var(--sb-muted); }
.sb-info-card p.sb-info-note { font-style: italic; }

@media (max-width: 767px) {
    .sb-hero { padding: 22px 20px; }
    .sb-hero-title { font-size: 22px; }
    .sb-panel { padding: 22px 18px; }
    .sb-info-grid { grid-template-columns: minmax(0, 1fr); }
    .sb-actions .sb-btn { width: 100%; }
}

/* =====================================================================
   Seat page polish: shadows, hover and motion, micro-details.
   Scoped to .sb-page--seats so the other booking pages stay as they are.
   ===================================================================== */

/* Warm gold glow behind the header area, fading out (painted on the page background so it never causes side scrolling) */
body:has(.sb-page--seats) {
    background-color: #F6F2EC;
    background-image:
        radial-gradient(ellipse 70% 100% at 24% 0%, rgba(217, 165, 68, 0.17), rgba(217, 165, 68, 0) 72%),
        radial-gradient(ellipse 45% 80% at 88% 0%, rgba(217, 165, 68, 0.09), rgba(217, 165, 68, 0) 72%);
    background-size: 100% 480px;
    background-repeat: no-repeat;
}

/* Cards: subtle border plus a gentle drop shadow */
.sb-page--seats .sb-card,
.sb-page--seats .sb-legend {
    border-color: rgba(36, 31, 27, 0.07);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 10px 28px -12px rgba(0, 0, 0, 0.10);
}

/* Seats */
.sb-seat span { transition: transform 0.14s ease, box-shadow 0.14s ease, background-color 0.14s ease; }
.sb-seat:hover input:not(:disabled):not(:checked) + span {
    background: #D5E1E8; transform: translateY(-2px); box-shadow: 0 5px 10px -4px rgba(53, 66, 74, 0.38);
}
.sb-seat:active input:not(:disabled):not(:checked) + span {
    transform: translateY(1px) scale(0.97); box-shadow: 0 1px 2px rgba(53, 66, 74, 0.25);
}
.sb-seat input:checked + span { transform: scale(1.1); box-shadow: 0 4px 9px -3px rgba(179, 134, 43, 0.6); }
.sb-seat:hover input:checked + span { transform: translateY(-2px) scale(1.1); box-shadow: 0 6px 12px -4px rgba(179, 134, 43, 0.65); }
.sb-seat:active input:checked + span { transform: translateY(1px) scale(1.04); box-shadow: 0 1px 3px rgba(179, 134, 43, 0.4); }

/* Booked seats are real disabled buttons: dimmed, no hover, not clickable */
button.sb-seat.is-booked {
    display: flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; padding: 0; box-sizing: border-box;
    border: 1px solid #C9A6A2; border-radius: 7px; background: #E3D4D2; color: #9C8481;
    font: inherit; font-size: 10px; font-weight: 700; opacity: 0.85;
    cursor: not-allowed; transition: none; transform: none; box-shadow: none;
}
button.sb-seat.is-booked:hover, button.sb-seat.is-booked:active { transform: none; box-shadow: none; background: #E3D4D2; }

/* A whole row lights up softly under the pointer, to help scanning along it */
.sb-page--seats .sb-row { padding: 4px 8px; margin: -4px -8px; border-radius: 10px; transition: background-color 0.15s ease; }
.sb-page--seats .sb-row:hover { background: rgba(217, 165, 68, 0.08); }

/* Summary panel */
.sb-title-icon { display: flex; align-items: center; gap: 9px; }
.sb-icon { flex-shrink: 0; color: #B3862B; }
.sb-count-row { align-items: baseline; }
.sb-count-number { font-family: var(--sb-display); font-size: 30px; font-weight: 600; line-height: 1; }

/* Form inputs: cream at rest, darker border on hover, white with a clear border on focus */
.sb-input { background: #FBF8F3; transition: border-color 0.12s ease, background-color 0.12s ease, box-shadow 0.12s ease; }
.sb-input:hover { border-color: #C4B8A8; }
.sb-input:focus, .sb-input:focus-visible {
    background: #fff; border-color: #8F3F1F; outline: none; box-shadow: 0 0 0 3px rgba(179, 84, 46, 0.14);
}

/* The booking button */
.sb-submit { transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; }
.sb-submit:hover:not(:disabled) { background: #7B2530; transform: translateY(-1px); box-shadow: 0 8px 16px -8px rgba(107, 30, 35, 0.55); }
.sb-submit:active:not(:disabled) { transform: translateY(0); box-shadow: none; }
.sb-submit:disabled { background: #CFC6BC; color: #F6F2EC; cursor: not-allowed; box-shadow: none; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .sb-seat span, .sb-submit, .sb-input, .sb-page--seats .sb-row { transition: none; }
    .sb-seat:hover input:not(:disabled) + span, .sb-submit:hover:not(:disabled) { transform: none; }
}