
/* ============================================================
   Bid2Stay 28.3.0 — Premium SaaS UI/UX + Mobile Lock
   Presentation-layer consolidation only.
   ============================================================ */

:root{
  --b2s-ui-bg:#f6f8fb;
  --b2s-ui-surface:#ffffff;
  --b2s-ui-surface-soft:#fafbfc;
  --b2s-ui-text:#172033;
  --b2s-ui-text-strong:#101828;
  --b2s-ui-muted:#667085;
  --b2s-ui-subtle:#98a2b3;
  --b2s-ui-border:#d8dee7;
  --b2s-ui-border-hover:#c4ccd7;
  --b2s-ui-focus:#d99b00;
  --b2s-ui-focus-ring:rgba(217,155,0,.14);
  --b2s-ui-error:#b42318;
  --b2s-ui-success:#067647;
  --b2s-ui-warning:#946200;
  --b2s-ui-radius:12px;
  --b2s-ui-radius-lg:18px;
  --b2s-ui-control-h:48px;
  --b2s-ui-field-gap:16px;
  --b2s-ui-section-gap:28px;
  --b2s-ui-shadow:0 12px 34px rgba(16,24,40,.055);
}

form,.b2s-form,.auth-card,.provider-form,.admin-form{color:var(--b2s-ui-text)}
form h1{font-size:clamp(26px,3vw,32px);line-height:1.15;letter-spacing:-.025em}
form h2{font-size:clamp(19px,2.3vw,22px);line-height:1.2;letter-spacing:-.015em}
form h3{font-size:17px;line-height:1.25}
form p,form li{font-size:14px;line-height:1.55}

.b2s-form-shell,form.b2s-form-shell,.provider-form-shell,.admin-form-shell{
  width:min(100%,980px);margin-inline:auto;
}

.auth-card,.login-card,.register-card,.password-card{
  width:min(100%,460px);margin-inline:auto;padding:26px;
  border:1px solid #e5eaf0;border-radius:20px;background:var(--b2s-ui-surface);
  box-shadow:0 18px 48px rgba(16,24,40,.075);
}

.b2s-form-card,.form-card,.provider-card,.admin-form-card{
  background:var(--b2s-ui-surface);border:1px solid #e5eaf0;
  border-radius:var(--b2s-ui-radius-lg);box-shadow:var(--b2s-ui-shadow);
}

.b2s-form-section,.form-section,.provider-section,.admin-form-section{
  padding:24px 0;border-top:1px solid #edf1f5;
}
.b2s-form-section:first-child,.form-section:first-child,.provider-section:first-child,.admin-form-section:first-child{border-top:0}

.b2s-form-section-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:16px;
}
.b2s-form-section-head h2,.b2s-form-section-head h3{margin:0;color:var(--b2s-ui-text-strong)}
.b2s-form-section-head p{margin:5px 0 0;color:var(--b2s-ui-muted);font-size:13px}

.b2s-form-grid,.form-grid,.fields-grid,.field-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--b2s-ui-field-gap) 18px;
}
.b2s-form-grid.three,.form-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.b2s-form-grid .full,.form-grid .full,.field-grid .full,.b2s-field.full{grid-column:1/-1}

form label:not(.checkbox):not(.radio):not(.switch):not(.toggle),.b2s-label,.form-label{
  color:#344054;font-size:13px;font-weight:800;line-height:1.25;
}
form label:not(.checkbox):not(.radio):not(.switch):not(.toggle)>span:first-child,
.b2s-field>label,.form-field>label{display:block;margin-bottom:7px}
form small,.form-help,.helper,.help-text,.field-help{color:var(--b2s-ui-muted);font-size:12.5px;line-height:1.45}
.b2s-field small,.form-field small,.field small{display:block;margin-top:6px}

