/**
 * Booking Wizard – Stepper, Navigation & CTA Styles
 * Konsolidierte Definitionen aus combined-booking.css
 *
 * @package VR-Infotainment
 * @since 1.0.0
 * @see _tokens.css for CSS Custom Properties
 */

/* =============================================================================
   1. BOOKING STAGE & PANELS
   ============================================================================= */

.booking-stage {
    background: color-mix(in srgb, var(--color-bg-elevated) 92%, transparent);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-card-xl);
    padding: clamp(1.75rem, 2.5vw, 3rem);
    box-shadow: var(--shadow-elevated);
}

.booking-stage__heading {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-6);
}

.booking-stage__heading h2 {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 1vw + 1.5rem, 2rem);
    line-height: var(--leading-snug);
    color: var(--color-text-primary);
}

.booking-stage__heading p {
    color: var(--color-text-secondary);
    font-size: var(--text-base);
}

.booking-stage__content {
    display: flex;
    flex-direction: column;
    gap: clamp(1.75rem, 3vw, 2.75rem);
}

.booking-panel {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
    background: color-mix(in srgb, var(--color-bg-tertiary) 94%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-border-default) 85%, transparent);
    border-radius: var(--radius-card-lg);
    padding: clamp(1.35rem, 2vw, 1.85rem);
    box-shadow: var(--shadow-md);
}

/* =============================================================================
   2. WIZARD STEPPER
   ============================================================================= */

#wizard-stepper,
.wizard-stepper {
    --wizard-track-size: 2px;

    position: relative;
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    padding: var(--spacing-4) var(--spacing-6);
    margin-bottom: clamp(1.5rem, 3vw, 2.75rem);
    overflow-x: auto;
    scrollbar-width: none;

    background: color-mix(in srgb, var(--color-bg-glass) 92%, transparent);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-card-lg);
    box-shadow: var(--shadow-glass);
}

#wizard-stepper::-webkit-scrollbar {
    display: none;
}

#wizard-stepper::before {
    content: '';
    position: absolute;
    top: 50%;
    left: var(--spacing-6);
    right: var(--spacing-6);
    height: var(--wizard-track-size);
    transform: translateY(-50%);
    background: color-mix(in srgb, var(--color-border-default) 70%, transparent);
    pointer-events: none;
}

#wizard-stepper::after {
    content: '';
    position: absolute;
    top: 50%;
    left: var(--spacing-6);
    height: var(--wizard-track-size);
    width: clamp(
        0px,
        calc(var(--wizard-progress, 0) * (100% - (var(--spacing-6) * 2))),
        100%
    );
    transform: translateY(-50%);
    background: linear-gradient(90deg, var(--color-primary), var(--color-accent-cyan));
    border-radius: var(--wizard-track-size);
    box-shadow: 0 0 12px rgba(37, 99, 235, 0.35);
    transition: width var(--transition-slow) var(--ease-DEFAULT);
    pointer-events: none;
}

.wizard-stepper__item {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-3) var(--spacing-4);
    min-width: 210px;
    flex: 1 1 0;

    border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--color-bg-tertiary) 92%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-border-default) 80%, transparent);
    transition:
        transform var(--transition-DEFAULT) var(--ease-DEFAULT),
        border-color var(--transition-DEFAULT) var(--ease-DEFAULT),
        box-shadow var(--transition-DEFAULT) var(--ease-DEFAULT),
        background var(--transition-DEFAULT) var(--ease-DEFAULT),
        opacity var(--transition-DEFAULT) var(--ease-DEFAULT);
}

.wizard-stepper__item[data-state="upcoming"] {
    opacity: 0.72;
}

.wizard-stepper__item[data-state="active"] {
    background: color-mix(in srgb, var(--color-primary) 18%, var(--color-bg-tertiary));
    border-color: color-mix(in srgb, var(--color-primary) 60%, transparent);
    box-shadow: var(--shadow-primary);
    transform: translateY(-2px);
    opacity: 1;
}

.wizard-stepper__item[data-state="complete"] {
    background: color-mix(in srgb, var(--color-success) 16%, var(--color-bg-tertiary));
    border-color: color-mix(in srgb, var(--color-success) 50%, transparent);
    opacity: 1;
}

.wizard-stepper__item:focus-within {
    outline: 2px solid color-mix(in srgb, var(--color-primary) 75%, transparent);
    outline-offset: 3px;
}

