/* ============================================================================
 * rebs-amelia-styles — catalog + wizard (SCRUM-116)
 * ============================================================================
 *
 * Restyle visual del widget [ameliacatalog] + [ameliabooking] para paridad
 * brand Rebs (NON-COLOR scope only).
 *
 * SCRUM-XXX (refactor 2026-05-25): TODAS las reglas de COLOR fueron removidas
 * de este archivo para habilitar el panel Customize de Amelia admin. Antes,
 * el mu-plugin pisaba con CSS hardcoded los colores brand (teal/lime/black/
 * white) y rompía la capacidad de Rebs de tunearlos desde Customize.
 *
 * Lo que queda en este layer (NON-COLOR):
 *   - font-family overrides (Poppins body / Mulish headings) — IMPRESCINDIBLE
 *     porque Amelia core emite `* { font-family: var(--am-font-family) }` con
 *     selector universal que pisa cualquier herencia del site. Sigue como
 *     !important quirúrgico solo en font-family (no es color, no rompe
 *     Customize).
 *   - layout / spacing / padding / gap / display / flex / grid
 *   - border-radius (sistema flat-square Rebs, paridad SCRUM-191)
 *   - border-width / border-style (sin color)
 *   - font-weight / font-size / line-height
 *   - transitions / transforms / box-shadow neutral (rgba black para depth)
 *   - position / overflow / max-height / max-width fixes
 *
 * Los COLORES (background, color, border-color, fill, stroke, box-shadow con
 * tint brand, outline-color, vars `--am-c-*`) ahora los maneja Rebs desde
 * `Amelia > Customize` en wp-admin. Token bridge desactivado.
 *
 * Specificity baseline: #amelia-container.am-fc__wrapper (1,1,0) y
 * .am-fs__wrapper para el wizard. NO usa !important salvo en font-family.
 *
 * Audit DOM completo:        .planning/scrum-116-amelia-audit.md
 * Screenshots baseline:      .playwright-mcp/jira-evidence-scrum-116/audit/
 * ============================================================================ */

/* ----------------------------------------------------------------------------
 * (2) Force font-family
 * ----------------------------------------------------------------------------
 * El wrapper top hereda Poppins del site, pero el sub-wrapper .am-cat__wrapper
 * fuerza `font-family: 'Amelia Roboto', sans-serif` en cascade desde sí mismo
 * hacia abajo (audit, sección 4). Eso pisa Poppins en todo el catalog. Acá lo
 * deshacemos y reescribimos:
 *   - cuerpo del catalog → Poppins (body Rebs)
 *   - service name (heading visual de cada card) → Mulish (headings Rebs)
 *   - cat heading ("All services", "All categories") → Mulish
 *
 * `!important` quirúrgico: SOLO en font-family universal. Amelia core emite
 * `.amelia-v2-booking #amelia-container.am-fc__wrapper * {
 * font-family: var(--am-font-family) }` con `*` universal. Esa regla pisa
 * cualquier override por clase específica que escribamos.
 *
 * EXCLUSIÓN ÍCONOS (SCRUM-116 r4): Amelia carga sus iconos como icon-font
 * (clases `.am-icon-*` con glyphs unicode via @font-face). Si pisamos
 * font-family con Poppins en ellos, los glyphs no se renderizan y aparecen
 * como `□`. Excluimos `[class*="am-icon-"]` del override universal.
 * -------------------------------------------------------------------------- */
.amelia-v2-booking #amelia-container.am-fc__wrapper,
.amelia-v2-booking #amelia-container .am-cat__wrapper,
.amelia-v2-booking #amelia-container .am-fcl,
.amelia-v2-booking #amelia-container .am-fcl *:not([class*="am-icon-"]),
.amelia-v2-booking #amelia-container .am-fcil__item,
.amelia-v2-booking #amelia-container .am-fcil__item *:not([class*="am-icon-"]),
.amelia-v2-booking #amelia-container .am-button,
.amelia-v2-booking #amelia-container .am-input {
	font-family: 'Poppins', Helvetica, Arial, sans-serif !important;
}

