/* ========================================
   ENHANCED MOBILE OPTIMIZATIONS
   ======================================== */

/* Improve touch targets and mobile UX */
@media (max-width: 768px) {
    /* Better touch targets - minimum 44px recommended by Apple/Google */
    .target-year-option input[type="checkbox"] {
        width: 24px !important;
        height: 24px !important;
        margin: 0 !important;
    }
    
    .location-preference-option .location-card {
        min-height: 48px !important;
        padding: 14px 12px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* Enhanced button sizing for mobile */
    .billing-actions button,
    .btn-primary,
    .btn-secondary,
    .subscription-select-btn {
        min-height: 48px !important;
        padding: 14px 20px !important;
        font-size: 1rem !important;
        touch-action: manipulation !important;
        -webkit-touch-callout: none !important;
        -webkit-user-select: none !important;
        user-select: none !important;
    }
    
    /* Improved form spacing for mobile */
    .form-group {
        margin-bottom: 1.5rem !important;
    }
    
    .target-year-checkboxes {
        gap: 18px !important;
        margin-top: 16px !important;
    }
    
    .target-year-option {
        flex-direction: column-reverse !important;
        align-items: center !important;
        gap: 8px !important;
    }
    
    .year-badge {
        padding: 10px 16px !important;
        min-width: 70px !important;
        text-align: center !important;
        font-size: 0.95rem !important;
        font-weight: 600 !important;
    }
    
    /* Better mobile form labels */
    label {
        font-size: 1rem !important;
        margin-bottom: 8px !important;
        display: block !important;
    }
    
    /* Improve input field sizes */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    select,
    textarea {
        min-height: 48px !important;
        padding: 12px 16px !important;
        font-size: 16px !important; /* Prevents zoom on iOS */
        border-radius: 8px !important;
        border: 2px solid #e2e8f0 !important;
        transition: border-color 0.2s ease !important;
    }
    
    input:focus,
    select:focus,
    textarea:focus {
        border-color: #8B1538 !important;
        outline: none !important;
        box-shadow: 0 0 0 3px rgba(139, 21, 56, 0.1) !important;
    }
    
    /* Better modal sizing on mobile */
    .modal-content {
        margin: 20px !important;
        max-height: calc(100vh - 40px) !important;
        overflow-y: auto !important;
    }
    
    /* Improve table responsiveness */
    .admin-table {
        font-size: 0.9rem !important;
    }
    
    .admin-table td,
    .admin-table th {
        padding: 12px 8px !important;
    }
    
    /* Better grid spacing on mobile */
    .admin-overview-grid,
    .analytics-grid,
    .classes-grid,
    .tutors-grid {
        gap: 16px !important;
    }
    
    /* Improve navigation on mobile */
    .navbar {
        padding: 12px 16px !important;
    }
    
    .nav-brand {
        font-size: 1.2rem !important;
    }
}

/* Extra small mobile devices */
@media (max-width: 480px) {
    /* Even better touch targets for small screens */
    .location-card {
        min-height: 52px !important;
        padding: 16px 12px !important;
    }
    
    /* Larger buttons for small screens */
    .billing-actions button,
    .btn-primary,
    .btn-secondary {
        min-height: 52px !important;
        padding: 16px 24px !important;
        font-size: 1.1rem !important;
        width: 100% !important;
        margin-bottom: 12px !important;
    }
    
    /* Better spacing for small screens */
    .form-group {
        margin-bottom: 2rem !important;
    }
    
    /* Improve readability */
    body {
        font-size: 16px !important;
        line-height: 1.6 !important;
    }
    
    h1 { font-size: 2rem !important; }
    h2 { font-size: 1.75rem !important; }
    h3 { font-size: 1.5rem !important; }
    h4 { font-size: 1.25rem !important; }
    h5 { font-size: 1.1rem !important; }
    h6 { font-size: 1rem !important; }
    
    /* Better card spacing */
    .card,
    .billing-section,
    .plan-status {
        margin-bottom: 16px !important;
        padding: 16px !important;
    }
}