/* Amelia-inspired booking modal — clean white shell, blue accents, compact copy */

.booking-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(4px);
  animation: bookingFadeIn 0.28s ease;
}

.booking-modal.active {
  display: flex;
}

@keyframes bookingFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.booking-modal-content {
  position: relative;
  width: min(520px, 100%);
  max-height: min(92vh, 900px);
  overflow: hidden auto;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.18);
  border: 1px solid #e5e7eb;
  animation: bookingSlideUp 0.32s ease;
}

@keyframes bookingSlideUp {
  from { transform: translateY(16px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.booking-modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 5;
  width: 36px;
  height: 36px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #ffffff;
  color: #64748b;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.booking-modal-close:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #0f172a;
  transform: none;
}

.booking-modal-header {
  margin: 0;
  padding: 18px 48px 14px 18px;
  background: #ffffff;
  border-bottom: 1px solid #eef2f7;
}

.booking-modal-header h2 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #0f172a;
}

.booking-modal-header #bookingSubtitle {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.4;
  color: #64748b;
}

.booking-modal-header #bookingSubtitle[hidden] {
  display: none !important;
}

.booking-modal-hint {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 224, 150, 0.92);
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 191, 0, 0.18);
}

.booking-lang-selector {
  display: flex;
  gap: 10px;
  margin-bottom: 6px;
}

.booking-lang-btn {
  flex: 1;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid rgba(7, 17, 25, 0.12);
  background: #fff;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 700;
  font-size: 13px;
  color: #1a2430;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.booking-lang-btn:hover {
  border-color: rgba(99, 102, 241, 0.55);
  background: #eef2ff;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.14);
}

/* Active language state — indigo. Reserved for chrome-level "which language
   am I using" picker so it doesn't compete with the gold submit button or
   the blue calendar selection. */
.booking-lang-btn.active {
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  color: #ffffff;
  border-color: rgba(79, 70, 229, 0.6);
  box-shadow: 0 6px 18px rgba(99, 102, 241, 0.32);
}

/* Location toggle buttons */
.booking-loc-btn {
  flex: 1;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid rgba(7, 17, 25, 0.12);
  background: #fff;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 700;
  font-size: 13px;
  color: #1a2430;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, transform 0.12s ease;
}
.booking-loc-btn:hover { border-color: rgba(13, 148, 136, 0.55); background: #f0fdfa; transform: translateY(-1px); }
/* Active location — teal. Different hue from the language indigo and the
   date-selected blue, so customers can mentally separate "where", "what
   language", and "which day" at a glance. */
.booking-loc-btn.active {
  background: linear-gradient(135deg, #14b8a6, #0d9488);
  color: #ffffff;
  border-color: rgba(13, 148, 136, 0.6);
  box-shadow: 0 6px 18px rgba(20, 184, 166, 0.32);
}

.booking-suggestion-location {
  display: block;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #b91e00;
}

.booking-suggestion-resource,
.booking-suggestion-context {
  display: block;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #0f172a;
}

.booking-suggestion-address {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  color: #64748b;
  text-transform: none;
  letter-spacing: 0;
}

.booking-suggestion-kicker {
  display: block;
  margin-bottom: 3px;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #64748b;
}

.booking-suggestion-card-headroom {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 3.4rem;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e8edf3;
}

.booking-suggestion-card-headroom--dual {
  min-height: 6.5rem;
}

.booking-suggestion-card-head--location .booking-suggestion-kicker {
  color: #b91e00;
}

.booking-suggestions-list-title {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #475569;
}

.booking-modal-form {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 16px 18px 20px;
  background: #ffffff;
}

.booking-form-group:has(#selectedLocationLabel) > label#labelLocation,
.booking-form-group:has(#selectedEquipmentBox) > label#labelEquipment {
  display: none;
}

#selectedLocationLabel {
  color: #334155;
  margin-top: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}

.booking-step-title {
  margin: 18px 0 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #7a8494;
}

.booking-step-title:first-of-type {
  margin-top: 4px;
}

.booking-fieldset {
  border: 0;
  margin: 0 0 18px;
  padding: 0;
  min-width: 0;
}

.booking-hours-note {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 600;
  color: #2a5a42;
}

.booking-form-group {
  margin-bottom: 16px;
}

.booking-form-group label,
.booking-form-group .booking-group-label,
.booking-field-legend {
  display: block;
  margin-bottom: 7px;
  font-weight: 700;
  font-size: 14px;
  color: #1f2a37;
}

/* Subtle "required" cue. Older customers benefit from explicit hints about
   which fields they must fill. We use a red asterisk after the label text,
   matching common form conventions. */
.booking-form-group.booking-field-required > label::after,
.booking-form-group.booking-field-required > .booking-group-label::after {
  content: ' *';
  color: #b91e00;
  font-weight: 800;
  margin-left: 2px;
}

.booking-form-group.booking-field-invalid > label,
.booking-form-group.booking-field-invalid > .booking-group-label,
.booking-terms-group.booking-field-invalid .booking-terms-text {
  color: #b91e00;
}

.booking-form-group.booking-field-invalid input[type='text'],
.booking-form-group.booking-field-invalid input[type='tel'],
.booking-form-group.booking-field-invalid input[type='email'],
.booking-form-group.booking-field-invalid textarea,
.booking-form-group.booking-field-invalid select,
.booking-form-group.booking-field-invalid .booking-calendar {
  border-color: #dc3545;
  box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.16);
}

.booking-terms-group.booking-field-invalid {
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(220, 53, 69, 0.06);
  box-shadow: inset 0 0 0 1px rgba(220, 53, 69, 0.28);
  animation: bookingFieldPulse 0.45s ease;
}

@keyframes bookingFieldPulse {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-4px);
  }
  75% {
    transform: translateX(4px);
  }
}