.amelia-v2-booking #amelia-container .am-fcil__item-name,
.amelia-v2-booking #amelia-container .am-cat__heading,
.amelia-v2-booking #amelia-container .am-fcil__heading {
	font-family: 'Mulish', Helvetica, Arial, sans-serif !important;
	font-weight: 500; /* match Rebs h3 token (reference_caniche_typography_tokens.md) */
}

/* ----------------------------------------------------------------------------
 * (3) Cards — geometry + shadow (neutral, NO brand tint)
 * ----------------------------------------------------------------------------
 * Sistema visual minimal flat-square + hover translateY + grid gap 32px.
 * Box-shadow es rgba negro neutro (depth perception, no brand color).
 * -------------------------------------------------------------------------- */
.amelia-v2-booking #amelia-container .am-fcil__item-inner.am-fcil__item-inner {
	border-radius: 0;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	padding: 24px;
	transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.amelia-v2-booking #amelia-container .am-fcil__item-inner.am-fcil__item-inner:hover {
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
	transform: translateY(-5px);
}

.amelia-v2-booking #amelia-container .am-fcil__item-name.am-fcil__item-name {
	font-size: 1.3rem;
	line-height: 1.3;
}

/* Price chip — flat-square shape, font weight / padding. Color via Customize. */
.amelia-v2-booking #amelia-container .am-fcil__item-price.am-fcil__item-price {
	font-weight: 500;
	padding: 4px 12px;
	border-radius: 0;
}

/* ----------------------------------------------------------------------------
 * (4) Buttons — flat-square radius (paridad SCRUM-191)
 * ----------------------------------------------------------------------------
 * Color de bg/text/border vía Amelia Customize. Acá solo shape.
 * -------------------------------------------------------------------------- */
.amelia-v2-booking #amelia-container .am-button.am-button {
	border-radius: 0;
}

/* ----------------------------------------------------------------------------
 * (5) Badge ("Service" / "Package" tag arriba de cada card)
 * ----------------------------------------------------------------------------
 * Shape flat-square + padding + weight. Color vía Customize.
 * -------------------------------------------------------------------------- */
.amelia-v2-booking #amelia-container .am-fcil__item-badge.am-service,
.amelia-v2-booking #amelia-container .am-fcil__item-badge.am-package {
	border-radius: 0;
	padding: 4px 8px;
	font-weight: 500;
}

/* ----------------------------------------------------------------------------
 * (6) Search input — flat sin doble contenedor
 * ----------------------------------------------------------------------------
 * El wrapper `.el-input.am-input--default` (Element UI) trae border 1px +
 * box-shadow + radius 6px que crean caja. Lo neutralizamos al wrapper outer
 * y mantenemos un border-width sutil SOLO en el `<input>` nativo interno
 * (.el-input__inner). Color del border ahora vía Customize / browser defaults.
 * -------------------------------------------------------------------------- */
.amelia-v2-booking #amelia-container .am-input.am-input--default {
	border: 0;
	border-radius: 0;
	padding: 8px 16px;
	box-shadow: none;
}

.amelia-v2-booking #amelia-container .am-input.am-input--default .el-input__inner,
.amelia-v2-booking #amelia-container .el-input__inner {
	border-width: 1px;
	border-style: solid;
	border-radius: 0;
	box-shadow: none;
}

/* ----------------------------------------------------------------------------
 * (7) Mobile (<= 600px) — padding ajustado y tipografía
 * -------------------------------------------------------------------------- */
@media (max-width: 600px) {
	.amelia-v2-booking #amelia-container.am-fc__wrapper .am-fcl__item,
	.amelia-v2-booking #amelia-container .am-fcil__item-inner {
		padding: 20px;
	}

	.amelia-v2-booking #amelia-container .am-fcil__item-name {
		font-size: 1.15rem;
	}

	.amelia-v2-booking #amelia-container .am-fcil__item-footer {
		gap: 8px;
	}
}

