/*
  ROOMIE Bootstrap convergence layer.
  Goal: make existing custom components behave like a small Bootstrap-themed
  design system while the React markup is migrated component by component.
*/

:root{
  --bs-body-bg:#0d0d0d;
  --bs-body-color:#fff;
  --bs-primary:#c8ff00;
  --bs-primary-rgb:200,255,0;
  --bs-secondary:#1f1f1f;
  --bs-success:#00d084;
  --bs-warning:#ffb020;
  --bs-danger:#ff5a1f;
  --bs-info:#00b7ff;
  --bs-border-color:rgba(255,255,255,.12);
  --bs-border-radius:.625rem;
  --bs-border-radius-sm:.5rem;
  --bs-border-radius-lg:.875rem;
  --bs-border-radius-xl:1rem;
  --roomie-focus:0 0 0 .2rem rgba(200,255,0,.18);
  --roomie-surface:#141414;
  --roomie-surface-2:#1b1b1b;
}

body{
  background:var(--bs-body-bg);
  color:var(--bs-body-color);
}

.btn,
.btn-neon,
.btn-nav,
.sticky-next,
.drawer-primary,
.quiet-action,
.social-btn,
.guest-btn,
.dur-pill,
.auth-tab,
.admin-page-btn,
.bundle-btn,
.btn-addon,
.cart-pay,
.shop-lock-cta,
.profile-upgrade,
.profile-action-tile{
  min-height:44px;
  border-radius:var(--bs-border-radius)!important;
  font-weight:900;
  letter-spacing:0;
}

.btn-neon,
.btn-nav,
.sticky-next,
.drawer-primary,
.bundle-btn.btn-primary,
.btn-addon,
.cart-pay,
.shop-lock-cta,
.profile-upgrade,
.btn-primary{
  background:var(--bs-primary)!important;
  border:1px solid var(--bs-primary)!important;
  color:#0d0d0d!important;
}

.quiet-action,
.btn-outline-light,
.admin-page-btn,
.social-btn,
.dur-pill,
.auth-tab,
.guest-btn,
.drawer-link{
  border:1px solid var(--bs-border-color)!important;
  background:rgba(255,255,255,.055)!important;
  color:#fff!important;
}

.btn-outline-light:hover,
.quiet-action:hover,
.social-btn:hover,
.dur-pill:hover,
.drawer-link:hover{
  background:rgba(255,255,255,.1)!important;
  border-color:rgba(255,255,255,.22)!important;
}

.offcanvas.drawer-box{
  visibility:visible!important;
  transform:none!important;
  width:min(336px,88vw);
  color:#fff;
  background:#111!important;
  border-right:1px solid var(--bs-border-color);
}

.offcanvas-backdrop.drawer-panel{
  opacity:1;
  background:rgba(0,0,0,.62);
  backdrop-filter:blur(14px);
}

.alert-warning,
.shop-locked-banner.alert-warning{
  --bs-alert-color:#fff;
  --bs-alert-bg:rgba(255,176,32,.12);
  --bs-alert-border-color:rgba(255,176,32,.42);
}

.auth-tab.active,
.dur-pill.active,
.booking-mode button.active,
.drawer-link.active{
  border-color:rgba(var(--bs-primary-rgb),.72)!important;
  background:rgba(var(--bs-primary-rgb),.14)!important;
  color:var(--bs-primary)!important;
}

.bc-day.bc-day-full{
  border-color:rgba(255,90,31,.46)!important;
  color:rgba(255,255,255,.42)!important;
  background:repeating-linear-gradient(-45deg, rgba(255,90,31,.12), rgba(255,90,31,.12) 4px, rgba(255,90,31,.04) 4px, rgba(255,90,31,.04) 8px)!important;
  opacity:.78!important;
}

.bc-slot{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:1px!important;
}

