/* ==========================================================================
   Amelia booking widget — restyled to the studio's palette.

   Amelia exposes its whole visual system as CSS custom properties (--am-*)
   scoped to its own container, which makes this a supported surface rather than
   a fight. We only remap tokens; we do not override its internal rules by
   selector, so a plugin update that changes markup cannot break this — it would
   have to rename the variables themselves.

   SCOPE: front-end widget only (`.amelia-v2-booking`). Deliberately NOT applied
   to wp-admin. Alesya manages real appointments in Amelia's own admin screens,
   and those should look the way Amelia's documentation and support expect —
   restyling the tool she works in daily to match a brand nobody sees there
   would be vanity at the cost of her being able to follow a help article.

   Amelia's defaults are a strong blue (#1246d6), a navy sidebar (#17295a) and
   Roboto — a generic SaaS look that read as a different product bolted onto the
   page. These map it onto the same ink / cream / clay system as the rest of the
   site.
   ========================================================================== */

.amelia-v2-booking,
.amelia-v2-booking * {
	/* Typography ---------------------------------------------------------- */
	--am-font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

	/* Brand --------------------------------------------------------------- */
	--am-c-primary: #96513a;              /* clay-deep — selected dates, links, focus */

	/* Surfaces ------------------------------------------------------------ */
	--am-c-main-bgr: #fffdf9;             /* paper */
	--am-c-main-text: #2b241f;            /* ink   */
	--am-c-main-heading-text: #2b241f;

	/* The step sidebar. Amelia ships a navy; ink keeps it recessive and on-brand. */
	--am-c-sb-bgr: #2b241f;
	--am-c-sb-text: #f8f2e9;

	/* Buttons — match .skin-btn: ink by default, clay on hover -------------
	   Amelia has TWO button systems. `--am-c-btn-prim/sec` covers the newer
	   components; the calendar and step controls derive their colours from
	   `--am-c-btn-first/second` plus pre-computed opacity variants
	   (`-op20`, `-op30`, `-op80`) used for borders, hovers and shadows. Setting
	   only the first pair leaves ghost-blue borders behind, so both are mapped. */
	--am-c-btn-prim: #2b241f;
	--am-c-btn-prim-text: #f8f2e9;
	--am-c-btn-sec: #fffdf9;
	--am-c-btn-sec-text: #2b241f;

	--am-c-btn-first: #2b241f;
	--am-c-btn-first-op80: rgba(43, 36, 31, 0.8);
	--am-c-btn-first-op30: rgba(43, 36, 31, 0.3);
	--am-c-btn-first-op20: rgba(43, 36, 31, 0.2);
	--am-c-btn-second: #f8f2e9;
	--am-c-btn-second-op80: rgba(248, 242, 233, 0.8);
	--am-c-btn-second-op30: rgba(248, 242, 233, 0.3);
	--am-c-btn-second-op20: rgba(248, 242, 233, 0.2);

	--am-rad-btn: 999px;                  /* the site's buttons are pills */

	/* Inputs -------------------------------------------------------------- */
	--am-c-inp-bgr: #fffdf9;
	--am-c-inp-text: #2b241f;
	--am-c-inp-border: rgba(43, 36, 31, 0.22);
	--am-c-inp-placeholder: #5b4f46;

	/* Dropdowns ----------------------------------------------------------- */
	--am-c-drop-bgr: #fffdf9;
	--am-c-drop-text: #2b241f;

	/* Checkboxes ---------------------------------------------------------- */
	--am-c-checkbox-border: rgba(43, 36, 31, 0.28);
	--am-c-checkbox-border-focused: #96513a;
	--am-c-checkbox-border-disabled: rgba(43, 36, 31, 0.14);
	--am-c-checkbox-label-disabled: #5b4f46;

	/* Semantic colours stay semantic — warmed toward the palette, but success
	   still reads as success and error still reads as error. Both checked for
	   contrast against the paper background. */
	--am-c-success: #4f6b3f;
	--am-c-warning: #a8761f;
	--am-c-error:   #a63d24;
}