/* ----------------------------------------------------------------------------
 * (8) Catalog wrapper — kill inner scroll EN TODOS LOS VIEWPORTS
 * ----------------------------------------------------------------------------
 * Amelia core (catalogForm.css) hardcodea:
 *   1. `.am-fcil__item { max-width: 50% }` → 2-col en mobile, hay que romper a 3 en desktop.
 *   2. `.am-cat__content { max-height: 656px; overflow: hidden auto }` → scrollbar
 *      vertical interna apenas crece el catalog. Aplica a TODOS los viewports.
 *
 * Fix:
 * - max-height/overflow reset → global (mobile/tablet/desktop) para que la
 *   última card no quede cortada cuando hay más de 2-3 servicios (bug detectado
 *   en QA SCRUM-190 sobre 375px con 4 cards: Power Hour quedaba clippeada).
 * - Grid 3-col → solo desktop (1024+).
 * -------------------------------------------------------------------------- */
.amelia-v2-booking #amelia-container .am-cat__content.am-fcil__wrapper {
	max-height: none;
	overflow: visible;
}

@media (min-width: 1024px) {
	.amelia-v2-booking #amelia-container .am-cat__content.am-fcil__wrapper {
		gap: 32px;
	}

	.amelia-v2-booking #amelia-container .am-fcil__item {
		max-width: calc((100% - 64px) / 3);              /* 64px = 2 gaps de 32px */
		flex: 0 1 calc((100% - 64px) / 3);
	}
}

/* ----------------------------------------------------------------------------
 * (11) Quitar wrappers outer (r10 Cani feedback)
 * ----------------------------------------------------------------------------
 * Amelia mete dos wrappers visuales arriba del catalog (search + content)
 * con border/padding/bg que crea sensación de "caja dentro de caja". Resetear
 * border/shadow/padding para unificar con el resto del sitio.
 * -------------------------------------------------------------------------- */
.amelia-v2-booking #amelia-container .am-cat__wrapper.am-cat__wrapper,
.amelia-v2-booking #amelia-container .am-cat__inp.am-cat__inp,
.amelia-v2-booking #amelia-container .am-cat__content.am-cat__content,
.amelia-v2-booking #amelia-container .am-cat__form.am-fcil__main {
	border: 0;
	box-shadow: none;
	padding: 0;
}

/* ----------------------------------------------------------------------------
 * (9) Card inner layout — liberar altura fija + footer en flow
 * ----------------------------------------------------------------------------
 * Causa raíz (audit Tester en .planning/scrum-116-card-inner-issues.md):
 *   - `.am-fcil__item-inner` tiene `height: 170px` FIJO.
 *   - `.am-fcil__item-footer` es `position: absolute; top: 126px` → footer
 *     overlapea contenido cuando crece la card.
 *
 * Fix: `height: auto` con `min-height` + footer en flow con `position: static
 * + margin-top: auto` (empuja al fondo en flex column).
 * -------------------------------------------------------------------------- */
.amelia-v2-booking #amelia-container .am-fcil__item-inner.am-fcil__item-inner {
	height: auto;
	min-height: 170px;
	gap: 16px;
}

.amelia-v2-booking #amelia-container .am-fcil__item-footer.am-fcil__item-footer {
	position: static;
	margin-top: auto;
	margin-left: 0;
	margin-right: 0;
	padding-left: 0;
	padding-right: 0;
	width: 100%;
	display: flex;
	gap: 12px;
}

.amelia-v2-booking #amelia-container .am-fcil__item-footer.am-fcil__item-footer > * {
	flex: 1 1 0;
}

/* ============================================================================
 * === Booking wizard ([ameliabooking])
 * ============================================================================ */

/* (W3) Fuente — override universal del wrapper wizard. */
.amelia-v2-booking #amelia-container.am-fs__wrapper,
.amelia-v2-booking #amelia-container.am-fs__wrapper *:not([class*="am-icon-"]) {
	font-family: 'Poppins', Helvetica, Arial, sans-serif !important;
}

.amelia-v2-booking #amelia-container.am-fs__wrapper .am-fs-sb__page-heading,
.amelia-v2-booking #amelia-container.am-fs__wrapper .am-fs-sb__step-heading,
.amelia-v2-booking #amelia-container.am-fs__wrapper .am-fs__congrats-main-heading,
.amelia-v2-booking #amelia-container.am-fs__wrapper .am-fs__bringing-heading,
.amelia-v2-booking #amelia-container.am-fs__wrapper .am-fs-iipu__heading {
	font-family: 'Mulish', Helvetica, Arial, sans-serif !important;
	font-weight: 500;
}

