@import url('cc-tokens.css');
@import url('cc-responsive.css');

.mobile-menu-toggle {
  display: none;
  width: var(--cc-touch-min);
  height: var(--cc-touch-min);
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
  position: relative;
  margin-left: auto;
  z-index: 10;
}
.hamburger-bars {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 22px;
}
.hamburger-bar {
  display: block;
  width: 100%;
  height: 2px;
  background: #334155;
  border-radius: 2px;
  transition: transform var(--cc-dur-std) var(--cc-ease-std), opacity var(--cc-dur-fast) ease;
}
.mobile-menu-toggle.open .hamburger-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mobile-menu-toggle.open .hamburger-bar:nth-child(2) { opacity: 0; }
.mobile-menu-toggle.open .hamburger-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0);
  pointer-events: none;
  z-index: calc(var(--cc-z-drawer) - 1);
  transition: background var(--cc-dur-std) ease;
}
.mobile-nav-overlay.open {
  background: rgba(0,0,0,0.45);
  pointer-events: all;
}

.mobile-nav-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: var(--cc-drawer-w);
  background: #fff;
  transform: translateX(100%);
  transition: transform var(--cc-dur-slow) var(--cc-ease-out);
  z-index: var(--cc-z-drawer);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1.5rem 1.25rem;
  padding-top: calc(1.5rem + env(safe-area-inset-top));
  padding-bottom: calc(1.5rem + env(safe-area-inset-bottom));
  box-shadow: var(--cc-shadow-xl);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.mobile-nav-drawer.open { transform: translateX(0); }

