/* ============================================================
   Customer PWA Mobile Responsive Fixes
   Applied globally to all customer pages
   ============================================================ */

/* ── Grid Responsive Fixes ── */
@media (max-width: 768px) {
    /* 4-col grids → 2-col on mobile */
    .stats-bar,
    .payment-stats {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* 3-col grids → 1-col on mobile */
    .why-grid {
        grid-template-columns: 1fr !important;
    }

    /* Tables → horizontal scroll */
    .table-responsive-mobile {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Cards padding reduction */
    .card-modern { border-radius: 16px !important; }

    /* Profile header */
    .profile-header-card {
        padding: 1.5rem !important;
        flex-direction: column;
        text-align: center;
    }

    /* Browse hero */
    .browse-hero { padding: 1.75rem 1.25rem !important; border-radius: 18px !important; }
    .browse-hero h2 { font-size: 1.4rem !important; }

    /* Hero search bar */
    .hero-search { flex-direction: column; gap: 0.5rem; }
    .hero-search-btn { width: 100%; text-align: center; }

    /* Filter tabs scroll */
    .filter-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap !important;
        width: 100% !important;
        padding-bottom: 0.5rem;
    }

    /* Booking cards */
    .booking-card-actions {
        flex-direction: column;
        gap: 0.5rem;
    }
    .booking-card-actions .btn { width: 100%; justify-content: center; }

    /* Stat pills */
    .stat-pill { padding: 0.85rem 1rem !important; }
    .stat-pill-val { font-size: 1.25rem !important; }

    /* Payment stats */
    .pstat-card { padding: 1rem !important; }
    .pstat-val { font-size: 1.25rem !important; }

    /* Table card header */
    .table-card-header { flex-direction: column; align-items: flex-start !important; }
    .tch-search { min-width: 100% !important; }

    /* Business detail images */
    .business-gallery { grid-template-columns: 1fr 1fr !important; }

    /* Package cards */
    .package-grid { grid-template-columns: 1fr !important; }

    /* Booking form */
    .booking-form-card { padding: 1.25rem !important; border-radius: 16px !important; }

    /* Dashboard stat cards */
    .col-xl-4.col-md-6 { margin-bottom: 0; }
}

@media (max-width: 480px) {
    /* Single column on very small screens */
    .stats-bar,
    .payment-stats {
        grid-template-columns: 1fr 1fr !important;
    }

    .stat-pill-icon,
    .pstat-icon {
        width: 36px !important;
        height: 36px !important;
        font-size: 0.9rem !important;
    }

    /* Reduce font sizes */
    .ph-name { font-size: 1.2rem !important; }
    .ph-avatar { width: 70px !important; height: 70px !important; font-size: 2rem !important; }
}

/* ── Touch-friendly tap targets ── */
@media (max-width: 768px) {
    .btn, .nav-link-modern, .filter-tab, .bottom-nav-item, .pwa-nav-item {
        min-height: 44px;
    }

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

    /* Modals full-screen on mobile */
    .modal-dialog {
        margin: 0 !important;
        max-width: 100% !important;
    }
    .modal-content {
        border-radius: 20px 20px 0 0 !important;
        position: fixed;
        bottom: 0; left: 0; right: 0;
    }
}

/* ── Safe area insets for notched phones ── */
@supports (padding: env(safe-area-inset-bottom)) {
    .bottom-nav, .pwa-bottom-nav {
        padding-bottom: env(safe-area-inset-bottom);
    }
}

/* ── Smooth scrolling ── */
html { scroll-behavior: smooth; }

/* ── Image optimization ── */
img { max-width: 100%; height: auto; }

/* ── Prevent horizontal overflow ── */
body { overflow-x: hidden; }