/**
 * Seasonal Video Wizard - Mobile-First App-Like Modal
 *
 * Full-screen black modal with horizontal slide transitions.
 * Designed for 375px mobile, enhanced for larger screens.
 */

/* ==========================================================================
   CSS Custom Properties
   ========================================================================== */
:root {
    /* Black theme (matching LeprechaunTheme modal) */
    --sv-bg: #000000;
    --sv-bg-overlay: rgba(0, 0, 0, 0.95);
    --sv-bg-subtle: rgba(255, 255, 255, 0.05);
    --sv-bg-hover: rgba(255, 255, 255, 0.1);
    --sv-border: rgba(255, 255, 255, 0.15);
    --sv-border-light: rgba(255, 255, 255, 0.08);

    /* Text */
    --sv-text: #ffffff;
    --sv-text-muted: rgba(255, 255, 255, 0.6);
    --sv-text-subtle: rgba(255, 255, 255, 0.4);

    /* Accents */
    --sv-primary: #0df259;
    --sv-primary-dark: #0bc248;
    --sv-primary-glow: rgba(13, 242, 89, 0.3);
    --sv-accent: #FFD700;
    --sv-accent-dark: #e6c200;
    --sv-accent-glow: rgba(255, 215, 0, 0.3);
    --sv-error: #ff4757;
    --sv-success: #0df259;

    /* Layout */
    --sv-header-height: 56px;
    --sv-footer-height: 88px;
    --sv-footer-padding: 16px;
    --sv-content-padding: 24px;
    --sv-safe-area-top: env(safe-area-inset-top, 0px);
    --sv-safe-area-bottom: env(safe-area-inset-bottom, 0px);

    /* Sizing */
    --sv-input-height: 52px;
    --sv-button-height: 52px;
    --sv-radius: 12px;
    --sv-radius-sm: 8px;
    --sv-radius-full: 9999px;

    /* Animation */
    --sv-transition-fast: 0.15s ease;
    --sv-transition: 0.3s ease;
    --sv-transition-slide: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   Modal Overlay
   ========================================================================== */
.sv-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Above everything the themes fix in place. SantaTheme's header is 10001
       and its own overlay 10100, so 2001 left the wizard's top -- title, back
       and close -- hidden under the header on phones. */
    z-index: 100000;
    background: var(--sv-bg);
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--sv-transition), visibility var(--sv-transition);
}

.sv-modal.is-visible {
    opacity: 1;
    visibility: visible;
}

/* ==========================================================================
   Modal Header
   ========================================================================== */
.sv-modal__header {
    position: relative;
    height: var(--sv-header-height);
    padding-top: var(--sv-safe-area-top);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 16px;
    padding-right: 16px;
    border-bottom: 1px solid var(--sv-border-light);
    flex-shrink: 0;
}

.sv-modal__back,
.sv-modal__close {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--sv-text-muted);
    cursor: pointer;
    border-radius: var(--sv-radius-sm);
    transition: color var(--sv-transition-fast), background var(--sv-transition-fast);
}

.sv-modal__back:hover,
.sv-modal__close:hover {
    color: var(--sv-text);
    background: var(--sv-bg-hover);
}

.sv-modal__back svg,
.sv-modal__close svg {
    width: 24px;
    height: 24px;
}

.sv-modal__back.is-hidden {
    visibility: hidden;
    pointer-events: none;
}

/* Progress indicator */
.sv-modal__progress-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
}

.sv-modal__progress {
    width: 100%;
    max-width: 200px;
    height: 4px;
    background: var(--sv-border);
    border-radius: var(--sv-radius-full);
    overflow: hidden;
}

.sv-modal__progress-bar {
    height: 100%;
    background: var(--sv-primary);
    border-radius: var(--sv-radius-full);
    transition: width var(--sv-transition-slide);
}

/* Step indicator text */
.sv-modal__step-text {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 13px;
    color: var(--sv-text-subtle);
    white-space: nowrap;
}

/* ==========================================================================
   Modal Body (Sliding Steps Container)
   ========================================================================== */
.sv-modal__body {
    flex: 1;
    overflow: hidden;
    position: relative;
    width: 100%;
}

/* ==========================================================================
   Intro Overlay (Step 0)
   ========================================================================== */
