/* Compact booking form shared by the Arsenal preview pages. */
.booking-modal .booking-modal-backdrop {
  background: rgba(16, 14, 12, 0.62);
  backdrop-filter: blur(4px);
}

.booking-modal .booking-modal-dialog {
  width: min(100%, 650px);
  max-height: min(92dvh, 840px);
  padding: 27px 32px 30px;
  border: 1px solid #e4ded8;
  border-radius: 12px;
  background: #f8f7f5;
  color: #292521;
  box-shadow: 0 22px 80px rgba(0, 0, 0, 0.25);
}

.booking-modal .booking-modal-close {
  top: 15px;
  right: 17px;
  width: 34px;
  height: 34px;
  border: 0;
  background: transparent;
  color: #756f69;
  font-size: 28px;
  line-height: 1;
}

.booking-modal .booking-modal-close:hover { color: #24201d; }

.booking-modal-eyebrow {
  display: block;
  margin-bottom: 8px;
  color: #a76639;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.booking-modal .booking-modal-head h2 {
  margin: 0;
  color: #292521;
  font-family: Georgia, serif;
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.025em;
  text-transform: none;
}

.booking-modal .booking-modal-head p {
  margin: 7px 0 0;
  color: #746e68;
  font-size: 13px;
  line-height: 1.45;
}

.booking-modal .booking-form {
  gap: 14px;
  margin-top: 20px;
}

.booking-modal .booking-grid { gap: 12px; }
.booking-modal .booking-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.booking-modal .booking-field { gap: 6px; min-width: 0; }

.booking-modal .booking-field > span {
  color: #504a45;
  font-size: 12px;
  font-weight: 600;
}

.booking-modal .booking-field input,
.booking-modal .booking-field select,
.booking-modal .booking-field textarea {
  min-height: 43px;
  padding: 0 12px;
  border: 1px solid #d9d3cd;
  border-radius: 6px;
  background: #fff;
  color: #292521;
  font-size: 14px;
  box-shadow: none;
}

.booking-modal .booking-field select {
  background: #fff !important;
  color: #292521 !important;
  -webkit-text-fill-color: #292521;
}

.booking-modal .booking-field input::placeholder,
.booking-modal .booking-field textarea::placeholder { color: #a9a39c; }

.booking-modal .booking-field input:focus,
.booking-modal .booking-field select:focus,
.booking-modal .booking-field textarea:focus {
  border-color: #df8645;
  outline: 2px solid rgba(255, 139, 61, 0.18);
  outline-offset: 0;
}

.booking-modal .booking-date-field { max-width: 220px; }
.booking-modal .booking-time-field { gap: 7px; }

.booking-modal .booking-slot-status {
  min-height: 0;
  margin: 0;
  color: #77706a;
  font-size: 12px;
  line-height: 1.35;
}

.booking-modal .booking-slot-status[hidden] { display: none; }
.booking-modal .booking-slot-status[data-state="success"] { color: #5a6e55; }
.booking-modal .booking-slot-status[data-state="error"] { color: #a44b3e; }

.booking-modal .booking-slot-list {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  min-height: 0;
}

.booking-modal .booking-slot {
  min-height: 38px;
  padding: 0 6px;
  border: 1px solid #dcd5ce;
  border-radius: 6px;
  background: #fff;
  color: #302b27;
  font-size: 13px;
  font-weight: 500;
}

.booking-modal .booking-slot[hidden] { display: none; }
.booking-modal .booking-slot:hover { border-color: #f18b44; transform: none; }

.booking-modal .booking-slot.is-active {
  border-color: #f18b44;
  background: #ff8b3d;
  color: #2c2119;
}

.booking-modal .booking-slot-placeholder {
  min-height: 38px;
  padding: 9px 12px;
  border: 1px dashed #d7d0c9;
  border-radius: 6px;
  background: #fff;
  color: #77706a;
  font-size: 12px;
}

.booking-modal .booking-slot-more,
.booking-modal .booking-slot-retry {
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid #ed9a62;
  border-radius: 6px;
  background: #fffaf5;
  color: #975129;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.booking-modal .booking-slot-more { grid-column: 1 / -1; }
.booking-modal .booking-slot-retry { grid-column: 1 / -1; justify-self: start; }
.booking-modal .booking-slot-more:hover,
.booking-modal .booking-slot-retry:hover { background: #fff0e4; }

.booking-modal .booking-comment { color: #9b5b31; font-size: 12px; }
.booking-modal .booking-comment summary { width: fit-content; cursor: pointer; }
.booking-modal .booking-comment[open] summary { margin-bottom: 12px; }
.booking-modal .booking-comment .booking-field textarea {
  display: block;
  width: 100%;
  min-height: 72px;
  padding: 10px 12px;
  resize: vertical;
}

.booking-modal .booking-consent {
  gap: 9px;
  color: #69615a;
  font-size: 11px;
  line-height: 1.4;
}

.booking-modal .booking-consent input {
  inline-size: 16px;
  block-size: 16px;
  accent-color: #ef8b47;
}

.booking-modal .booking-consent a { color: #a45d30; }

.booking-modal .booking-form-note { padding: 10px 12px; border-radius: 6px; font-size: 11px; }
.booking-modal .booking-form-note:empty { display: none; }

.booking-modal .booking-form-feedback {
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.45;
}

.booking-modal .booking-form-feedback.is-success { color: #356544; background: #e5f2e9; }
.booking-modal .booking-form-feedback.is-error { color: #9b3c38; background: #fae9e7; }
.booking-modal .booking-form-feedback.is-info { color: #795433; background: #f6eee4; }

.booking-modal .booking-form-actions { margin-top: 2px; }

.booking-modal .booking-form-actions .button-primary {
  flex: none;
  width: 100%;
  min-height: 46px;
  padding: 0 18px;
  border: 0;
  border-radius: 6px;
  background: #ff8b3d;
  color: #241d18;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.booking-modal .booking-form-actions .button-primary:hover { background: #f67c2a; }

@media (max-width: 560px) {
  .booking-modal { padding: 8px; }
  .booking-modal .booking-modal-dialog {
    max-height: calc(100dvh - 16px);
    padding: 22px 17px 24px;
    border-radius: 10px;
  }
  .booking-modal .booking-form { margin-top: 17px; }
  .booking-modal .booking-grid-2 { grid-template-columns: 1fr 1fr; }
  .booking-modal .booking-grid { gap: 9px; }
  .booking-modal .booking-field select,
  .booking-modal .booking-field input { font-size: 13px; }
  .booking-modal .booking-field select[name="master"] {
    padding-right: 7px;
    padding-left: 7px;
    font-size: 12px;
  }
  .booking-modal .booking-slot-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .booking-modal .booking-date-field { max-width: none; }
  .booking-modal .booking-consent { font-size: 10px; }
}

@media (max-width: 360px) {
  .booking-modal .booking-grid-2 { grid-template-columns: 1fr; }
  .booking-modal .booking-slot-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}