/* DrukMovie premium interface
   This is the final theme authority and intentionally loads after legacy styles. */
:root {
    --dm-night: #080b18;
    --dm-night-soft: #0d1224;
    --dm-panel: #131a31;
    --dm-panel-raised: #1a2340;
    --dm-panel-soft: #212b4b;
    --dm-line: rgba(166, 180, 255, 0.2);
    --dm-line-strong: rgba(166, 180, 255, 0.38);
    --dm-text: #f7f7ff;
    --dm-muted: #b9c1d9;
    --dm-faint: #8994b3;
    --dm-violet: #9b8cff;
    --dm-violet-strong: #7566f5;
    --dm-coral: #ff728f;
    --dm-gold: #f5bf69;
    --dm-mint: #59dbc2;
    --dm-danger: #ff7082;
    --dm-shadow: 0 24px 70px rgba(0, 0, 0, 0.34);
    --dm-radius: 22px;
    --dm-radius-sm: 14px;
    --dm-focus: 0 0 0 4px rgba(155, 140, 255, 0.25);
    color-scheme: dark;
}

html {
    background: var(--dm-night);
    scroll-behavior: smooth;
}

body {
    color: var(--dm-text) !important;
    background:
        radial-gradient(circle at 8% -5%, rgba(117, 102, 245, 0.25), transparent 30rem),
        radial-gradient(circle at 94% 12%, rgba(255, 114, 143, 0.13), transparent 32rem),
        linear-gradient(180deg, var(--dm-night-soft), var(--dm-night)) !important;
    font-family: "DM Sans", system-ui, sans-serif;
    line-height: 1.6;
    min-height: 100vh;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: 0.22;
    background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: linear-gradient(to bottom, black, transparent 75%);
    z-index: -1;
}

body .ambient { display: none; }

body h1,
body h2,
body h3,
body h4,
body strong,
body label,
body legend,
body th { color: var(--dm-text); }

body h1,
body h2,
body h3,
body .brand {
    font-family: "Manrope", system-ui, sans-serif;
    letter-spacing: -0.035em;
}

body p,
body small,
body td,
body .muted { color: var(--dm-muted); }

