/* Globální nastavení fontu Figtree pro celý plugin */
.predplatne-container,
.predplatne-container * {
    font-family: 'Figtree', sans-serif !important;
}

/* Správné váhy fontů */
.predplatne-container h1,
.predplatne-container h2,
.predplatne-container h3,
.predplatne-container h4,
.predplatne-container h5,
.predplatne-container h6 {
    font-weight: 600 !important;
}

.predplatne-container p,
.predplatne-container span,
.predplatne-container div {
    font-weight: 400;
}

.predplatne-container strong,
.predplatne-container b,
.predplatne-container .bold {
    font-weight: 600 !important;
}

/* Tlačítka */
.predplatne-container button {
    font-family: 'Figtree', sans-serif !important;
    font-weight: 500;
}

/* Inputy */
.predplatne-container input,
.predplatne-container select,
.predplatne-container textarea {
    font-family: 'Figtree', sans-serif !important;
    font-weight: 400;
}

/* ===== NOVÝ DESIGN MODULU SOUHRNU ===== */

/* Hlavní wrapper */
.rekapitulace-wrapper {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    border: 1px solid #e9ecef;
}

/* Reset seznamu */
.rekapitulace-seznam {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border-top: none !important;
}

/* Jednotlivé sekce */
.rekapitulace-polozka,
.rekapitulace-typ-doprava-platba {
    padding: 24px !important;
    margin: 0 !important;
    border-bottom: 1px solid #f0f2f5 !important;
    background: #ffffff;
    position: relative;
    transition: background-color 0.2s ease;
}

.rekapitulace-polozka:hover,
.rekapitulace-typ-doprava-platba:hover {
    background-color: #fafbfc;
}

/* Sekce s cenou - speciální design */
.rekapitulace-celkova-cena {
    background: linear-gradient(135deg, #f8fbff 0%, #f0f7ff 100%) !important;
    padding: 28px 24px !important;
    margin: 0 !important;
    border-bottom: none !important;
    position: relative;
    overflow: hidden;
}

/* Dekorativní prvek pro sekci ceny - odstraněno
.rekapitulace-celkova-cena::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #00466A 0%, #0066a1 100%);
}
*/

/* Řádky s informacemi */
.rekapitulace-radek {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 10px 0 !important;
    margin: 0 !important;
    font-size: 0.9375rem !important;
    color: #495057 !important;
    border-bottom: 1px dashed #e9ecef !important;
}

.rekapitulace-radek:last-child {
    border-bottom: none !important;
}

/* Hodnoty - nový design s badge stylem */
.rekapitulace-hodnota {
    background: #e8f2f7 !important;
    color: #00466A !important;
    padding: 6px 14px !important;
    border-radius: 20px !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    font-family: 'Figtree', sans-serif !important;
    white-space: nowrap !important;
    display: inline-block !important;
    margin-left: auto !important;
    text-align: right !important;
}

/* Celková cena - výraznější */
.rekapitulace-celkem {
    border-top: 2px solid #00466A !important;
    margin-top: 16px !important;
    padding-top: 16px !important;
    font-size: 1.125rem !important;
    font-weight: 600 !important;
    color: #00466A !important;
}

.rekapitulace-celkem .rekapitulace-hodnota {
    background: #00466A !important;
    color: #ffffff !important;
    font-size: 1.125rem !important;
    font-weight: 600 !important;
    padding: 8px 18px !important;
    box-shadow: 0 2px 8px rgba(0, 70, 106, 0.2);
}

/* Přidání ikon pomocí pseudo-elementů */
.rekapitulace-polozka::before {
    content: '☕';
    position: absolute;
    left: 24px;
    top: 20px;
    font-size: 1.5rem;
    opacity: 0.1;
}

.rekapitulace-typ-doprava-platba::before {
    content: '📦';
    position: absolute;
    left: 24px;
    top: 20px;
    font-size: 1.5rem;
    opacity: 0.1;
}

.rekapitulace-celkova-cena::after {
    content: '💰';
    position: absolute;
    right: 24px;
    top: 28px;
    font-size: 2rem;
    opacity: 0.08;
}

/* Animace pro celkovou cenu */
@keyframes pulseCena {
    0% { transform: scale(1); }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); }
}

