/* ==========================================================================
   Aliya's Beauty — kit: controls, sheets and notices
   --------------------------------------------------------------------------
   The pieces every page in the landing page's language shares, whether it is
   the booking flow (css/booking.css) or the rest of the app (css/app.css):
   buttons, fields, tick boxes, loading veils, the slide pane, the payment
   sheet, the sign-in and register forms, consent forms, the prompt, one-line
   notices and toasts, the pop-up windows, and the calendar and time pickers.

   Loaded after css/ds/aliya-ds.css and css/landing.css and before the page's
   own stylesheet. Everything is scoped under .alt, the body class those pages
   carry.

   The unprefixed class names (.cta, .data-field, .checkbox-wrapper,
   .slidePane, .prompt, #popup …) are the markup contract of script/script.js:
   it adds and removes them and injects server-rendered markup that uses
   them, so they are styled here by those names.

   Sections: 1 Tokens · 2 Controls · 3 Panes & notices · 4 Windows & pickers
             5 Wider screens
   ========================================================================== */

/* 1. TOKENS ================================================================ */

.abx-app.alt {
  --kit-sheet: var(--abx-beige-100);
  --kit-card: var(--abx-beige-50);
  --kit-good: #1f6f3a;
  --kit-amber: #a8551b;

  --kit-gutter: clamp(1.25rem, 5.4vw, 2rem);
  --kit-radius: clamp(1.5rem, 6vw, 2rem);
  --kit-safe-b: env(safe-area-inset-bottom, 0px);
  /* The height of whatever the page fixes to its bottom edge (the booking
     flow's action bar, the app's tab bar), so notices can sit above it. */
  --kit-dock-h: 0px;

  --kit-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --kit-ease-in: cubic-bezier(0.5, 0, 0.75, 0);
}

/* Everything that opens over a page is paper: dark type, light cards. */
.alt .slidePane,
.alt .prompt,
.alt .overlay {
  --abx-text: var(--abx-ink-900);
  --abx-text-muted: var(--abx-ink-500);
  --abx-text-subtle: var(--abx-ink-400);
  --abx-accent: var(--abx-ink-900);
  --abx-accent-hover: #2c2b27;
  --abx-inverse: var(--abx-beige-300);
  --abx-on-accent: var(--abx-beige-100);
  --abx-border: rgba(23, 23, 22, 0.1);
  --abx-border-strong: rgba(23, 23, 22, 0.22);
  --abx-surface-sunken: rgba(23, 23, 22, 0.05);
  --abx-surface-solid: var(--kit-card);
  --abx-focus: #4459d0;
  color: var(--abx-text);
}

/* 2. CONTROLS ============================================================== */

/* Buttons (script.js: .cta, with .primary / .secondary / .disabled). */
.alt .cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3.25rem;
  padding: 0 1.6rem;
  border: 1px solid transparent;
  border-radius: var(--abx-radius-pill);
  font-family: var(--abx-font-display);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: background-color var(--abx-dur-2) var(--abx-ease), color var(--abx-dur-2) var(--abx-ease),
    opacity var(--abx-dur-2) var(--abx-ease), transform var(--abx-dur-1) var(--abx-ease);
}

.alt .cta.primary {
  background: var(--abx-accent);
  color: var(--abx-on-accent);
}

.alt .cta.secondary {
  border-color: var(--abx-border-strong);
  background: transparent;
  color: var(--abx-text);
}

.alt .cta svg {
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
}

.alt .cta:active {
  transform: scale(0.97);
}

/* Looks unavailable but still takes a tap: for some buttons script.js
   answers a tap on a disabled one by showing what is missing. */
.alt .cta.disabled {
  opacity: 0.36;
}

@media (hover: hover) {
  .alt .cta.primary:not(.disabled):hover {
    background: var(--abx-accent-hover);
  }

  .alt .cta.secondary:not(.disabled):hover {
    background: var(--abx-surface-sunken);
  }
}

/* Waiting on the server (availability check, validation). */
.alt .cta.is-busy {
  color: transparent;
  pointer-events: none;
}

.alt .cta.is-busy::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.15rem;
  height: 1.15rem;
  margin: -0.575rem 0 0 -0.575rem;
  border: 2px solid var(--abx-on-accent);
  border-right-color: transparent;
  border-radius: 50%;
  animation: kit-spin 0.7s linear infinite;
}

@keyframes kit-spin {
  to {
    transform: rotate(1turn);
  }
}

/* Text buttons (script.js: .link). */
.alt .link {
  padding: 0.3rem 0;
  color: var(--abx-text);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* Round close buttons (script.js: .btn.close). */
.alt .btn.close {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--abx-surface-sunken);
  color: var(--abx-text);
  cursor: pointer;
}

.alt .btn.close svg {
  width: 1.15rem;
  height: 1.15rem;
}

.alt .btn.close:empty::before {
  content: '\00d7';
  font-size: 1.4rem;
  line-height: 1;
}

.alt .field-wrapper,
.alt .login-form > div,
.alt .register-form > div {
  grid-column: 1 / -1;
  min-width: 0;
}