.sv-intro {
    position: absolute;
    inset: 0;
    z-index: 10;
    background: var(--sv-bg, #fff);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    overflow: hidden;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}

.sv-intro.is-dismissed {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.sv-intro__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-height: 100%;
    width: 100%;
    gap: 8px;
    overflow: hidden;
}

.sv-intro__video-wrap {
    width: 100%;
    max-height: calc(100vh - 250px);
    border-radius: 16px;
    overflow: hidden;
    background: #000;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    position: relative;
}

.sv-intro__mute-toggle {
    position: absolute;
    bottom: 20%;
    left: 50%;
    transform: translateX(-50%);
    padding: 8px 24px;
    border-radius: var(--sv-radius-full);
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    z-index: 2;
    transition: background var(--sv-transition-fast);
}

.sv-intro__mute-toggle:hover {
    background: rgba(0, 0, 0, 0.75);
}


.sv-intro__video-wrap iframe,
.sv-intro__video-wrap video {
    width: 100%;
    height: auto;
    max-height: calc(100vh - 300px);
    object-fit: contain;
    display: block;
    border: 0;
    border-radius: 16px;
}

.sv-intro__heading {
    font-size: 1.5rem;
    font-weight: 700;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    color: var(--sv-text, #1a1a1a);
    margin: 0;
    line-height: 1.2;
    flex-shrink: 0;
}

.sv-intro__description {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.65);
    margin: 0;
    max-width: 360px;
    line-height: 1.5;
    flex-shrink: 0;
}

.sv-intro__cta {
    animation: sv-intro-pulse 2s ease-in-out infinite;
}

@keyframes sv-intro-pulse {
    0%, 100% { box-shadow: 0 0 0 0 var(--sv-primary-glow, rgba(13, 242, 89, 0.3)); }
    50% { box-shadow: 0 0 0 10px transparent; }
}

/* Split intro: the demo video beside its copy and price. On a phone the
   copy keeps its natural height and the video takes whatever is left above
   the footer's CTA, its width following from its 9:16 shape, so the whole
   thing fits one screen.
   Only below a usable size does it stop shrinking and let the screen scroll.
   Side by side in a card on a desktop. */
.sv-intro--split {
    align-items: stretch;
    padding: 16px 20px;
    overflow-y: auto;
}

.sv-intro--split .sv-intro__content {
    height: 100%;
    margin: 0 auto;
    max-width: 420px;
    max-height: none;
    overflow: visible;
    align-items: stretch;
    text-align: left;
    gap: 14px;
}

.sv-intro__media {
    flex: 1 1 0;
    min-height: 180px;
    display: flex;
    justify-content: center;
}

.sv-intro--split .sv-intro__video-wrap {
    width: auto;
    height: 100%;
    aspect-ratio: 9 / 16;
    max-width: 100%;
    max-height: none;
}

.sv-intro--split .sv-intro__details {
    flex: 0 0 auto;
}

/* On a desktop the intro is a card on the overlay rather than a full panel,
   so the first step behind it would show through. */
.sv-intro--split:not(.is-dismissed) ~ .sv-steps-wrapper {
    visibility: hidden;
}

.sv-intro--split .sv-intro__video-wrap video {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
}

.sv-intro__play {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    border: 0;
    background: rgba(0, 0, 0, 0.15);
    color: #fff;
    font: inherit;
    cursor: pointer;
}

.sv-intro__play[hidden] {
    display: none;
}

.sv-intro__play:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -4px;
}

.sv-intro__play-icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--sv-primary);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
    transition: transform var(--sv-transition-fast);
}

.sv-intro__play:hover .sv-intro__play-icon {
    transform: scale(1.06);
}

.sv-intro__play-length {
    position: absolute;
    right: 8px;
    bottom: 8px;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.6);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
}

.sv-intro__details {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.sv-intro__eyebrow {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sv-primary);
}

.sv-intro--split .sv-intro__heading {
    font-size: clamp(1.4rem, 4.5vw, 1.9rem);
}

.sv-intro--split .sv-intro__description {
    max-width: none;
    color: var(--sv-text-muted);
}

.sv-intro__price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    margin: 4px 0 0;
}

.sv-intro__price-amount {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--sv-text);
}

.sv-intro__price-note {
    font-size: 0.9rem;
    color: var(--sv-text-muted);
}

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

.sv-intro__facts li {
    position: relative;
    padding-left: 24px;
    font-size: 0.92rem;
    line-height: 1.45;
    color: var(--sv-text);
}

