/**
 * SCRUM-116 — Rebs Curtis-Moss × Amelia v3 booking widget visual layer.
 *
 * Goal: paint the `[ameliabooking]` widget with brand Rebs typography
 * (Poppins body / Mulish headings) and palette (teal / lime / mint)
 * WITHOUT touching Amelia's logic, JS, emails or sync.
 *
 * Strategy — drive it through Amelia's own public CSS variable API.
 *   Amelia v3 exposes a `--am-c-*` token surface declared by the shipped
 *   `stepForm.<hash>.css` on `:root`:
 *
 *     :root {
 *       --am-c-primary: #1246D6;
 *       --am-c-btn-prim: #265CF2;
 *       --am-c-btn-prim-text: #FFFFFF;
 *       --am-c-main-text: #1A2C37;
 *       --am-c-main-bgr: #FFFFFF;
 *       --am-c-input-bgr / --am-c-input-border / --am-c-input-text / ...
 *       --am-c-success / --am-c-error / --am-c-warning
 *       --am-c-btn-first / --am-c-btn-second (consumed across button states)
 *       --am-font-family / --am-h-inp / --am-fs-inp / --am-rad-inp
 *     }
 *
 *   We override those tokens — on `:root` AND on the widget host
 *   (`.amelia-v2-booking`, `.amelia-v2-booking #amelia-container`) — pointing
 *   them at the existing `--rebs-*` brand tokens that already live on
 *   `:root` in `rebs-site-styles.css`. Custom property inheritance does the
 *   rest: every Amelia component that resolves `var(--am-c-btn-first)` now
 *   resolves it to the Rebs mint/teal accent.
 *
 *   This is the SAME pattern Quiosco uses (see `rebs-site-styles.css`,
 *   "Quiosco product grid — brand override via public token API"): no
 *   `!important`, no selector wars, no scope creep.
 *
 * Selector scope:
 *   - Custom prop overrides land on `:root, .amelia-v2-booking,
 *     .amelia-v2-booking #amelia-container` (mirroring the closest-ancestor
 *     inheritance trick that beats Amelia's own descendant declarations).
 *   - When Amelia injects `!important` on its derived rules, we re-declare
 *     the token at a closer ancestor — never with `!important` of our own
 *     unless documented inline.
 *   - We DO NOT target `data-v-*` Vue scoped-attr hashes — they regenerate
 *     on every Amelia build. Only semantic `.am-*` classnames.
 *
 * No-regression guard:
 *   This file is loaded under the same `wp_enqueue_scripts` priority
 *   100 as the rest of the rebs-site-styles bundle (after Amelia's own
 *   enqueue), so source order alone wins on equal-specificity ties.
 *   The Kubio defensive prefix `[data-kubio]` is used only on internal
 *   widget anchors (e.g. provider profile link) that Kubio Pro would
 *   otherwise repaint via its global `a:not([class*=wp-block-button])`
 *   color rule.
 *
 * Out of scope (intentional):
 *   - Amelia email templates (SCRUM-117).
 *   - JS behaviour, i18n.
 *   - reCAPTCHA iframe internals (cross-origin — not stylable; the
 *     wrapper IS styled here).
 *   - Apple Calendar / CalDAV sync (separate task).
 *
 * Accessibility:
 *   - Day cells / slot tiles: tap target >= 44px on mobile (see
 *     `.am-advsc__slots-item` / `.am-advsc__dayGridMonth-cell` rules).
 *   - Primary teal `#0097b2` only meets AA Large vs white; we use it
 *     ONLY for CTA backgrounds (large bold text) and decorative fills.
 *     For widget body text we let Amelia keep `--am-c-main-text` mapped
 *     to `--rebs-text` (#262E38, AAA vs white).
 *   - Focus ring teal-dark `#006d82` (AA Normal) on inputs / CTAs.
 *   - Reduced-motion guard at the bottom disables transitions.
 *
 * Refs:
 *   - Spec: SCRUM-116
 *   - Amelia v3 bundle inspected on prod 2026-05-16:
 *     wp-content/plugins/ameliabooking/v3/public/assets/stepForm.<hash>.css
 *   - Brand tokens: `rebs-site-styles.css`, "Brand tokens" section.
 */