.rekapitulace-celkem .rekapitulace-hodnota {
    animation: pulseCena 2s ease-in-out infinite;
}

/* Header rekapitulace */
.rekapitulace-header {
    text-align: center;
    padding: 24px 24px 0;
    margin-bottom: 8px;
}

.rekapitulace-title {
    font-size: 1.5rem !important;
    font-weight: 600 !important;
    color: #00466A !important;
    margin: 0 !important;
    font-family: 'Figtree', sans-serif !important;
}

/* Sekce header s ikonami */
.rekapitulace-sekce-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.rekapitulace-ikona {
    font-size: 1.75rem;
    line-height: 1;
    opacity: 0.8;
}

.rekapitulace-sekce-nazev {
    font-size: 1.125rem !important;
    font-weight: 600 !important;
    color: #333 !important;
    margin: 0 !important;
    font-family: 'Figtree', sans-serif !important;
}

/* Labely */
.rekapitulace-label {
    color: #6c757d;
    font-weight: 400;
    flex-shrink: 0;
}

.rekapitulace-label-celkem {
    color: #00466A;
    font-weight: 600;
    font-size: 1rem;
}

/* Hover efekt pro sekce */
.rekapitulace-polozka:hover .rekapitulace-ikona,
.rekapitulace-typ-doprava-platba:hover .rekapitulace-ikona {
    transform: scale(1.1);
    transition: transform 0.2s ease;
}

/* Vizualni separator mezi sekcemi */
.rekapitulace-polozka::after,
.rekapitulace-typ-doprava-platba::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 24px;
    right: 24px;
    height: 1px;
    background: linear-gradient(90deg, transparent, #e9ecef 20%, #e9ecef 80%, transparent);
}

/* Responzivní úpravy */
@media (max-width: 768px) {
    .rekapitulace-polozka,
    .rekapitulace-typ-doprava-platba,
    .rekapitulace-celkova-cena {
        padding: 20px 16px !important;
    }
    
    .rekapitulace-radek {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }
    
    .rekapitulace-hodnota {
        margin-left: 0 !important;
        align-self: flex-start !important;
    }
    
    .rekapitulace-celkem .rekapitulace-hodnota {
        font-size: 1rem !important;
    }
    
    .rekapitulace-title {
        font-size: 1.25rem !important;
    }
    
    .rekapitulace-sekce-header {
        gap: 8px;
        margin-bottom: 12px;
    }
    
    .rekapitulace-ikona {
        font-size: 1.5rem;
    }
    
    .rekapitulace-sekce-nazev {
        font-size: 1rem !important;
    }
}

/* Progress indicator pro lepsi UX */
.rekapitulace-progress {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 16px;
    margin: 20px 24px;
    text-align: center;
}

.rekapitulace-progress-bar {
    height: 6px;
    background: #e9ecef;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 8px;
}

.rekapitulace-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #00466A, #0066a1);
    border-radius: 3px;
    width: 75%;
    transition: width 0.3s ease;
}

.rekapitulace-progress-text {
    font-size: 0.875rem;
    color: #6c757d;
    font-family: 'Figtree', sans-serif;
}

/* ===== STYLING PRO PRVNÍ KROK ===== */

/* Kontejner pro cenu a tlačítko */
.price-button-container {
    max-width: 400px;
    margin: 40px auto;
    box-shadow: 0 4px 15px rgba(0, 70, 106, 0.1);
    border-radius: 12px;
    overflow: hidden;
}

/* Cena v prvním kroku */
.predplatne-cena-blok {
    background: linear-gradient(135deg, #f8fbff 0%, #f0f7ff 100%);
    border: 2px solid #e9ecef;
    border-radius: 0;
    padding: 24px;
    margin: 0;
    text-align: center;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid #e9ecef;
}

.predplatne-cena-blok::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #00466A 0%, #0066a1 100%);
}

