/* Caballeros unified date and time experience. */
.caballeros-booking-wizard[data-step="category"] {
  background-image: var(--cab-scene-service,url('/app-theme/backgrounds/caballeros-service.webp'));
}

.caballeros-calendar-toggle {
  justify-self: start;
  min-height: 38px;
  padding: 0 16px;
  border: 1px solid rgba(216,162,61,.62);
  border-radius: 999px;
  background: rgba(5,5,5,.78);
  color: var(--cab-gold-light);
  font-size: .7rem;
  font-weight: 850;
}

.caballeros-monthly-calendar {
  display: grid;
  gap: 7px;
  padding: 12px 14px;
  border: 1px solid rgba(216,162,61,.38);
  border-radius: 12px;
  background: rgba(6,6,6,.86);
  color: #bdb8b0;
  font-size: .65rem;
}

.caballeros-monthly-calendar input {
  width: 100%;
  min-height: 46px;
  padding: 0 12px;
  border: 1px solid rgba(216,162,61,.65);
  border-radius: 9px;
  background: #090909;
  color: #f7f4ee;
  color-scheme: dark;
  font: 750 .82rem "Inter",Arial,sans-serif;
}

.caballeros-wizard-options.category {
  grid-template-columns: 1fr;
  gap: 10px;
}

.caballeros-wizard-options.category button {
  display: grid;
  grid-template-columns: minmax(0,1fr) 20px;
  align-items: center;
  min-height: 78px;
  padding: 14px 18px;
  border: 1px solid var(--cab-line);
  border-radius: 14px;
  background: rgba(8,9,12,.9);
  color: #f7f4ee;
  text-align: left;
}

.caballeros-wizard-options.category button span { display: grid; gap: 5px; min-width: 0; }
.caballeros-wizard-options.category strong { font-size: .96rem; }
.caballeros-wizard-options.category small { color: #aaa6a0; font-size: .64rem; }
.caballeros-wizard-options.category i { color: var(--cab-gold); font: normal 1.8rem/1 Georgia,serif; }

.caballeros-composer-categories {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.caballeros-composer-options.service .caballeros-composer-categories button {
  min-height: 32px;
  padding: 5px 10px;
  border-color: rgba(216,162,61,.35);
  border-radius: 999px;
  color: var(--cab-gold-light);
  font-size: .62rem;
}

.caballeros-composer-options.service .caballeros-composer-categories button.selected {
  border-color: var(--cab-gold);
  background: rgba(216,162,61,.22);
}