/*
 * MBS Elementor Toolkit shared visual foundation.
 *
 * Purpose:
 * - keep Elementor icon controls predictable across font icons and SVG icons;
 * - make icon size controls resize the artwork, not the surrounding button box;
 * - make parent Text/Icon color controls reach the rendered icon artwork;
 * - keep the contract shared instead of re-implementing it widget by widget.
 */

:where(
	.uhte-icon-host,
	.uhte-action__icon,
	.uhte-account__icon,
	.uhte-cart__icon,
	.uhte-search__icon,
	.uhte-menu__toggle-icon,
	.uhte-menu__close-icon,
	.uhte-cart-drawer__close-icon,
	.uhte-contact-list__icon,
	.uhte-social__link,
	.uhte-ticker__icon,
	.uhte-menu__drawer-search-icon,
	.uhte-menu__drawer-social-link,
	.uhte-product-whatsapp__icon,
	.uhte-atc-icon,
	.uhte-product-card__button-icon,
	.uhte-breadcrumbs__icon,
	.uhte-breadcrumbs__separator,
	.uhte-product-trust__icon,
	.uhte-product-cta__icon,
	.uhte-product-cta__button-icon,
	.uhte-product-note__icon,
	.uhte-product-info-card__icon,
	.uhte-product-highlight__icon,
	.uhte-whatsapp__launcher-icon,
	.uhte-whatsapp__question-icon,
	.uhte-whatsapp__send-icon
) {
	line-height: 1;
	color: inherit;
}

/* Icon/text spacing contract: the parent owns column-gap; the icon artwork owns size;
 * parent padding owns the outer interior. Theme/font-library margins must not leak into the gap. */
