/**
 * Club a 4 Zampe — token di design.
 *
 * Valori presi dal tema `understrap-child-derbe`, non inventati:
 * il verde petrolio è quello dello sfondo pagina e dei submit, la crema è la
 * superficie di checkout e carrello, i bottoni scuri sono quelli di "aggiungi
 * al carrello" e "accedi", i raggi sono gli stessi (.45rem e 6px), le etichette
 * ripetono il maiuscolo spaziato del menu.
 *
 * Sono tutti sovrascrivibili: ridefinendoli nel foglio di stile del tema si
 * cambia l'aspetto di tutti i moduli del plugin senza toccare il plugin.
 */

:root {
	/* Colori del brand. */
	--ndp-brand: #0b4d4a;
	--ndp-brand-dark: #073a37;
	--ndp-brand-soft: rgba( 11, 77, 74, 0.08 );

	/* Superfici e testo. */
	--ndp-cream: #faf8f1;
	--ndp-surface: #faf8f1;
	--ndp-page: #fff;
	--ndp-ink: #333;
	--ndp-ink-strong: #161615;
	--ndp-muted: #6b6b68;
	--ndp-line: #e3ded1;
	--ndp-line-strong: #ccc7ba;

	/* Stati. */
	--ndp-star: #c8912c;
	/*
	 * Stella vuota: non è decorazione, è un comando cliccabile. Con il grigio
	 * dei bordi stava a 1.69 contro la crema, sotto il 3:1 che le WCAG chiedono
	 * agli elementi d'interfaccia: chi guarda non capiva di poterne scegliere cinque.
	 */
	--ndp-star-empty: #8c8a83;
	--ndp-danger: #a3271f;
	--ndp-warning: #8a6212;
	--ndp-success: var( --ndp-brand );

	/* Forme: il tema è squadrato, non arrotondato. */
	--ndp-radius: 6px;
	--ndp-radius-sm: 0.45rem;
	--ndp-radius-pill: 999px;

	/* Ritmo verticale. */
	--ndp-gap-xs: 0.35rem;
	--ndp-gap-sm: 0.6rem;
	--ndp-gap: 1rem;
	--ndp-gap-lg: 1.75rem;
	--ndp-gap-xl: 2.75rem;

	/* Tipografia: si eredita quella del tema, qui solo i ruoli. */
	--ndp-display: "scotch-display", Georgia, serif;
	--ndp-label-spacing: 0.08em;
	--ndp-shadow: 0 1px 2px rgba( 0, 0, 0, 0.04 );
	--ndp-focus: 0 0 0 3px rgba( 11, 77, 74, 0.25 );
}

/*
 * Base comune ai moduli. Tutto è confinato dentro i nostri contenitori: il
 * plugin non deve cambiare l'aspetto di nulla che non sia suo.
 */

.ndp-reviews,
.ndp-review-form,
.ndp-club-box,
.ndp-rating-inline,
.ndp-loyalty,
.ndp-your-products,
.ndp-account-sidebar,
.ndp-redeem,
.ndp-coupons,
.ndp-profile-extras {
	color: var( --ndp-ink );
}

/* Titoli dei moduli: stesso carattere e stesso peso leggero del tema. */
.ndp-reviews h2,
.ndp-reviews h3,
.ndp-reviews h4,
.ndp-club-box h2,
.ndp-loyalty h2,
.ndp-loyalty h3,
.ndp-loyalty h4,
.ndp-your-products h3,
.ndp-your-products h4,
.ndp-review-form h3,
.ndp-coupons h3,
.ndp-coupons h4 {
	font-family: var( --ndp-display );
	font-weight: 300;
	letter-spacing: 0.01em;
}

/* Etichette brevi: maiuscolo spaziato, come il menu e i bottoni del tema. */
.ndp-label,
.ndp-review__badge,
.ndp-club-box__title,
.ndp-earn-card__title,
.ndp-product-list h3 {
	font-family: inherit;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: var( --ndp-label-spacing );
	text-transform: uppercase;
}

/*
 * Bottoni dentro i nostri moduli.
 *
 * Il markup continua a usare la classe `button` per restare compatibile con
 * tema e WooCommerce; qui si rifinisce solo dentro i nostri contenitori, così
 * fuori non cambia niente.
 *
 * La classe è ripetuta (`.button.button`) di proposito: WooCommerce stila i
 * propri bottoni con `.woocommerce button.button`, che ha specificità maggiore
 * di un semplice `.contenitore .button` e vincerebbe. Ripetere la classe porta
 * la nostra a tre classi e ci fa vincere senza usare `!important`.
 */