/* -------------------------------------------------------------------------
 * SCRUM-116 — Token bridge: map Amelia's `--am-c-*` API to Rebs tokens.
 *
 * Three layers of declaration so the brand value wins regardless of which
 * Amelia rule resolves the cascade first:
 *   1. `:root`  — outranks Amelia's own `:root` block by source order
 *                 (we enqueue at priority 100, after Amelia's default 10).
 *   2. `.amelia-v2-booking` (specificity 0,1,0) — closer ancestor than
 *                 `:root` for any token consumer inside the widget.
 *   3. `.amelia-v2-booking #amelia-container` (0,1,1) — beats Amelia's own
 *                 `.amelia-v2-booking #amelia-container` descendant rules
 *                 (equal specificity, source order wins).
 *
 * The Amelia-shipped block we're shadowing (defaults captured 2026-05-16):
 *   --am-c-primary: #1246D6        → var(--rebs-teal)
 *   --am-c-success: #019719        → var(--rebs-teal-dark)         (a11y AA on white)
 *   --am-c-error:   #DC180B        → keep — semantic, brand-neutral
 *   --am-c-warning: #CCA20C        → keep
 *   --am-c-main-bgr: #FFFFFF       → var(--rebs-surface)
 *   --am-c-main-heading-text: ...  → var(--rebs-text)
 *   --am-c-main-text: #1A2C37      → var(--rebs-text)              (AAA)
 *   --am-c-inp-bgr / inp-border / inp-text / inp-placeholder → Rebs neutrals
 *   --am-c-btn-prim: #265CF2       → var(--rebs-mint)              (CTA bg)
 *   --am-c-btn-prim-text: #FFFFFF  → var(--rebs-surface)
 *   --am-c-btn-sec / sec-text      → Rebs surface / text
 *   --am-c-btn-first / btn-second  → CTA fill / text counterparts
 *   --am-font-family: "Amelia Roboto"
 *     → var(--rebs-font-body, 'Poppins', system-ui, sans-serif)
 *   --am-rad-inp: 6px              → 0   (Rebs is flat — zero radius)
 * ------------------------------------------------------------------------- */