.alt label {
  display: block;
  margin-bottom: 0.4rem;
  font-family: var(--abx-font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--abx-text-muted);
}

.alt .data-field {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
  min-height: 3.25rem;
  /* The input carries the padding, so the whole field takes the tap. */
  padding: 0;
  border: 1px solid var(--abx-border-strong);
  border-radius: 0.9rem;
  background: var(--kit-card);
  transition: border-color var(--abx-dur-2) var(--abx-ease), box-shadow var(--abx-dur-2) var(--abx-ease);
}

.alt .data-field:focus-within {
  border-color: var(--abx-ink-900);
  box-shadow: 0 0 0 3px rgba(23, 23, 22, 0.1);
}

.alt .data-field.i {
  border-color: var(--abx-danger);
  box-shadow: 0 0 0 3px rgba(178, 58, 43, 0.12);
}

.alt .data-field.disabled {
  opacity: 0.6;
}

/* The icons the shared sign-in forms put inside their fields. */
.alt .data-field > .icon {
  display: none;
}

.alt .data-field > .data {
  position: relative;
  display: flex;
  flex: 1;
  align-items: center;
  min-width: 0;
}

.alt .data-field input,
.alt .data-field textarea {
  flex: 1;
  width: 100%;
  min-width: 0;
  padding: 0.85rem 1rem;
  border: 0;
  border-radius: inherit;
  outline: none;
  background: transparent;
  color: var(--abx-text);
  /* 16px or more, so iOS does not zoom the page when a field is focused. */
  font-size: 1.0625rem;
  line-height: 1.35;
  -webkit-appearance: none;
  appearance: none;
}

.alt .data-field textarea {
  min-height: 5.5rem;
  resize: vertical;
}

.alt .data-field input::placeholder,
.alt .data-field textarea::placeholder {
  color: var(--abx-text-subtle);
}

.alt .data-field input[readonly] {
  color: var(--abx-text-muted);
}

.alt .field-message {
  display: block;
  margin-top: 0.45rem;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--abx-danger);
}

.alt .field-message:empty {
  display: none;
}

/* Tick boxes (script.js: .checkbox-wrapper, + .error). */
.alt .checkbox-wrapper {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.85rem;
  align-items: start;
  padding: 0.95rem 0;
  border-top: 1px solid var(--abx-border);
}

.alt .checkbox-wrapper input[type="checkbox"] {
  position: relative;
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
  margin: 0;
  border: 1.5px solid var(--abx-border-strong);
  border-radius: 0.45rem;
  background: var(--kit-card);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color var(--abx-dur-1) var(--abx-ease), border-color var(--abx-dur-1) var(--abx-ease);
}

.alt .checkbox-wrapper input[type="checkbox"]::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 46%;
  width: 0.72rem;
  height: 0.38rem;
  border-left: 2px solid var(--abx-beige-100);
  border-bottom: 2px solid var(--abx-beige-100);
  transform: translate(-50%, -50%) rotate(-45deg) scale(0);
  transition: transform var(--abx-dur-2) var(--abx-ease-spring);
}

.alt .checkbox-wrapper input[type="checkbox"]:checked {
  border-color: var(--abx-ink-900);
  background: var(--abx-ink-900);
}

.alt .checkbox-wrapper input[type="checkbox"]:checked::after {
  transform: translate(-50%, -50%) rotate(-45deg) scale(1);
}

.alt .checkbox-wrapper label {
  margin: 0;
  padding-top: 0.12rem;
  font-family: var(--abx-font-sans);
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.45;
  text-transform: none;
  color: var(--abx-text);
  cursor: pointer;
}

.alt .checkbox-wrapper label a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.alt .checkbox-wrapper.error input[type="checkbox"] {
  border-color: var(--abx-danger);
  box-shadow: 0 0 0 3px rgba(178, 58, 43, 0.14);
}

.alt .checkbox-error-message {
  display: block;
  padding: 0.7rem 0.9rem;
  border-radius: 0.75rem;
  background: var(--abx-danger-soft);
  color: var(--abx-danger);
  font-size: 0.9rem;
  font-weight: 500;
}

/* Loading veils (script.js shows and hides .opacity-blur). */
.alt .opacity-blur {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  background: rgba(244, 241, 235, 0.72);
}

.alt .opacity-blur::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.5rem;
  height: 1.5rem;
  margin: -0.75rem 0 0 -0.75rem;
  border: 2px solid var(--abx-ink-900);
  border-right-color: transparent;
  border-radius: 50%;
  animation: kit-spin 0.7s linear infinite;
}

/* 3. PANES & NOTICES ======================================================= */

/* 6.1 The slide pane (payment, sign in, register, consent forms). script.js
   shows .blur and .base and swaps .closed for .open on .slidePane; from a
   phone it is a sheet rising from the bottom edge. */
.alt #slidePane-wrapper .blur,
.alt #overlay-wrapper .blur,
.alt #prompt-window .blur {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
  background: rgba(23, 23, 22, 0.62);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  animation: kit-fade 0.3s var(--abx-ease) both;
}

