/* ── Room Booking System – Modern UI Public Styles ──────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap');

:root {
  --rbs-primary:      #3a5fc8;
  --rbs-primary-dark: #2347b0;
  --rbs-primary-deep: #1a3a9c;
  --rbs-accent:       #e84545;
  --rbs-error:        #c62828;
  --rbs-success:      #2e7d32;
  --rbs-warn:         #b25a00;
  --rbs-surface:      #ffffff;
  --rbs-bg:           #fff;
  --rbs-border:       #e0e4ee;
  --rbs-text:         #1a1a2e;
  --rbs-text-sec:     #616161;
  --rbs-text-hint:    #b0b5c5;
  --rbs-radius:       11px;
  --rbs-radius-lg:    18px;
  --rbs-transition:   .2s cubic-bezier(.4,0,.2,1);
}

/* ── Base ───────────────────────────────────────────────────────────── */
.rbs-wrapper {
  max-width: auto;
  margin: 0 auto;
  font-family: 'Nunito', 'Segoe UI', system-ui, sans-serif;
  background: var(--rbs-bg);
  border-radius: var(--rbs-radius-lg);
  overflow: hidden;
  color: var(--rbs-text);
  -webkit-font-smoothing: antialiased;
}

/* ── Hero Banner ────────────────────────────────────────────────────── */
.rbs-header-card {
  background: linear-gradient(135deg, var(--rbs-primary) 0%, var(--rbs-primary-dark) 60%, var(--rbs-primary-deep) 100%);
  padding: 44px 28px 36px;
  text-align: center;
  position: relative;
  overflow: hidden;
  border-radius: 0;
}
.rbs-header-card::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 70% 20%, rgba(255,255,255,.10) 0%, transparent 60%);
  pointer-events: none;
}
.rbs-header-icon { font-size: 2.2rem; display: block; margin-bottom: 8px; }
.rbs-title {
  font-size: 2rem!important; font-weight: 800!important; color: #fff!important;
  line-height: 1.15!important; letter-spacing: -.5px!important; margin: 0!important;
}
.rbs-subtitle { font-size: .82rem; color: rgba(255,255,255,.75); margin: 10px 0 0; }

/* ── Body ───────────────────────────────────────────────────────────── */
#rbs-form-section { padding: 22px 16px 36px; }

/* ── Section Label ──────────────────────────────────────────────────── */
.rbs-section-label {
  font-size: 1.05rem!important; font-weight: 800!important; color: var(--rbs-text)!important;
  display: flex; align-items: center; gap: 9px;
  margin: 0 0 13px; text-transform: none; letter-spacing: 0;
}
.rbs-section-label::before {
  content: '';
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--rbs-primary); display: inline-block; flex-shrink: 0;
}

