/* ============================================================================
   RKC Finserve — Amelia 2.0 (v2 step form) skin.
   Loaded AFTER 'rkc'. Maps Amelia's own custom properties onto the existing
   --rkc-* tokens so the booking form inherits the Elementor kit's fonts and
   the brass accent. No font-family names, no raw colour literals.
   Variable names verified against v3/public/assets/stepForm.086c0e2e.css.
   ========================================================================== */

/* ---- 1. Accent + surfaces ------------------------------------------------ */

.amelia-v2-booking,
.am-select-popper,
.am-date-picker {
	/* primary accent */
	--am-c-primary: var(--rkc-brass);
	--am-c-primary-op10: var(--rkc-brass-08);

	/* buttons */
	--am-c-btn-prim: var(--rkc-brass);
	--am-c-btn-first: var(--rkc-brass);
	--am-c-btn-first-op20: var(--rkc-brass-18);
	--am-c-btn-first-op30: var(--rkc-brass-30);
	--am-c-btn-first-op80: var(--rkc-brass);
	--am-c-btn-first-darken30: var(--rkc-brass-deep);
	--am-c-btn-sec: var(--rkc-deep);

	/* calendar */
	--am-c-cal-init: var(--rkc-brass);
	--am-c-cal-init-op10: var(--rkc-brass-08);
	--am-c-cal-init-op20: var(--rkc-brass-18);
	--am-c-cal-init-op30: var(--rkc-brass-30);
	--am-c-cal-init-op60: var(--rkc-brass-hi);
	--am-c-cal-init-text: var(--rkc-ink);
	--am-c-cal-selected: var(--rkc-brass);
	--am-c-cal-selected-op80: var(--rkc-brass-hi);

	/* time slots */
	--am-c-advsc-slot-border: var(--rkc-line);
	--am-c-advsc-slot-text: var(--rkc-ink);
	--am-c-advsc-cell-border: var(--rkc-line);
	--am-c-advsc-cell-text: var(--rkc-ink);
	--am-c-advsc-btn-border: var(--rkc-line);
	--am-c-advsc-text: var(--rkc-slate);

	/* text + chrome */
	--am-c-main-text: var(--rkc-slate);
	--am-c-main-heading-text: var(--rkc-ink);
	--am-c-main-bgr: var(--rkc-white);
	--am-c-sb-bgr: var(--rkc-paper);
	--am-c-sb-text: var(--rkc-ink);

	/* inputs + selects */
	--am-c-inp-border: var(--rkc-line);
	--am-c-inp-text: var(--rkc-ink);
	--am-c-inp-bgr: var(--rkc-white);
	--am-c-select-border: var(--rkc-line);
	--am-c-select-text: var(--rkc-ink);
	--am-c-select-bgr: var(--rkc-white);
	--am-c-option-text: var(--rkc-ink);
	--am-c-option-selected: var(--rkc-brass);
	--am-c-option-bgr: var(--rkc-white);
	--am-c-option-border: var(--rkc-line);
	--am-c-ph-inp-border: var(--rkc-line);
	--am-c-ph-inp-text: var(--rkc-ink);
	--am-input-c-border: var(--rkc-line);
	--am-input-c-text: var(--rkc-ink);
	--am-c-date-picker-border: var(--rkc-line);
	--am-c-date-picker-bgr: var(--rkc-white);

	/* status */
	--am-c-error: var(--rkc-err);
	--am-c-success: var(--rkc-ok);
	--am-c-warning: var(--rkc-warn);

	/* geometry — reuse the site radius */
	--am-brad-main: var(--rkc-r);
	--am-rad-btn: var(--rkc-r);
	--am-rad-input: var(--rkc-r);
	--am-rad-select: var(--rkc-r);
}

/* ---- 2. Typography ------------------------------------------------------- */
/* Amelia declares `font-family: var(--am-font-family), sans-serif`, so the
   variable cannot be set to `inherit`. Instead let the elements inherit the
   theme font directly, while leaving icon fonts untouched. */

.amelia-v2-booking {
	font-family: inherit;
}

.amelia-v2-booking :is(h1, h2, h3, h4, h5, h6, p, span, div, label, a, li, small, strong, button, input, select, textarea):not([class*="icon"]):not([class*="Icon"]),
.am-select-popper :is(span, div, li):not([class*="icon"]):not([class*="Icon"]) {
	font-family: inherit;
}

.amelia-v2-booking :is(h1, h2, h3, h4, h5, h6) {
	font-family: var(--rkc-head);
}

/* Amelia marks some popper text !important — match specificity there only. */
.am-select-popper .el-select-dropdown__item {
	font-family: inherit !important;
}

/* ---- 3. Containment ------------------------------------------------------ */
/* Keep the Vue app inside the bordered .rkc-booking card. */

.rkc-booking .amelia-v2-booking {
	max-width: 100%;
	min-width: 0;
}

.rkc-booking .amelia-v2-booking * {
	max-width: 100%;
}

/* Amelia's own promo backlink is noise inside a client site.
   The v3 Lite bundle renders it as `<div class="am-lite-footer">` (component
   BackLinkBlock in v3/public/assets/stepForm.*.js) — it is gated on
   general.backLink.enabled, which is now false, so this is belt-and-braces in
   case the Lite build re-seeds that flag on a plugin update. The two legacy
   selectors below do not exist in the v3 bundle; kept only for the v2 fallback
   markup. */
.am-lite-footer,
.am-lite-footer-link,
.amelia-v2-booking .am-lite-footer,
.amelia-v2-booking .am-fs__back-link,
.amelia-v2-booking [class*="powered-by"] {
	display: none !important;
}

/* ---- 4. WhatsApp enquiry panel layout ----------------------------------- */
/* .rkc-booking__wa itself is styled in rkc.css (flex column, row >=768px).
   These rules only lay out the enquiry form inside it — no restyling of the
   panel chrome, no colours beyond the shared tokens. */

.rkc-booking__wa > .rkc-booking__wa-intro {
	flex: 1 1 auto;
	min-width: 0;
}

.rkc-booking__wa form {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
	width: 100%;
	min-width: 0;
	flex: 1 1 100%;
}

@media (min-width: 640px) {
	.rkc-booking__wa form {
		grid-template-columns: 1fr 1fr;
	}

	.rkc-booking__wa form .rkc-field--wide,
	.rkc-booking__wa form .rkc-booking__wa-actions {
		grid-column: 1 / -1;
	}
}

/* The panel becomes a row at >=768px in rkc.css; the form must still stack
   full width underneath rather than being squeezed beside the intro. */
@media (min-width: 768px) {
	.rkc-booking__wa {
		flex-wrap: wrap;
	}
}

.rkc-booking__wa .rkc-field {
	min-width: 0;
}

.rkc-booking__wa textarea.rkc-input {
	min-height: 84px;
	resize: vertical;
}

.rkc-booking__wa-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}

/* Inline validation messages sit tight under their field. */
.rkc-booking__wa .rkc-field .rkc-alert {
	margin-top: 6px;
}

.rkc-booking__wa [hidden] {
	display: none !important;
}