/* ============================================================
   ACFixMart — mobile.css  (phase 1: public pages)
   Loaded LAST via _shared/brand-head.php, so it wins over per-page CSS.
   Works from 280px phones up. Desktop (>=981px) is not changed.
   Pure CSS + assets/js/mobile.js — no PHP / database logic touched.
   ============================================================ */

/* ── 0. Safety net (all sizes) ───────────────────────────── */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media(max-width:980px){:where(img,video,canvas,iframe){max-width:100%}}
:where(table){max-width:100%}
pre,code{overflow-wrap:anywhere}
:where(a,button,input,select,textarea,summary,[role=button],[tabindex]):focus-visible{
  outline:3px solid #1e6fe0; outline-offset:2px; border-radius:6px}
.m-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}

/* bottom nav is phone-only */
.mnav{display:none}

/* ── 1. Tablet & down (<=980px) ──────────────────────────── */
@media(max-width:980px){
  body{overflow-x:hidden}
  /* header: search row must be allowed to shrink (this was the overflow cause) */
  .acf-hdr-in{min-width:0}
  .acf-search{min-width:0!important;width:100%}
  .acf-hdr .acf-search input.acf-search-input{width:0;flex:1 1 0;min-width:0;font-size:16px}
  .acf-search-cat{flex:0 1 auto;max-width:42%}
  .acf-search-cat select{font-size:14px}
  /* only the top row scrolls away; the search row stays pinned (offset set by mobile.js) */
  .acf-hdr{position:sticky}
  .acf-actions{min-width:0}
  /* generic grids that must never force width */
  .acf-home,.acf-hero,.acf-main,.acf-stats,.acf-stat,.acf-ftr-grid,.acf-ftr-col,
  .hp-container,.hp-section,.hp-hero,main,section{min-width:0}
}

