/* ============================================================
   PPAY GATEWAY - Responsive Rules (mobile-first)
   ============================================================ */

/* --- Base mobile (up to 767px) --- */
@media (max-width: 767px) {
    .sidebar { display: none; }
    .sidebar.open { display: flex; }
    .menu-toggle { display: inline-flex; }
    .bottom-nav { display: flex; }
    .page { padding: 16px 14px 100px; }

    .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .quick-actions { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .wallet-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .hero-card { padding: 20px; }
    .hero-actions { width: 100%; }
    .hero-actions .btn { flex: 1; }

    .sidebar.open {
        position: fixed; inset: 0 auto 0 0; z-index: 200;
        width: 260px; height: 100vh;
        box-shadow: 0 0 60px rgba(0,0,0,0.6);
        animation: slideIn .28s var(--ease);
    }
    @keyframes slideIn {
        from { transform: translateX(-100%); }
        to   { transform: translateX(0); }
    }

    .auth-shell { max-width: 100%; }
    .auth-card { padding: 24px 20px 20px; border-radius: 22px; }
}

/* --- Small phones --- */
@media (max-width: 380px) {
    .quick-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stat-grid { grid-template-columns: 1fr; }
    .hero-balance { font-size: 26px; }
    .otp-input input { height: 46px; font-size: 18px; }
    .bn-item span { font-size: 10px; }
    .filter-chips { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
    .filter-chips::-webkit-scrollbar { display: none; }
    .filter-chips { scrollbar-width: none; }
}

/* --- Tablets --- */
@media (min-width: 768px) {
    .sidebar { display: flex; }
    .bottom-nav { display: none; }
    .menu-toggle { display: none; }
    .page { padding: 24px 26px 40px; }
    .stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .quick-actions { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
    .page { padding: 28px 32px 44px; }
    .stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .wallet-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .hero-card { padding: 28px 30px; }
}

@media (min-width: 1280px) {
    .sidebar { width: 268px; }
    .page { padding: 32px 40px 48px; }
    .hero-balance { font-size: 42px; }
}

/* --- Collapsed sidebar on medium screens --- */
@media (min-width: 768px) and (max-width: 1023px) {
    .sidebar { width: 82px; padding: 22px 10px; }
    .brand-text,
    .nav-label { display: none; }
    .nav-item { justify-content: center; padding: 12px; }
    .sidebar-brand { justify-content: center; padding: 6px 0 22px; }
    .sidebar-footer .nav-item { justify-content: center; }
}

/* --- Prevent overflow globally --- */
img, svg { max-width: 100%; }
.tx-amount strong,
.stat-value,
.hero-balance { word-break: break-word; }

/* --- Safe area for iPhone notch --- */
@supports (padding: max(0px)) {
    .bottom-nav {
        padding-bottom: max(8px, env(safe-area-inset-bottom));
    }
}

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

/* --- High contrast fallback --- */
@media (prefers-contrast: more) {
    :root {
        --border: rgba(180, 200, 230, 0.35);
        --muted: #b8c6dd;
    }
}