/* ==========================================================================
   PAGINA CHECKOUT — LearnPress
   Caricato solo sulla pagina di checkout (learn_press_is_checkout(), vedi
   inc/learnpress.php). Il markup è quello nativo del plugin — nessun
   template copiato — LearnPress lo costruisce a due colonne con float
   vecchio stile: qui restano float (cambiarli con flex/grid avrebbe voluto
   dire toccare anche l'ordine DOM, rischioso su una pagina di pagamento),
   ma la spaziatura e i colori sono i nostri.

   0. Token
   1. Struttura: titolo, due colonne
   2. Chi sei: accesso effettuato / login / registrazione
   3. Nota per il docente
   4. Pagamento
   5. Bottone e termini
   6. Riepilogo dell'ordine (colonna destra)
   7. Responsive
   ========================================================================== */

/* 0. Token ================================================================ */
.learnpress-checkout {
	--dzk-nero:    #000000;
	--dzk-testo:   #111111;
	--dzk-muto:    #6b6b6b;
	--dzk-bordo:   #e2e2e2;
	--dzk-grigio:  #f4f4f4;
	--dzk-bianco:  #ffffff;
	--dzk-errore:  #b32d2e;

	--lp-primary-color: var(--dzk-nero);
	--lp-border-color:  var(--dzk-bordo);
	--lp-border-radius: 0;

	background: var(--dzk-bianco);
	color: var(--dzk-testo);
	font-family: var(--dz-font-testo, inherit);
}

.learnpress-checkout img,
.learnpress-checkout input,
.learnpress-checkout button,
.learnpress-checkout .lp-button,
.learnpress-checkout #checkout-order .lp-checkout-order__inner {
	border-radius: 0;
}

.learnpress-checkout a {
	color: var(--dzk-nero);
}

/* 1. Struttura: titolo, due colonne ======================================== */
.learnpress-checkout h1.lp-content-area {
	margin: clamp(2rem, 5vw, 3.5rem) auto 0.5rem;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--dzk-nero);
	color: var(--dzk-nero);
	font-family: var(--dz-font-titoli, inherit);
	font-size: clamp(1.875rem, 4vw, 2.75rem);
	font-weight: 400;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.learnpress-checkout .learn-press-breadcrumb {
	color: var(--dzk-muto);
	font-family: var(--dz-font-ui, inherit);
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.learnpress-checkout .learn-press-breadcrumb a {
	color: var(--dzk-muto);
}

.learnpress-checkout .learn-press-breadcrumb a:hover {
	color: var(--dzk-nero);
}

#learn-press-checkout.lp-content-area {
	padding-bottom: clamp(3rem, 6vw, 5rem);
}

.lp-checkout-form {
	margin-top: clamp(2rem, 4vw, 3rem);
}

/* ATTENZIONE se tocchi questo blocco: le due colonne sono ancora il float
   di LearnPress, non flex o grid — .lp-checkout-form__before/__after hanno
   width: calc(50% - 30px) e margin: 0 15px 40px 15px scritti nel plugin,
   pensati apposta perché 30px di margine (15px per lato) più il 50% meno
   30px di ciascuna colonna facciano esattamente 100% in due. È la stessa
   trappola aritmetica documentata per le colonne della pagina corso — qui
   in versione float, ancora più permalosa: un margine sinistro/destro
   anche solo di un pixel diverso da 15px manda la somma oltre il 100% e la
   seconda colonna scende sotto la prima invece di stare a fianco.
   Per questo qui sotto NON tocchiamo margin-left/right (restano i 15px del
   plugin): solo margin-bottom, in forma estesa apposta perché non si possa
   toccare per sbaglio anche il resto scrivendo margin in shorthand. */
.lp-checkout-form__before,
.lp-checkout-form__after {
	margin-bottom: 2.5rem;
}

/* Un solo trattamento per i due titoli di blocco (Pagamento, Il tuo
   ordine): stesso filetto sotto usato ovunque nel sito. */
.lp-checkout-form__before .lp-checkout-block h4,
.lp-checkout-form__after .lp-checkout-block h4 {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.5rem 0.75rem;
	margin: 0 0 1.5rem;
	padding-bottom: 0.875rem;
	border-bottom: 1px solid var(--dzk-nero);
	color: var(--dzk-nero);
	font-family: var(--dz-font-titoli, inherit);
	font-size: 1.375rem;
	font-weight: 400;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

/* 2. Chi sei: accesso effettuato / login / registrazione =================== */
#checkout-account-logged-in {
	margin-bottom: 1.75rem;
	color: var(--dzk-muto);
	font-size: 0.875rem;
}

#checkout-account-logged-in a {
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

#checkout-account-register,
#checkout-account-login {
	border-bottom: 1px solid var(--dzk-bordo);
}

/* Stesso linguaggio dei campi del modale "Contatta il docente": solo
   bordo inferiore, si scurisce quando il campo è attivo. Coerenza tra i
   due unici form del sito che chiedono dati all'utente. */