/* ── 2. Phones (<=768px) ─────────────────────────────────── */
@media(max-width:768px){
  body:has(.mnav){padding-bottom:calc(66px + env(safe-area-inset-bottom,0px))}

  /* comfortable reading + no iOS focus-zoom */
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),
  select,textarea{font-size:16px!important;min-height:44px}
  textarea{min-height:96px}
  button,.btn,[role=button],input[type=submit],input[type=button],
  .btn-book-pkg,.btn-apply-coupon{min-height:44px}
  .btn.sm{min-height:38px}

  /* page wrappers: tighter side padding */
  .page,.wrap,.sell-page,.cart-page,.services-page,.hp-container{padding-left:14px!important;padding-right:14px!important}
  .page{padding-top:18px!important;padding-bottom:28px!important}
  .hp-section{padding:16px 14px!important;margin-left:8px!important;margin-right:8px!important}
  h1{font-size:clamp(22px,6.4vw,30px);line-height:1.2}
  h2{font-size:clamp(18px,5.2vw,24px);line-height:1.25}

  /* ── header ── */
  .acf-hdr-in{padding:8px 12px;gap:8px 10px}
  .acf-actions > .acf-act{min-height:44px;min-width:44px;padding:4px 8px;justify-content:center}
  .acf-cart{min-height:44px;height:auto}
  .acf-search{height:44px!important}
  .acf-search-btn{width:48px!important}
  .acf-lang > button{min-height:44px;min-width:44px}

  /* ── city picker + other modals become bottom sheets ── */
  .modal-overlay,.booking-modal,.modal{align-items:flex-end!important;padding:0!important}
  .city-modal{
    width:100%!important;max-width:100%!important;border-radius:20px 20px 0 0!important;
    padding:22px 18px calc(20px + env(safe-area-inset-bottom,0px))!important;
    max-height:88vh;max-height:88dvh;overflow-y:auto}
  .city-modal .city-grid{gap:8px!important}
  .city-modal .city-chip{min-height:44px;padding:8px 16px!important}
  .booking-box,.modal-inner{
    width:100%!important;max-width:100%!important;border-radius:20px 20px 0 0!important;
    max-height:92vh;max-height:92dvh}
  .modal-inner{padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))}
  .toast{bottom:calc(78px + env(safe-area-inset-bottom,0px))!important;max-width:92vw;text-align:center}

  /* ── home hero, stats, trust chips ── */
  .acf-home{padding:0 10px;margin-top:10px}
  .acf-main{padding:26px 16px 24px}
  .acf-pill{margin-bottom:18px;font-size:12.5px;padding:6px 14px;text-align:center}
  .acf-main h1{font-size:clamp(24px,7.4vw,32px);line-height:1.18;margin-bottom:14px}
  .acf-main p{font-size:15px;line-height:1.55;margin-bottom:20px}
  .acf-main-btns{width:100%;gap:10px;margin-bottom:18px}
  .acf-main-btns a{flex:1 1 100%;justify-content:center;height:48px;padding:0 20px;font-size:15px}
  .acf-trust{gap:8px}
  .acf-trust span{height:auto;min-height:38px;padding:6px 12px;font-size:12.5px}
  .acf-stats{grid-template-columns:1fr 1fr;gap:10px;margin:12px 0 6px}
  .acf-stat{padding:14px 12px;gap:10px;min-width:0}
  .acf-stat > div{min-width:0}
  .acf-stat .ic{width:40px;height:40px;font-size:17px;border-radius:11px}
  .acf-stat b{font-size:18px}
  .acf-stat span{font-size:12.5px;line-height:1.3}

  /* ── footer ── */
  .acf-ftr{padding:28px 18px 0}
  .acf-ftr-grid{grid-template-columns:1fr 1fr;gap:26px 16px}
  .acf-ftr-col a,.acf-ftr-col span.acf-gst{padding:7px 0;line-height:1.35;font-size:14px;overflow-wrap:anywhere}
  .acf-ftr-col h4{font-size:15px}
  .acf-ftr-bottom{margin-top:26px;font-size:13px;flex-direction:column;align-items:flex-start}
  .acf-ftr-bottom nav{gap:6px 18px}
  .acf-ftr-bottom a{padding:6px 0;display:inline-block}
  .acf-social a{width:44px;height:44px}
  .acf-cta-btn{width:100%}

  /* ── account area ── */
  .acct-tabs{
    margin:0 -14px 18px;padding:0 10px;scroll-snap-type:x proximity;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;background:#fff;border-top:1px solid #e6ebf1}
  .acct-tabs::-webkit-scrollbar{display:none}
  .acct-tab{scroll-snap-align:start;min-height:48px;padding:0 14px}
  .acct-hero{margin-bottom:14px}
  .crumb{font-size:12px;margin-bottom:10px;overflow-wrap:anywhere}
  .acct-grid{grid-template-columns:minmax(0,1fr)!important}

  /* generic multi-column blocks collapse */
  .row-2,.form-row-2,.two-col{grid-template-columns:1fr!important}
  .pd-layout,.cart-layout,.policy-wrap,.used-detail{grid-template-columns:1fr!important}
  .prime-plans,.prime-benefits{grid-template-columns:1fr!important}
  [style*="grid-template-columns:1.2fr 1fr"],
  [style*="grid-template-columns: 1.2fr 1fr"]{grid-template-columns:1fr!important}

  /* inline auto-fit stat grids (account overview etc.) → 2-up */
  [style*="repeat(auto-fit,minmax(180px,1fr))"],[style*="repeat(auto-fit, minmax(180px, 1fr))"]{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}

  /* product / listing cards: two-up, compact */
  .grid,.wl-grid,.related-grid,.hp-used-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  .pkg-grid,.prod-grid{grid-template-columns:1fr!important}
  .sticky-mobile-cta{position:fixed;left:0;right:0;bottom:calc(60px + env(safe-area-inset-bottom,0px));z-index:900}

  /* forms: full-width, stacked actions */
  .form-actions,.btn-row{flex-direction:column}
  .form-actions>*,.btn-row>*{width:100%}
  label{display:block}

  /* tables → cards (labels added by mobile.js) */
  table.m-stack{display:block;width:100%;border:0}
  table.m-stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  table.m-stack tbody{display:block}
  table.m-stack tr{
    display:block;margin:0 0 12px;padding:6px 14px;background:#fff;
    border:1px solid #e1e8f0;border-radius:14px;box-shadow:0 2px 8px rgba(19,35,63,.04)}
  table.m-stack td,table.m-stack th[scope=row]{
    display:flex;justify-content:space-between;align-items:center;gap:14px;
    padding:9px 0!important;border:0!important;border-bottom:1px solid #f0f3f7!important;
    text-align:right;min-width:0;overflow-wrap:anywhere}
  table.m-stack td:last-child{border-bottom:0!important}
  table.m-stack td::before{
    content:attr(data-label);flex:0 0 38%;max-width:44%;text-align:left;
    font-size:11.5px;font-weight:700;color:#8a97ab;text-transform:none}
  table.m-stack td:not([data-label])::before,table.m-stack td[data-label=""]::before{display:none}
  table.m-stack td:not([data-label]),table.m-stack td[data-label=""]{justify-content:flex-start;text-align:left}
  table.m-stack td[colspan]{display:block;text-align:center}
  .m-cell{min-width:0;text-align:right}
  .m-cell>*{display:block}
  .m-cell-act{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}
  .m-cell-act>*{display:inline-flex}
  .card[style*="padding:0"]>table.m-stack{padding:12px 12px 0}
  table.m-stack td .btn{white-space:nowrap}
}


/* ── 2b. Admin-edited page content (About / Contact / policy pages stored in DB) ── */
@media(max-width:768px){
  .pi-cg,.pi-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .pi-cbox,.pi-cbox *,.pi-grid *,.pi-cg *{min-width:0;overflow-wrap:anywhere}
  .pi-sec{margin-top:18px}
  .policy-content table,.page-content table,.pi-wrap table{display:block;overflow-x:auto;max-width:100%}
  .policy-content img,.page-content img,.pi-wrap img{max-width:100%;height:auto}
}
@media(max-width:420px){.pi-cg,.pi-grid{grid-template-columns:minmax(0,1fr)!important}}

/* ── 2c. Home page cards ── */
@media(max-width:768px){
  .hp-see-all{display:inline-flex;align-items:center;min-height:44px;padding:0 4px}
  .hp-btn-wish{min-width:44px}
  .hp-soon-tag{font-size:11px}
  .hp-cat-item{min-width:84px;padding:10px 12px!important}
}

/* ── 3. Small phones (<=480px) ───────────────────────────── */
@media(max-width:480px){
  .acf-hdr-in{padding:8px 10px}
  .acf-search-cat{flex:0 1 84px;max-width:84px}
  .acf-search-cat select{padding:0 22px 0 10px;font-size:13px}
  .acf-search-cat i{right:8px}
  .acf-stats{gap:8px}
  .acf-stat{flex-direction:column;align-items:flex-start;gap:8px}
  .acf-ftr-grid{grid-template-columns:1fr 1fr}
  .acf-ftr-brand p{font-size:14px;line-height:1.55}
  .hp-how-grid{grid-template-columns:1fr 1fr!important}
  .acf-cta{padding:26px 16px}
  .acf-cta h2{font-size:21px;line-height:1.3}
  .card{border-radius:16px}
  .btn{padding:11px 14px}
  table.m-stack td::before{flex-basis:40%}
}

/* ── 4. Very small phones (<=360px) ──────────────────────── */
@media(max-width:360px){
  :root{--acf-logo-h:24px}
  .acf-logo{padding:2px 6px}
  .acf-actions > .acf-act{padding:4px 5px;min-width:40px}
  .acf-actions > .acf-act i{font-size:16px}
  .acf-cart{padding:0 9px;margin-left:2px}
  .acf-lang .lg-code{display:none}
  .acf-ftr-grid{grid-template-columns:minmax(0,1fr)}
  .acf-ftr-brand,.acf-ftr-brand *{min-width:0;max-width:100%}
  .acf-social{flex-wrap:wrap}
  .grid,.wl-grid,.related-grid,.hp-used-grid{gap:8px!important}
  .page,.wrap,.sell-page,.cart-page,.services-page,.hp-container{padding-left:10px!important;padding-right:10px!important}
  .acct-tabs{margin-left:-10px;margin-right:-10px}
  .acf-main{padding:22px 12px}
  .acf-pill{font-size:11.5px}
  .mnav a{font-size:10px}
}

/* ── 4a. Partner login role chips + channel tabs ── */
@media(max-width:480px){
  .roles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,118px),1fr))}
  .role{min-height:44px;justify-content:center;min-width:0}
  .ch-tabs{min-width:0}
  .ch-tab{min-width:0;min-height:44px;padding:8px 6px}
}

