/* ===================================================================
   Embed Block Page — Modal / Cart / Toast Chrome
   Styles booking modals, the slide-out cart, and the added-to-cart toast
   using page-theme CSS custom properties (--embed-modal-*) emitted by
   BlockPageRenderer. Loaded AFTER embed-templates.css so equal-specificity
   rules win by source order.

   Scoped to .embed-block-page (the wrapper rendered around modals and
   the cart-added banner on block-based shop pages only).
   =================================================================== */

/* ------------------------------------------------------------------
   Modal Content (EventSlotDetailModal, ComboDetailModal, EventDetailPopup)
   ------------------------------------------------------------------ */

.embed-block-page .modal-content {
    background: var(--embed-modal-bg);
    color: var(--embed-modal-text);
    border: 1px solid var(--embed-modal-border);
    border-radius: var(--embed-modal-radius);
}

.embed-block-page .modal-header {
    border-bottom-color: var(--embed-modal-border);
}

.embed-block-page .modal-header .modal-title {
    color: var(--embed-modal-text);
}

.embed-block-page .modal-header .btn-close {
    /* Invert when text is light (brightness > 0.5 mapped via the variable);
       using filter: brightness(0) invert(1) makes the X white on dark bg. */
    filter: brightness(0) invert(1);
    opacity: 0.8;
}

.embed-block-page .modal-footer {
    border-top-color: var(--embed-modal-border);
}

.embed-block-page .modal-body .text-muted {
    color: var(--embed-modal-text) !important;
    opacity: 0.7;
}

.embed-block-page .modal-body .card {
    background: var(--embed-modal-bg);
    border-color: var(--embed-modal-border);
    color: var(--embed-modal-text);
}

.embed-block-page .modal-body .card-subtitle {
    color: var(--embed-modal-text) !important;
    opacity: 0.65;
}

.embed-block-page .modal-body .list-unstyled li span {
    color: var(--embed-modal-text);
}

.embed-block-page .modal-body .form-label {
    color: var(--embed-modal-text);
}

.embed-block-page .modal-body hr {
    border-color: var(--embed-modal-border);
}

/* Quantity +/- buttons inside modals */
.embed-block-page .modal-body .btn-group .btn-outline-secondary {
    color: var(--embed-modal-text);
    border-color: var(--embed-modal-border);
    background: transparent;
}

.embed-block-page .modal-body .btn-group .btn-outline-secondary:hover:not(:disabled) {
    background: var(--embed-modal-accent);
    color: var(--embed-modal-bg);
    border-color: var(--embed-modal-accent);
}

.embed-block-page .modal-body .btn-group .btn-outline-secondary.disabled {
    color: var(--embed-modal-text);
    border-color: var(--embed-modal-border);
    opacity: 0.6;
}

/* Primary / accent buttons in modals */
.embed-block-page .btn-primary {
    background: var(--embed-modal-accent);
    border-color: var(--embed-modal-accent);
    color: var(--embed-modal-bg);
}

.embed-block-page .btn-primary:hover {
    filter: brightness(1.1);
}

.embed-block-page .modal-footer .btn-secondary {
    background: transparent;
    border: 1px solid var(--embed-modal-border);
    color: var(--embed-modal-text);
}

.embed-block-page .modal-footer .btn-secondary:hover {
    background: var(--embed-modal-border);
    color: var(--embed-modal-text);
}

.embed-block-page .btn-outline-secondary {
    color: var(--embed-modal-text);
    border-color: var(--embed-modal-border);
}

.embed-block-page .btn-outline-secondary:hover {
    background: var(--embed-modal-border);
    color: var(--embed-modal-text);
}

/* ------------------------------------------------------------------
   EventDetailPopup
   ------------------------------------------------------------------ */

.embed-block-page .event-detail-popup {
    background: var(--embed-modal-bg);
    color: var(--embed-modal-text);
    border-color: var(--embed-modal-border);
}

.embed-block-page .event-detail-popup .badge.bg-success {
    background: var(--embed-modal-accent) !important;
    color: var(--embed-modal-bg);
}

.embed-block-page .event-detail-popup .text-muted {
    color: var(--embed-modal-text) !important;
    opacity: 0.65;
}

/* ------------------------------------------------------------------
   PhoneNumberModal
   ------------------------------------------------------------------ */

.embed-block-page .phone-modal {
    background: var(--embed-modal-bg);
    color: var(--embed-modal-text);
    border-color: var(--embed-modal-border);
}

.embed-block-page .phone-modal-icon {
    color: var(--embed-modal-accent);
}

.embed-block-page .phone-modal-number {
    color: var(--embed-modal-text);
}

.embed-block-page .phone-modal .btn-link.text-muted {
    color: var(--embed-modal-text) !important;
    opacity: 0.6;
}