body a { color: var(--dm-mint); }
body a:hover { color: #8af5df; }

body :focus-visible {
    outline: 2px solid var(--dm-violet);
    outline-offset: 3px;
}

.container {
    width: min(1180px, calc(100% - 40px));
    margin-inline: auto;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(8, 11, 24, 0.88) !important;
    border-bottom: 1px solid var(--dm-line) !important;
    backdrop-filter: blur(20px) saturate(150%);
}

.nav-shell { min-height: 76px; gap: 30px; }
.brand-logo-image { width: 176px; height: auto; }
.nav-links { gap: 8px; }

.nav-links a {
    color: var(--dm-muted) !important;
    border-radius: 10px;
    padding: 10px 12px;
    font-weight: 700;
    text-decoration: none;
}

.nav-links a:hover {
    color: var(--dm-text) !important;
    background: rgba(155, 140, 255, 0.12);
}

.account-chip {
    color: var(--dm-text);
    background: var(--dm-panel) !important;
    border: 1px solid var(--dm-line) !important;
}

.account-avatar {
    color: #0a0d1a !important;
    background: linear-gradient(135deg, var(--dm-gold), var(--dm-coral)) !important;
}

.btn,
.dm2-button {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 12px !important;
    border: 1px solid transparent !important;
    padding: 11px 18px;
    font-weight: 800 !important;
    text-decoration: none !important;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.btn:hover,
.dm2-button:hover { transform: translateY(-2px); }

.btn-primary,
.dm2-button-primary {
    color: #090c18 !important;
    background: linear-gradient(135deg, var(--dm-mint), #8ef2dd) !important;
    box-shadow: 0 12px 34px rgba(89, 219, 194, 0.2);
}

.btn-outline,
.btn-quiet,
.dm2-button-secondary,
.dm2-button-paper {
    color: var(--dm-text) !important;
    background: rgba(155, 140, 255, 0.09) !important;
    border-color: var(--dm-line-strong) !important;
}

.btn-outline:hover,
.btn-quiet:hover,
.dm2-button-secondary:hover,
.dm2-button-paper:hover {
    background: rgba(155, 140, 255, 0.18) !important;
    border-color: var(--dm-violet) !important;
}

.booking-approve { color: #071512 !important; background: var(--dm-mint) !important; }
.booking-reject { color: #1b0710 !important; background: var(--dm-danger) !important; }

.eyebrow,
.wizard-kicker,
.dm2-label,
.dm-movie-status {
    color: var(--dm-gold) !important;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

/* Shared premium surfaces */
.form-card,
.auth-card,
.dashboard-table-card,
.booking-card,
.checkout-card,
.sidebar-card,
.seat-panel,
.layout-editor-card,
.attendance-camera-card,
.attendance-form-card,
.attendance-session,
.guest-lookup-card,
.empty-state,
.dm-library-empty,
.dm-movies-empty,
.dm-profile-no-session {
    color: var(--dm-text) !important;
    background: linear-gradient(145deg, rgba(26,35,64,.98), rgba(15,21,40,.98)) !important;
    border: 1px solid var(--dm-line) !important;
    border-radius: var(--dm-radius) !important;
    box-shadow: var(--dm-shadow);
}

input,
select,
textarea {
    width: 100%;
    color: var(--dm-text) !important;
    background: #0d1328 !important;
    border: 1px solid var(--dm-line-strong) !important;
    border-radius: 11px !important;
    padding: 12px 14px !important;
}

input::placeholder,
textarea::placeholder { color: var(--dm-faint) !important; opacity: 1; }

input:focus,
select:focus,
textarea:focus {
    border-color: var(--dm-violet) !important;
    box-shadow: var(--dm-focus) !important;
    outline: none;
}

option { color: var(--dm-text); background: var(--dm-panel); }

.alert,
.messages .message {
    color: var(--dm-text) !important;
    background: var(--dm-panel-raised) !important;
    border: 1px solid var(--dm-line-strong) !important;
    border-left: 4px solid var(--dm-violet) !important;
}

.alert.success,
.message.success { border-left-color: var(--dm-mint) !important; }
.alert.error,
.message.error { border-left-color: var(--dm-danger) !important; }

/* Homepage and movie discovery */
.dm2-home,
.dm-movies-page,
.dm-profile-page,
.dm-story-detail,
.dm-editorial,
.vendor-dashboard-page,
.auditorium-booking-page,
.checkout-booking-page,
.attendance-page,
.form-page { color: var(--dm-text) !important; background: transparent !important; }

.dm2-hero,
.dm3-brand-stage {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 80% 15%, rgba(255,114,143,.22), transparent 24rem),
        linear-gradient(135deg, #131a36 0%, #19163b 52%, #11192f 100%) !important;
    border: 1px solid var(--dm-line) !important;
    border-radius: 0 0 38px 38px;
}

.dm2-hero h1,
.dm3-brand-stage h1,
.dm-movies-hero h1,
.dm-profile-hero h1,
.dm-story-heading h1 {
    color: var(--dm-text) !important;
    text-wrap: balance;
}

.dm2-hero-lead,
.dm2-section-head p,
.dm3-story-heading-aside p,
.dm-profile-synopsis,
.dm-story-tagline { color: var(--dm-muted) !important; }

.dm2-services,
.dm2-stories,
.dm-home-movies,
.dm-home-trending,
.dm-home-archive,
.dm-movie-collection,
.dm-trending-collection,
.dm-archive-collection,
.dm-editorial-content {
    background: transparent !important;
    color: var(--dm-text) !important;
}

.dm2-service-grid > *,
.dm-movie-card,
.dm-library-card,
.dm2-story-card,
.dm-profile-about,
.dm-profile-booking,
.dm-profile-session,
.dm-profile-trailer,
.dm-related-stories,
.dm-profile-facts > * {
    color: var(--dm-text) !important;
    background: linear-gradient(155deg, var(--dm-panel-raised), var(--dm-panel)) !important;
    border: 1px solid var(--dm-line) !important;
    border-radius: var(--dm-radius) !important;
    box-shadow: 0 18px 50px rgba(0,0,0,.24);
}

.dm-movie-card,
.dm-library-card,
.dm2-story-card { overflow: hidden; }

.dm-movie-card:hover,
.dm-library-card:hover,
.dm2-story-card:hover {
    border-color: rgba(155,140,255,.65) !important;
    transform: translateY(-4px);
}

.dm-movie-poster,
.dm-library-image,
.dm2-story-image,
.dm-profile-poster,
.dm-story-cover {
    background: linear-gradient(145deg, #2a2555, #11182f) !important;
}

.dm-movie-poster img,
.dm-library-image img,
.dm2-story-image img,
.dm-profile-poster img,
.dm-story-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dm-movie-placeholder {
    color: var(--dm-gold) !important;
    background: linear-gradient(145deg, #292253, #131a31) !important;
}

.dm-story-filters a,
.dm-movie-directory-nav a,
.dm-location-filter a {
    color: var(--dm-muted) !important;
    background: var(--dm-panel) !important;
    border: 1px solid var(--dm-line) !important;
    border-radius: 999px !important;
}

.dm-story-filters a.active,
.dm-movie-directory-nav a.active,
.dm-location-filter a.active {
    color: #0a0d1a !important;
    background: var(--dm-gold) !important;
    border-color: var(--dm-gold) !important;
}

.dm-story-prose { color: #dbe0f2 !important; }
.dm-story-prose p { color: #dbe0f2 !important; }
.dm-story-cta {
    color: var(--dm-text) !important;
    background: linear-gradient(120deg, #30285f, #1a3152) !important;
    border: 1px solid var(--dm-line-strong) !important;
}

/* Booking journey and seat map */
.booking-progress {
    background: var(--dm-panel) !important;
    border: 1px solid var(--dm-line) !important;
    border-radius: 16px;
}

.booking-progress span { color: var(--dm-faint) !important; }
.booking-progress .active,
.booking-progress .complete { color: var(--dm-text) !important; }
.booking-progress .active b { color: #090c18 !important; background: var(--dm-gold) !important; }
.booking-progress .complete b { color: #071512 !important; background: var(--dm-mint) !important; }

.booking-head,
.booking-summary { color: var(--dm-text) !important; background: transparent !important; }
.booking-summary h1 { color: var(--dm-text) !important; }
.mini-price {
    color: var(--dm-text) !important;
    background: var(--dm-panel-raised) !important;
    border: 1px solid var(--dm-line) !important;
}

.public-seat-section {
    color: var(--dm-text) !important;
    background: #0c1122 !important;
    border: 1px solid var(--dm-line) !important;
    border-radius: 18px !important;
}

.public-seat-section + .public-seat-section { margin-top: 22px; }
.section-title-row { border-bottom-color: var(--dm-line) !important; }
.seat-orientation { color: var(--dm-faint) !important; }
.auditorium-screen,
.builder-screen {
    color: var(--dm-text) !important;
    background: linear-gradient(90deg, transparent, rgba(155,140,255,.25), transparent) !important;
    border-top-color: var(--dm-violet) !important;
}

.section-screen {
    width: min(74%, 720px) !important;
    margin: 34px auto 4px !important;
}

.seat span {
    color: var(--dm-text) !important;
    background: #182343 !important;
    border: 1px solid #596b9f !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.25);
}

.seat input:checked + span {
    color: #0a0d1a !important;
    background: var(--dm-gold) !important;
    border-color: #ffe0a5 !important;
    box-shadow: 0 0 0 4px rgba(245,191,105,.2);
}

.seat.unavailable span,
.seat input:disabled + span {
    color: #b7bac7 !important;
    background: #3a2638 !important;
    border-color: #885264 !important;
    opacity: .72;
}

.seat.accessible-seat span { border-color: var(--dm-mint) !important; }
.public-fixture {
    color: var(--dm-muted) !important;
    background: #27233e !important;
    border-color: var(--dm-line-strong) !important;
}

.legend .available,
.legend .selected,
.legend .unavailable {
    color: var(--dm-muted) !important;
}

.sidebar-card { padding: 24px; }
.price-breakdown { border-color: var(--dm-line) !important; }
.price-breakdown .total strong { color: var(--dm-gold) !important; }
.seat-pills strong,
.selected-seats strong {
    color: var(--dm-text) !important;
    background: rgba(155,140,255,.16) !important;
    border-color: var(--dm-line-strong) !important;
}

/* Vendor operations */
.vendor-dashboard-page,
.attendance-page,
.form-page,
.checkout-booking-page,
.auditorium-booking-page { padding-block: 46px 80px; }

.page-head {
    color: var(--dm-text) !important;
    background: linear-gradient(125deg, rgba(41,34,83,.88), rgba(19,33,61,.88)) !important;
    border: 1px solid var(--dm-line) !important;
    border-radius: var(--dm-radius) !important;
    padding: clamp(22px, 4vw, 38px) !important;
    box-shadow: var(--dm-shadow);
}

.stats-grid > * {
    color: var(--dm-text) !important;
    background: linear-gradient(145deg, var(--dm-panel-raised), var(--dm-panel)) !important;
    border: 1px solid var(--dm-line) !important;
    border-radius: 18px !important;
}

.stats-grid strong { color: var(--dm-gold) !important; }

.quick-actions a {
    color: var(--dm-text) !important;
    background: rgba(155,140,255,.12) !important;
    border: 1px solid var(--dm-line) !important;
    border-radius: 14px !important;
}

.quick-actions a:hover {
    color: #090c18 !important;
    background: var(--dm-mint) !important;
}

.dashboard-table-card { overflow: hidden; }
.dashboard-table-card > h2,
.dashboard-table-card > header { padding-inline: 24px; }

table { color: var(--dm-text) !important; }
thead { background: rgba(155,140,255,.11) !important; }
th { color: #d8d4ff !important; border-color: var(--dm-line) !important; }
td { color: var(--dm-muted) !important; border-color: var(--dm-line) !important; }
tbody tr:hover { background: rgba(155,140,255,.07) !important; }

.status-pill,
.decision-pending,
.approval-banner {
    color: var(--dm-text) !important;
    background: rgba(245,191,105,.13) !important;
    border: 1px solid rgba(245,191,105,.42) !important;
}

.status-pill.paid,
.status-pill.approved,
.status-pill.active,
.status-pill.used {
    color: #9af7e5 !important;
    background: rgba(89,219,194,.13) !important;
    border-color: rgba(89,219,194,.42) !important;
}

.status-pill.cancelled,
.status-pill.rejected,
.status-pill.expired {
    color: #ffb5c1 !important;
    background: rgba(255,112,130,.13) !important;
    border-color: rgba(255,112,130,.42) !important;
}

.vendor-story-grid > * {
    background: var(--dm-panel-raised) !important;
    border: 1px solid var(--dm-line) !important;
    border-radius: 16px !important;
    overflow: hidden;
}

.vendor-story-image { background: #272350 !important; }
.vendor-story-actions a,
.vendor-story-actions button { color: var(--dm-mint) !important; }

.layout-toolbar,
.layout-presets,
.layout-help,
.attendance-camera-frame {
    color: var(--dm-text) !important;
    background: #0d1328 !important;
    border-color: var(--dm-line) !important;
}

.layout-tool {
    color: var(--dm-text) !important;
    background: var(--dm-panel-soft) !important;
    border-color: var(--dm-line-strong) !important;
}

.attendance-metrics > * {
    color: var(--dm-text) !important;
    background: var(--dm-panel-raised) !important;
    border-color: var(--dm-line) !important;
}

/* Contrast safety net for legacy page components.
   QR artwork stays white by design so scanners can read it. */
body .dm-movies-page .dm-movies-empty,
body .dm-profile-page .dm-profile-story-empty,
body .dm-profile-page .dm-profile-archive-note,
body .dm-profile-page .dm-profile-region-grid > section,
body .dm-profile-page .dm-profile-story-grid > article,
body .dm2-home .dm2-story-empty,
body .dm2-home .dm2-booking-shell,
body .dm2-home .dm2-cinema-card,
body .dm2-home .dm2-cinema-empty,
body .dm-editorial .dm-library-empty,
body .empty-row,
body .attendance-empty,
body .ticket-card,
body .success-card,
body .auth-art,
body .form-trust,
body .guest-checkout-fields,
body .review-block,
body .security-row > div,
body .layout-save-row,
body .layout-next-step {
    color: var(--dm-text) !important;
    background: linear-gradient(145deg, #1a2340, #11182e) !important;
    border-color: var(--dm-line) !important;
    box-shadow: 0 16px 42px rgba(0,0,0,.22);
}

body .dm-movies-page .dm-movies-empty h3,
body .dm-profile-page .dm-profile-story-empty h3,
body .dm-profile-page .dm-profile-archive-note h3,
body .dm2-home .dm2-story-empty h3,
body .dm2-home .dm2-cinema-empty h3,
body .dm-editorial .dm-library-empty h3,
body .empty-row strong,
body .ticket-card h2,
body .ticket-card h3,
body .success-card h1,
body .success-card h2,
body .auth-art h1,
body .review-block strong,
body .layout-next-step h2 { color: var(--dm-text) !important; }

body .dm-movies-page .dm-movies-empty p,
body .dm-profile-page .dm-profile-story-empty p,
body .dm-profile-page .dm-profile-archive-note p,
body .dm-profile-page .dm-profile-region-grid > section p,
body .dm2-home .dm2-story-empty p,
body .dm2-home .dm2-cinema-empty p,
body .dm-editorial .dm-library-empty p,
body .empty-row,
body .attendance-empty,
body .ticket-card p,
body .success-card p,
body .auth-art p,
body .review-block > span,
body .security-row small,
body .layout-save-row span,
body .layout-next-step p { color: var(--dm-muted) !important; }

body .dm-movies-page .dm-movie-directory-nav,
body .dm-editorial .dm-story-filters,
body .dm2-home .dm2-positioning {
    color: var(--dm-text) !important;
    background: rgba(13,18,36,.94) !important;
    border-color: var(--dm-line) !important;
}

.layout-help b {
    display: inline-grid;
    width: 25px;
    height: 25px;
    margin-right: 7px;
    place-items: center;
    border-radius: 8px;
    color: #090c18 !important;
    background: var(--dm-gold);
}

.layout-next-step {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 28px;
    padding: clamp(22px, 4vw, 34px);
    border: 1px solid var(--dm-line);
    border-radius: var(--dm-radius);
}

.layout-next-step h2,
.layout-next-step p { margin: 4px 0 0; }

.qr-frame,
.counter-ticket img,
.ticket-card img[src*="qr"],
.qr-pending {
    background: #fff !important;
    color: #111 !important;
}

/* Footer */
.site-footer {
    color: var(--dm-muted) !important;
    background: #060813 !important;
    border-top: 1px solid var(--dm-line) !important;
}

.site-footer h2,
.site-footer h3,
.site-footer strong { color: var(--dm-text) !important; }
.site-footer a { color: var(--dm-muted) !important; }
.site-footer a:hover { color: var(--dm-mint) !important; }

@media (max-width: 980px) {
    .nav-content {
        color: var(--dm-text) !important;
        background: rgba(13,18,36,.98) !important;
        border: 1px solid var(--dm-line) !important;
        box-shadow: var(--dm-shadow);
    }

    .nav-links a { width: 100%; }
    .booking-layout,
    .checkout-layout { grid-template-columns: 1fr !important; }
    .sticky-card { position: static !important; }
    .dm-profile-hero,
    .dm-story-hero { grid-template-columns: 1fr !important; }
}

@media (max-width: 760px) {
    .container { width: min(100% - 24px, 1180px); }
    .site-header .container { width: min(100% - 20px, 1180px); }
    .brand-logo-image { width: 150px; }
    .vendor-dashboard-page,
    .attendance-page,
    .form-page,
    .checkout-booking-page,
    .auditorium-booking-page { padding-block: 24px 56px; }
    .dm2-hero,
    .dm3-brand-stage { border-radius: 0 0 26px 26px; }
    .dm2-actions,
    .dashboard-actions { align-items: stretch; }
    .dm2-actions .dm2-button,
    .dashboard-actions .btn { width: 100%; }
    .stats-grid,
    .quick-actions,
    .dm-home-movie-grid,
    .dm-home-trending-grid,
    .dm-movie-grid,
    .dm-library-grid,
    .dm-profile-region-grid { grid-template-columns: 1fr !important; }
    .responsive-table thead { display: none; }
    .responsive-table,
    .responsive-table tbody,
    .responsive-table tr,
    .responsive-table td { display: block; width: 100%; }
    .responsive-table tr {
        padding: 16px;
        border-bottom: 1px solid var(--dm-line);
    }
    .responsive-table td {
        display: grid;
        grid-template-columns: minmax(110px, 38%) 1fr;
        gap: 12px;
        padding: 7px 0 !important;
        border: 0 !important;
    }
    .responsive-table td::before {
        content: attr(data-label);
        color: var(--dm-faint);
        font-size: .78rem;
        font-weight: 800;
        text-transform: uppercase;
    }
    .booking-progress { padding: 10px 6px; }
    .booking-progress small { font-size: .66rem; }
    .seat-panel { padding: 16px !important; }
    .seat-scroll { margin-inline: -8px; padding: 8px; }
    .form-card,
    .auth-card,
    .dashboard-table-card,
    .checkout-card,
    .sidebar-card { border-radius: 16px !important; }
    .layout-next-step { align-items: stretch; flex-direction: column; }
    .layout-next-step .btn { width: 100%; }
}

/* =========================================================
   CINEMA-FIRST SHOWTIME BROWSER
   The public page follows the same physical decision order as a box office:
   location -> cinema -> local date -> exact session -> seats.
========================================================= */
body .dm-profile-page .dm-showtime-region-grid {
    grid-template-columns: 1fr !important;
    gap: 24px;
}

.dm-showtime-region-grid > section {
    padding: clamp(18px, 3vw, 30px) !important;
}

.dm-showtime-region-grid .dm-location-group {
    margin-top: 18px;
    padding-top: 20px;
    border-top: 1px solid var(--dm-line);
}

.dm-showtime-region-grid .dm-location-group > h4 {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 16px;
    color: var(--dm-gold) !important;
    font-size: 15px;
}

.dm-showtime-browser {
    overflow: hidden;
    border: 1px solid var(--dm-line);
    border-radius: 18px;
    background: #101528;
}

.dm-showtime-step { padding: 20px; }
.dm-showtime-date-step { border-top: 1px solid var(--dm-line); }
.dm-showtime-step-label {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}
.dm-showtime-step-label > b {
    display: grid;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 11px;
    background: linear-gradient(135deg, var(--dm-gold), #ff8fae);
    color: #101020;
}
.dm-showtime-step-label > span { display: grid; gap: 2px; }
.dm-showtime-step-label strong { color: var(--dm-text) !important; }
.dm-showtime-step-label small { color: var(--dm-muted) !important; }

.dm-cinema-choices {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 10px;
}
.dm-cinema-choices button {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    min-height: 78px;
    padding: 14px;
    border: 1px solid var(--dm-line);
    border-radius: 14px;
    background: #181a35;
    color: var(--dm-text);
    text-align: left;
}
.dm-cinema-choices button:hover,
.dm-cinema-choices button:focus-visible { border-color: var(--dm-violet); background: #202044; }
.dm-cinema-choices button.active {
    border-color: var(--dm-gold);
    background: linear-gradient(135deg, rgba(255,192,105,.16), rgba(255,143,174,.12));
    box-shadow: inset 0 0 0 1px rgba(255,192,105,.22);
}
.dm-cinema-icon {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 11px;
    background: rgba(155,140,255,.16);
    color: #c8bdff;
}
.dm-cinema-choices button > span:nth-child(2) { display: grid; gap: 3px; }
.dm-cinema-choices button strong { color: var(--dm-text) !important; }
.dm-cinema-choices button small { color: var(--dm-muted) !important; }
.dm-cinema-choices button > b { opacity: 0; color: var(--dm-gold); }
.dm-cinema-choices button.active > b { opacity: 1; }

.dm-date-strip {
    display: flex;
    gap: 9px;
    overflow-x: auto;
    padding: 2px 2px 10px;
    scroll-snap-type: x proximity;
    scrollbar-color: rgba(255,192,105,.45) transparent;
}
.dm-date-strip button {
    display: grid;
    flex: 0 0 76px;
    min-height: 86px;
    place-content: center;
    scroll-snap-align: start;
    border: 1px solid var(--dm-line);
    border-radius: 13px;
    background: #181a35;
    color: var(--dm-muted);
    text-align: center;
}
.dm-date-strip button small { color: #ff9db9; font-size: 10px; text-transform: uppercase; }
.dm-date-strip button strong { color: var(--dm-text); font-size: 24px; line-height: 1; }
.dm-date-strip button span { font-size: 11px; text-transform: uppercase; }
.dm-date-strip button.active {
    border-color: var(--dm-gold);
    background: linear-gradient(145deg, #5b3d30, #342641);
    box-shadow: 0 10px 28px rgba(0,0,0,.24);
}

.dm-date-panel { padding: 0 20px 20px; }
.dm-date-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
    color: var(--dm-muted);
    font-size: 12px;
}
.dm-date-summary strong { color: var(--dm-text) !important; font-size: 14px; }
.dm-time-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(235px, 1fr));
    gap: 12px;
}
body .dm-profile-page .dm-time-card-grid .dm-profile-session {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 14px;
    margin: 0;
    padding: 16px;
    border-radius: 14px !important;
    background: linear-gradient(145deg, #1a203d, #14182e) !important;
}
.dm-time-card-grid .dm-profile-session > div { display: grid; gap: 3px; }
.dm-time-card-grid .dm-profile-session small { color: #ff9fba !important; }
.dm-time-card-grid .dm-profile-session time { color: var(--dm-text) !important; font-size: 24px; font-weight: 800; }
.dm-time-card-grid .dm-profile-session span { color: var(--dm-gold) !important; font-size: 12px; font-weight: 700; }
.dm-time-card-grid .dm-profile-session em { color: var(--dm-muted) !important; font-size: 10px; font-style: normal; }
.dm-time-card-grid .dm-profile-session > a {
    padding: 11px 13px;
    border-radius: 10px;
    background: linear-gradient(135deg, #ff91b0, #b7a4ff);
    color: #121020 !important;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

/* Freeform auditorium editor: visible drag state and inline workspace sizing. */
.layout-workspace-controls {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 10px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,.1);
}
.layout-workspace-controls label { display: grid; gap: 5px; color: #d7cadc; font-size: 11px; }
.layout-workspace-controls input {
    width: 120px;
    min-height: 40px;
    padding: 8px 10px;
    border: 1px solid rgba(176,155,255,.34);
    border-radius: 9px;
    background: #121326;
    color: #fff8ef;
}
.layout-workspace-controls button {
    min-height: 40px;
    padding: 8px 14px;
    border: 1px solid rgba(255,192,105,.55);
    border-radius: 9px;
    background: #3b2939;
    color: #ffd59d;
    font-weight: 800;
}
.layout-cell[draggable="true"] { cursor: grab; touch-action: manipulation; }
.layout-cell.dragging { opacity: .38; cursor: grabbing; }
.layout-cell.drop-target {
    outline: 3px solid #ffc069;
    outline-offset: 2px;
    transform: scale(1.08);
}

/* Studio forms use the same premium surfaces as the dashboard and never rely
   on browser-default white controls, keeping labels readable on every page. */
.studio-form-card { padding: clamp(22px, 3vw, 38px) !important; }
.studio-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-bottom: 24px; }
.studio-field { display: grid; align-content: start; gap: 8px; min-width: 0; }
.studio-field > label { color: #fff8ef; font-size: 13px; font-weight: 800; }
.studio-field > label span { color: #ffbd6e; }
.studio-field input:not([type="checkbox"]):not([type="radio"]),
.studio-field select,
.studio-field textarea,
.layout-toolbar input[type="text"] {
    width: 100%; min-height: 50px; padding: 12px 14px;
    border: 1px solid rgba(176,155,255,.36); border-radius: 11px;
    background: #11152b; color: #fff8ef; color-scheme: dark;
}
.studio-field textarea { min-height: 112px; resize: vertical; }
.studio-field small { color: #b8b1c5; line-height: 1.5; }
.studio-field-weekdays, .studio-field-refund_policy, .studio-field-address { grid-column: 1 / -1; }
.studio-field-weekdays #id_weekdays { display: flex; flex-wrap: wrap; gap: 9px; }
.studio-field-weekdays #id_weekdays > div label { display: flex; gap: 7px; align-items: center; padding: 10px 12px; border: 1px solid var(--dm-line); border-radius: 999px; background: #171831; color: #eee6f2; }
.field-errors, .form-errors { color: #ffd2d8; background: rgba(170,43,69,.22); border: 1px solid rgba(255,112,138,.45); border-radius: 9px; padding: 9px 11px; }
.field-errors ul, .form-errors ul { margin: 0; padding-left: 18px; }
.studio-workflow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 20px; }
.studio-workflow span { display: flex; align-items: center; gap: 8px; padding: 11px; border: 1px solid var(--dm-line); border-radius: 12px; color: #aaa4b4; background: rgba(17,18,39,.68); }
.studio-workflow b { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 8px; background: #272342; color: #d8cae8; }
.studio-workflow .active { color: #fff4de; border-color: rgba(255,192,105,.55); }
.studio-workflow .active b { background: #ef9f55; color: #17101d; }
.studio-workflow .complete b { background: #3dbba2; color: #071d1a; }
[hidden] { display: none !important; }
.layout-toolbar label:has(input[type="text"]) { min-width: 180px; }
.layout-toolbar input[type="text"] { min-height: 40px; padding: 8px 10px; }
.layout-cell.has-seat { overflow: hidden; padding: 3px; font-size: clamp(8px, .72vw, 11px); text-overflow: ellipsis; white-space: nowrap; }
.seat > span { overflow: hidden; padding-inline: 3px; text-overflow: ellipsis; white-space: nowrap; }

/* A restrained cinema frame presents uploaded trailers professionally while
   clearly keeping them separate from paid full-length streaming. */
.dm-trailer-theatre { overflow: hidden; border: 1px solid rgba(255,192,105,.28); border-radius: 22px; background: #080a14; box-shadow: 0 30px 80px rgba(0,0,0,.48); }
.dm-trailer-topline, .dm-trailer-caption { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; color: #bdb6c8; font-size: 12px; letter-spacing: .04em; }
.dm-trailer-topline span:first-child { display: flex; align-items: center; gap: 9px; color: #f7ead9; font-weight: 800; text-transform: uppercase; }
.dm-trailer-topline i { width: 8px; height: 8px; border-radius: 50%; background: #ffb45f; box-shadow: 0 0 14px rgba(255,180,95,.8); }
.dm-trailer-stage { position: relative; aspect-ratio: 16 / 9; background: #03050a; }
.dm-profile-trailer .dm-trailer-stage video { display: block; width: 100%; height: 100%; max-height: none; object-fit: contain; border: 0; border-radius: 0; box-shadow: none; background: #03050a; }
.dm-trailer-caption { border-top: 1px solid rgba(255,255,255,.08); }
.dm-trailer-caption > div { display: grid; gap: 2px; }
.dm-trailer-caption strong { color: #fff7eb; font-size: 15px; }
.dm-trailer-caption span { color: #9f98ac; }
.seat-group-list { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 12px; }
.seat-group-list span { padding: 6px 9px; border: 1px solid rgba(176,155,255,.28); border-radius: 999px; background: #24203d; color: #eadff3; font-size: 11px; }

@media (max-width: 720px) {
    .studio-fields { grid-template-columns: 1fr; }
    .studio-field-weekdays, .studio-field-refund_policy, .studio-field-address { grid-column: auto; }
    .studio-workflow { grid-template-columns: 1fr; }
    .dm-profile-trailer > header { grid-template-columns: 1fr !important; }
    .dm-trailer-topline > span:last-child { display: none; }
    .dm-showtime-step,
    .dm-date-panel { padding: 15px; }
    .dm-date-summary { align-items: flex-start; flex-direction: column; gap: 4px; }
    .dm-time-card-grid { grid-template-columns: 1fr; }
    body .dm-profile-page .dm-time-card-grid .dm-profile-session { grid-template-columns: 1fr; }
    .dm-time-card-grid .dm-profile-session > a { text-align: center; }
    .layout-workspace-controls label { flex: 1 1 110px; }
    .layout-workspace-controls input { width: 100%; }
    .layout-workspace-controls button { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* ==================================================
   FINAL RESPONSIVE CINEMA BOOKING FIX
   Keep this at the END of premium.css
================================================== */

/* Prevent grid children from forcing page overflow */
.auditorium-booking-page,
.auditorium-booking-page .booking-layout,
.auditorium-booking-page .seat-panel,
.auditorium-booking-page .booking-sidebar {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.auditorium-booking-page .booking-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 360px);
    align-items: start;
    gap: 26px;
}

.auditorium-booking-page .booking-layout > * {
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

/* Seat map must remain inside seat panel */
.auditorium-booking-page .seat-panel {
    min-width: 0;
    overflow: hidden;
}

.auditorium-booking-page .seat-panel form,
.auditorium-booking-page .public-seat-section {
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

.auditorium-booking-page .seat-scroll {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

/* Sidebar */
.auditorium-booking-page .booking-sidebar,
.auditorium-booking-page .sidebar-card {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.auditorium-booking-page .sidebar-title,
.auditorium-booking-page .summary-movie,
.auditorium-booking-page .selected-seats,
.auditorium-booking-page .guest-checkout-fields,
.auditorium-booking-page .price-breakdown {
    min-width: 0;
    max-width: 100%;
}

.auditorium-booking-page .summary-movie > div:last-child {
    min-width: 0;
}

.auditorium-booking-page .summary-movie strong,
.auditorium-booking-page .summary-movie span {
    max-width: 100%;
    overflow-wrap: anywhere;
}

.auditorium-booking-page .guest-checkout-fields label,
.auditorium-booking-page .guest-checkout-fields input {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.auditorium-booking-page .guest-checkout-fields input {
    font-size: 16px;
}

/* ==================================================
   TABLET
================================================== */

@media screen and (max-width: 980px) {
    .auditorium-booking-page .booking-layout {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 20px;
    }

    .auditorium-booking-page .seat-panel,
    .auditorium-booking-page .booking-sidebar {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        grid-column: 1 / -1;
    }

    .auditorium-booking-page .sticky-card {
        position: static !important;
        top: auto !important;
    }
}

/* ==================================================
   PHONE
================================================== */

@media screen and (max-width: 650px) {
    .auditorium-booking-page {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        padding-right: 14px;
        padding-left: 14px;
        overflow-x: hidden;
    }

    .auditorium-booking-page .booking-layout {
        display: block !important;
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    .auditorium-booking-page .seat-panel {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        padding: 16px 10px !important;
        overflow: hidden;
    }

    /*
     Critical override:
     removes the existing forced 620px minimum width.
    */
    .auditorium-booking-page .seat-map {
        --mobile-seat-size: 30px;
        --mobile-seat-gap: 4px;

        width: max-content !important;
        min-width: max(
            100%,
            calc(
                var(--seat-columns) *
                (var(--mobile-seat-size) + var(--mobile-seat-gap))
            )
        ) !important;
        max-width: none !important;
    }

    .auditorium-booking-page .seat-row {
        display: grid;
        width: max-content;
        min-width: 100%;
        grid-template-columns: 18px max-content 18px;
        align-items: center;
        justify-content: center;
        column-gap: 5px;
        margin-bottom: 7px;
    }

    .auditorium-booking-page .seat-items {
        display: grid;
        width: max-content;
        min-width: 0;
        grid-template-columns:
            repeat(
                var(--seat-columns),
                var(--mobile-seat-size)
            ) !important;
        gap: var(--mobile-seat-gap) !important;
    }

    .auditorium-booking-page .seat {
        width: var(--mobile-seat-size) !important;
        min-width: var(--mobile-seat-size) !important;
        max-width: var(--mobile-seat-size) !important;
        height: var(--mobile-seat-size) !important;
    }

    .auditorium-booking-page .seat span {
        width: 100%;
        height: 100%;
        padding: 0;
        font-size: 9px;
    }

    .auditorium-booking-page .row-label {
        width: 18px;
        min-width: 18px;
        font-size: 9px;
    }

    .auditorium-booking-page .booking-sidebar {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        margin-top: 18px;
    }

    .auditorium-booking-page .sidebar-card {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        padding: 18px;
    }

    .auditorium-booking-page .sidebar-title {
        flex-wrap: wrap;
    }

    .auditorium-booking-page .price-breakdown > div {
        gap: 10px;
    }

    .auditorium-booking-page .price-breakdown strong {
        max-width: 55%;
        overflow-wrap: anywhere;
        text-align: right;
    }
}

/* ==================================================
   SMALL PHONE
================================================== */

@media screen and (max-width: 400px) {
    .auditorium-booking-page {
        padding-right: 8px;
        padding-left: 8px;
    }

    .auditorium-booking-page .seat-panel {
        padding: 14px 6px !important;
    }

    .auditorium-booking-page .seat-map {
        --mobile-seat-size: 27px;
        --mobile-seat-gap: 3px;
    }

    .auditorium-booking-page .seat-row {
        grid-template-columns: 15px max-content 15px;
        column-gap: 3px;
    }

    .auditorium-booking-page .row-label {
        width: 15px;
        min-width: 15px;
        font-size: 8px;
    }

    .auditorium-booking-page .sidebar-card {
        padding: 14px;
    }
}

/* ==================================================
   VERY SMALL PHONE
================================================== */

@media screen and (max-width: 340px) {
    .auditorium-booking-page .seat-map {
        --mobile-seat-size: 24px;
        --mobile-seat-gap: 2px;
    }

    .auditorium-booking-page .seat span {
        font-size: 8px;
    }
}