/* ============================================================
   Bid2Stay 28.3.1 — Mobile Product Experience Lock
   Mobile-only refinement. Desktop remains governed by 28.3.0.
   ============================================================ */

@media (max-width: 768px){

  :root{
    --b2s-mobile-pad:14px;
    --b2s-mobile-gap:14px;
    --b2s-mobile-control:48px;
    --b2s-mobile-radius:14px;
    --b2s-mobile-nav-h:64px;
  }

  html, body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
  }

  body{
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
  }

  main{
    width:100%;
    max-width:100%;
    padding-left:var(--b2s-mobile-pad);
    padding-right:var(--b2s-mobile-pad);
    padding-bottom:calc(88px + env(safe-area-inset-bottom));
  }

  /* -------- Typography -------- */
  h1,.page-title,.hero-title{
    font-size:clamp(24px,7vw,28px);
    line-height:1.12;
    letter-spacing:-.025em;
  }

  h2,.section-title{
    font-size:20px;
    line-height:1.2;
  }

  h3{font-size:17px}

  p,li,.body-copy{font-size:14px;line-height:1.5}

  small,.helper,.help-text,.field-help{
    font-size:12.5px;
    line-height:1.4;
  }

  /* -------- Compact mobile header -------- */
  header,
  .site-header,
  .app-header,
  .topbar{
    min-height:58px;
  }

  .site-header .container,
  .app-header .container,
  .topbar .container,
  header .container{
    min-height:58px;
    padding-left:12px;
    padding-right:12px;
  }

  .site-header img,
  .app-header img,
  header .brand img,
  .brand img{
    max-height:34px;
    width:auto;
  }

  /* Reduce crowded desktop navigation on small screens */
  .desktop-nav,
  .desktop-only,
  .top-links,
  .header-links{
    display:none;
  }

  /* -------- Mobile bottom navigation -------- */
  .mobile-bottom-nav,
  .guest-mobile-nav,
  .provider-mobile-nav,
  .admin-mobile-nav{
    position:fixed;
    left:10px;
    right:10px;
    bottom:calc(8px + env(safe-area-inset-bottom));
    z-index:80;
    display:flex;
    align-items:center;
    justify-content:space-around;
    gap:4px;
    min-height:58px;
    padding:7px 6px;
    border:1px solid rgba(17,24,39,.10);
    border-radius:18px;
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(16px);
    box-shadow:0 12px 30px rgba(16,24,40,.14);
  }

  .mobile-bottom-nav a,
  .mobile-bottom-nav button,
  .guest-mobile-nav a,
  .provider-mobile-nav a,
  .admin-mobile-nav a{
    min-width:0;
    min-height:44px;
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    border:0;
    background:transparent;
    color:#667085;
    text-decoration:none;
    font-size:11px;
    font-weight:800;
    border-radius:12px;
    padding:5px 4px;
  }

  .mobile-bottom-nav .active,
  .guest-mobile-nav .active,
  .provider-mobile-nav .active,
  .admin-mobile-nav .active{
    color:#172033;
    background:#fff6dc;
  }

  /* -------- Cards -------- */
  .card,
  .panel,
  .surface,
  .dashboard-card,
  .provider-card,
  .admin-card{
    border-radius:16px;
  }

  .card,
  .panel,
  .surface{
    padding:16px;
  }

  /* Avoid cards-inside-cards heaviness */
  .card .card,
  .panel .panel,
  .surface .surface{
    box-shadow:none;
    border-radius:12px;
    background:#fbfcfe;
  }

  /* -------- Forms -------- */
  form{
    width:100%;
    max-width:100%;
  }

  form input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
  form select,
  form textarea{
    width:100%;
    min-width:0;
    font-size:16px;
  }

  form input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
  form select{
    min-height:var(--b2s-mobile-control);
  }

  form textarea{
    min-height:108px;
  }

  .form-grid,
  .field-grid,
  .fields-grid,
  .b2s-form-grid,
  .two-col,
  .three-col{
    display:grid;
    grid-template-columns:1fr;
    gap:14px;
  }

  /* -------- Provider onboarding -------- */
  .provider-stepper,
  .form-stepper,
  .b2s-stepper{
    margin-inline:-2px;
    padding:2px 0 8px;
  }

  .provider-step,
  .form-step,
  .b2s-step{
    font-size:12px;
  }

  .provider-stepper .step-label,
  .form-stepper .step-label{
    white-space:nowrap;
  }

  .provider-section,
  .form-section{
    padding:16px 0;
  }

  .room-card,
  .room-type-card,
  .inventory-card{
    padding:14px;
    border-radius:14px;
  }

  .room-card .actions,
  .room-type-card .actions{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
  }

  .amenities-grid,
  .amenity-grid{
    grid-template-columns:1fr 1fr;
    gap:8px;
  }

  /* -------- Sticky form actions -------- */
  .b2s-form-actions,
  .form-actions,
  .wizard-actions,
  .provider-actions{
    position:sticky;
    left:0;
    right:0;
    bottom:calc(var(--b2s-mobile-nav-h) + 16px + env(safe-area-inset-bottom));
    z-index:55;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    margin:18px -4px 0;
    padding:10px 4px;
    border-top:0;
    background:rgba(255,255,255,.97);
    backdrop-filter:blur(12px);
  }

  .b2s-form-actions .btn,
  .form-actions .btn,
  .wizard-actions .btn,
  .provider-actions .btn{
    width:100%;
    min-height:48px;
    padding:0 12px;
    font-size:14px;
  }

  .b2s-form-actions .btn:only-child,
  .form-actions .btn:only-child,
  .wizard-actions .btn:only-child,
  .provider-actions .btn:only-child{
    grid-column:1/-1;
  }

  /* -------- Search and filters -------- */
  .filters,
  .filter-bar,
  .search-filters,
  .admin-filters,
  .toolbar-filters{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
    width:100%;
  }

  .filters .btn,
  .filter-bar .btn,
  .search-filters .btn,
  .admin-filters .btn,
  .toolbar-filters .btn{
    width:100%;
  }

  /* -------- Mobile tables: contain overflow safely -------- */
  .table-wrap,
  .table-responsive,
  .admin-table-wrap,
  .data-table-wrap{
    margin-inline:-4px;
    width:calc(100% + 8px);
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    border-radius:14px;
  }

  table{
    min-width:680px;
    font-size:13px;
  }

  /* If a record/card mobile representation exists, prefer it */
  .mobile-record-list{
    display:grid;
    gap:10px;
  }

  .mobile-record-card{
    display:grid;
    gap:8px;
    padding:14px;
    border:1px solid #e5eaf0;
    border-radius:14px;
    background:#fff;
  }

  .mobile-record-card .record-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
  }

  /* -------- Admin mobile workspace -------- */
  body.admin-page .admin-shell,
  body.admin-page .admin-content,
  body.admin-page main{
    width:100%;
    max-width:100%;
    margin:0;
  }

  body.admin-page .sidebar,
  body.admin-page .admin-sidebar{
    max-width:86vw;
  }

  body.admin-page .metrics-grid,
  body.admin-page .dashboard-grid{
    grid-template-columns:1fr 1fr;
    gap:10px;
  }

  body.admin-page .metric-card{
    min-width:0;
    padding:13px;
  }

  /* -------- Auth -------- */
  .auth-card,
  .login-card,
  .register-card,
  .password-card{
    width:100%;
    max-width:none;
    padding:20px 16px;
    box-shadow:none;
    border-radius:16px;
  }

  .auth-card h1,
  .login-card h1,
  .register-card h1,
  .password-card h1{
    font-size:26px;
  }

  /* -------- Map -------- */
  .map,
  .map-shell,
  .map-wrap,
  .provider-map,
  [data-map]{
    width:100%;
    min-height:320px;
    border-radius:14px;
    overflow:hidden;
    touch-action:pan-x pan-y;
  }

  /* -------- Image uploads -------- */
  form input[type="file"]{
    min-height:58px;
    padding:10px;
  }

  .upload-grid,
  .image-grid,
  .photo-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
  }

  .upload-grid img,
  .image-grid img,
  .photo-grid img{
    width:100%;
    aspect-ratio:4/3;
    object-fit:cover;
    border-radius:12px;
  }

  /* -------- Modals -------- */
  .modal,
  .dialog,
  [role="dialog"]{
    width:calc(100vw - 20px);
    max-width:calc(100vw - 20px);
    max-height:calc(100dvh - 20px);
    margin:10px auto;
    border-radius:16px;
    overflow:auto;
  }

  /* -------- Buttons -------- */
  .btn,
  button,
  [role="button"]{
    min-height:44px;
  }

  /* -------- Prevent spill -------- */
  .card,
  .panel,
  .surface,
  .field,
  .form-field,
  .toolbar,
  .filters,
  .table-wrap,
  .modal,
  .dialog{
    min-width:0;
    max-width:100%;
  }

  h1,h2,h3,h4,p,span,strong,small,label,button,a,td,th{
    overflow-wrap:anywhere;
  }
}

