/* Basma Attia Designs — Showroom booking widget
   Scoped under .ba-booking so it never leaks into the rest of the theme. */
.ba-booking {
  --ba-mauve: #6A5658;
  --ba-mauve-deep: #4f3f41;
  --ba-nude: #D9CDCD;
  --ba-nude-soft: #F5F0F0;
  --ba-white: #FFFFFF;
  --ba-ink: #2b2324;
  --ba-muted: #85777a;
  --ba-radius: 2px;
  --ba-serif: var(--ba-heading-font, "Cormorant Garamond", "Times New Roman", Georgia, serif);
  color: var(--ba-ink);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
.ba-booking *, .ba-booking *::before, .ba-booking *::after { box-sizing: border-box; }
.ba-booking button, .ba-booking input { font: inherit; color: inherit; }
.ba-booking__sr, .ba-booking__hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.ba-booking__grid { display: grid; gap: 48px; }
@media (min-width: 990px) {
  .ba-booking__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 72px; align-items: start; }
  .ba-booking__details { position: sticky; top: 24px; }
}

.ba-booking__step {
  margin: 0 0 16px;
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ba-mauve);
}
.ba-booking__times { margin-top: 40px; }
.ba-booking__muted { color: var(--ba-muted); margin: -6px 0 16px; font-size: 14px; }

/* Days */
.ba-booking__days {
  display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity;
  padding: 2px 2px 12px; margin: 0 -2px; scrollbar-width: thin;
  align-items: stretch;
}
.ba-booking__month {
  flex: 0 0 auto; writing-mode: vertical-rl; transform: rotate(180deg);
  font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--ba-muted);
  padding: 4px 0; align-self: center;
}
.ba-booking__day {
  flex: 0 0 auto; width: 68px; scroll-snap-align: start;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 14px 6px 12px; background: var(--ba-white);
  border: 1px solid var(--ba-nude); border-radius: var(--ba-radius); cursor: pointer;
  transition: border-color .2s, background-color .2s, color .2s;
}
.ba-booking__day:hover:not(:disabled) { border-color: var(--ba-mauve); }
.ba-booking__dow { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ba-muted); }
.ba-booking__dom { font-family: var(--ba-serif); font-size: 28px; line-height: 1.1; }
.ba-booking__mon { font-size: 11px; color: var(--ba-muted); }
.ba-booking__day.is-selected { background: var(--ba-mauve); border-color: var(--ba-mauve); color: var(--ba-white); }
.ba-booking__day.is-selected .ba-booking__dow, .ba-booking__day.is-selected .ba-booking__mon { color: var(--ba-nude); }
.ba-booking__day:disabled { cursor: not-allowed; background: var(--ba-nude-soft); border-color: transparent; opacity: .55; }

