/*
 * wideum-buttons.css
 * -----------------------------------------------------------------------------
 * Fidelitat de BOTONS / CTAs respecte de producció (wideum.com).
 *
 * S'encua l'ÚLTIM de tots (després de theme/legacy/animations/forms) perquè
 * guanyi per ORDRE DE FONT i pugui fixar variants i hovers sense tocar els
 * mappers ni els altres fulls (propietat d'altres agents).
 *
 * Variants originals (wideum-theme.css):
 *   .button              turquesa sòlid #4ADBC4  · hover #6EE2D0   (CTA principal)
 *   .button--blue        blau fosc #00175C       · hover #1D3377   (CTA secundari)
 *   .button--transparent outline 2px turquesa    · hover rgba(255,255,255,.25)
 *   .link / .link--arrow enllaç #1CA3B5 amb fletxa (NO és píndola)
 *
 * Marcadors fiables al DOM migrat:
 *   - Sòlid turquesa  → wrapper .elementor-widget-button SENSE classe de variant
 *   - Outline         → wrapper .w-btn-outline
 *   - Blau            → wrapper .w-btn-blue  (o widget pricing .button--blue)
 *   - Enllaç-fletxa   → .link--arrow (a l'àncora o al wrapper del widget botó)
 * -----------------------------------------------------------------------------
 */

/* ============================================================================
 * 1) HOVER DEL SÒLID TURQUESA  (prod .button:hover → #6EE2D0)
 *    Els CTAs migrats són .elementor-button "pelats" (sense classe de variant):
 *    el Kit els pinta de turquesa però molts NO porten hover per-element, així
 *    que es quedaven estàtics ("no fan res al passar-hi"). S'ha verificat a
 *    totes les pàgines que TOT wrapper sense variant és sòlid turquesa, per la
 *    qual cosa un hover general és segur. S'exclouen els wrappers de variant
 *    (outline / blue / purple) i els enllaços-fletxa, que tenen el seu hover.
 * ==========================================================================*/
.elementor-widget-button:not(.w-btn-outline):not(.w-btn-blue):not(.w-btn-purple):not(.link--arrow):not(.product-cards__link):not(.cards__link) .elementor-button {
	transition: background-color .2s linear, color .2s linear;
}
.elementor-widget-button:not(.w-btn-outline):not(.w-btn-blue):not(.w-btn-purple):not(.link--arrow):not(.product-cards__link):not(.cards__link) .elementor-button:hover,
.elementor-widget-button:not(.w-btn-outline):not(.w-btn-blue):not(.w-btn-purple):not(.link--arrow):not(.product-cards__link):not(.cards__link) .elementor-button:focus {
	background-color: #6EE2D0 !important;
	color: #fff !important;
}

/* CTA del HEADER i del TOP-BAR: mateixa píndola sòlida. Ja queden coberts per
 * la regla general (wrappers buit / .wideum-topbar-btn), però es fixen aquí
 * explícitament perquè el hover reportat com a trencat no torni a regressar. */
.wideum-header .elementor-widget-button .elementor-button,
.wideum-topbar .wideum-topbar-btn .elementor-button {
	transition: background-color .2s linear, color .2s linear;
}
.wideum-header .elementor-widget-button:not(.w-btn-outline):not(.w-btn-blue) .elementor-button:hover,
.wideum-header .elementor-widget-button:not(.w-btn-outline):not(.w-btn-blue) .elementor-button:focus,
.wideum-topbar .wideum-topbar-btn .elementor-button:hover,
.wideum-topbar .wideum-topbar-btn .elementor-button:focus {
	background-color: #6EE2D0 !important;
	color: #fff !important;
}

/* ============================================================================
 * 2) ENLLAÇOS-FLETXA  (.link--arrow: "See more / Learn more / Discover more /
 *    Read more"). A prod són enllaços de text #1CA3B5 amb la fletxa SVG a la
 *    dreta — NO píndoles. En la migració:
 *      · a smart-glasses / realwear / home la fletxa desapareixia (el fons
 *        "none" del botó d'Elementor guanya la regla del tema),
 *      · a partners a més el text sortia turquesa (#4ADBC4) en lloc de #1CA3B5.
 *    Es fixa color + fletxa de forma definitiva. Cobreix els dos patrons:
 *    classe a l'àncora (a.link--arrow) i classe al wrapper del widget botó
 *    (.link--arrow .elementor-button).
 * ==========================================================================*/
a.link--arrow,
.link--arrow .elementor-button,
.product-cards__link .elementor-button,
.cards__link.link--arrow .elementor-button {
	color: #1CA3B5 !important;
	background-color: transparent !important;
	background-image: url(../images/link-arrow.svg) !important;
	background-position: right 6px !important;
	background-repeat: no-repeat !important;
	background-size: 11px 11px !important;
	padding-right: 18px !important;
	border-radius: 0 !important;
}
a.link--arrow:hover,
.link--arrow .elementor-button:hover,
.product-cards__link .elementor-button:hover,
.cards__link.link--arrow .elementor-button:hover {
	background-color: transparent !important;
	color: #1CA3B5 !important;
	text-decoration: none;
}
/* El wrapper del widget botó porta .link--arrow però NO ha de dur fletxa
 * pròpia (la fletxa va a l'àncora interior); evita una segona fletxa. */
.elementor-widget-button.link--arrow {
	background-image: none !important;
}

/* --- Anul·la la SUPRESSIÓ de background-image d'Elementor (lazy-load) sobre la
 *     fletxa. Elementor aplica `background-image:none !important` a tots els
 *     descendents de la 3a+ secció encara no "lazy-loaded"
 *     (`.e-con.e-parent:nth-of-type(n+3):not(.e-lazyloaded) *`, especificitat
 *     0,5,0), cosa que esborrava la fletxa dels "See more / Learn more /
 *     Discover more" a partir de la 3a secció. A prod no hi ha Elementor, així
 *     que la fletxa sempre hi és. Restaurem-la amb un selector d'especificitat
 *     superior (0,5,1) escopit al mateix context no-lazy. --- */
.e-con.e-parent:not(.e-lazyloaded) a.link.link--arrow,
.e-con.e-parent:not(.e-lazyloaded) .link--arrow .elementor-button,
.e-con.e-parent:not(.e-lazyloaded) .product-cards__link .elementor-button,
.e-con.e-parent:not(.e-lazyloaded) .cards__link.link--arrow .elementor-button {
	background-image: url(../images/link-arrow.svg) !important;
	background-position: right 6px !important;
	background-repeat: no-repeat !important;
	background-size: 11px 11px !important;
	padding-right: 18px !important;
}

/* Fix: .button sòlid dins widgets HTML de fidelitat — el color d'enllaç global
   (a{color:turquoise}) tapava el text blanc → text turquesa sobre fons turquesa
   (invisible). Força blanc als botons sòlids .button (no a --transparent). */
.elementor-widget-html a.button:not(.button--transparent):not(.button--outline),
a.button:not(.button--transparent):not(.button--outline) {
	color: #fff !important;
}
.elementor-widget-html a.button--transparent,
a.button--transparent {
	color: var(--turquoise, #4ADBC4) !important;
}