.sv-intro__facts li::before {
    content: '';
    position: absolute;
    left: 5px;
    top: 0.2em;
    width: 6px;
    height: 11px;
    border: solid var(--sv-primary);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Short phones: the paragraph goes before the video gets too small to read.
   The facts and price say what matters. */
@media (max-width: 767px) and (max-height: 740px) {
    .sv-intro--split .sv-intro__description {
        display: none;
    }
}

@media (min-width: 768px) {
    .sv-intro--split {
        align-items: center;
        padding: 0;
        background: transparent;
    }

    .sv-intro--split .sv-intro__content {
        height: auto;
        margin: auto;
        flex-direction: row;
        align-items: center;
        gap: 40px;
        max-width: 860px;
        max-height: 100%;
        overflow-y: auto;
        padding: 32px;
        border: 1px solid var(--sv-border);
        border-radius: var(--sv-radius);
        background: var(--sv-bg);
    }

    .sv-intro__media {
        flex: 0 0 auto;
        min-height: 0;
    }

    .sv-intro--split .sv-intro__video-wrap {
        height: min(62vh, 520px);
    }

    .sv-intro--split .sv-intro__details {
        flex: 1;
    }
}

/* Hide progress bar and footer when intro is showing */
.sv-modal.has-intro:not(.intro-dismissed) .sv-modal__progress-wrap {
    opacity: 0;
    transition: opacity 0.2s ease;
}

.sv-modal.has-intro.intro-dismissed .sv-modal__progress-wrap {
    opacity: 1;
    transition: opacity 0.3s ease 0.2s;
}

.sv-steps-wrapper {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* Default: 4 steps (face-upload, preset-character) */
.sv-steps {
    display: flex;
    width: 400%;
    height: 100%;
    transition: transform var(--sv-transition-slide);
}

.sv-steps[data-step="1"] { transform: translateX(0); }
.sv-steps[data-step="2"] { transform: translateX(-25%); }
.sv-steps[data-step="3"] { transform: translateX(-50%); }
.sv-steps[data-step="4"] { transform: translateX(-75%); }

/* Individual Step - Default 4-step layout */
.sv-step {
    width: 25%; /* 100% / 4 steps */
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* ==========================================================================
   Slideshow Wizard: 5 Steps Layout
   ========================================================================== */
.sv-wizard--slideshow .sv-steps {
    width: 500%; /* 100% * 5 steps */
}

.sv-wizard--slideshow .sv-step {
    width: 20%; /* 100% / 5 steps */
}

.sv-wizard--slideshow .sv-steps[data-step="1"] { transform: translateX(0); }
.sv-wizard--slideshow .sv-steps[data-step="2"] { transform: translateX(-20%); }
.sv-wizard--slideshow .sv-steps[data-step="3"] { transform: translateX(-40%); }
.sv-wizard--slideshow .sv-steps[data-step="4"] { transform: translateX(-60%); }
.sv-wizard--slideshow .sv-steps[data-step="5"] { transform: translateX(-80%); }

/* ==========================================================================
   Slideshow Wizard: Light Theme
   ========================================================================== */
.sv-wizard--slideshow {
    --sv-bg: #fafafa;
    --sv-bg-overlay: rgba(250, 250, 250, 0.98);
    --sv-bg-subtle: rgba(0, 0, 0, 0.03);
    --sv-bg-hover: rgba(0, 0, 0, 0.06);
    --sv-border: rgba(0, 0, 0, 0.12);
    --sv-border-light: rgba(0, 0, 0, 0.06);

    /* Text */
    --sv-text: #1a1a1a;
    --sv-text-muted: rgba(0, 0, 0, 0.6);
    --sv-text-subtle: rgba(0, 0, 0, 0.4);

    /* Birthday theme colors */
    --sv-primary: #9333ea;
    --sv-primary-dark: #7e22ce;
    --sv-primary-glow: rgba(147, 51, 234, 0.2);
    --sv-accent: #ec4899;
    --sv-accent-dark: #db2777;
    --sv-accent-glow: rgba(236, 72, 153, 0.2);
}

.sv-step__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--sv-content-padding);
    text-align: center;
}

/* ==========================================================================
   Modal Footer
   ========================================================================== */
.sv-modal__footer {
    padding: var(--sv-footer-padding);
    padding-bottom: calc(var(--sv-footer-padding) + var(--sv-safe-area-bottom));
    border-top: 1px solid var(--sv-border-light);
    flex-shrink: 0;
}

.sv-modal__footer-buttons {
    display: flex;
    gap: 12px;
}

.sv-modal__footer-buttons.is-single {
    justify-content: center;
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.sv-btn {
    height: var(--sv-button-height);
    padding: 0 24px;
    font-size: 16px;
    font-weight: 600;
    border-radius: var(--sv-radius);
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all var(--sv-transition-fast);
    font-family: inherit;
    white-space: nowrap;
}

.sv-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Primary button (green) */
.sv-btn--primary {
    flex: 1;
    background: var(--sv-primary);
    color: #000;
}

.sv-btn--primary:not(:disabled):hover {
    background: var(--sv-primary-dark);
    box-shadow: 0 0 20px var(--sv-primary-glow);
}

/* Checkout button (gold) */
.sv-btn--checkout {
    flex: 1;
    background: var(--sv-accent);
    color: #000;
}

.sv-btn--checkout:not(:disabled):hover {
    background: var(--sv-accent-dark);
    box-shadow: 0 0 20px var(--sv-accent-glow);
}

/* Secondary button (outline) */
.sv-btn--secondary {
    flex: 1;
    background: transparent;
    color: var(--sv-text);
    border: 1px solid var(--sv-border);
}

.sv-btn--secondary:not(:disabled):hover {
    background: var(--sv-bg-hover);
    border-color: var(--sv-text-muted);
}

/* Icon button */
.sv-btn--icon {
    flex: 1;
    background: var(--sv-bg-subtle);
    color: var(--sv-text);
    border: 1px solid var(--sv-border);
}

.sv-btn--icon:not(:disabled):hover {
    background: var(--sv-bg-hover);
    border-color: var(--sv-primary);
    color: var(--sv-primary);
}

.sv-btn--icon svg {
    width: 20px;
    height: 20px;
}

/* ==========================================================================
   Step 1: Photo Upload
   ========================================================================== */
.sv-photo-target {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: 3px dashed var(--sv-border);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-bottom: 24px;
    transition: border-color var(--sv-transition);
    overflow: hidden;
    background: var(--sv-bg-subtle);
}

.sv-photo-target.has-photo {
    border-style: solid;
    border-color: var(--sv-primary);
}

.sv-photo-target.is-detecting {
    border-color: var(--sv-accent);
}

.sv-photo-target.is-invalid {
    border-color: var(--sv-error);
}

.sv-photo-target__placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--sv-text-subtle);
}