/* Slots */
.ba-booking__slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 600px) { .ba-booking__slots { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ba-booking__slot {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 14px 16px; text-align: left; background: var(--ba-white);
  border: 1px solid var(--ba-nude); border-radius: var(--ba-radius); cursor: pointer;
  transition: border-color .2s, background-color .2s, color .2s;
}
.ba-booking__slot:hover:not(:disabled) { border-color: var(--ba-mauve); }
.ba-booking__time { font-family: var(--ba-serif); font-size: 21px; line-height: 1.2; }
.ba-booking__slot-note { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ba-muted); }
.ba-booking__slot.is-selected { background: var(--ba-mauve); border-color: var(--ba-mauve); color: var(--ba-white); }
.ba-booking__slot.is-selected .ba-booking__slot-note { color: var(--ba-nude); }
.ba-booking__slot:disabled { cursor: not-allowed; background: var(--ba-nude-soft); border-color: transparent; }
.ba-booking__slot:disabled .ba-booking__time { color: var(--ba-muted); text-decoration: line-through; text-decoration-thickness: 1px; }

.ba-booking__day:focus-visible, .ba-booking__slot:focus-visible, .ba-booking__submit:focus-visible,
.ba-booking__link:focus-visible, .ba-booking__pill-input:focus-visible + .ba-booking__pill, .ba-booking__input:focus-visible {
  outline: 2px solid var(--ba-mauve); outline-offset: 2px;
}

/* Form */
.ba-booking__details { background: var(--ba-white); border: 1px solid var(--ba-nude); padding: 28px 22px; border-radius: var(--ba-radius); }
@media (min-width: 750px) { .ba-booking__details { padding: 36px 36px 30px; } }
.ba-booking__field { margin: 0 0 20px; padding: 0; border: 0; min-width: 0; }
.ba-booking__label { display: block; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ba-muted); margin: 0 0 6px; padding: 0; }
.ba-booking__input {
  width: 100%; padding: 12px 0 10px; border: 0; border-bottom: 1px solid var(--ba-nude);
  background: transparent; border-radius: 0; font-size: 16px; /* 16px stops iOS zoom */
  transition: border-color .2s; -webkit-appearance: none; appearance: none;
}
.ba-booking__input:focus { border-bottom-color: var(--ba-mauve); outline: none; }
.ba-booking__input::placeholder { color: #bfb3b4; }
.has-error .ba-booking__input { border-bottom-color: #a33b3b; }
.ba-booking__hint { margin: 6px 0 0; font-size: 12.5px; color: var(--ba-muted); }
.ba-booking__error { margin: 6px 0 0; font-size: 13px; color: #a33b3b; }

.ba-booking__pills { display: flex; flex-wrap: wrap; gap: 8px; }
.ba-booking__pill-input { position: absolute; opacity: 0; pointer-events: none; }
.ba-booking__pill {
  display: inline-block; padding: 8px 14px; border: 1px solid var(--ba-nude); border-radius: 999px;
  font-size: 13px; cursor: pointer; transition: all .2s; user-select: none;
}
.ba-booking__pill:hover { border-color: var(--ba-mauve); }
.ba-booking__pill-input:checked + .ba-booking__pill { background: var(--ba-mauve); border-color: var(--ba-mauve); color: var(--ba-white); }

.ba-booking__summary { display: flex; flex-direction: column; gap: 2px; padding: 16px 0; margin: 4px 0 18px; border-top: 1px solid var(--ba-nude); border-bottom: 1px solid var(--ba-nude); }
.ba-booking__summary-label { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--ba-muted); }
.ba-booking__summary-value { font-family: var(--ba-serif); font-size: 20px; color: var(--ba-muted); }
.ba-booking__summary.is-ready .ba-booking__summary-value { color: var(--ba-ink); }

.ba-booking__submit {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; padding: 14px 24px;
  background: var(--ba-mauve); color: var(--ba-white) !important; border: 1px solid var(--ba-mauve); border-radius: var(--ba-radius);
  font-size: 13px; letter-spacing: .2em; text-transform: uppercase; text-decoration: none; cursor: pointer;
  transition: background-color .2s, opacity .2s;
}
.ba-booking__submit:hover:not(:disabled) { background: var(--ba-mauve-deep); }
.ba-booking__submit:disabled { opacity: .45; cursor: not-allowed; }
.ba-booking__submit[aria-busy="true"] { opacity: .75; cursor: progress; }
.ba-booking__fine { margin: 14px 0 0; font-size: 12.5px; color: var(--ba-muted); text-align: center; }

.ba-booking__alert, .ba-booking__notice { margin: 16px 0; padding: 12px 14px; font-size: 14px; border-left: 2px solid var(--ba-mauve); background: var(--ba-nude-soft); }
.ba-booking__alert { border-left-color: #a33b3b; }
.ba-booking__link { background: none; border: 0; padding: 0; color: var(--ba-mauve); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-size: 14px; }

.ba-booking__skeleton { display: flex; gap: 8px; margin-bottom: 12px; }
.ba-booking__skeleton span { width: 68px; height: 86px; background: linear-gradient(90deg, var(--ba-nude-soft), #fbf8f8, var(--ba-nude-soft)); background-size: 200% 100%; animation: ba-shimmer 1.4s infinite; }
@keyframes ba-shimmer { to { background-position: -200% 0; } }

/* Success */
.ba-booking__success { max-width: 560px; margin: 0 auto; text-align: center; background: var(--ba-white); border: 1px solid var(--ba-nude); padding: 40px 24px; outline: none; }
.ba-booking__success-title { font-family: var(--ba-serif); font-weight: 500; font-size: 32px; line-height: 1.15; margin: 0 0 24px; }
.ba-booking__receipt { margin: 0 0 28px; text-align: left; border-top: 1px solid var(--ba-nude); }
.ba-booking__receipt > div { display: grid; grid-template-columns: 96px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--ba-nude); }
.ba-booking__receipt dt { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--ba-muted); padding-top: 3px; }
.ba-booking__receipt dd { margin: 0; }
.ba-booking__receipt a { color: var(--ba-mauve); }
.ba-booking__success .ba-booking__link { margin-top: 20px; }

@media (prefers-reduced-motion: reduce) {
  .ba-booking *, .ba-booking__skeleton span { transition: none !important; animation: none !important; }
}