/* ── Room Cards ─────────────────────────────────────────────────────── */
.rbs-rooms-section {
  background: transparent;
  border: none; padding: 0;
  margin-bottom: 20px;
}
.rbs-room-cards-grid {
  display: flex; flex-direction: column; gap: 9px;
}
.rbs-room-card-item {
  background: var(--rbs-surface);
  border: 2px solid var(--rbs-border);
  border-radius: var(--rbs-radius);
  padding: 13px 15px;
  cursor: pointer;
  transition: border-color var(--rbs-transition), box-shadow var(--rbs-transition);
  position: relative;
}
.rbs-room-card-item:not(.rbs-room-booked):hover {
  border-color: var(--rbs-primary);
  box-shadow: 0 4px 16px rgba(58,95,200,.12);
}
.rbs-room-card-item.rbs-room-selected {
  border-color: var(--rbs-primary);
  background: #f0f4ff;
}
.rbs-room-card-item.rbs-room-booked {
  cursor: not-allowed; opacity: .72; background: #fafafa;
}
.rbs-room-card-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 7px;
}
.rbs-room-number { font-size: .88rem; font-weight: 800; color: var(--rbs-text); }
.rbs-room-badge {
  font-size: .68rem; font-weight: 800; padding: 3px 9px;
  border-radius: 20px; text-transform: uppercase; letter-spacing: .3px; white-space: nowrap;
}
.rbs-badge-available { background: #e8f5e9; color: #2e7d32; }
.rbs-badge-booked    { background: #fdecea; color: var(--rbs-error); }
.rbs-room-price-line { margin-bottom: 3px; }
.rbs-price-amount { font-size: 1rem; font-weight: 700; color: var(--rbs-primary); }
.rbs-per-night    { font-size: .72rem; color: var(--rbs-text-sec); margin-left: 2px; }
.rbs-room-desc-text {
  font-size: .75rem; color: var(--rbs-text-sec);
  margin: 6px 0 8px; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.rbs-select-indicator { font-size: .72rem; color: var(--rbs-primary); font-weight: 600; margin-top: 4px; }
.rbs-booked-label     { color: var(--rbs-error); }

/* ── Form Card (Personal + Stay details) ───────────────────────────── */
.rbs-form-card {
  background: transparent;
  border: none; border-top: none;
  padding: 0; margin-bottom: 4px;
}
.rbs-form-section-title {
  font-size: 1.05rem!important; font-weight: 800!important; color: var(--rbs-text)!important;
  display: flex; align-items: center; gap: 9px;
  margin: 20px 0 14px!important;
}
.rbs-step-badge {
  width: 22px; height: 22px;
  background: var(--rbs-primary); color: #fff;
  border-radius: 50%; font-size: .7rem; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}

/* ── Inputs ─────────────────────────────────────────────────────────── */
.rbs-md-row {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px; margin-bottom: 0;
}
.rbs-md-field { margin-bottom: 10px; flex: 1; }
.rbs-full-width { grid-column: 1 / -1; }

.rbs-md-input-wrap {
  position: relative;
  border-bottom: 2px solid var(--rbs-border);
  transition: border-color var(--rbs-transition);
  background: var(--rbs-surface);
/*   border-radius: var(--rbs-radius) var(--rbs-radius) 0 0; */
}
.rbs-md-input-wrap:focus-within { border-bottom-color: var(--rbs-primary); }
.rbs-md-input-wrap.rbs-input-error { border-bottom-color: var(--rbs-error); }

.rbs-md-input {
  width: 100%!important; border: none!important; outline: none!important;
  background: transparent; padding: 18px 13px 6px!important;
  font-size: .9rem!important; color: var(--rbs-text)!important;
  box-sizing: border-box!important; font-family: inherit!important; resize: none!important;
}
.rbs-md-input::placeholder { color: transparent; }

.rbs-md-label {
  position: absolute; left: 13px; top: 50%;
  transform: translateY(-50%);
  font-size: .9rem; color: var(--rbs-text-hint);
  pointer-events: none;
  transition: top var(--rbs-transition), font-size var(--rbs-transition), color var(--rbs-transition), transform var(--rbs-transition);
  white-space: nowrap;
}
.rbs-md-input:focus ~ .rbs-md-label,
.rbs-md-input:not(:placeholder-shown) ~ .rbs-md-label {
  top: 2px!important; transform: none;
  font-size: .68rem!important; color: var(--rbs-primary)!important;
}
.rbs-md-input-wrap.rbs-input-error .rbs-md-input:focus ~ .rbs-md-label,
.rbs-md-input-wrap.rbs-input-error .rbs-md-input:not(:placeholder-shown) ~ .rbs-md-label {
  color: var(--rbs-error);
}
.rbs-md-textarea { min-height: 78px; padding-top: 22px; }

/* Date inputs – always floated */
.rbs-date-wrap .rbs-date-label { top: 5px; transform: none; font-size: .68rem; color: var(--rbs-primary); }
.rbs-date-input { padding-top: 30px!important; }
.rbs-md-underline { display: none; }

.rbs-field-error {
  display: block; font-size: .73rem; color: var(--rbs-error);
  margin-top: 3px; min-height: 13px;
}

/* ── Notice messages ────────────────────────────────────────────────── */
.rbs-notice {
  padding: 12px 16px; border-radius: var(--rbs-radius);
  margin-bottom: 14px; font-size: .88rem;
  display: flex; align-items: center; gap: 9px;
}
.rbs-error   { background: #ffebee; border-left: 4px solid var(--rbs-error);   color: #c62828; }
.rbs-success { background: #e8f5e9; border-left: 4px solid var(--rbs-success); color: #1b5e20; }
.rbs-info    { background: #e3f2fd; border-left: 4px solid var(--rbs-primary); color: #0d47a1; }

/* ── Selected Room Bar ──────────────────────────────────────────────── */
.rbs-selected-room-info {
  display: flex; align-items: center; gap: 11px;
  background: #f0f4ff; border: 1.5px solid #c5d0f5;
  border-radius: var(--rbs-radius); padding: 11px 14px;
  margin-bottom: 10px;
}
.rbs-sel-room-icon { font-size: 1.2rem; }
.rbs-selected-room-info strong { display: block; font-size: .84rem; font-weight: 800; color: var(--rbs-primary-dark); }
.rbs-selected-room-info span   { font-size: .76rem; color: var(--rbs-text-sec); margin-top: 1px; display: block; }
.rbs-change-room-btn {
  margin-left: auto; background: var(--rbs-primary); color: #fff;
  border: none; border-radius: 7px; padding: 6px 13px;
  font-size: .75rem; font-weight: 700; cursor: pointer;
  font-family: inherit; transition: background var(--rbs-transition);
}
.rbs-change-room-btn:hover { background: var(--rbs-primary-dark); }

/* ── Price Summary Bar ──────────────────────────────────────────────── */
.rbs-summary-bar {
  display: flex; align-items: center;
  gap: 12px; flex-wrap: wrap;
  background: #f0f4ff; border: 1.5px solid #c5d0f5;
  border-radius: var(--rbs-radius); padding: 13px 18px;
  margin-bottom: 10px;
}
.rbs-summary-item { display: flex; flex-direction: column; align-items: center; }
.rbs-summary-label { font-size: .68rem; color: var(--rbs-text-sec); text-transform: uppercase; letter-spacing: .06em; }
.rbs-summary-value { font-size: 1rem; font-weight: 700; color: var(--rbs-primary); margin-top: 2px; }
.rbs-total-amount  { font-size: 1.05rem; color: #e84545; }
.rbs-summary-divider { width: 1px; height: 32px; background: #c5d0f5; }
.rbs-avail-yes { color: var(--rbs-success); font-weight: 700; font-size: .84rem; }
.rbs-avail-no  { color: var(--rbs-error);   font-weight: 700; font-size: .84rem; }

/* ── Submit Button ──────────────────────────────────────────────────── */
#rbs-booking-form {
  background: transparent;
  border: none; padding: 0;
  border-radius: 0;
}
.rbs-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; padding: 14px 32px;
  font-size: .95rem; font-weight: 800;
  border-radius: var(--rbs-radius); border: none;
  cursor: pointer; font-family: inherit;
  text-decoration: none; transition: transform .15s, box-shadow .15s, background var(--rbs-transition);
}
.rbs-btn-primary {
  background: linear-gradient(135deg, #ff6b6b, var(--rbs-accent));
  color: #fff; width: 100%; margin-top: 8px;
  box-shadow: 0 6px 18px rgba(232,69,69,.35);
}
.rbs-btn-primary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(232,69,69,.45);
}
.rbs-btn-primary:disabled { opacity: .42; cursor: not-allowed; transform: none; box-shadow: none; }
.rbs-btn-outline {
  background: transparent; color: var(--rbs-primary);
  border: 2px solid var(--rbs-primary); display: inline-flex;
}
.rbs-btn-outline:hover { background: #eef2ff; }
.rbs-btn-loader {
  width: 17px; height: 17px;
  border: 2px solid rgba(255,255,255,.4);
  border-top-color: #fff; border-radius: 50%;
  animation: rbs-spin .7s linear infinite;
}
@keyframes rbs-spin { to { transform: rotate(360deg); } }

/* ── Confirmation Box ───────────────────────────────────────────────── */
.rbs-confirm-box {
  background: var(--rbs-surface); border-radius: var(--rbs-radius-lg);
  padding: 48px 28px; text-align: center;
  animation: rbs-fade-in .4s ease;
  margin: 16px;
}
@keyframes rbs-fade-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.rbs-confirm-icon-wrap {
  width: 68px; height: 68px; background: var(--rbs-success);
  border-radius: 50%; display: flex; align-items: center;
  justify-content: center; margin: 0 auto 18px;
  animation: rbs-pop .4s cubic-bezier(.34,1.56,.64,1);
}
@keyframes rbs-pop { from { transform: scale(0); } to { transform: scale(1); } }
.rbs-confirm-check { font-size: 1.8rem; color: #fff; line-height: 1; }
.rbs-confirm-title { font-size: 1.4rem; font-weight: 800; color: var(--rbs-success); margin: 0 0 8px; }
.rbs-confirm-sub   { color: var(--rbs-text-sec); font-size: .9rem; margin: 0 0 22px; }
.rbs-confirm-details {
  text-align: left; border: 1px solid var(--rbs-border);
  border-radius: var(--rbs-radius); overflow: hidden;
}
.rbs-confirm-details table { width: 100%; border-collapse: collapse; }
.rbs-confirm-details th, .rbs-confirm-details td {
  padding: 10px 14px; font-size: .84rem;
  border-bottom: 1px solid var(--rbs-border);
}
.rbs-confirm-details th { color: var(--rbs-text-sec); font-weight: 600; width: 40%; background: #fafafa; }
.rbs-confirm-details tr:last-child th,
.rbs-confirm-details tr:last-child td { border-bottom: none; }

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 500px) {
  .rbs-md-row { grid-template-columns: 1fr; }
  #rbs-form-section { padding: 18px 12px 30px; }
  .rbs-summary-bar  { gap: 8px; }
}