.booking-form-group.booking-field-invalid {
  animation: bookingFieldPulse 0.45s ease;
}

.booking-field-error {
  margin: 8px 0 0;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  color: #b91e00;
}

.booking-no-times-hint {
  margin: 8px 0 0;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  color: #b45309;
}

.booking-suggestions {
  margin: 8px 0 14px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  max-width: 100%;
  box-sizing: border-box;
}

.booking-suggestions-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
  padding: 12px 14px;
  border-radius: 8px;
  background: #fff8e6;
  border: 1px solid #f3e3a8;
}

.booking-suggestions-info-icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  color: #b45309;
}

.booking-suggestions-title {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
  color: #7c5a00;
}

.booking-suggestions-subtitle {
  display: none;
}

.booking-suggestions-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.booking-suggestion-btn {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-width: 0;
  min-height: 96px;
  padding: 12px 12px 12px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #ffffff;
  color: #0f172a;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  box-sizing: border-box;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.booking-suggestion-btn:hover {
  transform: none;
  border-color: #cbd5e1;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
}

.booking-suggestion-btn:active {
  transform: scale(0.99);
}

.booking-suggestion-btn-label {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
}

.booking-suggestion-card-details {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.booking-suggestion-card-meta {
  display: none;
}

.booking-suggestion-card-row {
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.35;
  color: #0f172a;
}

.booking-suggestion-icon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: #2271b1;
}

.booking-suggestion-btn-action {
  flex: 0 0 auto;
  align-self: center;
  min-width: 88px;
  padding: 8px 14px;
  border-radius: 6px;
  background: #2271b1;
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  text-align: center;
}

.booking-suggestion-btn:hover .booking-suggestion-btn-action {
  background: #135e96;
}

/* Loading state for the start-time select while /api/availability is in
   flight. The browser greys out a disabled select by default, which keeps
   "I'm working" obvious without adding a spinner. */
.booking-form-group select:disabled {
  background: #f0f2f6;
  color: #5b6573;
  cursor: progress;
}

.booking-modal .booking-form-group input[type="text"],
.booking-modal .booking-form-group input[type="tel"],
.booking-modal .booking-form-group input[type="email"],
.booking-modal .booking-form-group textarea,
.booking-form-group input[type="text"],
.booking-form-group input[type="tel"],
.booking-form-group input[type="email"],
.booking-form-group textarea,
.booking-form-group select {
  width: 100%;
  min-height: 46px;
  padding: 11px 13px;
  border: 1px solid rgba(7, 17, 25, 0.12);
  border-radius: 12px;
  font-size: 15px;
  font-family: inherit;
  background: #fff;
  color: #111b1e;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.booking-modal .booking-form-group input:-webkit-autofill,
.booking-modal .booking-form-group input:-webkit-autofill:hover,
.booking-modal .booking-form-group input:-webkit-autofill:focus {
  -webkit-text-fill-color: #111b1e;
  box-shadow: 0 0 0 1000px #fff inset;
  transition: background-color 9999s ease-out 0s;
}

.booking-form-group textarea {
  min-height: 88px;
  resize: vertical;
  line-height: 1.45;
}

/* Blue focus ring on text/select inputs. Reserves gold strictly for the
   submit-button area so the customer's eye knows: gold = action, blue =
   "I'm filling this in / I picked this". */
.booking-form-group input:focus,
.booking-form-group textarea:focus,
.booking-form-group select:focus {
  outline: none;
  border-color: rgba(37, 99, 235, 0.75);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}

.booking-inline-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.booking-time-duration-row {
  margin-bottom: 4px;
}

.booking-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.booking-equipment-preview-wrap {
  margin-bottom: 14px;
}

.booking-selected-equipment {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 12px;
  align-items: center;
  border-radius: 8px;
  padding: 10px 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  box-shadow: none;
}

.booking-selected-equipment-thumb {
  position: relative;
  min-height: 64px;
  border-radius: 6px;
  overflow: hidden;
  background: #ffffff;
}

.booking-selected-equipment-badge {
  width: 22px;
  height: 22px;
  font-size: 11px;
  background: #2271b1;
  box-shadow: none;
}

.booking-selected-equipment-title {
  color: #0f172a;
  font-size: 14px;
  font-weight: 700;
}

.booking-selected-equipment-price {
  margin-top: 2px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: #2271b1;
  font-weight: 700;
  font-size: 13px;
}

.booking-price-summary {
  background: linear-gradient(135deg, rgba(255, 191, 0, 0.12) 0%, rgba(255, 255, 255, 0.95) 100%);
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255, 191, 0, 0.28);
  margin-bottom: 12px;
  margin-top: 4px;
}