/* ── 4b. Ultra-narrow (<=300px): the bottom bar already carries Account/Login ── */
@media(max-width:300px){
  .portal-card,.login-card,.auth-card,.card{max-width:100%}
  .portal-wrap,.login-wrap{padding-left:10px!important;padding-right:10px!important}
  .acf-actions a.acf-act[href^="/customer-login"]{display:none}
  .acf-hdr-in{padding:8px 8px}
}

/* ── 5. Bottom navigation (phones only) ──────────────────── */
@media(max-width:768px){
  .mnav{
    display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:1500;
    background:#fff;border-top:1px solid #dfe6f0;box-shadow:0 -4px 18px rgba(10,22,40,.10);
    padding-bottom:env(safe-area-inset-bottom,0px)}
  .mnav a{
    position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    min-height:58px;padding:6px 2px;text-decoration:none;color:#5f6f84;font-size:11px;font-weight:600;line-height:1.1;
    -webkit-tap-highlight-color:transparent;min-width:0}
  .mnav a span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mnav a i{font-size:19px}
  .mnav a.on{color:#1755e8}
  .mnav a.on::before{content:"";position:absolute;top:0;left:28%;right:28%;height:3px;border-radius:0 0 4px 4px;background:#1755e8}
  .mnav a.mnav-cart .mnav-badge{
    position:absolute;top:5px;left:calc(50% + 6px);min-width:17px;height:17px;padding:0 4px;border-radius:9px;
    background:#ff6b1a;color:#fff;font-size:10px;font-weight:700;display:grid;place-items:center;line-height:1}
  .mnav a.mnav-cart .mnav-badge[data-n="0"]{display:none}
  /* keep the chat/whatsapp style floating buttons clear of the bar */
  .wa-float,.whatsapp-float,.chat-fab{bottom:calc(72px + env(safe-area-inset-bottom,0px))!important}
}

/* ── 6. Landscape phones: keep the bar slim ──────────────── */
@media(max-width:900px) and (max-height:480px) and (orientation:landscape){
  .mnav a{min-height:44px;flex-direction:row;gap:6px;font-size:11px}
  .mnav a i{font-size:16px}
  body:has(.mnav){padding-bottom:52px}
}

/* ── 7. Motion preference ────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  .acf-ann-track{animation:none}
  *{scroll-behavior:auto!important}
}