.relife-booking-app {
  --rb-bg: #f4f1eb;
  --rb-panel: #fffdf8;
  --rb-ink: #1d2320;
  --rb-muted: #68716d;
  --rb-line: #ddd7cb;
  --rb-accent: #12665b;
  --rb-accent-soft: #d8eee9;
  --rb-warn: #9a3412;
  color: var(--rb-ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.relife-booking-app * {
  box-sizing: border-box;
}

.relife-booking-app [hidden] {
  display: none !important;
}

.rb-anti-spam {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.rb-grid,
.rb-admin {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 390px);
  gap: 22px;
  align-items: start;
}

.rb-mobile-app {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-left: 4px solid var(--rb-accent);
  background: var(--rb-accent-soft);
  color: var(--rb-accent);
}

.rb-mobile-app span {
  color: var(--rb-ink);
}

.rb-panel {
  padding: clamp(16px, 3vw, 28px);
  border: 1px solid var(--rb-line);
  border-radius: 8px;
  background: var(--rb-panel);
  box-shadow: 0 18px 48px rgba(31, 39, 35, 0.12);
}

.rb-panel h2 {
  margin: 0 0 18px;
  font-size: 24px;
}

.rb-form fieldset {
  margin: 0 0 24px;
  padding: 0;
  border: 0;
}

.rb-form legend {
  margin-bottom: 12px;
  font-weight: 800;
}

.rb-form label,
.rb-slot-form label {
  display: grid;
  gap: 7px;
  font-weight: 700;
}

.rb-form input,
.rb-form select,
.rb-form textarea,
.rb-slot-form input {
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--rb-line);
  border-radius: 8px;
  padding: 10px 12px;
}

.rb-field-warning {
  color: #b42318;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
}

.rb-parking-note {
  color: var(--rb-muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.55;
}

.rb-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.rb-vacant-detail {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.rb-vacant-room-note {
  padding: 10px 12px;
  border: 1px solid var(--rb-line);
  border-radius: 8px;
  background: #fff;
  color: var(--rb-accent);
  font-size: 13px;
  font-weight: 800;
}

.rb-vacant-options {
  display: grid;
  gap: 10px;
}

.rb-vacant-option {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 86px;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--rb-line);
  border-radius: 8px;
  background: #fff;
}

.rb-vacant-option input[type="checkbox"] {
  width: auto;
  min-height: auto;
}

.rb-vacant-option input[type="number"] {
  min-height: 38px;
}

.rb-services,
.rb-selected-slots,
.rb-bookings {
  display: grid;
  gap: 10px;
}

.rb-option,
.rb-card {
  display: grid;
  gap: 6px;
  padding: 14px;
  border: 1px solid var(--rb-line);
  border-radius: 8px;
  background: #fff;
}

.rb-option input {
  position: absolute;
  opacity: 0;
}

.rb-option:has(input:checked) {
  border-color: var(--rb-accent);
  background: var(--rb-accent-soft);
}

.rb-calendar-toolbar,
.rb-admin-toolbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.rb-selection-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid var(--rb-line);
  border-radius: 8px;
  background: var(--rb-accent-soft);
  color: var(--rb-accent);
}

.rb-batch-help {
  margin: -8px 0 16px;
  color: var(--rb-muted);
  line-height: 1.6;
}

.rb-month {
  text-align: center;
  color: #14263f;
  font-size: clamp(22px, 5vw, 36px);
  font-weight: 900;
}

.rb-weekdays,
.rb-calendar {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.rb-weekdays {
  border: 1px solid var(--rb-line);
  border-bottom: 0;
  background: #fff;
}

.rb-weekdays span {
  display: grid;
  min-height: 36px;
  place-items: center;
  border-right: 1px solid var(--rb-line);
  font-weight: 900;
}

.rb-weekdays span:first-child {
  color: #d9466b;
}

.rb-weekdays span:last-child {
  border-right: 0;
  color: #2454c6;
}

.rb-calendar {
  border-top: 1px solid var(--rb-line);
  border-left: 1px solid var(--rb-line);
}

.rb-day {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 6px;
  min-height: 108px;
  padding: 8px;
  border: 0;
  border-right: 1px solid var(--rb-line);
  border-bottom: 1px solid var(--rb-line);
  background: #fff;
  color: var(--rb-ink);
  text-align: left;
}

button.rb-day {
  cursor: pointer;
}

.rb-day.outside {
  background: #f8f5ee;
  color: #aaa;
}

.rb-day.selected {
  background: #fff8da;
  box-shadow: inset 0 0 0 3px var(--rb-accent);
}

.rb-day.unavailable,
.rb-day.blocked {
  background: #ececec;
  color: #777;
}

.rb-day-number {
  justify-self: end;
  font-weight: 900;
}

.rb-slot,
.rb-event,
.rb-unavailable {
  overflow: hidden;
  min-height: 26px;
  border-radius: 6px;
  padding: 4px 6px;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 900;
}

.rb-slot {
  width: 100%;
  border: 1px solid #b9dcd5;
  background: var(--rb-accent-soft);
  color: var(--rb-accent);
  cursor: pointer;
}

.rb-slot.selected {
  border-color: var(--rb-accent);
  background: var(--rb-accent);
  color: #fff;
}

.rb-event,
.rb-unavailable {
  display: block;
  background: #d8eee9;
}

.rb-event.closed,
.rb-unavailable {
  background: #d6d6d6;
  color: #666;
}

.rb-event.blocked {
  background: #d6d6d6;
  color: #555;
}

.rb-primary,
.rb-secondary,
.rb-danger,
.rb-quick button,
.rb-card button,
.rb-delete-booking {
  min-height: 44px;
  border: 0;
  border-radius: 8px;
  padding: 0 14px;
  font-weight: 800;
  cursor: pointer;
}

.rb-primary {
  width: 100%;
  background: var(--rb-accent);
  color: #fff;
}

.rb-secondary,
.rb-quick button {
  background: var(--rb-accent-soft);
  color: var(--rb-accent);
}

.rb-danger {
  width: 100%;
  background: #fee2d5;
  color: var(--rb-warn);
}

.rb-policy {
  padding: 12px;
  border: 1px solid var(--rb-line);
  border-radius: 8px;
  background: #fff8da;
  color: #66511c;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.55;
}

.rb-summary dl {
  display: grid;
  gap: 14px;
  margin: 0;
}

.rb-summary dl div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rb-line);
}

