/**
 * ================================================================
 * FLORAFAL — MASTER MOBILE RESPONSIVE FIX
 * File: public/css/mobile-fix.css
 * ================================================================
 */

/* ── BASE ── */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: hidden; max-width: 100vw; }
img { max-width: 100%; height: auto; }

/* ── TYPOGRAPHY SCALE ── */
@media(max-width:640px){
  h1 { font-size: clamp(22px, 6vw, 36px) !important; }
  h2 { font-size: clamp(18px, 5vw, 28px) !important; }
  .section-title { font-size: clamp(18px, 5vw, 26px) !important; }
}

/* ────────────────────────────────────────
   ANNOUNCEMENT BAR
──────────────────────────────────────── */
@media(max-width:640px){
  .announcement-bar { font-size:11px !important; padding:6px 12px !important; }
}

/* ────────────────────────────────────────
   HEADER
──────────────────────────────────────── */
@media(max-width:767px){
  .header-inner { padding:0 10px !important; gap:6px !important; }
  .site-logo img { max-height:36px !important; width:auto !important; }
  .header-icons { gap:4px !important; }
  .header-icon-btn { width:34px !important; height:34px !important; font-size:14px !important; }
  .location-btn { max-width:110px !important; font-size:10px !important; padding:4px 8px !important; }
  .cart-count-badge { width:16px !important; height:16px !important; font-size:9px !important; top:-4px !important; right:-4px !important; }
}

/* ────────────────────────────────────────
   NAV / MEGA MENU
──────────────────────────────────────── */
@media(max-width:1023px){
  .main-nav { display:none !important; }
  .hamburger-btn { display:flex !important; }
  .mobile-drawer { max-width:320px !important; }
}

/* ────────────────────────────────────────
   HERO SECTION
──────────────────────────────────────── */
@media(max-width:767px){
  .hero-section { min-height:240px !important; }
  .hero-content { padding:24px 16px !important; }
  .hero-content h1 { font-size:clamp(22px,6vw,36px) !important; }
  .hero-cta-wrap { flex-direction:column !important; gap:10px !important; }
  .hero-cta-wrap .btn { width:100% !important; text-align:center !important; }
  .hero-img { height:200px !important; object-fit:cover !important; }
}
@media(max-width:480px){
  .hero-section { min-height:200px !important; }
}

/* ────────────────────────────────────────
   HOME — CATEGORY TABS / QUICK LINKS
──────────────────────────────────────── */
@media(max-width:767px){
  .category-tabs-wrap { overflow-x:auto !important; scrollbar-width:none !important; -webkit-overflow-scrolling:touch !important; }
  .category-tabs-wrap::-webkit-scrollbar { display:none !important; }
  .category-tab { flex-shrink:0 !important; }
  .quick-links-grid { grid-template-columns:repeat(4,1fr) !important; gap:8px !important; }
}
@media(max-width:480px){
  .quick-links-grid { grid-template-columns:repeat(3,1fr) !important; gap:6px !important; }
  .quick-link-icon { width:48px !important; height:48px !important; font-size:20px !important; }
  .quick-link-label { font-size:10px !important; }
}

/* ────────────────────────────────────────
   HOME — OCCASIONS / FLOWER TYPE SCROLL
──────────────────────────────────────── */
@media(max-width:767px){
  .occasions-scroll, .flower-scroll { gap:10px !important; }
  .occasion-card, .flower-card { width:90px !important; }
  .occasion-img, .flower-img { width:80px !important; height:80px !important; }
}

/* ────────────────────────────────────────
   PRODUCT GRID (listing page)
──────────────────────────────────────── */
@media(max-width:639px){
  #productsGrid,
  .products-grid { grid-template-columns:repeat(2,1fr) !important; gap:10px !important; }
}
@media(max-width:360px){
  #productsGrid,
  .products-grid { grid-template-columns:1fr !important; }
}

/* ────────────────────────────────────────
   PRODUCT CARD
──────────────────────────────────────── */
@media(max-width:639px){
  .product-card-img-wrap { aspect-ratio:1/1 !important; }
  .product-card-body { padding:8px !important; }
  .product-card-name { font-size:12px !important; }
  .product-card-price { font-size:12px !important; gap:3px !important; }
  .product-card-btn { padding:7px 10px !important; font-size:12px !important; }
  .product-card .badge { font-size:9px !important; padding:2px 5px !important; }
}

/* ────────────────────────────────────────
   LISTING PAGE — FILTER SIDEBAR
──────────────────────────────────────── */
@media(max-width:1023px){
  .listing-wrap { grid-template-columns:1fr !important; }
  .listing-sidebar { position:static !important; top:auto !important; }
  .listing-filter-toggle { display:flex !important; }
  .listing-sidebar-inner { display:none !important; }
  .listing-sidebar-inner.open { display:block !important; }
}