.ndp-reviews .button.button,
.ndp-review-form .button.button,
.ndp-club-box .button.button,
.ndp-loyalty .button.button,
.ndp-your-products .button.button,
.ndp-account-sidebar .button.button,
.ndp-redeem .button.button,
.ndp-coupons .button.button,
.woocommerce-account .woocommerce-MyAccount-content .button.button {
	background: var( --ndp-ink-strong );
	border: 1px solid var( --ndp-ink-strong );
	border-radius: var( --ndp-radius-sm );
	color: #fff;
	cursor: pointer;
	display: inline-block;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: var( --ndp-label-spacing );
	line-height: 1.3;
	padding: 0.7rem 1.25rem;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.ndp-reviews .button.button:hover,
.ndp-review-form .button.button:hover,
.ndp-club-box .button.button:hover,
.ndp-loyalty .button.button:hover,
.ndp-your-products .button.button:hover,
.ndp-account-sidebar .button.button:hover,
.ndp-redeem .button.button:hover,
.ndp-coupons .button.button:hover,
.woocommerce-account .woocommerce-MyAccount-content .button.button:hover {
	background: var( --ndp-brand );
	border-color: var( --ndp-brand );
	color: #fff;
}

.ndp-reviews .button.button:focus-visible,
.ndp-review-form .button.button:focus-visible,
.ndp-club-box .button.button:focus-visible,
.ndp-loyalty .button.button:focus-visible,
.ndp-your-products .button.button:focus-visible,
.ndp-redeem .button.button:focus-visible,
.ndp-coupons .button.button:focus-visible,
.woocommerce-account .woocommerce-MyAccount-content .button.button:focus-visible {
	box-shadow: var( --ndp-focus );
	outline: none;
}

/*
 * Tripla classe e `opacity`: WooCommerce vince questa battaglia con
 * `.woocommerce ... button.button:disabled[disabled]` (0,4,1) e vi mette
 * `color: inherit` più `opacity: .5`. L'inchiostro ereditato dal paragrafo e
 * l'opacità dimezzata portavano "RISCATTA" a 3,4:1: illeggibile. Ripetere la
 * classe porta la nostra regola a 0,5,0 e ci fa vincere senza `!important`.
 */
.ndp-reviews .button.button.button[disabled],
.ndp-redeem .button.button.button[disabled],
.ndp-review-form .button.button.button[disabled] {
	/*
	 * Bianco su grigio chiaro faceva 3,4:1: la soglia che un bottone disattivo
	 * non deve rispettare per legge, ma "RISCATTA" resta pur sempre una parola
	 * che si deve leggere. Fondo pallido e inchiostro scuro: legge chiaro, e la
	 * mancanza del pieno scuro lo distingue dai bottoni attivi.
	 */
	background: var( --ndp-line );
	border-color: var( --ndp-line );
	color: var( --ndp-ink );
	cursor: not-allowed;
	opacity: 1;
}

/* Variante chiara, per le azioni secondarie. */
.ndp-btn-ghost,
.ndp-coupons .ndp-coupon__copy.button,
.woocommerce-account .ndp-coupons .ndp-coupon__copy.button,
.woocommerce-account .ndp-your-products .button.button--ghost,
.ndp-your-products .button.button--ghost {
	background: transparent;
	border: 1px solid var( --ndp-ink-strong );
	color: var( --ndp-ink-strong );
}

.ndp-btn-ghost:hover,
.ndp-coupons .ndp-coupon__copy.button:hover,
.woocommerce-account .ndp-coupons .ndp-coupon__copy.button:hover,
.woocommerce-account .ndp-your-products .button.button--ghost:hover,
.ndp-your-products .button.button--ghost:hover {
	background: var( --ndp-ink-strong );
	color: #fff;
}

/* Campi: stesso fondo crema dei form del tema. */
.ndp-review-form input[type="text"],
.ndp-review-form input[type="email"],
.ndp-review-form input[type="date"],
.ndp-review-form select,
.ndp-review-form textarea,
.ndp-reviews select {
	background: var( --ndp-cream );
	border: 1px solid var( --ndp-line );
	border-radius: var( --ndp-radius-sm );
	color: var( --ndp-ink );
	font: inherit;
	padding: 0.6rem 0.75rem;
	width: 100%;
}

.ndp-review-form input:focus,
.ndp-review-form select:focus,
.ndp-review-form textarea:focus,
.ndp-reviews select:focus {
	border-color: var( --ndp-brand );
	box-shadow: var( --ndp-focus );
	outline: none;
}

/* Accessibilità: nessun contenuto raggiungibile solo col mouse. */
.ndp-reviews .screen-reader-text,
.ndp-club-box .screen-reader-text,
.ndp-loyalty .screen-reader-text,
.ndp-your-products .screen-reader-text,
.ndp-review-form .screen-reader-text {
	border: 0;
	clip-path: inset( 50% );
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

@media ( prefers-reduced-motion: reduce ) {
	.ndp-reviews *,
	.ndp-club-box *,
	.ndp-loyalty * {
		transition: none !important; /* Rispetta la preferenza di sistema: nessuna animazione. */
	}
}