/* ===================================================================
   Embed Templates CSS
   Supports 7 template styles: Sleek, Glow, Lux, Shock, Ember, Burst, Carnival
   ================================================================ */

/* ===================================================================
   Theme Toggle Button (Fixed Bottom-Right)
   ================================================================ */

.embed-theme-toggle {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1050;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid var(--border-color);
    background-color: var(--card-bg);
    color: var(--text-primary);
    font-size: 1.25rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow);
    transition: all 0.3s ease;
}

.embed-theme-toggle:hover {
    transform: scale(1.1);
    box-shadow: var(--shadow-lg);
}

.embed-theme-toggle:active {
    transform: scale(0.95);
}

.embed-theme-toggle.changing {
    opacity: 0.6;
    pointer-events: none;
}

.embed-theme-toggle i {
    transition: transform 0.3s ease;
}

.embed-theme-toggle:hover i {
    transform: rotate(15deg);
}

/* ===================================================================
   Embed viewport (EmbedLayout root)
   Replaces Bootstrap's min-vh-100 (min-height: 100vh !important):
   - dvh over vh: on iOS Safari, 100vh is the toolbar-HIDDEN "large viewport",
     so bottom-of-page content (checkout's "Proceed to Payment" button) renders
     under the floating bottom toolbar where taps hit Safari chrome instead of
     the page. 100dvh tracks the VISIBLE viewport (vh fallback for old browsers).
   - safe-area bottom padding keeps the last element tappable above the
     toolbar / home indicator.
   ================================================================ */

.embed-viewport {
    min-height: 100vh;
    min-height: 100dvh;
    padding-bottom: max(env(safe-area-inset-bottom, 0px), 1.5rem);
}

/* Landing pages (a business's own homepage, EmbedLayout.IsLandingPage): the page ends
   in the tenant's own full-bleed footer block, so the reserved bottom padding above
   would show a strip of default background beneath it. Landing pages have no
   bottom-pinned CTA (the iOS-toolbar concern behind the safe-area floor) and blocks
   carry their own bottom padding, so the flush variant drops the reservation. */
.embed-viewport.embed-viewport-flush {
    padding-bottom: 0;
}

/* While embed-bridge.js measures true content height inside an auto-resized
   iframe, viewport-based min-heights must collapse — otherwise
   documentElement.scrollHeight is always >= the iframe height, and the
   host-side auto-resize can only ever GROW the iframe (the grow-only ratchet
   documented in embed-bridge.js). The class is applied only for the duration
   of a synchronous measurement, so it never affects what users see. */
html.ht-measuring .embed-viewport,
html.ht-measuring .embed-container,
html.ht-measuring .min-vh-100,
html.ht-measuring .checkout-glow,
html.ht-measuring .checkout-lux,
html.ht-measuring .checkout-shock,
html.ht-measuring .checkout-classic,
html.ht-measuring .embed-block-page,
/* Template ROOT wrappers each carry their own scoped min-height:100vh (in the
   component <style> blocks) — they must collapse too, or a shop rendering any
   template measures min-height + surrounding header/footer and the iframe
   grows by that delta on every resize cycle (unbounded ratchet, found via the
   local embed test harness 2026-07). */
html.ht-measuring .sleek-template,
html.ht-measuring .glow-template,
html.ht-measuring .lux-template,
html.ht-measuring .shock-template,
html.ht-measuring .ember-template,
html.ht-measuring .burst-template,
html.ht-measuring .carnival-template,
html.ht-measuring .checkout-block-page {
    min-height: 0 !important;
}

/* ===================================================================
   Base Embed Container
   ================================================================ */

.embed-container {
    min-height: 100vh;
    padding: 1rem;
}

/* ===================================================================
   Dark Mode Enhancements
   Cleaner surfaces, richer depth, subtle gradients
   ================================================================ */

