/* ============================================================
   TAST-E MOBILE RESPONSIVE OVERRIDES
   Add to all pages: <link rel="stylesheet" href="taste-mobile.css">
   ============================================================ */

/* --- MOBILE NAV (hamburger + menu) --- */
.mobile-hamburger{display:none;background:none;border:none;cursor:pointer;padding:8px;z-index:1001}
.mobile-hamburger span{display:block;width:24px;height:2px;background:#334155;margin:5px 0;transition:all .3s;border-radius:2px}
.mobile-hamburger.active span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.mobile-hamburger.active span:nth-child(2){opacity:0}
.mobile-hamburger.active span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}

.mobile-overlay{display:none;position:fixed;inset:0;background:rgba(248,250,251,.98);backdrop-filter:blur(20px);z-index:999;padding-top:80px;flex-direction:column;align-items:center;gap:20px}
.mobile-overlay.open{display:flex}
.mobile-overlay a{font-size:18px;font-weight:600;color:#334155;text-decoration:none;padding:12px 0;letter-spacing:.5px}
.mobile-overlay a:hover{color:#3B7DD8}

@media(max-width:768px){
  .mobile-hamburger{display:block}
  .nav-links,.hm,.nl,.nav-inner>.bo,.nav-inner>.bp,
  .nav-inner>[style*="gap"]:not(:first-child){display:none!important}
  
  /* Fix nav padding */
  .nav-inner{padding:0 12px!important}
  
  /* Generic section padding reduction */
  section,.page-hero,.page-content{padding-left:12px!important;padding-right:12px!important}
  
  /* Ensure modals/overlays fit screen */
  [style*="max-width:600px"],[style*="max-width:560px"],[style*="max-width:520px"],[style*="max-width:480px"]{
    max-width:95vw!important;margin:8px!important;
  }
}

/* --- TOUCH TARGETS --- */
@media(max-width:768px){
  button,a.bp,a.bo,.fb,.fp-pill,.adv-pill,input[type="submit"]{
    min-height:44px;
    min-width:44px;
  }
  
  input,textarea,select{
    font-size:16px!important; /* Prevents iOS zoom on focus */
  }
}

/* --- MARKETPLACE --- */
@media(max-width:768px){
  .mp-layout{grid-template-columns:1fr!important;padding:8px!important}
  .mp-left{position:static!important;max-height:none!important;padding-right:0!important}
  .mp-right{display:none!important}
  
  .marketplace-card{border-radius:12px}
  .marketplace-card img{height:180px!important}
  
  /* Marketplace hero compact */
  .mp-layout+section,[class*="page-hero"]{padding-top:56px!important;padding-bottom:8px!important}
}

@media(max-width:480px){
  .mp-grid{grid-template-columns:1fr 1fr!important;gap:8px!important}
  .marketplace-card img{height:140px!important}
}

/* --- CLOSET --- */
@media(max-width:768px){
  .closet-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))!important;gap:8px!important}
  
  /* Edit overlay full screen on mobile */
  .edit-overlay .edit-panel{
    width:100%!important;max-width:100%!important;height:100vh!important;
    border-radius:0!important;margin:0!important;
  }
  
  /* Closet stats bar */
  .closet-stats{flex-wrap:wrap!important;gap:8px!important}
  .closet-stats>div{min-width:calc(50% - 4px)!important}
}

@media(max-width:380px){
  .closet-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))!important}
}

