/* ═══════════════════════════════════════════════════════
   MERITZEE — RESPONSIVE CSS  (fixed)
   Breakpoints:
   xs  < 480px   (small phones)
   sm  < 640px   (phones)
   md  < 768px   (large phones / small tablets)
   lg  < 1024px  (tablets / landscape phones)
   xl  < 1200px  (small desktops)
═══════════════════════════════════════════════════════ */

/* ─── HAMBURGER MENU BUTTON ─────────────────────────── */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 4px;
  border: none;
  background: none;
}
.hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text-primary);
  border-radius: 2px;
  transition: all .3s ease;
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile nav drawer */
.mobile-nav {
  display: none;
  position: fixed;
  top: 62px;
  left: 0; right: 0;
  background: #fff;
  border-bottom: 1px solid var(--border);
  padding: 12px 0;
  z-index: 200;
  box-shadow: 0 8px 32px rgba(0,0,0,.12);
  animation: slideDown .2s ease;
}
@keyframes slideDown { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)} }
.mobile-nav.open { display: block; }
.mobile-nav a {
  display: block;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  border-bottom: 1px solid #F4F3FA;
  text-decoration: none;
  transition: background .2s;
}
.mobile-nav a:hover { background: #F4F3FA; }
.mobile-nav a:last-child { border-bottom: none; }
.mobile-nav .mobile-nav-cta {
  margin: 12px 24px 4px;
  display: block;
  background: var(--brand-primary);
  color: #fff;
  text-align: center;
  padding: 12px;
  border-radius: 10px;
  font-weight: 700;
}

/* ─── TABLET (≤ 1024px) ─────────────────────────────── */
@media (max-width: 1024px) {

  /* Navbar */
  .nav-links    { gap: 14px; }
  .nav-link     { font-size: 12px; }

  /* Hero */
  .hero { padding: 48px 0 36px; }
  .hero-grid { grid-template-columns: 1fr 340px; gap: 28px; }
  .hero h1   { font-size: 38px; }

  /* Courses grid */
  .courses-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }

  /* Exam grid */
  .exam-grid { grid-template-columns: repeat(3, 1fr); }

  /* Testimonials */
  .testi-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .testi-grid .testi-card:last-child { grid-column: span 2; max-width: 50%; margin: 0 auto; }

  /* Stats strip */
  .stats-strip-inner { gap: 0; padding: 16px 20px; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .footer-brand { grid-column: span 2; }

  /* Detail */
  .detail-grid { grid-template-columns: 1fr 260px; gap: 20px; }

  /* Dashboard */
  .dashboard-layout { grid-template-columns: 200px 1fr; gap: 16px; }
  .dash-stats { grid-template-columns: repeat(2, 1fr); }

  /* Apply */
  .apply-grid { grid-template-columns: 1fr 240px; gap: 16px; }

  /* Admin */
  .admin-grid { grid-template-columns: 1fr 1fr; }

  /* Auth — tablet keeps the two-column split but tightens spacing */
  .auth-left  { padding: 40px 32px; }
  .auth-right { padding: 40px 40px; }
}

/* ─── MOBILE-TABLET (≤ 768px) ─────────────────────── */
@media (max-width: 768px) {

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

  /*
    OVERFLOW FIX: main.css defines .auth-page / .auth-right with a fixed
    or min-width sized for desktop (e.g. a two-column grid with a fixed
    px track). On mobile that width never shrinks, so the card renders
    at full desktop size and gets clipped by the viewport instead of
    reflowing. Force everything back to 100% of the viewport width.
  */
  html, body { overflow-x: hidden; width: 100%; }
  .auth-page {
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
  }
  .auth-right,
  .auth-left {
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .auth-right *,
  .auth-left *,
  .auth-form,
  .auth-form-group,
  .auth-input-wrap {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  .auth-input {
    width: 100% !important;
  }
  .auth-right-title,
  .auth-right-sub {
    white-space: normal !important;
  }

  /* ── Navbar ── */
  .nav-links    { display: none; }
  .nav-actions  { display: none; }
  .hamburger    { display: flex; }

  /* ── Hero ── */
  .hero { padding: 36px 0 28px; }
  .hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .hero h1   { font-size: 30px; letter-spacing: -1px; }
  .hero-sub  { font-size: 14px; }
  .hero-btns { flex-wrap: wrap; gap: 10px; }
  .hero-btns .btn-primary,
  .hero-btns .btn-ghost { width: 100%; justify-content: center; text-align: center; }
  .hero-stats { gap: 20px; }
  .stat-num   { font-size: 20px; }

  /* ── Stats strip ── */
  .stats-strip-inner { grid-template-columns: repeat(2, 1fr); gap: 0; padding: 12px 16px; }
  .strip-stat + .strip-stat { border-left: none; border-top: 1px solid var(--border); }
  .strip-stat:nth-child(even) { border-left: 1px solid var(--border); }

  /* ── Exam grid ── */
  .exam-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .exam-chip  { padding: 12px 6px; }
  .exam-chip-icon { font-size: 20px; }

  /* ── Courses grid ── */
  .courses-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }

  /* ── Course card sizes ── */
  .course-name { font-size: 12px; }
  .course-meta { flex-wrap: wrap; gap: 6px; }

  /* ── Testimonials ── */
  .testi-grid { grid-template-columns: 1fr; }
  .testi-grid .testi-card:last-child { grid-column: span 1; max-width: 100%; }

  /* ── CTA section ── */
  .cta-section h2 { font-size: 24px; }
  .cta-btns { flex-direction: column; gap: 10px; }
  .btn-white, .btn-outline-white { width: 100%; text-align: center; display: block; }

  /* ── Footer ── */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 24px; padding-bottom: 8px; }
  .footer-brand { grid-column: span 2; }
  .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }

  /* ── Page hero ── */
  .page-title { font-size: 24px; }
  .search-wrap { max-width: 100%; }

  /* ── Detail ── */
  .detail-grid { grid-template-columns: 1fr; }
  .detail-price-card { position: static; }

  /* ── Curriculum split ── */
  .curriculum-split { grid-template-columns: 1fr !important; }

  /* ── Dashboard ── */
  .dashboard-layout { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .sidebar.mobile-open { display: block; position: fixed; top: 62px; left: 0; width: 80%; max-width: 280px; height: calc(100vh - 62px); z-index: 150; overflow-y: auto; border-radius: 0; box-shadow: 4px 0 20px rgba(0,0,0,.15); }
  .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 140; }
  .sidebar-overlay.active { display: block; }

  .dash-stats     { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .active-courses { grid-template-columns: 1fr; }
  .sessions-grid  { grid-template-columns: 1fr; }

  /* ── Live page ── */
  .live-page-body { grid-template-columns: 1fr !important; }
  .live-header { flex-wrap: wrap; gap: 10px; }
  .chat-box { height: 400px; }

  /* ── Apply ── */
  .apply-grid { grid-template-columns: 1fr; }
  .order-card { position: static; }
  .form-grid-2 { grid-template-columns: 1fr; }
  .batch-grid  { grid-template-columns: 1fr; gap: 8px; }
  .batch-card  { display: flex; align-items: center; gap: 12px; text-align: left; padding: 12px; }
  .batch-icon  { font-size: 20px; }
  .steps-bar   { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .step-label  { display: none; }
  .step-label.current { display: block; font-size: 10px; }

  /* ── Confirmation ── */
  .confirm-card { margin: 24px auto; padding: 24px 20px; }

  /* ── Admin ── */
  .admin-grid { grid-template-columns: 1fr; }

  /* ── Auth ──
     Form first, marketing panel below it — reorder instead of hiding. */
  .auth-page {
    grid-template-columns: 1fr;
    display: flex;
    flex-direction: column;
  }
  .auth-right {
    order: 1;
    padding: 36px 24px 40px;
  }
  .auth-left {
    order: 2;
    display: block;
    padding: 32px 20px 40px;
  }
  .auth-right-title { font-size: 22px; }
  .auth-tab-group { flex-wrap: nowrap; }
  .auth-tab { font-size: 13px; padding: 10px 8px; white-space: nowrap; }
  .demo-creds-grid { grid-template-columns: 1fr 1fr; }

  /* Marketing panel content sized down for mobile, now that it's visible */
  .auth-left h2 { font-size: 24px; line-height: 1.3; }
  .auth-left p  { font-size: 13px; }
  .auth-features { gap: 12px; margin-top: 18px; }
  .auth-feature { gap: 10px; }
  .auth-feature-icon { width: 34px; height: 34px; font-size: 16px; }
  .auth-feature-text { font-size: 13px; }
  .auth-feature-sub  { font-size: 11.5px; }

  /* ── Footer col ── */
  .footer-col a { font-size: 12px; }
}

/* ─── SMALL PHONES (≤ 480px) ────────────────────────── */
@media (max-width: 480px) {

  .hero h1   { font-size: 24px; }
  .hero-sub  { font-size: 13px; }
  .stat-num  { font-size: 18px; }
  .stat-lbl  { font-size: 10px; }

  .exam-grid  { grid-template-columns: repeat(2, 1fr); }
  .courses-grid { grid-template-columns: 1fr; }

  .page-title { font-size: 20px; }
  .section-title { font-size: 18px; }

  .hero-stats { flex-wrap: wrap; gap: 16px; }

  .stats-strip-inner { grid-template-columns: 1fr 1fr; }

  .testi-card { padding: 18px; }
  .testi-quote { font-size: 24px; }
  .testi-text  { font-size: 12px; }

  .footer-grid { grid-template-columns: 1fr; }
  .footer-brand { grid-column: span 1; }

  .cta-section h2 { font-size: 20px; }
  .cta-section p  { font-size: 13px; }

  .detail-price { font-size: 28px; }

  .dash-stats { grid-template-columns: 1fr 1fr; }
  .dash-stat-val { font-size: 18px; }

  .filter-chips { gap: 6px; }
  .filter-chip  { padding: 5px 12px; font-size: 11px; }

  .confirm-card { margin: 16px; padding: 20px 16px; }
  .confirm-title { font-size: 20px; }

  .tabs-bar { overflow-x: auto; }
  .tab-btn  { font-size: 12px; padding: 12px 14px; white-space: nowrap; }

  .chapter-head-title { font-size: 12px; }
  .lesson-item        { font-size: 10px; }

  .live-header { padding: 10px 16px; }
  .live-badge  { font-size: 10px; padding: 3px 8px; }

  .auth-right { padding: 28px 16px; }
  .auth-social { grid-template-columns: 1fr; }
  .btn-social  { padding: 10px; }
  .demo-creds-grid { grid-template-columns: 1fr; }

  .upload-card { padding: 18px; }
  .dropzone    { padding: 24px 16px; }
}

/* ─── VERY SMALL PHONES (≤ 360px) ───────────────────── */
@media (max-width: 360px) {
  .hero h1  { font-size: 22px; }
  .nav-logo { font-size: 18px; }
  .courses-grid { grid-template-columns: 1fr; }
  .exam-grid    { grid-template-columns: repeat(2, 1fr); }
  .dash-stats   { grid-template-columns: 1fr 1fr; }
  .form-grid-2  { grid-template-columns: 1fr; }
  .auth-right   { padding: 24px 14px; }
  .auth-tab     { font-size: 12px; padding: 9px 6px; }
}

/* ─── LARGE SCREENS (≥ 1400px) ──────────────────────── */
@media (min-width: 1400px) {
  .container      { max-width: 1320px; }
  .hero h1        { font-size: 54px; }
  .courses-grid   { grid-template-columns: repeat(3, 1fr); }
}

/* ─── UTILITY HELPERS ───────────────────────────────── */
.d-none     { display: none !important; }
.d-flex     { display: flex !important; }
.d-block    { display: block !important; }
.text-center { text-align: center !important; }

/* Touch hover fix */
@media (hover: none) {
  .course-card:hover, .exam-chip:hover, .btn-primary:hover {
    transform: none;
    box-shadow: none;
  }
}

/* ─── MOBILE DASHBOARD TOGGLE BUTTON ────────────────── */
.mob-dash-btn {
  display: none;
  position: fixed;
  bottom: 20px;
  left: 20px;
  background: var(--brand-primary);
  color: #fff;
  width: 48px; height: 48px;
  border-radius: 50%;
  font-size: 18px;
  align-items: center;
  justify-content: center;
  z-index: 100;
  box-shadow: var(--shadow-lg);
  border: none;
  cursor: pointer;
}
@media (max-width: 768px) {
  .mob-dash-btn { display: flex; }
}

/* ─── STICKY MOBILE CTA (Course Detail) ─────────────── */
.mobile-sticky-cta {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: #fff;
  border-top: 1px solid var(--border);
  padding: 12px 16px;
  z-index: 90;
  box-shadow: 0 -4px 20px rgba(0,0,0,.08);
  gap: 10px;
}
@media (max-width: 768px) {
  .mobile-sticky-cta { display: flex; }
  .mobile-sticky-cta .btn-primary { flex: 1; text-align: center; display: block; padding: 13px; }
}

/*
  FIX: the old rule below applied `.container { padding-bottom: 80px; }`
  globally to EVERY page at ≤768px, even pages with no sticky CTA bar
  (home, dashboard, admin, etc), leaving unwanted blank space at the
  bottom of those pages.

  Fix: scope it to pages that actually render the sticky CTA by adding
  `class="has-sticky-cta"` to the <body> tag on those templates
  (e.g. course-detail.php) and only apply the padding there.
*/
@media (max-width: 768px) {
  body.has-sticky-cta .container { padding-bottom: 80px; }
}

/* ─── SCROLL SNAP (Mobile horizontal lists) ─────────── */
@media (max-width: 768px) {
  .snap-scroll {
    display: flex;
    overflow-x: auto;
    gap: 12px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
  }
  .snap-scroll > * {
    scroll-snap-align: start;
    flex-shrink: 0;
  }
  .snap-scroll::-webkit-scrollbar { display: none; }

  /* Horizontal course scroll on mobile */
  .courses-grid-snap {
    display: flex;
    overflow-x: auto;
    gap: 12px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
  }
  .courses-grid-snap .course-card {
    width: 260px;
    flex-shrink: 0;
    scroll-snap-align: start;
  }
  .courses-grid-snap::-webkit-scrollbar { display: none; }
}

/* ─── PRINT ─────────────────────────────────────────── */
@media print {
  .navbar, .footer, .sidebar, .mobile-sticky-cta,
  .mob-dash-btn, .hamburger, .mobile-nav { display: none !important; }
  .confirm-card { box-shadow: none; border: 1px solid #ccc; }
  body { background: #fff; }
}