form input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]),
form select,form textarea,.b2s-input,.b2s-select,.b2s-textarea{
  box-sizing:border-box;width:100%;border:1px solid var(--b2s-ui-border);
  border-radius:var(--b2s-ui-radius);background:#fff;color:var(--b2s-ui-text);
  font-family:inherit;font-size:15px;outline:none;
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease;
}

form input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]),
form select,.b2s-input,.b2s-select{min-height:var(--b2s-ui-control-h);padding:0 14px}
form textarea,.b2s-textarea{min-height:112px;padding:12px 14px;line-height:1.5;resize:vertical}
form input::placeholder,form textarea::placeholder{color:var(--b2s-ui-subtle);opacity:1}

form input:hover:not(:disabled):not([readonly]),
form select:hover:not(:disabled),
form textarea:hover:not(:disabled):not([readonly]){border-color:var(--b2s-ui-border-hover)}

form input:focus,form select:focus,form textarea:focus{
  border-color:var(--b2s-ui-focus);box-shadow:0 0 0 4px var(--b2s-ui-focus-ring)
}

form input:disabled,form select:disabled,form textarea:disabled,form input[readonly],form textarea[readonly]{
  background:#f5f7fa;color:#667085;cursor:not-allowed
}

form input[aria-invalid="true"],form select[aria-invalid="true"],form textarea[aria-invalid="true"],.is-invalid{
  border-color:#f04438;box-shadow:0 0 0 3px rgba(240,68,56,.10)
}
.form-error,.field-error,.validation-error,[data-error]{color:var(--b2s-ui-error);font-size:12.5px;font-weight:700}

@media(max-width:768px){
  form input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
  form select,form textarea{font-size:16px}
}

form select{
  appearance:none;padding-right:40px;
  background-image:linear-gradient(45deg,transparent 50%,#667085 50%),linear-gradient(135deg,#667085 50%,transparent 50%);
  background-position:calc(100% - 18px) 21px,calc(100% - 13px) 21px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}

form input[type="checkbox"],form input[type="radio"]{width:18px;height:18px;accent-color:var(--b2s-ui-focus)}
.checkbox,.radio,.form-check{display:flex;align-items:flex-start;gap:9px;color:#344054;font-size:13px;line-height:1.4}

form input[type="file"]{
  width:100%;min-height:54px;border:1px dashed #cbd5e1;border-radius:14px;
  padding:10px 12px;background:#fbfcfe;color:#475467;
}
form input[type="file"]::file-selector-button{
  min-height:34px;border:1px solid #d8dee7;border-radius:10px;background:#fff;
  color:#344054;padding:7px 11px;margin-right:10px;font:inherit;font-size:13px;font-weight:800;cursor:pointer;
}

form .btn,.b2s-form-actions .btn,.form-actions .btn{
  min-height:44px;border-radius:11px;padding:0 16px;font-size:14px;font-weight:850;
}

.b2s-form-actions,.form-actions,.wizard-actions,.provider-actions{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:22px;padding-top:16px;border-top:1px solid #edf1f5;
}

.provider-stepper,.form-stepper,.b2s-stepper{
  display:flex;align-items:center;gap:8px;overflow:auto hidden;scrollbar-width:none;
}
.provider-stepper::-webkit-scrollbar,.form-stepper::-webkit-scrollbar,.b2s-stepper::-webkit-scrollbar{display:none}

.room-card,.room-type-card,.inventory-card{
  border:1px solid #e5eaf0;border-radius:14px;background:#fff;padding:16px;box-shadow:none;
}
.room-card+.room-card,.room-type-card+.room-type-card,.inventory-card+.inventory-card{margin-top:12px}

.amenities-grid,.amenity-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px 14px}

.filters,.filter-bar,.search-filters,.admin-filters,.toolbar-filters{
  display:flex;flex-wrap:wrap;align-items:end;gap:10px;
}
.filters form,.filter-bar form,.search-filters form,.admin-filters form{width:100%}
.filters input,.filters select,.filter-bar input,.filter-bar select,.search-filters input,.search-filters select,.admin-filters input,.admin-filters select{min-width:0}

.auth-card h1,.login-card h1,.register-card h1,.password-card h1{
  margin:0 0 7px;color:var(--b2s-ui-text-strong);font-size:28px;line-height:1.15;letter-spacing:-.025em;
}
.auth-card>p,.login-card>p,.register-card>p,.password-card>p{color:var(--b2s-ui-muted);font-size:14px;line-height:1.55}

body.admin-page form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),body.admin-page form select{min-height:44px}
body.admin-page form textarea{min-height:96px}