/* --------------------------------------------------------------------------
   A few things the token layer does not reach.
   Kept deliberately short — every rule here is a maintenance liability if
   Amelia changes its markup, so it covers only what is visibly wrong without it.
   -------------------------------------------------------------------------- */

/* Headings inside the widget should use the display face, like the rest of the
   site, rather than the body sans. */
.amelia-v2-booking .am-fs__heading,
.amelia-v2-booking h1,
.amelia-v2-booking h2,
.amelia-v2-booking h3 {
	font-family: 'Fraunces', Georgia, serif;
	font-weight: 500;
	letter-spacing: -0.01em;
}

/* Amelia draws its own card shadow/border; inside our glass booking panel that
   reads as a box in a box. */
.skin-booking-panel .amelia-v2-booking .am-fs__wrapper {
	box-shadow: none;
	border: 0;
	background: transparent;
}

/* Selected day + available-slot pills, so the calendar reads as ours. */
.amelia-v2-booking .am-fs-cs__day-selected,
.amelia-v2-booking .am-selected-day {
	background-color: #96513a;
	color: #f8f2e9;
}

/* --------------------------------------------------------------------------
   The calendar.

   Amelia's date picker is FullCalendar, and FullCalendar's own CSS hardcodes
   Amelia's blue (#1246d6 for available dates, rgba(38,92,242,.1) for their
   background, .6 for borders) instead of reading --am-c-primary. So the token
   remap above cannot reach it — these are the numbers a customer actually
   clicks, and without this the calendar stays bright blue in a warm cream page.

   Scoped to .amelia-v2-booking so it cannot leak into any other calendar.
   -------------------------------------------------------------------------- */
.amelia-v2-booking .fc-daygrid-day-number {
	color: var(--am-c-primary);
	font-weight: 500;
}

/* Selectable day cells */
.amelia-v2-booking .am-advsc__dayGridMonth-cell {
	background-color: rgba(150, 81, 58, 0.08);
	border-color: rgba(150, 81, 58, 0.45);
}
.amelia-v2-booking .am-advsc__dayGridMonth-cell:hover {
	background-color: rgba(150, 81, 58, 0.16);
}

/* The occupancy/slot bars drawn behind each day */
.amelia-v2-booking .am-advsc__occupancy,
.amelia-v2-booking .am-advsc__slot-wrapper {
	background-color: rgba(150, 81, 58, 0.14);
}

/* Timezone note and other small primary-coloured chrome */
.amelia-v2-booking .am-advsc__time-zone {
	color: var(--am-c-primary);
	background-color: rgba(150, 81, 58, 0.08);
	border-color: rgba(150, 81, 58, 0.35);
}

/* Today / selected */
.amelia-v2-booking .fc-day-today .fc-daygrid-day-number {
	color: #2b241f;
	font-weight: 700;
}

/* Disabled days stay clearly unavailable. */
.amelia-v2-booking .am-advsc__dayGridMonth-disabled .fc-daygrid-day-number {
	color: rgba(43, 36, 31, 0.32);
}

/* Amelia bundles Element UI for its selects, and those components hardcode a
   slate (#1a2c37) rather than reading --am-c-inp-text. It is a near-neutral
   dark, so this is a small cosmetic correction, not a colour fight. */
.amelia-v2-booking .el-select__input,
.amelia-v2-booking .el-input__inner,
.amelia-v2-booking .el-icon,
.amelia-v2-booking [class^='am-icon-'],
.amelia-v2-booking [class*=' am-icon-'] {
	color: #2b241f;
}

/* Focus visibility — Amelia's default focus ring is the blue we just removed. */
.amelia-v2-booking :where(button, a, input, select, textarea):focus-visible {
	outline: 2px solid #96513a;
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.amelia-v2-booking * {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}