/* ============================================
   ZERO PROXY — Responsive Stylesheet
   Mobile < 768px | Tablet 768–1024px | Desktop > 1024px
   ============================================ */

/* ============================================
   SIDEBAR — Mobile Drawer
   ============================================ */

.mobile-menu-btn {
    display: none;
    position: fixed;
    top: 14px;
    left: 16px;
    z-index: 200;
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    color: #f1f1f3;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: all 0.15s ease;
}

.mobile-menu-btn:hover {
    background: rgba(255,255,255,0.1);
}

[data-theme="light"] .mobile-menu-btn {
    background: rgba(0,0,0,0.05);
    border-color: rgba(0,0,0,0.12);
    color: #1a1a2e;
}

.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(4px);
    z-index: 149;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.sidebar-overlay.visible {
    opacity: 1;
}

@media (max-width: 768px) {
    .mobile-menu-btn {
        display: flex;
    }

    .sidebar {
        transform: translateX(-100%);
        transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 150;
        width: 260px !important;
        box-shadow: 8px 0 32px rgba(0,0,0,0.5);
    }

    .sidebar.mobile-open {
        transform: translateX(0);
    }

    .sidebar-overlay {
        display: block;
    }

    .main-content {
        margin-left: 0 !important;
        padding: 72px 16px 24px !important;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .sidebar {
        width: 200px !important;
    }

    .main-content {
        margin-left: 200px !important;
        padding: 24px 20px !important;
    }
}


/* ============================================
   STAT CARDS + GRIDS
   ============================================ */

@media (max-width: 768px) {
    .stat-grid,
    [style*="grid-template-columns:repeat(3"],
    [style*="grid-template-columns:repeat(4"],
    [style*="grid-template-columns: repeat(3"],
    [style*="grid-template-columns: repeat(4"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    .stat-card {
        padding: 14px 16px !important;
    }

    .stat-card .value,
    .stat-value {
        font-size: 22px !important;
    }

    .two-col,
    .grid-2,
    .grid-3 {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    h1 {
        font-size: 20px !important;
    }

    .page-header h1 {
        font-size: 18px !important;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .stat-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .grid-3 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}


/* ============================================
   TABLES — Horizontal Scroll
   ============================================ */

@media (max-width: 768px) {
    .table-wrap,
    .card > table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .table-wrap::-webkit-scrollbar {
        height: 3px;
    }

    .table-wrap::-webkit-scrollbar-thumb {
        background: rgba(255,255,255,0.1);
        border-radius: 3px;
    }

    table th,
    table td {
        padding: 10px 12px !important;
        font-size: 12px !important;
        white-space: nowrap;
    }
}


/* ============================================
   BUY PLANS
   ============================================ */

@media (max-width: 768px) {
    [style*="grid-template-columns:repeat(6"],
    [style*="grid-template-columns: repeat(6"],
    [style*="grid-template-columns:repeat(3"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    [style*="grid-template-columns:repeat(6"],
    [style*="grid-template-columns: repeat(6"] {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}


/* ============================================
   MY PLANS
   ============================================ */

@media (max-width: 768px) {
    [style*="grid-template-columns:repeat(2, 1fr)"][style*="gap:12px"],
    [style*="grid-template-columns: repeat(2, 1fr)"][style*="gap: 12px"] {
        grid-template-columns: 1fr !important;
    }

    [style*="display:flex"][style*="gap:10px"] {
        flex-wrap: wrap !important;
    }
}


/* ============================================
   ADD BALANCE
   ============================================ */

@media (max-width: 768px) {
    /* Amount buttons */
    [style*="display:flex"][style*="flex-wrap:wrap"][style*="gap:8px"] {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
    }

    /* Payment methods */
    [style*="grid-template-columns:repeat(3"] {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
}


/* ============================================
   SETTINGS
   ============================================ */

@media (max-width: 768px) {
    [style*="display:grid"][style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
}


/* ============================================
   SUPPORT
   ============================================ */

@media (max-width: 768px) {
    [style*="display:flex"][style*="gap:12px"] > .form-group[style*="width:160px"] {
        width: 100% !important;
    }

    [style*="display:flex; gap:12px"] {
        flex-direction: column !important;
    }
}


/* ============================================
   REFERRALS
   ============================================ */

@media (max-width: 768px) {
    [style*="grid-template-columns:repeat(4,1fr)"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }
}


/* ============================================
   NOTIFICATIONS
   ============================================ */

@media (max-width: 768px) {
    .notification-item {
        padding: 12px !important;
    }
}


/* ============================================
   LANDING PAGE (index.php)
   ============================================ */

@media (max-width: 768px) {
    .navbar {
        padding: 0 16px !important;
        height: 54px !important;
    }

    .nav-links {
        display: none !important;
    }

    .navbar .container,
    .navbar > div {
        gap: 8px !important;
    }

    .hero,
    [style*="padding:120px"] {
        padding: 100px 20px 60px !important;
    }

    .hero h1,
    [style*="font-size:72px"],
    [style*="font-size:64px"],
    [style*="font-size: 72px"] {
        font-size: 36px !important;
        line-height: 1.1 !important;
        letter-spacing: -0.03em !important;
    }

    [style*="font-size:20px"][style*="color:var(--text-muted)"],
    [style*="font-size: 20px"][style*="max-width"] {
        font-size: 14px !important;
    }

    /* Stats bar 2x2 */
    [style*="display:flex"][style*="border-radius"][style*="divide"],
    .stats-bar {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Pricing grid */
    [style*="grid-template-columns:repeat(3, 1fr)"][style*="gap:16px"] {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* Features grid */
    [style*="grid-template-columns:repeat(4, 1fr)"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    /* Section padding */
    [style*="padding:80px"],
    [style*="padding: 80px"],
    section {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    [style*="font-size:40px"],
    [style*="font-size: 40px"] {
        font-size: 24px !important;
    }

    /* CTA buttons stacked */
    [style*="display:flex"][style*="gap:12px"][style*="justify-content:center"] {
        flex-direction: column !important;
        align-items: center !important;
    }

    /* Footer */
    [style*="display:flex"][style*="justify-content:space-between"][style*="border-top"] {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 12px !important;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    [style*="grid-template-columns:repeat(3, 1fr)"][style*="gap:16px"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .hero h1,
    [style*="font-size:72px"],
    [style*="font-size: 72px"] {
        font-size: 52px !important;
    }
}


/* ============================================
   AUTH PAGES (Login/Register)
   ============================================ */

@media (max-width: 768px) {
    .auth-page {
        padding: 16px !important;
        align-items: flex-start !important;
        padding-top: 40px !important;
    }

    .auth-container {
        max-width: 100% !important;
        padding: 16px !important;
    }

    .auth-card {
        padding: 24px 20px !important;
        border-radius: 14px !important;
    }

    .auth-card h1 {
        font-size: 20px !important;
    }

    .lang-switch {
        top: 10px !important;
        right: 10px !important;
    }
}


/* ============================================
   STATUS PAGE
   ============================================ */

@media (max-width: 768px) {
    .container {
        padding: 24px 16px !important;
    }

    [style*="display:flex"][style*="gap:2px"] {
        gap: 1px !important;
    }

    [style*="width:8px"][style*="height:32px"] {
        width: 6px !important;
    }
}


/* ============================================
   KNOWLEDGE BASE
   ============================================ */

@media (max-width: 768px) {
    [style*="display:grid"][style*="260px 1fr"],
    [style*="display:grid"][style*="240px 1fr"] {
        grid-template-columns: 1fr !important;
    }

    [style*="position:sticky"] {
        position: static !important;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    [style*="display:grid"][style*="260px 1fr"],
    [style*="display:grid"][style*="240px 1fr"] {
        grid-template-columns: 200px 1fr !important;
    }
}


/* ============================================
   TERMS OF SERVICE
   ============================================ */

@media (max-width: 768px) {
    .terms-page .container {
        padding: 24px 16px 60px !important;
    }

    .terms-page h1 {
        font-size: 24px !important;
    }
}


/* ============================================
   MODALS — Mobile
   ============================================ */

@media (max-width: 768px) {
    .cm-box {
        padding: 20px !important;
        border-radius: 14px !important;
        margin: 16px !important;
        max-width: calc(100% - 32px) !important;
    }

    .modal {
        padding: 20px !important;
        border-radius: 14px !important;
        margin: 16px !important;
        min-width: auto !important;
        width: calc(100% - 32px) !important;
    }
}


/* ============================================
   CARDS — Mobile Padding
   ============================================ */

@media (max-width: 768px) {
    .card {
        padding: 16px !important;
        border-radius: 12px !important;
    }
}


/* ============================================
   TOP BAR — Mobile
   ============================================ */

@media (max-width: 768px) {
    .top-bar {
        margin-bottom: 20px !important;
        padding-left: 44px;
    }
}


/* ============================================
   INVOICES
   ============================================ */

@media (max-width: 768px) {
    .tabs {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    .tab {
        flex: 1 !important;
        min-width: calc(50% - 6px) !important;
        text-align: center !important;
        justify-content: center !important;
    }
}


/* ============================================
   PROXY STRING GENERATOR MODAL
   ============================================ */

@media (max-width: 768px) {
    .modal-backdrop .modal,
    [style*="min-width:500px"],
    [style*="min-width: 500px"],
    [style*="width:600px"],
    [style*="width: 600px"] {
        width: calc(100% - 32px) !important;
        min-width: auto !important;
        max-height: 90vh;
        overflow-y: auto;
    }
}


/* ============================================
   CUSTOM SELECT — Mobile
   ============================================ */

@media (max-width: 768px) {
    .cs-dropdown-portal {
        max-height: 180px !important;
    }
}


/* ============================================
   FORMS — Inline to Stack
   ============================================ */

@media (max-width: 768px) {
    .form-inline {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .search-box {
        flex-direction: column !important;
    }

    .search-box input {
        min-width: auto !important;
        width: 100% !important;
    }
}


/* ============================================
   ADMIN SPECIFIC
   ============================================ */

@media (max-width: 768px) {
    /* Admin filter rows */
    [style*="display:flex"][style*="gap:10px"][style*="margin-bottom"] {
        flex-wrap: wrap !important;
    }

    /* Ticket view reply area */
    .form-group textarea {
        min-height: 80px !important;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .sidebar {
        width: 200px !important;
    }

    .main-content {
        margin-left: 200px !important;
    }
}