.alt #slidePane-wrapper .base,
.alt #overlay-wrapper .base,
.alt #prompt-window .base {
  position: fixed;
  inset: 0;
  z-index: 61;
  display: none;
  pointer-events: none;
}

.alt .slidePane {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 2.5rem);
  max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 1.25rem);
  border-radius: var(--kit-radius) var(--kit-radius) 0 0;
  background: var(--kit-sheet);
  box-shadow: 0 -1.5rem 4rem rgba(0, 0, 0, 0.4);
  pointer-events: auto;
  transform: translateY(104%);
  transition: transform 0.28s var(--kit-ease-in);
}

.alt .slidePane.open {
  transform: none;
  transition: transform 0.6s var(--kit-ease);
}

/* The close button floats over the sheet's top corner, so what is loaded
   into the sheet starts at its top edge (titles leave room for the button). */
.alt .slidePane-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0.85rem 0.75rem 0 var(--kit-gutter);
  pointer-events: none;
}

.alt .slidePane-header .btn.close {
  background: rgba(228, 223, 213, 0.92);
  pointer-events: auto;
}

.alt .slidePane-view {
  position: relative;
  flex: 1;
  min-height: 12rem;
  padding: 1.9rem var(--kit-gutter) calc(1.75rem + var(--kit-safe-b));
  border-radius: inherit;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.alt .slidePane-view > #content-wrapper {
  display: grid;
  gap: 1.25rem;
}

.alt .ajaxErrorMsg {
  padding: 1rem 1.1rem;
  border-radius: 0.9rem;
  background: var(--abx-danger-soft);
  color: var(--abx-danger);
  line-height: 1.5;
}

/* Titles of whatever is loaded into the pane. */
.alt .slidePane .section-title,
.alt .consent-form__title {
  padding-right: 3.25rem;
  font-family: var(--alt-serif);
  font-size: clamp(2rem, 9vw, 2.6rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.01em;
}

/* 6.2 Payment (markup built by script.js) ---------------------------------- */
.alt .payment-container {
  display: grid;
  gap: 0.9rem;
}

/* script.js writes the status above the amount; on screen the amount comes
   first, and the status — an instruction for the card form — sits on top of
   that form. */
.alt #payment-info {
  order: 1;
}

.alt #payment-status {
  order: 2;
}

.alt #sumup-card {
  order: 3;
}

.alt .payment-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.6rem 1rem;
  padding: 1.1rem 1.25rem 1.2rem;
  border-radius: var(--abx-radius-lg);
  background: var(--abx-ink-900);
  color: var(--abx-beige-300);
}

.alt .payment-type-badge {
  grid-column: 2;
  grid-row: 1;
  padding: 0.3rem 0.75rem;
  border: 1px solid rgba(214, 211, 205, 0.4);
  border-radius: var(--abx-radius-pill);
  font-family: var(--abx-font-display);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.alt .payment-amount {
  grid-column: 1;
  grid-row: 1;
  font-family: var(--alt-serif);
  font-size: clamp(2.2rem, 11vw, 3rem);
  line-height: 1;
}

.alt .payment-message {
  grid-column: 1 / -1;
  font-size: 0.86rem;
  line-height: 1.45;
  color: rgba(214, 211, 205, 0.76);
}

.alt #payment-status {
  position: relative;
  padding: 0.8rem 1rem;
  border-radius: 0.9rem;
  background: var(--abx-surface-sunken);
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.45;
}

.alt #payment-status.loading {
  padding-left: 2.9rem;
}

.alt #payment-status.loading::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 1rem;
  width: 1.1rem;
  height: 1.1rem;
  margin-top: -0.55rem;
  border: 2px solid var(--abx-ink-900);
  border-right-color: transparent;
  border-radius: 50%;
  animation: kit-spin 0.7s linear infinite;
}

.alt #payment-status.success {
  background: rgba(31, 111, 58, 0.12);
  color: #17502b;
}

.alt #payment-status.error {
  background: var(--abx-danger-soft);
  color: var(--abx-danger);
}

.alt #payment-status:empty,
.alt #payment-info:empty {
  display: none;
}

.alt .retry-card-entry-wrap {
  margin-top: 0.9rem;
}

.alt #retry-card-entry {
  min-height: 3rem;
  padding: 0 1.4rem;
  border-radius: var(--abx-radius-pill);
  background: var(--abx-ink-900);
  color: var(--abx-beige-100);
  font-family: var(--abx-font-display);
  font-size: 0.92rem;
  font-weight: 600;
}

/* The SumUp card widget draws itself in here; it only needs the room. */
.alt #sumup-card {
  min-height: 12rem;
}

.alt #sumup-card:empty {
  min-height: 0;
}

.alt #sumup-card iframe {
  border-radius: 0.75rem;
}

/* 6.3 Sign in / register (account/client/login.php, register.php) ---------- */
.alt #client.container {
  display: grid;
  gap: 1.25rem;
}

.alt #client .container-view {
  display: block !important;
}

.alt #client form {
  display: grid;
  gap: 1rem;
}