.wizard-stepper__icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-bold);
    font-size: var(--text-base);
    background: color-mix(in srgb, var(--color-bg-primary) 80%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-border-default) 80%, transparent);
    color: var(--color-text-primary);
    flex-shrink: 0;
    transition: inherit;
}

.wizard-stepper__item[data-state="complete"] .wizard-stepper__icon {
    background: color-mix(in srgb, var(--color-success) 22%, var(--color-bg-tertiary));
    border-color: color-mix(in srgb, var(--color-success) 65%, transparent);
    color: var(--color-success-100);
}

.wizard-stepper__item[data-state="active"] .wizard-stepper__icon {
    background: color-mix(in srgb, var(--color-primary) 80%, var(--color-bg-tertiary));
    border-color: color-mix(in srgb, var(--color-primary) 70%, transparent);
}

.wizard-stepper__label {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
    line-height: var(--leading-tight);
}

.wizard-stepper__title {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--color-text-secondary);
    letter-spacing: var(--tracking-normal);
}

.wizard-stepper__subtitle {
    font-size: var(--text-xs);
    color: var(--color-text-tertiary);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}

/* =============================================================================
   3. WIZARD SUMMARY
   ============================================================================= */

.wizard-summary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-3);
    margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
    padding: var(--spacing-3);
    background: color-mix(in srgb, var(--color-bg-glass) 90%, transparent);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-card-lg);
}

.wizard-summary__chip {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-3);
    border-radius: var(--radius-badge);
    border: 1px solid color-mix(in srgb, var(--color-primary) 55%, transparent);
    background: color-mix(in srgb, var(--color-primary) 18%, var(--color-bg-tertiary));
    color: var(--color-text-primary);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}

/* =============================================================================
   4. WIZARD NAVIGATION & CTA BUTTONS
   ============================================================================= */

.wizard-navigation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-3);
    margin-top: var(--spacing-4);
}

.wizard-navigation__cta {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    margin-left: auto;
}

.wizard-navigation .btn-primary,
.wizard-navigation .btn-secondary,
#wizard-back,
#wizard-next,
#wizard-finish {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    padding: var(--spacing-button-padding-y) var(--spacing-button-padding-x);
    border-radius: var(--radius-button);
    font-weight: var(--font-semibold);
    font-size: var(--text-base);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-wide);
    text-decoration: none;
    cursor: pointer;
    transition:
        transform var(--transition-DEFAULT) var(--ease-DEFAULT),
        box-shadow var(--transition-DEFAULT) var(--ease-DEFAULT),
        border-color var(--transition-DEFAULT) var(--ease-DEFAULT),
        background var(--transition-DEFAULT) var(--ease-DEFAULT);
    min-height: 48px;
}

.wizard-navigation .btn-primary,
#wizard-next,
#wizard-finish {
    background: var(--gradient-primary);
    color: var(--color-text-primary);
    border: 1px solid color-mix(in srgb, var(--color-primary) 70%, transparent);
    box-shadow: var(--shadow-primary);
}

.wizard-navigation .btn-primary:hover,
#wizard-next:hover,
#wizard-finish:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-primary-lg);
}

.wizard-navigation .btn-primary:active,
#wizard-next:active,
#wizard-finish:active {
    transform: translateY(-1px);
    box-shadow: var(--shadow-primary);
}

.wizard-navigation .btn-secondary,
#wizard-back,
.wizard-back-link {
    background: color-mix(in srgb, var(--color-bg-tertiary) 70%, transparent);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border-default);
}

.wizard-navigation .btn-secondary:hover,
#wizard-back:hover,
.wizard-back-link:hover {
    background: color-mix(in srgb, var(--color-border-default) 40%, var(--color-bg-tertiary));
    color: var(--color-text-primary);
    transform: translateY(-1px);
}

.wizard-navigation .btn-secondary:active,
#wizard-back:active,
.wizard-back-link:active {
    transform: none;
}

#wizard-next[data-form-complete="true"] {
    display: none !important;
}

/* Button bleibt sichtbar auch wenn Formular unvollständig */
#wizard-finish[data-form-incomplete="true"] {
    /* display: none !important; - Entfernt: Button soll immer sichtbar sein */
    opacity: 0.6;
    cursor: not-allowed;
}

#wizard-finish:not([disabled]) {
    box-shadow:
        0 8px 24px color-mix(in srgb, var(--color-success) 40%, transparent),
        var(--shadow-primary);
}

#wizard-finish[disabled],
#wizard-finish.opacity-50 {
    opacity: 0.6;
    cursor: not-allowed;
    box-shadow: none;
    background: color-mix(in srgb, var(--color-gray-600) 70%, var(--color-bg-tertiary));
    border-color: color-mix(in srgb, var(--color-border-default) 90%, transparent);
}