.sv-photo-target__placeholder svg {
    width: 48px;
    height: 48px;
    opacity: 0.5;
}

.sv-photo-target__placeholder span {
    font-size: 14px;
}

.sv-photo-target__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
}

.sv-photo-target.has-photo .sv-photo-target__placeholder {
    display: none;
}

.sv-photo-target.has-photo .sv-photo-target__image {
    display: block;
}

/* Camera video preview */
.sv-camera-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
}

.sv-camera-container.is-active {
    display: block;
}

.sv-camera-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scaleX(-1); /* Mirror for selfie */
}

.sv-camera-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    transform: scaleX(-1);
}

/* Face detection overlay */
.sv-face-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60%;
    height: 80%;
    transform: translate(-50%, -50%);
    border: 2px solid var(--sv-text-subtle);
    border-radius: 50%;
    pointer-events: none;
    opacity: 0.3;
}

.sv-photo-target.has-photo .sv-face-overlay,
.sv-camera-container.is-active ~ .sv-face-overlay {
    display: none;
}

/* Status message */
.sv-photo-status {
    font-size: 15px;
    color: var(--sv-text-muted);
    margin-bottom: 8px;
    min-height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.sv-photo-status.is-detecting {
    color: var(--sv-accent);
}

.sv-photo-status.is-success {
    color: var(--sv-success);
}

.sv-photo-status.is-error {
    color: var(--sv-error);
}

.sv-photo-hint {
    font-size: 13px;
    color: var(--sv-text-subtle);
}

/* Hidden file input */
.sv-file-input {
    display: none;
}

/* Change photo link */
.sv-change-photo {
    margin-top: 16px;
    font-size: 14px;
    color: var(--sv-text-muted);
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: underline;
    display: none;
}

.sv-photo-target.has-photo ~ .sv-change-photo {
    display: block;
}

.sv-change-photo:hover {
    color: var(--sv-text);
}

/* ==========================================================================
   Animated Placeholders
   ========================================================================== */

/* Input wrapper for counter positioning */
.sv-input-wrapper {
    position: relative;
}

/* Animated placeholder overlay */
.sv-animated-placeholder {
    position: absolute;
    top: 50%;
    left: 1rem;
    transform: translateY(-50%);
    color: var(--sv-text-muted);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100% - 2rem);
    font-size: 16px;
}

.sv-animated-placeholder.is-visible {
    opacity: 1;
}

/* Hide native placeholder when animating */
.sv-form-input.has-animated-placeholder::placeholder {
    opacity: 0;
}

/* Character counter */
.sv-char-counter {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.75rem;
    color: var(--sv-text-muted);
    pointer-events: none;
    transition: color 0.2s;
}