/* (W4) Border-radius reset sistémico dentro del wizard (paridad SCRUM-191).
 * Color de surface vía Amelia Customize. */
.amelia-v2-booking #amelia-container.am-fs__wrapper .am-fs-sb,
.amelia-v2-booking #amelia-container.am-fs__wrapper .am-fs-sb__step,
.amelia-v2-booking #amelia-container.am-fs__wrapper .am-fs-sb__step-inner,
.amelia-v2-booking #amelia-container.am-fs__wrapper .am-fs-sb__step-icon,
.amelia-v2-booking #amelia-container.am-fs__wrapper .am-fs-iipu,
.amelia-v2-booking #amelia-container.am-fs__wrapper .am-fs__cserv,
.amelia-v2-booking #amelia-container.am-fs__wrapper .am-fs__ci,
.amelia-v2-booking #amelia-container.am-fs__wrapper .am-fs__ci-block,
.amelia-v2-booking #amelia-container.am-fs__wrapper .am-fs__congrats-main,
.amelia-v2-booking #amelia-container.am-fs__wrapper .am-fs__congrats-info,
.amelia-v2-booking #amelia-container.am-fs__wrapper .am-customer-info,
.amelia-v2-booking #amelia-container.am-fs__wrapper .am-customer-info * {
	border-radius: 0;
}

/* (W6) Service picker (step 1) — flat-square + border-width sutil + shadow off. */
.amelia-v2-booking #amelia-container.am-fs__wrapper .am-fs-iipu.am-fs-iipu {
	border-width: 1px;
	border-style: solid;
	box-shadow: none;
}

.amelia-v2-booking #amelia-container.am-fs__wrapper .am-fs-iipu__employee-display-price {
	font-weight: 500;
}

/* (W7) Time slots (step 2) — flat-square sin border negro heredado.
 * border-width removido: Amelia Customize maneja color del slot vía bg.
 * Solo dejamos border-radius reset + transition. */
.amelia-v2-booking #amelia-container.am-fs__wrapper .am-advsc__slots-item.am-advsc__slots-item {
	border-radius: 0;
	transition: background-color 0.15s ease, color 0.15s ease;
}

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

/* (W8) Customer info form (step 3) — flat-square inputs, color via Customize. */
.amelia-v2-booking #amelia-container.am-fs__wrapper .el-input__inner:focus,
.amelia-v2-booking #amelia-container.am-fs__wrapper .am-dp__input-focused .el-input__inner,
.amelia-v2-booking #amelia-container.am-fs__wrapper .am-input--default:focus-within {
	box-shadow: none;
	outline: none;
}

.amelia-v2-booking #amelia-container.am-fs__wrapper .am-customer-info input,
.amelia-v2-booking #amelia-container.am-fs__wrapper .am-customer-info .el-input__inner {
	border-width: 1px;
	border-style: solid;
	border-radius: 0;
	box-shadow: none;
}

/* (W9) Congrats / confirmation — heading size + info card shape (neutral shadow). */
.amelia-v2-booking #amelia-container.am-fs__wrapper .am-fs__congrats-main-heading.am-fs__congrats-main-heading {
	font-size: 2rem;
	line-height: 1.2;
}

.amelia-v2-booking #amelia-container.am-fs__wrapper .am-fs__congrats-info.am-fs__congrats-info,
.amelia-v2-booking #amelia-container.am-fs__wrapper .am-fs__congrats-info-customer-border.am-fs__congrats-info-customer-border {
	border-width: 1px;
	border-style: solid;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.06);
}

/* (W10) Mobile (<= 600px). */
@media (max-width: 600px) {
	.amelia-v2-booking #amelia-container.am-fs__wrapper .am-advsc__slots-item {
		padding: 10px 8px;
		font-size: 0.95rem;
	}

	.amelia-v2-booking #amelia-container.am-fs__wrapper .am-fs__congrats-main-heading {
		font-size: 1.5rem;
	}

	.amelia-v2-booking #amelia-container.am-fs__wrapper .am-fs-sb {
		padding: 16px;
	}
}