button[disabled],
button[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    filter: grayscale(20%);
}

@keyframes wizard-cta-pulse {
    0%, 100% {
        box-shadow:
            0 6px 22px color-mix(in srgb, var(--color-primary) 40%, transparent),
            var(--shadow-primary);
    }
    50% {
        box-shadow:
            0 10px 32px color-mix(in srgb, var(--color-primary) 55%, transparent),
            0 4px 12px rgba(0, 0, 0, 0.16);
    }
}

/* =============================================================================
   5. MEDIA QUERIES (Bündelung am Ende)
   ============================================================================= */

@media (min-width: 1024px) {
    .booking-stage__content {
        flex-direction: row;
        align-items: stretch;
    }
}

@media (max-width: 1024px) {
    #wizard-stepper,
    .wizard-stepper {
        gap: var(--spacing-3);
        padding: var(--spacing-3) var(--spacing-4);
    }
}

@media (max-width: 768px) {
    #wizard-stepper,
    .wizard-stepper {
        padding: var(--spacing-3) var(--spacing-2);
        gap: var(--spacing-3);
        scroll-snap-type: x mandatory;
        scroll-padding: var(--spacing-2);
    }

    #wizard-stepper::before,
    #wizard-stepper::after {
        display: none;
    }

    .wizard-stepper__item {
        min-width: 170px;
        scroll-snap-align: start;
    }

    .wizard-stepper__subtitle {
        font-size: var(--text-xs);
    }

    .wizard-navigation {
        position: sticky;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 10;
        padding: var(--spacing-4);
        margin: 0 calc(-1 * var(--spacing-4)) calc(-1 * var(--spacing-2));
        width: calc(100% + (var(--spacing-4) * 2));
        background: linear-gradient(
            to top,
            color-mix(in srgb, var(--color-bg-primary) 96%, transparent) 0%,
            color-mix(in srgb, var(--color-bg-primary) 88%, transparent) 65%,
            transparent 100%
        );
        box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.45);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        flex-direction: column-reverse;
        gap: var(--spacing-3);
    }

    @supports (padding-bottom: env(safe-area-inset-bottom)) {
        .wizard-navigation {
            padding-bottom: calc(var(--spacing-4) + env(safe-area-inset-bottom));
        }
    }

    .wizard-navigation__cta {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-2);
        margin-left: 0;
    }

    .wizard-navigation .btn-primary,
    .wizard-navigation .btn-secondary,
    #wizard-back,
    #wizard-next,
    #wizard-finish {
        width: 100%;
        justify-content: center;
    }

    #wizard-finish:not([disabled]) {
        animation: wizard-cta-pulse 2s ease-in-out infinite;
    }
}

@media (max-width: 640px) {
    .wizard-stepper__subtitle {
        display: none;
    }

    .booking-stage {
        padding: 1.25rem;
        border-radius: var(--radius-2xl);
    }

    .booking-panel {
        padding: 1rem;
        border-radius: var(--radius-2xl);
        gap: var(--spacing-3);
    }

    .wizard-summary {
        gap: var(--spacing-2);
        margin-bottom: var(--spacing-4);
    }

    .wizard-summary__chip {
        padding: var(--spacing-2) var(--spacing-2);
    }
}

@media (max-width: 480px) {
    .wizard-stepper__item {
        min-width: 150px;
    }

    .wizard-navigation {
        padding: var(--spacing-3);
        margin: 0 calc(-1 * var(--spacing-3)) calc(-1 * var(--spacing-2));
        width: calc(100% + (var(--spacing-3) * 2));
    }
}

@media (prefers-reduced-motion: reduce) {
    .wizard-stepper__item,
    .wizard-stepper__icon,
    .wizard-navigation .btn-primary,
    .wizard-navigation .btn-secondary,
    #wizard-back,
    #wizard-next,
    #wizard-finish {
        transition: none;
        animation: none;
    }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    #wizard-stepper,
    .wizard-stepper {
        border-width: 2px;
    }

    .wizard-stepper__item {
        border-width: 2px;
    }

    .wizard-stepper__icon {
        border-width: 2px;
    }

    .booking-stage,
    .booking-panel {
        border-width: 2px;
    }

    .wizard-navigation .btn-primary,
    .wizard-navigation .btn-secondary,
    #wizard-back,
    #wizard-next,
    #wizard-finish {
        border-width: 2px;
    }
}