/* ============================================================
   Registration Widget Page — Styles for <runevents-tickets>
   ============================================================
   The web component renders in Light DOM (Angular), so external
   CSS can target its internal .re-tickets structure directly.

   Variable mapping: community-theme.css uses --primary-color,
   --spacing-md, --font-size-base, etc. — this file maps them
   to shorter aliases scoped under .registration-page-widget
   so the widget CSS reads cleanly.
   ============================================================ */

/* --------------------------------------------------------------------------
   Variable Mapping — community-theme.css → widget tokens
   -------------------------------------------------------------------------- */
.registration-page-widget {
    /* Colors */
    --w-primary: var(--primary-color, #6A4A9E);
    --w-primary-text: var(--primary-color-text, #ffffff);
    --w-primary-safe: var(--primary-color-safe, #6A4A9E);
    --w-text: var(--text-primary, #1f2937);
    --w-text-muted: var(--text-secondary, #4B5563);
    --w-bg: var(--bg-white, #ffffff);
    --w-bg-light: var(--bg-gray-light, #f9fafb);
    --w-border: var(--glass-border, rgba(0, 0, 0, 0.1));
    --w-success: var(--success, #059669);
    --w-error: var(--error, #DC2626);

    /* Spacing (mirrors community-theme.css --spacing-*) */
    --w-xs: var(--spacing-xs, 0.25rem);
    --w-sm: var(--spacing-sm, 0.5rem);
    --w-md: var(--spacing-md, 1rem);
    --w-lg: var(--spacing-lg, 1.5rem);
    --w-xl: var(--spacing-xl, 2rem);

    /* Typography */
    --w-font: 'IBM Plex Sans', 'Inter', sans-serif;
    --w-font-heading: 'IBM Plex Sans Condensed', 'IBM Plex Sans', sans-serif;
    --w-size-2xl: var(--font-size-2xl, 1.5rem);
    --w-size-xl: var(--font-size-xl, 1.25rem);
    --w-size-base: var(--font-size-base, 1rem);
    --w-size-sm: var(--font-size-sm, 0.875rem);
    --w-size-xs: var(--font-size-xs, 0.75rem);

    /* Radii / shadows / transitions (not in theme — hardcoded) */
    --w-radius-lg: 12px;
    --w-radius-md: 8px;
    --w-radius-sm: 6px;
    --w-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --w-transition: 0.2s ease;
    --w-transition-fast: 0.15s ease;

    /* Container */
    width: 100%;
    min-height: 400px;
    box-sizing: border-box;
}

/* Ensure the parent article and content div stretch to full width */
.community-standard-page,
.community-standard-page-content {
    width: 100%;
    min-width: 0;
}

/* When no header or intro text is rendered, remove top padding from content */
.community-standard-page > .community-standard-page-content:first-child > * {
    padding-top: 0;
}

.registration-page-widget runevents-tickets {
    display: block;
    width: 100%;
    box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   Error state — no event configured
   -------------------------------------------------------------------------- */
.registration-page-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    text-align: center;
    color: var(--text-secondary, #4B5563);
    gap: 1rem;
}

.registration-page-error i {
    font-size: 2rem;
    color: #F59E0B;
}

.registration-page-error p {
    font-size: 1rem;
    margin: 0;
}

/* ==========================================================================
   RUN.EVENTS WIDGETS — Tickets/Registration Widget (runevents-tickets)

   Uses container queries for responsive layout — the widget adapts to its
   actual container width, not the viewport width.

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

/* --------------------------------------------------------------------------
   Container Query Context
   The .registration-page-widget wrapper is the size container (not the
   custom element itself) so the element's own width is not affected by
   inline-size containment.
   -------------------------------------------------------------------------- */
.registration-page-widget {
    container-type: inline-size;
    container-name: re-tickets-container;
}

runevents-tickets {
    display: block;
    width: 100% !important;
    max-width: none !important;
    padding: var(--w-lg);
}

/* --------------------------------------------------------------------------
   Main Container — framed with rounded corners
   -------------------------------------------------------------------------- */
.re-tickets,
runevents-tickets .re-tickets,
runevents-tickets > .re-tickets,
div.re-tickets {
    background: var(--w-bg);
    font-family: var(--w-font);
    color: var(--w-text);
    padding: var(--w-xl);
    display: flex;
    flex-wrap: wrap !important;
    gap: var(--w-lg);
    border-radius: var(--w-radius-lg);
    border: 1px solid var(--w-border);
    box-shadow: var(--w-shadow-sm);
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
}

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

@keyframes re-widget-fadeInUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

@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 1 300px;
    min-width: 0;
}

/* Left column */
.re-tickets > .side:first-of-type,
.re-tickets > .side:first-child {
    padding-right: var(--w-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(--w-primary) !important;
    color: var(--w-primary-text) !important;
    border: none !important;
    font-size: var(--w-size-base);
    line-height: 1.5;
    padding: 0.75rem var(--w-lg);
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: all var(--w-transition);
    border-radius: var(--w-radius-sm) !important;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--w-primary) 25%, transparent);
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.re-tickets .btn:hover,
.re-tickets button:hover {
    background-color: var(--w-primary-safe) !important;
    color: var(--w-primary-text) !important;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--w-primary) 35%, transparent);
    filter: brightness(0.9);
}

.re-tickets .btn:focus-visible,
.re-tickets button:focus-visible {
    outline: 2px solid var(--w-primary);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--w-primary) 20%, transparent);
}

/* 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(--w-font-heading);
    font-size: var(--w-size-2xl);
    font-weight: 700;
    color: var(--w-primary);
    margin: 0 0 var(--w-md) 0;
}

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

.re-tickets h4 {
    font-size: var(--w-size-base);
}

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

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

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

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

/* --------------------------------------------------------------------------
   Voucher input row
   -------------------------------------------------------------------------- */
.re-tickets .btn-container {
    display: flex;
    gap: var(--w-sm);
    margin-bottom: var(--w-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(--w-md);
}

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

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

.re-tickets .scroll-section > .flex-space:hover {
    border-left-color: var(--w-primary);
    background: color-mix(in srgb, var(--w-primary) 4%, transparent);
}

.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(--w-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: color-mix(in srgb, var(--w-primary) 8%, transparent);
    color: var(--w-primary);
    padding: var(--w-sm) var(--w-md);
    border: 1px solid color-mix(in srgb, var(--w-primary) 25%, transparent);
    border-radius: var(--w-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(--w-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(--w-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(--w-xs);
    color: var(--w-text-muted);
    font-size: var(--w-size-sm);
    line-height: 1.4;
}

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

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

.re-tickets select:focus {
    outline: none;
    border-color: var(--w-primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--w-primary) 15%, transparent);
}

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

.re-tickets input[type="text"]:focus,
.re-tickets input[type="email"]:focus,
.re-tickets textarea:focus {
    outline: none;
    border-color: var(--w-primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--w-primary) 15%, transparent);
}

/* --------------------------------------------------------------------------
   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 .add-spacing inside .section */
.re-tickets > .side:nth-of-type(2) .section .add-spacing {
    background: color-mix(in srgb, var(--accent-color, #7BCED7) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-color, #7BCED7) 20%, transparent);
    border-radius: var(--w-radius-md);
    padding: var(--w-md);
    margin: var(--w-sm) 0 var(--w-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(--w-xs) 0;
    border-bottom: 1px solid color-mix(in srgb, var(--accent-color, #7BCED7) 15%, transparent);
    color: var(--w-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(--w-bg);
    border: 1px solid var(--w-border);
    border-radius: var(--w-radius-sm);
    padding: var(--w-md);
    margin-top: auto;
    border-left: 3px solid var(--w-primary);
}

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

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

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

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

.re-tickets .error {
    background-color: var(--w-error) !important;
    color: #ffffff !important;
    padding: var(--w-md);
    border-radius: var(--w-radius-sm);
    margin: var(--w-md) 0;
}

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

/* ==========================================================================
   CONTAINER QUERIES
   Responsive layout based on the widget's actual container width.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Narrow: below 700px — single column layout
   -------------------------------------------------------------------------- */
@container re-tickets-container (max-width: 700px) {
    .re-tickets,
    runevents-tickets .re-tickets,
    runevents-tickets > .re-tickets,
    div.re-tickets {
        flex-direction: column !important;
        padding: var(--w-md);
        gap: var(--w-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(--w-size-xl);
    }

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

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

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

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

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

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

/* --------------------------------------------------------------------------
   @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(--w-md);
            gap: var(--w-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(--w-size-xl);
        }

        .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(--w-sm);
        }

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

/* --------------------------------------------------------------------------
   3-Column Desktop Fallback
   When the 3-column grid (280px 1fr 320px) is active, the middle column
   is ~522–672px — too narrow for two-column widget layout. Force single-
   column via media query + structural selector as a guaranteed override,
   independent of container queries or Angular's dynamically-injected CSS.
   -------------------------------------------------------------------------- */
@media (min-width: 1250px) {
    /* --- Main container: single-column, mobile-like spacing --- */
    .main-container:not(.two-column-layout) .re-tickets,
    .main-container:not(.two-column-layout) runevents-tickets .re-tickets,
    .main-container:not(.two-column-layout) runevents-tickets > .re-tickets {
        flex-direction: column !important;
        padding: var(--w-md);
        gap: var(--w-md);
    }

    /* --- Sides: stack full-width, remove column padding --- */
    .main-container:not(.two-column-layout) .re-tickets > .side:first-of-type,
    .main-container:not(.two-column-layout) .re-tickets > .side:first-child {
        padding-right: 0;
    }

    .main-container:not(.two-column-layout) .re-tickets > .side:nth-of-type(2) {
        flex: none;
        width: 100%;
    }

    .main-container:not(.two-column-layout) .re-tickets .scroll-section {
        padding-right: 0;
    }

    /* --- Voucher row: stack input above button, both full-width --- */
    .main-container:not(.two-column-layout) .re-tickets .btn-container {
        flex-direction: column !important;
        align-items: stretch;
    }

    .main-container:not(.two-column-layout) .re-tickets .btn-container input {
        width: 100%;
        flex: none;
    }

    .main-container:not(.two-column-layout) .re-tickets .btn-container .btn,
    .main-container:not(.two-column-layout) .re-tickets .btn-container button {
        width: 100%;
        flex: none;
    }

    /* --- Typography: match mobile sizing --- */
    .main-container:not(.two-column-layout) .re-tickets h2 {
        font-size: var(--w-size-xl);
    }

    /* --- Ticket name badges: full width --- */
    .main-container:not(.two-column-layout) .re-tickets .price > .flex-space > h4:first-child {
        font-size: 1rem;
        padding: var(--w-xs) var(--w-sm);
    }

    /* --- Price/selector row: allow wrapping on narrow tickets --- */
    .main-container:not(.two-column-layout) .re-tickets .price > .flex-space > .flex-space {
        flex-wrap: wrap;
        gap: var(--w-sm);
    }

    /* --- Ticket rows: switch to CSS Grid to defeat Angular's flex overrides.
       Angular's runtime re-applies flex:1 on children after render, causing
       a 50/50 split. flex properties are IGNORED on grid items, so switching
       the parent to display:grid with a single 1fr column makes .price
       full-width regardless of what Angular does to flex properties. --- */
    .main-container:not(.two-column-layout) .re-tickets .scroll-section > .flex-space {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: var(--w-md);
    }

    /* The empty sibling div gets a grid row but has no content = 0 height */
    .main-container:not(.two-column-layout) .re-tickets .scroll-section > .flex-space > .price ~ div {
        display: none !important;
    }

    /* --- Checkout button: full width --- */
    .main-container:not(.two-column-layout) .re-tickets .btn.full-width,
    .main-container:not(.two-column-layout) .re-tickets button.full-width {
        width: 100%;
    }
}

/* --------------------------------------------------------------------------
   Override run.events Default Red (#ee255a)
   Maps any hardcoded brand color to the community's primary color.
   !important required 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(--w-primary) !important;
    background: var(--w-primary) !important;
    color: var(--w-primary-text) !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(--w-primary) !important;
    background: var(--w-primary) !important;
    color: var(--w-primary-text) !important;
}