/* Styl pro extra delivery box */
.extra.delivery {
    background-color: #baceae; /* Světle šedé pozadí */
    padding: 20px 15px; /* Větší padding pro větší prostor kolem textu */
    border-radius: 10px; /* Zaoblené rohy */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Stín pro lepší vzhled */
}

/* Styl pro extra dárek zdarma*/
.extra.gift {
    background-color: #cdf3b5; /* Světle šedé pozadí */
    padding: 20px 15px; /* Větší padding pro větší prostor kolem textu */
    border-radius: 10px; /* Zaoblené rohy */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Stín pro lepší vzhled */
}

/* Styl pro lištu ceny */
.price-range {
    background-color: #ddd; /* Světle šedé pozadí pro samotnou lištu */
    border-radius: 5px; /* Zaoblené rohy pro samotné pole */
    height: 6px;
    width: 100%; /* Roztažení na celou šířku */
    overflow: hidden; /* Skrytí přetékajících elementů */
}

/* Obecné styly pro odkazy */
.links-container {
    display: flex; /* Odkazy budou vedle sebe */
    gap: 12px; /* Menší mezera mezi odkazy */
    justify-content: center; /* Zarovná odkazy na střed */
    margin-top: 16px; /* Trocha prostoru nad odkazy */
}

.window-link {
    display: inline-block;
    padding: 10px 15px; /* Větší padding pro lepší vzhled */
    background-color: #f0f0f0; /* Šedé pozadí */
    color: #333; /* Tmavý text */
    text-decoration: none; /* Bez podtržení */
    border-radius: 6px; /* Zaoblené rohy */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Jemný stín */
    transition: background-color 0.3s, box-shadow 0.3s; /* Plynulý přechod při hoveru */
}

@media screen and (max-width: 400px) {
    .window-link {
        font-size: 12px
    }
}

.window-link:hover {
    background-color: #e0e0e0; /* Trochu tmavší šedé pozadí při hoveru */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Zvýraznění stínu při hoveru */
}

/* Media Query pro mobilní zařízení */
@media screen and (max-width: 769px) {
    /* Pro všechny seznamy <ol> */
    ol {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 0;
        list-style-type: none;
    }

    /* Pro každou položku <li> v seznamu */
    ol li {
        width: 100%;
        padding: 4px 0;
        text-align: center;
        background-color: #f0f0f0;
        color: #333; /* Tmavý text */
        text-decoration: none;
        border-radius: 6px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        margin-right: 8px;
    }

    /* Snížení výšky pro první krok */
    ol li.step-1 {
        padding: 2px 0; /* Menší výška pro první krok */
    }

    /* Zajištění, že text ve všech krocích je černý */
    ol li span {
        color: #333; /* Text zůstává černý pro všechny kroky */
    }

    ol.cart-header li {
        background-color: #d3d3d3
    }

    /* Zvýraznění aktivního kroku */
    ol.cart-header li.active {
        background-color: #ffd700; /* Zvýrazněné pozadí pro aktivní krok (žluté) */
        color: #333; /* Text zůstává černý i u aktivního kroku */
    }

    /* Zajištění, že pozadí pro aktivní i dokončené kroky je správné */
    ol.cart-header li.active strong span:before, 
    ol.cart-header li.completed strong span:before,
    ol.cart-header li.active a span:before, 
    ol.cart-header li.completed a span:before {
        background-color: #000000; /* Černé pozadí pro ikonu (span před textem) */
        color: #fff; /* Bílý text */
    }

    .advanced-order .extras-wrap .extra {
        text-align: center;
    }
    
    ol.cart-header {
        margin: 10px 20px 15px;
    }

    /* Kontejner pro související produkty */
    td[colspan="6"] {
        display: flex;
        flex-wrap: wrap; /* Zajišťuje, že produkty se budou umisťovat pod sebe */
        justify-content: space-between; /* Vytváří prostor mezi produkty */
        gap: 10px;
        padding: 5px 0;
    }

    /* Styl pro každý produkt */
    .cart-related-product {
        display: flex;
        flex-direction: column; /* Produkty budou pod sebou */
        align-items: center;
        text-align: left; /* Zajištění, že text bude vlevo */
        background: #f8f8f8;
        padding: 10px;
        border-radius: 6px;
        box-shadow: 0 7px 3px rgba(0, 0, 0, 0.1);
        flex: 0 1 calc(50% - 10px); /* Produkty budou pod sebou na 50% šířky */
        max-width: 180px; /* Upravujeme šířku, pokud je to potřeba */
        margin-bottom: 10px; /* Mezera mezi produkty */
    }
}

/* ---------------------------- */
/* Tlačítko "Vybrat jiný dárek" – výchozí styl (PC) */
.free-gift-trigger {
    display: inline-block;          /* na PC vedle textu */
    margin-left: 10px;
    padding: 10px 18px;
    background: #f0f0f0;
    border-radius: 6px;
    text-decoration: none;
    color: #333;
    transition: background 0.3s, box-shadow 0.3s;
    position: relative;
    z-index: 10; /* aby nebylo pod ničím */
}

.free-gift-trigger:hover {
    background: #e0e0e0;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

/* --- Mobilní úpravy --- */
@media screen and (max-width: 768px) {
    /* Celé <label> jako flex řádek */
    .free-gifts li label {
        display: flex;
        align-items: center;       /* zarovnání na střed */
        gap: 10px;                 /* mezera mezi obrázkem a textem */
    }

    /* Obrázek menší */
    .free-gifts-img img {
        width: 80px;
        height: auto;
        flex-shrink: 0;            /* obrázek se nezmenšuje */
    }

    /* Box pro název + tlačítko */
    .free-gift-label {
        font-size: 12px;
        line-height: 1.2em;
        display: flex;
        flex-direction: row;       /* text a tlačítko vedle sebe */
        align-items: center;
        gap: 6px;                  /* mezera mezi názvem a tlačítkem */
        flex-wrap: wrap;           /* když je text dlouhý, zalomí se */
    }

    /* Tlačítko menší, aby sedělo vedle textu */
    .free-gift-trigger {
        display: inline-block;
        margin: 0;
        font-size: 12px;
        padding: 6px 10px;
        white-space: nowrap;       /* nerozpadne se na více řádků */
    }
}