/* ============================================================
   css/responsive.css  —  Mobile-First Complete Responsive Fix
   MaOBe Digital  |  v3
   ============================================================ */

/* ─────────────────────────────────────────────────────────────
   BASE GLOBAL — prevent all horizontal overflow on any device
───────────────────────────────────────────────────────────── */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}
*, *::before, *::after {
  min-width: 0;          /* fix flex/grid children blowing out */
}
.container {
  padding-left: 16px;
  padding-right: 16px;
}

/* ─────────────────────────────────────────────────────────────
   HERO — float card must not go off-screen on any size
───────────────────────────────────────────────────────────── */
.hero-float-card {
  position: absolute;
  top: 14px;
  right: 12px;          /* was -16px — clips on tablet */
}

/* ─────────────────────────────────────────────────────────────
   TRUST BAR — horizontal scroll prevention
───────────────────────────────────────────────────────────── */
.trust-bar-inner {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.trust-bar-inner::-webkit-scrollbar { display: none; }
.trust-item { flex-shrink: 0; }

/* ─────────────────────────────────────────────────────────────
   PRODUCT CARD FOOTER — price + button never wrap badly
───────────────────────────────────────────────────────────── */
.product-footer {
  flex-wrap: wrap;
  gap: 10px;
}
.add-to-cart {
  flex-shrink: 0;
}

/* Marketplace card footer same fix */
.mc-footer {
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.mc-btn { flex-shrink: 0; }

/* ─────────────────────────────────────────────────────────────
   MARKET CAT PILLS — horizontal scroll on small screens
───────────────────────────────────────────────────────────── */
.market-cat-pills {
  overflow-x: auto;
  flex-wrap: nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 6px;
}
.market-cat-pills::-webkit-scrollbar { display: none; }
.market-cat-pill { flex-shrink: 0; }

/* ─────────────────────────────────────────────────────────────
   SHOP TABS — same scroll treatment
───────────────────────────────────────────────────────────── */
.shop-tabs {
  overflow-x: auto;
  flex-wrap: nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 6px;
}
.shop-tabs::-webkit-scrollbar { display: none; }
.tab-btn { flex-shrink: 0; }

/* ─────────────────────────────────────────────────────────────
   BOOKING TABS — don't squeeze on small phones
───────────────────────────────────────────────────────────── */
.booking-tabs {
  overflow: visible;
}
.booking-tab {
  font-size: 0.8rem;
  padding: 10px 8px;
}

/* ─────────────────────────────────────────────────────────────
   WHATSAPP FLOATING BUTTON
───────────────────────────────────────────────────────────── */
.whatsapp-fab {
  position: fixed;
  bottom: 28px;
  right: 24px;
  z-index: 850;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #25D366;
  color: #fff;
  border-radius: 100px;
  padding: 14px 20px 14px 16px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  box-shadow: 0 6px 28px rgba(37,211,102,0.45);
  transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
  overflow: hidden;
  white-space: nowrap;
}
.whatsapp-fab:hover {
  background: #1ebe5d;
  box-shadow: 0 10px 40px rgba(37,211,102,0.6);
  transform: translateY(-3px) scale(1.04);
}
.whatsapp-fab svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

/* Pulse ring animation */
.whatsapp-fab::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 100px;
  background: #25D366;
  z-index: -1;
  animation: waPulse 2.5s ease-out infinite;
  opacity: 0;
}
@keyframes waPulse {
  0%   { transform: scale(1);   opacity: 0.6; }
  80%  { transform: scale(1.5); opacity: 0;   }
  100% { transform: scale(1.5); opacity: 0;   }
}

/* On mobile: show only icon to save space */
.whatsapp-fab .wa-label {
  display: inline;
}
@media (max-width: 400px) {
  .whatsapp-fab .wa-label { display: none; }
  .whatsapp-fab { padding: 14px; border-radius: 50%; }
}

/* ═════════════════════════════════════════════════════════════
   BREAKPOINT: ≤ 1024px  (Tablet / Small Laptop)
═════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {

  /* Hero */
  .hero-inner          { grid-template-columns: 1fr; gap: 40px; }
  .hero-visual         { display: none; }
  .hero-title          { font-size: clamp(2rem, 5vw, 3.2rem); }
  #home                { padding: 100px 0 60px; min-height: auto; }

  /* About */
  .about-inner         { grid-template-columns: 1fr; gap: 50px; }
  .about-imgs          { order: -1; max-width: 480px; margin: 0 auto; }
  .about-float-img     { right: 0; }

  /* Contact */
  .contact-inner       { grid-template-columns: 1fr; }

  /* Footer */
  .footer-inner        { grid-template-columns: 1fr 1fr; gap: 36px; }

  /* Marketplace */
  .market-banner       { padding: 36px 28px; }
  .market-grid         { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
}

/* ═════════════════════════════════════════════════════════════
   BREAKPOINT: ≤ 768px  (Mobile Landscape / Large Phone)
═════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Global padding */
  .container           { padding-left: 16px; padding-right: 16px; }

  /* Header / Nav */
  nav                              { display: none; }
  .hamburger                       { display: flex; }
  .nav-actions .btn-outline        { display: none; }
  .nav-inner                       { height: 62px; }

  /* Hero */
  #home                            { padding: 90px 0 50px; }
  .hero-title                      { font-size: clamp(1.9rem, 7vw, 2.6rem); }
  .hero-desc                       { font-size: 1rem; }
  .hero-actions                    { gap: 10px; }
  .hero-stats                      { flex-direction: row; flex-wrap: wrap; gap: 16px 28px; padding-top: 24px; margin-top: 32px; }

  /* Trust bar — already scrollable from base */
  .trust-bar                       { padding: 14px 0; }

  /* Sections */
  #services, #shop, #about         { padding: 72px 0; }
  #marketplace, #contact           { padding: 72px 0; }
  .section-header                  { margin-bottom: 40px; }
  .section-title                   { font-size: clamp(1.7rem, 5.5vw, 2.4rem); }

  /* Service cards */
  .services-grid                   { grid-template-columns: 1fr; gap: 16px; }
  .service-card                    { padding: 24px; }

  /* Shop grid */
  .shop-grid                       { grid-template-columns: 1fr; gap: 18px; }

  /* Market */
  .market-grid                     { grid-template-columns: 1fr; gap: 18px; }
  .market-banner                   { flex-direction: column; gap: 24px; padding: 28px 24px; border-radius: 14px; }
  .market-banner-stats             { justify-content: center; width: 100%; gap: 12px; }
  .mb-stat                         { padding: 14px 18px; min-width: 90px; }

  /* Footer */
  .footer-inner                    { grid-template-columns: 1fr; gap: 32px; }
  .footer-legal                    { flex-direction: column; gap: 8px; }

  /* Forms */
  .form-row                        { grid-template-columns: 1fr; gap: 0; }

  /* Cart */
  .cart-sidebar                    { width: 100%; max-width: 100%; }

  /* Modal */
  .modal                           { padding: 24px; margin: 0 8px; }

  /* WhatsApp FAB position */
  .whatsapp-fab                    { bottom: 20px; right: 16px; }
}

