/**
 * Swa-Saksham Agriculture — Shared Responsive Fixes
 * Ensures all-screen friendliness across all pages
 */

/* ─── GLOBAL OVERFLOW FIX ─── */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* ─── NAVBAR RESPONSIVE ─── */
@media (max-width: 900px) {
  .nav-center { display: none !important; }
  .nav-hamburger { display: flex !important; }
  .navbar { padding: 0 1rem !important; height: 64px !important; }
  .nav-logo-wrap img { height: 40px !important; width: 40px !important; }
  .nav-brand-name { font-size: 0.95rem !important; }
  /* Hide some nav-right items on small screens */
  .btn-nav-login { padding: 6px 14px !important; font-size: 0.78rem !important; }
}

@media (max-width: 480px) {
  .nav-right { gap: 0.4rem !important; }
  .btn-lang { padding: 5px 10px !important; font-size: 0.75rem !important; }
  .btn-nav-login { display: none !important; } /* Hidden on very small screens - admin via floating btn */
}

/* ─── FOOTER RESPONSIVE ─── */
@media (max-width: 900px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 2rem !important;
  }
}

@media (max-width: 480px) {
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
  .footer { padding: 40px 1rem 24px !important; }
  .footer-bottom { flex-direction: column; text-align: center; }
}

/* ─── MODAL RESPONSIVE ─── */
@media (max-width: 600px) {
  .modal { 
    width: 98vw !important; 
    max-width: 98vw !important;
    max-height: 95vh !important;
    border-radius: 16px !important;
    margin: 0 auto !important;
  }
  .modal-head { padding: 1rem !important; }
  .modal-head h2 { font-size: 1.2rem !important; }
  .modal-body { padding: 1rem !important; }
  .modal-backdrop { padding: 0.5rem !important; align-items: flex-end !important; }
  .modal { border-radius: 20px 20px 0 0 !important; }
}

/* ─── ADMIN PANEL MOBILE ─── */
@media (max-width: 600px) {
  .adm-tabs { padding: 0 0.75rem !important; }
  .adm-tab-btn { padding: 8px 10px !important; font-size: 0.75rem !important; }
  #admStats { grid-template-columns: 1fr 1fr !important; }
  .ov-grid { grid-template-columns: 1fr !important; }
  .adm-table { font-size: 0.75rem !important; }
  .adm-table th, .adm-table td { padding: 7px 8px !important; }
}

/* ─── BUTTONS RESPONSIVE ─── */
@media (max-width: 480px) {
  .btn { padding: 11px 20px !important; font-size: 0.88rem !important; }
  .hero-btns { flex-direction: column !important; align-items: stretch !important; max-width: 280px !important; margin-left: auto !important; margin-right: auto !important; }
  .hero-btns .btn { justify-content: center !important; text-align: center !important; }
}

/* ─── SECTION PADDING RESPONSIVE ─── */
@media (max-width: 768px) {
  .section { padding: 50px 1.2rem !important; }
  .page-hero { padding: 100px 1rem 3.5rem !important; }
  .section-header { margin-bottom: 2rem !important; }
}

@media (max-width: 480px) {
  .section { padding: 40px 1rem !important; }
}

/* ─── GOOGLE REVIEWS GRID ─── */
@media (max-width: 900px) {
  div[style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: 1fr !important;
  }
}

/* ─── CONTACT PAGE ─── */
@media (max-width: 900px) {
  .contact-layout { grid-template-columns: 1fr !important; }
  .contact-info-block { position: static !important; }
}

@media (max-width: 480px) {
  .contact-form-card { padding: 1.5rem 1rem !important; }
  .social-row { gap: 0.5rem !important; }
  .social-pill { padding: 6px 12px !important; font-size: 0.78rem !important; }
}

/* ─── ABOUT PAGE ─── */
@media (max-width: 900px) {
  .about-story { grid-template-columns: 1fr !important; }
  .about-img-container { grid-template-rows: 160px 160px !important; }
}

@media (max-width: 480px) {
  .products-img-strip { grid-template-columns: 1fr !important; }
  .mission-grid { grid-template-columns: 1fr !important; }
}

/* ─── PRODUCT CARDS ─── */
@media (max-width: 900px) {
  .prod-preview-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 600px) {
  .prod-preview-grid { grid-template-columns: 1fr !important; }
  .ppc-actions { flex-direction: column !important; }
  .ppc-actions .btn { justify-content: center !important; }
}

/* ─── STATS BAR ─── */
@media (max-width: 600px) {
  .stats-inner { grid-template-columns: 1fr 1fr !important; }
  .stat-divider { display: none !important; }
  .stat-num { font-size: 2.2rem !important; }
}