:root,
.amelia-v2-booking,
.amelia-v2-booking #amelia-container {
	/* Brand semantic colors */
	--am-c-primary: var(--rebs-teal);
	--am-c-primary-op05: rgba(0, 151, 178, 0.05);
	--am-c-primary-op10: rgba(0, 151, 178, 0.10);
	--am-c-primary-op80: rgba(0, 151, 178, 0.80);

	/* Status — keep red/yellow semantic, lift green to teal-dark for brand cohesion */
	--am-c-success: var(--rebs-teal-dark);
	--am-c-success-op10: rgba(0, 109, 130, 0.10);
	--am-c-success-op20: rgba(0, 109, 130, 0.20);
	/* --am-c-error / --am-c-warning: kept Amelia defaults (semantic red/amber). */

	/* Main surfaces */
	--am-c-main-bgr: var(--rebs-surface);
	--am-c-main-text: var(--rebs-text);
	--am-c-main-heading-text: var(--rebs-text);

	/* Inputs — Rebs neutrals + brand focus border below */
	--am-c-inp-bgr: var(--rebs-surface);
	--am-c-inp-border: var(--rebs-border);
	--am-c-inp-text: var(--rebs-text);
	--am-c-inp-placeholder: var(--rebs-text-muted);

	/* Newer (v3) input token names — Amelia uses both `inp` and `input` in places */
	--am-c-input-bgr: var(--rebs-surface);
	--am-c-input-border: var(--rebs-border);
	--am-c-input-text: var(--rebs-text);
	--am-c-input-placeholder: var(--rebs-text-muted);

	/* Dropdown popper surfaces */
	--am-c-drop-bgr: var(--rebs-surface);
	--am-c-drop-text: var(--rebs-text);

	/* CTAs (Amelia uses both legacy and v3 names) */
	--am-c-btn-prim: var(--rebs-mint);
	--am-c-btn-prim-text: var(--rebs-surface);
	--am-c-btn-sec: var(--rebs-surface);
	--am-c-btn-sec-text: var(--rebs-text);

	/* `btn-first` / `btn-second` are the names consumed by `.am-button--filled`
	   and friends across the step-form. JS settings normally populate them at
	   runtime from the admin theme picker; we anchor them ourselves so the
	   brand wins even if the JS layer never sets them (Lite installs or
	   default theme). Source: stepForm.<hash>.css — `.am-button.am-button--filled`
	   rule chain consumes `--am-c-btn-first` / `--am-c-btn-second`. */
	--am-c-btn-first: var(--rebs-mint);
	--am-c-btn-first-op20: rgba(126, 217, 87, 0.20);
	--am-c-btn-first-op30: rgba(126, 217, 87, 0.30);
	--am-c-btn-first-op80: rgba(126, 217, 87, 0.80);
	--am-c-btn-first-darken30: var(--rebs-teal); /* hover state — shifts mint → teal, same pattern as the rest of the site */
	--am-c-btn-second: var(--rebs-surface);
	--am-c-btn-second-text: var(--rebs-text);

	/* Calendar / slot picker accents */
	--am-c-advsc-cell-bgr: var(--rebs-surface);
	--am-c-advsc-cell-border: var(--rebs-border);
	--am-c-advsc-cell-text: var(--rebs-text);
	--am-c-advsc-slot-bgr: var(--rebs-surface);
	--am-c-advsc-slot-border: var(--rebs-border);
	--am-c-advsc-slot-text: var(--rebs-text);

	/* Geometry — flat, matching the rest of the Rebs UI */
	--am-rad-inp: 0;
	--am-h-inp: 48px;            /* >= 44px tap target for AA mobile */
	--am-h-btn: 48px;
	--am-fs-inp: 1rem;
	--am-fs-btn: 1rem;
	--am-fs-label: 0.95rem;

	/* Typography — Poppins body, Mulish headings.
	   Consus theme already loads both font families globally; we just point
	   Amelia's `--am-font-family` at the same Poppins stack the rest of the
	   site uses, then re-target headings to Mulish below with explicit
	   selectors (Amelia's heading components don't expose a separate
	   custom prop for the heading family). */
	--am-font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
}

/* -------------------------------------------------------------------------
 * SCRUM-116 — Widget root: font family inheritance.
 *
 * `--am-font-family` above already covers the components that read it
 * via `var()`. But some Amelia internals hard-set `font-family: "Amelia
 * Roboto", sans-serif` directly on element rules; we re-assert the
 * Poppins stack on the widget root + key text wrappers so the chain
 * propagates by inheritance. No `!important` — source order wins.
 * ------------------------------------------------------------------------- */
.amelia-v2-booking,
.amelia-v2-booking #amelia-container,
.amelia-v2-booking #amelia-container .am-fs__wrapper,
.amelia-v2-booking #amelia-container .am-fs__main,
.amelia-v2-booking #amelia-container .am-fs__main-content,
.amelia-v2-booking #amelia-container .am-button__inner,
.amelia-v2-booking #amelia-container .am-input,
.amelia-v2-booking #amelia-container .am-textarea,
.amelia-v2-booking #amelia-container .am-select {
	font-family: var(--am-font-family);
	color: var(--rebs-text);
}

/* Headings — Mulish to match `/services` and the rest of the brand chrome.
   These selectors cover step heading + section headings + summary headings.
   Source: stepForm.<hash>.css — `am-fs__main-heading*`, `am-fs__cart-title`,
   `am-fs__pis-includes__heading`, `am-fs__congrats-main-heading`,
   `am-fs__bringing-heading`, etc. */