.alt #client .container-message {
  padding: 0.85rem 1rem;
  border-radius: 0.9rem;
  background: var(--abx-danger-soft);
  color: var(--abx-danger);
  font-size: 0.92rem;
  line-height: 1.45;
}

.alt #client .footer {
  display: grid;
  gap: 0.9rem;
  margin-top: 0.4rem;
}

.alt #client .footer .cta {
  width: 100%;
}

.alt .password-toggle {
  margin-right: 0.25rem;
}

/* The eye is drawn in the page's own line weight; script.js shows one of the
   two and hides the other. */
.password-toggle svg {
  flex: none;
  width: 1.3rem;
  height: 1.3rem;
  color: var(--abx-text-muted);
}

.password-toggle:hover svg,
.password-toggle:focus-visible svg {
  color: var(--abx-text);
}

.alt .requirement-icon {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border: 1.5px solid currentColor;
  border-radius: 50%;
}

.alt .requirement.met .requirement-icon,
.alt .requirement.valid .requirement-icon {
  background: currentColor;
}

.alt .marketing-consent .checkbox-wrapper {
  border-top: 0;
  padding: 0.25rem 0;
}

/* 6.4 Consent forms (ConsentFormRenderer) ---------------------------------- */
.alt .consent-form {
  display: grid;
  gap: 1.1rem;
}

.alt .consent-form__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.5rem;
  font-family: var(--abx-font-display);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--abx-text-muted);
}

.alt .consent-form__notice {
  padding: 0.85rem 1rem;
  border-radius: 0.9rem;
  background: var(--abx-surface-sunken);
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--abx-text-muted);
}

.alt .consent-form__body {
  display: grid;
  gap: 0.9rem;
}

.alt .consent-form-section {
  display: grid;
  gap: 0.85rem;
  min-width: 0;
  padding: 1.15rem 1.1rem;
  border-radius: var(--abx-radius-lg);
  background: var(--kit-card);
}

.alt .consent-form-section h3 {
  font-family: var(--alt-serif);
  font-size: 1.5rem;
  line-height: 1.1;
}

.alt .consent-form-section p,
.alt .consent-ui .consent-list {
  font-size: 0.95rem;
  line-height: 1.55;
}

.alt .consent-ui .consent-list {
  display: grid;
  gap: 0.55rem;
  padding-left: 1.15rem;
  list-style: disc;
}

.alt .consent-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem 0.75rem;
}

.alt .consent-field {
  display: grid;
  align-content: start;
  gap: 0.4rem;
  min-width: 0;
  margin: 0;
  letter-spacing: 0;
  text-transform: none;
}

.alt .consent-field--textarea,
.alt .consent-field--email,
.alt .consent-field--date,
.alt .consent-field[data-error-key$=":phone"] {
  grid-column: 1 / -1;
}

.alt .consent-field__label,
.alt .consent-question-row__detail-label {
  font-family: var(--abx-font-display);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--abx-text-muted);
}

.alt .consent-input,
.alt .consent-form textarea {
  width: 100%;
  min-width: 0;
  min-height: 3.1rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--abx-border-strong);
  border-radius: 0.8rem;
  background: var(--kit-sheet);
  color: var(--abx-text);
  font-family: var(--abx-font-sans);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.35;
}

.alt .consent-form textarea {
  min-height: 5.5rem;
  resize: vertical;
}

.alt .consent-input:focus,
.alt .consent-form textarea:focus {
  border-color: var(--abx-ink-900);
  outline: none;
  box-shadow: 0 0 0 3px rgba(23, 23, 22, 0.1);
}

.alt .consent-input[readonly],
.alt .consent-input:disabled,
.alt .consent-signature-display {
  background: var(--abx-surface-sunken);
  color: var(--abx-text-muted);
}

.alt .consent-signature-display {
  min-height: 3.1rem;
  padding: 0.75rem 0.9rem;
  border-radius: 0.8rem;
  line-height: 1.4;
}

.alt .consent-ui input[type="checkbox"],
.alt .consent-ui input[type="radio"] {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  accent-color: var(--abx-ink-900);
  cursor: pointer;
}

.alt .consent-questions,
.alt .consent-choice-list,
.alt .consent-initials-list,
.alt .consent-signature-block {
  display: grid;
  gap: 0.6rem;
}

.alt .consent-question-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 0 0.7rem;
  border-top: 1px solid var(--abx-border);
}

.alt .consent-question-row:first-child {
  border-top: 0;
  padding-top: 0;
}

.alt .consent-question-row__label {
  min-width: 0;
  font-size: 0.95rem;
  line-height: 1.4;
}

.alt .consent-question-row__choice {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-width: 3.4rem;
  min-height: 2.75rem;
  margin: 0;
  padding: 0 0.7rem;
  border: 1px solid var(--abx-border-strong);
  border-radius: var(--abx-radius-pill);
  color: var(--abx-text);
  letter-spacing: 0;
  cursor: pointer;
}

.alt .consent-question-row__choice:has(input:checked) {
  border-color: var(--abx-ink-900);
  background: var(--abx-ink-900);
  color: var(--abx-beige-100);
}

