/**
 * Chatbot Message - Journey
 *
 * ✨ VISUELLER HINGUCKER - SMG THEME STYLE
 * Timeline-Layout für Multi-Intent-Fragen.
 * Moderne Glassmorphism mit SMG-Branding.
 *
 * @package SMG_Mall_Theme
 * @since 2.1.0
 */

/* ========================================
   Journey Container - PREMIUM GLASSMORPHISM
   ======================================== */

.chatbot-journey {
    margin-top: clamp(1.5rem, 4vw, 2rem);
    padding: clamp(1.5rem, 4vw, 2.5rem);

    /* Premium Glassmorphism */
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.95) 0%,
        rgba(255, 255, 255, 0.85) 100%
    );
    backdrop-filter: blur(30px);
    border: 2px solid rgba(227, 30, 36, 0.1);
    border-radius: clamp(16px, 3vw, 24px);

    /* Premium Shadow mit SMG-Farbe */
    box-shadow:
        0 8px 32px rgba(227, 30, 36, 0.08),
        0 4px 16px rgba(0, 0, 0, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);

    /* Subtle Animation */
    animation: journeyFadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes journeyFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   Journey Header - EXTENDS chatbot-button
   ======================================== */

.chatbot-journey__header {
    display: flex;
    justify-content: center;
    padding-bottom: clamp(1rem, 3vw, 1.5rem);
    margin-bottom: clamp(1rem, 3vw, 1.5rem);
    border-bottom: 2px solid rgba(227, 30, 36, 0.1);
}

.chatbot-journey__route-button {
    /* Erbt von .chatbot-button--lg (chatbot-buttons.css) */
    /* Keine zusätzlichen Styles nötig */
}

/* ========================================
   Journey Steps - TIMELINE LAYOUT
   ======================================== */

.chatbot-journey__steps {
    display: flex;
    flex-direction: column;
    gap: clamp(2rem, 5vw, 3rem);
}

/* ========================================
   Single Step - PREMIUM DESIGN
   ======================================== */

.chatbot-journey__step {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 3vw, 1.5rem);

    /* Staggered Animation */
    opacity: 0;
    animation: stepFadeIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.chatbot-journey__step:nth-child(1) { animation-delay: 0.1s; }
.chatbot-journey__step:nth-child(2) { animation-delay: 0.2s; }
.chatbot-journey__step:nth-child(3) { animation-delay: 0.3s; }
.chatbot-journey__step:nth-child(4) { animation-delay: 0.4s; }

@keyframes stepFadeIn {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Timeline Line - SMG RED GRADIENT */
.chatbot-journey__step:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 28px; /* Zentriert unter Number Badge */
    top: 60px; /* Unter Badge */
    width: 3px;
    height: calc(100% - 60px + clamp(2rem, 5vw, 3rem));
    background: linear-gradient(
        180deg,
        rgba(227, 30, 36, 0.6) 0%,
        rgba(227, 30, 36, 0.2) 100%
    );
    border-radius: 2px;
    z-index: 0;
}

/* ========================================
   Step Header - PREMIUM BADGE DESIGN
   ======================================== */

.chatbot-journey__step-header {
    display: flex;
    align-items: center;
    gap: clamp(0.75rem, 2vw, 1rem);
    position: relative;
    z-index: 1;
}

/* Number Badge - SMG BRANDING (statt Emoji) */
.chatbot-journey__step-number {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;

    /* SMG Red Gradient */
    background: linear-gradient(
        135deg,
        var(--smg-500, #e31e24) 0%,
        var(--smg-700, #c41a1f) 100%
    );

    /* Premium Shadow */
    box-shadow:
        0 0 0 4px rgba(255, 255, 255, 0.9),
        0 4px 16px rgba(var(--smg-500-rgb, 227, 30, 36), 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);

    border-radius: 50%;

    /* Number Style */
    color: white;
    font-size: clamp(1.25rem, 3vw, 1.5rem);
    font-weight: 700;

    /* Subtle Animation */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.chatbot-journey__step-number:hover {
    transform: scale(1.05);
    box-shadow:
        0 0 0 4px rgba(255, 255, 255, 0.9),
        0 6px 20px rgba(var(--smg-500-rgb, 227, 30, 36), 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Step Title - PREMIUM TYPOGRAPHY */
.chatbot-journey__step-title {
    font-size: clamp(1.125rem, 3vw, 1.375rem);
    font-weight: 700;
    color: #1f2937;
    margin: 0;
    letter-spacing: -0.02em;
    line-height: 1.3;
}

/* ========================================
   Step Stores (Cards) - ALIGNED LAYOUT
   ======================================== */

.chatbot-journey__step-stores {
    margin-left: 68px; /* Aligned mit Title (56px badge + 12px gap) */
    padding-top: clamp(0.5rem, 2vw, 0.75rem);
}

/* Reuse Card Slider Styles */
.chatbot-journey__step-stores .chatbot-cards__slider {
    /* Erbt Styles von chatbot-cards-base.css */
}

/* ========================================
   Responsive - MOBILE OPTIMIERT
   ======================================== */

@media (max-width: 768px) {
    .chatbot-journey {
        padding: clamp(1rem, 4vw, 1.5rem);
    }

    .chatbot-journey__steps {
        gap: clamp(1.5rem, 4vw, 2rem);
    }

    .chatbot-journey__step-number {
        width: 48px;
        height: 48px;
        font-size: clamp(1.125rem, 3vw, 1.25rem);
    }

    .chatbot-journey__step-title {
        font-size: clamp(1rem, 3vw, 1.125rem);
    }

    .chatbot-journey__step-stores {
        margin-left: 0; /* Full width auf Mobile */
    }

    /* Timeline Line anpassen */
    .chatbot-journey__step:not(:last-child)::after {
        left: 24px; /* Zentriert unter kleinerem Badge */
        top: 52px;
        height: calc(100% - 52px + clamp(1.5rem, 4vw, 2rem));
    }
}

/* ========================================
   Step Placeholder - ELEGANT EMPTY STATE
   ======================================== */

.chatbot-journey__step-placeholder {
    margin-left: 68px; /* Aligned mit Stores */
    padding: clamp(1rem, 3vw, 1.5rem);

    /* Subtle Glassmorphism */
    background: linear-gradient(
        135deg,
        rgba(227, 30, 36, 0.03) 0%,
        rgba(227, 30, 36, 0.01) 100%
    );
    border: 1px dashed rgba(227, 30, 36, 0.2);
    border-radius: clamp(12px, 2vw, 16px);

    /* Typography */
    color: #6b7280;
    font-size: clamp(0.875rem, 2vw, 0.9375rem);
    font-style: italic;
    text-align: center;

    /* Subtle Animation */
    animation: placeholderPulse 2s ease-in-out infinite;
}

@keyframes placeholderPulse {
    0%, 100% {
        opacity: 0.6;
    }
    50% {
        opacity: 0.8;
    }
}

@media (max-width: 768px) {
    .chatbot-journey__step-placeholder {
        margin-left: 0;
    }
}