.table-wrap,.table-responsive,.data-table-wrap,.admin-table-wrap{
  max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;
}

.map,.map-shell,.map-wrap,.provider-map,[data-map]{max-width:100%}
@media(max-width:768px){
  .map,.map-shell,.map-wrap,.provider-map,[data-map]{min-height:300px}
}

.status,.form-status,.notice,.alert{max-width:100%;overflow-wrap:anywhere}

@media(max-width:768px){
  :root{--b2s-ui-control-h:46px;--b2s-ui-field-gap:14px;--b2s-ui-section-gap:22px}
  html,body{max-width:100%;overflow-x:hidden}
  main,section,article,aside,form,fieldset{min-width:0;max-width:100%}

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

  .amenities-grid,.amenity-grid{grid-template-columns:repeat(2,minmax(0,1fr))}

  .auth-card,.login-card,.register-card,.password-card{
    width:100%;padding:20px;border-radius:16px;
  }

  .b2s-form-section,.form-section,.provider-section,.admin-form-section{padding:18px 0}

  .filters,.filter-bar,.search-filters,.admin-filters,.toolbar-filters{
    display:grid;grid-template-columns:1fr;align-items:stretch;
  }

  .filters>*,.filter-bar>*,.search-filters>*,.admin-filters>*,.toolbar-filters>*{
    width:100%;min-width:0;
  }

  .b2s-form-actions,.form-actions,.wizard-actions,.provider-actions{
    position:sticky;bottom:0;z-index:40;margin-inline:-12px;
    padding:12px max(12px,env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));
    border-top:1px solid #e6eaf0;background:rgba(255,255,255,.97);backdrop-filter:blur(10px);
  }

  .b2s-form-actions .btn,.form-actions .btn,.wizard-actions .btn,.provider-actions .btn{
    min-height:46px;max-width:100%;
  }

  img,svg,canvas,video,iframe{max-width:100%;height:auto}

  .modal,.dialog,[role="dialog"]{
    max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);overflow:auto;
  }
}

@media(max-width:430px){
  body{font-size:15px}
  form h1{font-size:26px}
  form h2{font-size:20px}
  .amenities-grid,.amenity-grid{grid-template-columns:1fr 1fr}
}

@media(max-width:360px){
  form h1{font-size:24px}
  form h2{font-size:19px}
  .amenities-grid,.amenity-grid{grid-template-columns:1fr}
  .b2s-form-actions,.form-actions,.wizard-actions,.provider-actions{gap:8px}
}

@media(max-width:320px){
  .auth-card,.login-card,.register-card,.password-card{padding:16px}
  form .btn,.b2s-form-actions .btn,.form-actions .btn{padding-inline:12px}
  .room-card,.room-type-card,.inventory-card{padding:12px}
}

@media(min-width:900px){
  .b2s-form-actions.sticky,.form-actions.sticky,.wizard-actions.sticky,.provider-actions.sticky{
    position:sticky;bottom:12px;z-index:35;margin-inline:-8px;padding:12px;
    border:1px solid #e5eaf0;border-radius:14px;background:rgba(255,255,255,.96);
    backdrop-filter:blur(10px);box-shadow:0 12px 28px rgba(16,24,40,.09);
  }
}

:where(button,a,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--b2s-ui-focus);outline-offset:2px;
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    scroll-behavior:auto !important;transition-duration:.01ms !important;
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
  }
}