/* ============================================================================
 * === Catalog continue dialog (teleported .el-dialog)
 * ============================================================================
 *
 * Dialog Element Plus que abre el wizard de booking desde una card del catalog.
 * Wrapper Vue: `.amelia-v2-booking.am-forms-dialog.am-cbf`.
 *
 * Solo chrome shape (radius / shadow neutra). Color vía Customize.
 * ============================================================================ */

/* (D2) Dialog container — flat-square + soft neutral shadow. */
.amelia-v2-booking.am-forms-dialog .el-dialog {
	border-radius: 0;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* (D5) Body wrapper inside dialog — flat-square defensive. */
.amelia-v2-booking.am-forms-dialog .el-dialog__body #amelia-container.am-fs__wrapper {
	border-radius: 0;
}

/* (D6) Wizard heading dentro del dialog — defensive Mulish heading. */
.amelia-v2-booking.am-forms-dialog #amelia-container.am-fs__wrapper .am-fs-sb__page-heading,
.amelia-v2-booking.am-forms-dialog #amelia-container.am-fs__wrapper .am-fs-sb__step-heading,
.amelia-v2-booking.am-forms-dialog #amelia-container.am-fs__wrapper .am-fs__congrats-main-heading,
.amelia-v2-booking.am-forms-dialog #amelia-container.am-fs__wrapper .am-fs-iipu__heading {
	font-family: 'Mulish', Helvetica, Arial, sans-serif !important;
	font-weight: 500;
}

/* Mobile dialog — full-bleed sin shadow. */
@media (max-width: 768px) {
	.amelia-v2-booking.am-forms-dialog .el-dialog {
		border-radius: 0;
		box-shadow: none;
	}
}

/* ============================================================================
 * (R6) Booking wizard buttons — color brand interim override
 * ============================================================================
 *
 * SCRUM-Rebs-feedback-2026-05-27.
 *
 * Causa raiz (Rebs feedback 2026-05-27, /book-a-call/ wizard):
 *   El wizard de Amelia ([ameliabooking]) renderiza botones "Continue"/"Confirm"
 *   con color azul/cyan en lugar del brand mint/teal Rebs.
 *
 *   Audit DB amelia_settings.customizedData (sbsNew = Step-By-Step view del
 *   booking wizard) muestra:
 *     - colorBtnPrim       = #0097b2  (teal brand — OK)
 *     - colorPrimary       = #3aafc3  (cyan/light blue — ESTE ES EL "azul")
 *     - colorAccent        = rgb(0, 151, 178) = #0097b2 (teal — OK)
 *
 *   El #3aafc3 es lo que Cani ve como "azul" — viene del Amelia Customize
 *   panel admin > Amelia > Customize > Booking step-by-step > Colors > Primary.
 *
 * FIX PREFERIDO (no aplicado en este commit):
 *   Cambiar en wp-admin > Amelia > Customize > sbsNew/cbf/elf/capc views:
 *     colorPrimary: #3aafc3 → #0097b2 (teal brand)
 *   Eso re-emite el CSS scoped dinamico de Amelia y el cambio respeta la
 *   arquitectura "NON-COLOR scope" del archivo (lineas 8-12).
 *
 * FIX INTERIM (este commit):
 *   Override CSS de los botones del wizard hacia brand mint/teal mientras
 *   Cani actualiza el Customize panel. Documentado como excepcion temporal
 *   a la regla NON-COLOR — remover este bloque cuando Customize quede ajustado.
 *
 * Brand reference (memoria feedback_rebs_brand_no_lime):
 *   - mint  #0cdfc6 → primario (cards, accents)
 *   - teal  #0097b2 → secundario (CTAs, headings)
 *   - NUNCA lime #7ed957.
 *
 * Scope: botones dentro de `.am-fs__wrapper` (wizard) y `.am-fc__wrapper`
 * (catalog inicial del shortcode [ameliabooking]). En `/book-a-session/`
 * el shortcode arranca en catalog antes de entrar al wizard, por eso el
 * "Continue" idle quedaba en teal Customize (#0097b2) — fix QA 2026-05-27.
 * ============================================================================ */