.lp-checkout-form .lp-form-fields label {
	color: var(--dzk-muto);
	font-family: var(--dz-font-ui, inherit);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.lp-checkout-form .lp-form-fields input:not([type="checkbox"]) {
	padding: 0.625rem 0.125rem;
	border: 0;
	border-bottom: 1px solid var(--dzk-bordo);
	background: transparent;
	color: var(--dzk-testo);
	font-family: var(--dz-font-testo, inherit);
	font-size: 0.9375rem;
	transition: border-color 200ms ease;
}

.lp-checkout-form .lp-form-fields input:not([type="checkbox"]):focus {
	border-color: var(--dzk-nero);
}

.lp-checkout-form .lp-checkout-remember label input[type="checkbox"] {
	border: 1px solid var(--dzk-bordo);
}

.lp-checkout-form .lp-checkout-remember label input[type="checkbox"]:checked::after {
	color: var(--dzk-nero);
}

.lp-checkout-form .lp-checkout-remember a,
.lp-checkout-form .lp-guest-switch-login {
	color: var(--dzk-muto);
}

.lp-checkout-form .lp-guest-switch-login a,
.lp-checkout-form .lp-checkout-remember a {
	color: var(--dzk-nero);
	text-decoration-color: var(--dzk-bordo);
}

.lp-checkout-form .lp-checkout-remember a:hover {
	text-decoration-color: var(--dzk-nero);
}

.lp-checkout-form div.lp-guest-checkout-output {
	border: 1px solid var(--dzk-nero);
}

/* 3. Nota per il docente ==================================================== */
/* LearnPress nasconde il suo <h4> "Additional Information" via CSS: invece
   di rimetterlo, diamo al campo un'etichetta nostra, piccola e coerente con
   quelle degli altri form del sito, così il campo non resta senza contesto. */
.learn-press-checkout-comment {
	position: relative;
	margin-bottom: 2rem;
}

.learn-press-checkout-comment::before {
	content: "Nota per chi organizza il corso";
	display: block;
	margin-bottom: 0.5rem;
	color: var(--dzk-muto);
	font-family: var(--dz-font-ui, inherit);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.order-comments {
	padding: 0.875rem 1rem;
	border: 1px solid var(--dzk-bordo);
	background: transparent;
	color: var(--dzk-testo);
	font-family: var(--dz-font-testo, inherit);
	font-size: 0.9375rem;
	min-height: 110px;
	transition: border-color 200ms ease;
}

.order-comments:focus {
	outline: none;
	border-color: var(--dzk-nero);
}

.order-comments::placeholder {
	color: #a3a3a3;
}

/* 4. Pagamento ============================================================== */
#checkout-payment h4 .secure-connection {
	margin: 0;
	opacity: 1;
	color: var(--dzk-muto);
	font-family: var(--dz-font-ui, inherit);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

#checkout-payment h4 .secure-connection i {
	color: var(--dzk-muto);
}

/* Le due varianti di riga che LearnPress mette in cascata sulla stessa
   lista (#checkout-payment .lp-payment-method e #learn-press-checkout
   .payment-methods .lp-payment-method puntano allo stesso elemento):
   le riscriviamo entrambe così nessuna delle due lascia residui — lo
   sfondo grigio pieno di serie, il pallino azzurro. */
#checkout-payment .payment-methods,
#learn-press-checkout .payment-methods {
	margin: 0 0 2rem;
}

#checkout-payment .lp-payment-method,
#learn-press-checkout .payment-methods .lp-payment-method {
	margin: 0 0 0.75rem;
	border: 1px solid var(--dzk-bordo);
	transition: border-color var(--dz-transizione, 240ms ease);
}

#checkout-payment .lp-payment-method.selected,
#learn-press-checkout .payment-methods .lp-payment-method.selected {
	border-color: var(--dzk-nero);
}

/* LearnPress ha due regole diverse per questa stessa label — una con
   display:flex + align-items:center, l'altra con display:flex e basta —
   a specificità diverse: quella senza align-items vince, e senza un
   valore esplicito qui il pallino e l'eventuale logo del metodo di
   pagamento (che arriva come <img> senza dimensioni proprie, vedi sotto)
   si allineano in modo imprevedibile. display e align-items li dichiariamo
   sempre noi, non li lasciamo decidere alla cascata del plugin. */
#checkout-payment .lp-payment-method > label,
#learn-press-checkout .payment-methods .lp-payment-method > label {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1rem 1.25rem;
	background: transparent;
	color: var(--dzk-testo);
	font-family: var(--dz-font-ui, inherit);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.4;
}

#checkout-payment .lp-payment-method .gateway-input {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 0;
	border: 1px solid var(--dzk-bordo);
	background: var(--dzk-bianco);
}

#checkout-payment .lp-payment-method .gateway-input::before {
	width: 8px;
	height: 8px;
	background: var(--dzk-nero);
}

