/* ============================================================
   SMM OPTIMIZER — GLOBAL MOBILE RESPONSIVE STYLES
   Covers: public website + admin/user dashboard
   ============================================================ */

/* ---- Shared resets ---- */
*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; height: auto; }

/* ================================================================
   PUBLIC WEBSITE
   ================================================================ */

/* --- HEADER / NAV --- */
@media (max-width: 991px) {
    .header-area .main-nav .nav {
        display: none;
        position: absolute;
        top: 70px; left: 0; right: 0;
        background: #fff;
        padding: 16px 0;
        box-shadow: 0 8px 32px rgba(0,0,0,0.12);
        z-index: 1000;
        flex-direction: column;
        border-top: 2px solid #f0f1f6;
    }
    .header-area .main-nav .nav.open { display: flex; }
    .header-area .main-nav .nav li { width: 100%; }
    .header-area .main-nav .nav li a {
        display: block; padding: 12px 24px;
        border-bottom: 1px solid #f3f4f6;
        font-size: 15px;
    }
    .header-area .main-nav .nav li.try a,
    .header-area .main-nav .nav li.login a {
        margin: 6px 16px; display: inline-block; width: auto;
    }
    .menu-trigger { display: block !important; }
    .header-area { padding: 0; }
}
@media (max-width: 575px) {
    .header-area .logo img { height: 36px; }
}

/* --- HERO SECTION --- */
@media (max-width: 991px) {
    .smm-hero { padding: 100px 0 60px; min-height: auto; }
    .hero-right { margin-top: 40px; }
    .hero-dashboard { padding: 20px; }
    .metric-row { padding: 10px 14px; }
}
@media (max-width: 767px) {
    .hero-headline { font-size: 2rem; }
    .hero-subtext { font-size: 1rem; }
    .hero-actions { flex-direction: column; }
    .btn-primary-glow, .btn-ghost-white { width: 100%; justify-content: center; text-align: center; }
    .smm-hero { padding: 90px 0 50px; }
    .hero-right { display: none; } /* hide floating cards on small phones */
    .platform-chips { gap: 8px; }
    .p-chip { font-size: 12px; padding: 6px 12px; }
    .hero-eyebrow { font-size: 11px; }
}

/* --- STATS BAR --- */
@media (max-width: 767px) {
    .stats-bar { padding: 30px 0; }
    .stat-box { padding: 10px 12px; }
    .stat-box .num { font-size: 2rem; }
    .stat-box .lbl { font-size: 0.75rem; }
}

/* --- PLATFORMS PREVIEW --- */
@media (max-width: 767px) {
    .platforms-preview { padding: 60px 0 50px; }
    .section-heading { font-size: 1.5rem; }
    .section-desc { font-size: 0.95rem; }
    .plat-card { padding: 22px 16px; }
    .plat-icon { width: 58px; height: 58px; font-size: 24px; border-radius: 16px; }
}

/* --- WHY US / BENEFIT CARDS --- */
@media (max-width: 767px) {
    .whyus-section { padding: 60px 0; }
    .benefit-card { padding: 28px 22px; margin-bottom: 4px; }
}

/* --- TESTIMONIAL TEASER --- */
@media (max-width: 991px) {
    .testi-teaser { padding: 60px 0; }
    .testi-right-text h2 { font-size: 1.6rem; }
    .quote-card { padding: 24px; }
}
@media (max-width: 767px) {
    .btn-ghost-white { width: 100%; justify-content: center; }
}

/* --- CTA BANNER --- */
@media (max-width: 767px) {
    .cta-banner { padding: 60px 0; }
    .cta-banner h2 { font-size: 1.6rem; }
    .cta-btns { flex-direction: column; align-items: center; }
    .btn-cta-white, .btn-cta-border { width: 100%; max-width: 320px; text-align: center; }
}

/* --- PAGE HERO (inner pages) --- */
@media (max-width: 767px) {
    .page-hero { padding: 90px 0 50px; }
    .page-hero h1 { font-size: 1.8rem; }
}

/* --- SERVICES PAGE --- */
@media (max-width: 767px) {
    .services-section { padding: 50px 0; }
    .service-card { padding: 26px 18px; }
    .service-icon { width: 58px; height: 58px; font-size: 24px; }
}