/* Primary/filled buttons (Continue, Confirm, Book) → mint idle con texto dark.
 *
 * NOTA: Amelia agrega `.am-button--primary` a TODOS los buttons (text, outlined,
 * filled) — es un modifier de "color role", no de variant. Por eso filtramos
 * `:not(.am-button--text):not(.am-button--outlined)` para que la regla filled
 * NO pinte los Back/Cancel/View-Employees.
 *
 * INNER SPAN (fix 2026-05-27): Amelia renderiza el texto del button en
 * `<span class="am-button__inner">…</span>` y Vue setea inline style
 * `--am-c-btn-first: #0097b2`. El core CSS de Amelia usa `var(--am-c-btn-first)`
 * tambien para el `color` del inner span, por lo que el button parent con
 * `color: #262E38` NO alcanza — el span tiene su propia rule mas especifica
 * que hereda el var() y termina pintando el texto teal sobre el fondo mint.
 * Fix: incluir explicitamente `.am-button__inner` en los selectores idle/hover. */
.amelia-v2-booking #amelia-container.am-fs__wrapper .am-button.am-button--filled,
.amelia-v2-booking #amelia-container.am-fs__wrapper .am-button.am-button--primary:not(.am-button--text):not(.am-button--outlined),
.amelia-v2-booking #amelia-container.am-fc__wrapper .am-button.am-button--filled,
.amelia-v2-booking #amelia-container.am-fc__wrapper .am-button.am-button--primary:not(.am-button--text):not(.am-button--outlined),
.amelia-v2-booking.am-forms-dialog #amelia-container.am-fs__wrapper .am-button.am-button--filled,
.amelia-v2-booking.am-forms-dialog #amelia-container.am-fs__wrapper .am-button.am-button--primary:not(.am-button--text):not(.am-button--outlined) {
	background-color: #0cdfc6 !important; /* --rebs-mint */
	border-color: #0cdfc6 !important;
	color: var(--rebs-surface, #fff) !important; /* standard sistema Rebs: blanco idle + hover */
}

/* Inner span — Amelia core lo pinta con var(--am-c-btn-first) que el inline
 * style Vue setea a #0097b2 (teal). Forzamos color blanco SOLO al span (sin bg)
 * para que herede el fondo mint del button parent y solo cambie el texto.
 * Standard Rebs sitewide: mint+blanco idle, teal+blanco hover (matchea Quiosco,
 * Forminator submit, WC checkout, my-account, 404). */
.amelia-v2-booking #amelia-container.am-fs__wrapper .am-button.am-button--filled .am-button__inner,
.amelia-v2-booking #amelia-container.am-fs__wrapper .am-button.am-button--primary:not(.am-button--text):not(.am-button--outlined) .am-button__inner,
.amelia-v2-booking #amelia-container.am-fc__wrapper .am-button.am-button--filled .am-button__inner,
.amelia-v2-booking #amelia-container.am-fc__wrapper .am-button.am-button--primary:not(.am-button--text):not(.am-button--outlined) .am-button__inner,
.amelia-v2-booking.am-forms-dialog #amelia-container.am-fs__wrapper .am-button.am-button--filled .am-button__inner,
.amelia-v2-booking.am-forms-dialog #amelia-container.am-fs__wrapper .am-button.am-button--primary:not(.am-button--text):not(.am-button--outlined) .am-button__inner {
	color: var(--rebs-surface, #fff) !important; /* standard sistema Rebs: blanco idle */
}

.amelia-v2-booking #amelia-container.am-fs__wrapper .am-button.am-button--filled:hover,
.amelia-v2-booking #amelia-container.am-fs__wrapper .am-button.am-button--primary:not(.am-button--text):not(.am-button--outlined):hover,
.amelia-v2-booking #amelia-container.am-fc__wrapper .am-button.am-button--filled:hover,
.amelia-v2-booking #amelia-container.am-fc__wrapper .am-button.am-button--primary:not(.am-button--text):not(.am-button--outlined):hover,
.amelia-v2-booking.am-forms-dialog #amelia-container.am-fs__wrapper .am-button.am-button--filled:hover,
.amelia-v2-booking.am-forms-dialog #amelia-container.am-fs__wrapper .am-button.am-button--primary:not(.am-button--text):not(.am-button--outlined):hover {
	background-color: #0097b2 !important; /* --rebs-teal */
	border-color: #0097b2 !important;
	color: #ffffff !important;
}

