/* Responsive Design Styles */

/* Desktop and tablet breakpoints */
@media (max-width: 1160px) {
    html, body {
        overflow: auto;
    }
    
    .wrapper {
        min-width: 320px;
    }
    
    section {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    nav, payment {
        width: 100%;
        height: auto;
        padding: 10px;
    }
}

/* Height-based responsive rules */
@media (max-height: 840px) {
    html, body {
        height: auto;
        min-height: 100%;
        overflow: auto;
    }
    
    .wrapper {
        min-height: 100vh;
    }
}

@media (max-height: 576px) {
    html, body {
        height: auto;
        min-height: 100%;
        overflow: auto;
    }
    
    .wrapper {
        min-height: 100vh;
    }
}

/* Mobile breakpoints */
@media (max-width: 768px) {
    section {
        padding: 0 10px;
    }
    
    nav, payment {
        padding: 15px;
    }
    
    .button {
        padding: 12px 24px;
        font-size: 14px;
    }
    
    /* Modal responsive adjustments */
    .modal-content {
        padding: 1.5rem;
        max-width: 350px;
    }
    
    .low-end-device-content {
        padding: 1.5rem;
        max-width: 450px;
    }
    
    .low-storage-content {
        padding: 1.5rem;
        max-width: 450px;
    }
}

@media (max-width: 480px) {
    html, body {
        min-width: 320px;
    }
    
    header {
        padding: 8px;
        font-size: 14px;
    }
    
    section {
        padding: 0 5px;
    }
    
    nav, payment {
        padding: 10px;
    }
    
    .button {
        padding: 10px 20px;
        font-size: 13px;
        margin: 2px 1px;
    }
    
    /* Modal mobile adjustments */
    .modal-content {
        padding: 1rem;
        width: 95%;
        max-width: none;
    }
    
    .low-end-device-content {
        padding: 1rem;
        width: 95%;
        max-width: none;
    }
    
    .low-storage-content {
        padding: 1rem;
        width: 95%;
        max-width: none;
    }
    
    .streak-title {
        font-size: 1.5rem;
    }
    
    .streak-number {
        font-size: 1.2rem;
        min-width: 2.5rem;
        height: 2.5rem;
    }
}