.sv-char-counter.is-warning {
    color: var(--sv-warning, #f59e0b);
}

.sv-char-counter.is-limit {
    color: var(--sv-error, #ef4444);
}

/* ==========================================================================
   Step 2: Personalize
   ========================================================================== */
.sv-form {
    width: 100%;
    max-width: 320px;
}

.sv-form-group {
    margin-bottom: 20px;
    text-align: left;
}

.sv-form-label {
    display: block;
    font-size: 15px;
    color: var(--sv-text);
    margin-bottom: 8px;
    font-weight: 500;
}

.sv-form-label .optional {
    color: var(--sv-text-subtle);
    font-weight: 400;
}

.sv-form-input {
    width: 100%;
    height: var(--sv-input-height);
    padding: 0 16px;
    font-size: 16px;
    font-family: inherit;
    background: var(--sv-bg-subtle);
    border: 1px solid var(--sv-border);
    border-radius: var(--sv-radius);
    color: var(--sv-text);
    transition: border-color var(--sv-transition-fast), box-shadow var(--sv-transition-fast);
    box-sizing: border-box;
}

.sv-form-input::placeholder {
    color: var(--sv-text-subtle);
}

.sv-form-input:focus {
    outline: none;
    border-color: var(--sv-primary);
    box-shadow: 0 0 0 3px var(--sv-primary-glow);
}

.sv-form-input.is-invalid {
    border-color: var(--sv-error);
}

/* ==========================================================================
   Step 3: Preview
   ========================================================================== */
.sv-preview {
    width: 100%;
    max-width: 280px;
}

.sv-preview__title {
    font-size: 22px;
    font-weight: 600;
    color: var(--sv-text);
    margin-bottom: 24px;
}

.sv-preview__photo {
    width: 140px;
    height: 140px;
    border-radius: var(--sv-radius);
    object-fit: cover;
    margin-bottom: 24px;
    border: 2px solid var(--sv-border);
}

.sv-preview__details {
    margin-bottom: 24px;
}

.sv-preview__row {
    font-size: 15px;
    color: var(--sv-text-muted);
    margin-bottom: 8px;
}

.sv-preview__row strong {
    color: var(--sv-text);
}

.sv-preview__row .value {
    color: var(--sv-primary);
}

.sv-preview__price {
    font-size: 28px;
    font-weight: 700;
    color: var(--sv-text);
    padding: 16px 0;
    border-top: 1px solid var(--sv-border-light);
}

/* ==========================================================================
   Step 4: Processing
   ========================================================================== */
.sv-processing {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
}

.sv-spinner {
    width: 48px;
    height: 48px;
    border: 3px solid var(--sv-border);
    border-top-color: var(--sv-primary);
    border-radius: 50%;
    animation: sv-spin 0.8s linear infinite;
}

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

.sv-processing__text {
    font-size: 16px;
    color: var(--sv-text);
}

.sv-processing__subtext {
    font-size: 14px;
    color: var(--sv-text-subtle);
}

/* ==========================================================================
   Desktop Enhancement (768px+)
   ========================================================================== */
@media (min-width: 768px) {
    .sv-modal {
        padding: 40px;
        background: var(--sv-bg-overlay);
    }

    .sv-modal__header {
        max-width: 480px;
        margin: 0 auto;
        border: none;
        background: transparent;
    }

    .sv-modal__body {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 1;
        overflow: hidden;
    }

    /* Container that clips the sliding steps */
    .sv-steps-wrapper {
        max-width: 480px;
        width: 100%;
        overflow: hidden;
        border-radius: var(--sv-radius);
        background: var(--sv-bg);
        border: 1px solid var(--sv-border);
    }

    .sv-steps {
        max-height: 500px;
    }

    .sv-step__content {
        padding: 40px;
    }

    .sv-modal__footer {
        max-width: 480px;
        margin: 0 auto;
        border: none;
        padding-top: 16px;
        background: transparent;
    }

    .sv-photo-target {
        width: 220px;
        height: 220px;
    }

    .sv-form {
        max-width: 360px;
    }
}

/* ==========================================================================
   Animations
   ========================================================================== */

/* Modal fade in */
.sv-modal.is-visible {
    animation: sv-modal-in 0.3s ease forwards;
}

@keyframes sv-modal-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Spinner pulse for detecting state */
.sv-photo-status.is-detecting::before {
    content: '';
    width: 8px;
    height: 8px;
    background: var(--sv-accent);
    border-radius: 50%;
    animation: sv-pulse 1s ease infinite;
}

@keyframes sv-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.8); }
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */
.sv-hidden {
    display: none !important;
}

.sv-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ==========================================================================
   Slideshow Wizard Components
   ========================================================================== */

/* Name Selector Dropdown */
.sv-name-selector {
    position: relative;
    width: 100%;
}

.sv-name-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 200px;
    overflow-y: auto;
    background: var(--sv-bg);
    border: 1px solid var(--sv-border);
    border-radius: var(--sv-radius-sm);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 100;
    margin-top: 4px;
}

.sv-name-option {
    display: block;
    width: 100%;
    padding: 12px 16px;
    text-align: left;
    background: none;
    border: none;
    color: var(--sv-text);
    cursor: pointer;
    transition: background var(--sv-transition-fast);
}

.sv-name-option:hover {
    background: var(--sv-bg-hover);
}

.sv-name-dropdown__empty {
    padding: 16px;
    text-align: center;
    color: var(--sv-text-muted);
}

/* Genre Grid */
.sv-genre-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-top: 8px;
}

.sv-genre-card {
    padding: 10px 16px;
    background: var(--sv-bg-subtle);
    border: 1px solid var(--sv-border);
    border-radius: var(--sv-radius-full);
    color: var(--sv-text);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--sv-transition-fast);
}

.sv-genre-card:hover {
    background: var(--sv-bg-hover);
    border-color: var(--sv-primary);
}

