/* PulseTV — dark cinematic theme on the TicketPulse brand system.
   DM Sans, primary #440099, WCAG 2.2 AA: visible focus everywhere, 4.5:1 text
   contrast over video via scrims, 24px minimum touch targets, reduced motion. */

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    /* Plum-family dark surfaces (design system §6.3) — replaced the app's private
       near-black set per the 28 Aug design review. That review supersedes an earlier
       decision here to keep #0D0716 literal for its violet cast: the cast was right,
       the value was not, and #140828 is the palette's own plum. It is the value this
       app already held as --tv-bg, so it is named once rather than written twice.

       The five that are exact palette colours are written as tokens — same pixels,
       but a change to Electric Violet or Carnival Orange now reaches here. The rest
       (surfaces, muted, danger) have no palette equivalent and stay literal. */
    --ptv-bg: var(--tv-bg);
    --ptv-surface: var(--tv-surface);
    --ptv-surface-2: var(--tv-surface-2);
    --ptv-text: #f4f1fa;
    --ptv-muted: #C9B8E4;
    --ptv-primary: var(--pulse-violet);
    --ptv-primary-strong: var(--tp-purple);
    --ptv-accent: var(--tp-accent-orange);   /* Carnival Orange — LIVE / urgent, never red. */
    --ptv-success: var(--tp-accent-teal);
    --ptv-danger: #ff6b6b;
    --ptv-focus: var(--tp-accent-gold);
    /* The app's type names, pointed at the shared scale rather than restating the
       family names, so --font-* stays the one place a face is chosen. */
    --ptv-font-body: var(--font-sans);
    --ptv-font-display: var(--font-media);
    --ptv-font-mono: var(--font-mono);
}

html, body { height: 100%; }

body {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--ptv-bg);
    color: var(--ptv-text);
    line-height: 1.55;
}

/* Focus is always visible and never obscured by chrome. */
:focus-visible {
    outline: 3px solid var(--ptv-focus);
    outline-offset: 2px;
    border-radius: 4px;
}

.ptv-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--ptv-accent);
    color: var(--pulse-ink-overlay);
    padding: 10px 16px;
    z-index: 100;
    font-weight: 700;
}

.ptv-skip:focus { left: 12px; top: 12px; }

.ptv-shell { min-height: 100vh; display: flex; flex-direction: column; }

/* The prototype header, value for value: sticky bar on --tv-bar over blur, hairline base. */
.ptv-header {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 26px;
    padding: 14px 40px;
    background: var(--tv-bar);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--tv-hairline);
}

.ptv-logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    /* A generous tap target around a small mark. */
    padding: 4px 2px;
}

.ptv-logo img {
    /* 38px, the prototype's own size for the lockup in the bar. */
    height: 38px;
    width: auto;
    display: block;
}

.ptv-logo:focus-visible {
    outline: 2px solid var(--ptv-accent);
    outline-offset: 3px;
    border-radius: 6px;
}

@media (max-width: 640px) {
    .ptv-logo img { height: 32px; }
}

/* Sign-in card lockup */
.ptv-auth__logo {
    display: block;
    width: 100%;
    max-width: 240px;
    height: auto;
    margin: 0 auto 22px;
}

.ptv-nav { display: flex; gap: 6px; }

.ptv-nav__link {
    color: var(--ptv-muted);
    text-decoration: none;
    padding: 10px 14px;
    min-height: 24px;
    border-radius: 8px;
    font-weight: 500;
}

.ptv-nav__link:hover { color: var(--ptv-text); background: var(--ptv-surface); }

.ptv-nav__link.active { color: var(--ptv-text); background: var(--ptv-surface-2); }

/* Rounded pills in the bar itself, following the prototype. The active one is filled rather than
   underlined, which is what makes the current section readable at a glance on a dark bar. */
.ptv-nav__pill {
    display: inline-flex; align-items: center;
    padding: 8px 16px; border-radius: 999px;
    color: var(--tv-text-dim); text-decoration: none;
    font-size: 14px; font-weight: 500; white-space: nowrap;
    transition: all 0.2s ease;
}

