/* ============================================================
   PPAY GATEWAY - Responsive Rules (v8)
   ============================================================ */

/* ---------- 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; }

    .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); }
    }
}

/* ---------- SMALL PHONES ---------- */
@media (max-width: 380px) {
    .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;
        scrollbar-width: none;
    }
    .filter-chips::-webkit-scrollbar { display: none; }
}

/* ---------- TABLETS ---------- */
@media (min-width: 768px) {
    .sidebar { display: flex; }
    .bottom-nav { display: none; }
    .menu-toggle { display: none; }
    .page { padding: 24px 26px 40px; }
}

@media (min-width: 1024px) {
    .page { padding: 28px 32px 44px; }
}

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

/* ---------- COLLAPSED SIDEBAR ON TABLET ---------- */
@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; }
}

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

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