/* Bid2Stay 29.0.9.3.3 — Final Premium Mobile UI Consolidation & Cascade Lock
   Presentation-only release. Loaded last on public/auth surfaces to stabilise the
   accumulated responsive cascade without changing authentication or marketplace logic. */

:root{
  --b2s-lock-gold:#efb326;
  --b2s-lock-gold-soft:#ffd56a;
  --b2s-lock-ink:#07131f;
  --b2s-lock-header:#101b1a;
}

/* Keep responsive surfaces inside the viewport without altering component widths. */
@media (max-width:820px){
  html,body{max-width:100%!important;overflow-x:clip!important}
  *,*::before,*::after{box-sizing:border-box}
  img,svg,video,canvas{max-width:100%}
  button,input,select,textarea,a{min-width:0}
}

/* ---------- Public mobile header: one geometry, one drawer ---------- */
@media (max-width:820px){
  header.b2s-global-header[data-b2s-header-type="public"]{
    position:relative!important;
    z-index:1500!important;
    overflow:visible!important;
    background:rgba(12,25,27,.98)!important;
    border-bottom:1px solid rgba(239,179,38,.30)!important;
    box-shadow:0 8px 24px rgba(2,10,16,.14)!important;
  }

  header.b2s-global-header[data-b2s-header-type="public"] .b2s-global-header-inner{
    position:relative!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 42px!important;
    align-items:center!important;
    gap:10px!important;
    width:100%!important;
    min-height:68px!important;
    padding:10px max(14px,env(safe-area-inset-right)) 10px max(14px,env(safe-area-inset-left))!important;
    overflow:visible!important;
  }

  header.b2s-global-header[data-b2s-header-type="public"] .b2s-global-brand{
    display:inline-flex!important;
    align-items:center!important;
    width:max-content!important;
    max-width:calc(100vw - 82px)!important;
  }
  header.b2s-global-header[data-b2s-header-type="public"] .b2s-global-brand img{
    display:block!important;
    width:auto!important;
    height:auto!important;
    max-width:150px!important;
    max-height:38px!important;
    object-fit:contain!important;
  }

  header.b2s-global-header[data-b2s-header-type="public"] .b2s-mobile-menu-toggle{
    display:inline-grid!important;
    place-items:center!important;
    justify-self:end!important;
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    min-height:42px!important;
    padding:0!important;
    margin:0!important;
    border:1px solid rgba(255,255,255,.16)!important;
    border-radius:12px!important;
    background:#fff!important;
    color:#102238!important;
    box-shadow:0 7px 18px rgba(2,10,18,.18)!important;
  }
  header.b2s-global-header[data-b2s-header-type="public"] .b2s-mobile-menu-toggle svg{
    width:21px!important;
    height:21px!important;
    stroke:currentColor!important;
    stroke-width:1.9!important;
    fill:none!important;
    stroke-linecap:round!important;
  }

  header.b2s-global-header[data-b2s-header-type="public"] .b2s-mobile-drawer{
    position:absolute!important;
    top:calc(100% + 8px)!important;
    right:max(10px,env(safe-area-inset-right))!important;
    left:auto!important;
    width:min(304px,calc(100vw - 20px))!important;
    max-width:304px!important;
    min-width:0!important;
    margin:0!important;
    padding:9px!important;
    border:1px solid rgba(239,179,38,.30)!important;
    border-radius:16px!important;
    background:linear-gradient(180deg,#14252a 0%,#0d1b20 100%)!important;
    box-shadow:0 24px 58px rgba(2,10,16,.38)!important;
    max-height:calc(100dvh - 90px - env(safe-area-inset-bottom))!important;
    overflow:auto!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;
    z-index:1602!important;
  }

  header.b2s-global-header[data-b2s-header-type="public"].b2s-mobile-menu-open .b2s-mobile-drawer{
    display:flex!important;
    flex-direction:column!important;
    gap:6px!important;
  }

  header.b2s-global-header[data-b2s-header-type="public"] .b2s-mobile-drawer .b2s-global-nav{
    display:grid!important;
    grid-template-columns:1fr!important;
    width:100%!important;
    gap:2px!important;
    margin:0!important;
    padding:2px!important;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  header.b2s-global-header[data-b2s-header-type="public"] .b2s-mobile-drawer .b2s-global-nav::before{
    content:"Explore"!important;
    display:block!important;
    padding:6px 9px 5px!important;
    color:#d8b761!important;
    font-size:9px!important;
    font-weight:850!important;
    letter-spacing:.15em!important;
    line-height:1.2!important;
    text-transform:uppercase!important;
  }
  header.b2s-global-header[data-b2s-header-type="public"] .b2s-mobile-drawer .b2s-global-nav>a{
    display:flex!important;
    align-items:center!important;
    width:100%!important;
    min-height:41px!important;
    padding:9px 10px!important;
    border:1px solid transparent!important;
    border-radius:9px!important;
    color:#f4f7f8!important;
    background:transparent!important;
    font-size:13.5px!important;
    font-weight:720!important;
    line-height:1.25!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
  }
  header.b2s-global-header[data-b2s-header-type="public"] .b2s-mobile-drawer .b2s-global-nav>a:hover,
  header.b2s-global-header[data-b2s-header-type="public"] .b2s-mobile-drawer .b2s-global-nav>a:focus-visible{
    background:rgba(255,255,255,.06)!important;
    border-color:rgba(255,255,255,.08)!important;
  }

  header.b2s-global-header[data-b2s-header-type="public"] .b2s-mobile-drawer .b2s-global-actions,
  header.b2s-global-header[data-b2s-header-type="public"] .b2s-mobile-drawer [data-b2s-public-actions]{
    display:block!important;
    width:100%!important;
    margin:0!important;
    padding:8px 2px 2px!important;
    border:0!important;
    border-top:1px solid rgba(255,255,255,.09)!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  header.b2s-global-header[data-b2s-header-type="public"] .b2s-mobile-drawer .b2s-global-actions::before,
  header.b2s-global-header[data-b2s-header-type="public"] .b2s-mobile-drawer [data-b2s-public-actions]::before{
    content:"Account"!important;
    display:block!important;
    padding:0 9px 6px!important;
    color:#d8b761!important;
    font-size:9px!important;
    font-weight:850!important;
    letter-spacing:.15em!important;
    line-height:1.2!important;
    text-transform:uppercase!important;
  }
  header.b2s-global-header[data-b2s-header-type="public"] .b2s-mobile-drawer .b2s-public-action-set{
    width:100%!important;
    gap:5px!important;
  }
  header.b2s-global-header[data-b2s-header-type="public"] .b2s-mobile-drawer .b2s-public-action-set>a{
    width:100%!important;
    min-height:41px!important;
    padding:9px 11px!important;
    margin:0!important;
    border-radius:9px!important;
    font-size:13.5px!important;
    font-weight:820!important;
    line-height:1.2!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
  }

  header.b2s-global-header[data-b2s-header-type="public"].b2s-mobile-menu-open::after{
    background:rgba(4,12,17,.14)!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
}

@media (max-width:390px){
  header.b2s-global-header[data-b2s-header-type="public"] .b2s-global-header-inner{
    min-height:64px!important;
    padding-top:9px!important;
    padding-bottom:9px!important;
  }
  header.b2s-global-header[data-b2s-header-type="public"] .b2s-global-brand img{max-width:140px!important;max-height:35px!important}
  header.b2s-global-header[data-b2s-header-type="public"] .b2s-mobile-menu-toggle{width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important}
  header.b2s-global-header[data-b2s-header-type="public"] .b2s-mobile-drawer{
    right:8px!important;
    width:min(294px,calc(100vw - 16px))!important;
    max-width:294px!important;
    border-radius:15px!important;
  }
}

/* ---------- Login: desktop retains the premium split, mobile becomes a focused account surface ---------- */
body.b2s-login-page{
  background-attachment:scroll!important;
}
body.b2s-login-page .b2s-global-header{
  overflow:visible!important;
}

@media (max-width:820px){
  body.b2s-login-page .b2s-global-header-inner{
    display:flex!important;
    justify-content:center!important;
    min-height:62px!important;
    padding:10px 16px!important;
  }
  body.b2s-login-page .b2s-global-brand{
    margin:0 auto!important;
    max-width:none!important;
  }
  body.b2s-login-page .b2s-global-brand img{
    max-width:148px!important;
    max-height:35px!important;
  }
  body.b2s-login-page .b2s-global-nav,
  body.b2s-login-page .b2s-global-actions,
  body.b2s-login-page .b2s-mobile-menu-toggle,
  body.b2s-login-page .b2s-mobile-drawer{
    display:none!important;
  }
  body.b2s-login-page .b2s-login-shell{
    display:block!important;
    width:min(430px,calc(100% - 24px))!important;
    min-height:calc(100dvh - 62px)!important;
    padding:24px 0 calc(28px + env(safe-area-inset-bottom))!important;
    margin:0 auto!important;
  }
  body.b2s-login-page .b2s-login-intro{
    display:none!important;
  }
  body.b2s-login-page .b2s-login-card{
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:24px 20px 20px!important;
    border-radius:18px!important;
    border:1px solid rgba(255,255,255,.10)!important;
    background:linear-gradient(180deg,rgba(8,22,35,.965),rgba(5,15,25,.985))!important;
    box-shadow:0 24px 58px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.045)!important;
  }
  body.b2s-login-page .b2s-login-card-header{
    margin-bottom:19px!important;
  }
  body.b2s-login-page .b2s-login-card-kicker{
    margin-bottom:7px!important;
    font-size:9px!important;
    letter-spacing:.14em!important;
  }
  body.b2s-login-page .b2s-login-card h2{
    font-size:25px!important;
    line-height:1.08!important;
  }
  body.b2s-login-page .b2s-login-card-header p{
    margin-top:7px!important;
    font-size:12px!important;
    line-height:1.45!important;
  }
  body.b2s-login-page .b2s-login-form-grid{gap:12px!important}
  body.b2s-login-page .b2s-login-field label{margin-bottom:6px!important;font-size:11px!important}
  body.b2s-login-page .b2s-login-field input,
  body.b2s-login-page .b2s-login-field select{
    width:100%!important;
    min-height:49px!important;
    height:49px!important;
    font-size:14px!important;
    border-radius:10px!important;
  }
  body.b2s-login-page .b2s-login-submit{
    min-height:50px!important;
    border-radius:10px!important;
  }
  body.b2s-login-page .b2s-login-links{
    align-items:center!important;
    gap:10px!important;
    margin-top:14px!important;
  }
  body.b2s-login-page .b2s-login-links a{
    font-size:11.5px!important;
    line-height:1.3!important;
  }
  body.b2s-login-page .b2s-login-account{
    margin-top:16px!important;
    padding-top:15px!important;
    font-size:11.5px!important;
  }
}

@media (max-width:370px){
  body.b2s-login-page .b2s-login-shell{width:calc(100% - 16px)!important;padding-top:16px!important}
  body.b2s-login-page .b2s-login-card{padding:21px 15px 18px!important;border-radius:16px!important}
  body.b2s-login-page .b2s-login-card h2{font-size:23px!important}
  body.b2s-login-page .b2s-login-links{gap:8px!important}
  body.b2s-login-page .b2s-login-links a{font-size:11px!important}
}

/* ---------- Password recovery: same auth geometry and no navigation controls ---------- */
@media (max-width:820px){
  body[data-auth-page="forgot-password"] header.b2s-global-header[data-b2s-header-type="public"] .b2s-global-header-inner,
  body[data-auth-page="reset-password"] header.b2s-global-header[data-b2s-header-type="public"] .b2s-global-header-inner{
    display:flex!important;
    justify-content:center!important;
    min-height:62px!important;
    padding:10px 16px!important;
  }
  body[data-auth-page="forgot-password"] header.b2s-global-header[data-b2s-header-type="public"] .b2s-global-brand,
  body[data-auth-page="reset-password"] header.b2s-global-header[data-b2s-header-type="public"] .b2s-global-brand{
    margin:0 auto!important;
  }
  body[data-auth-page="forgot-password"] header.b2s-global-header[data-b2s-header-type="public"] .b2s-global-nav,
  body[data-auth-page="forgot-password"] header.b2s-global-header[data-b2s-header-type="public"] .b2s-global-actions,
  body[data-auth-page="forgot-password"] header.b2s-global-header[data-b2s-header-type="public"] .b2s-mobile-menu-toggle,
  body[data-auth-page="forgot-password"] header.b2s-global-header[data-b2s-header-type="public"] .b2s-mobile-drawer,
  body[data-auth-page="reset-password"] header.b2s-global-header[data-b2s-header-type="public"] .b2s-global-nav,
  body[data-auth-page="reset-password"] header.b2s-global-header[data-b2s-header-type="public"] .b2s-global-actions,
  body[data-auth-page="reset-password"] header.b2s-global-header[data-b2s-header-type="public"] .b2s-mobile-menu-toggle,
  body[data-auth-page="reset-password"] header.b2s-global-header[data-b2s-header-type="public"] .b2s-mobile-drawer{
    display:none!important;
  }
  body[data-auth-page] main.b2s-auth-shell.b2s-auth-recovery-shell{
    width:100%!important;
    padding:20px 12px calc(28px + env(safe-area-inset-bottom))!important;
  }
  body[data-auth-page] .b2s-auth-card.b2s-auth-recovery-card{
    width:min(100%,430px)!important;
    margin:0 auto!important;
    padding:23px 18px!important;
    border-radius:18px!important;
  }
  body[data-auth-page] .b2s-auth-field input,
  body[data-auth-page="forgot-password"] input,
  body[data-auth-page="reset-password"] input{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
  }
}
