/* ═══════════════════════════════════════════════════════════════
   Cashbak.io — Responsive Stylesheet
   ──────────────────────────────────────────────
   Breakpoints:
   - Desktop:  1240px+ (default)
   - Laptop:   1100px - 1239px
   - Tablet:   768px - 1099px
   - Mobile:   < 768px
   - Small:    < 560px
═══════════════════════════════════════════════════════════════ */

/* ==================== LAPTOP (1100px+) ==================== */
@media (max-width: 1100px) {
  /* Hero */
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  
  /* Grids */
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .grid-6 {
    grid-template-columns: repeat(3, 1fr);
  }
  
  /* Steps */
  .steps-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .step:nth-child(2)::after { display: none; }
  
  /* Stats */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* Features */
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* Grid-3 */
  .grid-3 {
    grid-template-columns: 1fr;
  }
  
  /* FAQ */
  .faq-grid {
    grid-template-columns: 1fr;
  }
}

/* ==================== TABLET (768px+) ==================== */
@media (max-width: 980px) {
  .grid-2 {
    grid-template-columns: 1fr;
  }
}

/* ==================== MOBILE (768px) ==================== */
@media (max-width: 768px) {
  /* Topbar */
  /* Remove backdrop-filter on mobile — it creates a stacking context that traps
     .nav drawer inside .topbar, causing .nav-backdrop (z:80) to render ABOVE all
     nav contents (Sign In / Get Started / locale links) and swallow every tap. */
  .topbar { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  .menu-toggle { display: block; }
  .nav {
    display: none;
    position: fixed;
    inset-inline-start: 0;
    inset-inline-end: 0;
    top: 72px;
    background: #fff;
    flex-direction: column;
    gap: 4px;
    padding: 16px 24px;
    box-shadow: var(--shadow-lg);
    border-radius: 0 0 16px 16px;
    z-index: 90;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
  }
  .nav.open { display: flex; }
  html[dir="rtl"] .nav, [dir='rtl'] .nav { flex-direction: column; }
  [dir='rtl'] .nav { inset-inline-start: 0; inset-inline-end: 0; }
  .nav-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 80; }
  .actions .btn { display: none; }
  .actions .cb-locale-switcher { display: none; }
  .nav-mobile-action.btn, .nav-mobile-action { display: flex; }
  /* LocaleSwitcher dropdown inside drawer: go in-flow so it doesn't cover Sign In / Get Started */
  .nav .cb-locale-switcher__menu {
    position: static;
    box-shadow: none;
    border: 0;
    margin-top: 6px;
    padding: 4px 0;
    background: transparent;
    z-index: auto;
    max-height: none;
    min-width: 0;
  }
  
  /* Hero */
  .hero {
    padding: 40px 0 30px;
  }
  
  .hero h1 {
    font-size: var(--fs-3xl);
    letter-spacing: -1.5px;
  }
  
  /* Section */
  .section {
    padding: 40px 0;
  }
  
  .section h2 {
    font-size: var(--fs-2xl);
  }
  
  /* Cards */
  .how-it-works,
  .stats-banner,
  .page-header {
    padding: 36px 22px;
    border-radius: var(--radius-2xl);
  }
  
  .card.large {
    padding: 28px;
    border-radius: var(--radius-2xl);
  }
  
  /* Steps */
  .step:nth-child(1)::after,
  .step:nth-child(3)::after {
    display: none;
  }
  
  /* Features */
  .features-grid {
    grid-template-columns: 1fr;
  }
  
  /* Grid-6 */
  .grid-6 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* Final CTA */
  .final-cta {
    padding: 50px 24px;
    border-radius: var(--radius-2xl);
  }
  
  .final-cta h2 {
    font-size: var(--fs-3xl);
  }
  
  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr;
  }
  
  .footer-bottom {
    flex-direction: column;
  }
  
  /* Buttons in stacks */
  .btn.large {
    font-size: var(--fs-base);
    padding: 14px 22px;
  }
  
  /* Page Header */
  .page-header h1 {
    font-size: var(--fs-2xl);
  }
  
  .header-stats {
    gap: 16px;
  }
}

/* ==================== SMALL MOBILE (560px) ==================== */
@media (max-width: 560px) {
  /* Container padding */
  .container {
    padding: 0 16px;
  }
  
  /* Topbar */
  .topbar-wrap {
    padding: 0 16px;
  }
  
  .topbar {
    padding: 12px 16px;
  }
  
  .brand {
    font-size: 20px;
  }
  
  .brand-icon {
    width: 32px;
    height: 32px;
    font-size: 14px;
  }
  
  /* Hero */
  .hero h1 {
    font-size: 28px;
  }
  
  .hero-subtitle {
    font-size: var(--fs-md);
  }
  
  /* Section */
  .section h2 {
    font-size: 24px;
  }
  
  /* Footer */
  .footer {
    padding: 40px 16px 24px;
  }
  
  /* Hero stats */
  .hero-stats {
    gap: 20px;
  }
  
  .hero-stat strong {
    font-size: 18px;
  }
  
  /* Cards */
  .card {
    padding: 20px;
  }
  
  .feature-card {
    padding: 22px;
  }
  
  /* Final CTA */
  .final-cta h2 {
    font-size: 24px;
  }
  
  /* Hide secondary elements */
  .col-hide,
  .hide-mobile {
    display: none;
  }
}

/* ==================== RTL SUPPORT (Arabic) ==================== */
html[dir="rtl"] body {
  font-family: 'Inter', 'Tajawal', 'Cairo', Arial, Tahoma, sans-serif;
}

html[dir="rtl"] .step:not(:last-child)::after {
  content: "←";
  right: auto;
  left: -20px;
}

html[dir="rtl"] .breadcrumb {
  flex-direction: row-reverse;
}

@media (min-width: 769px) {
  html[dir="rtl"] .nav {
    flex-direction: row-reverse;
  }
}

/* ==================== PRINT ==================== */
@media print {
  .topbar-wrap,
  .footer,
  .final-cta,
  .btn {
    display: none;
  }
  
  body {
    background: white;
  }
}


/* Phase 32 — hide the marketing topbar's Dashboard duplicate on mobile.
   The Bottom Nav covers dashboard entry points on phones. The drawer copy
   (.nav-mobile-action) is kept so the hamburger still surfaces Dashboard. */
@media (max-width: 768px) {
  .actions a[href*="/dashboard"] { display: none; }
}


/* Phase 33 — dashboard topbar overflow fix on mobile. The shared .topbar class
   isn't naturally compact enough on narrow phones: title + actions + brand
   would push past 100vw. Strategy: hide the page title (already redundant
   with the page header inside content), shrink the brand logo, and let
   .topbar-actions stay flush right without shrinking. */
@media (max-width: 768px) {
  .topbar { flex-wrap: nowrap; overflow: hidden; gap: 8px; }
  .topbar-title { display: none; }
  .topbar-actions { flex-shrink: 0; gap: 6px !important; }
  .topbar-brand img { max-height: 28px; }
}


/* Phase 35 — extra tightening for very narrow phones (<380px). dashboard-layout.css
   wins on `gap` without !important; we override with one inside the narrow block. */
@media (max-width: 380px) {
  .topbar-brand img { max-height: 24px; }
  .topbar-actions { gap: 4px !important; }
}