.booking-price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  color: #1f2a37;
}

.booking-price-row strong {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #0d3d26;
}

.booking-message {
  margin-bottom: 14px;
  padding: 14px 16px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.45;
  display: none;
  animation: bookingMsgIn 0.35s ease;
}

@keyframes bookingMsgIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.booking-message.success {
  background: linear-gradient(135deg, #e4f7ea 0%, #d0efd9 100%);
  color: #0d3d26;
  border: 1px solid #9fd4b0;
  border-left: 4px solid #28a745;
  display: block;
}

.booking-message.error {
  background: linear-gradient(135deg, #fdecee 0%, #fad6db 100%);
  color: #6b1c24;
  border: 1px solid #f0b4bc;
  border-left: 4px solid #dc3545;
  display: block;
}

.booking-message-code {
  margin-top: 8px;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.85;
}

.booking-message-icon {
  display: none;
}

.booking-message-title {
  display: block;
}

.booking-message-body {
  margin-top: 6px;
}

.booking-message-actions {
  display: none;
}

.booking-modal.booking-submitted .booking-modal-form {
  display: none !important;
}

.booking-modal.booking-submitted .booking-modal-content {
  padding-bottom: 24px;
}

.booking-modal.booking-submitted .booking-message {
  margin: 24px 22px 8px;
  padding: 28px 24px 26px;
  text-align: center;
  font-size: 15px;
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(13, 61, 38, 0.18);
}

.booking-modal.booking-submitted .booking-message-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, #28a745 0%, #1f8a3b 100%);
  color: #fff;
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 10px 24px rgba(40, 167, 69, 0.32);
}

.booking-modal.booking-submitted .booking-message-title {
  display: block;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.booking-modal.booking-submitted .booking-message-body {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.5;
  color: #1d3a2a;
}

.booking-modal.booking-submitted .booking-message-code {
  display: inline-block;
  margin-top: 14px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(13, 61, 38, 0.1);
  color: #0d3d26;
  opacity: 1;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 12px;
}

.booking-modal.booking-submitted .booking-message-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 22px;
}

.booking-message-btn {
  min-height: 48px;
  padding: 12px 16px;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.18s ease, filter 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.booking-message-btn-primary {
  background: linear-gradient(135deg, #0d3d26 0%, #1f8a3b 100%);
  color: #fff;
  box-shadow: 0 8px 22px rgba(13, 61, 38, 0.28);
}

.booking-message-btn-primary:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

.booking-message-btn-secondary {
  background: #e8ecf2;
  color: #1f2a37;
  border: 1px solid rgba(7, 17, 25, 0.1);
}

.booking-message-btn-secondary:hover {
  background: #dde3ec;
}

@media (max-width: 600px) {
  .booking-modal.booking-submitted .booking-message-actions {
    grid-template-columns: 1fr;
  }
}

.booking-modal-buttons {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 12px;
  margin-top: 4px;
}

.booking-terms-group {
  margin-top: 2px;
}

.booking-terms-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(7, 17, 25, 0.78);
}

.booking-terms-label input[type='checkbox'] {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: none;
  box-shadow: none;
  background: transparent;
  accent-color: #1f8a3b;
  cursor: pointer;
}

.booking-terms-text {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  margin: 0;
  line-height: 1.5;
}

.booking-terms-text a {
  color: #c99700;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1.5px;
  background: rgba(255, 191, 0, 0.22);
  padding: 1px 6px;
  border-radius: 4px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  transition: color 0.15s ease, background-color 0.15s ease;
}

#bookingModal .booking-terms-text a {
  color: #2271b1;
  font-weight: 600;
  background: none;
  padding: 0;
  border-radius: 0;
}

.booking-terms-text a:hover,
.booking-terms-text a:focus {
  color: #a67c00;
  background: rgba(255, 191, 0, 0.34);
}

.booking-terms-group.booking-field-invalid .booking-terms-text a {
  color: #c99700;
}

.booking-btn-submit,
.booking-btn-cancel {
  min-height: 48px;
  padding: 12px 14px;
  border: none;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.18s ease, filter 0.18s ease, box-shadow 0.18s ease;
}

.booking-btn-submit {
  background: #2271b1;
  color: #ffffff;
  box-shadow: none;
  border-radius: 8px;
}

.booking-btn-submit:hover {
  filter: none;
  background: #135e96;
  box-shadow: none;
  transform: none;
}

.booking-btn-cancel {
  background: #f8fafc;
  color: #334155;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}

.booking-btn-cancel:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
  transform: none;
}

/* Strong tactile feedback so older customers know the click landed. */
.booking-btn-submit:active,
.booking-btn-cancel:active,
.booking-message-btn:active {
  transform: scale(0.97);
  filter: brightness(0.96);
}

.booking-btn-submit:focus-visible,
.booking-btn-cancel:focus-visible,
.booking-message-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(34, 113, 177, 0.28);
}

