/* ═══════════════════════════════════════════════════════════════
   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 */
  .menu-toggle { display: block; }
  .nav { display: none; }
  
  /* 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;
}

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

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