.bc-slot small{
  display:block;
  font-family:"Barlow",system-ui,sans-serif;
  font-size:.56rem;
  font-weight:900;
  line-height:1;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.bc-slot.bc-slot-busy{
  border-color:rgba(255,90,31,.48)!important;
  background:rgba(255,90,31,.12)!important;
  color:rgba(255,255,255,.56)!important;
  opacity:.86!important;
  text-decoration:none!important;
}

.bc-slot.bc-slot-busy small{
  color:#ff8a62;
}

.bc-slot.bc-slot-selected.bc-slot-busy{
  border-color:#ff5a1f!important;
  box-shadow:0 0 0 2px rgba(255,90,31,.24)!important;
}

.bc-now-pill.bc-now-pill-busy{
  border-color:rgba(255,90,31,.48)!important;
  background:rgba(255,90,31,.12)!important;
}

.bc-now-pill.bc-now-pill-busy .bc-now-dot{
  background:#ff5a1f!important;
  animation:none!important;
}

.bc-now-pill.bc-now-pill-busy .bc-dur-badge{
  color:#ff5a1f!important;
  border-color:rgba(255,90,31,.4)!important;
  background:rgba(255,90,31,.14)!important;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:2px solid var(--bs-primary)!important;
  outline-offset:2px;
  box-shadow:var(--roomie-focus)!important;
}

.card,
.booking-panel,
.auth-panel,
.auth-landing,
.compact-room-summary,
.booking-option-card,
.live-mode-card,
.event-chip,
.price-box,
.dash-partner-card,
.profile-revolut-card,
.admin-card,
.admin-mini-item,
.profile-panel,
.profile-menu-row,
.wifi-card,
.camera-card,
.session-friends-card,
.control-room-card,
.access-check-card,
.arrival-card,
.bundle-card,
.addon-chip,
.bundle-card,
.token-card,
.chip.roomie-card-pad-20{
  border-radius:var(--bs-border-radius-xl)!important;
  border-color:var(--bs-border-color)!important;
  background:rgba(20,20,20,.86)!important;
}

.admin-card.card,
.admin-mini-item,
.profile-panel,
.profile-menu-row,
.bundle-card.card,
.addon-chip.card{
  padding:16px;
}

.admin-mini-item{
  border:1px solid var(--bs-border-color);
  border-radius:var(--bs-border-radius);
  margin-bottom:10px;
}

.admin-page-btn.btn{
  min-height:36px;
  padding:7px 10px;
  font-size:.78rem;
}

.shop-hero.card,
.token-chip.card,
.partner-chip.card,
.addon-chip.card,
.bundle-card.card,
.next-session-chip.card,
.profile-action-tile.card{
  padding:inherit;
}

.form-control,
.form-select,
.form-input{
  min-height:48px;
  border-radius:var(--bs-border-radius)!important;
  border:1px solid rgba(255,255,255,.16)!important;
  background:var(--roomie-surface-2)!important;
  color:#fff!important;
}

.profile-field span,
.form-label{
  letter-spacing:.08em;
}

.form-control:focus,
.form-select:focus,
.form-input:focus{
  border-color:var(--bs-primary)!important;
  box-shadow:var(--roomie-focus)!important;
}

.badge,
.roomie-ui-badge,
.session-option-badge,
.compact-room-status,
.auth-live-status,
.status-badge{
  border-radius:50rem!important;
  padding:.35rem .65rem!important;
  letter-spacing:0!important;
  font-weight:900!important;
}

.booking-sticky{
  border-radius:var(--bs-border-radius-xl)!important;
  min-height:84px;
}

.auth-error.visible,
.roomie-inline-alert{
  display:block;
  border:1px solid rgba(255,176,32,.45);
  background:rgba(255,176,32,.12);
  color:#fff;
  border-radius:var(--bs-border-radius);
  padding:12px 14px;
  line-height:1.35;
}

.roomie-inline-alert strong{
  display:block;
  color:var(--bs-warning);
  margin-bottom:3px;
}

.dash-muted-xs{
  font-size:.75rem;
  color:var(--muted);
  margin-top:4px;
}

.dash-wallet-cta{
  grid-column:1 / -1;
  margin-top:4px;
  font-size:.8rem;
}

.dash-copy{
  font-size:.92rem;
  color:rgba(255,255,255,.72);
  line-height:1.5;
  margin-top:10px;
}

.dash-copy-sm{
  font-size:.84rem;
  color:rgba(255,255,255,.64);
  line-height:1.45;
  margin-top:8px;
}

.dash-helper{
  font-size:.78rem;
  color:rgba(255,255,255,.58);
  margin:-14px 0 24px;
  line-height:1.45;
}

.next-session-chip-active{
  border-color:rgba(var(--bs-primary-rgb),.3)!important;
  margin-bottom:24px;
}

.buy-amt.btn{
  text-align:left;
  min-height:72px;
  display:block;
}

.buy-amt.btn.active,
.buy-amt.btn-primary{
  color:#0d0d0d!important;
}

.token-use-icon{
  width:36px;
  height:36px;
  background:var(--tile-bg, rgba(255,255,255,.08));
  color:var(--tile-color, #fff);
  border-radius:var(--bs-border-radius-sm);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  font-size:1.2rem;
}

.partner-logo{
  background:var(--partner-bg, rgba(255,255,255,.08))!important;
  color:var(--partner-color, #fff)!important;
}

.modal-box,
.profile-consent-box{
  border-radius:var(--bs-border-radius-xl)!important;
  border:1px solid var(--bs-border-color)!important;
  background:rgba(20,20,20,.96)!important;
}

.roomie-modal-overlay{
  display:flex!important;
  align-items:center;
  justify-content:center;
  padding:16px;
}

.modal-box.modal-dialog{
  width:min(100%, var(--modal-max, 420px));
  margin:0;
  padding:22px;
}

.roomie-modal-body{
  padding:8px 0 16px;
}

.roomie-modal-chip{
  margin:0 auto 16px;
}

.roomie-modal-title{
  font-family:'Barlow Condensed',sans-serif;
  font-weight:900;
  font-size:1.6rem;
  color:#fff;
  margin-bottom:8px;
}

.roomie-modal-copy{
  font-size:.85rem;
  color:var(--muted);
  line-height:1.55;
  margin-bottom:20px;
}

.roomie-modal-status{
  color:var(--bs-primary);
  font-size:.85rem;
  font-weight:800;
  margin-bottom:12px;
  letter-spacing:.08em;
}

.roomie-code-panel{
  background:var(--roomie-surface-2);
  border:1px solid var(--bs-border-color);
  border-radius:var(--bs-border-radius);
  padding:16px;
  margin-bottom:16px;
  text-align:center;
}

.roomie-code-label{
  font-size:.75rem;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:12px;
}

.roomie-code-grid{
  display:flex;
  gap:8px;
  justify-content:center;
  max-width:280px;
  margin:0 auto;
}

.roomie-code-error{
  color:var(--bs-danger);
  font-size:.8rem;
  margin-top:10px;
}

.roomie-modal-amount{
  font-family:'Barlow Condensed',sans-serif;
  font-weight:900;
  font-size:2.5rem;
  color:var(--bs-primary);
  text-align:center;
  margin:16px 0;
}

.roomie-modal-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom:12px;
  flex-shrink:0;
}

.roomie-modal-meta{
  font-size:.78rem;
  color:var(--muted);
}

.roomie-invite-results{
  margin-bottom:12px;
}

.roomie-invite-row.btn{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  margin-bottom:6px;
  text-align:left;
}

.roomie-invite-row.btn.active{
  color:#0d0d0d!important;
}

.roomie-invite-copy{
  flex:1;
}

.roomie-invite-name{
  font-weight:800;
  display:block;
  font-size:.85rem;
}

.roomie-invite-meta{
  color:rgba(255,255,255,.62);
  font-size:.75rem;
}

.roomie-invite-row.active .roomie-invite-meta{
  color:rgba(13,13,13,.72);
}

.roomie-modal-footer-split{
  border-top:1px solid var(--bs-border-color);
  padding-top:12px;
  margin-top:4px;
}

.modal-overlay{
  backdrop-filter:blur(14px);
}

.w-full{width:100%}

.hero-title-static{
  display:flex;
  flex-direction:column;
  gap:.02em;
  white-space:normal;
}

.hero-title-static span{
  display:block;
}

.hero-title-static .neon-line{
  color:#fff;
}

.hero-dot{
  min-width:32px!important;
  min-height:32px!important;
}

.login-shell{
  min-height:auto!important;
}

.auth-panel,
.auth-landing{
  max-height:calc(100vh - 96px);
}

.auth-panel{
  overflow:auto;
}

.auth-proof-grid{
  gap:10px!important;
}

.auth-proof{
  padding:12px!important;
}

.auth-live-card{
  border-radius:var(--bs-border-radius-lg)!important;
}

.roomie-price-summary{
  border:1px solid rgba(var(--bs-primary-rgb),.24);
  background:rgba(var(--bs-primary-rgb),.07);
  border-radius:var(--bs-border-radius-lg);
  padding:14px;
  margin-bottom:14px;
}

.roomie-price-summary-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  color:rgba(255,255,255,.74);
  font-weight:800;
}

.roomie-price-summary-row + .roomie-price-summary-row{margin-top:8px}
.roomie-price-summary-total{
  color:#fff;
  font-size:1.15rem;
  padding-top:10px;
  margin-top:10px!important;
  border-top:1px solid rgba(255,255,255,.12);
}
.roomie-price-summary-missing{color:var(--bs-warning)}

.chip-amount{
  display:inline-flex;
  align-items:center;
  gap:7px;
  vertical-align:middle;
  color:#fff;
  font-weight:900;
  letter-spacing:0;
  line-height:1;
  white-space:nowrap;
}

.chip-amount-icon{
  flex:0 0 auto;
  animation:chipSpin 2.8s cubic-bezier(.22,1,.36,1) infinite;
}

.chip-amount-icon-xs{--chip-size:14px}
.chip-amount-icon-sm{--chip-size:18px}
.chip-amount-icon-md{--chip-size:24px}
.chip-amount-icon-lg{--chip-size:34px}

.chip-amount-main{
  display:inline-flex;
  align-items:baseline;
  gap:4px;
}

.chip-amount-number{
  font-family:'Barlow Condensed',sans-serif;
  font-size:1.15em;
}

.chip-amount-xs{font-size:.76rem;gap:5px}
.chip-amount-sm{font-size:.86rem}
.chip-amount-md{font-size:1rem}
.chip-amount-lg{font-size:1.35rem}

.chip-amount-primary,
.chip-amount-primary .chip-amount-number{
  color:var(--bs-primary);
}

.chip-amount-muted{
  color:rgba(255,255,255,.72);
}

.chip-amount-danger{
  color:var(--bs-warning);
}

.chip-amount-euro,
.chip-amount-suffix{
  color:var(--muted);
  font-size:.82em;
  font-weight:700;
}

.chip-cta-label{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-width:0;
}

.btn-primary .chip-amount,
.sticky-next .chip-amount,
.cart-pay .chip-amount{
  color:#0d0d0d;
}

.logo-crunchyroll{
  color:#ff6b35;
  border-color:#ff6b35;
}

.logo-mubi{
  color:#ff0f7b;
  border-color:#ff0f7b;
}

.roomie-logo-text{
  display:inline-flex;
  align-items:baseline;
  font-family:'Bebas Neue', 'Barlow Condensed', sans-serif;
  line-height:.9;
  letter-spacing:.04em;
  color:#fff;
  text-shadow:0 0 16px rgba(200,255,0,.18);
}

.roomie-logo-room{
  display:inline-block;
  color:var(--bs-primary);
  animation:roomFlicker 3.2s steps(1,end) .35s 1 both;
  text-shadow:0 0 18px rgba(200,255,0,.46), 0 0 34px rgba(200,255,0,.18);
}

.roomie-logo-ie{
  color:#fff;
  text-shadow:0 0 12px rgba(255,255,255,.16);
}

.roomie-logo-text-xs{font-size:1rem}
.roomie-logo-text-sm{font-size:1.35rem}
.roomie-logo-text-md{font-size:1.9rem}
.roomie-logo-text-lg{font-size:3rem}
.roomie-logo-text-xl{font-size:4rem}

.nav-logo .roomie-logo-text{
  display:inline-flex;
}

@media (prefers-reduced-motion: reduce){
  .roomie-logo-room{animation:none}
}

.admin-denied{
  padding:40px 24px;
  text-align:center;
  color:var(--muted);
}

.admin-shell{
  max-width:1000px;
  margin:0 auto;
  padding:24px 16px;
}

.admin-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:24px;
}