.booking-btn-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  filter: grayscale(0.2);
  box-shadow: none;
}

.booking-loc-btn:active,
.booking-lang-btn:active {
  transform: scale(0.97);
}

/* Calendar */
.booking-calendar {
  margin-bottom: 0;
  padding: 12px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(7, 17, 25, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* === Calendar (redesigned 2026-05) =============================================
   Goals:
   - Clear, large hit targets (≥44px) for older customers
   - Unambiguous states: today vs. selected vs. hover vs. disabled
   - Tactile pressed state via scale-down on :active
   - "Today" is shown by a small blue dot above the number, NOT a red border —
     the previous red border competed visually with the selected (gold) state.
   ============================================================================ */
.booking-calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding: 4px 4px 12px;
  border-bottom: 1px solid rgba(7, 17, 25, 0.08);
}

.booking-calendar-nav {
  width: 48px;
  height: 48px;
  border: 1px solid rgba(7, 17, 25, 0.12);
  background: #fff;
  border-radius: 14px;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  color: #0a1622;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 0 rgba(7, 17, 25, 0.04);
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease,
    transform 0.12s ease, box-shadow 0.18s ease;
}

.booking-calendar-nav:hover {
  border-color: rgba(37, 99, 235, 0.7);
  background: #eff6ff;
  color: #1e3a8a;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.18);
}

.booking-calendar-nav:active {
  transform: scale(0.94);
  box-shadow: inset 0 2px 4px rgba(7, 17, 25, 0.12);
}

.booking-calendar-nav:focus-visible {
  outline: none;
  border-color: rgba(37, 99, 235, 0.85);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.28);
}

.booking-calendar-nav:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
}

.booking-calendar-title {
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: #0a1622;
  text-align: center;
  flex: 1;
}

.booking-calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-bottom: 8px;
}

.booking-weekday {
  text-align: center;
  font-weight: 700;
  font-size: 12px;
  color: #5b6573;
  padding: 8px 0;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Subtly tint the weekend column labels so customers see at a glance that
   business hours are shorter on Sat/Sun. */
.booking-weekday-weekend {
  color: #b95519;
}

.booking-calendar-dates {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

.booking-date-cell {
  aspect-ratio: 1;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid rgba(7, 17, 25, 0.1);
  background: #ffffff;
  color: #0a1622;
  position: relative;
  overflow: hidden;
  user-select: none;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease,
    transform 0.12s ease, box-shadow 0.18s ease;
}

.booking-date-cell:hover:not(:disabled):not(.other-month) {
  border-color: rgba(37, 99, 235, 0.6);
  background: #eff6ff;
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.18);
  transform: translateY(-1px);
}

.booking-date-cell:active:not(:disabled):not(.other-month) {
  transform: scale(0.94);
  box-shadow: inset 0 2px 4px rgba(7, 17, 25, 0.12);
}

.booking-date-cell:focus-visible {
  outline: none;
  border-color: rgba(37, 99, 235, 0.85);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.32);
}

/* Past / fully-booked. Reduced contrast so they don't draw the eye, but still
   readable enough that customers can verify they exist. */
.booking-date-cell.disabled,
.booking-date-cell:disabled {
  color: #b8bdc8;
  background: #f1f3f7;
  border-color: #e3e6ec;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* Days that belong to the previous/next month. Very low contrast — they're
   there for grid alignment only. */
.booking-date-cell.other-month {
  color: #d4d8e0;
  background: #f6f7fa;
  border-color: transparent;
  cursor: default;
  pointer-events: none;
  box-shadow: none;
}

/* Selected — the highest-priority state. Strong blue fill with white text and
   a blue glow so it reads as "this is the day you picked" from across the
   room. Gold is reserved exclusively for the submit button, so the selected
   day no longer competes visually with the call-to-action. */
.booking-date-cell.selected {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  color: #ffffff;
  border-color: rgba(29, 78, 216, 0.85);
  box-shadow: 0 8px 22px rgba(37, 99, 235, 0.45),
    inset 0 0 0 1px rgba(255, 255, 255, 0.32);
  transform: translateY(-1px);
}

.booking-date-cell.selected:hover:not(:disabled) {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  transform: translateY(-2px);
}

.booking-date-cell.selected:active:not(:disabled) {
  transform: scale(0.96);
}

/* Today indicator — a small green dot above the number. Green is unique to
   "today" so it never gets confused with the blue selected state or the
   teal location toggle. If today is ALSO selected, the dot becomes white so
   it remains visible against the blue background. */
.booking-date-cell.today:not(.selected)::before {
  content: '';
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #16a34a;
  box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.22);
}