.rb-summary dd {
  margin: 0;
  text-align: right;
  font-weight: 900;
}

.rb-confirmation {
  margin-top: 16px;
  padding: 16px;
  border-radius: 8px;
  background: var(--rb-accent-soft);
  color: var(--rb-accent);
  font-weight: 800;
}

.rb-admin {
  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
}

.rb-requests {
  grid-column: 1 / -1;
}

.rb-email-settings {
  grid-column: 1 / -1;
}

.rb-email-form {
  display: grid;
  gap: 14px;
}

.rb-email-form label {
  display: grid;
  gap: 7px;
  font-weight: 800;
}

.rb-email-form input,
.rb-email-form textarea {
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--rb-line);
  border-radius: 8px;
  padding: 10px 12px;
  font: inherit;
}

.rb-email-form textarea {
  line-height: 1.55;
  resize: vertical;
}

.rb-placeholder-help,
.rb-email-message {
  margin: 0;
  color: var(--rb-muted);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.55;
}

.rb-email-message {
  color: var(--rb-accent);
}

.rb-bookings {
  gap: 18px;
}

.rb-booking-day {
  display: grid;
  gap: 10px;
}

.rb-booking-day h3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--rb-accent-soft);
  color: var(--rb-accent);
  font-size: 18px;
}

.rb-booking-day h3 span {
  font-size: 13px;
}

.rb-booking-list {
  display: grid;
  gap: 10px;
}

.rb-booking-card {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--rb-line);
  border-radius: 8px;
  background: #fff;
}

.rb-booking-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.rb-booking-head strong {
  font-size: 17px;
}

.rb-delete-booking {
  min-width: 72px;
  background: #fee2d5;
  color: var(--rb-warn);
}

.rb-booking-main {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 14px;
}

.rb-booking-main p {
  margin: 0;
  color: var(--rb-ink);
  line-height: 1.55;
}

.rb-booking-main b {
  display: block;
  color: var(--rb-muted);
  font-size: 12px;
}

.rb-slot-form,
.rb-quick {
  display: grid;
  gap: 12px;
}

.rb-quick {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 860px) {
  .rb-grid,
  .rb-admin,
  .rb-row,
  .rb-vacant-option,
  .rb-booking-main {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .rb-mobile-app {
    display: grid;
  }

  .rb-panel {
    padding: 14px;
  }

  .rb-day {
    min-height: 78px;
    padding: 5px;
  }

  .rb-slot,
  .rb-event,
  .rb-unavailable {
    min-height: 24px;
    padding: 3px 4px;
    font-size: 10px;
  }
}