/* =================================================================== */
/* == STYLY PRO MODÁLNÍ OKNO VÝBĚRU OSOBNÍHO ODBĚRU == */
/* =================================================================== */

/* --- Obecný kontejner a nadpis --- */
.content-modal .branch-wrap {
    padding: 20px;
    background-color: #f8f8f8; /* Jemné pozadí pro celý blok */
}

.content-modal .branch-wrap h2 {
    font-size: 1.8em;       /* Velikost písma podle .sf-section-title */
    font-weight: 700;       /* Tučné písmo */
    color: #333;
    text-transform: uppercase; /* Velká písmena */
    text-align: center;
    margin-bottom: 30px;    /* Větší odsazení pod nadpisem */
}

/* --- Karta pro jednotlivou pobočku --- */
.personal-collection-point {
    background: #fff;       /* Bílé pozadí karty */
    border-radius: 12px;    /* Zaoblené rohy jako u .sf-store-card */
    box-shadow: 0 4px 15px rgba(0,0,0,0.07); /* Jemný stín */
    padding: 25px;
    margin-bottom: 20px;    /* Odsazení mezi kartami */
    text-align: center;     /* Zarovnání obsahu na střed */
    border: 1px solid #e0e0e0;
}

.personal-collection-point h3 {
    font-size: 1.4em;
    color: #e50000;         /* Vaše hlavní červená barva */
    font-weight: 700;
    margin: 0 0 10px 0;
}

.personal-collection-point p {
    font-size: 1em;
    color: #555;
    line-height: 1.5;
    margin: 0 0 15px 0;
}

/* --- Zvýraznění varovné hlášky --- */
.personal-collection-point p.em {
    background-color: #fffbe6; /* Světle žluté pozadí */
    border: 1px solid #ffe58f;
    color: #8a6d3b;
    padding: 15px;
    border-radius: 8px;      /* Zaoblené rohy */
    font-size: 0.9em;
    margin-top: 15px;
    margin-bottom: 20px;
}

/* --- Hlavní tlačítko pro výběr pobočky --- */
.personal-collection-point .btn {
    /* Přepisuje původní .btn-primary a používá styl .sf-red-button */
    background-color: #e50000 !important;
    color: #fff !important;
    text-decoration: none !important;
    padding: 12px 28px !important;
    border-radius: 50px !important; /* Plně zaoblené rohy */
    font-weight: bold !important;
    transition: all .2s ease;
    display: inline-block;
    border: none !important;
    cursor: pointer;
    text-transform: uppercase;
    font-size: 0.9em !important;
}

.personal-collection-point .btn:hover {
    background-color: #c00000 !important; /* Tmavší červená při najetí */
    transform: translateY(-2px);       /* Lehký posun nahoru */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}


/* --- Skrytí původní oddělovací čáry --- */
.content-modal .branch-wrap hr.line {
    display: none;
}
/* =================================================================== */
/* == KOMPLETNÍ STYLY PRO KOŠÍK - KROK 2 (DOPRAVA A PLATBA) v4 FINAL == */
/* =================================================================== */

/* --- 1. Obecné rozložení a šířka sekce --- */

/* OPRAVA: Cílíme na hlavní kontejner a rozšiřujeme ho */
.cart-content {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.co-box h4.order-icon::before {
    filter: grayscale(1) brightness(0.8) sepia(1) hue-rotate(-50deg) saturate(10);
}

/* --- 2. Elegantní informační blok (o úpravě řezu) --- */
.site-msg-custom.step-1 {
    background-color: #fef5f5;
    border: 1px solid #f8d7da;
    border-left: 5px solid #e50000;
    padding: 20px;
    margin: 25px 0;
    border-radius: 8px;
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.site-msg-custom.step-1::before {
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23e50000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>');
    flex-shrink: 0;
    margin-top: 2px;
}

.site-msg-custom.step-1 p,
.site-msg-custom.step-1 span,
.site-msg-custom.step-1 strong {
    font-family: inherit !important;
    font-size: 1em !important;
    color: #333 !important;
    line-height: 1.6;
}

.site-msg-custom.step-1 p {
    margin: 0;
}

/* --- 3. Vzhled a zarovnání boxů pro výběr dopravy a platby --- */
.shipping-billing-table .radio-wrapper {
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    padding: 15px 20px;
    margin-bottom: 15px;
    transition: all 0.2s ease-in-out;
}

/* NOVÉ: Pravidlo, které se aplikuje POUZE pro obrazovky širší než 992px */
@media (min-width: 992px) {
    .shipping-billing-table .radio-wrapper {
        width: 112%;
        box-sizing: border-box;
        position: center;
    }
}

.shipping-billing-table .radio-wrapper:hover {
    border-color: #c00000;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}

.shipping-billing-table .radio-wrapper.active {
    border-color: #e50000;
    background-color: #fff;
    box-shadow: 0 4px 15px rgba(229,0,0,0.1);
}

.shipping-billing-table .radio-wrapper > label {
    display: flex;
    align-items: center;
    width: 100%;
    cursor: pointer;
    gap: 15px;
}

/* OPRAVA: Kontejner pro text nyní umí zalamovat obsah */
.shipping-billing-table .payment-info {
    display: flex;
    flex-wrap: wrap; /* Umožní zalamování prvků pod sebe */
    align-items: center;
    flex-grow: 1;
    text-align: left;
}

/* OPRAVA: Doplňující text se přesune na nový řádek */
.payment-info .not-possible-info {
    flex-basis: 100%; /* Roztáhne se na 100% šířky a tím spadne na nový řádek */
    font-size: 0.9em;
    color: #777;
    font-style: normal;
    margin-top: 4px; /* Malá mezera od řádku nahoře */
}


.shipping-billing-table .payment-logo {
    flex-shrink: 0;
    margin-left: auto;
}

.shipping-billing-table .payment-shipping-price {
    flex-shrink: 0;
    min-width: 80px;
    text-align: right;
}

/* --- 4. Finální styl pro tooltip ikonky (s opravou okrajů) --- */
.show-tooltip.question-tooltip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background-color: #e50000;
    color: #fff;
    border-radius: 50%;
    font-weight: bold;
    font-size: 14px;
    font-family: sans-serif;
    cursor: help;
    margin-left: 8px;
    transition: transform 0.2s ease;
    flex-shrink: 0;
    border: none;
    outline: none;
    text-decoration: none;
}

.show-tooltip.question-tooltip:hover {
    transform: scale(1.1);
}