.alt .consent-question-row__choice:has(input:checked) input {
  accent-color: var(--abx-beige-300);
}

.alt .consent-question-row__choice-label {
  font-family: var(--abx-font-display);
  font-size: 0.85rem;
  font-weight: 600;
}

.alt .consent-question-row__detail {
  display: grid;
  grid-column: 1 / -1;
  gap: 0.4rem;
}

.alt .consent-choice,
.alt .consent-initials-item,
.alt .consent-signature-esign {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin: 0;
  font-family: var(--abx-font-sans);
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.45;
  text-transform: none;
  color: var(--abx-text);
  cursor: pointer;
}

.alt .consent-initials-item {
  align-items: center;
}

.alt .consent-initials-item .consent-input--initials {
  flex: none;
  width: 5.5rem;
  text-transform: uppercase;
}

.alt .consent-signature-block__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: 0.75rem;
  align-items: end;
}

.alt .consent-signature-block__cell,
.alt .consent-signature-field {
  display: grid;
  gap: 0.5rem;
  min-width: 0;
}

.alt .consent-signature-field__note,
.alt .consent-field__error {
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--abx-text-muted);
}

.alt .consent-field__error {
  grid-column: 1 / -1;
  color: var(--abx-danger);
  font-weight: 500;
}

.alt .consent-field.is-invalid .consent-input,
.alt .consent-input.consent-input--invalid {
  border-color: var(--abx-danger);
  box-shadow: 0 0 0 3px rgba(178, 58, 43, 0.12);
}

.alt .consent-question-row.is-invalid,
.alt .consent-choice-list.is-invalid,
.alt .consent-signature-esign.is-invalid {
  margin-inline: -0.6rem;
  padding: 0.7rem 0.6rem;
  border: 0;
  border-radius: 0.8rem;
  background: var(--abx-danger-soft);
}

.alt .consent-form__footer {
  position: sticky;
  bottom: calc(-1.75rem - var(--kit-safe-b));
  z-index: 2;
  display: grid;
  gap: 0.6rem;
  margin: 0 calc(var(--kit-gutter) * -1) calc(-1.75rem - var(--kit-safe-b));
  padding: 0.9rem var(--kit-gutter) calc(1rem + var(--kit-safe-b));
  background: var(--kit-sheet);
  box-shadow: 0 -1px 0 var(--abx-border);
}

.alt .consent-form__footer .cta {
  width: 100%;
}

.alt .consent-form__status-message {
  font-size: 0.9rem;
  line-height: 1.4;
}

.alt .consent-form__status-message:empty {
  display: none;
}

.alt .consent-form__status-message.error {
  color: var(--abx-danger);
  font-weight: 500;
}

.alt .consent-form__status-message.success {
  color: var(--kit-good);
  font-weight: 500;
}

/* 6.5 Prompt and treatment photo ------------------------------------------- */
/* script.js shows these by setting display: block on .base, so the card is
   placed by position rather than by a grid: low on a phone, where a thumb
   reaches it, and centred from a tablet up. */
.alt .prompt,
.alt .overlay {
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: calc(0.75rem + var(--kit-safe-b));
  max-width: 26rem;
  margin-inline: auto;
  border-radius: var(--kit-radius);
  background: var(--kit-sheet);
  box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.4);
  pointer-events: auto;
  transition: transform 0.45s var(--kit-ease), opacity 0.25s var(--abx-ease);
}

.alt .prompt.minimised,
.alt .overlay.minimised {
  opacity: 0;
  transform: translateY(1.5rem) scale(0.97);
}

.alt .prompt {
  display: grid;
  gap: 1.25rem;
  padding: 1.6rem 1.25rem 1.25rem;
}

.alt #prompt-title {
  font-family: var(--alt-serif);
  font-size: 1.9rem;
  line-height: 1.05;
  text-align: center;
}

/* The optional line some questions take (script.js: prompt(), askReason). */
.alt .prompt-reason[hidden] {
  display: none;
}

.alt .prompt-footer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}

.alt .overlay {
  overflow: hidden;
}

.alt .overlay .top {
  position: relative;
  background: var(--abx-ink-900);
}

.alt .overlay .top .btn.close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: rgba(23, 23, 22, 0.6);
  color: var(--abx-beige-300);
}

.alt .overlay .service-image {
  width: 100%;
  max-height: 55vh;
  object-fit: cover;
}

.alt .overlay .bottom {
  display: grid;
  gap: 0.5rem;
  padding: 1.25rem;
}

.alt .overlay .service-name {
  font-family: var(--alt-serif);
  font-size: 1.75rem;
  line-height: 1.05;
}

.alt .overlay .service-description {
  line-height: 1.5;
  color: var(--abx-text-muted);
}

/* 6.6 One-line notices (script.js: popup()) and toasts (showToast()) ------- */
.alt #popup,
.alt .toast {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0.75rem 0.75rem 1.1rem;
  border-radius: 1.1rem;
  background: var(--abx-ink-900);
  color: var(--abx-beige-300);
  box-shadow: var(--abx-elev-toast);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.35;
}