.admin-kicker{
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--orange);
  margin-bottom:4px;
}

.admin-title{
  font-family:'Bebas Neue',sans-serif;
  font-size:2.5rem;
  color:#fff;
  line-height:1;
  margin:0;
}

.admin-stat-pill{
  background:var(--dark2);
  border:1px solid var(--border);
  border-radius:var(--bs-border-radius-sm);
  padding:8px 16px;
  font-size:.8rem;
}

.admin-stat-label,
.admin-meta,
.admin-empty{
  color:var(--muted);
}

.admin-stat-value{
  font-family:'Bebas Neue',sans-serif;
  font-size:1.5rem;
  color:#fff;
}

.admin-stat-value.neon,
.admin-lockbox-code,
.admin-status-active{
  color:var(--bs-primary);
}

.admin-card-value.warn,
.admin-role-badge{
  color:var(--orange)!important;
}

.admin-skeleton{
  padding:8px 0 20px;
}

.skeleton-card-tall{
  min-height:220px;
}

.skeleton-card-mid{
  min-height:180px;
}

.skeleton-w-38{width:38%}
.skeleton-w-42{width:42%}
.skeleton-w-44{width:44%}
.skeleton-w-54{width:54%}
.skeleton-w-68{width:68%}
.skeleton-w-70{width:70%}
.skeleton-w-74{width:74%}
.skeleton-w-88{width:88%}
.skeleton-w-96{width:96%}