.booking-date-cell.today.selected::before {
  content: '';
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 0 0 2px rgba(7, 17, 25, 0.32);
}

.booking-date-number {
  position: relative;
  z-index: 1;
  line-height: 1;
}

.booking-date-cell {
  position: relative;
  overflow: hidden;
}

.booking-date-fill {
  position: absolute;
  left: 3px;
  right: 3px;
  bottom: 3px;
  height: 0;
  border-radius: 2px;
  background: rgba(34, 113, 177, 0.24);
  pointer-events: none;
  z-index: 0;
  transition: height 0.18s ease;
}

.booking-date-cell.occupancy-medium .booking-date-fill {
  background: rgba(34, 113, 177, 0.34);
}

.booking-date-cell.occupancy-free .booking-date-fill {
  background: rgba(22, 163, 74, 0.22);
}

.booking-date-cell.occupancy-high .booking-date-fill,
.booking-date-cell.occupancy-full .booking-date-fill {
  background: rgba(214, 119, 61, 0.36);
}

.booking-date-cell.other-month .booking-date-fill,
.booking-date-cell.disabled .booking-date-fill {
  opacity: 0.45;
}

.booking-date-cell.selected .booking-date-fill {
  opacity: 0.5;
}

/* Calendar legend strip — short, plain-language captions explaining each
   visual state. Helps older customers parse the calendar at first glance. */
.booking-calendar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(7, 17, 25, 0.06);
  font-size: 12px;
  color: #5b6573;
}

.booking-calendar-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.booking-calendar-legend-swatch {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  border: 1px solid rgba(7, 17, 25, 0.1);
  background: #fff;
  position: relative;
  flex: 0 0 14px;
}

.booking-calendar-legend-swatch-selected {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  border-color: rgba(29, 78, 216, 0.85);
}

.booking-calendar-legend-swatch-today::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: #16a34a;
  box-shadow: 0 0 0 1.5px rgba(22, 163, 74, 0.3);
}

.booking-calendar-legend-swatch-disabled {
  background: #f1f3f7;
  border-color: #e3e6ec;
}

/* ============================================================
   Rental location switch (main page)
   ------------------------------------------------------------
   Lets the visitor pick which physical garage (Lasnamäe vs Kopli)
   the listed rental items belong to.  Selecting a location
   reorders the cards under .booking-services-grid and also
   pre-fills the booking modal so the booking lands in the right
   location.  The control sits above the rental grid.
   ============================================================ */
.rental-location-switch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: 14px 0 4px;
}
.rental-location-switch__label {
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245, 247, 251, 0.72);
  font-weight: 700;
}
/* Wrapper is a transparent group — the visual "pill" feel lives on each
   button so the WordPress theme's button styles can't bleed through. */
