/* ==========================================================================
   RUN.EVENTS WIDGETS — Tickets/Registration Widget (runevents-tickets)
   Ticket selection and purchase flow

   Uses container queries for responsive layout — the widget adapts to its
   actual container width, not the viewport width. This is critical because
   the widget is embedded inside event page content areas that may be narrow
   even on wide viewports.

   Container query browser support: Chrome 105+, Firefox 110+, Safari 16+.
   A @media fallback is included for older browsers.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Container Query Context
   The custom element itself becomes the size container so @container rules
   inside can query its inline-size.
   -------------------------------------------------------------------------- */
runevents-tickets {
    display: block;
    padding: 1.5rem;
    container-type: inline-size;
    container-name: re-tickets-container;
}

/* --------------------------------------------------------------------------
   Main Container - framed with rounded corners
   -------------------------------------------------------------------------- */

/* Multiple selectors for specificity over widget defaults (NO !important) */
.re-tickets,
runevents-tickets .re-tickets,
runevents-tickets > .re-tickets,
div.re-tickets {
    background: var(--color-surface);
    font-family: var(--font-body);
    color: var(--color-text);
    padding: var(--space-xl);
    display: flex;
    gap: var(--space-lg);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
}

/* Entry animation */
.re-tickets {
    animation: re-widget-fadeInUp 0.4s ease-out;
}

@media (prefers-reduced-motion: reduce) {
    .re-tickets {
        animation: none;
    }
}

/* --------------------------------------------------------------------------
   Two-Column Layout (.side) - Equal width columns
   -------------------------------------------------------------------------- */
.re-tickets > .side {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;    /* Allow shrinking below content size */
}

/* Left column */
.re-tickets > .side:first-of-type,
.re-tickets > .side:first-child {
    padding-right: var(--space-lg);
}

/* Right column (summary) */
.re-tickets > .side:nth-of-type(2) {
    background: transparent;
    padding: 0;
}

/* --------------------------------------------------------------------------
   Buttons - solid primary color, no gradients
   !important ONLY on colors to beat widget's default black buttons
   -------------------------------------------------------------------------- */
.re-tickets .btn,
.re-tickets button {
    background-color: var(--color-primary) !important;
    color: var(--color-text-on-primary) !important;
    border: none !important;
    font-size: var(--text-body);
    line-height: 1.5;
    padding: 0.75rem var(--space-lg);
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: all var(--transition-base);
    border-radius: var(--radius-sm) !important;
    box-shadow: 0 2px 8px hsla(var(--color-primary-hsl), 0.25);
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.re-tickets .btn:hover,
.re-tickets button:hover {
    background-color: var(--color-primary-hover) !important;
    color: var(--color-text-on-primary) !important;
    box-shadow: 0 4px 12px hsla(var(--color-primary-hsl), 0.35);
}

.re-tickets .btn:focus-visible,
.re-tickets button:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px hsla(var(--color-primary-hsl), 0.2);
}

/* Full width button */
.re-tickets .btn.full-width,
.re-tickets button.full-width {
    width: 100%;
}

/* --------------------------------------------------------------------------
   Section Headers - solid primary color
   -------------------------------------------------------------------------- */
.re-tickets h2 {
    font-family: var(--font-heading);
    font-size: var(--text-h2);
    font-weight: 700;
    color: var(--color-primary);
    margin: 0 0 var(--space-md) 0;
}

.re-tickets h3,
.re-tickets h4 {
    font-family: var(--font-body);
    font-weight: 600;
    color: var(--color-text);
    margin: 0;
}

.re-tickets h4 {
    font-size: var(--text-body);
}

.re-tickets h5 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0;
}

.re-tickets h6 {
    font-size: var(--text-small);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-primary);
    margin: 0;
}

/* --------------------------------------------------------------------------
   Section containers - reset default widget spacing
   -------------------------------------------------------------------------- */
.re-tickets .section {
    margin: 0;
    padding: 0;
}

.re-tickets .section h2 {
    margin-bottom: var(--space-sm);
}

/* --------------------------------------------------------------------------
   Voucher input row
   -------------------------------------------------------------------------- */
.re-tickets .btn-container {
    display: flex;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
    align-items: stretch;
}

.re-tickets .btn-container input {
    flex: 1;
    min-width: 0;
}

.re-tickets .btn-container .btn {
    flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Scroll section (ticket list)
   -------------------------------------------------------------------------- */
.re-tickets .scroll-section {
    max-height: none;
    height: auto;
    overflow: visible;
    padding-right: var(--space-md);
}

/* --------------------------------------------------------------------------
   Ticket items (flex-space with .price)
   -------------------------------------------------------------------------- */
.re-tickets .flex-space {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-md);
}

