/**
 * Bottone "Aggiungi al carrello" di WooCommerce.
 * Elemento hi-ggu-add-to-cart — vedi includes/styles/class-hi-ggu-style-add-to-cart.php
 *
 * La classe .hi-btn-add-product-to-cart va messa nella classe extra dell'elemento
 * "Add to Cart" del page builder, cioè sul contenitore. Il markup su cui lavora è:
 *
 *   div.w-post-elm.add_to_cart.qty-btn-style_0   <- qui va la classe
 *     form.cart
 *       div.quantity
 *         input.minus   (type=button, disabled quando la quantità è al minimo)
 *         input.qty     (type=number)
 *         input.plus    (type=button)
 *       button.single_add_to_cart_button.button.alt
 *
 * Se la classe viene messa direttamente su un bottone (es. nei loop prodotto) viene
 * stilato solo il bottone: il selettore quantità è un fratello, quindi per averlo
 * la classe deve stare sul contenitore.
 *
 * SPECIFICITÀ — i selettori ripetono la classe per prevalere sul CSS del tema senza
 * dipendere dall'ordine di caricamento. Servono inoltre alcuni !important, perché il
 * tema li usa a sua volta e non si possono battere altrimenti:
 *   - `color`  → Theme Options: `.woocommerce .button.alt { color:#000!important }`
 *   - `border` → tema/css/style.min.css: `button[type=submit] { border:2px solid!important }`
 * Sono gli unici due casi: tutto il resto passa per la sola specificità.
 *
 * L'aspetto si regola dalle variabili qui sotto, senza toccare le regole.
 */

/* --------------------------------------------------------------------------
 * Valori dell'elemento
 * I default richiamano la palette del tema: --color-content-primary è
 * l'arancione del sito (#ff6b00), --color-content-secondary il rosso (#ca3625).
 * ------------------------------------------------------------------------ */