/* ─── FEATURES GRID ─── */
@media (max-width: 900px) {
  .features-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 600px) {
  .features-grid { grid-template-columns: 1fr !important; }
}

/* ─── TESTIMONIALS ─── */
@media (max-width: 900px) {
  .testi-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 600px) {
  .testi-grid { grid-template-columns: 1fr !important; }
}

/* ─── TOAST ─── */
@media (max-width: 480px) {
  .toast { right: 1rem !important; bottom: 1rem !important; max-width: calc(100vw - 2rem) !important; font-size: 0.85rem !important; }
}

/* ─── FLOATING ADMIN BUTTON ─── */
@media (max-width: 480px) {
  #floatingAdminBtn { bottom: 16px !important; left: 16px !important; }
  #floatingAdminPanel { left: 12px !important; width: calc(100vw - 24px) !important; }
}

/* ─── MAP EMBED ─── */
.map-embed iframe {
  width: 100% !important;
}

@media (max-width: 600px) {
  .map-embed iframe { height: 280px !important; }
}

/* ─── HERO VIDEO ─── */
@media (max-width: 600px) {
  video[style*="aspect-ratio:16/7"] {
    aspect-ratio: 16/9 !important;
  }
}

/* ─── FARM SHOWCASE ─── */
@media (max-width: 480px) {
  .farm-showcase img { height: 200px !important; }
}

/* ─── VISIT BANNER ─── */
@media (max-width: 480px) {
  .visit-banner img { height: 200px !important; }
}

/* ─── CTA STRIP ─── */
@media (max-width: 480px) {
  .cta-strip { padding: 2rem 1rem !important; }
  .cta-strip div[style*="display:flex"] { flex-direction: column !important; align-items: center !important; }
}

/* ═══════════════════════════════════════════════════════════
   MOBILE CART FIX — tap target, overflow, z-index
   ═══════════════════════════════════════════════════════════ */

/* ── Prevent any invisible overlay blocking taps ── */
* { -webkit-tap-highlight-color: rgba(0,0,0,0); }

/* ── Navbar: strict height + no overflow clipping ── */
.navbar {
  overflow: visible !important;
  height: 64px !important;
}

/* ── nav-right: only show cart + hamburger on mobile ── */
@media (max-width: 768px) {
  .nav-right {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    flex-shrink: 0 !important;
    overflow: visible !important;
  }

  /* Hide lang button and login button — moved into mobile menu */
  .nav-right .btn-lang       { display: none !important; }
  .nav-right .btn-nav-login  { display: none !important; }
  .nav-right #logoutBtn      { display: none !important; }
  .nav-right .notif-bell-btn { display: none !important; }

  /* ── Cart button: large tap target, always visible ── */
  .nav-cart-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width:  44px !important;
    min-height: 44px !important;
    width:  44px !important;
    height: 44px !important;
    font-size: 1.45rem !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    color: #fff !important;
    cursor: pointer !important;
    position: relative !important;
    z-index: 1010 !important;
    -webkit-appearance: none !important;
    touch-action: manipulation !important;
    pointer-events: auto !important;
    flex-shrink: 0 !important;
  }

  /* Cart badge stays pinned */
  .cart-badge {
    position: absolute !important;
    top:   2px !important;
    right: 2px !important;
    pointer-events: none !important;
  }

  /* ── Hamburger: same large tap target ── */
  .nav-hamburger {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width:  44px !important;
    min-height: 44px !important;
    width:  44px !important;
    height: 44px !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    z-index: 1010 !important;
    touch-action: manipulation !important;
    pointer-events: auto !important;
    flex-shrink: 0 !important;
  }
}

/* ── Very small screens (375px and below) ── */
@media (max-width: 380px) {
  .navbar { padding: 0 0.5rem !important; }
  .nav-logo-wrap .nav-brand { display: none !important; } /* hide text, keep logo img */
}

/* ── Mobile nav links: large tap targets ── */
@media (max-width: 768px) {
  .mobile-nav a {
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
    touch-action: manipulation !important;
  }
}

/* ── Cart modal: sheet from bottom on mobile ── */
@media (max-width: 600px) {
  #ssaCartBackdrop {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  #ssaCartBox {
    border-radius: 20px 20px 0 0 !important;
    max-height: 92vh !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ── Floating admin button: don't overlap cart ── */
@media (max-width: 768px) {
  #ssaAdminFab,
  #floatingAdminBtn {
    bottom: 16px !important;
    left:   16px !important;
    z-index: 8000 !important;
  }
}