/* ------------------------------------------------------------------
   Cart Panel (slide-out drawer in EmbedHeader)
   The cart panel is rendered inside EmbedHeader which is NOT inside
   .embed-block-page. However, on block pages the HeaderBlock renders
   inside the block-page-renderer, so the cart panel inherits the
   variables from :root. These rules target the cart panel globally
   when the CSS variables are defined (they cascade from :root).

   Since the HeaderBlock is rendered inside the block page flow but
   the EmbedHeader with the cart panel is NOT inside .embed-block-page,
   we scope these cart rules using .embed-block-page ~ to catch the
   case where block pages use a separate header. If the cart panel is
   inside .embed-block-page these selectors match too.
   ------------------------------------------------------------------ */

.embed-block-page .cart-panel {
    background: var(--embed-modal-bg);
    color: var(--embed-modal-text);
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.4);
}

.embed-block-page .cart-header {
    border-bottom-color: var(--embed-modal-border) !important;
    color: var(--embed-modal-text);
}

.embed-block-page .cart-panel .card {
    background: var(--embed-modal-bg);
    border-color: var(--embed-modal-border);
    color: var(--embed-modal-text);
}

.embed-block-page .cart-panel .text-muted {
    color: var(--embed-modal-text) !important;
    opacity: 0.6;
}

.embed-block-page .cart-panel .btn-outline-secondary {
    color: var(--embed-modal-text);
    border-color: var(--embed-modal-border);
}

.embed-block-page .cart-panel .btn-outline-secondary:hover {
    background: var(--embed-modal-accent);
    color: var(--embed-modal-bg);
    border-color: var(--embed-modal-accent);
}

.embed-block-page .cart-panel .btn-link.text-muted {
    color: var(--embed-modal-text) !important;
    opacity: 0.65;
}

.embed-block-page .cart-footer {
    border-top-color: var(--embed-modal-border) !important;
}

.embed-block-page .cart-backdrop {
    background: rgba(0, 0, 0, 0.5);
}

.embed-block-page .cart-badge {
    background: var(--embed-modal-accent);
    color: var(--embed-modal-bg);
}

/* ------------------------------------------------------------------
   Embed Header (rendered by HeaderBlock on block pages)
   ------------------------------------------------------------------ */

.embed-block-page .embed-header {
    background: var(--embed-modal-bg);
    border-bottom-color: var(--embed-modal-border);
}

.embed-block-page .embed-header-btn {
    background: var(--embed-modal-bg);
    border-color: var(--embed-modal-border);
    color: var(--embed-modal-text);
}

.embed-block-page .embed-header-btn:hover {
    background: var(--embed-modal-border);
    color: var(--embed-modal-text);
}

/* ------------------------------------------------------------------
   Cart Added Banner (toast notification)
   ------------------------------------------------------------------ */