/* Il logo del gateway (es. quello del pagamento in contanti) arriva come
   <img class="gateway-icon"> senza width/height propri: senza un limite
   esplicito esce alla sua dimensione originale — che può essere molto più
   grande della riga — e in un flex senza align-items esplicito lo
   snaturerebbe stirandolo in verticale. */
#checkout-payment .lp-payment-method .gateway-icon {
	flex: 0 0 auto;
	max-height: 28px;
	width: auto;
	object-fit: contain;
}

/* Il contenuto arriva così com'è dalle impostazioni del gateway — a
   volte un <p>, a volte solo testo semplice senza tag (è il caso del
   pagamento in contanti). Il padding-top sta sul contenitore, non su un
   <p> che potrebbe non esserci. */
#checkout-payment .lp-payment-method .payment-method-form {
	padding: 1rem 1.25rem 1.25rem;
	border-top: 1px solid var(--dzk-bordo);
	background: var(--dzk-grigio);
	color: var(--dzk-muto);
	font-size: 0.875rem;
	line-height: 1.6;
}

#checkout-payment .lp-payment-method .payment-method-form p {
	margin: 0;
}

#checkout-payment .lp-payment-method .payment-method-form p + p {
	margin-top: 0.75rem;
}

/* 5. Bottone e termini ======================================================= */
#checkout-payment #checkout-order-action button {
	padding: 1.125rem 2rem;
	border: 1px solid var(--dzk-nero);
	background: var(--dzk-nero);
	color: var(--dzk-bianco);
	font-family: var(--dz-font-ui, inherit);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	transition:
		background-color var(--dz-transizione, 240ms ease),
		color var(--dz-transizione, 240ms ease);
}

#checkout-payment #checkout-order-action button:hover {
	opacity: 1;
	background: var(--dzk-bianco);
	color: var(--dzk-nero);
}

.lp-terms-and-conditions {
	margin-top: 1.25rem;
	color: var(--dzk-muto);
	font-size: 0.8125rem;
	line-height: 1.6;
}

.lp-terms-and-conditions a {
	color: var(--dzk-nero);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* 6. Riepilogo dell'ordine (colonna destra) ================================= */
#checkout-order .lp-checkout-order__inner {
	padding: 1.5rem;
	border: 1px solid var(--dzk-nero);
}

#checkout-order table {
	font-family: var(--dz-font-ui, inherit);
}

#checkout-order td,
#checkout-order th {
	padding: 1rem 0;
	border-top: 1px solid var(--dzk-bordo);
	border-bottom: 0;
}

#checkout-order .cart-item:first-child td {
	border-top: 0;
	padding-top: 0;
}

#checkout-order .course-thumbnail {
	width: 72px;
	padding: 0 1rem 0 0;
}

/* html_image() di LearnPress avvolge SEMPRE l'immagine in un
   <div class="course-img"> — qui, come in ogni pagina dove la usa. Senza
   width:100% su entrambi, l'immagine (che arriva senza attributi width/
   height propri) si prende la sua dimensione naturale: su questo corso
   è un file da 600px, che scoppiava fuori dalla cella da 72px e sfondava
   tutta la colonna dell'ordine — il vero motivo per cui il riepilogo era
   rotto, non un dettaglio di stile. */
#checkout-order .course-thumbnail .course-img {
	display: block;
	width: 100%;
}

#checkout-order .course-thumbnail img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

#checkout-order .course-name {
	color: var(--dzk-testo);
	font-size: 0.9375rem;
	font-weight: 600;
}

#checkout-order .course-name a {
	color: var(--dzk-testo);
}

#checkout-order .course-name a:hover {
	color: var(--dzk-nero);
	text-decoration: underline;
}

#checkout-order .course-quantity {
	color: var(--dzk-muto);
	font-weight: 400;
}

#checkout-order .col-number {
	color: var(--dzk-testo);
	font-weight: 600;
}

#checkout-order tfoot {
	font-size: 1rem;
}

#checkout-order tfoot th {
	font-family: var(--dz-font-ui, inherit);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

#checkout-order tfoot .cart-subtotal th,
#checkout-order tfoot .cart-subtotal td {
	color: var(--dzk-muto);
	font-size: 0.875rem;
	font-weight: 500;
	text-transform: none;
}

#checkout-order tfoot .order-total {
	border-top: 1px solid var(--dzk-nero);
}

#checkout-order tfoot .order-total th,
#checkout-order tfoot .order-total td {
	padding-top: 1.25rem;
	color: var(--dzk-nero);
	font-family: var(--dz-font-titoli, inherit);
	font-size: 1.375rem;
	font-weight: 400;
	text-transform: uppercase;
}

/* 7. Responsive =============================================================== */
@media (max-width: 815px) {
	.lp-checkout-form__before,
	.lp-checkout-form__after {
		margin-left: 0;
		margin-right: 0;
	}
}