:where(
	.uhte-action__icon,
	.uhte-account__icon,
	.uhte-cart__icon,
	.uhte-search__icon,
	.uhte-menu__toggle-icon,
	.uhte-menu__close-icon,
	.uhte-cart-drawer__close-icon,
	.uhte-contact-list__icon,
	.uhte-ticker__icon,
	.uhte-menu__drawer-search-icon,
	.uhte-product-whatsapp__icon,
	.uhte-atc-icon,
	.uhte-product-card__button-icon,
	.uhte-breadcrumbs__icon,
	.uhte-breadcrumbs__separator,
	.uhte-product-trust__icon,
	.uhte-product-cta__icon,
	.uhte-product-cta__button-icon,
	.uhte-product-note__icon,
	.uhte-product-info-card__icon,
	.uhte-product-highlight__icon,
	.uhte-whatsapp__launcher-icon,
	.uhte-whatsapp__question-icon,
	.uhte-whatsapp__send-icon
) {
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

:where(
	.uhte-action__icon,
	.uhte-account__icon,
	.uhte-cart__icon,
	.uhte-search__icon,
	.uhte-menu__toggle-icon,
	.uhte-menu__close-icon,
	.uhte-cart-drawer__close-icon,
	.uhte-contact-list__icon,
	.uhte-ticker__icon,
	.uhte-menu__drawer-search-icon,
	.uhte-product-whatsapp__icon,
	.uhte-atc-icon,
	.uhte-product-card__button-icon,
	.uhte-breadcrumbs__icon,
	.uhte-breadcrumbs__separator,
	.uhte-product-trust__icon,
	.uhte-product-cta__icon,
	.uhte-product-cta__button-icon,
	.uhte-product-note__icon,
	.uhte-product-info-card__icon,
	.uhte-product-highlight__icon,
	.uhte-whatsapp__launcher-icon,
	.uhte-whatsapp__question-icon,
	.uhte-whatsapp__send-icon
) > :is(i, svg, img) {
	margin: 0;
	padding: 0;
}

/*
 * Elementor Icons_Manager can output font-icon <i> markup or SVG markup.
 * Uploaded SVG icons also come through the SVG path.  Image markup is
 * supported for sizing as a defensive fallback, although raster images do
 * not support arbitrary CSS recoloring.
 */
:where(
	.uhte-icon-host,
	.uhte-action__icon,
	.uhte-account__icon,
	.uhte-cart__icon,
	.uhte-search__icon,
	.uhte-menu__toggle-icon,
	.uhte-menu__close-icon,
	.uhte-cart-drawer__close-icon,
	.uhte-contact-list__icon,
	.uhte-social__link,
	.uhte-ticker__icon,
	.uhte-menu__drawer-search-icon,
	.uhte-menu__drawer-social-link,
	.uhte-product-whatsapp__icon,
	.uhte-atc-icon,
	.uhte-product-card__button-icon,
	.uhte-breadcrumbs__icon,
	.uhte-breadcrumbs__separator,
	.uhte-product-trust__icon,
	.uhte-product-cta__icon,
	.uhte-product-cta__button-icon,
	.uhte-product-note__icon,
	.uhte-product-info-card__icon,
	.uhte-product-highlight__icon,
	.uhte-whatsapp__launcher-icon,
	.uhte-whatsapp__question-icon,
	.uhte-whatsapp__send-icon
) > :is(i, svg, img) {
	display: block;
	flex: 0 0 auto;
	width: var(--uhte-icon-size, 1em);
	height: var(--uhte-icon-size, 1em);
	max-width: none;
	max-height: none;
	font-size: var(--uhte-icon-size, 1em);
	line-height: 1;
	color: inherit;
	object-fit: contain;
}

/* Preserve stroke-only SVGs while making normal monochrome SVGs obey color controls. */
:where(
	.uhte-icon-host,
	.uhte-action__icon,
	.uhte-account__icon,
	.uhte-cart__icon,
	.uhte-search__icon,
	.uhte-menu__toggle-icon,
	.uhte-menu__close-icon,
	.uhte-cart-drawer__close-icon,
	.uhte-contact-list__icon,
	.uhte-social__link,
	.uhte-ticker__icon,
	.uhte-menu__drawer-search-icon,
	.uhte-menu__drawer-social-link,
	.uhte-product-whatsapp__icon,
	.uhte-atc-icon,
	.uhte-product-card__button-icon,
	.uhte-breadcrumbs__icon,
	.uhte-breadcrumbs__separator,
	.uhte-product-trust__icon,
	.uhte-product-cta__icon,
	.uhte-product-cta__button-icon,
	.uhte-product-note__icon,
	.uhte-product-info-card__icon,
	.uhte-product-highlight__icon,
	.uhte-whatsapp__launcher-icon,
	.uhte-whatsapp__question-icon,
	.uhte-whatsapp__send-icon
) > svg:not([fill="none"]) {
	fill: currentColor;
}

:where(
	.uhte-icon-host,
	.uhte-action__icon,
	.uhte-account__icon,
	.uhte-cart__icon,
	.uhte-search__icon,
	.uhte-menu__toggle-icon,
	.uhte-menu__close-icon,
	.uhte-cart-drawer__close-icon,
	.uhte-contact-list__icon,
	.uhte-social__link,
	.uhte-ticker__icon,
	.uhte-menu__drawer-search-icon,
	.uhte-menu__drawer-social-link,
	.uhte-product-whatsapp__icon,
	.uhte-atc-icon,
	.uhte-product-card__button-icon,
	.uhte-breadcrumbs__icon,
	.uhte-breadcrumbs__separator,
	.uhte-product-trust__icon,
	.uhte-product-cta__icon,
	.uhte-product-cta__button-icon,
	.uhte-product-note__icon,
	.uhte-product-info-card__icon,
	.uhte-product-highlight__icon,
	.uhte-whatsapp__launcher-icon,
	.uhte-whatsapp__question-icon,
	.uhte-whatsapp__send-icon
) svg [fill]:not([fill="none"]) {
	fill: currentColor;
}

:where(
	.uhte-icon-host,
	.uhte-action__icon,
	.uhte-account__icon,
	.uhte-cart__icon,
	.uhte-search__icon,
	.uhte-menu__toggle-icon,
	.uhte-menu__close-icon,
	.uhte-cart-drawer__close-icon,
	.uhte-contact-list__icon,
	.uhte-social__link,
	.uhte-ticker__icon,
	.uhte-menu__drawer-search-icon,
	.uhte-menu__drawer-social-link,
	.uhte-product-whatsapp__icon,
	.uhte-atc-icon,
	.uhte-product-card__button-icon,
	.uhte-breadcrumbs__icon,
	.uhte-breadcrumbs__separator,
	.uhte-product-trust__icon,
	.uhte-product-cta__icon,
	.uhte-product-cta__button-icon,
	.uhte-product-note__icon,
	.uhte-product-info-card__icon,
	.uhte-product-highlight__icon,
	.uhte-whatsapp__launcher-icon,
	.uhte-whatsapp__question-icon,
	.uhte-whatsapp__send-icon
) svg [stroke]:not([stroke="none"]) {
	stroke: currentColor;
}

/* Parent Text/Icon color controls must also color nested icon/text markup. */
:where(
	.uhte-action,
	.uhte-account,
	.uhte-cart,
	.uhte-cart__button,
	.uhte-search__toggle,
	.uhte-search__submit,
	.uhte-menu__toggle,
	.uhte-menu__close,
	.uhte-cart-drawer__close,
	.uhte-contact-list__item,
	.uhte-social__link,
	.uhte-ticker__item,
	.uhte-product-whatsapp,
	.uhte-product-card__button,
	.uhte-product-cta__button,
	.uhte-whatsapp__launcher,
	.uhte-whatsapp__question,
	.uhte-whatsapp__send
) > :where(span, i, svg) {
	color: inherit;
}

/* Shared MBS hover-effect contract. Every widget that outputs an uhte-effect-* class
   inherits the same smooth defaults, while Elementor controls can override the CSS variables. */
.uhte-effect-lift,
.uhte-effect-float,
.uhte-effect-grow,
.uhte-effect-press,
.uhte-effect-shrink,
.uhte-effect-pulse,
.uhte-effect-rotate,
.uhte-effect-icon-slide {
	transform-origin: center;
	transition-property: color, background-color, border-color, box-shadow, transform, opacity;
	transition-duration: var(--uhte-transition, 220ms);
	transition-timing-function: ease;
	transition-delay: var(--uhte-delay, 30ms);
}

.uhte-effect-lift:hover,
.uhte-effect-lift:focus-visible,
.uhte-effect-float:hover,
.uhte-effect-float:focus-visible {
	transform: translateY(calc(var(--uhte-effect-amount, 3) * -1px));
}

.uhte-effect-grow:hover,
.uhte-effect-grow:focus-visible {
	transform: scale(calc(1 + (var(--uhte-effect-amount, 3) / 100)));
}

.uhte-effect-press:hover,
.uhte-effect-press:focus-visible,
.uhte-effect-shrink:hover,
.uhte-effect-shrink:focus-visible {
	transform: scale(calc(1 - (var(--uhte-effect-amount, 3) / 100)));
}

.uhte-effect-pulse:hover,
.uhte-effect-pulse:focus-visible {
	transform: scale(1.03);
}

.uhte-effect-rotate:hover,
.uhte-effect-rotate:focus-visible {
	transform: rotate(calc(var(--uhte-effect-amount, 3) * 1deg));
}

.uhte-effect-icon-slide :is(.uhte-action__icon,.uhte-account__icon,.uhte-cart__icon,.uhte-search__icon,.uhte-menu__toggle-icon,.uhte-contact-list__icon,.uhte-ticker__icon) {
	transition: transform var(--uhte-transition, 220ms) ease var(--uhte-delay, 30ms);
}
.uhte-effect-icon-slide:hover :is(.uhte-action__icon,.uhte-account__icon,.uhte-cart__icon,.uhte-search__icon,.uhte-menu__toggle-icon,.uhte-contact-list__icon,.uhte-ticker__icon),
.uhte-effect-icon-slide:focus-visible :is(.uhte-action__icon,.uhte-account__icon,.uhte-cart__icon,.uhte-search__icon,.uhte-menu__toggle-icon,.uhte-contact-list__icon,.uhte-ticker__icon) {
	transform: translateX(calc(var(--uhte-effect-amount, 3) * 1px));
}

/* Archive Toolbar uses intentionally hand-built SVGs rather than Icons_Manager. */
.uhte-archive-toolbar__view svg {
	width: var(--uhte-icon-size, 20px);
	height: var(--uhte-icon-size, 20px);
	max-width: none;
	max-height: none;
	color: inherit;
	fill: currentColor;
}