/* ═════════════════════════════════════════════════════════════
   BREAKPOINT: ≤ 480px  (Small Phone — iPhone SE, Moto G)
═════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

  /* Container tighter */
  .container                       { padding-left: 14px; padding-right: 14px; }

  /* Header */
  .logo                            { font-size: 1.1rem; }
  .logo-icon                       { width: 30px; height: 30px; font-size: 0.75rem; }
  .cart-btn                        { width: 38px; height: 38px; border-radius: 10px; }

  /* Hero */
  .hero-eyebrow                    { display: none; }
  .hero-title                      { font-size: clamp(1.7rem, 8vw, 2.2rem); }
  .hero-desc                       { font-size: 0.93rem; }
  .hero-actions                    { flex-direction: column; }
  .hero-actions .btn               { width: 100%; justify-content: center; padding: 14px; }
  .hero-stats                      { gap: 12px 20px; }
  .stat-num                        { font-size: 1.6rem; }

  /* Section headings */
  .section-title                   { font-size: clamp(1.5rem, 7vw, 2rem); }
  .section-subtitle                { font-size: 0.95rem; }
  .section-header                  { margin-bottom: 28px; }

  /* Sections spacing */
  #services, #shop, #marketplace,
  #about, #contact                 { padding: 60px 0; }

  /* Service card */
  .service-card                    { padding: 20px; }
  .service-icon                    { width: 48px; height: 48px; font-size: 1.3rem; }

  /* Product card body */
  .product-body                    { padding: 18px; }
  .product-name                    { font-size: 1rem; }
  .price-amount                    { font-size: 1.4rem; }
  .add-to-cart                     { padding: 9px 14px; font-size: 0.8rem; }

  /* Market card */
  .mc-body                         { padding: 16px; }
  .mc-name                         { font-size: 1rem; }
  .mc-price-main                   { font-size: 1.3rem; }
  .mc-btn                          { padding: 9px 14px; font-size: 0.8rem; }

  /* Market banner */
  .market-banner                   { padding: 20px 16px; border-radius: 12px; }
  .mb-stat                         { padding: 10px 14px; min-width: 70px; }
  .mb-stat-num                     { font-size: 1.3rem; }
  .mb-stat-label                   { font-size: 0.65rem; }
  .market-banner-text h2           { font-size: 1.5rem; }

  /* Market cat pills */
  .market-cat-pill                 { padding: 8px 12px; font-size: 0.78rem; }
  .pill-count                      { display: none; }   /* hide count on tiny screens */

  /* Contact form card */
  .contact-form-card               { padding: 20px; }
  .booking-tab                     { font-size: 0.75rem; padding: 9px 6px; }

  /* Cart */
  .cart-header                     { padding: 18px 16px; }
  .cart-items                      { padding: 14px; }
  .cart-footer                     { padding: 16px; }

  /* Footer */
  .footer-inner                    { gap: 24px; }
  footer                           { padding: 50px 0 0; }
  .footer-brand p                  { font-size: 0.83rem; }
  .footer-bottom                   { flex-direction: column; align-items: flex-start; gap: 8px; }

  /* Modal */
  .modal                           { padding: 20px; margin: 0; border-radius: 16px; }
  .modal-overlay                   { padding: 12px; }
  .modal h3                        { font-size: 1.2rem; }

  /* Toast */
  .toast                           { font-size: 0.82rem; padding: 12px 16px; max-width: calc(100vw - 32px); white-space: normal; }

  /* WhatsApp */
  .whatsapp-fab                    { bottom: 16px; right: 14px; }
}

/* ═════════════════════════════════════════════════════════════
   BREAKPOINT: ≤ 360px  (Extra Small — Galaxy A series, old iPhones)
═════════════════════════════════════════════════════════════ */
@media (max-width: 360px) {
  .container                       { padding-left: 12px; padding-right: 12px; }
  .hero-title                      { font-size: 1.6rem; }
  .section-title                   { font-size: 1.4rem; }
  .market-banner-text h2           { font-size: 1.3rem; }
  .product-footer                  { flex-direction: column; align-items: flex-start; }
  .mc-footer                       { flex-direction: column; align-items: flex-start; }
  .add-to-cart, .mc-btn            { width: 100%; justify-content: center; }
}

/* ─────────────────────────────────────────────────────────────
   TOUCH — disable hover transforms on touch devices
   (prevents stuck hover states on iOS)
───────────────────────────────────────────────────────────── */
@media (hover: none) {
  .service-card:hover,
  .product-card:hover,
  .market-card:hover           { transform: none; box-shadow: none; }
  .btn-primary:hover,
  .btn-outline:hover,
  .add-to-cart:hover,
  .mc-btn:hover,
  .checkout-btn:hover,
  .submit-btn:hover            { transform: none; }
}