.ptv-nav__pill:hover { color: #fff; background: var(--tv-pill-hover); }
.ptv-nav__pill.active { color: #fff; background: var(--tv-pill-active); font-weight: 700; }

/* Styled as the prototype's search field so the bar keeps its proportions; it is a link into the
   search page, where the prototype puts the actual typing. */
.ptv-search {
    margin-left: auto;
    display: flex; align-items: center; gap: 9px;
    background: var(--tv-control-fill);
    border: 1px solid var(--tv-control-border);
    border-radius: 999px;
    padding: 9px 16px; width: 280px;
    color: var(--tv-text-faint);
    font: inherit; font-size: 13px; text-align: left;
    white-space: nowrap; overflow: hidden;
    text-decoration: none; cursor: pointer;
    transition: all 0.2s ease;
}

.ptv-search:hover, .ptv-search:focus-within { color: var(--tv-text-dim); border-color: var(--tv-control-border-hover); }

/* The live field inside the search pill: the pill carries the chrome, the input carries the text. */
.ptv-search__field {
    flex: 1; min-width: 0;
    background: none; border: 0; outline: none;
    color: var(--ptv-text);
    font: inherit; font-size: 13px;
}

.ptv-search__field::placeholder { color: var(--tv-text-faint); }

/* The basket — hands the shopper to the TicketPulse cart, where currency converts. */
.ptv-header__cart {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    background: none; border: 0; padding: 6px;
    color: var(--tv-text-dim);
    transition: color 0.2s ease;
}

.ptv-header__cart:hover { color: #fff; }

/* Currency picker — the cart's flag-code-name listing, on PulseTV's own chrome. */
.ptv-currency { position: relative; }

.ptv-currency__toggle {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--tv-control-fill);
    border: 1px solid var(--tv-control-border);
    border-radius: 999px; padding: 8px 12px;
    color: var(--ptv-text);
    font: inherit; font-size: 13px; font-weight: 700;
    cursor: pointer;
    transition: border-color .2s ease;
}

.ptv-currency__toggle:hover { border-color: var(--tv-hover-border); }

.ptv-currency__flag { width: 20px; height: 14px; object-fit: cover; border-radius: 3px; display: block; }

.ptv-currency__chevron { font-size: 10px; color: var(--ptv-muted); }

.ptv-currency__options {
    position: absolute; right: 0; top: calc(100% + 8px); z-index: 60;
    min-width: 250px;
    list-style: none; margin: 0; padding: 6px;
    background: var(--ptv-surface);
    border: 1px solid var(--tv-hairline);
    border-radius: 12px;
    box-shadow: 0 12px 40px var(--tv-tile-shadow);
}

.ptv-currency__option {
    display: flex; align-items: center; gap: 10px;
    width: 100%; padding: 9px 10px;
    background: none; border: 0; border-radius: 8px;
    color: var(--ptv-text);
    font: inherit; font-size: 13px;
    cursor: pointer; text-align: left;
}

.ptv-currency__option:hover, .ptv-currency__option--on { background: var(--ptv-surface-2); }

.ptv-currency__code { font-weight: 700; }

.ptv-currency__name { color: var(--ptv-muted); }

.ptv-search svg { flex-shrink: 0; }

.ptv-header__cluster { display: flex; align-items: center; gap: 14px; }

/* The prototype's signed-in mark: 34px circle on the violet→purple brand gradient. */
.ptv-avatar {
    width: 34px; height: 34px; border-radius: 50%;
    background: linear-gradient(135deg, var(--pulse-violet), var(--tp-purple));
    display: grid; place-items: center;
    font-size: 13px; font-weight: 700;
    color: #fff; text-decoration: none;
}

/* One content width across the product: 1200px (was 1080px here, 72rem on streaming pages). */
.ptv-main { flex: 1; width: 100%; max-width: 1200px; margin: 0 auto; padding: 32px 24px 64px; }

.ptv-footer {
    padding: 18px 28px;
    color: var(--ptv-muted);
    font-size: 13px;
    border-top: 1px solid rgba(183, 174, 208, 0.15);
}

/* Buttons — minimum 24×24 CSS pixel targets, generous padding. */
.ptv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
    padding: 10px 20px;
    border-radius: 10px;
    border: 1px solid transparent;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    color: var(--ptv-text);
    background: transparent;
}

.ptv-btn--primary { background: var(--ptv-primary-strong); }

.ptv-btn--primary:hover { background: #5600c2; }

.ptv-btn--outline { border-color: var(--ptv-muted); }

.ptv-btn--outline:hover { border-color: var(--ptv-text); }

.ptv-btn--ghost { color: var(--ptv-muted); }

.ptv-btn--ghost:hover { color: var(--ptv-text); }

.ptv-btn--wide { width: 100%; }

.ptv-btn--sm { min-height: 36px; padding: 6px 14px; font-size: 13.5px; }

.ptv-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* Account-page panels. Named apart from .ptv-card on purpose: .ptv-card is the catalogue's
   dark shelf tile (streaming.css, from the prototype), and the two used to share this name —
   which put this panel's surface, border and padding onto every shelf card. */
.ptv-panel {
    background: var(--ptv-surface);
    border: 1px solid rgba(183, 174, 208, 0.14);
    border-radius: 16px;
    padding: 24px;
}

.ptv-page h1, .ptv-watch__title { font-size: 28px; margin-bottom: 6px; }

.ptv-muted { color: var(--ptv-muted); }

.ptv-page > .ptv-muted { margin-bottom: 24px; }

.ptv-label { display: block; font-size: 13.5px; font-weight: 700; margin: 18px 0 6px; }

.ptv-input {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid rgba(183, 174, 208, 0.35);
    background: var(--ptv-surface-2);
    color: var(--ptv-text);
    font-family: inherit;
    font-size: 15px;
}

.ptv-input--code { text-align: center; letter-spacing: 10px; font-size: 24px; font-weight: 700; }

.ptv-notice {
    background: rgba(122, 63, 242, 0.18);
    border: 1px solid rgba(122, 63, 242, 0.5);
    border-radius: 10px;
    padding: 12px 14px;
    margin: 14px 0;
    font-size: 14px;
}

.ptv-notice--error { background: rgba(255, 107, 107, 0.14); border-color: var(--ptv-danger); }

.ptv-auth { display: flex; justify-content: center; padding-top: 6vh; }

.ptv-auth__card { width: 100%; max-width: 440px; }

.ptv-auth__card .ptv-btn { margin-top: 16px; }

/* Player */
.ptv-player {
    position: relative;
    margin-top: 18px;
    background: var(--tp-ink-true);
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 16 / 9;
}

.ptv-player__video { width: 100%; height: 100%; display: block; background: var(--tp-ink-true); }

/* Overlay bar sits on a scrim, not transparency alone: 4.5:1 text contrast held. */
.ptv-player__bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 40px 16px 12px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.55) 60%, transparent 100%);
    pointer-events: none;
}

