/* Layout for the public 15-minute phone booking card. Chrome stays in shared classes. */

/* The card is grey on the marketing page, so plates, slots and fields are elevated (handbook §9/§10). */
.bv-phone-booking {
  --btn-secondary-bg: var(--color-grouped-card);
  --btn-secondary-bg-hover: color-mix(in srgb, var(--color-text) 6%, var(--color-grouped-card));
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  width: 100%;
}

.bv-phone-booking__layout {
  display: grid;
  grid-template-columns: minmax(18rem, 22rem) minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}

.bv-phone-booking .bv-date-picker--inline {
  padding: var(--space-4);
  background: var(--color-grouped-card);
}

.bv-phone-booking__side {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.bv-phone-booking__day {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bv-phone-booking__day[hidden],
.bv-phone-booking__slots[hidden],
.bv-phone-booking__form[hidden] {
  display: none;
}

.bv-phone-booking__day-title {
  margin: 0;
  color: var(--color-text);
  font-size: var(--font-size-lg);
  font-weight: 600;
}

.bv-phone-booking__slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
  gap: var(--space-2);
}

.bv-phone-booking__slots .btn {
  width: 100%;
  min-height: 44px;
  font-variant-numeric: tabular-nums;
}

.bv-phone-booking__slots .setting-info {
  grid-column: 1 / -1;
}

.bv-phone-booking__form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3) var(--space-4);
}

.bv-phone-booking .form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.bv-phone-booking .form-input {
  --form-input-fill: var(--color-grouped-card);
}

.bv-phone-booking__form .btn {
  grid-column: 1 / -1;
  justify-self: start;
  min-height: 44px;
}

.bv-phone-booking__status:not(.is-error) {
  color: var(--color-text);
  font-weight: 500;
}

.bv-phone-booking__status.is-error {
  color: var(--color-danger);
}

@media (max-width: 760px) {
  .bv-phone-booking__layout,
  .bv-phone-booking__form {
    grid-template-columns: minmax(0, 1fr);
  }

  .bv-phone-booking__form .btn {
    justify-self: stretch;
  }
}