[data-theme="dark"] .embed-header {
    background: linear-gradient(135deg, rgba(12, 16, 22, 0.98) 0%, rgba(10, 13, 18, 0.92) 100%);
    border-bottom: 1px solid rgba(90, 109, 134, 0.35);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

[data-theme="dark"] .embed-header-btn {
    background: rgba(16, 22, 32, 0.9);
    border-color: rgba(92, 112, 136, 0.45);
    color: #e6edf5;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .embed-header-btn:hover {
    background: rgba(24, 33, 46, 0.95);
    border-color: rgba(126, 157, 194, 0.6);
}

[data-theme="dark"] .embed-theme-toggle {
    background: rgba(17, 24, 36, 0.95);
    border-color: rgba(92, 112, 136, 0.5);
    color: #e6edf5;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
}

[data-theme="dark"] .embed-theme-toggle:hover {
    background: rgba(26, 36, 52, 0.95);
}

[data-theme="dark"] .cart-backdrop {
    background: rgba(6, 8, 12, 0.65);
}

[data-theme="dark"] .cart-panel {
    background: #0f141b;
    color: #e6edf5;
    box-shadow: -12px 0 40px rgba(0, 0, 0, 0.55);
}

[data-theme="dark"] .cart-panel .card {
    background: #151c25;
    border-color: rgba(90, 109, 134, 0.4);
}

[data-theme="dark"] .cart-panel .btn-outline-secondary {
    color: #d6deea;
    border-color: rgba(90, 109, 134, 0.5);
}

[data-theme="dark"] .cart-panel .btn-outline-secondary:hover {
    background: rgba(90, 109, 134, 0.2);
    color: #ffffff;
}

[data-theme="dark"] .cart-panel .btn-link.text-muted {
    color: #9aa7b6 !important;
}

/* ===================================================================
   Modal Dark Mode
   Event slot and combo detail modals
   ================================================================ */

[data-theme="dark"] .modal-content {
    background: #151c25;
    border-color: rgba(90, 109, 134, 0.4);
    color: #e6edf5;
}

[data-theme="dark"] .modal-header {
    border-bottom-color: rgba(90, 109, 134, 0.4);
}

[data-theme="dark"] .modal-header .modal-title {
    color: #e6edf5;
}

[data-theme="dark"] .modal-header .btn-close {
    filter: invert(1) brightness(0.8);
}

[data-theme="dark"] .modal-footer {
    border-top-color: rgba(90, 109, 134, 0.4);
}

[data-theme="dark"] .modal-body .text-muted {
    color: #9aa7b6 !important;
}

[data-theme="dark"] .modal-body .card {
    background: #1a2330;
    border-color: rgba(90, 109, 134, 0.4);
}

[data-theme="dark"] .modal-body .card-subtitle {
    color: #9aa7b6 !important;
}

[data-theme="dark"] .modal-body .list-unstyled li span {
    color: #c5d0dc;
}

[data-theme="dark"] .modal-body .form-label {
    color: #e6edf5;
}

[data-theme="dark"] .modal-body .btn-group .btn-outline-secondary {
    color: #c5d0dc;
    border-color: rgba(90, 109, 134, 0.5);
    background: transparent;
}

[data-theme="dark"] .modal-body .btn-group .btn-outline-secondary:hover:not(:disabled) {
    background: rgba(90, 109, 134, 0.2);
    color: #ffffff;
}

[data-theme="dark"] .modal-body .btn-group .btn-outline-secondary.disabled {
    background: #1a2330;
    color: #c5d0dc;
    border-color: rgba(90, 109, 134, 0.5);
}

[data-theme="dark"] .modal-body hr {
    border-color: rgba(90, 109, 134, 0.4);
}

[data-theme="dark"] .modal-footer .btn-secondary {
    background: #2a3545;
    border-color: rgba(90, 109, 134, 0.5);
    color: #c5d0dc;
}

[data-theme="dark"] .modal-footer .btn-secondary:hover {
    background: #384558;
    color: #ffffff;
}

/* ===================================================================
   Template 0: Sleek (was Classic)
   Clean/professional flat design, pill buttons
   ================================================================ */

.embed-template-sleek .embed-container {
    background-color: var(--bg-primary);
    max-width: 900px;
    margin: 0 auto;
}

/* Offset sticky date picker to account for embed header height */
.embed-template-sleek .sticky-top {
    top: 57px !important;
    background-color: var(--bg-primary) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

.embed-template-sleek .ticket-group-card {
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    margin-bottom: 1rem;
}

.embed-template-sleek .ticket-group-header {
    background-color: var(--bg-secondary);
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-color);
    font-weight: 600;
}

.embed-template-sleek .ticket-slot {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-color-light);
}

.embed-template-sleek .ticket-slot:last-child {
    border-bottom: none;
}

.embed-template-sleek .ticket-slot:hover {
    background-color: var(--bg-hover);
}