.alt #popup {
  position: fixed;
  left: 0.75rem;
  right: 0.75rem;
  bottom: calc(var(--kit-dock-h) + var(--kit-safe-b) + 0.75rem);
  z-index: 80;
  max-width: 26rem;
  margin-inline: auto;
  opacity: 0;
  pointer-events: none;
  transform: translateY(0.75rem);
  transition: opacity 0.25s var(--abx-ease), transform 0.45s var(--kit-ease);
}

.alt #popup.open {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.alt #popup .left {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
}

.alt #popup .icon {
  flex: none;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: #7fd09a;
}

.alt #popup.error .icon {
  background: #f08a7b;
}

.alt #popup .btn.close {
  width: 2.25rem;
  height: 2.25rem;
  background: rgba(214, 211, 205, 0.12);
  color: inherit;
}

.alt .toast-container {
  position: fixed;
  top: calc(var(--alt-bar-h) + env(safe-area-inset-top, 0px) + 0.5rem);
  left: 0.75rem;
  right: 0.75rem;
  z-index: 80;
  display: grid;
  gap: 0.5rem;
  max-width: 26rem;
  margin-inline: auto;
  pointer-events: none;
}

.alt .toast {
  align-items: flex-start;
  padding: 0.9rem 1.1rem;
  opacity: 0;
  transform: translateY(-0.75rem);
  transition: opacity 0.25s var(--abx-ease), transform 0.45s var(--kit-ease);
}

.alt .toast.show {
  opacity: 1;
  transform: none;
}

.alt .toast-icon {
  display: none;
}

.alt .toast-title {
  font-family: var(--abx-font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.alt .toast-message {
  margin-top: 0.2rem;
  font-weight: 400;
  color: rgba(214, 211, 205, 0.8);
}

@keyframes kit-fade {
  from {
    opacity: 0;
  }
}

/* 4. WINDOWS & PICKERS ===================================================== */

/* 4.1 Windows --------------------------------------------------------------
   The staff tools' editors and pickers. script.js shows a .window-wrapper's
   .blur and .base, and the card inside (.window) by taking .minimised off it;
   it also sets display on the card, which is why display is insisted on
   here: the class alone decides whether a window is on screen. A sheet from
   the bottom edge on a phone, a card in the middle from a tablet up. */

.alt .window-wrapper > .blur {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
  background: rgba(23, 23, 22, 0.62);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  animation: kit-fade 0.3s var(--abx-ease) both;
}

.alt .window-wrapper > .base {
  position: fixed;
  inset: 0;
  z-index: 61;
  display: none;
  pointer-events: none;
}

/* A question is always asked on top of whatever else is open. */
.alt #prompt-window .blur {
  z-index: 72;
}

.alt #prompt-window .base {
  z-index: 73;
}

.alt .window {
  --abx-text: var(--abx-ink-900);
  --abx-text-muted: var(--abx-ink-500);
  --abx-text-subtle: var(--abx-ink-400);
  position: absolute;
  inset: auto 0 0;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto;
  max-height: calc(100vh - 2.5rem);
  max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 1.25rem);
  border-radius: var(--kit-radius) var(--kit-radius) 0 0;
  background: var(--kit-sheet);
  color: var(--abx-ink-900);
  box-shadow: 0 -1.5rem 4rem rgba(0, 0, 0, 0.4);
  pointer-events: auto;
  transition: transform 0.55s var(--kit-ease), opacity 0.2s var(--abx-ease), display 0.55s allow-discrete;
}

.alt .window.minimised {
  display: none !important;
  opacity: 0;
  transform: translateY(3rem);
}

@starting-style {
  .alt .window:not(.minimised) {
    opacity: 0;
    transform: translateY(3rem);
  }
}

.alt .window-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.35rem 0.85rem 0.6rem var(--kit-gutter);
}

.alt .window-title {
  font-family: var(--alt-serif);
  font-size: clamp(1.75rem, 8vw, 2.2rem);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.01em;
}

.alt .window-view {
  position: relative;
  display: grid;
  align-content: start;
  gap: 1.1rem;
  min-height: 0;
  padding: 0.6rem var(--kit-gutter) 1.5rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.alt .window-view > * {
  min-width: 0;
}

.alt .window-footer {
  display: grid;
  gap: 0.6rem;
  padding: 0.85rem var(--kit-gutter) calc(1rem + var(--kit-safe-b));
  border-top: 1px solid var(--abx-border);
}

.alt .window-footer .cta {
  width: 100%;
}

.alt .opacity-blur.hidden {
  display: none;
}

.alt .opacity-blur .loading-icon {
  display: none;
}

/* 4.2 The month calendar (Calendar::display(), in a window) ------------------ */

.alt .calendar {
  display: grid;
  gap: 0.9rem;
}

.alt .calendarNav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.alt .calendarMY {
  font-family: var(--alt-serif);
  font-size: 1.7rem;
  line-height: 1;
}

.alt .calendarNav .nav {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--abx-border-strong);
  border-radius: 50%;
  cursor: pointer;
  transition: background-color var(--abx-dur-2) var(--abx-ease), transform var(--abx-dur-1) var(--abx-ease);
}