.amelia-v2-booking #amelia-container .am-fs__main-heading,
.amelia-v2-booking #amelia-container .am-fs__main-heading-inner-title,
.amelia-v2-booking #amelia-container .am-fs__main-heading-mobile,
.amelia-v2-booking #amelia-container .am-fs__cart-title,
.amelia-v2-booking #amelia-container .am-fs__congrats-main-heading,
.amelia-v2-booking #amelia-container .am-fs__bringing-heading,
.amelia-v2-booking #amelia-container .am-fs__pis-includes__heading,
.amelia-v2-booking #amelia-container .am-fs__ps-popup__heading,
.amelia-v2-booking #amelia-container .am-fs-sb__page-heading,
.amelia-v2-booking #amelia-container .am-fs__extras-heading-main,
.amelia-v2-booking #amelia-container .am-fs__init-item__heading,
.amelia-v2-booking #amelia-container .am-fs__init-item__name,
.amelia-v2-booking #amelia-container .am-dialog__title,
.amelia-v2-booking #amelia-container h1,
.amelia-v2-booking #amelia-container h2,
.amelia-v2-booking #amelia-container h3,
.amelia-v2-booking #amelia-container h4 {
	font-family: 'Mulish', Helvetica, Arial, sans-serif;
	color: var(--rebs-text);
	font-weight: 700;
}

/* -------------------------------------------------------------------------
 * SCRUM-116 — Service picker (`.am-fs__init` step) — the 3-card grid that
 * lands first. Cards consume the bridge tokens above for surface + border,
 * but the price + name jerarquía + hover lift need explicit rules.
 *
 * Markup ref (stepForm.<hash>.css):
 *   .am-fs__init                ← step root
 *     .am-fs__init-item         ← card
 *       .am-fs__init-item__img       ← optional image
 *       .am-fs__init-item__info-name ← title (Mulish via heading rule above)
 *       .am-fs__init-item__content   ← description
 *       .am-fs__init-item__footer
 *         .am-fs__init-item__price   ← price emphasis
 * ------------------------------------------------------------------------- */
.amelia-v2-booking #amelia-container .am-fs__init-item {
	background: var(--rebs-surface);
	border: 1px solid var(--rebs-border);
	border-radius: 0;
	transition: transform var(--rebs-transition), box-shadow var(--rebs-transition), border-color var(--rebs-transition);
}

@media (hover: hover) {
	.amelia-v2-booking #amelia-container .am-fs__init-item:hover {
		transform: translateY(-3px);
		border-color: var(--rebs-mint);
		box-shadow: var(--rebs-shadow-hover);
	}
}

.amelia-v2-booking #amelia-container .am-fs__init-item__info-name {
	font-family: 'Mulish', Helvetica, Arial, sans-serif;
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--rebs-text);
	line-height: 1.3;
}

.amelia-v2-booking #amelia-container .am-fs__init-item__content,
.amelia-v2-booking #amelia-container .am-fs__init-item__info-inner {
	font-family: var(--am-font-family);
	color: var(--rebs-text-muted);
	line-height: 1.5;
}

/* Price — pure teal, bold, large (AA Large compliant for `#0097b2` vs white
   at 1.25rem bold ≥ 14pt bold threshold). Discovery £0 is rendered as
   "£0.00" by Amelia by default; if the brief's "Free" pseudo swap is
   required we'd need a JS hook (CSS `content` cannot replace text inside
   an existing text node). Documented as follow-up in the handoff. */
.amelia-v2-booking #amelia-container .am-fs__init-item__price,
.amelia-v2-booking #amelia-container .am-fs__init-item__cost {
	color: var(--rebs-teal);
	font-weight: 700;
	font-size: 1.25rem;
}

/* -------------------------------------------------------------------------
 * SCRUM-116 — Calendar (`.am-advsc`) — day grid + time slot grid.
 *
 * Markup ref:
 *   .am-advsc__dayGridMonth-cell          ← available day (default)
 *   .am-advsc__dayGridMonth-disabled      ← unavailable
 *   .am-advsc__dayGridMonth-selected      ← selected day
 *   .am-advsc__dayGridMonth-weekend       ← weekend tint
 *   .am-advsc__slots-item                 ← slot tile
 *   .am-advsc__slots-item__selected
 *   .am-advsc__slots-item-disabled
 * ------------------------------------------------------------------------- */

/* Available day — neutral text, hover swaps to mint background.
   `pointer-events: auto` is already set by Amelia. */