[data-theme="dark"] .embed-template-sleek .embed-container {
    background: radial-gradient(1200px circle at 10% 0%, #1c2432 0%, #0f141b 50%, #0b0e14 100%);
}

[data-theme="dark"] .embed-template-sleek .sticky-top {
    background: rgba(13, 18, 26, 0.95) !important;
    border-bottom: 1px solid rgba(88, 107, 131, 0.35) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

[data-theme="dark"] .embed-template-sleek .ticket-group-card,
[data-theme="dark"] .embed-template-sleek .ticket-card {
    background: #121923;
    border-color: rgba(88, 107, 131, 0.45);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
    color: #e6edf5;
}

[data-theme="dark"] .embed-template-sleek .ticket-group-header {
    background: linear-gradient(135deg, rgba(34, 93, 91, 0.6) 0%, rgba(24, 58, 74, 0.6) 100%);
    color: #eaf6f5;
    border-bottom-color: rgba(88, 107, 131, 0.45);
}

[data-theme="dark"] .embed-template-sleek .ticket-slot {
    border-bottom-color: rgba(60, 76, 95, 0.6);
}

[data-theme="dark"] .embed-template-sleek .ticket-slot:hover {
    background: rgba(66, 156, 152, 0.12);
}

/* Sleek template text colors in dark mode */
[data-theme="dark"] .embed-template-sleek h3,
[data-theme="dark"] .embed-template-sleek h4,
[data-theme="dark"] .embed-template-sleek h5,
[data-theme="dark"] .embed-template-sleek h6,
[data-theme="dark"] .embed-template-sleek .fw-bold {
    color: #e6edf5;
}

[data-theme="dark"] .embed-template-sleek p,
[data-theme="dark"] .embed-template-sleek span:not(.badge) {
    color: #c5d0dc;
}

[data-theme="dark"] .embed-template-sleek .small,
[data-theme="dark"] .embed-template-sleek small {
    color: #9aa7b6;
}

[data-theme="dark"] .embed-template-sleek .card-body {
    background: rgba(18, 25, 35, 0.8);
    color: #c5d0dc;
}

[data-theme="dark"] .embed-template-sleek .collapse .card-body {
    background: rgba(22, 30, 42, 0.9);
}

/* Sleek template button styling in dark mode */
[data-theme="dark"] .embed-template-sleek .btn-primary {
    background: linear-gradient(135deg, #2ec4b6 0%, #2b7a78 100%);
    border: none;
}

[data-theme="dark"] .embed-template-sleek .btn-primary:hover {
    background: linear-gradient(135deg, #37d6c7 0%, #1f6f72 100%);
}

[data-theme="dark"] .embed-template-sleek .btn-outline-primary {
    color: #5dd9cf;
    border-color: #5dd9cf;
}

[data-theme="dark"] .embed-template-sleek .btn-outline-primary:hover {
    background-color: #5dd9cf;
    color: #0f141b;
}

[data-theme="dark"] .embed-template-sleek .btn-outline-secondary {
    color: #9aa7b6;
    border-color: rgba(90, 109, 134, 0.5);
}

[data-theme="dark"] .embed-template-sleek .btn-outline-secondary:hover {
    background: rgba(90, 109, 134, 0.25);
    color: #e6edf5;
}

[data-theme="dark"] .embed-template-sleek .btn-outline-success {
    color: #75b798;
    border-color: #75b798;
}

[data-theme="dark"] .embed-template-sleek .btn-outline-success:hover {
    background-color: #75b798;
    color: #0f141b;
}

[data-theme="dark"] .embed-template-sleek .btn-outline-danger {
    color: #ea868f;
    border-color: #ea868f;
}

[data-theme="dark"] .embed-template-sleek .text-center.text-secondary {
    color: #9aa7b6 !important;
}

/* Form controls in dark mode for Sleek */
[data-theme="dark"] .embed-template-sleek .form-control {
    background-color: rgba(16, 22, 32, 0.9);
    border-color: rgba(90, 109, 134, 0.5);
    color: #e6edf5;
}

[data-theme="dark"] .embed-template-sleek .form-control:focus {
    background-color: rgba(20, 28, 40, 0.95);
    border-color: #5dd9cf;
    color: #e6edf5;
}

/* HR divider in dark mode */
[data-theme="dark"] .embed-template-sleek hr {
    border-color: rgba(90, 109, 134, 0.4);
    opacity: 1;
}

/* ===================================================================
   Template 1: Glow (was Modern)
   Warm/inviting, card-based design with rounded corners
   ================================================================ */

.embed-template-glow .embed-container {
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
    max-width: 1100px;
    margin: 0 auto;
    padding: 2rem;
}

.embed-template-glow .sticky-top {
    top: 57px !important;
    background: var(--card-bg) !important;
    border-radius: 1rem;
    padding: 1rem !important;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow);
    border: none !important;
}

.embed-template-glow .ticket-group-card {
    background: var(--card-bg);
    border-radius: 1rem;
    box-shadow: var(--shadow);
    margin-bottom: 1.5rem;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: none;
}

.embed-template-glow .ticket-group-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.embed-template-glow .ticket-group-header {
    background: linear-gradient(135deg, #0d6efd 0%, #0056b3 100%);
    color: white;
    padding: 1rem 1.25rem;
    font-weight: 600;
    font-size: 1.1rem;
}

[data-theme="dark"] .embed-template-glow .ticket-group-header {
    background: linear-gradient(135deg, #1aa3a3 0%, #1f5b7a 100%);
}

.embed-template-glow .ticket-slot {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-color-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.embed-template-glow .ticket-slot:last-child {
    border-bottom: none;
}

.embed-template-glow .ticket-slot:hover {
    background-color: var(--bg-hover);
}

.embed-template-glow .btn {
    border-radius: 0.5rem;
}

.embed-template-glow .btn-primary {
    background: linear-gradient(135deg, #0d6efd 0%, #0056b3 100%);
    border: none;
}

.embed-template-glow .btn-primary:hover {
    background: linear-gradient(135deg, #0056b3 0%, #003d80 100%);
}

[data-theme="dark"] .embed-template-glow .embed-container {
    background: radial-gradient(1200px circle at 15% 0%, #1c2635 0%, #111821 45%, #0b1016 100%);
}

[data-theme="dark"] .embed-template-glow .sticky-top {
    background: rgba(16, 22, 32, 0.92) !important;
    border: 1px solid rgba(90, 109, 134, 0.35) !important;
    box-shadow: 0 16px 35px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

[data-theme="dark"] .embed-template-glow .ticket-group-card {
    background: rgba(16, 23, 33, 0.92);
    border: 1px solid rgba(90, 109, 134, 0.35);
    box-shadow: 0 18px 35px rgba(0, 0, 0, 0.45);
}

[data-theme="dark"] .embed-template-glow .ticket-group-card:hover {
    box-shadow: 0 22px 45px rgba(0, 0, 0, 0.55);
}

[data-theme="dark"] .embed-template-glow .ticket-slot {
    border-bottom-color: rgba(60, 76, 95, 0.6);
}

[data-theme="dark"] .embed-template-glow .ticket-slot:hover {
    background: rgba(57, 141, 145, 0.12);
}

[data-theme="dark"] .embed-template-glow .btn-primary {
    background: linear-gradient(135deg, #2ec4b6 0%, #2563eb 100%);
    border: none;
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.25);
}

[data-theme="dark"] .embed-template-glow .btn-primary:hover {
    background: linear-gradient(135deg, #37d6c7 0%, #1d4ed8 100%);
}

/* ===================================================================
   Template 2: Lux (was Minimal)
   Upscale/sophisticated, gold accents, sharp corners
   ================================================================ */

.embed-template-lux .embed-container {
    background-color: var(--bg-primary);
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
}

.embed-template-lux .sticky-top {
    top: 57px !important;
    background-color: transparent !important;
    border: none !important;
    padding-bottom: 1.5rem !important;
}

.embed-template-lux .ticket-group-card {
    border: none;
    border-bottom: 1px solid var(--border-color-light);
    border-radius: 0;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
}

.embed-template-lux .ticket-group-card:last-child {
    border-bottom: none;
}

.embed-template-lux .ticket-group-header {
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    padding: 0 0 0.5rem 0;
    background: transparent;
    border: none;
}

.embed-template-lux .ticket-slot {
    padding: 0.875rem 0;
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.embed-template-lux .ticket-slot:hover {
    background: transparent;
}

.embed-template-lux .ticket-slot:hover .ticket-time {
    color: var(--text-primary);
}

.embed-template-lux .ticket-time {
    color: var(--text-secondary);
    transition: color 0.2s ease;
}

.embed-template-lux .btn {
    border-radius: 0;
    font-weight: 400;
    letter-spacing: 0.02em;
}

.embed-template-lux .btn-primary {
    background-color: transparent;
    color: var(--text-primary);
    border: 1px solid var(--text-primary);
}

.embed-template-lux .btn-primary:hover {
    background-color: var(--text-primary);
    color: var(--bg-primary);
}

.embed-template-lux hr {
    opacity: 0.15;
}

[data-theme="dark"] .embed-template-lux .embed-container {
    background: linear-gradient(180deg, #0f141b 0%, #0b0f15 100%);
}

[data-theme="dark"] .embed-template-lux .ticket-group-card {
    border-bottom-color: rgba(62, 78, 98, 0.55);
}

[data-theme="dark"] .embed-template-lux .ticket-group-header {
    color: #9aa7b6;
}

[data-theme="dark"] .embed-template-lux .ticket-time {
    color: #aeb8c6;
}

[data-theme="dark"] .embed-template-lux .ticket-slot:hover .ticket-time {
    color: #e6edf5;
}

[data-theme="dark"] .embed-template-lux .btn-primary {
    color: #e6edf5;
    border-color: rgba(90, 109, 134, 0.7);
}

[data-theme="dark"] .embed-template-lux .btn-primary:hover {
    background-color: #e6edf5;
    color: #0f141b;
}

[data-theme="dark"] .embed-template-lux hr {
    opacity: 0.35;
}

/* ===================================================================
   Template 3: Shock (was Bold)
   Vibrant gradients, strong typography, expressive design
   ================================================================ */

.embed-template-shock .embed-container {
    background: linear-gradient(180deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    max-width: 1000px;
    margin: 0 auto;
    padding: 2rem;
    min-height: 100vh;
    color: #ffffff;
}

[data-theme="light"] .embed-template-shock .embed-container {
    background: linear-gradient(180deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
}

[data-theme="dark"] .embed-template-shock .embed-container {
    background: radial-gradient(1200px circle at 10% 0%, #1c2a3a 0%, #0f1b2a 45%, #0b121a 100%);
}

.embed-template-shock .sticky-top {
    top: 57px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    padding: 1.25rem !important;
    margin-bottom: 2rem;
}

.embed-template-shock .sticky-top * {
    color: white !important;
}

.embed-template-shock .sticky-top .btn {
    color: white !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
}

.embed-template-shock .sticky-top .form-control {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    color: white;
}

.embed-template-shock .sticky-top .form-control::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.embed-template-shock .ticket-group-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    margin-bottom: 1.5rem;
    overflow: hidden;
}

.embed-template-shock .ticket-group-header {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.05) 100%);
    padding: 1.25rem 1.5rem;
    font-weight: 700;
    font-size: 1.25rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: white;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.embed-template-shock .ticket-slot {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
}

.embed-template-shock .ticket-slot:last-child {
    border-bottom: none;
}

.embed-template-shock .ticket-slot:hover {
    background: rgba(255, 255, 255, 0.05);
}

.embed-template-shock .btn-primary {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    border: none;
    border-radius: 2rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.5rem 1.5rem;
}

.embed-template-shock .btn-primary:hover {
    background: linear-gradient(135deg, #f5576c 0%, #f093fb 100%);
    transform: scale(1.05);
}

[data-theme="dark"] .embed-template-shock .sticky-top {
    background: rgba(17, 26, 38, 0.7) !important;
    border-color: rgba(120, 146, 175, 0.35) !important;
}

[data-theme="dark"] .embed-template-shock .ticket-group-card {
    background: rgba(16, 24, 36, 0.75);
    border-color: rgba(120, 146, 175, 0.35);
}

[data-theme="dark"] .embed-template-shock .ticket-group-header {
    background: linear-gradient(90deg, rgba(34, 93, 91, 0.7) 0%, rgba(24, 58, 74, 0.5) 100%);
    color: #eaf6f5;
}

[data-theme="dark"] .embed-template-shock .ticket-slot {
    border-bottom-color: rgba(120, 146, 175, 0.25);
    color: rgba(230, 237, 245, 0.9);
}

[data-theme="dark"] .embed-template-shock .btn-primary {
    background: linear-gradient(135deg, #2ec4b6 0%, #1f6f72 100%);
}

[data-theme="dark"] .embed-template-shock .btn-primary:hover {
    background: linear-gradient(135deg, #37d6c7 0%, #1b5a5f 100%);
}

.embed-template-shock .btn-outline-secondary,
.embed-template-shock .btn-outline-primary {
    color: white;
    border-color: rgba(255, 255, 255, 0.5);
}

.embed-template-shock .btn-outline-secondary:hover,
.embed-template-shock .btn-outline-primary:hover {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.embed-template-shock .text-muted {
    color: rgba(255, 255, 255, 0.6) !important;
}

.embed-template-shock hr {
    border-color: rgba(255, 255, 255, 0.2);
}

/* Shock theme toggle override */
.embed-template-shock .embed-theme-toggle {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    color: white;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.embed-template-shock .embed-theme-toggle:hover {
    background: rgba(255, 255, 255, 0.25);
}

[data-theme="dark"] .embed-template-shock .embed-theme-toggle {
    background: rgba(16, 24, 36, 0.8);
    border-color: rgba(120, 146, 175, 0.45);
    color: #e6edf5;
}

[data-theme="dark"] .embed-template-shock .embed-theme-toggle:hover {
    background: rgba(22, 32, 46, 0.9);
}

/* ===================================================================
   Responsive Adjustments
   ================================================================ */

@media (max-width: 768px) {
    .embed-template-glow .embed-container,
    .embed-template-shock .embed-container {
        padding: 1rem;
    }

    .embed-template-glow .ticket-group-card,
    .embed-template-shock .ticket-group-card {
        border-radius: 0.75rem;
    }

    .embed-theme-toggle {
        width: 42px;
        height: 42px;
        font-size: 1.1rem;
        bottom: 15px;
        right: 15px;
    }
}

@media (max-width: 576px) {
    .embed-template-lux .embed-container {
        padding: 1rem;
    }

    .embed-template-shock .ticket-group-header {
        font-size: 1rem;
    }
}

/* ===================================================================
   Custom Embed Designer CSS Variable Overrides
   These variables are injected per-client from EmbedConfigDTO
   ================================================================ */

/* Apply custom font family when set */
.glow-template,
.lux-template,
.shock-template,
.ember-template,
.burst-template,
.carnival-template,
.embed-container.sleek-embed {
    font-family: var(--embed-font-family, inherit);
}

.glow-title,
.lux-date-day,
.shock-headline,
.glow-category-header,
.lux-section-title,
.shock-section-title,
.sleek-section-title,
.ember-section-header,
.burst-section-header,
.carnival-section-header,
.carnival-title,
.burst-title,
.ember-title {
    font-family: var(--embed-heading-font, var(--embed-font-family, inherit));
}

/* Apply custom primary color to buttons.
   NOTE: the *-time-btn selectors used to live here too, but never took effect — each template's
   inline <style> declares `background`/`border` shorthands at equal-or-greater specificity and
   later in the document, so a longhand here can't win. Time buttons now chain
   --section-accent -> --embed-primary -> literal inside each template instead. Don't re-add them. */
.glow-template .btn-glow-primary,
.sleek-embed .btn-primary {
    background-color: var(--embed-primary, revert);
    border-color: var(--embed-primary, revert);
}

/* Apply custom accent color to gift/accent buttons */
.glow-template .btn-glow-gift,
.shock-gift-btn,
.shock-action-btn,
.btn-ember-gift,
.btn-burst-gift,
.btn-carnival-gift {
    background-color: var(--embed-accent, revert);
    border-color: var(--embed-accent, revert);
}

/* Apply custom background */
.glow-template,
.lux-template,
.shock-template,
.ember-template,
.burst-template,
.carnival-template,
.embed-container.sleek-embed {
    background-color: var(--embed-bg, revert);
}

/* Apply custom text color */
.glow-template,
.lux-template,
.shock-template,
.ember-template,
.burst-template,
.carnival-template,
.embed-container.sleek-embed {
    color: var(--embed-text, revert);
}

/* Apply custom card background */
.glow-date-card,
.glow-event-card,
.glow-combo-card,
.shock-event-card,
.shock-combo-card,
.sleek-embed .card,
.sleek-event-card,
.sleek-combo-card,
.ember-event-card,
.ember-combo-card,
.ember-date-card,
.burst-event-card,
.burst-combo-card,
.burst-date-card,
.carnival-event-card,
.carnival-combo-card,
.carnival-date-card {
    background-color: var(--embed-card-bg, revert);
}

/* ===================================================================
   Urgency Badge Styles
   ================================================================ */

.urgency-badge {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.15rem 0.4rem;
    border-radius: 0.25rem;
    background: #dc3545;
    color: white;
    margin-left: 0.35rem;
    animation: urgency-pulse 2s ease-in-out infinite;
    white-space: nowrap;
    vertical-align: middle;
    line-height: 1;
}

@@keyframes urgency-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Urgency badge in Shock template - white on translucent */
.shock-time-btn .urgency-badge {
    background: rgba(255, 80, 80, 0.9);
}

/* Urgency badge in Lux template - subtle */
.lux-time-btn .urgency-badge {
    background: #e74c3c;
    font-size: 0.6rem;
}

/* ===================================================================
   Section Header Icon/Image
   ================================================================ */

.section-header-icon {
    height: 24px;
    width: 24px;
    object-fit: contain;
    margin-right: 0.5rem;
    vertical-align: middle;
}

/* ===================================================================
   Section Description
   ================================================================ */

.section-description {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

/* ===================================================================
   Reduced Motion Support
   ================================================================ */

@media (prefers-reduced-motion: reduce) {
    .embed-template-glow .ticket-group-card,
    .embed-template-shock .btn-primary,
    .embed-theme-toggle {
        transition: none;
    }

    .embed-template-glow .ticket-group-card:hover,
    .embed-theme-toggle:hover {
        transform: none;
    }

    .urgency-badge {
        animation: none;
    }
}

/* ===================================================================
   All-Dates Mode — Date Group Headers
   ================================================================ */

.embed-date-group {
    margin-bottom: 0.5rem;
}

.embed-date-group:last-child {
    margin-bottom: 0;
}

.embed-date-header {
    font-size: 1.1rem;
    font-weight: 700;
    font-family: var(--embed-heading-font, inherit);
    color: var(--text-primary, #1a1a2e);
    padding: 1rem 1.25rem 0.25rem;
    margin: 0;
    border-top: 1px solid var(--border-color, rgba(0,0,0,0.08));
}

.embed-date-group:first-child .embed-date-header {
    border-top: none;
}

/* ===================================================================
   Dark-Mode Overrides — ShowcaseGallery & Date Headers
   Applied when any template is in dark mode (Shock forces dark,
   Sleek/Burst/Carnival allow user toggle).
   ================================================================ */

[data-theme="dark"] .showcase-card {
    background: var(--card-bg, #121821);
    border-color: var(--border-color, rgba(255,255,255,0.1));
}
[data-theme="dark"] .showcase-card:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,0.35);
}
[data-theme="dark"] .showcase-card-title {
    color: var(--text-primary, #e6edf5);
}
[data-theme="dark"] .showcase-card-meta,
[data-theme="dark"] .showcase-card-description {
    color: var(--text-secondary, #b9c4d3);
}
[data-theme="dark"] .showcase-more-slots {
    color: var(--text-secondary, #b9c4d3);
}
[data-theme="dark"] .showcase-event-subtitle {
    color: var(--text-secondary, #b9c4d3);
}
[data-theme="dark"] .embed-date-header {
    color: var(--text-primary, #e6edf5);
    border-top-color: var(--border-color, rgba(255,255,255,0.1));
}

/* ===================================================================
   Shock Template — ShowcaseGallery Overrides
   Glassmorphism cards and gradient buttons to match Shock aesthetic.
   ================================================================ */

.embed-ctx-shock {
    background: linear-gradient(180deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
}
.embed-ctx-shock .showcase-gallery {
    padding: 1.5rem 1rem 0;
}
.embed-ctx-shock .showcase-card {
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 1.25rem;
}
.embed-ctx-shock .showcase-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.3);
}
.embed-ctx-shock .showcase-card-title {
    color: white;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.embed-ctx-shock .showcase-card-price {
    color: #f093fb;
    font-weight: 800;
}
.embed-ctx-shock .showcase-card-meta {
    color: rgba(255,255,255,0.6);
    font-weight: 600;
    letter-spacing: 0.05em;
}
.embed-ctx-shock .showcase-card-description {
    color: rgba(255,255,255,0.7);
}
.embed-ctx-shock .showcase-event-subtitle {
    color: rgba(255,255,255,0.6);
}
.embed-ctx-shock .showcase-more-slots {
    color: rgba(255,255,255,0.5);
}
.embed-ctx-shock .showcase-slot-btn.available {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    font-weight: 700;
    letter-spacing: 0.05em;
}
.embed-ctx-shock .showcase-slot-btn.available:hover {
    transform: scale(1.08);
    box-shadow: 0 4px 15px rgba(240,147,251,0.4);
    filter: none;
}
.embed-ctx-shock .showcase-pick-date-btn {
    border-color: #f093fb;
    color: #f093fb;
    border-radius: 2rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-size: 0.8rem;
}
.embed-ctx-shock .showcase-pick-date-btn:hover {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    border-color: transparent;
    color: white;
}

/* ===================================================================
   Shock Template — Show All Dates Header Overrides
   ================================================================ */

.shock-template .embed-date-header {
    color: #f093fb;
    font-weight: 900;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-size: 0.9rem;
    border-top-color: rgba(255,255,255,0.1);
    padding-top: 1.5rem;
}
.shock-template .embed-date-group {
    margin-bottom: 1.5rem;
}

/* ===================================================================
   Ember Template — ShowcaseGallery & Date Header Overrides
   Ember has a dark brown background (#1A0F08) but is locked to
   light mode, so theme CSS variables won't help.
   ================================================================ */

.embed-ctx-ember {
    background: #1A0F08;
}
.embed-ctx-ember .showcase-card {
    background: rgba(240,213,176,0.08);
    border: 1px solid rgba(240,213,176,0.15);
    border-radius: 1rem;
}
.embed-ctx-ember .showcase-card:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,0.35);
}
.embed-ctx-ember .showcase-card-title {
    color: #F0D5B0;
    font-weight: 700;
}
.embed-ctx-ember .showcase-card-price {
    color: #C0564A;
    font-weight: 700;
}
.embed-ctx-ember .showcase-card-meta,
.embed-ctx-ember .showcase-card-description {
    color: #A08060;
}
.embed-ctx-ember .showcase-event-subtitle {
    color: #A08060;
}
.embed-ctx-ember .showcase-more-slots {
    color: #A08060;
}
.embed-ctx-ember .showcase-slot-btn.available {
    background: linear-gradient(135deg, #C0564A 0%, #8B3A2E 100%);
}
.embed-ctx-ember .showcase-pick-date-btn {
    border-color: #C0564A;
    color: #C0564A;
}
.embed-ctx-ember .showcase-pick-date-btn:hover {
    background: #C0564A;
    border-color: #C0564A;
    color: white;
}
.ember-template .embed-date-header {
    color: #F0D5B0;
    border-top-color: rgba(240,213,176,0.15);
}
.ember-template .embed-date-group {
    margin-bottom: 1rem;
}

/* ===================================================================
   Burst Template — ShowcaseGallery & Date Header Overrides
   Burst has a dark purple background (#07041A).
   ================================================================ */

.embed-ctx-burst {
    background: #07041A;
}
.embed-ctx-burst .showcase-card {
    background: rgba(108,92,231,0.1);
    border: 1px solid rgba(224,222,255,0.15);
    border-radius: 1rem;
}
.embed-ctx-burst .showcase-card:hover {
    box-shadow: 0 6px 20px rgba(108,92,231,0.3);
}
.embed-ctx-burst .showcase-card-title {
    color: #E0DEFF;
    font-weight: 700;
}
.embed-ctx-burst .showcase-card-price {
    color: #00D2D3;
    font-weight: 700;
}
.embed-ctx-burst .showcase-card-meta,
.embed-ctx-burst .showcase-card-description {
    color: rgba(224,222,255,0.6);
}
.embed-ctx-burst .showcase-event-subtitle {
    color: rgba(224,222,255,0.6);
}
.embed-ctx-burst .showcase-more-slots {
    color: rgba(224,222,255,0.5);
}
.embed-ctx-burst .showcase-slot-btn.available {
    background: linear-gradient(135deg, #6C5CE7 0%, #00D2D3 100%);
}
.embed-ctx-burst .showcase-pick-date-btn {
    border-color: #6C5CE7;
    color: #6C5CE7;
}
.embed-ctx-burst .showcase-pick-date-btn:hover {
    background: linear-gradient(135deg, #6C5CE7 0%, #00D2D3 100%);
    border-color: transparent;
    color: white;
}
.burst-template .embed-date-header {
    color: #E0DEFF;
    border-top-color: rgba(224,222,255,0.15);
}
.burst-template .embed-date-group {
    margin-bottom: 1rem;
}

/* ===================================================================
   Whole-card click affordance (TF-3)
   Applied to event cards across all templates when the card has
   detail content available. Time-slot buttons and the Details/More
   button inside the card use @onclick:stopPropagation so they fire
   their own action instead of the card's open-detail click.
   ================================================================ */

.card-clickable {
    cursor: pointer;
    transition: transform 120ms ease, box-shadow 120ms ease;
}

.card-clickable:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

.card-clickable:focus-visible {
    outline: 2px solid var(--embed-primary, #4f8df0);
    outline-offset: 2px;
}

/* ===================================================================
   Shock template Details/More button — visibility fix (TF-9)
   The Shock template renders cards on a near-black background, and the
   default Bootstrap btn text inherits the surrounding (dark) color which
   makes the button effectively invisible. Force a visible accent color
   with an underlined hover state so the affordance reads.
   ================================================================ */

.shock-detail-btn,
.shock-template .shock-detail-btn {
    color: var(--embed-accent, #ffd166) !important;
    text-decoration: underline;
    text-underline-offset: 2px;
    background: transparent;
    border: none;
    padding: 0.25rem 0;
    font-weight: 600;
}

.shock-detail-btn:hover,
.shock-template .shock-detail-btn:hover,
.shock-detail-btn:focus,
.shock-template .shock-detail-btn:focus {
    color: var(--embed-accent, #ffd166) !important;
    background: transparent;
    text-decoration: underline;
    filter: brightness(1.15);
}

/* ── Rendered description typography (shared across all templates) ── */
.embed-desc-rendered {
    line-height: 1.6;
    word-break: break-word;
    overflow-wrap: break-word;
}
.embed-desc-rendered p { margin-bottom: 0.75rem; }
.embed-desc-rendered p:last-child { margin-bottom: 0; }
.embed-desc-rendered ul, .embed-desc-rendered ol { padding-left: 1.25rem; }
.embed-desc-rendered a { color: var(--embed-link-color, var(--embed-primary, #6366f1)); text-decoration: underline; }
.embed-desc-rendered blockquote {
    border-left: 3px solid var(--embed-primary, #6366f1);
    padding-left: 0.75rem;
    margin: 0.5rem 0;
    opacity: 0.85;
}

@media (max-width: 576px) {
    .embed-desc-rendered { font-size: 0.9rem; }
    .embed-desc-rendered ul, .embed-desc-rendered ol { padding-left: 1rem; }
}

/* Block empty-state placeholders */
.block-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 2rem 1rem;
    border: 2px dashed rgba(255,255,255,0.12);
    border-radius: var(--block-border-radius, 8px);
    color: rgba(255,255,255,0.35);
    font-size: 0.85rem;
}
.block-empty-state-lg {
    gap: 0.75rem;
    padding: 3rem 1rem;
    border-color: rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.4);
    font-size: 0.9rem;
}