/* ────────────────────────────────────────
   PRODUCT DETAIL PAGE
──────────────────────────────────────── */
@media(max-width:860px){
  .pdp-grid { grid-template-columns:1fr !important; gap:20px !important; }
  .gallery-col { position:static !important; top:auto !important; }
}
@media(max-width:640px){
  .pdp-title { font-size:clamp(20px,5vw,28px) !important; }
  .pdp-price-main { font-size:24px !important; }
  .sticky-cta-bar { padding:10px 14px !important; gap:8px !important; }
  .sticky-cta-bar .btn { flex:1 !important; padding:12px 8px !important; font-size:13px !important; }
  .addons-drawer { border-radius:20px 20px 0 0 !important; }
  .addons-grid { grid-template-columns:repeat(2,1fr) !important; }
  .pdp-tabs { overflow-x:auto !important; scrollbar-width:none !important; }
  .pdp-tabs::-webkit-scrollbar { display:none !important; }
  .pdp-tab-btn { flex-shrink:0 !important; font-size:13px !important; padding:10px 14px !important; }
  .slot-cat-cards { grid-template-columns:repeat(2,1fr) !important; }
  .cta-row { grid-template-columns:1fr !important; }
}

/* ────────────────────────────────────────
   CART PAGE
──────────────────────────────────────── */
@media(max-width:767px){
  .cart-wrap { padding:16px 12px 140px !important; }
  .cart-layout { grid-template-columns:1fr !important; }
  .cart-item-row { gap:10px !important; flex-wrap:wrap !important; }
  .cart-item-img { width:70px !important; height:70px !important; }
  .coupon-row { flex-direction:column !important; }
  .coupon-input { width:100% !important; }
}

/* ────────────────────────────────────────
   CHECKOUT PAGE
──────────────────────────────────────── */
@media(max-width:767px){
  .co-wrap { padding:16px 12px 80px !important; }
  .co-grid { grid-template-columns:1fr !important; }
  .form-row { grid-template-columns:1fr !important; }
  .form-full { grid-column:1 !important; }
  .co-step-line { width:20px !important; }
  .co-step span:last-child:not(.co-step-num) { font-size:11px !important; }
}
@media(max-width:480px){
  .co-step span:last-child:not(.co-step-num) { display:none !important; }
  .slot-modal { border-radius:20px 20px 0 0 !important; position:fixed !important; bottom:0 !important; left:0 !important; right:0 !important; max-width:100% !important; max-height:88vh !important; }
  .slot-modal-overlay { align-items:flex-end !important; padding:0 !important; }
}

/* ────────────────────────────────────────
   ACCOUNT LAYOUT
──────────────────────────────────────── */
@media(max-width:1023px){
  .account-layout { grid-template-columns:1fr !important; }
  .account-sidebar { position:static !important; top:auto !important; }
  .account-nav {
    display:flex !important; overflow-x:auto !important;
    white-space:nowrap !important; scrollbar-width:none !important;
    -webkit-overflow-scrolling:touch !important;
    border-bottom:1px solid #eee !important; padding:0 !important;
  }
  .account-nav::-webkit-scrollbar { display:none !important; }
  .account-nav a, .account-logout-btn { flex-shrink:0 !important; border-radius:0 !important; padding:12px 16px !important; border-right:none !important; border-bottom:2px solid transparent !important; }
  .account-nav a.active, .account-nav a:hover { border-bottom-color:var(--color-primary,#c8a96e) !important; background:rgba(200,169,110,.06) !important; }
  .account-sidebar-user { padding:16px !important; }
}
@media(max-width:640px){
  .dashboard-stats { grid-template-columns:repeat(2,1fr) !important; }
  .addr-grid { grid-template-columns:1fr !important; }
  .order-item-row { flex-direction:column !important; gap:10px !important; }
  .profile-form-row { grid-template-columns:1fr !important; }
}

/* ────────────────────────────────────────
   AUTH PAGES
──────────────────────────────────────── */
@media(max-width:640px){
  .auth-card { padding:24px 16px !important; border-radius:14px !important; margin:16px !important; }
  .auth-wrap { padding:20px 0 !important; }
  .social-login-row { flex-direction:column !important; }
  .social-login-row .btn { width:100% !important; }
}

/* ────────────────────────────────────────
   BLOG PAGE
──────────────────────────────────────── */
@media(max-width:767px){
  .blog-grid { grid-template-columns:1fr !important; }
  .blog-featured-link { grid-template-columns:1fr !important; }
  .blog-featured-img { height:200px !important; border-radius:12px 12px 0 0 !important; }
  .blog-cat-tabs { overflow-x:auto !important; scrollbar-width:none !important; white-space:nowrap !important; }
  .blog-cat-tabs::-webkit-scrollbar { display:none !important; }
  .blog-cat-tab { flex-shrink:0 !important; }
}
@media(max-width:480px){
  .blog-hero { padding:40px 16px !important; }
  .blog-hero h1 { font-size:24px !important; }
}

/* ────────────────────────────────────────
   CONTACT PAGE
──────────────────────────────────────── */
@media(max-width:767px){
  .contact-main-grid { grid-template-columns:1fr !important; }
  .contact-form-row { grid-template-columns:1fr !important; }
  .contact-info-cards { grid-template-columns:1fr 1fr !important; }
}
@media(max-width:480px){
  .contact-info-cards { grid-template-columns:1fr !important; }
}

/* ────────────────────────────────────────
   ABOUT PAGE
──────────────────────────────────────── */
@media(max-width:767px){
  .about-story { grid-template-columns:1fr !important; }
  .about-team-grid { grid-template-columns:1fr !important; }
}
@media(max-width:480px){
  .about-hero { padding:40px 16px !important; }
}

/* ────────────────────────────────────────
   WISHLIST
──────────────────────────────────────── */
@media(max-width:639px){
  .wishlist-grid { grid-template-columns:repeat(2,1fr) !important; gap:10px !important; }
}
@media(max-width:360px){
  .wishlist-grid { grid-template-columns:1fr !important; }
}

/* ────────────────────────────────────────
   FOOTER
──────────────────────────────────────── */
@media(max-width:767px){
  .footer-grid { grid-template-columns:1fr 1fr !important; gap:20px !important; }
  .footer-bottom-inner { flex-direction:column !important; text-align:center !important; gap:8px !important; }
  .footer-payment-icons { justify-content:center !important; }
  .footer-seo-grid { grid-template-columns:1fr !important; }
}
@media(max-width:480px){
  .footer-grid { grid-template-columns:1fr !important; }
}

/* ────────────────────────────────────────
   MOBILE BOTTOM NAV
──────────────────────────────────────── */
.mobile-bottom-nav {
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
}
@media(max-width:1023px){
  body { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)) !important; }
}
@media(min-width:1024px){
  .mobile-bottom-nav { display:none !important; }
}