.sv-genre-card.is-selected {
    background: var(--sv-primary);
    border-color: var(--sv-primary);
    color: #fff;
}

.sv-wizard--slideshow .sv-genre-card.is-selected {
    color: #fff;
}

/* Photo Grid */
.sv-photos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    max-width: 320px;
    margin: 0 auto;
}

.sv-photo-slot {
    aspect-ratio: 1;
    border-radius: var(--sv-radius-sm);
    border: 2px dashed var(--sv-border);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--sv-transition-fast);
    overflow: hidden;
    position: relative;
    background: var(--sv-bg-subtle);
}

.sv-photo-slot:hover {
    border-color: var(--sv-primary);
    background: var(--sv-bg-hover);
}

.sv-photo-slot svg {
    width: 24px;
    height: 24px;
    color: var(--sv-text-muted);
}

.sv-photo-slot.has-photo {
    border-style: solid;
    border-color: var(--sv-primary);
}

.sv-photo-slot.has-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sv-photo-slot__remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 24px;
    height: 24px;
    background: rgba(0, 0, 0, 0.7);
    border: none;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--sv-transition-fast);
}

.sv-photo-slot:hover .sv-photo-slot__remove {
    opacity: 1;
}

.sv-photo-slot__remove svg {
    width: 14px;
    height: 14px;
    color: #fff;
}

