/* Fix for mobile carousel - ensure first box is fully visible */
@media (max-width: 768px) {
    /* Main container reset */
    .predplatne-boxes {
        display: flex !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 15px !important;
        padding: 0 15px !important;
        margin: 0 !important;
        width: 100% !important;
        min-height: 220px !important;
        scroll-padding-left: 15px !important;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    
    .predplatne-boxes::-webkit-scrollbar {
        display: none;
    }
    
    /* Individual boxes */
    .predplatne-box {
        flex: 0 0 280px !important;
        width: 280px !important;
        margin: 0 !important;
        position: relative !important;
    }
    
    /* Ensure first box starts at the beginning */
    .predplatne-boxes::before {
        content: '';
        width: 0;
        height: 1px;
        flex-shrink: 0;
    }
    
    /* Add padding after last box */
    .predplatne-boxes::after {
        content: '';
        width: 15px;
        height: 1px;
        flex-shrink: 0;
    }
    
    /* Active box styling */
    .predplatne-box.active {
        border-color: #00466A !important;
        box-shadow: 0 0 0 2px #00466A !important;
    }
    
    /* Preset buttons */
    .preset-buttons {
        display: flex !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 10px !important;
        padding: 0 15px 20px 15px !important;
        margin: 0 !important;
        width: 100% !important;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    
    .preset-buttons::-webkit-scrollbar {
        display: none;
    }
    
    .preset-btn {
        flex: 0 0 auto !important;
        margin: 0 !important;
    }
}