/* ============================================================
   ESH MOBILE PERFORMANCE & DESIGN CSS
   Loaded on every page — fixes mobile layout site-wide
   ============================================================ */

/* ── Global resets ── */
html { overflow-x: hidden; }
body { overflow-x: hidden; -webkit-font-smoothing: antialiased; }

/* ── Remove tap highlight flash everywhere ── */
* { -webkit-tap-highlight-color: transparent; }

/* ── Inputs: 16px prevents iOS auto-zoom ── */
input, select, textarea { font-size: 16px !important; }

/* ── Prevent layout shift from images ── */
img, video, iframe { max-width: 100%; height: auto; }

/* ── Lazy-loaded image shimmer ── */
img[loading="lazy"] {
    background: linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmerLoad 1.5s infinite;
}
img[loading="lazy"].loaded { animation: none; background: none; }
@keyframes shimmerLoad {
    0%   { background-position: -200% 0; }
    100% { background-position:  200% 0; }
}

/* ── Respect reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ================================================================
   MOBILE  ≤ 968px
   ================================================================ */
@media (max-width: 968px) {

    body { animation: none !important; }
    body::before { animation: none !important; opacity: 0.4 !important; }
    .floating-shape { display: none !important; }

    /* Kill heavy shimmer on cards */
    .welcome-section::before,.admin-header::before,.hero::before,
    .page-title::before,.feature-card::before,.activity-card::before,
    .dashboard-card::before { display: none !important; }

    /* Remove backdrop-filter (destroys perf on Android) */
    nav,.modal,.section,.welcome-section,.admin-header,
    .fee-structure-section,.payment-methods,.page-title,.login-container {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* Kill ALL hover transforms */
    .feature-card:hover,.activity-card:hover,.dashboard-card:hover,
    .stat-item:hover,.fee-item:hover,.payment-option:hover,
    .note-box:hover,.section:hover,.user-card:hover,.hero:hover,
    .contact-card:hover,.gallery-image:hover,.submit-btn:hover,
    .google-btn:hover,.btn:hover,.cta-button:hover,.logout-btn:hover,
    .note-box li:hover,.institute-option li:hover,.detail-item:hover,
    .homework-card:hover,.payment-card:hover,.tab-btn:hover {
        transform: none !important;
        box-shadow: inherit !important;
    }

    /* Cheaper shadows */
    .card,.feature-card,.dashboard-card,.profile-card,
    .section,.fee-structure-section,.payment-methods,
    .welcome-section,.admin-header {
        box-shadow: 0 3px 12px rgba(0,0,0,0.15) !important;
    }

    /* Global card padding reduction */
    .section,.fee-structure-section,.payment-methods,
    .welcome-section,.dashboard-card,.homework-card,
    .payment-card,.info-card {
        padding: 1.2rem 1rem !important;
    }

    /* Section headings */
    .section h2,.fee-structure-section h2,
    .payment-methods h2,.admin-header h1 {
        font-size: clamp(1.1rem, 5vw, 1.5rem) !important;
    }

    /* Non-interactive display cards: remove tap flash */
    .stat-item,.detail-item,.fee-item,.note-box li {
        pointer-events: none;
        cursor: default;
    }
    .stat-item a,.stat-item button,
    .detail-item a,.detail-item button {
        pointer-events: auto;
    }

    /* Touch targets */
    button,a,.btn,.tab-btn,.submit-btn,.google-btn,.logout-btn {
        min-height: 44px;
        touch-action: manipulation;
    }

    /* Containers */
    .page-container { padding: 0 0.9rem 2.5rem !important; margin: 0.8rem auto !important; }
    .admin-container { padding: 0.9rem !important; }

    /* Force single-column grids */
    .features-grid,.activities-grid,.profile-details,.contact-cards {
        grid-template-columns: 1fr !important;
        gap: 0.9rem !important;
    }

    /* Responsive headings */
    h1 { font-size: clamp(1.4rem, 6vw, 2rem) !important; }
    h2 { font-size: clamp(1.1rem, 5vw, 1.5rem) !important; }
    h3 { font-size: clamp(0.95rem, 4vw, 1.2rem) !important; }

    /* Modals: no clipping */
    .modal { align-items: flex-start !important; padding-top: 3rem !important; }
    .modal-content {
        max-height: none !important;
        overflow-y: visible !important;
        margin: 0.8rem !important;
        width: calc(100% - 1.6rem) !important;
        padding: 1.4rem 1.1rem !important;
        border-radius: 16px !important;
    }
}

/* ================================================================
   SMALL PHONE  ≤ 480px
   ================================================================ */
@media (max-width: 480px) {

    body { font-size: 0.93rem; }
    .page-container { padding: 0 0.7rem 2rem !important; }

    .section,.fee-structure-section,.payment-methods,
    .welcome-section,.dashboard-card,.homework-card {
        padding: 1rem 0.85rem !important;
        border-radius: 14px !important;
    }

    .action-buttons {
        flex-direction: column !important;
        gap: 0.7rem !important;
    }
    .action-buttons .btn {
        width: 100% !important;
        justify-content: center !important;
    }

    .stats-grid { gap: 0.5rem !important; }
    .stat-number { font-size: 1.6rem !important; }
    .stat-label  { font-size: 0.7rem  !important; }

    .form-row { grid-template-columns: 1fr !important; }
}

/* ================================================================
   REAL TOUCH SCREEN  (hover:none + coarse pointer)
   ================================================================ */
@media (hover: none) and (pointer: coarse) {
    *:hover { transform: none !important; }

    button:active,.btn:active,a:active {
        opacity: 0.75;
        transition: opacity 0.1s;
    }
}