.alt .calendarNav .nav::before {
  content: '';
  width: 0.55rem;
  height: 0.55rem;
  border-left: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateX(18%) rotate(45deg);
}

.alt .calendarNav .cal-next::before {
  transform: translateX(-18%) rotate(-135deg);
}

.alt .calendarNav .nav:active {
  transform: scale(0.94);
}

.alt .calendarNav .nav.disabled {
  opacity: 0.3;
  pointer-events: none;
}

.alt .calendarDates {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.3rem;
}

/* 4.3 Days and times (Calendar and Day classes) ------------------------------ */

/* The inline calendar (booking): every bookable week at once, as a month
   grid, so no paging is needed (its week pager is hidden). */
.alt .calendar.inline .calendarHeader {
  display: none;
}

.alt .calendarDaysOfWeek,
.alt .calendarWeek {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.3rem;
}

.alt .calendarDaysOfWeek {
  margin-bottom: 0.4rem;
}

.alt .calendarDaysOfWeek .title {
  font-family: var(--abx-font-display);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-align: center;
  color: var(--abx-text-subtle);
}

.alt .calendarScrollOuter {
  display: grid;
  gap: 0.3rem;
}

.alt .cal-date {
  position: relative;
  display: grid;
  place-items: center;
  /* A floor for the tap target (and for browsers without aspect-ratio). */
  min-height: 2.75rem;
  aspect-ratio: 1 / 1.08;
  border: 1px solid var(--abx-border);
  border-radius: 0.85rem;
  background: var(--kit-card);
  cursor: pointer;
  user-select: none;
  transition: background-color var(--abx-dur-2) var(--abx-ease), color var(--abx-dur-2) var(--abx-ease),
    border-color var(--abx-dur-2) var(--abx-ease), transform var(--abx-dur-1) var(--abx-ease);
}

.alt .cal-date:active {
  transform: scale(0.94);
}

.alt .cal-date-value {
  font-family: var(--abx-font-display);
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.alt .cal-date.today {
  border-color: var(--abx-ink-900);
}

/* Availability, as a dot under the date (heatmap.php: green / orange / red / none). */
.alt .cal-date .availability {
  position: absolute;
  left: 50%;
  bottom: 14%;
  width: 0.32rem;
  height: 0.32rem;
  margin-left: -0.16rem;
  border-radius: 50%;
  background: var(--abx-ink-900);
}

.alt .cal-date .availability.orange,
.alt .cal-date .availability.red {
  background: var(--kit-amber);
}

.alt .cal-date .availability.none {
  display: none;
}

/* Days that cannot be chosen. When booking, the past is one of them; in the
   staff tools' month calendar it is only quieter (a past day can be opened). */
.alt .cal-date.disabled,
.alt .cal-date.unavailable,
.alt .calendar.inline .cal-date.past {
  border-color: transparent;
  background: transparent;
  color: var(--abx-text-subtle);
  cursor: default;
  pointer-events: none;
}

.alt .cal-date.disabled .cal-date-value,
.alt .calendar.inline .cal-date.past .cal-date-value {
  font-weight: 500;
  opacity: 0.55;
}

.alt .calendar:not(.inline) .cal-date.past:not(.selected) {
  border-color: transparent;
  background: transparent;
  color: var(--abx-text-muted);
}

.alt .cal-date.selected {
  border-color: var(--abx-ink-900);
  background: var(--abx-ink-900);
  color: var(--abx-beige-100);
}

.alt .cal-date.selected .availability {
  background: var(--abx-beige-300);
}

/* The month a week belongs to, where it changes (set by the page module). */
.alt .cal-date[data-bk-month]::before {
  content: attr(data-bk-month);
  position: absolute;
  top: 11%;
  left: 0;
  right: 0;
  font-family: var(--abx-font-display);
  font-size: 0.5rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;
  opacity: 0.7;
}

/* Times: the Day class's hour groups (.hour-group > .hour-header +
   .hour-slots > .time-slot). */
.alt .section.time {
  position: relative;
  min-height: 0;
}

.alt .section.time .opacity-blur {
  min-height: 4rem;
  background: none;
}

.alt .time-hours-grid {
  display: grid;
  gap: 0.5rem;
}

.alt .hour-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--abx-border);
  border-radius: 0.9rem;
  background: var(--kit-card);
  cursor: pointer;
  user-select: none;
}

