/**
 * NW Event Tickets — site-side component styles
 *
 * Spacing is controlled entirely by component-owned CSS custom properties.
 * All defaults are defined here and work without any template configuration.
 *
 * --nwtickets-top-offset is set automatically by a small inline <script>
 * included in every public view template.  nwMeasure() scans #sp-header,
 * .nw-site-banner, and fixed/sticky elements on DOMContentLoaded, load, and
 * resize, then adds --nwtickets-top-space and writes the combined total as a
 * single px value.  Avoids calc(var+var) which the Raees CSS bundler breaks
 * by stripping the required whitespace around + in calc().  Fallback: 3rem.
 *
 * Optional template override (any property):
 *
 *   .com-nwtickets-view {
 *       --nwtickets-top-space:    4rem;
 *       --nwtickets-bottom-space: 6rem;
 *       --nwtickets-max-width:    1140px;
 *       --nwtickets-inner-px:     2rem;
 *   }
 */

/* -------------------------------------------------------------------------
 * Outer wrapper — spacing only, no width constraints.
 * Every public view uses this class as the outermost element.
 * ---------------------------------------------------------------------- */
.com-nwtickets-view {
    /* Component-owned spacing defaults */
    --nwtickets-top-space:    3rem;
    --nwtickets-bottom-space: 5rem;
    --nwtickets-max-width:    960px;
    --nwtickets-inner-px:     1.5rem;
    --nwtickets-hero-gap:     2rem;

    padding-top:    var(--nwtickets-top-offset, 3rem);
    padding-bottom: var(--nwtickets-bottom-space);
}

/* -------------------------------------------------------------------------
 * Inner wrapper — width + centering, component-owned.
 * Placed inside .com-nwtickets-view in every template.
 * ---------------------------------------------------------------------- */
.com-nwtickets-inner {
    max-width:      var(--nwtickets-max-width);
    margin-inline:  auto;
    padding-inline: var(--nwtickets-inner-px);
}

/* -------------------------------------------------------------------------
 * Hero image
 * ---------------------------------------------------------------------- */
.com-nwtickets-hero {
    margin-bottom: var(--nwtickets-hero-gap);
    overflow: hidden;
    border-radius: 4px;
}

.com-nwtickets-hero a {
    display: block;
    line-height: 0;
}

.com-nwtickets-hero img {
    width: 100%;
    height: auto;
    display: block;
    transition: opacity 0.2s ease;
}

.com-nwtickets-hero a:hover img,
.com-nwtickets-hero a:focus img {
    opacity: 0.92;
}

/* =========================================================================
 * Confirmation / Thank-you view
 * ========================================================================= */

/* Remove view padding-top so hero fills flush from top of content area */
.com-nwtickets-thankyou {
    padding-top: 0;
    padding-bottom: 80px;
}

/* Hero */
.nwt-confirmation-hero {
    position: relative;
    text-align: center;
    padding-top: calc(var(--nwtickets-top-offset, 80px) + 72px);
    padding-bottom: 72px;
    padding-inline: var(--goa-pad, 4vw);
    background: var(--goa-dark, #141414);
    overflow: hidden;
}

.nwt-confirmation-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 60% at 50% 40%, rgba(244, 207, 50, 0.07) 0%, transparent 70%);
    pointer-events: none;
}

/* Decorative bolt pattern (top-right) */
.nwt-confirmation-hero::after {
    content: "⚡";
    position: absolute;
    top: 18%;
    right: 8%;
    font-size: 3.5rem;
    opacity: 0.07;
    pointer-events: none;
    line-height: 1;
}

.nwt-confirmation-hero--failed {
    background: #1a0d0d;
}

.nwt-confirmation-hero--failed::before {
    background: radial-gradient(ellipse 80% 60% at 50% 40%, rgba(224, 90, 90, 0.07) 0%, transparent 70%);
}

.nwt-confirmation-hero__inner {
    position: relative;
    z-index: 1;
    max-width: 780px;
    margin-inline: auto;
}

.nwt-confirmation-icon {
    font-size: 3rem;
    line-height: 1;
    margin-bottom: 20px;
}

.nwt-confirmation-title {
    font-family: var(--goa-font-brush, cursive);
    font-size: clamp(2.8rem, 6vw, 5rem);
    line-height: 0.92;
    text-transform: uppercase;
    color: var(--goa-paper, #f1ead9);
    margin: 0 0 24px;
}

.nwt-confirmation-hero--failed .nwt-confirmation-title {
    color: #e05a5a;
}

.nwt-confirmation-sub {
    font-size: 1.1rem;
    color: var(--goa-muted, #d5c7aa);
    max-width: 540px;
    margin-inline: auto;
    line-height: 1.6;
}

/* Info card */
.nwt-confirmation-card {
    max-width: 560px;
    margin: 48px auto 0;
    padding: 28px 32px;
    background: var(--goa-dark, #141414);
    border: 2px solid var(--goa-yellow, #f4cf32);
    border-radius: 6px;
    box-shadow: 0 0 28px rgba(244, 207, 50, 0.10);
}

.nwt-confirmation-card__label {
    font-family: var(--goa-font-poster, sans-serif);
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--goa-yellow, #f4cf32);
    margin-bottom: 10px;
}

.nwt-confirmation-card__order {
    font-family: var(--goa-font-poster, sans-serif);
    font-size: 2.2rem;
    color: var(--goa-paper, #f1ead9);
    line-height: 1;
    margin-bottom: 14px;
}

.nwt-confirmation-card__email {
    font-size: 0.95rem;
    color: var(--goa-muted, #d5c7aa);
    margin: 0;
    line-height: 1.5;
}

/* Actions / Button */
.nwt-confirmation-actions {
    text-align: center;
    margin-top: 32px;
}

.nwt-confirmation-btn {
    display: inline-block;
    font-family: var(--goa-font-poster, sans-serif);
    font-size: 1rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--goa-dark, #141414);
    background: var(--goa-yellow, #f4cf32);
    padding: 14px 40px;
    border: 2px solid var(--goa-yellow, #f4cf32);
    border-radius: 4px;
    transition: background 0.18s ease, color 0.18s ease, transform 0.12s ease;
    cursor: pointer;
}

.nwt-confirmation-btn:hover,
.nwt-confirmation-btn:focus {
    background: transparent;
    color: var(--goa-yellow, #f4cf32);
    transform: translateY(-2px);
    text-decoration: none;
}

.nwt-confirmation-btn--outline {
    background: transparent;
    color: var(--goa-paper, #f1ead9);
    border-color: var(--goa-paper, #f1ead9);
}

.nwt-confirmation-btn--outline:hover,
.nwt-confirmation-btn--outline:focus {
    background: var(--goa-paper, #f1ead9);
    color: var(--goa-dark, #141414);
}

@media (max-width: 600px) {
    .nwt-confirmation-hero {
        padding-top: calc(var(--nwtickets-top-offset, 64px) + 48px);
        padding-bottom: 48px;
    }

    .nwt-confirmation-hero::after {
        display: none;
    }

    .nwt-confirmation-card {
        padding: 20px;
    }

    .nwt-confirmation-btn {
        display: block;
        text-align: center;
    }
}