/* Hover inner span — texto blanco sobre teal. */
.amelia-v2-booking #amelia-container.am-fs__wrapper .am-button.am-button--filled:hover .am-button__inner,
.amelia-v2-booking #amelia-container.am-fs__wrapper .am-button.am-button--primary:not(.am-button--text):not(.am-button--outlined):hover .am-button__inner,
.amelia-v2-booking #amelia-container.am-fc__wrapper .am-button.am-button--filled:hover .am-button__inner,
.amelia-v2-booking #amelia-container.am-fc__wrapper .am-button.am-button--primary:not(.am-button--text):not(.am-button--outlined):hover .am-button__inner,
.amelia-v2-booking.am-forms-dialog #amelia-container.am-fs__wrapper .am-button.am-button--filled:hover .am-button__inner,
.amelia-v2-booking.am-forms-dialog #amelia-container.am-fs__wrapper .am-button.am-button--primary:not(.am-button--text):not(.am-button--outlined):hover .am-button__inner {
	color: #ffffff !important;
}

/* Outlined/text buttons (Back, Cancel) → teal border + teal text. */
.amelia-v2-booking #amelia-container.am-fs__wrapper .am-button.am-button--outlined,
.amelia-v2-booking #amelia-container.am-fs__wrapper .am-button.am-button--text,
.amelia-v2-booking #amelia-container.am-fc__wrapper .am-button.am-button--outlined,
.amelia-v2-booking #amelia-container.am-fc__wrapper .am-button.am-button--text,
.amelia-v2-booking.am-forms-dialog #amelia-container.am-fs__wrapper .am-button.am-button--outlined,
.amelia-v2-booking.am-forms-dialog #amelia-container.am-fs__wrapper .am-button.am-button--text {
	background-color: transparent !important;
	border-color: #0097b2 !important;
	color: #0097b2 !important;
}

.amelia-v2-booking #amelia-container.am-fs__wrapper .am-button.am-button--outlined:hover,
.amelia-v2-booking #amelia-container.am-fs__wrapper .am-button.am-button--text:hover,
.amelia-v2-booking #amelia-container.am-fc__wrapper .am-button.am-button--outlined:hover,
.amelia-v2-booking #amelia-container.am-fc__wrapper .am-button.am-button--text:hover,
.amelia-v2-booking.am-forms-dialog #amelia-container.am-fs__wrapper .am-button.am-button--outlined:hover,
.amelia-v2-booking.am-forms-dialog #amelia-container.am-fs__wrapper .am-button.am-button--text:hover {
	background-color: #0097b2 !important;
	border-color: #0097b2 !important;
	color: #ffffff !important;
}

/* ----------------------------------------------------------------------------
 * (R1) Catalog card brand surface — Rebs
 * ----------------------------------------------------------------------------
 * Replica paridad con cards de /services/ brand Rebs: fondo mint translúcido
 * (rgba(80,167,194,0.1)) sólido en idle, gradient teal→mint suave en hover.
 * Double-class para superar specificity de Amelia (.am-fcil__item-inner.am-fcil__item-inner).
 * -------------------------------------------------------------------------- */
.amelia-v2-booking #amelia-container .am-fcil__item-inner.am-fcil__item-inner {
	background: rgba(80, 167, 194, 0.1);
	transition: background 0.3s, box-shadow 0.3s, transform 0.3s;
}

.amelia-v2-booking #amelia-container .am-fcil__item-inner.am-fcil__item-inner:hover {
	background: linear-gradient(135deg, rgba(0, 151, 178, 0.18) 0%, rgba(12, 223, 198, 0.18) 100%);
}

/* (R2) Hide "View Employees" button — solo hay 1 employee (Rebs).
 * Es el primer botón del footer (am-button--text variant). Continue es el segundo (--filled). */
