/* ============================================================
   GOTAFIMA INSTITUTE OF FINANCIAL MARKETS
   css/responsive.css — Responsive Styles
   ============================================================ */

/* ============================================================
   BREAKPOINTS:
   xl:  1280px  (large desktops)
   lg:  1024px  (laptops / small desktops)
   md:   768px  (tablets)
   sm:   480px  (large phones)
   xs:   360px  (small phones)
   ============================================================ */

/* ============================================================
   XL — 1280px
   ============================================================ */
@media (max-width: 1280px) {
    .container    { padding: 0 32px; }
    .container-lg { padding: 0 32px; }
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   LG — 1024px
   ============================================================ */
@media (max-width: 1024px) {

    /* Container */
    .container    { padding: 0 24px; }
    .container-sm { padding: 0 24px; }

    /* Section */
    section { padding: 64px 0; }

    /* Grid */
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
    .grid-4 { grid-template-columns: repeat(2, 1fr); }

    /* Page Title */
    .page-title { font-size: clamp(36px, 5vw, 56px); }
    .section-title { font-size: clamp(32px, 4vw, 48px); }

    /* Hero */
    .page-hero { padding: 48px 0 40px; }

    /* Navbar */
    .nav-links { gap: 0; }
    .nav-link  { padding: 7px 10px; font-size: 12px; }

    /* Sidebar */
    .sidebar { width: 200px; }

    /* Dashboard main content */
    .dash-main { margin-left: 200px; }

    /* Traders / Signals grid */
    .traders-grid   { grid-template-columns: repeat(2, 1fr) !important; }
    .signals-grid   { grid-template-columns: repeat(2, 1fr) !important; }
    .courses-grid   { grid-template-columns: repeat(2, 1fr) !important; }
    .how-grid       { grid-template-columns: repeat(2, 1fr) !important; }
    .payment-layout { grid-template-columns: 1fr !important; }
    .become-inner   { grid-template-columns: 1fr !important; }
    .indicators-grid { grid-template-columns: repeat(2, 1fr) !important; }

    /* Blog */
    .blog-grid { grid-template-columns: repeat(2, 1fr) !important; }

    /* P2P */
    .p2p-grid { grid-template-columns: repeat(2, 1fr) !important; }

    /* Two col layouts */
    .two-col   { grid-template-columns: 1fr !important; }
    .two-col-r { grid-template-columns: 1fr !important; }
}

/* ============================================================
   MD — 768px (Tablets)
   ============================================================ */
@media (max-width: 768px) {

    /* Container */
    .container    { padding: 0 20px; }
    .container-sm { padding: 0 20px; }
    .container-lg { padding: 0 20px; }

    /* Section */
    section { padding: 52px 0; }

    /* Typography */
    .page-title    { font-size: clamp(32px, 8vw, 48px); }
    .section-title { font-size: clamp(28px, 6vw, 44px); }

    /* Navbar — hide desktop links, show menu button */
    .nav-links  { display: none !important; }
    .menu-btn   { display: block !important; }
    .nav-deriv  { display: none; }
    .nav-dashboard { font-size: 11px; padding: 6px 12px; }

    /* Grids */
    .grid-2 { grid-template-columns: 1fr; }
    .grid-3 { grid-template-columns: 1fr; }
    .grid-4 { grid-template-columns: repeat(2, 1fr); }

    /* Cards grids */
    .traders-grid    { grid-template-columns: 1fr !important; }
    .signals-grid    { grid-template-columns: 1fr !important; }
    .courses-grid    { grid-template-columns: 1fr !important; }
    .indicators-grid { grid-template-columns: 1fr !important; }
    .blog-grid       { grid-template-columns: 1fr !important; }
    .p2p-grid        { grid-template-columns: 1fr !important; }
    .how-grid        { grid-template-columns: repeat(2, 1fr) !important; }

    /* Hero */
    .page-hero { padding: 40px 0 32px; }
    .page-hero > .container > div { flex-direction: column !important; gap: 20px !important; }
    .hero-stats { gap: 20px; }

    /* Page hero CTA buttons — stack vertically */
    .hero-cta { flex-direction: column !important; width: 100% !important; }
    .hero-cta a, .hero-cta button { width: 100% !important; justify-content: center !important; }

    /* Deriv top bar */
    .deriv-topbar span { font-size: 11px; }
    .deriv-topbar a    { font-size: 10px; padding: 3px 10px; }

    /* Deriv bottom */
    .deriv-bottom-inner { flex-direction: column; text-align: center; gap: 10px; }
    .deriv-bottom-inner a { width: 100%; justify-content: center; }

    /* Deriv CTA Section */
    .deriv-cta-inner { flex-direction: column !important; text-align: center; }
    .deriv-cta-inner .dca-sub { margin: 0 auto; }
    .deriv-cta-inner .btn-deriv { width: 100%; justify-content: center; }

    /* Sidebar — hide on mobile, show as overlay */
    .sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        z-index: 200;
        width: 260px;
    }
    .sidebar.open { transform: translateX(0); }
    .dash-main { margin-left: 0 !important; }
    .sidebar-overlay {
        display: none;
        position: fixed; inset: 0;
        background: rgba(0,0,0,0.6);
        z-index: 199;
    }
    .sidebar-overlay.open { display: block; }

    /* Tables — horizontal scroll */
    .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .table th, .table td { padding: 10px 12px; }

    /* Modals */
    .modal-box { margin: 16px; max-width: 100%; }

    /* Two col */
    .two-col   { grid-template-columns: 1fr !important; }
    .two-col-r { grid-template-columns: 1fr !important; }

    /* Payment layout */
    .payment-layout { grid-template-columns: 1fr !important; }
    .become-inner   { grid-template-columns: 1fr !important; }

    /* How it works */
    .how-grid { grid-template-columns: 1fr !important; }

    /* Disclaimer grid */
    #disclaimer .two-col { grid-template-columns: 1fr !important; }

    /* Filter bar */
    .filter-bar {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .filter-tabs { flex-wrap: wrap; }
    .search-wrap { min-width: unset !important; }

    /* Buttons */
    .btn-block-mobile { width: 100% !important; justify-content: center !important; }

    /* WhatsApp float */
    .whatsapp-float { bottom: 20px; right: 20px; width: 46px; height: 46px; font-size: 20px; }

    /* Admin header */
    .admin-header { flex-direction: column !important; gap: 12px !important; align-items: stretch !important; }
    .admin-header h1 { font-size: 28px !important; }

    /* Stats cards */
    .stats-grid { grid-template-columns: repeat(2, 1fr) !important; }

    /* Tabs */
    .tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .tab-btn { white-space: nowrap; padding: 10px 14px; font-size: 12px; }

    /* Pagination */
    .pagination { justify-content: center; }

    /* Section label */
    .section-label { font-size: 10px; letter-spacing: 3px; }
}

/* ============================================================
   SM — 480px (Large Phones)
   ============================================================ */
@media (max-width: 480px) {

    /* Container */
    .container    { padding: 0 16px; }
    .container-sm { padding: 0 16px; }

    /* Section */
    section { padding: 40px 0; }

    /* Typography */
    .page-title    { font-size: clamp(28px, 9vw, 40px); }
    .section-title { font-size: clamp(24px, 7vw, 36px); }
    .page-sub      { font-size: 14px; }

    /* Grid */
    .grid-4 { grid-template-columns: 1fr; }
    .how-grid { grid-template-columns: 1fr !important; }

    /* Hero stats */
    .hero-stats { gap: 16px; }
    .hero-stat-num { font-size: 24px; }

    /* Navbar */
    .logo-tag { display: none; }
    .nav-dashboard { display: none; }

    /* Cards */
    .card-gold { padding: 20px; }

    /* Buttons */
    .btn { padding: 10px 18px; font-size: 13px; }
    .btn-lg { padding: 12px 24px; font-size: 14px; }

    /* Stats grid */
    .stats-grid { grid-template-columns: 1fr !important; }

    /* Address box */
    .address-wrap { flex-direction: column; }
    .address-text { font-size: 11px; }
    .copy-btn { width: 100%; justify-content: center; }

    /* Modal */
    .modal-body { padding: 16px; }
    .modal-header { padding: 14px 16px; }

    /* Table */
    .table th, .table td { padding: 8px 10px; font-size: 12px; }

    /* Deriv topbar — hide text, keep button */
    .deriv-topbar span { display: none; }

    /* Form */
    .form-input { padding: 10px 12px; font-size: 13px; }

    /* Payment steps */
    .payment-steps { gap: 14px; }

    /* Sidebar overlay close */
    .sidebar { width: 240px; }

    /* Badge */
    .badge { font-size: 10px; padding: 3px 8px; }

    /* Disclaimer grid */
    .disc-info-grid { grid-template-columns: 1fr !important; }

    /* Risk box */
    .risk-inner { flex-direction: column !important; }

    /* CTA buttons */
    .disc-btns { flex-direction: column !important; }
    .disc-btns a { width: 100% !important; justify-content: center !important; }
}

/* ============================================================
   XS — 360px (Small Phones)
   ============================================================ */
@media (max-width: 360px) {

    /* Container */
    .container { padding: 0 12px; }

    /* Typography */
    .page-title    { font-size: 26px; }
    .section-title { font-size: 22px; }

    /* Navbar */
    .logo-name { font-size: 15px; letter-spacing: 2px; }
    .logo-icon { width: 28px; height: 28px; font-size: 15px; }

    /* Buttons */
    .btn { padding: 9px 14px; font-size: 12px; }

    /* Hero stats — 2 per row */
    .hero-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }

    /* Tabs */
    .tab-btn { padding: 8px 10px; font-size: 11px; }

    /* Filter tabs */
    .filter-tab { padding: 6px 12px; font-size: 11px; }
}

