.rb-component {
  --rb-primary: #825a32;
  --rb-primary-dark: #5d3d20;
  --rb-primary-light: #e4c29b;
  --rb-ink: #f5f2ed;
  --rb-muted: #c9c2ba;
  --rb-surface-ink: #202020;
  --rb-surface-muted: #666;
  --rb-line: #ded8d1;
  --rb-soft: #f6f3ef;
  --rb-success: #267a4b;
  color: var(--rb-ink);
  margin-inline: auto;
  max-width: 1280px;
}

.rb-component *, .rb-component *::before, .rb-component *::after { box-sizing: border-box; }
.rb-component h1, .rb-component h2, .rb-component h3, .rb-component legend { color: inherit !important; }
.rb-component .btn-primary { background: var(--rb-primary); border-color: var(--rb-primary); color: #fff; }
.rb-component .btn-primary:hover, .rb-component .btn-primary:focus { background: var(--rb-primary-dark); border-color: var(--rb-primary-dark); color: #fff; }
.rb-component .btn-outline-primary { border-color: var(--rb-primary-light); color: var(--rb-primary-light); }
.rb-component .btn-outline-primary:hover { background: var(--rb-primary); color: #fff; }
.rb-eyebrow { color: var(--rb-primary-light); font-size: .76rem; font-weight: 700; letter-spacing: .14em; margin: 0 0 .5rem; text-transform: uppercase; }
.rb-page-header { align-items: end; display: flex; gap: 2rem; justify-content: space-between; margin-bottom: 2rem; }
.rb-page-header h1 { font-size: clamp(2rem, 4vw, 3.5rem); margin: 0 0 .5rem; }
.rb-page-header p:last-child { color: var(--rb-muted); margin: 0; max-width: 720px; }

.rb-search { align-items: end; background: var(--rb-soft); border: 1px solid var(--rb-line); border-radius: 12px; color: var(--rb-surface-ink); display: grid; gap: 1rem; grid-template-columns: repeat(4, minmax(120px, 1fr)) auto; margin-bottom: 2rem; padding: 1.25rem; }
.rb-search label { display: block; font-size: .84rem; font-weight: 700; margin-bottom: .35rem; }
.rb-search .form-control { background-color: #fff; border-color: var(--rb-line); color: var(--rb-surface-ink); color-scheme: light; }
.rb-search .btn { min-height: 42px; }
.rb-room-list { display: grid; gap: 1.5rem; }
.rb-empty-state { border: 1px dashed var(--rb-line); border-radius: 12px; color: var(--rb-muted); padding: 2.5rem 1.5rem; text-align: center; }
.rb-room-card { background: #fff; border: 1px solid var(--rb-line); border-radius: 14px; color: var(--rb-surface-ink); display: grid; grid-template-columns: minmax(260px, 34%) 1fr; overflow: hidden; }
.rb-room-image img, .rb-image-placeholder { height: 100%; min-height: 270px; object-fit: cover; width: 100%; }
.rb-image-placeholder { align-items: center; background: linear-gradient(135deg, #ddd5cb, #f6f2ed); color: var(--rb-primary); display: flex; font-size: 4rem; justify-content: center; }
.rb-room-content { display: grid; gap: 1.5rem; grid-template-columns: 1fr minmax(190px, 26%); padding: clamp(1.25rem, 3vw, 2rem); }
.rb-room-main h2 { font-size: 1.65rem; margin: 0 0 .75rem; }
.rb-description { color: var(--rb-surface-muted); }
.rb-amenities { display: flex; flex-wrap: wrap; gap: .45rem 1rem; list-style: none; margin: 1rem 0; padding: 0; }
.rb-amenities li::before { color: var(--rb-success); content: "✓"; font-weight: 700; margin-right: .4rem; }
.rb-capacity { font-size: .88rem; font-weight: 650; margin-bottom: 0; }
.rb-room-price { align-items: flex-end; border-left: 1px solid var(--rb-line); display: flex; flex-direction: column; justify-content: center; padding-left: 1.5rem; text-align: right; }
.rb-room-price > span { color: var(--rb-surface-muted); font-size: .82rem; }
.rb-room-price strong { color: var(--rb-primary-dark); font-size: 1.65rem; line-height: 1.2; }
.rb-room-price .btn { margin-top: 1.25rem; }
.rb-room-price .rb-unavailable { background: #f8dddd; border-radius: 999px; color: #8b2020; font-weight: 700; margin-top: 1rem; padding: .45rem .7rem; }
.rb-room-price .rb-quote-total { color: var(--rb-success); font-weight: 700; margin-top: .8rem; }

.rb-back { color: var(--rb-primary-light); display: inline-block; margin-bottom: 1.25rem; text-decoration: none; }
.rb-booking-grid { display: grid; gap: clamp(2rem, 5vw, 5rem); grid-template-columns: minmax(280px, 38%) 1fr; }
.rb-booking-summary { align-self: start; background: var(--rb-soft); border-radius: 14px; color: var(--rb-surface-ink); overflow: hidden; padding: 1.5rem; position: sticky; top: 1rem; }
.rb-booking-summary > img { border-radius: 8px; height: 230px; margin: -1.5rem -1.5rem 1.5rem; object-fit: cover; width: calc(100% + 3rem); }
.rb-booking-summary h1 { font-size: 2rem; }
.rb-price-details { border-top: 1px solid var(--rb-line); margin-top: 1.25rem; padding-top: .75rem; }
.rb-price-details > div { display: flex; gap: 1rem; justify-content: space-between; padding: .4rem 0; }
.rb-price-details dt { font-weight: 500; }
.rb-price-details dd { font-weight: 700; margin: 0; text-align: right; }
.rb-note { color: var(--rb-surface-muted); font-size: .85rem; }
.rb-booking-form-wrap h2 { font-size: 2rem; margin: 0 0 1.5rem; }
.rb-booking-form-wrap fieldset { border: 0; border-top: 1px solid var(--rb-line); margin: 0 0 1.75rem; padding: 1.5rem 0 0; }
.rb-booking-form-wrap legend { float: none; font-size: 1.2rem; font-weight: 700; margin-bottom: 1rem; width: auto; }
.rb-form-grid { display: grid; gap: .5rem 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rb-booking-form-wrap .control-group { margin-bottom: 1rem; }
.rb-booking-form-wrap .control-label { font-weight: 650; margin-bottom: .35rem; }
.rb-booking-form-wrap .controls input:not([type="checkbox"]), .rb-booking-form-wrap .controls textarea { max-width: none; width: 100%; }
.rb-booking-form-wrap .form-control, .rb-booking-form-wrap input:not([type="checkbox"]):not([type="radio"]), .rb-booking-form-wrap textarea, .rb-booking-form-wrap select { background-color: #fff; border-color: var(--rb-line); color: var(--rb-surface-ink); color-scheme: light; }
.rb-booking-form-wrap .form-control:focus, .rb-booking-form-wrap input:not([type="checkbox"]):not([type="radio"]):focus, .rb-booking-form-wrap textarea:focus, .rb-booking-form-wrap select:focus { background-color: #fff; color: var(--rb-surface-ink); }
.rb-booking-form-wrap .form-text { color: var(--rb-muted); }
.rb-booking-form-wrap .rb-legal-link a { color: var(--rb-primary-light); }
.rb-live-price { background: #eef7f1; border-left: 4px solid var(--rb-success); color: #185a36; font-size: 1.08rem; font-weight: 700; margin: -.5rem 0 2rem; padding: 1rem; }
.rb-binding-note { background: #fff7e6; border: 1px solid #e8cf96; border-radius: 8px; color: var(--rb-surface-ink); margin: 1.25rem 0; padding: 1rem; }
.rb-binding-note p { margin: .25rem 0 0; }
.rb-legal-link { font-size: .88rem; margin: -.6rem 0 1rem 1.75rem; }

.rb-calendar-nav { align-items: center; display: flex; gap: 1rem; justify-content: space-between; margin-bottom: 1rem; }
.rb-calendar-nav span { font-weight: 700; }
.rb-calendar-legend { display: flex; gap: 1.25rem; justify-content: flex-end; margin-bottom: .75rem; }
.rb-calendar-legend span { align-items: center; display: flex; font-size: .85rem; gap: .4rem; }
.rb-calendar-legend i { border: 1px solid var(--rb-line); display: inline-block; height: 1rem; width: 1rem; }
.rb-calendar-scroll { border: 1px solid var(--rb-line); border-radius: 10px; overflow: auto; }
.rb-calendar-table { border-collapse: separate; border-spacing: 0; color: var(--rb-surface-ink); font-size: .78rem; min-width: max-content; width: 100%; }
.rb-calendar-table th, .rb-calendar-table td { border-bottom: 1px solid var(--rb-line); border-right: 1px solid var(--rb-line); height: 40px; min-width: 38px; text-align: center; }
.rb-calendar-table thead th { background: #fff; padding: .4rem; position: sticky; top: 0; z-index: 2; }
.rb-calendar-table thead th span { color: var(--rb-surface-muted); display: block; font-size: .68rem; text-transform: uppercase; }
.rb-calendar-table tr > th:first-child { background: #fff; left: 0; min-width: 140px; padding: .6rem .8rem; position: sticky; text-align: left; z-index: 3; }
.rb-calendar-table .rb-weekend { background: var(--rb-soft); }
.rb-free { background: #e8f5ec; }
.rb-booked { background: #c47a70; }

.rb-confirmation { background: var(--rb-soft); border-radius: 16px; color: var(--rb-surface-ink); margin-block: 2rem; max-width: 760px; padding: clamp(1.5rem, 5vw, 3.5rem); text-align: center; }
.rb-success-icon { align-items: center; background: var(--rb-success); border-radius: 50%; color: #fff; display: flex; font-size: 2rem; height: 64px; justify-content: center; margin: 0 auto 1rem; width: 64px; }
.rb-confirmation-details { background: #fff; border-radius: 10px; margin: 2rem 0; padding: 1rem 1.5rem; text-align: left; }
.rb-confirmation-details > div { border-bottom: 1px solid var(--rb-line); display: grid; gap: 1rem; grid-template-columns: 1fr 1.5fr; padding: .7rem 0; }
.rb-confirmation-details > div:last-child { border: 0; }
.rb-confirmation-details dd { font-weight: 700; margin: 0; text-align: right; }

@media (max-width: 900px) {
  .rb-search { grid-template-columns: repeat(2, 1fr); }
  .rb-search .btn { grid-column: 1 / -1; }
  .rb-room-card { grid-template-columns: 1fr; }
  .rb-room-image img, .rb-image-placeholder { max-height: 330px; }
  .rb-booking-grid { grid-template-columns: 1fr; }
  .rb-booking-summary { position: static; }
}

@media (max-width: 650px) {
  .rb-page-header { align-items: start; flex-direction: column; }
  .rb-search, .rb-form-grid { grid-template-columns: 1fr; }
  .rb-room-content { grid-template-columns: 1fr; }
  .rb-room-price { align-items: flex-start; border-left: 0; border-top: 1px solid var(--rb-line); padding-left: 0; padding-top: 1rem; text-align: left; }
  .rb-calendar-nav { align-items: stretch; flex-direction: column; text-align: center; }
}