.ptv-player__meta { color: var(--pulse-lavender); font-size: 13px; }

.ptv-player--holding, .ptv-player--denied {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ptv-surface);
}

.ptv-holding { max-width: 560px; padding: 32px; text-align: center; }

.ptv-holding h2 { font-size: 22px; margin-bottom: 10px; }

.ptv-holding p { color: var(--ptv-muted); }

.ptv-holding__actions { display: flex; gap: 12px; justify-content: center; margin-top: 22px; flex-wrap: wrap; }

.ptv-holding__sessions {
    list-style: none;
    margin: 18px 0 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: left;
}

.ptv-holding__sessions li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--ptv-surface-2);
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 14px;
}

/* Badges */
.ptv-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 700;
}

.ptv-badge--live { background: var(--ptv-accent); color: #fff; }

.ptv-badge--warn { background: rgba(255, 209, 102, 0.2); color: var(--ptv-accent); }

.ptv-badge--muted { background: rgba(183, 174, 208, 0.18); color: var(--ptv-muted); }

/* Entitlement / device lists */
.ptv-entitlements { list-style: none; display: flex; flex-direction: column; gap: 14px; }

.ptv-entitlement { display: flex; align-items: center; gap: 18px; justify-content: space-between; flex-wrap: wrap; }

.ptv-entitlement__title { font-size: 19px; margin: 8px 0 4px; }

/* Respect reduced motion; no animation is essential. */
@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}

@media (max-width: 640px) {
    .ptv-header { flex-wrap: wrap; gap: 12px; }
    .ptv-main { padding: 20px 14px 48px; }
}

/* Subscription page */
.ptv-page > .ptv-panel { margin-bottom: 16px; }

.ptv-panel--alert {
    border-color: rgba(224, 92, 68, 0.55);
    background: rgba(224, 92, 68, 0.12);
}

.ptv-plan {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.ptv-plan__price { margin-top: 6px; }

.ptv-list {
    list-style: none;
    display: grid;
    gap: 8px;
    padding: 0;
    margin: 0;
}

/* Reconnection overlay — Blazor toggles the state classes on the container. */
#components-reconnect-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    align-items: center;
    justify-content: center;
    background: rgba(6, 2, 16, 0.82);
    backdrop-filter: blur(2px);
}

#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: flex;
}

.ptv-reconnect__panel {
    background: var(--ptv-surface);
    border: 1px solid rgba(183, 174, 208, 0.18);
    border-radius: 16px;
    padding: 28px 32px;
    max-width: 420px;
    text-align: center;
}

.ptv-reconnect__panel h2 { font-size: 20px; margin-bottom: 8px; }
.ptv-reconnect__panel p { color: var(--ptv-muted); margin-bottom: 18px; }
.ptv-reconnect__panel .ptv-btn { margin: 0 4px; }

/* Only the state Blazor has set is shown. */
.ptv-reconnect__retrying,
.ptv-reconnect__failed,
.ptv-reconnect__rejected { display: none; }

#components-reconnect-modal.components-reconnect-show .ptv-reconnect__retrying,
#components-reconnect-modal.components-reconnect-failed .ptv-reconnect__failed,
#components-reconnect-modal.components-reconnect-rejected .ptv-reconnect__rejected { display: block; }

.ptv-reconnect__spinner {
    width: 34px;
    height: 34px;
    margin: 0 auto 14px;
    border: 3px solid rgba(183, 174, 208, 0.25);
    border-top-color: var(--ptv-accent, #7c3aed);
    border-radius: 50%;
    animation: ptv-spin 0.9s linear infinite;
}

@keyframes ptv-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .ptv-reconnect__spinner { animation-duration: 3s; }
}