/* Photo number badge */
.sv-photo-slot__number {
    position: absolute;
    bottom: 4px;
    left: 4px;
    width: 20px;
    height: 20px;
    background: var(--sv-primary);
    border-radius: 50%;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Drag and drop states */
.sv-photo-slot.has-photo {
    cursor: grab;
}

.sv-photo-slot.has-photo:active {
    cursor: grabbing;
}

.sv-photo-slot.is-dragging {
    opacity: 0.5;
    transform: scale(0.95);
}

.sv-photo-slot.is-drag-over {
    border-color: var(--sv-accent);
    background: var(--sv-accent-glow);
    transform: scale(1.05);
}

.sv-photo-count {
    margin-top: 12px;
    color: var(--sv-text-muted);
    font-size: 14px;
}

.sv-photos-input {
    display: none;
}

/* Preview Photos Grid */
.sv-preview__photos {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.sv-preview__thumb {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: var(--sv-radius-sm);
}

/* Character counter */
.sv-char-counter {
    display: block;
    text-align: right;
    font-size: 12px;
    color: var(--sv-text-muted);
    margin-top: 4px;
}

.sv-char-counter.is-warning {
    color: var(--sv-accent);
}

.sv-char-counter.is-limit {
    color: var(--sv-error);
}

/* Santa shares the Leprechaun controls and dark surfaces, with a red accent. */
.sv-santa-wizard .sv-step__content { max-width: 640px; margin-inline: auto; }
.sv-santa-wizard fieldset { border: 1px solid var(--sv-border); border-radius: var(--sv-radius); padding: 24px; margin: 24px 0; background: var(--sv-bg-subtle); min-width: 0; }
.sv-santa-wizard legend { color: var(--sv-text); font-size: 1.15rem; font-weight: 700; padding: 0 8px; }
.sv-santa-wizard h2 { font-family: inherit; font-size: clamp(1.7rem, 5vw, 2.3rem); line-height: 1.15; color: var(--sv-text); }
.sv-santa-wizard audio { width: 100%; margin-block: 8px 20px; }
/* Previews play on selection, as in the app — there is no transport to show. */
.sv-santa-wizard audio:not([controls]) { display: none; }
.sv-santa-tier-note, .sv-santa-delivery { font-size: .9rem; line-height: 1.6; color: var(--sv-text-muted); }
.sv-santa-review { display: grid; grid-template-columns: minmax(90px, 1fr) minmax(0, 2fr); gap: 12px 20px; padding: 24px; background: var(--sv-bg-subtle); border: 1px solid var(--sv-border); border-radius: var(--sv-radius); text-align: left; }
.sv-santa-review dt { color: var(--sv-text); font-weight: 600; }
.sv-santa-review dd { margin: 0; overflow-wrap: anywhere; }
.sv-santa-wizard [hidden] { display: none !important; }
@media (max-width: 480px) { .sv-santa-wizard fieldset { padding: 16px; } .sv-santa-review { padding: 16px; gap: 10px; } }
.sv-santa-wizard {
    --sv-primary: #e53935; --sv-primary-dark: #c62828; --sv-primary-glow: rgba(229, 57, 53, .3);
    --sv-success: #e53935;
    color: var(--sv-text); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.sv-santa-wizard *, .sv-santa-wizard *::before, .sv-santa-wizard *::after { box-sizing: border-box; }
/* Santa runs six steps plus a processing screen, so the slider is sized from
   the section count rather than the four the default layout assumes. The
   transform moves by one section's share of the track's own width. */
.sv-santa-wizard .sv-steps { width: calc(var(--sv-step-count, 4) * 100%); }
.sv-santa-wizard .sv-steps[data-step] {
    transform: translateX(calc(var(--sv-step-index, 0) * -100% / var(--sv-step-count, 4)));
}
.sv-santa-wizard .sv-step { flex: 0 0 calc(100% / var(--sv-step-count, 4)); min-width: 0; overflow-x: hidden; }
.sv-santa-wizard .sv-step__content { width: 100%; flex: 0 0 auto; align-items: stretch; justify-content: flex-start; padding: 24px; }
.sv-santa-wizard .sv-form { width: 100%; max-width: none; }
.sv-santa-wizard .sv-form-group { width: 100%; text-align: left; }
.sv-santa-wizard .sv-form-input { width: 100%; min-width: 0; font-family: inherit; color: var(--sv-text); }
.sv-santa-wizard .sv-character-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; width: 100%; }
.sv-santa-wizard .sv-character-card { padding: 0; overflow: hidden; border: 2px solid var(--sv-border); border-radius: var(--sv-radius); background: var(--sv-bg-subtle); cursor: pointer; min-width: 0; color: var(--sv-text); }
.sv-santa-wizard .sv-character-card.is-selected { border-color: var(--sv-primary); box-shadow: 0 0 0 3px var(--sv-primary-glow); }
.sv-santa-wizard .sv-character-card__image { display: block; width: 100%; height: 235px; object-fit: cover; object-position: center 60%; }
.sv-santa-wizard .sv-character-card__name { display: block; padding: 12px; font-family: inherit; font-weight: 600; font-size: 1rem; }
.sv-santa-wizard .sv-btn { font-family: inherit; }
.sv-santa-wizard .sv-btn--primary { color: white; }
.sv-santa-wizard .sv-preview__photo { width: 110px; height: 150px; object-fit: cover; border-radius: 12px; }
/* The shared preview column is capped at 280px, which left Santa's review
   list bunched against one edge of a 640px step. Santa's review is the step. */
.sv-santa-wizard .sv-preview { width: 100%; max-width: none; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.sv-santa-wizard .sv-santa-review { width: 100%; }
.sv-santa-wizard .sv-preview__title { margin-bottom: 0; }
.sv-santa-wizard fieldset { text-align: left; }
@media (min-width: 768px) {
    .sv-santa-wizard .sv-steps-wrapper, .sv-santa-wizard .sv-modal__footer, .sv-santa-wizard .sv-modal__header { max-width: 640px; }
    .sv-santa-wizard .sv-steps { max-height: none; }
}

.sv-santa-wizard select option { background: var(--sv-bg); color: var(--sv-text); }


/* ==========================================================================
   Santa wizard: choice cards, chips and review
   One question per step, so each step's choices are cards big enough to tap
   with a thumb rather than a select the size of a line of text.
   ========================================================================== */
.sv-santa-wizard .sv-step__title { font-size: clamp(1.4rem, 4.5vw, 1.8rem); line-height: 1.2; margin: 0 0 8px; text-align: left; }
.sv-santa-wizard .sv-step__subtitle { margin: 0 0 20px; color: var(--sv-text-muted); font-size: .95rem; line-height: 1.5; text-align: left; }
.sv-santa-wizard .sv-form-label--group { display: block; margin: 24px 0 10px; font-weight: 600; text-align: left; }

.sv-choice-group { display: grid; gap: 10px; width: 100%; }
/* Two up only where the detail line has room to stay on a couple of lines;
   on a phone it wraps to a word a line and the card stops being readable. */
/* Video format: two cards side by side, each drawing its frame at the real
   aspect ratio above a short label, so the choice reads at a glance. */
.sv-choice-group--ratio { grid-template-columns: 1fr 1fr; }
.sv-choice-group--ratio .sv-choice {
    position: relative; flex-direction: column; justify-content: flex-end;
    gap: 10px; padding: 34px 12px 14px; text-align: center;
}
.sv-choice-group--ratio .sv-choice::before {
    content: ''; display: block; height: 72px; aspect-ratio: 9 / 16;
    border: 2px solid var(--sv-text-muted); border-radius: 6px;
}
.sv-choice-group--ratio .sv-choice:has(input[value="16:9"])::before { height: auto; width: 100%; max-width: 112px; aspect-ratio: 16 / 9; }
.sv-choice-group--ratio .sv-choice.is-selected::before { border-color: var(--sv-primary); background: var(--sv-primary-glow); }
.sv-choice-group--ratio .sv-choice__text { align-items: center; flex: 0 0 auto; }
.sv-choice-group--ratio .sv-choice__tick { position: absolute; top: 10px; right: 10px; }

.sv-choice {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 16px; min-height: 64px;
    border: 2px solid var(--sv-border); border-radius: var(--sv-radius);
    background: var(--sv-bg-subtle); cursor: pointer; text-align: left;
    transition: border-color var(--sv-transition-fast), box-shadow var(--sv-transition-fast);
}
.sv-choice:hover { border-color: var(--sv-primary-dark); }
.sv-choice.is-selected { border-color: var(--sv-primary); box-shadow: 0 0 0 3px var(--sv-primary-glow); }
/* The radio stays in the accessibility tree and keeps keyboard support; the
   card around it is what anyone actually sees. */
.sv-choice__input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sv-choice__input:focus-visible ~ .sv-choice__tick,
.sv-choice:focus-within { outline: 2px solid var(--sv-primary); outline-offset: 2px; }
.sv-choice__icon { font-size: 1.9rem; line-height: 1; flex: 0 0 auto; }
.sv-choice__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.sv-choice__title { font-weight: 600; font-size: 1rem; color: var(--sv-text); }
.sv-choice__detail { font-size: .85rem; line-height: 1.4; color: var(--sv-text-muted); }
.sv-choice__tick {
    flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
    border: 2px solid var(--sv-border); position: relative;
}
.sv-choice.is-selected .sv-choice__tick { border-color: var(--sv-primary); background: var(--sv-primary); }
.sv-choice.is-selected .sv-choice__tick::after {
    content: ''; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px;
    border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}

.sv-suggestions { margin-top: 16px; }
.sv-suggestions__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sv-chip {
    padding: 8px 14px; min-height: 40px;
    border: 1px solid var(--sv-border); border-radius: 999px;
    background: transparent; color: var(--sv-text); font: inherit; font-size: .9rem; cursor: pointer;
}
.sv-chip:hover:not(:disabled) { border-color: var(--sv-primary); color: var(--sv-primary); }
.sv-chip:disabled { opacity: .4; cursor: default; }
.sv-chip.is-used { border-style: dashed; }

.sv-santa-frame { margin: 0 0 14px; font-size: .9rem; font-style: italic; color: var(--sv-text-muted); }
.sv-santa-unavailable { margin: 0; font-size: .9rem; color: var(--sv-warning, #f59e0b); line-height: 1.5; }
.sv-santa-review__group {
    grid-column: 1 / -1; margin: 8px 0 0; font-size: .8rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em; color: var(--sv-text-muted);
}
.sv-santa-review__group:first-child { margin-top: 0; }
/* The richer free video writes the name on screen: shown large, as typed, so a typo is caught here. */
.sv-santa-namecheck { width: 100%; padding: 20px 16px; border: 2px dashed var(--sv-primary); border-radius: var(--sv-radius); text-align: center; }
.sv-santa-namecheck__name { margin: 0; font-size: clamp(1.8rem, 9vw, 2.6rem); font-weight: 800; line-height: 1.15; color: var(--sv-text); overflow-wrap: anywhere; }
.sv-santa-namecheck__hint { margin: 8px 0 0; font-size: .9rem; color: var(--sv-text-muted); }
.sv-santa-wizard .sv-character-card__tagline {
    display: block; padding: 0 12px 12px; font-size: .8rem; line-height: 1.35;
    color: var(--sv-text-muted); text-align: left;
}

/* Lapland Reveal: a Santa template, so it inherits .sv-santa-wizard above. */
.sv-lapland-wizard .sv-form-textarea { height: auto; min-height: 7.5rem; padding: 12px 16px; line-height: 1.5; resize: vertical; }
.sv-lapland-wizard [data-santa="fullScript"] { min-height: 12rem; }

/* "Who's going?": one box per child, added and removed by wizard-preset.js. */
.sv-lapland-children__list { display: grid; gap: 8px; }
.sv-lapland-children__row { display: flex; gap: 8px; align-items: center; }
.sv-lapland-children__remove {
    flex: none; width: var(--sv-input-height); height: var(--sv-input-height);
    border: 1px solid var(--sv-border); border-radius: var(--sv-radius);
    background: var(--sv-bg-subtle); color: var(--sv-text-muted);
    font: inherit; font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.sv-lapland-children__remove:hover,
.sv-lapland-children__remove:focus-visible { border-color: var(--sv-primary); color: var(--sv-primary); }
.sv-lapland-children__add {
    margin-top: 10px; padding: 6px 0; border: 0; background: none;
    color: var(--sv-primary); font: inherit; font-weight: 600; cursor: pointer;
}
.sv-lapland-children__add[hidden] { display: none; }
.sv-lapland-children__hint { margin: 4px 0 0; font-size: .9rem; color: var(--sv-text-muted); }
.sv-lapland-children__limit { margin: 4px 0 0; font-size: .9rem; color: var(--sv-error); }
.sv-lapland-wizard [data-lapland-mode] { margin-top: 20px; }
.sv-lapland-wizard .sv-char-counter { position: static; transform: none; margin: 6px 0 0; }