.alt .hour-label {
  font-family: var(--abx-font-display);
  font-size: 0.98rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.alt .availability-count {
  font-size: var(--abx-fs-50);
  color: var(--abx-text-muted);
}

.alt .hour-group.no-available .hour-header {
  opacity: 0.4;
  cursor: default;
}

.alt .hour-slots {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.4rem;
  padding: 0.5rem 0 0.25rem;
}

.alt .time-slot {
  display: grid;
  place-items: center;
  min-height: 2.9rem;
  border: 1px solid var(--abx-border-strong);
  border-radius: var(--abx-radius-pill);
  background: transparent;
  /* The server prints ":05"; show the whole time, which is the slot's id. */
  font-size: 0;
  cursor: pointer;
  user-select: none;
  transition: background-color var(--abx-dur-2) var(--abx-ease), color var(--abx-dur-2) var(--abx-ease),
    border-color var(--abx-dur-2) var(--abx-ease), transform var(--abx-dur-1) var(--abx-ease);
}

.alt .time-slot::before {
  content: attr(id);
  font-family: var(--abx-font-display);
  font-size: 0.92rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.alt .time-slot:active {
  transform: scale(0.95);
}

.alt .time-slot.unavailable {
  display: none;
}

.alt .time-slot.selected {
  border-color: var(--abx-ink-900);
  background: var(--abx-ink-900);
  color: var(--abx-beige-100);
}

/* The 24-hour picker (Day::display24hGrouped(), in a window): the hours as a
   grid of pills; the chosen hour opens into its five-minute steps. */
.alt .time-hours-grid.full-day {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.4rem;
}

.alt .time-hours-grid.full-day .hour-header {
  align-items: center;
  justify-content: center;
  min-height: 2.9rem;
  padding: 0;
  border-radius: var(--abx-radius-pill);
}

.alt .time-hours-grid.full-day .hour-group.expanded {
  display: grid;
  grid-column: 1 / -1;
  gap: 0.5rem;
  padding: 0.5rem;
  border-radius: 1.2rem;
  background: var(--abx-surface-sunken);
}

.alt .time-hours-grid.full-day .hour-group.expanded .hour-header {
  border-color: var(--abx-ink-900);
  background: var(--abx-ink-900);
  color: var(--abx-beige-100);
}

.alt .time-hours-grid.full-day .hour-slots {
  padding: 0;
}

/* 4.4 What a booking's summary shares (customer flow and staff sheet) --------- */

/* Promotional code (markup from inc/validateDiscountCode.php). */
.alt #discount-wrapper {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.alt #discount-wrapper .data-field {
  flex: 1;
  min-width: 0;
}

.alt #discount-wrapper form {
  display: flex;
  flex: 1;
  margin: 0;
}

.alt #discount-input {
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.alt .discount-btn-wrapper {
  display: flex;
  flex: none;
  align-items: center;
  gap: 0.4rem;
}

.alt .discount-btn-wrapper .cta {
  min-height: 3.25rem;
  padding: 0 1.2rem !important;
}

/* Consent forms needed for the chosen treatments (markup from
   api/consent-forms/render.php → ConsentFormRenderer). */
.alt .booking-consent-summary:empty,
.alt .booking-consent-summary:has(> .consent-forms-summary--empty),
.alt .consent-forms-summary--empty {
  display: none;
}

.alt .consent-forms-summary {
  display: grid;
  gap: 0.9rem;
}

.alt .consent-forms-summary__header h4 {
  font-family: var(--abx-font-display);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--abx-text-muted);
}

.alt .consent-forms-summary__header p {
  margin-top: 0.35rem;
  font-size: 0.92rem;
  color: var(--abx-text-muted);
}

.alt .consent-forms-summary__list {
  display: grid;
  gap: 0.5rem;
}

.alt .consent-form-summary-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  min-height: 3.5rem;
  padding: 0.8rem 0.9rem 0.8rem 1.1rem;
  border: 1px solid var(--abx-border-strong);
  border-radius: 1rem;
  background: var(--kit-card);
  color: var(--abx-text);
  text-align: left;
  cursor: pointer;
}

.alt .consent-form-summary-card__title {
  flex: 1;
  min-width: 0;
  font-weight: 500;
  line-height: 1.3;
}

.alt .consent-form-summary-card__status {
  flex: none;
  padding: 0.3rem 0.7rem;
  border-radius: var(--abx-radius-pill);
  font-family: var(--abx-font-display);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.alt .consent-form-summary-card__status.is-pending {
  background: rgba(168, 85, 27, 0.13);
  color: #8a4413;
}

.alt .consent-form-summary-card__status.is-complete {
  background: rgba(31, 111, 58, 0.13);
  color: #17502b;
}

.alt .consent-forms-summary__error {
  padding: 0.7rem 0.9rem;
  border-radius: 0.75rem;
  background: var(--abx-danger-soft);
  color: var(--abx-danger);
  font-size: 0.9rem;
  font-weight: 500;
}

/* 5. WIDER SCREENS ========================================================= */

@media (min-width: 40rem) {
  .alt .slidePane {
    left: 50%;
    right: auto;
    width: min(calc(100% - 3rem), 34rem);
    margin-left: calc(min(calc(100% - 3rem), 34rem) / -2);
  }

  .alt .prompt,
  .alt .overlay {
    top: 50%;
    bottom: auto;
    translate: 0 -50%;
  }

  .alt .window {
    inset: 0;
    width: min(calc(100% - 3rem), 32rem);
    height: fit-content;
    max-height: calc(100vh - 4rem);
    max-height: calc(100dvh - 4rem);
    margin: auto;
    border-radius: var(--kit-radius);
  }

  .alt .window-footer {
    padding-bottom: 1.1rem;
  }
}