/* CHECKOUT NAVBAR ZÁKLAD */
.checkout-layout {
    padding-top: 0px;
    background-color: #f9fafb; /* Jemnučké sivé pozadie pre celú stránku košíka vyzerá super */
}

.checkout-navbar {
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
    padding: 16px 24px;
    margin-bottom: 40px;
}

.checkout-navbar-inner {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ROZLOŽENIE DO STĹPCOV (Flexbox trik pre vycentrovanie stredu) */
.checkout-navbar-left, .checkout-navbar-right {
    display: flex;
    align-items: center;
    flex: 1; /* Týmto zabezpečíme, že stredný blok bude presne v strede */
}

.checkout-navbar-right {
    justify-content: flex-end;
}

.checkout-navbar-center {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* ĽAVÁ ČASŤ - Logo a návrat */
.checkoutLogo {
    width: 220px; /* Zväčšené logo */
    display: block;
}

.checkout-navbar-left .divider {
    width: 1px;
    height: 32px;
    background-color: #e5e7eb;
    margin: 0 24px; /* Odsadenie medzi logom a čiarou/textom */
}

.checkout-navbar .return-to-shop {
    color: #6b7280;
    text-decoration: none;
    font-weight: 500;
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 8px; /* Odsadenie ikonky šípky od textu */
    transition: color 0.2s;
}

.checkout-navbar .return-to-shop:hover {
    color: var(--primary-color, #F39200);
}

/* STREDNÁ ČASŤ - Nadpisy */
.checkout-navbar-center .step-label {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #9ca3af;
    font-weight: 600;
    margin-bottom: 4px;
}

.checkout-navbar-center .checkout-title {
    font-size: 26px; /* Pekný veľký nadpis */
    font-weight: 700;
    color: #111827;
    margin: 0;
    line-height: 1;
}

/* PRAVÁ ČASŤ - Call centrum */
.support-icon {
    background: #fff7ed; /* Veľmi jemná oranžová z tvojej primary farby */
    color: var(--primary-color, #F39200);
    padding: 12px;
    border-radius: 50%;
    margin-right: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.support-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* Zarovnáme texty doprava */
}

.support-label {
    font-size: 12px;
    color: #6b7280;
    margin-bottom: 2px;
}

.support-phone {
    font-size: 18px;
    font-weight: 800;
    color: #111827;
    text-decoration: none;
    line-height: 1.2;
    transition: color 0.2s;
}

.support-phone:hover {
    color: var(--primary-color, #F39200);
}

.support-hours {
    font-size: 13px;
    color: #9ca3af;
    margin-top: 2px;
}

/* =========================================================
   MODERNÝ KROKOVAČ (CHECKOUT STEPPER)
   ========================================================= */

.modern-step-wrapper {
    display: flex;
    justify-content: center; /* Vycentruje celý prvok na stred obrazovky */
    width: 100%;
    margin-top: 20px;
    margin-bottom: 40px; /* Vytvorí priestor medzi krokovačom a obsahom pod ním */
}

.modern-stepper {
    display: flex;
    align-items: center;
    background: #ffffff;
    padding: 12px 32px;
    border-radius: 100px; /* Moderný tvar pilulky */
    border: 1px solid #e5e7eb;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03); /* Veľmi jemný tieň */
    gap: 16px;
}

.modern-stepper .step {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.modern-stepper .step.completed:hover {
    opacity: 0.7; /* Jemný efekt po prejdení myšou na predošlý krok */
}

.modern-stepper .step-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    transition: all 0.3s ease;
}

.modern-stepper .step-label {
    font-size: 15px;
    font-weight: 600;
}

/* Štýl pre dokončený krok (Košík) */
.modern-stepper .step.completed .step-circle {
    background-color: #f3f4f6;
    color: #9ca3af;
    border: 2px solid transparent;
}
.modern-stepper .step.completed .step-label {
    color: #6b7280;
}

/* Štýl pre aktívny krok (Zhrnutie) */
.modern-stepper .step.active .step-circle {
    background-color: var(--primary-color, #F39200); /* Použije tvoju farbu */
    color: #ffffff;
    border: 2px solid var(--primary-color, #F39200);
    box-shadow: 0 0 0 4px rgba(243, 146, 0, 0.15); /* Moderná vonkajšia žiara */
}
.modern-stepper .step.active .step-label {
    color: #111827;
}

/* Grafická prerušovaná čiara medzi krokmi */
.step-line-dashed {
    width: 80px; /* Dĺžka čiary */
    height: 2px;
    background-image: linear-gradient(to right, #d1d5db 50%, rgba(255,255,255,0) 0%);
    background-position: bottom;
    background-size: 8px 2px; /* Dĺžka čiarky a medzery (prvé číslo je čiarka) */
    background-repeat: repeat-x;
}


/* =========================================================
   OZNAM O MINIMÁLNEJ OBJEDNÁVKE (CART)
   ========================================================= */

.modern-min-order-alert {
    max-width: 600px;
    margin: 0 auto 32px auto; /* Vycentrovanie a medzera zospodu */
    padding: 12px 20px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-align: center;
    font-size: 15px;
}

.modern-min-order-alert p {
    margin: 0;
}

.modern-min-order-alert strong {
    font-size: 16px;
}

/* Stav - Chýba suma (Varovanie) */
.modern-min-order-alert.warning {
    background-color: #fffbeb;
    border: 1px solid #fef3c7;
    color: #92400e;
}
.modern-min-order-alert.warning svg {
    color: #f59e0b;
    flex-shrink: 0;
}

/* Stav - Splnené (Úspech) */
.modern-min-order-alert.success {
    background-color: #ecfdf5;
    border: 1px solid #d1fae5;
    color: #065f46;
}
.modern-min-order-alert.success svg {
    color: #10b981;
    flex-shrink: 0;
 }

/* RESPONZIVITA - TABLETY (768px - 1050px) */
/* Všetko zmenšíme, aby sa to vošlo do jedného riadku */
@media screen and (max-width: 1050px) and (min-width: 768px) {
    .checkout-navbar {
        padding: 12px 16px;
    }
    
    .checkoutLogo { 
        width: 140px; /* Menšie logo */
    }
    
    .checkout-navbar-left .divider { 
        margin: 0 12px; 
    }
    
    .checkout-navbar-center .checkout-title { 
        font-size: 20px; 
    }
    
    .support-phone { 
        font-size: 15px; 
    }
    
    .support-icon {
        margin-right: 8px;
        padding: 10px;
    }
}

/* RESPONZIVITA - MOBILY (do 767px) */
@media screen and (max-width: 767px) {
    .checkout-navbar {
        padding: 10px 12px; /* Ešte o kúsok menšie vnútorné odsadenie celej hlavičky */
        margin-bottom: 0px;
    }
    .modern-min-order-alert {
        margin-left: 16px;
        margin-right: 16px;
        flex-direction: column;
        text-align: center;
        gap: 8px;
    }

    .checkout-navbar-inner {
        flex-direction: row; 
        justify-content: space-between;
        align-items: center;
    }

    /* 1. Schováme stredný blok (Košík a Objednanie) */
    .checkout-navbar-center {
        display: none; 
    }

    /* 2. Ľavý blok (Šípka a Logo) */
    .checkout-navbar-left {
        flex: unset; /* Vypneme zbytočné naťahovanie stĺpca z desktopu */
        flex-direction: row-reverse; 
        justify-content: flex-end; /* TOTO TO OPRAVÍ: pri row-reverse zarovnáva flex-end úplne doľava */
        align-items: center;
        gap: 6px; 
    }

    .checkout-navbar-right {
        flex: unset; /* Vypneme naťahovanie aj tu, aby to space-between natlačilo na kraje */
    }

    .checkout-navbar-left .divider,
    .hide-on-mobile {
        display: none; /* Schováme čiaru a text "Späť k nákupu" */
    }

    .checkout-navbar .return-to-shop {
        padding: 4px; /* Zmenšené pozadie šípky */
        background: #f3f4f6; 
        border-radius: 50%;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .checkout-navbar .return-to-shop svg {
        width: 16px; /* Zmenšená samotná šípka */
        height: 16px;
    }

    .checkoutLogo {
        width: 110px; /* Ideálna veľkosť loga pre mobil */
    }

    .support-label {
        display: block !important; /* Vrátime späť text Call centrum */
        font-size: 10px; /* Menší font, aby to nebolo natlačené */
        margin-bottom: 0;
        line-height: 1;
    }

    .support-icon {
        padding: 6px; /* Zmenšené oranžové pozadie ikony telefónu */
        margin-right: 6px;
    }

    .support-icon svg {
        width: 16px; /* Zmenšená ikona telefónu */
        height: 16px;
    }

    .support-info {
        align-items: flex-end; /* Text a číslo pekne zarovnané doprava k okraju */
    }

    .support-phone {
        font-size: 13px; /* Jemne zmenšené číslo, aby to dýchalo */
        line-height: 1.2;
    }

     .modern-stepper {
        padding: 12px 20px;
        width: 100%;
        justify-content: space-between;
        border-radius: 16px; /* Na mobile to vyzerá lepšie ako obdĺžnik s oblými rohmi */
    }
    
    .modern-stepper .step-label {
        font-size: 13px; /* Menší text na mobile */
    }
    
    .step-line-dashed {
        width: 30px; /* Kratšia čiara, aby sa to zmestilo */
    }
}