.predplatne-cena-text {
    font-size: 1.125rem !important;
    color: #495057 !important;
    margin: 0 !important;
    font-weight: 500 !important;
}

#predplatne-cena {
    font-size: 1.75rem !important;
    color: #00466A !important;
    font-weight: 700 !important;
    display: inline-block;
    margin-left: 8px;
    font-family: 'Figtree', sans-serif !important;
}

/* Tlačítko v prvním kroku - napojené na blok s cenou */
.step-1-buttons {
    display: block;
    margin: 0;
}

.price-button-container + .step-1-buttons {
    max-width: 400px;
    margin: -45px auto 40px;
    position: relative;
    z-index: 10;
}

.step-1-buttons .next-step-btn {
    background: #00466A;
    color: white;
    border: none;
    padding: 14px 28px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 0 0 12px 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Figtree', sans-serif;
    position: relative;
    overflow: hidden;
    width: 100%;
    border: 2px solid #e9ecef;
    border-top: none;
    margin-top: -1px;
}


.step-1-buttons .next-step-btn:hover {
    background: #003d5c;
}

.step-1-buttons .next-step-btn:active {
    background: #002d4a;
}

/* Ikona šipky v tlačítku */
.step-1-buttons .next-step-btn::after {
    content: ' →';
    margin-left: 8px;
    font-size: 1.1rem;
    transition: transform 0.3s ease;
    display: inline-block;
}

.step-1-buttons .next-step-btn:hover::after {
    transform: translateX(4px);
}

/* Animace pro změnu ceny */
@keyframes priceUpdate {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: 0.8; }
    100% { transform: scale(1); opacity: 1; }
}

#predplatne-cena.updating {
    animation: priceUpdate 0.3s ease-in-out;
}

/* Celkové sjednocení layoutu prvního kroku */
#step-kafe {
    padding-bottom: 40px;
}

/* Oddělení sekcí v prvním kroku */
.predplatne-step {
    position: relative;
    padding-bottom: 30px;
    margin-bottom: 30px;
}

.predplatne-step:not(:last-of-type)::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 1px;
    background: linear-gradient(90deg, transparent, #e9ecef, transparent);
}

/* Přidání viditelného oddělení před cenou */
.predplatne-step-doba {
    margin-bottom: 20px;
}

/* Vytvoření vizuálně propojeného bloku cena + tlačítko */
.price-button-wrapper {
    max-width: 400px;
    margin: 40px auto;
    box-shadow: 0 4px 15px rgba(0, 70, 106, 0.1);
    border-radius: 12px;
}

/* Zvýraznění celkové ceny */
.predplatne-cena-blok::after {
    content: '';
    position: absolute;
    top: -20px;
    right: -20px;
    width: 80px;
    height: 80px;
    background: radial-gradient(circle, rgba(0, 70, 106, 0.1) 0%, transparent 70%);
    border-radius: 50%;
    animation: pulse 3s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.2); opacity: 0.3; }
}

/* Responzivní úpravy */
@media (max-width: 768px) {
    .predplatne-cena-blok {
        margin: 30px 20px 20px;
        padding: 20px;
        max-width: 100%;
    }
    
    .predplatne-cena-text {
        font-size: 1rem !important;
    }
    
    #predplatne-cena {
        font-size: 1.5rem !important;
        display: block;
        margin-top: 8px;
    }
    
    .price-button-container {
        margin: 30px 20px;
        max-width: calc(100% - 40px);
    }
    
    .price-button-container + .step-1-buttons {
        max-width: calc(100% - 40px);
        margin: -45px auto 30px;
    }
    
    .step-1-buttons .next-step-btn {
        width: 100%;
        padding: 14px 24px;
        font-size: 0.9375rem;
        border-radius: 0 0 12px 12px;
    }
    
    .predplatne-cena-blok::after {
        display: none;
    }
}