/* Mobile badge as inline content instead of absolute positioning */

/* Desktop - keep absolute positioning */
@media (min-width: 769px) {
    .popular-badge {
        position: absolute !important;
        top: 5px !important;
        right: 10px !important;
        left: auto !important;
        transform: none !important;
    }
}

/* Mobile - badge as inline content */
@media screen and (max-width: 768px) {
    /* Reset absolute positioning for mobile */
    body .predplatne-container .predplatne-boxes .predplatne-box .popular-badge,
    body .predplatne-container .druh-boxes .predplatne-box .popular-badge,
    body .predplatne-container .chut-boxes .predplatne-box .popular-badge,
    body .predplatne-container .jak-casto-boxes .predplatne-box .popular-badge,
    body .predplatne-container .balicky-boxes .predplatne-box .popular-badge,
    body .predplatne-container .doba-boxes .predplatne-box .popular-badge {
        /* Remove absolute positioning */
        position: relative !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        transform: none !important;
        
        /* Display as block for proper centering */
        display: block !important;
        
        /* Styling */
        background: #ff6b6b !important;
        color: white !important;
        padding: 2px 8px !important;
        font-size: 0.6rem !important;
        border-radius: 10px !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
        line-height: 1.2 !important;
        
        /* Center with fixed width and auto margins */
        width: fit-content !important;
        margin: 0 auto 8px auto !important;
        text-align: center !important;
    }
    
    /* Adjust box header layout for inline badge */
    body .predplatne-container .predplatne-box .box-header {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }
    
    /* Badge should appear before icon */
    body .predplatne-container .predplatne-box .box-header {
        /* Use flexbox order to control element sequence */
        display: flex !important;
        flex-direction: column !important;
    }
    
    body .predplatne-container .predplatne-box .box-header .popular-badge {
        order: -1 !important; /* Badge appears first */
        align-self: center !important; /* Center the badge */
        width: fit-content !important;
        margin: 0 auto 8px auto !important; /* Center with auto margins */
    }
    
    body .predplatne-container .predplatne-box .box-header .box-icon {
        order: 0 !important; /* Icon appears second */
    }
    
    body .predplatne-container .predplatne-box .box-header .box-title {
        order: 1 !important; /* Title appears third */
    }
    
    /* Remove any overflow restrictions */
    body .predplatne-container .predplatne-boxes {
        /* Let carousel CSS handle overflow */
        padding-top: 5px !important; /* Less padding needed now */
    }
    
    /* No need for special container overflow handling */
    .vyber-baleni-wrapper,
    .vyber-zpusobu,
    .frekvence-vyber,
    .mnozstvi-vyber,
    .doba-vyber,
    .predplatne-step {
        /* Natural overflow */
    }
}

/* Keep text color fixes */
body .predplatne-container .predplatne-box.active .box-title,
body .predplatne-container .predplatne-box.active .box-description,
body .predplatne-container .predplatne-box.active .box-description p,
body .predplatne-container .predplatne-boxes .predplatne-box.active .box-title,
body .predplatne-container .predplatne-boxes .predplatne-box.active .box-description,
body .predplatne-container .predplatne-boxes .predplatne-box.active .box-description p {
    color: #333 !important;
}

/* Fix for preset buttons */
body .predplatne-container .preset-btn.active .preset-title,
body .predplatne-container .preset-btn.active .preset-desc,
body .quick-presets .preset-btn.active .preset-title,
body .quick-presets .preset-btn.active .preset-desc {
    color: #00466A !important;
}

/* Active box background */
.predplatne-box.active {
    background-color: #f5f9fc !important;
    border-color: #00466A !important;
}

/* Keep checkmark white */
.predplatne-box.active::after {
    color: white !important;
}

/* Dynamic badge colors */
.popular-badge[style*="background-color"] {
    background: inherit !important;
}