.amelia-v2-booking #amelia-container .am-advsc__dayGridMonth-cell {
	color: var(--rebs-text);
	background-color: var(--rebs-surface);
	border-radius: 0;
	transition: background-color var(--rebs-transition), color var(--rebs-transition);
	min-height: 44px; /* AA tap target */
}

@media (hover: hover) {
	.amelia-v2-booking #amelia-container .am-advsc__dayGridMonth-cell:not(.am-advsc__dayGridMonth-disabled):hover {
		background-color: var(--rebs-mint-soft);
		color: var(--rebs-teal-dark);
	}
}

/* Selected day — solid teal bg, white text. */
.amelia-v2-booking #amelia-container .am-advsc__dayGridMonth-selected,
.amelia-v2-booking #amelia-container .am-advsc__dayGridMonth-cell.am-advsc__dayGridMonth-selected {
	background-color: var(--rebs-teal);
	color: var(--rebs-surface);
}

/* Disabled day — visible but muted (opacity ≥ 0.4 per AC #5). */
.amelia-v2-booking #amelia-container .am-advsc__dayGridMonth-disabled {
	color: var(--rebs-text-muted);
	opacity: 0.45;
	cursor: not-allowed;
}

/* Weekend tint — keep visible distinction without overpowering the grid. */
.amelia-v2-booking #amelia-container .am-advsc__dayGridMonth-weekend {
	background-color: var(--rebs-surface-alt);
}

/* Time slot tiles — Rebs flat, mint hover, teal selected. */
.amelia-v2-booking #amelia-container .am-advsc__slots-item {
	background-color: var(--rebs-surface);
	border: 1px solid var(--rebs-border);
	color: var(--rebs-text);
	border-radius: 0;
	min-height: 44px; /* AA mobile tap target */
	transition: background-color var(--rebs-transition), border-color var(--rebs-transition), color var(--rebs-transition);
}

@media (hover: hover) {
	.amelia-v2-booking #amelia-container .am-advsc__slots-item:not(.am-advsc__slots-item-disabled):hover {
		background-color: var(--rebs-mint-soft);
		border-color: var(--rebs-mint);
		color: var(--rebs-teal-dark);
	}
}

.amelia-v2-booking #amelia-container .am-advsc__slots-item__selected,
.amelia-v2-booking #amelia-container .am-advsc__slots-item.am-advsc__slots-item__selected {
	background-color: var(--rebs-teal);
	border-color: var(--rebs-teal);
	color: var(--rebs-surface);
}

.amelia-v2-booking #amelia-container .am-advsc__slots-item-disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

/* Calendar nav buttons (next / prev month). */
.amelia-v2-booking #amelia-container .am-heading-next,
.amelia-v2-booking #amelia-container .am-heading-prev {
	color: var(--rebs-teal-dark);
}

@media (hover: hover) {
	.amelia-v2-booking #amelia-container .am-heading-next:hover,
	.amelia-v2-booking #amelia-container .am-heading-prev:hover {
		color: var(--rebs-teal);
	}
}

/* -------------------------------------------------------------------------
 * SCRUM-116 — Form inputs (customer info step).
 *
 * `.am-input`, `.am-textarea`, `.am-select` — Amelia v3 wraps Element Plus
 * inputs and exposes the `--am-c-input-*` tokens for them. The bridge above
 * paints the default state; the rules here lock focus ring + label color.
 * ------------------------------------------------------------------------- */

/* Focus ring — teal-dark (AA Normal vs white = 5.34:1) outline. */
.amelia-v2-booking #amelia-container .am-input-wrapper .am-input .el-input__wrapper.is-focus,
.amelia-v2-booking #amelia-container .am-input-wrapper .am-textarea .el-textarea__inner.is-focus,
.amelia-v2-booking #amelia-container .am-select .el-select__wrapper.is-focused {
	box-shadow: 0 0 0 2px rgba(0, 151, 178, 0.25);
	border-color: var(--rebs-teal);
}