.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #e2e8f0;
}
.drawer-logo img { height: 28px; width: auto; }
.drawer-close {
  width: var(--cc-touch-min);
  height: var(--cc-touch-min);
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 50%;
  color: #475569;
}
.drawer-close:active { background: #f1f5f9; }

.drawer-nav-links {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}
.drawer-nav-link {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  min-height: var(--cc-touch-min);
  padding: 0 0.75rem;
  border-radius: 10px;
  color: #334155;
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  transition: background var(--cc-dur-fast) ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.drawer-nav-link:active { background: #f1f5f9; }
.drawer-nav-link.active { background: #e0f2fe; color: #0284c7; font-weight: 600; }
.drawer-nav-link svg { flex-shrink: 0; color: #64748b; }
.drawer-nav-link.active svg { color: #0284c7; }

.drawer-divider { height: 1px; background: #e2e8f0; margin: 0.5rem 0; }

.drawer-auth {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.drawer-btn-login {
  display: flex; align-items: center; justify-content: center;
  min-height: var(--cc-touch-min);
  border: 1.5px solid #e2e8f0;
  border-radius: var(--cc-btn-radius);
  color: #334155; font-weight: 600; font-size: 15px; text-decoration: none;
}
.drawer-btn-register {
  display: flex; align-items: center; justify-content: center;
  min-height: var(--cc-touch-min);
  background: #0284c7; color: #fff;
  border-radius: var(--cc-btn-radius);
  font-weight: 600; font-size: 15px; text-decoration: none;
}

@media (max-width: 768px) {
  .mobile-menu-toggle { display: flex; }
  .nav-links, .nav-actions, .nav-divider { display: none !important; }
  .nav-container { height: 56px; padding: 0 var(--cc-page-gutter); }
  .nav-logo-img { height: 28px; }
  .main-nav { z-index: var(--cc-z-nav); }

  .container,
  [class$="-container"],
  [class*="hero-container"],
  [class*="page-container"],
  [class*="section-container"],
  .checkout-grid, .quote-main {
    padding-left: var(--cc-page-gutter) !important;
    padding-right: var(--cc-page-gutter) !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .home-section, .life-section, .motor-section,
  .health-section, .device-section,
  section[class*="-section"] { padding: 40px 0 !important; }
  .section-title { font-size: var(--cc-text-2xl) !important; line-height: 1.25 !important; margin-bottom: 8px !important; }
  .section-subtitle { font-size: var(--cc-text-sm) !important; margin-bottom: 24px !important; }

  .home-hero, .life-hero, .motor-hero,
  .health-hero, .device-hero { padding: 80px 0 40px !important; }
  .home-hero-container, .life-hero-container, .motor-hero-container,
  .health-hero-container, .device-hero-container {
    flex-direction: column !important; padding: 0 var(--cc-page-gutter) !important;
    gap: 24px !important; text-align: center !important; align-items: center !important;
  }
  .home-hero-text, .life-hero-text, .motor-hero-text,
  .health-hero-text, .device-hero-text { max-width: 100% !important; align-items: center !important; }
  .home-hero-text h1, .life-hero-text h1, .motor-hero-text h1,
  .health-hero-text h1, .device-hero-text h1 { font-size: var(--cc-text-3xl) !important; line-height: 1.15 !important; }
  .home-hero-text p, .life-hero-text p, .motor-hero-text p,
  .health-hero-text p, .device-hero-text p { font-size: var(--cc-text-sm) !important; }
  .home-hero-img, .life-hero-img, .motor-hero-img,
  .health-hero-img, .device-hero-img { width: 100% !important; max-width: 100% !important; border-radius: var(--cc-card-radius) !important; }
  .home-chip, .life-chip, .motor-chip, .health-chip, .device-chip { margin: 0 auto !important; }

  .home-hero-cta, .life-hero-cta, .motor-hero-cta,
  .health-hero-cta, .device-hero-cta { align-items: stretch !important; gap: 10px !important; width: 100% !important; }
  .btn-primary { width: 100% !important; justify-content: center !important; min-height: var(--cc-touch-min) !important; border-radius: var(--cc-btn-radius) !important; }
  .btn-outline { width: 100% !important; text-align: center !important; min-height: var(--cc-touch-min) !important; display: flex !important; align-items: center !important; justify-content: center !important; }
  .home-hero-perks, .motor-hero-perks { justify-content: center !important; flex-wrap: wrap !important; gap: 12px !important; }
  .home-hero-perks span, .motor-hero-perks span { font-size: var(--cc-text-2xs) !important; }

  .coverage-grid-four, .coverage-grid-three {
    display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important;
    gap: 12px !important; padding: 4px var(--cc-page-gutter) 16px !important;
    margin: 0 calc(-1 * var(--cc-page-gutter)) !important;
    scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory;
  }
  .coverage-grid-four::-webkit-scrollbar, .coverage-grid-three::-webkit-scrollbar { display: none; }
  .coverage-card { flex: 0 0 250px !important; min-width: 250px !important; scroll-snap-align: start; border-radius: 14px !important; padding: 20px !important; }
  .coverage-icon { width: 40px !important; height: 40px !important; margin-bottom: 14px !important; }
  .coverage-card h3 { font-size: 16px !important; margin-bottom: 12px !important; }
  .coverage-list.short-list li { font-size: 12px !important; margin-bottom: 8px !important; }

  .pricing-grid-three { display: flex !important; flex-direction: column !important; gap: 14px !important; }
  .pricing-card { padding: 24px 20px !important; transform: none !important; }
  .pricing-card.highlight { transform: none !important; }
  .btn-pricing { min-height: var(--cc-touch-min) !important; }

  .process-container { flex-direction: column !important; gap: 24px !important; text-align: left !important; }
  .process-image { display: none !important; }
  .process-steps { gap: 12px !important; }
  .process-step { padding: 14px 16px !important; border-radius: var(--cc-btn-radius) !important; }
  .step-icon { width: 36px !important; height: 36px !important; flex-shrink: 0 !important; }
  .step-text h4 { font-size: 13px !important; }
  .step-text p { font-size: 13px !important; }
  .process-actions { flex-direction: column !important; gap: 10px !important; }
  .process-actions a { width: 100% !important; text-align: center !important; min-height: var(--cc-touch-min) !important; }

  .faq-container { margin-top: 20px !important; }
  .faq-item summary { padding: 16px !important; font-size: 14px !important; min-height: var(--cc-touch-min); }
  .faq-answer { padding: 0 16px 16px !important; font-size: 14px !important; }

  .bottom-cta, [class*="bottom-cta"] { padding: 48px var(--cc-page-gutter) !important; }
  .bottom-cta h2 { font-size: var(--cc-text-2xl) !important; line-height: 1.2 !important; }
  .bottom-cta p { font-size: var(--cc-text-sm) !important; }
  .btn-white { display: block !important; width: 100% !important; text-align: center !important; min-height: var(--cc-touch-min) !important; }

  .footer { padding: 40px 15px 28px !important; }
  .footer-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 20px 16px !important; }
  .footer-brand { grid-column: 1 / -1 !important; }
  .footer-newsletter { grid-column: 1 / -1 !important; }
  .footer-links { width: 100% !important; }
  .newsletter-input { flex-direction: column !important; }
  .newsletter-input input { border-radius: 8px !important; border-right: 1px solid #334155 !important; margin-bottom: 8px !important; min-height: var(--cc-touch-min) !important; font-size: max(16px, 13px) !important; }
  .newsletter-input button { border-radius: 8px !important; min-height: 44px !important; }
  .footer-bottom { margin: 32px var(--cc-page-gutter) 0 !important; font-size: 12px !important; display: flex !important; flex-direction: column !important; align-items: center !important; gap: 8px !important; text-align: center !important; padding-top: 20px !important; border-top: 1px solid #1e293b !important; }

  .floating-action-bar { width: auto !important; max-width: calc(100vw - 32px); bottom: 16px; padding: 6px 10px; gap: 0; z-index: var(--cc-z-fab); }
  .fab-item { flex-direction: column; padding: 6px 10px; gap: 3px; font-size: 10px; flex: unset; min-width: 64px; min-height: var(--cc-touch-min); }
  .fab-icon { width: 28px; height: 28px; }
  .fab-divider { height: 32px; }

  input, select, textarea { font-size: max(16px, 1rem) !important; min-height: var(--cc-touch-min); }

  [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }

  .slide-inner { flex-direction: column !important; gap: 20px !important; }
  .slide-heading { font-size: var(--cc-text-2xl) !important; }
  .slide-desc { font-size: var(--cc-text-sm) !important; }
  .hero-container { flex-direction: column !important; gap: 24px !important; }
  .hero-heading h1 { font-size: var(--cc-text-3xl) !important; }
  .hero-subtitle { font-size: var(--cc-text-sm) !important; }
  .hero-screenshot-card { display: none !important; }
  .hero-floating-bottom-badge { display: none !important; }
  .hero-cta-row { justify-content: center; flex-wrap: wrap; gap: 10px; }

  .products-grid { display: flex !important; overflow-x: auto !important; flex-wrap: nowrap !important; gap: 12px !important; scrollbar-width: none; scroll-snap-type: x mandatory; }
  .products-grid::-webkit-scrollbar { display: none; }
  .product-card { flex: 0 0 140px !important; min-width: 140px !important; scroll-snap-align: start; }

  .impact-container { flex-wrap: wrap !important; gap: 16px !important; }
  .impact-number { font-size: var(--cc-text-xl) !important; }

  .services-grid { grid-template-columns: 1fr !important; }
  .blog-grid { display: flex !important; overflow-x: auto !important; flex-wrap: nowrap !important; gap: 16px !important; scrollbar-width: none; scroll-snap-type: x mandatory; }
  .blog-grid::-webkit-scrollbar { display: none; }
  .blog-card { flex: 0 0 280px !important; min-width: 280px !important; scroll-snap-align: start; }

  .app-container { flex-direction: column !important; text-align: center !important; }
  .app-phone-area { max-width: 280px !important; margin: 0 auto !important; }
  .float-badge { display: none !important; }
  .ussd-banner { flex-direction: column !important; text-align: center !important; }

  .auth-container, .login-container, .register-container { padding: 80px var(--cc-page-gutter) 40px !important; }
  .auth-card, .login-card, .register-card { max-width: 100% !important; padding: 24px !important; }

  .checkout-grid { grid-template-columns: 1fr !important; }
  .checkout-sidebar { order: -1 !important; }

  .contact-grid { grid-template-columns: 1fr !important; }
  .claims-grid, .claims-container { grid-template-columns: 1fr !important; }
  .team-grid { grid-template-columns: 1fr 1fr !important; gap: 16px !important; }

  .quote-container, .quote-main { flex-direction: column !important; }
  .quote-sidebar { order: -1 !important; max-width: 100% !important; }
  .quote-form-row { grid-template-columns: 1fr !important; }
}

@media (max-width: 390px) {
  .home-hero-text h1, .life-hero-text h1, .motor-hero-text h1,
  .health-hero-text h1, .device-hero-text h1 { font-size: var(--cc-text-2xl) !important; }
  .coverage-card { flex: 0 0 220px !important; min-width: 220px !important; }
  .product-card { flex: 0 0 120px !important; min-width: 120px !important; }
  .blog-card { flex: 0 0 250px !important; min-width: 250px !important; }
  .fab-item { min-width: 56px; padding: 4px 8px; font-size: 9px; }
}

@media (min-width: 601px) and (max-width: 1024px) {
  .coverage-grid-four { grid-template-columns: 1fr 1fr !important; }
  .coverage-grid-three { grid-template-columns: 1fr 1fr !important; }
  .pricing-grid-three { grid-template-columns: 1fr 1fr !important; }
  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }
  .services-grid { grid-template-columns: 1fr 1fr !important; }
  .blog-grid { grid-template-columns: 1fr 1fr !important; }
  .products-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; }
  .home-hero-container, .life-hero-container, .motor-hero-container,
  .health-hero-container, .device-hero-container { flex-direction: row !important; gap: 32px !important; }
  .home-hero-text, .life-hero-text, .motor-hero-text,
  .health-hero-text, .device-hero-text { text-align: left !important; align-items: flex-start !important; }
  .home-hero-text h1, .life-hero-text h1, .motor-hero-text h1,
  .health-hero-text h1, .device-hero-text h1 { font-size: var(--cc-text-4xl) !important; }
  .home-chip, .life-chip, .motor-chip, .health-chip, .device-chip { margin: 0 !important; }
  .btn-primary { width: auto !important; }
  .btn-outline { width: auto !important; }
  .process-image { display: block !important; }
  .process-container { flex-direction: row !important; }
  .checkout-grid { grid-template-columns: 1fr 360px !important; }
  .contact-grid { grid-template-columns: 1fr 1fr !important; }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .coverage-grid-four, .coverage-grid-three {
    display: grid !important; overflow-x: visible !important;
  }
  .coverage-card { flex: unset !important; min-width: unset !important; }
}

@media (max-width: 768px) {
  
  .hero-left h1, .about-hero h1, .about-hero-text h1, .contact-hero h1, .inner-hero h1 {
    font-size: var(--cc-text-3xl) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
  }
  .section-head h2, .about-section h2, .contact-section h2, .why-choose-section h2 {
    font-size: var(--cc-text-2xl) !important;
    line-height: 1.25 !important;
    margin-bottom: 12px !important;
  }

  .stats-grid-four, .features-grid-four, .steps-grid, .why-choose-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .services-hero-container {
    flex-direction: column !important;
    text-align: center !important;
    padding: 80px var(--cc-page-gutter) 40px !important;
  }
  .hero-buttons {
    justify-content: center !important;
    flex-direction: column !important;
    gap: 12px !important;
  }
  .hero-buttons a {
    width: 100% !important;
  }
  .hero-right {
    margin-top: 24px !important;
    width: 100% !important;
  }
  .hero-image-box img {
    width: 100% !important;
    border-radius: var(--cc-card-radius) !important;
  }

  .about-hero-container {
    padding: 80px var(--cc-page-gutter) 40px !important;
    text-align: center !important;
  }
  .about-stats {
    flex-direction: column !important;
    gap: 16px !important;
  }
  .about-stat-item {
    width: 100% !important;
  }
  .values-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .team-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
  }
  .timeline-container {
    flex-direction: column !important;
  }
  .timeline-item {
    width: 100% !important;
    padding: 16px 0 !important;
  }

  .contact-hero {
    padding: 80px var(--cc-page-gutter) 40px !important;
  }
  .contact-info-grid {
    grid-template-columns: 1fr !important;
  }

  .app-content h2 {
    font-size: var(--cc-text-2xl) !important;
  }
  .cta-features {
    flex-direction: column !important;
    gap: 12px !important;
  }
}

@media (max-width: 390px) {
  .hero-left h1, .about-hero h1, .contact-hero h1 {
    font-size: var(--cc-text-2xl) !important;
  }
}