.embed-block-page .cart-added-banner {
    background: var(--embed-modal-bg);
    color: var(--embed-modal-text);
    border: 1px solid var(--embed-modal-accent);
    border-left: 4px solid var(--embed-modal-accent);
    border-radius: var(--embed-modal-radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.embed-block-page .cart-added-banner-icon {
    background: var(--embed-modal-accent);
    color: var(--embed-modal-bg);
}

.embed-block-page .cart-added-banner-title {
    color: var(--embed-modal-text);
}

.embed-block-page .cart-added-banner-detail {
    color: var(--embed-modal-text);
    opacity: 0.7;
}

.embed-block-page .cart-added-banner-cta {
    background: var(--embed-modal-accent);
    color: var(--embed-modal-bg);
    border-color: var(--embed-modal-accent);
    border-radius: var(--embed-modal-radius);
}

.embed-block-page .cart-added-banner-cta:hover {
    filter: brightness(1.1);
}

.embed-block-page .cart-added-banner-close {
    color: var(--embed-modal-text);
    opacity: 0.6;
}

.embed-block-page .cart-added-banner-close:hover {
    color: var(--embed-modal-text);
    opacity: 1;
    background: rgba(255, 255, 255, 0.08);
}

/* ===================================================================
   Checkout Pages — Block-Page Theming
   Scoped ONLY under .checkout-block-page so zero selectors hit legacy
   (null-document) pages. Applied when CheckoutTemplateWrapper or
   EmbedCartCheckout receives a non-null PageDocument.
   =================================================================== */

.checkout-block-page {
    background: var(--embed-bg-gradient, var(--embed-bg, #0a0a0a));
    color: var(--embed-text, #e0e0e0);
    font-family: var(--embed-font-family, inherit);
    font-weight: var(--embed-body-font-weight, 400);
    line-height: var(--embed-line-height, 1.5);
    min-height: 100vh;
    padding: 1rem;
}

.checkout-block-page .card {
    background: var(--embed-modal-bg);
    color: var(--embed-modal-text);
    border: 1px solid var(--embed-modal-border);
    border-radius: var(--embed-modal-radius);
}

.checkout-block-page .card-header {
    border-bottom-color: var(--embed-modal-border);
    background: transparent;
    color: var(--embed-modal-text);
}

.checkout-block-page .card-body {
    color: var(--embed-modal-text);
}

.checkout-block-page h1,
.checkout-block-page h2,
.checkout-block-page h3,
.checkout-block-page h4,
.checkout-block-page h5,
.checkout-block-page h6 {
    font-family: var(--embed-heading-font, inherit);
    font-weight: var(--embed-heading-font-weight, 600);
    text-transform: var(--embed-heading-text-transform, none);
    color: var(--embed-modal-text);
}

.checkout-block-page .btn-primary {
    background: var(--embed-modal-accent);
    border-color: var(--embed-modal-accent);
    color: var(--embed-modal-bg);
}

.checkout-block-page .btn-primary:hover {
    filter: brightness(1.1);
}

.checkout-block-page .btn-success {
    background: var(--embed-modal-accent);
    border-color: var(--embed-modal-accent);
    color: var(--embed-modal-bg);
}

.checkout-block-page .btn-success:hover {
    filter: brightness(1.1);
}

.checkout-block-page .btn-outline-secondary {
    color: var(--embed-modal-text);
    border-color: var(--embed-modal-border);
}

.checkout-block-page .btn-outline-secondary:hover {
    background: var(--embed-modal-border);
    color: var(--embed-modal-text);
}

.checkout-block-page .btn-outline-primary {
    color: var(--embed-modal-accent);
    border-color: var(--embed-modal-accent);
}

.checkout-block-page .btn-outline-primary:hover {
    background: var(--embed-modal-accent);
    color: var(--embed-modal-bg);
}

.checkout-block-page .form-control,
.checkout-block-page .form-select {
    background: color-mix(in srgb, var(--embed-modal-bg) 80%, transparent);
    color: var(--embed-modal-text);
    border-color: var(--embed-modal-border);
}

.checkout-block-page .form-control:focus,
.checkout-block-page .form-select:focus {
    border-color: var(--embed-modal-accent);
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--embed-modal-accent) 25%, transparent);
    color: var(--embed-modal-text);
}

.checkout-block-page .form-control::placeholder {
    color: color-mix(in srgb, var(--embed-modal-text) 50%, transparent);
}

.checkout-block-page .form-label {
    color: var(--embed-modal-text);
}

.checkout-block-page .form-check-input {
    border-color: var(--embed-modal-border);
}

.checkout-block-page .form-check-input:checked {
    background-color: var(--embed-modal-accent);
    border-color: var(--embed-modal-accent);
}

.checkout-block-page .form-check-label {
    color: var(--embed-modal-text);
}

.checkout-block-page .text-muted {
    color: var(--embed-modal-text) !important;
    opacity: 0.7;
}

.checkout-block-page .badge.bg-primary,
.checkout-block-page .badge.bg-success {
    background: var(--embed-modal-accent) !important;
    color: var(--embed-modal-bg);
}

.checkout-block-page .badge.bg-secondary {
    background: var(--embed-modal-border) !important;
    color: var(--embed-modal-text);
}

.checkout-block-page .list-group {
    border-color: var(--embed-modal-border);
}

.checkout-block-page .list-group-item {
    background: var(--embed-modal-bg);
    color: var(--embed-modal-text);
    border-color: var(--embed-modal-border);
}

.checkout-block-page .alert-success {
    background: color-mix(in srgb, var(--embed-modal-accent) 15%, var(--embed-modal-bg));
    color: var(--embed-modal-text);
    border-color: color-mix(in srgb, var(--embed-modal-accent) 30%, var(--embed-modal-border));
}

.checkout-block-page .alert-danger {
    background: color-mix(in srgb, #dc3545 15%, var(--embed-modal-bg));
    color: var(--embed-modal-text);
    border-color: color-mix(in srgb, #dc3545 30%, var(--embed-modal-border));
}

.checkout-block-page .alert-warning {
    background: color-mix(in srgb, #ffc107 15%, var(--embed-modal-bg));
    color: var(--embed-modal-text);
    border-color: color-mix(in srgb, #ffc107 30%, var(--embed-modal-border));
}

.checkout-block-page .alert-info {
    background: color-mix(in srgb, #0dcaf0 15%, var(--embed-modal-bg));
    color: var(--embed-modal-text);
    border-color: color-mix(in srgb, #0dcaf0 30%, var(--embed-modal-border));
}

.checkout-block-page hr {
    border-color: var(--embed-modal-border);
}

.checkout-block-page .border-bottom {
    border-bottom-color: var(--embed-modal-border) !important;
}

.checkout-block-page .border-start {
    border-left-color: var(--embed-modal-accent) !important;
}

.checkout-block-page .stripe-payment-host,
.checkout-block-page .stripe-address-host {
    background: color-mix(in srgb, var(--embed-modal-bg) 90%, transparent);
    border: 1px solid var(--embed-modal-border);
    border-radius: var(--embed-modal-radius);
    padding: 1rem;
}

.checkout-block-page .spinner-border.text-primary {
    color: var(--embed-modal-accent) !important;
}

.checkout-block-page .input-group .btn {
    border-color: var(--embed-modal-border);
}