/* ==================== RESPONSIVE DESIGN ==================== */
@media (max-width: 380px) {
    html {
        font-size: 14px;
    }
    
    .wait-time-circle {
        width: 80px;
        height: 80px;
    }
    
    .wait-time-number {
        font-size: 28px;
    }

    .gender-card {
        padding: 15px;
    }

    .gender-icon {
        width: 40px;
        height: 40px;
    }

    .gender-info h3 {
        font-size: 16px;
    }
}

@media (min-width: 768px) {
    .main-content {
        max-width: 500px;
        margin: 0 auto;
    }
    
    .bottom-nav {
        max-width: 500px;
        left: 50%;
        transform: translateX(-50%);
    }

    .gender-selection-content {
        max-width: 450px;
    }
}