/* --- STYLE STUDIO --- */
@media(max-width:768px){
  .studio{flex-direction:column!important;overflow-y:auto!important;height:auto!important;min-height:100vh}
  .panel,.panel-r{width:100%!important;max-height:200px!important;border:none!important;border-bottom:1px solid var(--border,#2A2D3A)!important;overflow-x:auto!important}
  .canvas{min-height:420px!important;flex:1}
  .canvas-grid{grid-template-columns:70px 1fr 70px!important}
  .dz{width:65px!important;min-height:50px!important}
  .dz-label{font-size:7px!important}
  .dz-icon{font-size:12px!important}
  .body-wrap{width:250px!important;height:380px!important}
  
  /* Action bar */
  .action-bar,.act{
    flex-wrap:wrap!important;gap:6px!important;padding:8px!important;
  }
  .act button,.fb{font-size:11px!important;padding:8px 10px!important}
  
  /* Result overlay */
  .rov .rc{width:95vw!important;max-width:95vw!important;max-height:90vh!important;overflow-y:auto!important}
  .rov .rc img{max-height:40vh!important}
  .rc-fb{flex-wrap:wrap!important;gap:6px!important}
  
  /* Wizard modal */
  .wizard-modal{width:95vw!important;max-height:85vh!important;overflow-y:auto!important}
  
  /* AI progress overlay */
  [id="aiProgressOv"] > div{width:90vw!important;max-width:90vw!important}
  
  /* Credit shop */
  [id="creditShopOverlay"] > div{width:95vw!important;max-width:95vw!important}
  
  /* History panel items */
  .panel-r .hist-item,.panel-r [onclick*="viewAiJob"]{padding:6px!important}
}

@media(max-width:480px){
  .canvas-grid{grid-template-columns:55px 1fr 55px!important}
  .dz{width:50px!important;min-height:40px!important}
  .body-wrap{width:200px!important;height:310px!important}
}

/* --- LOGIN --- */
@media(max-width:480px){
  .login-card,.auth-card{width:95vw!important;padding:20px!important;border-radius:16px!important}
  .login-card h1,.auth-card h1{font-size:24px!important}
}

/* --- PRICING --- */
@media(max-width:768px){
  .pricing-grid,.tier-grid{grid-template-columns:1fr!important;gap:16px!important;max-width:400px!important;margin:0 auto!important}
  .pricing-card,.tier-card{padding:24px!important}
}

/* --- CHECKOUT --- */
@media(max-width:768px){
  .checkout-layout{grid-template-columns:1fr!important;gap:16px!important}
  .order-summary{position:static!important}
}

/* --- ACCOUNT SETTINGS --- */
@media(max-width:768px){
  .settings-layout,.settings-grid{grid-template-columns:1fr!important}
  .settings-sidebar{position:static!important;width:100%!important;border-right:none!important;border-bottom:1px solid #E2E8F0!important}
  .settings-nav{display:flex!important;overflow-x:auto!important;gap:0!important;white-space:nowrap!important}
  .settings-nav a{padding:12px 16px!important;font-size:12px!important}
}

/* --- SELLER DASHBOARD --- */
@media(max-width:768px){
  .dash-grid{grid-template-columns:1fr 1fr!important;gap:8px!important}
  .dash-card{padding:12px!important}
  .dash-table{overflow-x:auto!important;-webkit-overflow-scrolling:touch}
  .dash-table table{min-width:600px!important}
}

@media(max-width:480px){
  .dash-grid{grid-template-columns:1fr!important}
}

/* --- ORDERS --- */
@media(max-width:600px){
  .order-card{padding:12px!important}
  .order-items{flex-direction:column!important}
  .order-item-img{width:100%!important;height:160px!important}
}

/* --- INFLUENCER PAGES --- */
@media(max-width:768px){
  .influencer-grid{grid-template-columns:1fr 1fr!important;gap:12px!important}
  .influencer-card{padding:12px!important}
  .influencer-hero{padding:60px 16px 24px!important}
  .influencer-hero h1{font-size:24px!important}
}

@media(max-width:480px){
  .influencer-grid{grid-template-columns:1fr!important}
}

/* --- GLOBAL MOBILE UTILITIES --- */
@media(max-width:768px){
  /* Prevent horizontal scroll */
  html,body{overflow-x:hidden!important;max-width:100vw!important}
  
  /* Fix fixed-position elements */
  .nav{padding:6px 0!important}
  
  /* Reduce page top padding (nav is ~50px on mobile) */
  body{padding-top:50px!important}
  
  /* Images responsive */
  img{max-width:100%!important;height:auto}
  
  /* Text sizes */
  h1{font-size:clamp(22px,5vw,36px)!important}
  h2{font-size:clamp(18px,4vw,28px)!important}
  
  /* Footer stack */
  footer .footer-grid,footer [style*="grid-template-columns"]{
    grid-template-columns:1fr 1fr!important;gap:16px!important;
  }
}

@media(max-width:380px){
  footer .footer-grid,footer [style*="grid-template-columns"]{
    grid-template-columns:1fr!important;
  }
}

/* --- BOTTOM NAV (MOBILE) --- */
.mobile-bottom-nav{
  display:none;position:fixed;bottom:0;left:0;right:0;z-index:998;
  background:rgba(255,255,255,.97);backdrop-filter:blur(16px);
  border-top:1px solid #E2E8F0;padding:6px 0 env(safe-area-inset-bottom,6px);
  box-shadow:0 -2px 20px rgba(0,0,0,.06);
}
.mobile-bottom-nav .bn-inner{
  display:flex;justify-content:space-around;align-items:center;max-width:500px;margin:0 auto;
}
.mobile-bottom-nav a{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  text-decoration:none;color:#94A3B8;font-size:10px;font-weight:600;
  padding:4px 8px;transition:color .2s;min-width:50px;
}
.mobile-bottom-nav a .bn-icon{font-size:20px}
.mobile-bottom-nav a.bn-active{color:#3B7DD8}
.mobile-bottom-nav a:hover{color:#3B7DD8}

/* Dark theme bottom nav (style-studio) */
.dark .mobile-bottom-nav,.mobile-bottom-nav.dark{
  background:rgba(15,17,23,.97);border-top:1px solid #2A2D3A;
}
.dark .mobile-bottom-nav a,.mobile-bottom-nav.dark a{color:#64748B}
.dark .mobile-bottom-nav a.bn-active,.mobile-bottom-nav.dark a.bn-active{color:#8B5CF6}

@media(max-width:768px){
  .mobile-bottom-nav{display:block}
  /* Add padding at bottom for bottom nav */
  body{padding-bottom:70px!important}
}