.hi-btn-add-product-to-cart {

	/* Bottone */
	--hi-atc-bg: var(--color-content-primary, #ff6b00);
	--hi-atc-color: #fff;
	--hi-atc-border-color: var(--hi-atc-bg);
	--hi-atc-border-width: 2px;

	/* Bottone al passaggio del mouse */
	--hi-atc-bg-hover: var(--color-content-secondary, #ca3625);
	--hi-atc-color-hover: #fff;
	--hi-atc-border-color-hover: var(--hi-atc-bg-hover);

	/* Selettore quantità */
	--hi-atc-qty-border-color: var(--color-content-primary, #ff6b00);
	--hi-atc-qty-border-width: 2px;
	--hi-atc-qty-radius: 4px;
	--hi-atc-qty-bg: #fff;
	--hi-atc-qty-color: var(--color-content-text, #000);
	--hi-atc-qty-btn-width: 2.5em;
	--hi-atc-qty-input-width: 2.5em;

	/* Opacità dei pulsanti − / + quando sono disattivati (la quantità è al minimo
	   o al massimo). Portala a 1 per averli sempre pieni. */
	--hi-atc-qty-btn-disabled-opacity: 0.35;

	/* Misure comuni: la stessa altezza allinea bottone e selettore sulla riga.
	   2.8rem è il valore di --inputs-height delle Theme Options. */
	--hi-atc-height: 2.8rem;
	--hi-atc-radius: 0;
	--hi-atc-gap: 0.8rem;

	/* Testo del bottone: i default coincidono con le Theme Options. */
	--hi-atc-padding: 0.8em 3.2em;
	--hi-atc-font-size: 15px;
	--hi-atc-letter-spacing: 0em;

	--hi-atc-transition: 0.25s ease;
}

/* --------------------------------------------------------------------------
 * Riga: selettore quantità e bottone
 * ------------------------------------------------------------------------ */

.hi-btn-add-product-to-cart.hi-btn-add-product-to-cart > .cart {
	gap: var(--hi-atc-gap);
}

/* --------------------------------------------------------------------------
 * Bottone
 * ------------------------------------------------------------------------ */

/* La classe è sul contenitore */
.hi-btn-add-product-to-cart.hi-btn-add-product-to-cart button.button,
.hi-btn-add-product-to-cart.hi-btn-add-product-to-cart a.button,
.hi-btn-add-product-to-cart.hi-btn-add-product-to-cart input.button,
/* La classe è direttamente sul bottone */
button.hi-btn-add-product-to-cart.hi-btn-add-product-to-cart.hi-btn-add-product-to-cart,
a.hi-btn-add-product-to-cart.hi-btn-add-product-to-cart.hi-btn-add-product-to-cart,
input.hi-btn-add-product-to-cart.hi-btn-add-product-to-cart.hi-btn-add-product-to-cart {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--hi-atc-height);
	padding: var(--hi-atc-padding);
	border-style: solid !important;
	border-width: var(--hi-atc-border-width) !important;
	border-color: var(--hi-atc-border-color) !important;
	border-radius: var(--hi-atc-radius);
	background: var(--hi-atc-bg);
	color: var(--hi-atc-color) !important;
	font-size: var(--hi-atc-font-size);
	letter-spacing: var(--hi-atc-letter-spacing);
	box-shadow: none;
	transition: background-color var(--hi-atc-transition), border-color var(--hi-atc-transition), color var(--hi-atc-transition);
}

/* Il tema disegna un secondo bordo con uno pseudo-elemento sovrapposto
   (.button:before, border-color:inherit): ereditando il colore del bordo resta
   invisibile, ma azzerarlo evita qualsiasi linea di giunzione. */
.hi-btn-add-product-to-cart.hi-btn-add-product-to-cart .button::before,
button.hi-btn-add-product-to-cart.hi-btn-add-product-to-cart::before,
a.hi-btn-add-product-to-cart.hi-btn-add-product-to-cart::before {
	border-width: 0;
}

/* Tre classi nello stato hover: la regola del tema arriva a .no-touch
   button[type=submit]:not(.w-btn):hover, che a due classi pareggerebbe. */

.hi-btn-add-product-to-cart.hi-btn-add-product-to-cart.hi-btn-add-product-to-cart button.button:hover,
.hi-btn-add-product-to-cart.hi-btn-add-product-to-cart.hi-btn-add-product-to-cart button.button:focus,
.hi-btn-add-product-to-cart.hi-btn-add-product-to-cart.hi-btn-add-product-to-cart a.button:hover,
.hi-btn-add-product-to-cart.hi-btn-add-product-to-cart.hi-btn-add-product-to-cart a.button:focus,
.hi-btn-add-product-to-cart.hi-btn-add-product-to-cart.hi-btn-add-product-to-cart input.button:hover,
.hi-btn-add-product-to-cart.hi-btn-add-product-to-cart.hi-btn-add-product-to-cart input.button:focus,
button.hi-btn-add-product-to-cart.hi-btn-add-product-to-cart.hi-btn-add-product-to-cart:hover,
button.hi-btn-add-product-to-cart.hi-btn-add-product-to-cart.hi-btn-add-product-to-cart:focus,
a.hi-btn-add-product-to-cart.hi-btn-add-product-to-cart.hi-btn-add-product-to-cart:hover,
a.hi-btn-add-product-to-cart.hi-btn-add-product-to-cart.hi-btn-add-product-to-cart:focus,
input.hi-btn-add-product-to-cart.hi-btn-add-product-to-cart.hi-btn-add-product-to-cart:hover,
input.hi-btn-add-product-to-cart.hi-btn-add-product-to-cart.hi-btn-add-product-to-cart:focus {
	background: var(--hi-atc-bg-hover);
	border-color: var(--hi-atc-border-color-hover) !important;
	color: var(--hi-atc-color-hover) !important;
	box-shadow: none;
}

/* Il contorno del focus da tastiera del tema è arancione: sul bottone arancione
   non si vedrebbe, quindi qui prende il colore del testo. */
.hi-btn-add-product-to-cart.hi-btn-add-product-to-cart .button:focus-visible,
button.hi-btn-add-product-to-cart.hi-btn-add-product-to-cart:focus-visible,
a.hi-btn-add-product-to-cart.hi-btn-add-product-to-cart:focus-visible {
	outline-color: var(--hi-atc-color);
}

.hi-btn-add-product-to-cart.hi-btn-add-product-to-cart .button.loading,
.hi-btn-add-product-to-cart.hi-btn-add-product-to-cart .button.disabled,
.hi-btn-add-product-to-cart.hi-btn-add-product-to-cart .button[disabled] {
	opacity: 0.6;
	pointer-events: none;
}

/* --------------------------------------------------------------------------
 * Selettore quantità
 * Il bordo sta sul contenitore .quantity e i figli restano senza bordo: così il
 * riquadro è unico, senza le linee verticali fra − , numero e +.
 * ------------------------------------------------------------------------ */

.hi-btn-add-product-to-cart.hi-btn-add-product-to-cart .quantity {
	display: flex;
	align-items: center;
	overflow: hidden;
	min-height: var(--hi-atc-height);
	border: var(--hi-atc-qty-border-width) solid var(--hi-atc-qty-border-color);
	border-radius: var(--hi-atc-qty-radius);
	background: var(--hi-atc-qty-bg);
	color: var(--hi-atc-qty-color);
}

/* Tre classi: la regola del tema che dimensiona questi campi arriva a cinque
   classi (.w-post-elm.add_to_cart:not(.qty-btn-style_0) .quantity input.qty). */
.hi-btn-add-product-to-cart.hi-btn-add-product-to-cart.hi-btn-add-product-to-cart .quantity > * {
	margin: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: inherit;
	font-size: inherit;
	text-align: center;
	min-height: 0;
	line-height: calc(var(--hi-atc-height) - 2 * var(--hi-atc-qty-border-width));
}

.hi-btn-add-product-to-cart.hi-btn-add-product-to-cart.hi-btn-add-product-to-cart .quantity input.qty {
	padding: 0;
	width: var(--hi-atc-qty-input-width);
	box-sizing: content-box;
	-moz-appearance: textfield;
}

.hi-btn-add-product-to-cart.hi-btn-add-product-to-cart .quantity input.qty::-webkit-inner-spin-button,
.hi-btn-add-product-to-cart.hi-btn-add-product-to-cart .quantity input.qty::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.hi-btn-add-product-to-cart.hi-btn-add-product-to-cart.hi-btn-add-product-to-cart .quantity input.plus,
.hi-btn-add-product-to-cart.hi-btn-add-product-to-cart.hi-btn-add-product-to-cart .quantity input.minus {
	padding: 0;
	width: var(--hi-atc-qty-btn-width);
	font-size: inherit;
	cursor: pointer;
	transition: opacity var(--hi-atc-transition);
}

.hi-btn-add-product-to-cart.hi-btn-add-product-to-cart .quantity input.plus[disabled],
.hi-btn-add-product-to-cart.hi-btn-add-product-to-cart .quantity input.minus[disabled] {
	opacity: var(--hi-atc-qty-btn-disabled-opacity);
	cursor: default;
}

/* I pulsanti − e + esistono già nel markup: l'elemento del page builder li nasconde
   quando l'opzione "Quantity buttons" è impostata su "None" (classe qty-btn-style_0).
   Qui vengono mostrati comunque, così il risultato non dipende da quell'impostazione.
   Il click è gestito da us.core.min.js con handler delegati su body, quindi funzionano
   anche mostrati da qui. Cinque classi: la regola del tema che li nasconde ne usa cinque. */
.hi-btn-add-product-to-cart.hi-btn-add-product-to-cart.hi-btn-add-product-to-cart.qty-btn-style_0 .quantity input.plus,
.hi-btn-add-product-to-cart.hi-btn-add-product-to-cart.hi-btn-add-product-to-cart.qty-btn-style_0 .quantity input.minus {
	display: block;
}

/* --------------------------------------------------------------------------
 * Link "Visualizza carrello" aggiunto da WooCommerce dopo l'aggiunta via AJAX
 * ------------------------------------------------------------------------ */

.hi-btn-add-product-to-cart .added_to_cart {
	display: inline-block;
	margin-top: 0.6em;
	text-decoration: underline;
}