/* Ticket row styling with hover effect */
.re-tickets .scroll-section > .flex-space {
    padding: var(--space-md);
    margin: 0 calc(-1 * var(--space-sm));
    border-bottom: 1px solid var(--color-border);
    border-left: 3px solid transparent;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}

.re-tickets .scroll-section > .flex-space:hover {
    border-left-color: var(--color-primary);
    background: hsla(var(--color-primary-hsl), 0.04);
}

.re-tickets .scroll-section > .flex-space:last-child {
    border-bottom: none;
}

/* Hide the empty div after .price */
.re-tickets .scroll-section > .flex-space > div:empty {
    display: none;
}

/* Price container within ticket items - take full width */
.re-tickets .price {
    flex: 1 1 100%;
    min-width: 0;
    width: 100%;
    max-width: 100%;
}

/* Stack layout: ticket name on row 1, price/selector on row 2 */
.re-tickets .price > .flex-space {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-sm);
    width: 100%;
}

/* Ticket name as full-width frame - LARGEST text */
.re-tickets .price > .flex-space > h4:first-child {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    background: hsla(var(--color-primary-hsl), 0.08);
    color: var(--color-primary);
    padding: var(--space-sm) var(--space-md);
    border: 1px solid hsla(var(--color-primary-hsl), 0.25);
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 1.125rem;
    margin: 0;
    flex: none;
}

/* Price and selector row - spread apart with dropdown on right */
.re-tickets .price > .flex-space > .flex-space {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-md);
    width: 100%;
    justify-content: space-between;
}

/* Price amount styling - second largest text */
.re-tickets .price > .flex-space > .flex-space h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
    background: none;
    padding: 0;
    border-radius: 0;
    border: none;
    margin: 0;
    flex: none;
}

/* Select dropdown - fixed width, not stretched */
.re-tickets .price > .flex-space > .flex-space select,
.re-tickets select {
    width: auto;
    min-width: 70px;
    max-width: 100px;
    flex: none;
}

/* Description text - full width */
.re-tickets .price small {
    display: block;
    width: 100%;
    max-width: 100%;
    margin-top: var(--space-xs);
    color: var(--color-text-muted);
    font-size: var(--text-small);
    line-height: 1.4;
}

/* --------------------------------------------------------------------------
   Select dropdown
   -------------------------------------------------------------------------- */
.re-tickets select {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--text-body);
    font-family: var(--font-body);
    min-height: 36px;
    min-width: 60px;
    cursor: pointer;
    transition: border-color var(--transition-fast);
}

.re-tickets select:hover {
    border-color: var(--color-primary);
}

.re-tickets select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px hsla(var(--color-primary-hsl), 0.15);
}

/* --------------------------------------------------------------------------
   Form inputs
   -------------------------------------------------------------------------- */
.re-tickets input[type="text"],
.re-tickets input[type="email"],
.re-tickets textarea {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--space-sm) var(--space-md);
    font-size: var(--text-body);
    font-family: var(--font-body);
    min-height: 44px;
    width: 100%;
    transition: border-color var(--transition-fast);
}

.re-tickets input[type="text"]:focus,
.re-tickets input[type="email"]:focus,
.re-tickets textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px hsla(var(--color-primary-hsl), 0.15);
}

/* --------------------------------------------------------------------------
   Right column - Summary section
   -------------------------------------------------------------------------- */

/* Reset the inner wrapper div */
.re-tickets > .side:nth-of-type(2) > div:first-child {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* SUMMARY header section */
.re-tickets > .side:nth-of-type(2) .section {
    margin: 0;
    padding: 0;
}

/* Selected items container - the second .section with .add-spacing inside */
.re-tickets > .side:nth-of-type(2) .section .add-spacing {
    background: hsla(var(--color-secondary-hsl), 0.08);
    border: 1px solid hsla(var(--color-secondary-hsl), 0.2);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    margin: var(--space-sm) 0 var(--space-md) 0;
    min-height: 100px;
}

/* Selected item rows inside the add-spacing container */
.re-tickets > .side:nth-of-type(2) .section .add-spacing > div {
    padding: var(--space-xs) 0;
    border-bottom: 1px solid hsla(var(--color-secondary-hsl), 0.15);
    color: var(--color-text);
}

.re-tickets > .side:nth-of-type(2) .section .add-spacing > div:last-child {
    border-bottom: none;
}

/* TOTAL row - outside the selected items area */
.re-tickets > .side:nth-of-type(2) > div:first-child > .flex-space.add-spacing {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--space-md);
    margin-top: auto;
    border-left: 3px solid var(--color-primary);
}

/* --------------------------------------------------------------------------
   Checkout footer area
   -------------------------------------------------------------------------- */
.re-tickets > .side:nth-of-type(2) > div:last-child {
    margin-top: var(--space-md);
}