@media(max-width:430px){
  :root{--b2s-mobile-pad:12px}
  body.admin-page .metrics-grid,
  body.admin-page .dashboard-grid{
    grid-template-columns:1fr;
  }
}

@media(max-width:390px){
  .mobile-bottom-nav,
  .guest-mobile-nav,
  .provider-mobile-nav,
  .admin-mobile-nav{
    left:8px;
    right:8px;
  }

  .mobile-bottom-nav a,
  .mobile-bottom-nav button,
  .guest-mobile-nav a,
  .provider-mobile-nav a,
  .admin-mobile-nav a{
    font-size:10.5px;
  }
}

@media(max-width:360px){
  .amenities-grid,
  .amenity-grid,
  .upload-grid,
  .image-grid,
  .photo-grid{
    grid-template-columns:1fr;
  }

  .b2s-form-actions,
  .form-actions,
  .wizard-actions,
  .provider-actions{
    grid-template-columns:1fr;
  }

  .mobile-record-card .record-actions{
    grid-template-columns:1fr;
  }
}

@media(max-width:320px){
  :root{--b2s-mobile-pad:10px}

  .auth-card,
  .login-card,
  .register-card,
  .password-card{
    padding:16px 12px;
  }

  .card,
  .panel,
  .surface{
    padding:14px;
  }

  .mobile-bottom-nav,
  .guest-mobile-nav,
  .provider-mobile-nav,
  .admin-mobile-nav{
    left:6px;
    right:6px;
    padding-inline:4px;
  }
}