.rental-location-switch .rental-location-switch__toggle {
  display: inline-flex;
  gap: 12px;
  padding: 0;
  background: transparent !important;
  border: 0;
  box-shadow: none;
  border-radius: 0;
}
.rental-location-switch .rental-location-switch__button {
  appearance: none !important;
  -webkit-appearance: none !important;
  background: rgba(8, 14, 22, 0.55) !important;
  background-image: none !important;
  color: rgba(245, 247, 251, 0.85) !important;
  border: 1.5px solid rgba(255, 191, 0, 0.28) !important;
  font-weight: 700 !important;
  font-size: 15px;
  letter-spacing: 0.02em;
  text-transform: none;
  padding: 0 24px;
  height: 48px;
  min-width: 132px;
  border-radius: 999px !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  line-height: 1;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    transform 0.12s ease,
    box-shadow 0.2s ease;
}
.rental-location-switch .rental-location-switch__button::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(245, 247, 251, 0.4);
  box-shadow: inset 0 0 0 2px rgba(245, 247, 251, 0.18);
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
.rental-location-switch .rental-location-switch__button:hover {
  background: rgba(255, 191, 0, 0.12) !important;
  border-color: rgba(255, 191, 0, 0.55) !important;
  color: #fff !important;
}
.rental-location-switch .rental-location-switch__button:focus-visible {
  outline: 2px solid rgba(255, 191, 0, 0.75);
  outline-offset: 3px;
}
.rental-location-switch .rental-location-switch__button[aria-pressed="true"] {
  background: linear-gradient(135deg, #ffbf00 0%, #f29200 100%) !important;
  background-image: linear-gradient(135deg, #ffbf00 0%, #f29200 100%) !important;
  color: #0a1320 !important;
  border-color: rgba(255, 191, 0, 0.85) !important;
  box-shadow:
    0 12px 26px rgba(255, 191, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.rental-location-switch .rental-location-switch__button[aria-pressed="true"]::before {
  background: #0a1320;
  box-shadow: 0 0 0 3px rgba(10, 19, 32, 0.18);
}
.rental-location-switch .rental-location-switch__button:active { transform: scale(0.96); }
.rental-location-switch__hint {
  font-size: 12px;
  color: rgba(245, 247, 251, 0.6);
  text-align: center;
  margin: 0;
}
.rental-location-switch__hint strong {
  color: rgba(255, 191, 0, 0.95);
  font-weight: 700;
}
@media (max-width: 600px) {
  .rental-location-switch .rental-location-switch__toggle {
    width: min(100%, 360px);
    gap: 10px;
  }
  .rental-location-switch .rental-location-switch__button {
    flex: 1 1 0;
    min-width: 0;
    padding: 0 12px;
    font-size: 14px;
    height: 46px;
  }
}

.booking-services-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-top: 18px;
  align-items: start;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

html {
  scrollbar-gutter: stable;
}

#rentalServicesGrid:not(.rental-grid-ready) {
  opacity: 0;
  pointer-events: none;
}

#rentalServicesGrid.rental-grid-ready {
  opacity: 1;
  transition: opacity 0.18s ease;
}

#book .elementor-widget-wrap {
  width: 100%;
}

.booking-service-card {
  background: linear-gradient(180deg, rgba(7, 17, 25, 0.96) 0%, rgba(17, 27, 30, 0.96) 100%);
  border: 1px solid rgba(255, 191, 0, 0.18);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.28);
  cursor: pointer;
  aspect-ratio: 1 / 1;
  width: 100%;
  height: auto;
  min-height: 0;
  align-self: start;
  display: flex;
  flex-direction: column;
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
  outline: none;
}

.booking-service-card:hover,
.booking-service-card:focus-visible {
  transform: translateY(-6px);
  border-color: rgba(255, 191, 0, 0.45);
  box-shadow: 0 24px 44px rgba(0, 0, 0, 0.35);
}

.booking-service-card--no-booking {
  cursor: default;
}

.booking-service-card--no-booking:hover,
.booking-service-card--no-booking:focus-visible {
  transform: none;
  border-color: rgba(255, 191, 0, 0.18);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.28);
}

.booking-service-card--soon {
  opacity: 0.62;
  filter: grayscale(0.9);
}

.booking-service-card--soon .booking-service-image {
  filter: grayscale(1) brightness(0.82);
}

.booking-service-card--soon .booking-service-note {
  color: rgba(255, 191, 0, 0.92);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 12px;
}

.booking-service-image-wrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(7, 17, 25, 0.35);
}

.booking-service-image {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
  object-fit: contain;
}

.booking-service-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 191, 0, 0.95);
  color: #071119;
  font-size: 14px;
  font-weight: 800;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
}

.booking-service-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 17, 25, 0.08) 0%, rgba(7, 17, 25, 0.56) 100%);
}

.booking-service-body {
  flex: 0 0 auto;
  min-height: 9.25rem;
  padding: 16px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-sizing: border-box;
}

.booking-service-title {
  margin: 0;
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
}

.booking-service-caption {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 12.5px;
  line-height: 1.35;
  font-weight: 500;
  min-height: 17px;
}

.booking-service-footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.booking-service-price {
  margin: 0;
  color: #FFBF00;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.2px;
  white-space: nowrap;
}

.booking-service-note {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.3;
  text-align: right;
}

.booking-service-note a {
  color: inherit;
  text-decoration: none;
}

.booking-service-note a:hover,
.booking-service-note a:focus-visible {
  color: #FFBF00;
}

.booking-service-button {
  border: none;
  border-radius: 10px;
  padding: 10px 16px;
  background: linear-gradient(135deg, #FFBF00 0%, #f0a900 100%);
  color: #071119;
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
  transition: transform 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 4px 12px rgba(255, 191, 0, 0.22);
  white-space: nowrap;
}

.booking-service-button:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(255, 191, 0, 0.32);
}

.booking-service-button:active {
  transform: scale(0.97);
}

.booking-selected-equipment-path {
  display: none !important;
}

/* Homepage rental grid — side gutters on narrow screens */
@media (max-width: 767px) {
  #book > .elementor-container > .elementor-column > .elementor-element-populated {
    padding-left: max(18px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(18px, env(safe-area-inset-right, 0px)) !important;
  }

  #book .booking-services-grid {
    gap: 16px;
  }
}

