/* =============================================================================
 * CHECKOUT — camps natius que el sistema de disseny no cobria
 *
 * El checkout el pinta el widget `woocommerce-checkout-page` d'Elementor Pro,
 * que estila `#customer_details .form-row .input-text, select, textarea` amb el
 * llenguatge del shop (fons #f9fafa, sense vora, radi 10, padding 16).
 *
 * PERÒ el camp "Country / Region" i el de província no són un `<select>` a la
 * pantalla: WooCommerce els substitueix per selectWoo/select2, que amaga el
 * select natiu i pinta un `<div class="select2-container">` al seu lloc. Aquest
 * div NO el toca ni Elementor ni el Kit, de manera que li queda:
 *
 *   - el color de `wideum-shop-f13.css` §WOO CHROME (blanc + vora #c9d0dc) →
 *     l'únic camp emmarcat enmig de camps grisos plans;
 *   - i, sobretot, TRES alçades incompatibles heretades de select2 + Woo:
 *     `.select2-container` 42px, `.select2-selection--single` min-height 46px
 *     amb padding 10/13, i `.select2-selection__rendered` line-height 45px amb
 *     el seu propi padding → 60px de contingut dins d'una caixa de 42px. El
 *     nom del país sortia DESBORDAT per sota de la vora. Això és el "es veu
 *     raro" que es reportava.
 *
 * Aquí es reconstrueix el control sencer (geometria + crom) perquè sigui
 * indistingible d'un input del checkout. La geometria es corregeix a TOT el
 * shop (cart, my-account, adreces) perquè el desbordament hi passa igual; el
 * crom gris només dins del widget de checkout, que és on els inputs són grisos.
 * ========================================================================== */

/* -----------------------------------------------------------------------------
 * 1. GEOMETRIA DEL SELECT2 (global al shop)
 *
 * Les tres capes han de mesurar el mateix. S'anul·len els line-height i
 * paddings heretats i es centra el text amb flex, que és l'única manera que el
 * valor quedi vertical i horitzontalment on toca sense fer números màgics.
 * -------------------------------------------------------------------------- */
.woocommerce .select2-container,
.woocommerce-page .select2-container {
	height: auto;
	width: 100% !important;
	font-family: inherit;
}

.woocommerce .select2-container .select2-selection--single,
.woocommerce-page .select2-container .select2-selection--single {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	height: 48px;
	min-height: 48px;
	padding: 0 16px;
	line-height: normal;
}

.woocommerce .select2-container .select2-selection--single .select2-selection__rendered,
.woocommerce-page .select2-container .select2-selection--single .select2-selection__rendered {
	padding: 0;
	line-height: normal;
	color: inherit;
	font-size: inherit;
	font-family: inherit;
}

/* La fletxa de select2 va posicionada en absolut amb una alçada pròpia (26px)
   que amb la caixa antiga quedava enganxada a dalt. Es torna a centrar. */
.woocommerce .select2-container .select2-selection--single .select2-selection__arrow,
.woocommerce-page .select2-container .select2-selection--single .select2-selection__arrow {
	top: 0;
	right: 10px;
	height: 100%;
}

/* -----------------------------------------------------------------------------
 * 2. CROM DINS DEL CHECKOUT D'ELEMENTOR
 *
 * Mateixos valors que el widget aplica als inputs germans. Si algun dia es
 * canvien des del panell d'Elementor, aquests s'han de tocar aquí també: no hi
 * ha manera que un div hereti l'estil d'un `<select>` que ni tan sols es veu.
 * -------------------------------------------------------------------------- */
.elementor-widget-woocommerce-checkout-page .woocommerce .form-row .select2-container .select2-selection--single {
	border: none;
	border-radius: 10px;
	background-color: #f9fafa;
	color: #69727d;
	font-size: 14px;
}

/* Woo marca en verd/vermell el camp validat i l'error. Amb la vora treta el
   verd es perdia; es torna com a ombra interior perquè no reintrodueixi la
   vora que trencava l'alineació amb els inputs del costat. */
.elementor-widget-woocommerce-checkout-page .woocommerce .form-row.woocommerce-invalid .select2-container .select2-selection--single {
	box-shadow: inset 0 0 0 1px #d64545;
}

.elementor-widget-woocommerce-checkout-page .woocommerce .form-row .select2-container--open .select2-selection--single,
.elementor-widget-woocommerce-checkout-page .woocommerce .form-row .select2-container--focus .select2-selection--single {
	box-shadow: inset 0 0 0 1px #00175c;
}

/* -----------------------------------------------------------------------------
 * 3. DESPLEGABLE OBERT
 *
 * El panell de select2 es renderitza al final del <body>, fora del widget, així
 * que no pot penjar de cap selector del checkout: va per la seva.
 * -------------------------------------------------------------------------- */
.select2-container--default .select2-dropdown {
	border: 1px solid #e5e8ef;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 8px 24px rgba(0, 23, 92, .12);
}

/* Els resultats són un <ul>/<li> i el tema hi cola el seu `list-style`: sortia
   un punt negre despenjat a l'esquerra de cada país. Mateix defecte que a la
   llista de mètodes de pagament de §4. */
.select2-container--default .select2-results > .select2-results__options,
.select2-container--default .select2-results__option {
	list-style: none outside none;
	margin-left: 0;
	padding-left: 12px;
}

.select2-container--default .select2-results__option::marker {
	content: none;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
	padding: 10px 12px;
	border: 1px solid #e5e8ef;
	border-radius: 8px;
	font-size: 14px;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
	background-color: #00175c;
	color: #fff;
}

.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option[data-selected="true"] {
	background-color: #f7f8fa;
	color: #00175c;
}

/* -----------------------------------------------------------------------------
 * 4. LLISTA DE MÈTODES DE PAGAMENT
 *
 * `ul.payment_methods` hereta el `list-style` del tema i sortia un punt negre
 * despenjat sobre cada radio (el `li` és flex/relatiu i el marcador quedava a
 * la línia de dalt). Woo ja preveu `list-style: none` al seu full, però el
 * selector del tema (`.woocommerce ul`) hi empata i guanya per ordre de font.
 * -------------------------------------------------------------------------- */
.woocommerce-checkout #payment ul.payment_methods,
.woocommerce-checkout #payment ul.payment_methods li {
	list-style: none outside none;
	margin-left: 0;
	padding-left: 0;
}

.woocommerce-checkout #payment ul.payment_methods li::marker {
	content: none;
}

/* Etiqueta del mètode: alineada amb el radio i amb el pes del sistema. */
.woocommerce-checkout #payment ul.payment_methods li label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #00175c;
	font-weight: 600;
}