/* Labels — Mulish, slightly muted color, weight 600 to read as a label */
.amelia-v2-booking #amelia-container .am-fs__info-form__label,
.amelia-v2-booking #amelia-container .am-fs__init-form__label {
	font-family: 'Mulish', Helvetica, Arial, sans-serif;
	font-weight: 600;
	color: var(--rebs-text);
}

/* Error text — keep semantic red, but use Amelia's own error token */
.amelia-v2-booking #amelia-container .am-error-text {
	color: var(--am-c-error);
	font-size: 0.875rem;
	margin-top: 0.25rem;
}

/* Phone input dropdown (country flag) — pop matches dropdown surface */
.amelia-v2-booking #amelia-container .am-input-phone-wrapper,
.amelia-v2-booking #amelia-container .am-input-phone {
	background-color: var(--rebs-surface);
	border-color: var(--rebs-border);
}

/* -------------------------------------------------------------------------
 * SCRUM-116 — Buttons (Next / Book / Confirm).
 *
 * `.am-button--filled` is the primary CTA. Tokens above (`--am-c-btn-first`)
 * already paint it mint with white text + teal on hover. Geometry rules
 * here lock zero-radius (Rebs flat) + height >= 44px tap target. The
 * `am-button` class itself ships with `border-radius` set via the
 * `--am-rad-btn` token; we re-assert geometry on the element to defeat
 * any inline width/height the Vue component might set.
 * ------------------------------------------------------------------------- */
.amelia-v2-booking #amelia-container .am-button {
	border-radius: 0;
	font-family: var(--am-font-family);
	font-weight: 500;
	letter-spacing: 0.01em;
}

.amelia-v2-booking #amelia-container .am-button.am-button--default,
.amelia-v2-booking #amelia-container .am-button.am-button--medium {
	min-height: 44px; /* AA mobile tap target */
	padding: 0 23px;
}

/* Disabled state — keep Amelia's intent but soften with brand palette */
.amelia-v2-booking #amelia-container .am-button.is-disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* -------------------------------------------------------------------------
 * SCRUM-116 — Step indicator sidebar (`.am-fs-sb`) — left rail in desktop.
 *
 * Token `--am-c-sb-bgr` (#17295a default — dark navy) reads off-brand on a
 * Rebs page. Repaint to `--rebs-surface-alt` so the sidebar reads as a
 * neutral rail and let active step pop in teal.
 * ------------------------------------------------------------------------- */
:root,
.amelia-v2-booking,
.amelia-v2-booking #amelia-container {
	--am-c-sb-bgr: var(--rebs-surface-alt);
	--am-c-sb-text: var(--rebs-text);
}

.amelia-v2-booking #amelia-container .am-fs-sb__step {
	color: var(--rebs-text-muted);
}

.amelia-v2-booking #amelia-container .am-fs-sb__step.am-current-step,
.amelia-v2-booking #amelia-container .am-fs-sb__step.am-passed-step {
	color: var(--rebs-teal-dark);
}

.amelia-v2-booking #amelia-container .am-fs-sb__step-icon {
	background-color: var(--rebs-border);
	color: var(--rebs-text);
}

.amelia-v2-booking #amelia-container .am-current-step .am-fs-sb__step-icon,
.amelia-v2-booking #amelia-container .am-passed-step .am-fs-sb__step-icon {
	background-color: var(--rebs-teal);
	color: var(--rebs-surface);
}

/* -------------------------------------------------------------------------
 * SCRUM-116 — Confirmation summary (`.am-fs__cart`, `.am-fs__payments-*`).
 *
 * Service name + price + datetime emphasized; total in teal-dark bold to
 * mirror the WC cart-totals pattern (rebs-site-styles.css "Cart totals").
 * ------------------------------------------------------------------------- */
.amelia-v2-booking #amelia-container .am-fs__cart-title {
	font-family: 'Mulish', Helvetica, Arial, sans-serif;
	color: var(--rebs-text);
}

.amelia-v2-booking #amelia-container .am-fs__payments-app-info-total,
.amelia-v2-booking #amelia-container .am-fs__ci-cost,
.amelia-v2-booking #amelia-container .am-fs__ps-price {
	color: var(--rebs-teal-dark);
	font-weight: 700;
}