@media (max-width: 600px) {
  .booking-modal {
    padding: 10px;
  }

  .booking-modal-content {
    border-radius: 16px;
    max-height: 94vh;
  }

  .booking-modal-header {
    padding: 18px 48px 16px 16px;
  }

  .booking-modal-form {
    padding: 14px 14px 18px;
  }

  .booking-inline-grid {
    grid-template-columns: 1fr;
  }

  .booking-services-grid {
    grid-template-columns: 1fr;
  }

  .booking-selected-equipment {
    grid-template-columns: 1fr;
  }

  .booking-selected-equipment-thumb {
    min-height: 140px;
  }

  .booking-modal-buttons {
    grid-template-columns: 1fr;
  }

  .booking-date-cell {
    min-height: 42px;
    font-size: 15px;
  }

  .booking-receipt {
    padding: 16px 14px;
  }

  .receipt-header-row {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .receipt-code-badge {
    align-self: flex-start;
    min-width: 118px;
  }

  .receipt-detail-row {
    gap: 8px;
  }

  .receipt-detail-label {
    flex: 0 1 34%;
    font-size: 12px;
  }

  .receipt-detail-value,
  .receipt-detail-value-strong,
  .receipt-detail-value-sub {
    font-size: 14px;
  }

  .receipt-contact-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .receipt-total-value {
    font-size: 24px;
  }

  .booking-message-actions-three {
    grid-template-columns: 1fr;
  }

  .booking-suggestions {
    padding: 12px;
  }

  .booking-suggestion-btn {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 12px;
  }

  .booking-suggestion-btn-label {
    flex: none;
    font-size: 12px;
  }

  .booking-suggestion-btn-action {
    align-self: stretch;
    min-height: 40px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    white-space: normal;
  }
}

/* === Receipt success view =================================================
   Replaces the old "Broneering salvestatud + code" snippet with a full
   receipt-style confirmation. Designed so it can be photographed, downloaded
   as PNG, or shown to a phone-call admin to look up the booking.
   ========================================================================== */
.booking-message-receipt {
  background: linear-gradient(135deg, #ecf7f0 0%, #f7faf6 70%);
  border: 1px solid #b8d8c1;
  border-left: 4px solid #28a745;
  border-radius: 18px;
  padding: 20px 18px 22px;
}

.booking-modal.booking-submitted .booking-message-receipt {
  padding: 18px 16px 22px;
  text-align: left;
}

.booking-receipt {
  margin: 16px 0 4px;
  background: #ffffff;
  border-radius: 18px;
  padding: 22px 22px 18px;
  box-shadow: 0 10px 28px rgba(7, 17, 25, 0.12),
    inset 0 0 0 1px rgba(7, 17, 25, 0.04);
  position: relative;
  overflow: hidden;
}

.booking-receipt::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 6px;
  background: linear-gradient(135deg, #ffbf00, #e8a200);
}

.receipt-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 4px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e8ebf0;
}

.receipt-logo-cell {
  flex: 1 1 auto;
  min-width: 0;
}

.receipt-logo {
  display: block;
  width: 100%;
  max-width: 138px;
  max-height: 54px;
  height: auto;
  object-fit: contain;
  object-position: left center;
}

.receipt-code-badge {
  flex: 0 0 auto;
  min-width: 124px;
  margin-left: auto;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(255, 191, 0, 0.16);
  border: 1px solid rgba(255, 191, 0, 0.42);
  text-align: center;
}

.receipt-code-badge-label {
  display: block;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #5b6573;
  line-height: 1.2;
}

.receipt-code-badge-value {
  display: block;
  margin-top: 4px;
  font-family: "Menlo", "Consolas", "Liberation Mono", monospace;
  font-size: 24px;
  font-weight: 800;
  color: #0a1622;
  line-height: 1;
}

.receipt-details {
  display: grid;
  gap: 2px;
}

.receipt-detail-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) minmax(0, 1.2fr);
  align-items: center;
  gap: 10px;
  padding: 7px 0;
}

.receipt-detail-row-sub {
  padding-top: 0;
  margin-top: -4px;
}

.receipt-row-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: rgba(255, 191, 0, 0.16);
  border: 1px solid rgba(255, 191, 0, 0.42);
  color: #8a6d00;
}

.receipt-row-icon svg {
  width: 18px;
  height: 18px;
  display: block;
}

.receipt-row-icon-spacer {
  visibility: hidden;
}

.receipt-detail-label {
  font-size: 13px;
  font-weight: 700;
  color: #5b6573;
}