/* --- FEATURES PAGE --- */
@media (max-width: 767px) {
    .features-section { padding: 50px 0; }
    .feature-card { padding: 26px 18px; }
    .compare-section { padding: 50px 0; }
    .compare-table th, .compare-table td { padding: 12px 14px; font-size: 13px; }
}

/* --- TESTIMONIALS PAGE --- */
@media (max-width: 767px) {
    .testimonials-section { padding: 50px 0; }
    .testi-card { padding: 24px 20px; }
    .testi-stats { padding: 40px 0; }
    .tstat .num { font-size: 2rem; }
    .featured-quote { padding: 32px 22px; }
    .featured-quote .big-quote { font-size: 1rem; }
}

/* --- CONTACT PAGE --- */
@media (max-width: 767px) {
    .contact-section { padding: 50px 0; }
    .contact-form-card { padding: 24px 18px; }
    .contact-info-card { padding: 28px 20px; margin-bottom: 20px; }
    .fee-info-grid { grid-template-columns: 1fr 1fr; }
}

/* --- ADD FUNDS --- */
@media (max-width: 767px) {
    .payment-methods-row { gap: 10px; }
    .payment-tab-card { min-width: calc(50% - 8px); padding: 14px 14px; }
    .funds-card-header { padding: 20px 20px; }
    .funds-card-body { padding: 20px; }
    .quick-amounts { gap: 8px; }
    .quick-amount-btn { padding: 7px 14px; font-size: 12px; }
    .fee-info-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
    .total-box { flex-direction: column; text-align: center; gap: 8px; }
    .total-box .total-amount { font-size: 1.5rem; }
}

/* ================================================================
   ADMIN / USER DASHBOARD
   ================================================================ */

/* --- USER DASHBOARD --- */
@media (max-width: 991px) {
    .welcome-banner { padding: 22px 22px; }
    .welcome-name { font-size: 1.3rem; }
    .welcome-actions { width: 100%; }
    .btn-wb { flex: 1; justify-content: center; }
}
@media (max-width: 767px) {
    .user-dashboard { padding: 16px 0 30px; }
    .welcome-banner { flex-direction: column; padding: 20px 18px; border-radius: 14px; }
    .welcome-actions { flex-direction: column; width: 100%; }
    .btn-wb { width: 100%; justify-content: center; }
    .key-stats { grid-template-columns: 1fr 1fr; gap: 12px; }
    .key-stat-card { padding: 16px 14px; gap: 12px; }
    .stat-icon-wrap { width: 44px; height: 44px; font-size: 18px; }
    .stat-value { font-size: 1.2rem; }
    .order-status-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
    .os-card { padding: 16px 12px; }
    .os-icon { width: 40px; height: 40px; font-size: 16px; border-radius: 12px; }
    .os-count { font-size: 1.6rem; }
    .quick-actions { grid-template-columns: 1fr 1fr; gap: 10px; }
    .qa-card { padding: 16px 12px; gap: 10px; }
    .qa-icon { width: 38px; height: 38px; font-size: 15px; }
    .info-strip { flex-direction: column; text-align: center; }
    .info-strip-action { width: 100%; text-align: center; }
}
@media (max-width: 480px) {
    .key-stats { grid-template-columns: 1fr; }
    .order-status-grid { grid-template-columns: repeat(2, 1fr); }
    .quick-actions { grid-template-columns: 1fr; }
}

/* --- ADMIN DASHBOARD --- */
@media (max-width: 991px) {
    .admin-banner { padding: 20px 20px; }
    .admin-banner-left h2 { font-size: 1.2rem; }
    .admin-banner-right { width: 100%; }
    .btn-ab { flex: 1; justify-content: center; }
}
@media (max-width: 767px) {
    .admin-dash { padding: 14px 0 24px; }
    .admin-banner { flex-direction: column; border-radius: 14px; }
    .admin-banner-right { flex-direction: column; width: 100%; }
    .btn-ab { width: 100%; justify-content: center; }
    .kpi-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
    .kpi-card { padding: 16px 14px; gap: 12px; }
    .kpi-icon { width: 44px; height: 44px; font-size: 18px; }
    .kpi-text .val { font-size: 1.2rem; }
    .os-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
    .os-tile { padding: 14px 10px; }
    .os-tile .os-ico { width: 38px; height: 38px; font-size: 16px; }
    .os-tile .os-num { font-size: 1.5rem; }
    .qa-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .qa-item { padding: 14px 12px; gap: 10px; }
    .qa-ico { width: 36px; height: 36px; font-size: 14px; }
    .alert-strip { flex-direction: column; text-align: center; }
    .alert-strip a { width: 100%; text-align: center; display: block; }
}
@media (max-width: 480px) {
    .kpi-grid { grid-template-columns: 1fr; }
    .os-grid { grid-template-columns: repeat(2, 1fr); }
    .qa-grid { grid-template-columns: 1fr; }
}

