/* ==========================================================
   SmartCafe Customer Responsive v6 — 2026-09-24
   Final corrective layer for /kopinusantara frontend.
   ========================================================== */
html,body{width:100%;max-width:100%;overflow-x:hidden}
body{margin:0;min-width:0}
*,*::before,*::after{min-width:0}
img,video,svg,canvas{max-width:100%;height:auto}

/* Stable shared layout */
.container{box-sizing:border-box!important}
#siteHeader{width:100%!important}
.header-inner{box-sizing:border-box!important}
.logo{min-width:0!important}
.logo-copy{min-width:0!important;overflow:hidden!important}
.header-actions{flex:0 0 auto!important}

/* Footer should never leave an artificial white strip below it. */
footer{width:100%!important;margin-bottom:0!important;padding-bottom:max(0px,env(safe-area-inset-bottom,0px))!important}
footer .footer-bottom{margin-bottom:0!important}

@media (max-width:820px){
  html{scroll-padding-top:60px!important}
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))!important}
  #siteHeader{height:60px!important;min-height:60px!important}
  .header-inner{width:100%!important;max-width:none!important;height:60px!important;min-height:60px!important;padding:0 12px!important;gap:8px!important}
  .logo{flex:1 1 auto!important;max-width:none!important;overflow:hidden!important;gap:8px!important}
  .logo-img,.logo-icon{flex:0 0 34px!important;width:34px!important;height:34px!important;border-radius:10px!important}
  .logo-copy strong{display:block!important;max-width:clamp(112px,38vw,190px)!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;font-size:.86rem!important;line-height:1.2!important}
  .logo-copy small{display:none!important}
  .table-badge{flex:0 1 auto!important;max-width:82px!important;margin-left:auto!important;padding:6px 8px!important;white-space:nowrap!important;overflow:hidden!important}
  .table-badge span{overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
  .header-actions{margin-left:0!important;gap:6px!important}
  .cart-btn,.hamburger{flex:0 0 38px!important;width:38px!important;height:38px!important;min-width:38px!important;min-height:38px!important;border-radius:10px!important}
  .hamburger{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;padding:0!important;gap:4px!important}
  .hamburger span{display:block!important;width:18px!important;height:2px!important;min-height:2px!important;background:#27332b!important;border-radius:999px!important}
  .header-actions #userArea,.header-actions #authArea{display:none!important}

  /* Cleaner off-canvas: enough context remains visible, without covering 90% of the phone. */
  #mainNav{position:fixed!important;top:0!important;right:0!important;bottom:0!important;left:auto!important;width:min(300px,82vw)!important;max-width:300px!important;height:100dvh!important;padding:calc(10px + env(safe-area-inset-top,0px)) 10px calc(16px + env(safe-area-inset-bottom,0px))!important;display:flex!important;flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important;gap:3px!important;background:#fff!important;border-left:1px solid var(--cu4-line)!important;box-shadow:-18px 0 46px rgba(24,34,27,.16)!important;transform:translateX(104%)!important;transition:transform .22s ease!important;overflow-y:auto!important;overscroll-behavior:contain!important;z-index:300!important}
  #mainNav.open{transform:translateX(0)!important}
  #mainNav a{flex:0 0 auto!important;width:100%!important;min-height:44px!important;padding:0 11px!important;border-radius:9px!important;font-size:.78rem!important}
  .mobile-nav-head{display:flex!important;align-items:center!important;justify-content:space-between!important;min-height:46px!important;margin-bottom:5px!important;padding:0 4px 9px!important;border-bottom:1px solid var(--cu4-line)!important;font-size:.88rem!important;font-weight:800!important}
  .mobile-nav-head button{display:grid!important;place-items:center!important;width:34px!important;height:34px!important;border:1px solid var(--cu4-line)!important;border-radius:9px!important;background:#fff!important;color:#3b493f!important}
  .nav-mobile-account{display:block!important;margin-top:auto!important;padding-top:10px!important;border-top:1px solid var(--cu4-line)!important}
  .nav-overlay:not(.hidden){display:block!important;position:fixed!important;inset:0!important;z-index:250!important;background:rgba(18,27,21,.52)!important;backdrop-filter:blur(2px)!important}

  .mobile-bottom-nav{height:calc(60px + env(safe-area-inset-bottom,0px))!important;padding:4px 8px env(safe-area-inset-bottom,0px)!important}
  .mobile-bottom-nav a{height:50px!important;font-size:.61rem!important}

  /* Customer mini hero */
  .page-hero-mini{padding:24px 0 18px!important}
  .page-hero-mini .container{width:calc(100% - 24px)!important}
  .page-hero-mini h2{font-size:1.3rem!important;line-height:1.2!important}
  .page-hero-mini p{font-size:.78rem!important;line-height:1.5!important}

  /* Customer home hero */
  .hero{display:block!important;width:100%!important;max-width:760px!important;margin:0 auto!important;padding:42px 14px 48px!important;min-height:auto!important;text-align:left!important}
  .hero-content{max-width:none!important}
  .hero h1{font-size:clamp(2rem,9vw,3rem)!important;line-height:1.06!important}
  .hero>.hero-content>p{max-width:none!important;font-size:.9rem!important;line-height:1.65!important}
  .hero-cta{display:grid!important;grid-template-columns:1fr!important;gap:8px!important;margin-bottom:28px!important}
  .hero-cta>*{width:100%!important;justify-content:center!important}
  .hero-stats{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:7px!important;overflow:visible!important;padding:14px 0 0!important}
  .hero-stats .stat{min-width:0!important;padding:7px 4px!important;text-align:center!important}
  .hero-stats .stat strong{font-size:.92rem!important}
  .hero-stats .stat span{font-size:.61rem!important;line-height:1.3!important}
  .hero-visual{display:none!important}

  /* Banner: use a taller mobile canvas so artwork is legible. */
  .banner-carousel{width:calc(100% - 24px)!important;margin:14px auto 18px!important;border-radius:13px!important;overflow:hidden!important;background:#fff!important}
  .banner-slide{width:100%!important;aspect-ratio:1.95/1!important;min-height:0!important;max-height:none!important;background:#fff!important}
  .banner-slide img{width:100%!important;height:100%!important;object-fit:cover!important;object-position:center!important;border-radius:0!important}
  .banner-caption{padding:24px 12px 10px!important;font-size:.75rem!important}
  .banner-dots{bottom:7px!important}

  /* Product/menu surface */
  .menu-container{width:calc(100% - 24px)!important;padding-top:14px!important;padding-bottom:28px!important}
  .menu-filters{display:flex!important;flex-wrap:wrap!important;width:100%!important;gap:8px!important;padding:8px!important;border-radius:12px!important}
  .menu-filters input,.menu-filters select{font-size:16px!important}
  .menu-filters input{flex:1 1 100%!important;width:100%!important}
  .filter-tabs{order:3!important;width:100%!important;display:flex!important;flex-wrap:nowrap!important;overflow-x:auto!important;overscroll-behavior-inline:contain!important;scrollbar-width:none!important}
  .filter-tabs::-webkit-scrollbar{display:none!important}
  .filter-tab{flex:0 0 auto!important;white-space:nowrap!important}
  .sort-select{width:100%!important}
  .menu-grid,.best-grid,.products-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}
  .product-card{width:100%!important;min-width:0!important;border-radius:13px!important}
  .product-img-wrap{width:100%!important;height:auto!important;aspect-ratio:4/3!important}
  .product-body{padding:10px!important}
  .product-name{font-size:.84rem!important;line-height:1.28!important}
  .product-desc{font-size:.69rem!important;line-height:1.42!important;min-height:2.8em!important}
  .product-footer{gap:6px!important}
  .product-price{font-size:.8rem!important}
  .add-btn{min-height:32px!important;padding:6px 8px!important;font-size:.68rem!important}

  /* Sections */
  .section-features,.section-how,.section-best,.section-benefits,.section-faq,.section-testi-preview{padding-top:44px!important;padding-bottom:44px!important}
  .section-head{margin-bottom:22px!important}
  .section-head h2{font-size:1.48rem!important}
  .section-head p{font-size:.78rem!important}
  .features-grid,.best-grid,.testi-preview-grid{gap:10px!important}
  .features-grid{grid-template-columns:1fr!important}
  .feature-card{padding:16px!important}
  .benefits-wrap{grid-template-columns:1fr!important;gap:22px!important}
  .benefits-visual{grid-template-columns:1fr 1fr!important;gap:9px!important}
  .benefit-stat-card{padding:15px!important}
  .steps{grid-template-columns:1fr 1fr!important;gap:9px!important}
  .step-arrow{display:none!important}

  /* Forms/cards common across cart, profile, auth, reservation, testimoni, contact. */
  .cart-container,.profil-container,.contact-container,.testi-container,.variant-page{width:calc(100% - 24px)!important;max-width:760px!important;margin-inline:auto!important}
  .cart-container{display:block!important;padding:16px 0 28px!important}
  .cart-item{min-width:0!important}
  .cart-item-info{min-width:0!important}
  .cart-item-name,.cart-options{overflow-wrap:anywhere!important}
  .summary-card{position:static!important;margin-top:12px!important;padding:15px!important}
  .checkout-form input,.checkout-form textarea,.checkout-form select,.form-group input,.form-group textarea,.form-group select{font-size:16px!important;max-width:100%!important}
  .form-row{grid-template-columns:1fr!important;gap:10px!important}
  .pay-methods{flex-direction:column!important}

  .profil-tabs{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto!important;gap:6px!important;scrollbar-width:none!important}
  .profil-tabs::-webkit-scrollbar{display:none!important}
  .profil-tab{flex:0 0 auto!important;white-space:nowrap!important}
  .profil-grid{grid-template-columns:1fr!important}
  .profil-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  .reward-grid,.favorite-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}
  .my-voucher-card,.riwayat-voucher-item,.riwayat-bottom{flex-wrap:wrap!important}
  .voucher-desc{margin-left:0!important;width:100%!important}

  .auth-page{min-height:calc(100dvh - 60px)!important;padding:22px 10px!important}
  .auth-card{width:100%!important;max-width:430px!important;padding:22px 16px!important}
  .success-card{width:min(100%,480px)!important;padding:26px 17px!important}
  .variant-page{padding:0!important}
  .variant-product{align-items:flex-start!important}

  /* Footer: one deliberate mobile layout, no legacy multi-column collision. */
  footer .footer-inner{width:calc(100% - 28px)!important;max-width:760px!important;grid-template-columns:1fr 1fr!important;gap:22px 16px!important;padding:34px 0 26px!important}
  footer .footer-brand{grid-column:1/-1!important}
  footer .footer-brand .logo{max-width:100%!important;font-size:1.15rem!important}
  footer .footer-brand p{max-width:520px!important;font-size:.76rem!important;line-height:1.6!important}
  footer .footer-links,footer .footer-contact{min-width:0!important}
  footer .footer-links a,footer .footer-contact a{font-size:.76rem!important;overflow-wrap:anywhere!important}
  footer .footer-bottom{padding:13px 12px calc(13px + env(safe-area-inset-bottom,0px))!important}
}

@media (min-width:390px) and (max-width:767.98px){
  .header-inner{padding-inline:13px!important}
  .logo-copy strong{max-width:160px!important}
  .banner-slide{aspect-ratio:2/1!important}
  .product-img-wrap{aspect-ratio:4/3!important}
}

@media (max-width:389.98px){
  body{padding-bottom:calc(62px + env(safe-area-inset-bottom,0px))!important}
  .header-inner{height:58px!important;min-height:58px!important;padding:0 9px!important;gap:6px!important}
  #siteHeader{height:58px!important;min-height:58px!important}
  .logo{gap:6px!important}
  .logo-img,.logo-icon{width:32px!important;height:32px!important;flex-basis:32px!important}
  .logo-copy strong{max-width:126px!important;font-size:.82rem!important}
  .table-badge{max-width:70px!important;padding-inline:6px!important;font-size:.62rem!important}
  .cart-btn,.hamburger{width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;flex-basis:36px!important}
  #mainNav{width:min(286px,84vw)!important;max-width:286px!important}

  .page-hero-mini .container,.menu-container,.cart-container,.profil-container,.contact-container,.testi-container,.variant-page{width:calc(100% - 18px)!important}
  .page-hero-mini{padding:21px 0 15px!important}
  .page-hero-mini h2{font-size:1.15rem!important}
  .page-hero-mini p{font-size:.72rem!important}

  .hero{padding:34px 9px 42px!important}
  .hero h1{font-size:clamp(1.82rem,10vw,2.5rem)!important}
  .hero>.hero-content>p{font-size:.85rem!important}
  .hero-stats{grid-template-columns:1fr 1fr!important}
  .hero-stats .stat:last-child{grid-column:1/-1!important}

  .banner-carousel{width:calc(100% - 18px)!important;margin-top:10px!important}
  .banner-slide{aspect-ratio:1.72/1!important}

  .menu-grid,.best-grid,.products-grid{gap:7px!important}
  .product-body{padding:8px!important}
  .product-name{font-size:.8rem!important}
  .product-desc{display:none!important;min-height:0!important}
  .product-category{font-size:.58rem!important}
  .product-price{font-size:.76rem!important}
  .add-btn{min-width:31px!important;padding:6px 7px!important}
  .add-btn span{display:none!important}
  .favorite-btn{width:30px!important;height:30px!important}

  .benefits-visual{grid-template-columns:1fr!important}
  .steps{grid-template-columns:1fr!important}
  .profil-stats{grid-template-columns:1fr!important}
  .reward-grid,.favorite-grid{grid-template-columns:1fr 1fr!important}

  footer .footer-inner{width:calc(100% - 20px)!important;grid-template-columns:1fr!important;gap:18px!important;padding-top:30px!important}
  footer .footer-brand{grid-column:auto!important}
}

@media (max-width:339.98px){
  .logo-copy strong{max-width:104px!important}
  .menu-grid,.best-grid,.products-grid,.reward-grid,.favorite-grid{grid-template-columns:1fr!important}
  .product-img-wrap{aspect-ratio:16/9!important}
}

@media (min-width:821px) and (max-width:1100px){
  .container{width:min(100% - 36px,1180px)!important}
  .header-inner{padding-inline:18px!important}
  .menu-grid,.best-grid,.products-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .cart-container{grid-template-columns:minmax(0,1fr) minmax(310px,350px)!important;gap:16px!important}
}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}