.receipt-detail-value {
  font-size: 15px;
  font-weight: 600;
  color: #0a1622;
  text-align: right;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.receipt-detail-value-strong {
  font-size: 16px;
  font-weight: 800;
}

.receipt-detail-value-sub {
  font-size: 13px;
  font-weight: 500;
  color: #5b6573;
  text-align: right;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.receipt-total-bar {
  margin-top: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  background: linear-gradient(135deg, #0a1622 0%, #111f2d 100%);
  color: #fff;
  border-radius: 14px;
  padding: 14px 18px;
}

.receipt-total-left {
  min-width: 0;
}

.receipt-total-label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}

.receipt-total-status {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.82);
}

.receipt-total-status-value {
  color: #ffbf00;
  font-weight: 800;
}

.receipt-total-value {
  flex: 0 0 auto;
  font-size: 30px;
  font-weight: 800;
  color: #ffd54f;
  letter-spacing: -0.02em;
}

.receipt-info-note {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  margin-top: 14px;
  padding: 14px 14px 14px 12px;
  border-radius: 12px;
  background: #f7f8fb;
}

.receipt-info-text {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: #5b6573;
}

.receipt-contact {
  margin-top: 16px;
}

.receipt-contact-title {
  position: relative;
  margin-bottom: 18px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  color: #5b6573;
}

.receipt-contact-title::before,
.receipt-contact-title::after {
  content: '';
  position: absolute;
  top: 50%;
  width: calc(50% - 84px);
  height: 1px;
  background: #e8ebf0;
}

.receipt-contact-title::before {
  left: 0;
}

.receipt-contact-title::after {
  right: 0;
}

.receipt-contact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.receipt-contact-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.receipt-contact-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.receipt-contact-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5b6573;
}

.receipt-contact-value {
  font-size: 14px;
  font-weight: 700;
  color: #0a1622;
}

.receipt-brand-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
  padding: 11px 16px;
  border-radius: 12px;
  background: linear-gradient(135deg, #0a1622 0%, #111f2d 100%);
  color: #ffbf00;
}

.receipt-brand-car {
  font-size: 16px;
  line-height: 1;
}

.receipt-brand-tagline {
  font-size: 13px;
  font-weight: 700;
}

.receipt-footer-cancel {
  margin-top: 12px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
  color: #5b6573;
}

/* Three-button action row (download / new / close). On narrow screens the
   mobile breakpoint above collapses this to a single column. */
.booking-message-actions-three {
  display: grid;
  grid-template-columns: 1.4fr 1fr 0.9fr;
  gap: 10px;
  margin-top: 18px;
}

.booking-message-btn-ghost {
  background: transparent;
  color: #1f2a37;
  border: 1px solid rgba(7, 17, 25, 0.16);
}

.booking-message-btn-ghost:hover {
  background: #f0f2f6;
}

/* Elementor kit (.elementor-kit-9 button) paints every modal control gold.
   Scope under #bookingModal so Amelia styles actually apply. */
#bookingModal button.booking-modal-close {
  background: #ffffff;
  color: #64748b;
  border: 1px solid #e5e7eb;
}

#bookingModal button.booking-lang-btn,
#bookingModal button.booking-loc-btn {
  background: #ffffff;
  color: #334155;
  border: 1px solid #d1d5db;
  box-shadow: none;
}

#bookingModal button.booking-lang-btn:hover,
#bookingModal button.booking-loc-btn:hover {
  background: #f8fafc;
  border-color: #94a3b8;
  color: #0f172a;
  box-shadow: none;
  transform: none;
}

#bookingModal button.booking-lang-btn.active,
#bookingModal button.booking-loc-btn.active {
  background: #2271b1;
  color: #ffffff;
  border-color: #2271b1;
  box-shadow: none;
}

#bookingModal button.booking-calendar-nav {
  background: #ffffff;
  color: #0f172a;
  border: 1px solid rgba(7, 17, 25, 0.12);
}

#bookingModal button.booking-calendar-nav:hover {
  background: #eff6ff;
  border-color: rgba(37, 99, 235, 0.7);
  color: #1e3a8a;
}

#bookingModal button.booking-date-cell {
  background: #ffffff;
  color: #0a1622;
  border: 1px solid rgba(7, 17, 25, 0.1);
}

#bookingModal button.booking-date-cell:hover:not(:disabled):not(.other-month) {
  background: #eff6ff;
  border-color: rgba(37, 99, 235, 0.6);
  color: #0a1622;
}

#bookingModal button.booking-date-cell.selected {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  color: #ffffff;
  border-color: rgba(29, 78, 216, 0.85);
}

#bookingModal button.booking-date-cell.disabled,
#bookingModal button.booking-date-cell:disabled {
  background: #f1f3f7;
  color: #b8bdc8;
  border-color: #e3e6ec;
}

#bookingModal button.booking-date-cell.other-month {
  background: #f6f7fa;
  color: #d4d8e0;
}

#bookingModal button.booking-btn-submit {
  background: #2271b1;
  color: #ffffff;
  border: none;
}

#bookingModal button.booking-btn-submit:hover {
  background: #135e96;
  color: #ffffff;
}

#bookingModal button.booking-btn-cancel {
  background: #f8fafc;
  color: #334155;
  border: 1px solid #e2e8f0;
}

#bookingModal button.booking-suggestion-btn {
  background: #ffffff;
  color: #0f172a;
  border: 1px solid #e2e8f0;
}

#bookingModal button.booking-suggestion-action {
  background: #2271b1;
  color: #ffffff;
  border: none;
}