/* ============================================================
   PRINT
   ============================================================ */
@media print {
    .navbar,
    .deriv-topbar,
    .deriv-bottom,
    .whatsapp-float,
    .sidebar,
    .modal-overlay,
    .menu-btn { display: none !important; }

    body { background: #fff !important; color: #000 !important; }
    .container { max-width: 100% !important; padding: 0 !important; }
    a { color: #000 !important; text-decoration: underline !important; }
    .card, .card-gold { border: 1px solid #ccc !important; background: #fff !important; }

    .page-title, .section-title { color: #000 !important; }
    .text-gold { color: #8a6d00 !important; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .reveal { opacity: 1 !important; transform: none !important; }
    .deriv-topbar { animation: none !important; background-position: 0% 50% !important; }
    .whatsapp-float { animation: none !important; }
}

/* ============================================================
   DARK MODE OVERRIDES (already dark by default)
   ============================================================ */
@media (prefers-color-scheme: light) {
    /* Site is dark-only — force dark regardless of system */
    :root { color-scheme: dark; }
}

/* ============================================================
   LANDSCAPE PHONES
   ============================================================ */
@media (max-width: 768px) and (orientation: landscape) {
    .page-hero { padding: 28px 0 24px; }
    .mobile-menu { overflow-y: auto; }
    section { padding: 40px 0; }
}

/* ============================================================
   HIGH DPI / RETINA
   ============================================================ */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .logo-icon { image-rendering: -webkit-optimize-contrast; }
}