.admin-toolbar-title,
.admin-item-title,
.admin-section-title{
  font-weight:900;
  color:#fff;
}

.admin-toolbar-title{
  font-size:.9rem;
}

.admin-section-title{
  margin-bottom:12px;
}

.admin-card-spaced{
  margin-top:20px;
}

.admin-card-compact{
  margin-bottom:14px;
}

.admin-form-row{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:flex-end;
}

.admin-addon-grid{
  display:grid;
  grid-template-columns:1fr 1fr 110px;
  gap:10px;
}

.admin-field-xs{width:110px}
.admin-field-sm{width:140px}
.admin-field-md{width:160px}
.admin-field-fluid{flex:1; min-width:140px}
.admin-addon-desc{grid-column:span 2}

.admin-mini-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}

.admin-mini-item.wrap{
  flex-wrap:wrap;
}

.admin-item-actions,
.admin-doc-actions{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}

.admin-doc-actions{
  gap:8px;
}

.admin-page-btn.confirm{
  background:rgba(var(--bs-primary-rgb),.15)!important;
  border-color:var(--bs-primary)!important;
  color:var(--bs-primary)!important;
}

.admin-page-btn.danger{
  background:rgba(255,90,31,.12)!important;
  border-color:rgba(255,90,31,.5)!important;
  color:var(--bs-danger)!important;
}