.amelia-v2-booking #amelia-container .am-fs__payments-app-info-discount,
.amelia-v2-booking #amelia-container .am-fs__payments-app-info-discount-green {
	color: var(--rebs-teal-dark);
}

/* -------------------------------------------------------------------------
 * SCRUM-116 — Success state (`.am-fs__congrats`).
 *
 * Headline in Mulish (already covered by the heading rule above), success
 * tick uses `--am-c-success` (now → teal-dark, declared in the bridge).
 * "Book another" CTA reads as a primary button (already painted by the
 * token bridge).
 * ------------------------------------------------------------------------- */
.amelia-v2-booking #amelia-container .am-fs__congrats-main {
	color: var(--rebs-text);
}

.amelia-v2-booking #amelia-container .am-fs__congrats-info-customer {
	color: var(--rebs-text-muted);
}

/* -------------------------------------------------------------------------
 * SCRUM-116 — Alerts (info / success / warning / error banners).
 *
 * Amelia exposes `--am-c-alert*` per status — we lift them to brand-aligned
 * neutrals where it makes sense, keep semantic red/amber for error/warning.
 * Info alert flips to teal-tinted mint background to mirror the
 * `.qsc-thankyou-notice` treatment in rebs-site-styles.css.
 * ------------------------------------------------------------------------- */
:root,
.amelia-v2-booking,
.amelia-v2-booking #amelia-container {
	--am-c-alerti-bgr: var(--rebs-mint-soft);
	--am-c-alerts-bgr: var(--rebs-mint-soft);
	--am-c-alert-text: var(--rebs-text);
}

/* -------------------------------------------------------------------------
 * SCRUM-116 — Kubio Pro defensive override.
 *
 * Kubio Pro injects:
 *   [data-kubio] a:not([class*=wp-block-button]) { color: var(--kubio-color-4) }
 *   (specificity 0,2,1)
 *
 * The widget renders provider-profile links and powered-by-Amelia footer
 * links as bare `<a>` — they'd silently flip orange. We repaint them to
 * teal-dark to match the rest of the site's body links.
 * ------------------------------------------------------------------------- */
[data-kubio] .amelia-v2-booking #amelia-container a:not(.am-button):not(.am-fs-sb__support-email) {
	color: var(--rebs-teal-dark);
	text-decoration: underline;
}

@media (hover: hover) {
	[data-kubio] .amelia-v2-booking #amelia-container a:not(.am-button):not(.am-fs-sb__support-email):hover {
		color: var(--rebs-teal);
	}
}

/* Support email link in sidebar — keep prominent but on-brand */
[data-kubio] .amelia-v2-booking #amelia-container a.am-fs-sb__support-email {
	color: var(--rebs-teal-dark);
}

/* -------------------------------------------------------------------------
 * SCRUM-116 — Mobile (375px) safeguards.
 *
 * Slots and day-grid cells wrap (Amelia handles wrap with flexbox by
 * default); we double-down on `overflow-x: hidden` on the widget root so a
 * stray child with intrinsic min-width can't bust the viewport. AC #10.
 * ------------------------------------------------------------------------- */
@media (max-width: 480px) {
	.amelia-v2-booking,
	.amelia-v2-booking #amelia-container {
		overflow-x: hidden;
	}

	/* Service cards: vertical stack at 375px (Amelia already does this; the
	   rule below just locks zero negative margin in case a parent floods). */
	.amelia-v2-booking #amelia-container .am-fs__init-item {
		margin-left: 0;
		margin-right: 0;
	}
}

/* -------------------------------------------------------------------------
 * SCRUM-116 — Reduced-motion guard.
 * ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.amelia-v2-booking #amelia-container .am-fs__init-item,
	.amelia-v2-booking #amelia-container .am-advsc__dayGridMonth-cell,
	.amelia-v2-booking #amelia-container .am-advsc__slots-item,
	.amelia-v2-booking #amelia-container .am-button {
		transition: none;
	}

	.amelia-v2-booking #amelia-container .am-fs__init-item:hover {
		transform: none;
	}
}