/* ────────────────────────────────────────
   MODALS / DRAWERS
──────────────────────────────────────── */
@media(max-width:640px){
  .modal-box,
  .location-modal-box {
    border-radius:20px 20px 0 0 !important;
    position:fixed !important;
    bottom:0 !important; left:0 !important; right:0 !important;
    max-width:100% !important;
    max-height:88vh !important;
    margin:0 !important;
  }
  .modal-overlay { align-items:flex-end !important; padding:0 !important; }
}

/* ────────────────────────────────────────
   TABLES — horizontal scroll
──────────────────────────────────────── */
@media(max-width:767px){
  table { display:block !important; overflow-x:auto !important; -webkit-overflow-scrolling:touch !important; }
}

/* ────────────────────────────────────────
   BUTTONS — touch-friendly
──────────────────────────────────────── */
@media(max-width:767px){
  .btn, button { min-height:44px; }
  .btn-sm { min-height:36px !important; }
  .qty-btn { width:38px !important; height:38px !important; }
}

/* ────────────────────────────────────────
   SUBSCRIPTION PAGE
──────────────────────────────────────── */
@media(max-width:767px){
  .sub-plans-grid { grid-template-columns:1fr !important; }
  .sub-hero { padding:40px 16px !important; }
}

/* ────────────────────────────────────────
   PAGINATION
──────────────────────────────────────── */
@media(max-width:480px){
  .pagination { gap:4px !important; flex-wrap:wrap !important; justify-content:center !important; }
  .page-link { padding:6px 10px !important; font-size:12px !important; }
}

/* ────────────────────────────────────────
   REVIEW CARDS
──────────────────────────────────────── */
@media(max-width:640px){
  .reviews-grid { grid-template-columns:1fr !important; }
  .review-card { padding:16px !important; }
}

/* ────────────────────────────────────────
   SECTION PADDING
──────────────────────────────────────── */
@media(max-width:640px){
  section { padding:32px 0 !important; }
  .section-inner { padding:0 14px !important; }
  .container { padding:0 14px !important; }
}

/* ────────────────────────────────────────
   LOGO — Prevent double logo / overflow
──────────────────────────────────────── */
.header-logo a { display:flex !important; align-items:center !important; text-decoration:none !important; }
.logo-img { height:44px !important; width:auto !important; max-width:160px !important; object-fit:contain !important; display:block !important; }
.logo-text { font-size:22px !important; font-weight:800 !important; white-space:nowrap !important; line-height:1 !important; }
@media(max-width:767px){
  .logo-img { height:38px !important; max-width:130px !important; }
  .logo-text { font-size:20px !important; }
}
@media(max-width:380px){
  .logo-img { height:32px !important; max-width:110px !important; }
  .logo-text { font-size:18px !important; }
}

/* ── Header container height fix ── */
.florafal-header { min-height:56px !important; }
.header-container { min-height:56px !important; align-items:center !important; }

/* ────────────────────────────────────────
   SWIPER — Fix blank space below slides
──────────────────────────────────────── */
.swiper { overflow: hidden !important; }
.swiper-wrapper { align-items: stretch !important; height: auto !important; }
.swiper-slide { height: auto !important; }
/* Prevent slides from creating extra scroll space */
.products-section .swiper,
.occasions-section .swiper,
.blog-section .swiper,
.reviews-section .swiper { margin-bottom: 0 !important; }

/* ────────────────────────────────────────
   BODY — Prevent black area  
──────────────────────────────────────── */
body.florafal-body,
body.florafal-body.no-ticker,
body.florafal-body.has-ticker { padding-top: 0 !important; }
body, body.florafal-body { background: #fff !important; }
main.main-content { background: #fff !important; min-height: 50vh; }