.re-tickets .redirect-footer {
    display: block;
    margin-top: var(--space-sm);
    font-size: var(--text-small);
    color: var(--color-text-muted);
}

.re-tickets .redirect-footer img {
    vertical-align: middle;
    margin-left: var(--space-xs);
}

/* --------------------------------------------------------------------------
   Status Messages
   -------------------------------------------------------------------------- */
.re-tickets .success {
    background-color: var(--color-success) !important;
    color: var(--color-text-inverse) !important;
    padding: var(--space-md);
    border-radius: var(--radius-sm);
    margin: var(--space-md) 0;
}

.re-tickets .error {
    background-color: var(--color-error) !important;
    color: var(--color-text-inverse) !important;
    padding: var(--space-md);
    border-radius: var(--radius-sm);
    margin: var(--space-md) 0;
}

.re-tickets .loading {
    opacity: 0.7;
    pointer-events: none;
}

/* ==========================================================================
   CONTAINER QUERIES
   Responsive layout based on the widget's actual container width.
   This is critical because the widget is embedded in page content areas
   that may be narrow even on wide viewports.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Narrow: below 700px — single column layout
   -------------------------------------------------------------------------- */
@container re-tickets-container (max-width: 700px) {
    .re-tickets {
        flex-direction: column;
        padding: var(--space-md);
        gap: var(--space-md);
    }

    .re-tickets > .side:first-of-type,
    .re-tickets > .side:first-child {
        padding-right: 0;
    }

    .re-tickets > .side:nth-of-type(2) {
        flex: none;
        width: 100%;
    }

    .re-tickets .scroll-section {
        padding-right: 0;
    }

    .re-tickets h2 {
        font-size: var(--text-h3);
    }

    .re-tickets .btn-container {
        flex-direction: column;
    }
}

/* --------------------------------------------------------------------------
   Compact: below 450px — tighter spacing, stacked price row
   -------------------------------------------------------------------------- */
@container re-tickets-container (max-width: 450px) {
    .re-tickets {
        padding: var(--space-sm);
        gap: var(--space-sm);
    }

    .re-tickets .price > .flex-space > h4:first-child {
        font-size: 1rem;
        padding: var(--space-xs) var(--space-sm);
    }

    .re-tickets .price > .flex-space > .flex-space {
        flex-wrap: wrap;
        gap: var(--space-sm);
    }

    .re-tickets select {
        min-width: 60px;
    }

    .re-tickets .btn,
    .re-tickets button {
        padding: 0.5rem var(--space-md);
        font-size: var(--text-small);
    }
}

/* --------------------------------------------------------------------------
   @media fallback for browsers without container query support
   -------------------------------------------------------------------------- */
@supports not (container-type: inline-size) {
    @media (max-width: 768px) {
        .re-tickets {
            flex-direction: column;
            padding: var(--space-md);
            gap: var(--space-md);
        }

        .re-tickets > .side:first-of-type,
        .re-tickets > .side:first-child {
            padding-right: 0;
        }

        .re-tickets > .side:nth-of-type(2) {
            flex: none;
            width: 100%;
        }

        .re-tickets .scroll-section {
            padding-right: 0;
        }

        .re-tickets h2 {
            font-size: var(--text-h3);
        }

        .re-tickets .price > .flex-space {
            flex-direction: column;
            align-items: flex-start;
        }

        .re-tickets .price > .flex-space > .flex-space {
            width: 100%;
            justify-content: space-between;
            margin-top: var(--space-sm);
        }

        .re-tickets .btn-container {
            flex-direction: column;
        }
    }
}

/* --------------------------------------------------------------------------
   Override run.events Default Red (#ee255a)
   Maps any hardcoded brand color to the event's primary color.
   !important required here to beat inline styles set by the widget.
   -------------------------------------------------------------------------- */
.re-tickets *[style*="background-color: #ee255a"],
.re-tickets *[style*="background-color: rgb(238, 37, 90)"],
.re-tickets *[style*="background: #ee255a"],
.re-tickets *[style*="background: rgb(238, 37, 90)"],
.re-tickets .notification,
.re-tickets .alert,
.re-tickets .warning,
.re-tickets .info-banner {
    background-color: var(--color-primary) !important;
    background: var(--color-primary) !important;
    color: var(--color-text-on-primary) !important;
}

runevents-tickets [style*="background-color: #ee255a"],
runevents-tickets [style*="background-color: rgb(238, 37, 90)"],
runevents-tickets [style*="background: #ee255a"],
runevents-tickets [style*="background: rgb(238, 37, 90)"] {
    background-color: var(--color-primary) !important;
    background: var(--color-primary) !important;
    color: var(--color-text-on-primary) !important;
}