.amelia-v2-booking #amelia-container .am-fcil__item-footer .am-button--text {
	display: none !important;
}

/* Re-justificar Continue a la derecha (sin View Employees el footer queda solo). */
.amelia-v2-booking #amelia-container .am-fcil__item-footer {
	justify-content: flex-end;
}

/* (R3) Hide "Service" badge — todas las cards son del mismo tipo (calls).
 * Aplica tanto a cards del catalog como al header de la detail page. */
.amelia-v2-booking #amelia-container .am-fcil__item-badge__wrapper,
.amelia-v2-booking #amelia-container .am-fcil__item-badge,
.amelia-v2-booking #amelia-container [class*="am-fc__badge"],
.amelia-v2-booking #amelia-container [class*="__badge"] {
	display: none !important;
}

/* (R4) SCRUM-190 — Border-radius reset residuales catalog.
 * Audit 2026-05-26 detectó: .am-fc__wrapper (8px), .am-cat__wrapper.am-fcil (10px),
 * .am-input/.el-input (6px). Reset coherente con el sistema flat-square Rebs.
 *
 * NOTA: .am-fc__wrapper es compound con #amelia-container (mismo elemento),
 * NO descendant. Selector debe ser `#amelia-container.am-fc__wrapper` sin espacio
 * para matchear specificity Amelia core (0,2,1). */
.amelia-v2-booking #amelia-container.am-fc__wrapper,
.amelia-v2-booking #amelia-container .am-cat__wrapper,
.amelia-v2-booking #amelia-container .am-cat__wrapper.am-fcil,
.amelia-v2-booking #amelia-container .am-input,
.amelia-v2-booking #amelia-container .el-input,
.amelia-v2-booking #amelia-container .el-input__inner,
.amelia-v2-booking #amelia-container .el-input__wrapper {
	border-radius: 0 !important;
}

/* (R5) Catalog Continue button — match site-wide CTA tokens.
 * Default Amelia: padding 6px 16px, font 14/500. Site tokens: 15px 23px, 16/500.
 * Solo agrandamos padding + font-size para alinear con el resto. Color y bg
 * se respetan desde Amelia Customize panel (no se pisan acá).
 *
 * height: auto necesario porque Amelia core ships height: 32px hardcoded +
 * box-sizing: border-box → sin auto, el padding 15px queda comprimido y
 * el botón sigue chato. */
.amelia-v2-booking #amelia-container .am-fcil__item-footer button.am-button.am-button--filled {
	padding: var(--rebs-button-padding) !important;
	font-size: var(--rebs-button-font-size) !important;
	font-weight: var(--rebs-button-font-weight) !important;
	border-radius: var(--rebs-button-radius) !important;
	height: auto !important;
	min-height: 0 !important;
}

/* ============================================================================
 * (R7) Hide Amelia catalog search box — Rebs feedback 2026-05-27
 * ============================================================================
 *
 * Rebs: "I also don't think the search box for the call bookings is required."
 *
 * Con solo 4 servicios el search es ruido visual. Amelia ships dos UIs para
 * el search dentro de `.am-cat__header`:
 *
 *   1. Desktop: `.am-fcil__filter` (wrapper con el `<input placeholder="Search">`).
 *      Chain verificado en DOM /book-a-session/ local (2026-05-27):
 *        .am-cat__wrapper.am-fcil
 *          > .am-cat__header
 *            > .am-fcil__filter
 *              > .am-fcil__filter-item.am-w100
 *                > .am-input-wrapper > .el-input > .el-input__wrapper
 *                  > input.el-input__inner[placeholder="Search"]
 *
 *   2. Mobile (<= breakpoint Amelia): `.am-fcil__filter-buttons` (trigger
 *      botón con icono filter que abre el panel oculto). Si solo ocultamos
 *      el wrapper #1 queda el ícono visible y abrible. Ocultamos ambos.
 *
 * Selectors verificados en DOM real desktop (1280px) + mobile (375px) local.
 * ============================================================================ */
.amelia-v2-booking #amelia-container .am-cat__wrapper .am-fcil__filter,
.amelia-v2-booking #amelia-container .am-cat__wrapper .am-fcil__filter-buttons {
	display: none !important;
}