/* --- RECENT ORDERS TABLE --- */
@media (max-width: 767px) {
    .recent-card { border-radius: 14px; }
    .rc-table th:nth-child(4),
    .rc-table td:nth-child(4),
    .rc-table th:nth-child(6),
    .rc-table td:nth-child(6) { display: none; } /* hide total & date on small */
    .rc-table th, .rc-table td { padding: 10px 12px; }
    .svc-name-short { max-width: 140px; }
}

/* --- ORDER CARDS --- */
@media (max-width: 767px) {
    .orders-page { padding: 12px 0; }
    .orders-stats { grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
    .stat-card { padding: 14px 10px; border-radius: 12px; }
    .stat-card .s-num { font-size: 1.4rem; }
    .stat-card .s-lbl { font-size: 10px; }
    .orders-topbar { padding: 12px 14px; gap: 10px; }
    .orders-topbar .search-wrap { min-width: 100%; }
    .btn-search-o, .btn-new-order { width: 100%; justify-content: center; }
    .order-card-top { flex-wrap: wrap; gap: 8px; padding: 12px 14px 10px; }
    .order-service-name { font-size: 13px; min-width: 0; }
    .order-card-body { padding: 10px 14px; }
    .order-stats-row { gap: 12px; }
    .order-stat .v { font-size: 13px; }
    .order-card-foot { flex-direction: column; align-items: flex-start; gap: 10px; padding: 10px 14px; }
    .order-date { font-size: 11px; }
    .orders-pagination { flex-direction: column; gap: 10px; align-items: center; }
}
@media (max-width: 480px) {
    .orders-stats { grid-template-columns: repeat(2, 1fr); }
    .order-stats-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
}

/* --- SERVICE CARDS --- */
@media (max-width: 767px) {
    .services-page { padding: 12px 0; }
    .platform-filter-wrap { gap: 8px; margin-bottom: 18px; }
    .pf-card { min-width: 70px; padding: 12px 10px; border-radius: 12px; }
    .pf-icon { width: 38px; height: 38px; font-size: 16px; border-radius: 11px; margin-bottom: 6px; }
    .pf-label { font-size: 11px; }
    .services-topbar { padding: 12px 14px; gap: 10px; }
    .services-topbar .search-wrap { min-width: 100%; }
    .btn-search-o { width: 100%; justify-content: center; }
    .services-grid { grid-template-columns: 1fr; gap: 12px; }
    .svc-card-header { padding: 12px 14px 10px; }
    .svc-card-body { padding: 10px 14px; }
    .svc-card-footer { padding: 10px 14px; }
    .svc-stats { gap: 6px; }
}

/* --- ADD FUNDS (admin layout) --- */
@media (max-width: 767px) {
    .payment-methods-row { flex-wrap: wrap; }
    .payment-tab-card { flex: 1 1 calc(50% - 8px); min-width: 130px; }
}

/* --- PLATFORM FILTER (services page admin) --- */
@media (max-width: 600px) {
    .platform-filter-wrap {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 8px;
        -webkit-overflow-scrolling: touch;
    }
    .pf-card { flex-shrink: 0; }
}

/* --- TABLES (general) --- */
@media (max-width: 767px) {
    .table-responsive { -webkit-overflow-scrolling: touch; }
    .block-content { padding: 12px !important; }
}

/* --- TICKETS VIEW PAGE --- */
@media (max-width: 767px) {
    .ticket-area .col-md-5,
    .ticket-area .col-md-7 { margin-bottom: 16px; }
    .js-chat-messages { height: 220px !important; }
}

/* --- FOOTER --- */
@media (max-width: 767px) {
    footer .social { justify-content: center; flex-wrap: wrap; gap: 8px; padding: 0; }
    footer .copyright { text-align: center; }
    footer .copyright p { font-size: 13px; }
}

/* --- GENERAL UTILITIES --- */
@media (max-width: 767px) {
    /* Reduce section padding sitewide */
    section { padding-top: 50px !important; padding-bottom: 50px !important; }
    .section-heading { font-size: 1.5rem !important; }
    .container { padding-left: 16px; padding-right: 16px; }

    /* Make modals full-screen on mobile */
    .modal-dialog { margin: 0.5rem; }
    .modal-content { border-radius: 14px; }

    /* Fix overflow on all pages */
    body { overflow-x: hidden; }
    .row { margin-left: -8px; margin-right: -8px; }
    .col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11,.col-12,
    [class*="col-"] { padding-left: 8px; padding-right: 8px; }
}

/* Touch-friendly tap targets */
@media (max-width: 991px) {
    .btn, button, a.btn { min-height: 40px; }
    .nav-main-link { padding: 12px 18px !important; }
}

/* Smooth horizontal scrolling for filter bars */
.platform-filter-wrap::-webkit-scrollbar { height: 4px; }
.platform-filter-wrap::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 4px; }
.platform-filter-wrap::-webkit-scrollbar-thumb { background: #c7d2fe; border-radius: 4px; }

/* ================================================================
   NEW USER DASHBOARD (.ud-* classes)
   ================================================================ */

/* Header */
@media (max-width: 767px) {
    .ud { padding: 16px 0 32px; }
    .ud-header { flex-direction: column; align-items: flex-start; gap: 12px; }
    .ud-header-left h1 { font-size: 1.2rem; }
    .ud-header-left p  { font-size: 12px; }
    .ud-header-actions { width: 100%; }
    .ud-btn { flex: 1; justify-content: center; }
}

/* Metrics */
@media (max-width: 767px) {
    .ud-metrics { grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 16px; }
    .ud-metric { padding: 16px 14px; }
    .ud-metric-value { font-size: 1.5rem; }
    .ud-metric-label { font-size: 10px; }
}
@media (max-width: 380px) {
    .ud-metrics { grid-template-columns: 1fr; }
}

/* Two-column body → single column */
@media (max-width: 1024px) {
    .ud-body { grid-template-columns: 1fr; }
}

/* Recent orders table — hide less important columns on mobile */
@media (max-width: 767px) {
    .ud-orders-table th:nth-child(3),
    .ud-orders-table td:nth-child(3),
    .ud-orders-table th:nth-child(4),
    .ud-orders-table td:nth-child(4) { display: none; }
    .ud-orders-table th, .ud-orders-table td { padding: 11px 12px; font-size: 12px; }
    .ud-order-service { max-width: 120px; }
    .ud-order-date { font-size: 10px; }
}
@media (max-width: 480px) {
    .ud-orders-table th:nth-child(6),
    .ud-orders-table td:nth-child(6) { display: none; }
}

/* Balance card */
@media (max-width: 767px) {
    .ud-balance-card { padding: 20px; }
    .ud-balance-amount { font-size: 1.8rem; }
}

/* Alert */
@media (max-width: 767px) {
    .ud-alert { padding: 12px 14px; gap: 10px; }
}

/* ================================================================
   SUBSCRIBERS PAGE (.sub-* classes)
   ================================================================ */
@media (max-width: 767px) {
    .sub-stats { grid-template-columns: repeat(3, 1fr); gap: 10px; }
    .sub-stat-card { padding: 14px 10px; }
    .sub-stat-card .s-num { font-size: 1.6rem; }
    .sub-topbar { flex-direction: column; gap: 8px; }
    .sub-topbar .search-wrap { width: 100%; min-width: unset; }
    .sub-topbar select,
    .btn-sub { width: 100%; justify-content: center; }

    /* Hide less important table columns */
    .sub-table th:nth-child(3),
    .sub-table td:nth-child(3) { display: none; }
    .sub-table th, .sub-table td { padding: 12px 12px; }
    .user-av { width: 30px; height: 30px; font-size: 12px; }
    .user-name-cell .name { font-size: 12px; }
    .user-name-cell .email { font-size: 10px; }

    .sub-card-header { flex-direction: column; align-items: flex-start; gap: 8px; }
    .sub-pagination { flex-direction: column; gap: 8px; align-items: center; }
}
@media (max-width: 480px) {
    .sub-stats { grid-template-columns: 1fr 1fr; }
    .sub-table th:nth-child(4),
    .sub-table td:nth-child(4) { display: none; }
}

/* Compose modal */
@media (max-width: 576px) {
    .compose-modal .modal-body { padding: 20px 16px; }
    .compose-modal .modal-footer { padding: 12px 16px; flex-direction: column; gap: 8px; }
    .compose-modal .btn-sub { width: 100%; justify-content: center; }
    .type-grid { grid-template-columns: 1fr 1fr; }
    .recipient-tabs { flex-direction: column; }
}

/* ================================================================
   API DOCS PAGE
   ================================================================ */
@media (max-width: 767px) {
    .api-area { padding: 16px 0; }
    .api-area .card { padding: 20px !important; }
    .api-area .table td, .api-area .table th { font-size: 13px; padding: 10px 12px; }
    .api-area pre { font-size: 12px; padding: 14px; overflow-x: auto; border-radius: 8px; }
    .api-area h4 { font-size: 1rem; }
    .api-area h2 { font-size: 1.3rem; }
}

/* ================================================================
   USER PROFILE / API KEY SECTION
   ================================================================ */
@media (max-width: 767px) {
    #api-token-input { font-size: 11px; }
    .block-content.p-4 { padding: 16px !important; }
    [id="btn-gen-key"], [onclick="copyApiKey()"] { width: 100%; justify-content: center; }
}

/* ================================================================
   ADMIN PANEL — GENERAL TABLE FIX
   ================================================================ */
@media (max-width: 767px) {
    /* All admin tables scroll horizontally instead of breaking layout */
    .block-content table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    /* Transaction table */
    .txn-table th:nth-child(4),
    .txn-table td:nth-child(4),
    .txn-table th:nth-child(5),
    .txn-table td:nth-child(5) { display: none; }
    .txn-card-header { flex-direction: column; align-items: flex-start; gap: 8px; }
    .txn-topbar { flex-direction: column; }
    .txn-topbar .search-wrap { width: 100%; }
    .btn-search { width: 100%; justify-content: center; }
}

/* ================================================================
   FOOTER MOBILE
   ================================================================ */
@media (max-width: 767px) {
    footer { padding: 50px 0 0 !important; }
    footer .row > [class*="col-"] { margin-bottom: 32px !important; }
    footer .row > [class*="col-"]:last-child { margin-bottom: 0 !important; }
    /* Bottom bar stack */
    footer > div:last-child > .container > div {
        flex-direction: column; text-align: center; gap: 12px;
    }
    footer > div:last-child > .container > div > div {
        justify-content: center;
    }
}
@media (max-width: 480px) {
    footer .col-md-6 { text-align: center; }
    footer .col-md-6 ul li a { justify-content: center; }
    footer .col-md-6 > div { align-items: center; }
}

/* ================================================================
   PAYMENT / ADD FUNDS — FULL MOBILE
   ================================================================ */
@media (max-width: 480px) {
    .payment-tab-card { min-width: calc(50% - 6px); }
    .funds-card-header h4 { font-size: 1rem; }
    .submit-funds-btn { width: 100%; }
}

/* ================================================================
   GLOBAL OVERFLOW GUARD
   ================================================================ */
html, body { max-width: 100%; overflow-x: hidden; }
* { box-sizing: border-box; }

/* Fix for Bootstrap modals on mobile */
@media (max-width: 576px) {
    .modal-dialog { margin: 8px; max-width: calc(100% - 16px); }
    .modal-header { padding: 14px 16px; }
    .modal-body { padding: 16px; }
    .modal-footer { padding: 12px 16px; flex-wrap: wrap; gap: 8px; }
    .modal-footer .btn { flex: 1; min-width: 120px; }
}

/* Sidebar nav on mobile (admin) */
@media (max-width: 991px) {
    #sidebar { z-index: 9999; }
    .smm-header-mobile-toggle { touch-action: manipulation; }
}