.admin-page-btn.doc-action{
  padding:0 12px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  text-decoration:none;
}

.admin-blocked-list{
  margin-top:12px;
}

.admin-role-badge,
.admin-addon-status{
  margin-left:8px;
  font-size:.72rem;
  font-weight:900;
}

.admin-lockbox-code{
  font-family:'Barlow Condensed',sans-serif;
  font-size:1.4rem;
}

.admin-audit-item{
  font-size:.78rem;
  align-items:flex-start;
}

.admin-audit-type{
  display:block;
  margin-bottom:3px;
}

.admin-audit-time{
  text-align:right;
  min-width:150px;
}

.admin-audit-time span{
  display:block;
}

.admin-empty{
  padding:16px;
}

.token-use-icon{
  width:36px;
  height:36px;
  border-radius:var(--bs-border-radius-sm);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  font-size:1.2rem;
}

.token-use-icon.lime,
.partner-logo.lime{background:rgba(200,255,0,.1); color:var(--bs-primary)}
.token-use-icon.cyan{background:rgba(0,255,209,.1); color:#00ffd1}
.token-use-icon.orange,
.partner-logo.orange{background:rgba(255,90,31,.12); color:var(--bs-danger)}
.token-use-icon.purple{background:rgba(150,100,255,.12); color:#aa8bff}
.partner-logo.red{background:rgba(229,9,20,.15); color:#e50914}
.partner-logo.green{background:rgba(0,200,100,.15); color:#00c864}

.safe-doc-loading,
.safe-doc-empty{
  color:var(--muted);
}

.safe-doc-loading{
  text-align:center;
}

.safe-doc-loading .fa-spinner{
  margin-right:8px;
}

.safe-doc-content{
  word-break:break-word;
}

.roomie-legal-doc-frame{
  overflow-y:auto;
  max-height:55vh;
  font-size:.85rem;
  line-height:1.7;
  color:var(--text);
  margin-bottom:16px;
  padding:12px 8px;
  border:1px solid var(--border);
  border-radius:var(--bs-border-radius-sm);
  background:rgba(255,255,255,.02);
  min-height:200px;
}

.roomie-legal-doc-content{
  font-family:'Barlow',sans-serif;
  line-height:1.8;
  color:var(--text);
}

.booking-live-switch span{
  background:rgba(255,255,255,.22);
}

.booking-live-switch.active span{
  background:var(--bs-primary);
}

.slot-availability.offset-top{
  margin-top:12px;
}

@media (max-width: 767.98px){
  html,
  body{
    max-width:100%;
    overflow-x:hidden;
  }

  .roomie-nav{
    min-height:58px!important;
  }

  .roomie-nav .container-fluid{
    min-height:58px!important;
    padding:0 10px!important;
  }

  .hamburger{
    width:38px!important;
    height:38px!important;
  }

  .nav-logo .roomie-logo-text-md{
    font-size:1.55rem;
  }

  .wallet-pill{
    min-height:38px!important;
    padding:6px 9px!important;
  }

  .wallet-pill .chip-amount-unit{
    display:none;
  }

  .auth-landing{display:none!important}
  .auth-panel{width:100%!important}

  .booking-shell.roomie-shell,
  .roomie-shell-compact{
    width:100%!important;
    max-width:100%!important;
    padding-left:10px!important;
    padding-right:10px!important;
    padding-top:24px!important;
    padding-bottom:112px!important;
  }

  .compact-room-summary{
    display:grid!important;
    grid-template-columns:64px minmax(0,1fr)!important;
    gap:10px!important;
    padding:10px!important;
    border-radius:12px!important;
    margin-bottom:10px!important;
  }

  .compact-room-media{
    width:64px!important;
    height:64px!important;
    min-height:64px!important;
    border-radius:10px!important;
  }

  .compact-room-main{
    align-self:center!important;
    min-width:0!important;
  }

  .compact-room-kicker{
    font-size:.56rem!important;
    letter-spacing:.08em!important;
  }

  .compact-room-title{
    font-size:1.38rem!important;
    line-height:.92!important;
    margin-top:3px!important;
  }

  .compact-room-location{
    font-size:.72rem!important;
    line-height:1.2!important;
    margin-top:3px!important;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .compact-room-meta{
    margin-top:7px!important;
  }

  .compact-room-meta span{
    padding:4px 7px!important;
    font-size:.62rem!important;
  }

  .compact-room-experiences{
    display:none!important;
  }

  .booking-panel{
    border-radius:12px!important;
    overflow:visible!important;
  }

  .booking-body{
    padding:12px!important;
  }

  .booking-stepper{
    position:sticky;
    top:58px;
    z-index:20;
    gap:6px!important;
    margin:0 -2px 14px!important;
    padding:4px 0 8px!important;
    background:linear-gradient(180deg,rgba(13,13,13,.98),rgba(13,13,13,.82));
    backdrop-filter:blur(10px);
  }

  .booking-stepper-item{
    min-height:36px!important;
    border-radius:999px!important;
    padding:5px!important;
  }

  .booking-stepper-label{
    display:none!important;
  }

  .booking-stepper-index{
    width:22px!important;
    height:22px!important;
    font-size:.68rem!important;
  }

  .booking-step-title{
    font-size:1.48rem!important;
    margin-bottom:5px!important;
  }

  .booking-step-sub{
    font-size:.78rem!important;
    line-height:1.35!important;
    margin-bottom:12px!important;
  }

  .preset-list{
    gap:8px!important;
  }

  .session-option-card{
    grid-template-columns:34px minmax(0,1fr)!important;
    gap:9px!important;
    min-height:74px!important;
    padding:10px!important;
    border-radius:12px!important;
  }

  .session-option-check{
    width:34px!important;
    height:34px!important;
    border-radius:10px!important;
    font-size:.85rem!important;
  }

  .session-option-top{
    gap:6px!important;
  }

  .session-option-title{
    font-size:.86rem!important;
    white-space:normal!important;
    display:-webkit-box;
    -webkit-line-clamp:1;
    -webkit-box-orient:vertical;
  }

  .session-option-badge{
    font-size:.52rem!important;
    padding:3px 5px!important;
  }

  .session-option-sub{
    font-size:.68rem!important;
  }

  .session-option-price{
    grid-column:2!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:8px!important;
    width:100%!important;
    margin-top:2px!important;
  }

  .session-option-price .chip-amount{
    font-size:.78rem!important;
  }

  .session-option-price .chip-amount-euro{
    display:none!important;
  }

  .session-option-price small{
    font-size:.58rem!important;
    max-width:48%;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .bc-plan-row{
    gap:10px!important;
  }

  .bc-now-pill,
  .bc-summary{
    border-radius:11px!important;
    padding:10px 11px!important;
  }

  .bc-slots{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  .guest-stepper,
  .booking-option-card,
  .price-box,
  .roomie-price-summary,
  .live-mode-card{
    border-radius:12px!important;
  }

  .friend-row{
    grid-template-columns:1fr!important;
  }

  .sticky-selected-item{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:100%;
  }

  .booking-sticky{
    left:8px!important;
    right:10px!important;
    bottom:calc(8px + env(safe-area-inset-bottom))!important;
    width:auto!important;
    max-width:none!important;
    transform:none!important;
    grid-template-columns:38px minmax(0,1fr) minmax(96px,auto)!important;
    gap:8px!important;
    padding:8px!important;
    border-radius:13px!important;
    min-height:68px!important;
  }

  .sticky-back{
    width:38px!important;
    height:38px!important;
    border-radius:10px!important;
  }

  .sticky-total-label{
    font-size:.56rem!important;
    letter-spacing:.08em!important;
  }

  .sticky-total-val{
    font-size:1rem!important;
  }

  .sticky-total-val .chip-amount{
    font-size:.86rem!important;
  }

  .sticky-next{
    min-height:44px!important;
    min-width:96px!important;
    max-width:124px!important;
    padding:0 9px!important;
    border-radius:11px!important;
    font-size:.78rem!important;
    line-height:1.05!important;
  }

  .sticky-next .chip-cta-label{
    gap:4px!important;
    flex-wrap:wrap;
  }

  .sticky-next .chip-amount{
    font-size:.68rem!important;
  }
}

@media (max-width: 767.98px){
  body .booking-sticky,
  body.page-room .booking-sticky{
    inset:auto 8px calc(8px + env(safe-area-inset-bottom)) 8px!important;
    left:8px!important;
    right:8px!important;
    bottom:calc(8px + env(safe-area-inset-bottom))!important;
    width:auto!important;
    max-width:none!important;
    transform:none!important;
  }

  body.auth-logged-in .booking-sticky{
    inset:auto 8px calc(var(--mobile-nav-space) + 8px + env(safe-area-inset-bottom)) 8px!important;
    bottom:calc(var(--mobile-nav-space) + 8px + env(safe-area-inset-bottom))!important;
  }

  body.auth-logged-out .booking-shell.roomie-shell,
  body.auth-logged-out .roomie-shell-compact{
    padding-bottom:96px!important;
  }

  body.auth-logged-in .booking-shell.roomie-shell,
  body.auth-logged-in .roomie-shell-compact{
    padding-bottom:calc(104px + var(--mobile-nav-space))!important;
  }
}

@media (max-width: 380px){
  .booking-shell.roomie-shell,
  .roomie-shell-compact{
    padding-left:8px!important;
    padding-right:8px!important;
  }

  .nav-logo .roomie-logo-text-md{
    font-size:1.38rem;
  }

  .compact-room-summary{
    grid-template-columns:56px minmax(0,1fr)!important;
  }

  .compact-room-media{
    width:56px!important;
    height:56px!important;
    min-height:56px!important;
  }

  .compact-room-title{
    font-size:1.22rem!important;
  }

  .sticky-next{
    min-width:86px!important;
    max-width:108px!important;
    font-size:.72rem!important;
  }
}

/* Booking and modal hardening pass: keep these last so they win over legacy component CSS. */
.bc-wrap,
.bc-plan-row,
.bc-calendar,
.bc-time-section{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
}

.bc-now-pill{
  align-items:flex-start!important;
  justify-content:flex-start!important;
  width:100%!important;
}

.bc-now-body{
  display:flex;
  flex:1 1 auto;
  min-width:0;
  flex-direction:column;
  gap:3px;
}

.bc-now-time{
  margin-left:0!important;
  font-size:.9rem!important;
  line-height:1.2;
  color:rgba(255,255,255,.78)!important;
}

.bc-now-range{
  font-family:'JetBrains Mono',monospace;
  font-size:1rem;
  font-weight:900;
  line-height:1.15;
  color:#fff;
  overflow-wrap:anywhere;
}

.guest-stepper{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:12px!important;
}

.booking-guest-note{
  display:flex!important;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
  min-width:0;
  line-height:1.25!important;
}

.guest-pass-price{
  display:inline-flex;
  align-items:center;
  gap:5px;
  white-space:nowrap;
}

.guest-pass-price .chip-amount{
  font-size:.8rem!important;
}

.booking-inline-row{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex-shrink:0;
}

body.roomie-modal-open .booking-sticky{
  display:none!important;
}

.modal-title{
  display:block!important;
  width:100%!important;
  max-width:calc(100% - 54px);
  overflow-wrap:normal;
  word-break:normal;
}

.modal-sub{
  display:block!important;
  width:100%!important;
  max-width:100%;
  line-height:1.45;
}

.modal-box.modal-dialog{
  display:block!important;
}

.modal-box .modal-close{
  width:44px!important;
  min-width:44px!important;
  height:44px!important;
  border-radius:14px!important;
}

.auth-ready-note{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border:1px solid rgba(200,255,0,.18);
  border-radius:var(--bs-border-radius);
  background:rgba(200,255,0,.07);
  color:rgba(255,255,255,.76);
  font-size:.8rem;
  line-height:1.35;
  padding:10px 12px;
  margin-bottom:12px;
}

.auth-ready-note button{
  border:0;
  background:transparent;
  color:var(--bs-primary);
  font-weight:900;
  font-size:.74rem;
  text-transform:uppercase;
  white-space:nowrap;
}

.btn-neon:disabled,
.social-btn:disabled{
  opacity:.58!important;
  cursor:not-allowed!important;
  box-shadow:none!important;
}

@media (max-width: 767.98px){
  .booking-stepper-item{
    min-height:44px!important;
    padding:6px!important;
  }

  .booking-stepper-index{
    width:30px!important;
    height:30px!important;
    font-size:.82rem!important;
  }

  .bc-plan-row{
    grid-template-columns:1fr!important;
  }

  .bc-calendar{
    padding:12px!important;
  }

  .bc-grid{
    width:100%!important;
    grid-template-columns:repeat(7,minmax(0,1fr))!important;
  }

  .bc-now-pill{
    display:grid!important;
    grid-template-columns:10px minmax(0,1fr)!important;
    gap:7px 10px!important;
  }

  .bc-now-dot{
    margin-top:7px;
  }

  .bc-now-body{
    grid-column:2;
  }

  .bc-now-label{
    font-size:.68rem!important;
  }

  .bc-now-time{
    font-size:.82rem!important;
  }

  .bc-now-range{
    font-size:.98rem!important;
  }

  .bc-now-pill .bc-dur-badge{
    grid-column:2;
    justify-self:start;
    margin-left:0!important;
  }

  .guest-stepper{
    padding:13px!important;
    grid-template-columns:minmax(0,1fr) auto!important;
  }

  .guest-pass-label{
    font-size:.72rem!important;
    line-height:1.18!important;
    margin-bottom:6px!important;
    letter-spacing:.08em!important;
  }

  .booking-guest-note{
    font-size:.82rem!important;
  }

  .guest-btn{
    width:48px!important;
    height:48px!important;
    min-width:48px!important;
    border-radius:14px!important;
    font-size:1.2rem!important;
  }

  .guest-count{
    min-width:30px!important;
    text-align:center!important;
    font-size:1.45rem!important;
    line-height:1!important;
  }

  .roomie-modal-overlay{
    align-items:flex-end!important;
    justify-content:center!important;
    padding:10px!important;
  }

  .modal-box.modal-dialog{
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding:18px!important;
    border-radius:20px 20px 0 0!important;
    max-height:88svh!important;
    overflow-y:auto!important;
  }

  .modal-title{
    font-size:2.05rem!important;
    line-height:.95!important;
    max-width:calc(100% - 56px);
    margin-bottom:8px!important;
  }

  .modal-sub{
    font-size:.88rem!important;
    margin-bottom:16px!important;
  }

  .roomie-invite-row.btn,
  .roomie-modal-footer-split .btn,
  .modal-box .btn-neon{
    min-height:44px!important;
  }

  .login-page.is-route .auth-modal-close,
  .auth-modal-close{
    display:flex!important;
    top:14px!important;
    right:14px!important;
    width:46px!important;
    height:46px!important;
    border-radius:14px!important;
  }

  .auth-ready-note{
    align-items:flex-start;
    flex-direction:column;
    font-size:.78rem;
  }
}

@media (max-width: 380px){
  .guest-stepper{
    grid-template-columns:1fr!important;
  }

  .booking-inline-row{
    justify-content:space-between;
    width:100%;
  }
}

/* Booking density: cards should use the available width, not become a single endless column. */
.preset-list{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:10px!important;
}

.session-option-card{
  display:grid!important;
  grid-template-columns:40px minmax(0,1fr)!important;
  grid-template-rows:auto auto!important;
  align-items:start!important;
  gap:10px!important;
  min-height:118px!important;
  padding:12px!important;
}

.session-option-check{
  grid-column:1;
  grid-row:1;
}

.session-option-copy{
  grid-column:2;
  grid-row:1;
  min-width:0;
}

.session-option-price{
  grid-column:1 / -1!important;
  grid-row:2;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:8px!important;
  width:100%!important;
  margin-top:2px!important;
}

.session-option-price small{
  min-width:0;
  text-align:right;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.friend-row{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:8px!important;
}

@media (min-width: 768px){
  .preset-list{
    gap:12px!important;
  }

  .session-option-card{
    grid-template-columns:42px minmax(0,1fr) auto!important;
    grid-template-rows:auto!important;
    min-height:96px!important;
    align-items:center!important;
  }

  .session-option-price{
    grid-column:3!important;
    grid-row:1!important;
    flex-direction:column!important;
    align-items:flex-end!important;
    justify-content:center!important;
    width:auto!important;
    min-width:96px;
    margin-top:0!important;
  }
}

@media (max-width: 430px){
  .preset-list{
    gap:8px!important;
  }

  .session-option-card{
    grid-template-columns:34px minmax(0,1fr)!important;
    min-height:124px!important;
    padding:10px!important;
  }

  .session-option-title{
    font-size:.82rem!important;
  }

  .session-option-sub{
    font-size:.66rem!important;
    line-height:1.22!important;
  }

  .session-option-price{
    align-items:flex-end!important;
  }

  .session-option-price .chip-amount{
    font-size:.76rem!important;
  }

  .session-option-price small{
    max-width:46%!important;
    font-size:.56rem!important;
  }
}

@media (max-width: 360px){
  .preset-list,
  .friend-row{
    grid-template-columns:1fr!important;
  }

  .session-option-card{
    min-height:92px!important;
  }
}
