/**
 * Pagina di pagamento.
 *
 * Veste il blocco Checkout di WooCommerce senza toccarne il funzionamento: si
 * agisce solo su contenitore, tipografia, colori e spaziature. Ordine dei
 * campi, validazione e logica restano di WooCommerce.
 *
 * Tutto e circoscritto a .is-easybed-checkout sul body: nessuna regola di
 * questo file puo raggiungere la landing.
 */

/* --- Contenitore ---------------------------------------------------------
 *
 * Il motivo per cui il checkout stava schiacciato nel terzo sinistro: le
 * pagine del tema vivono dentro article.c-entry, che ha max-width 720px, la
 * larghezza di lettura giusta per un testo e sbagliata per un modulo a due
 * colonne. Il blocco chiede "alignwide", ma il tema non dichiara il supporto
 * agli allineamenti larghi, quindi la richiesta non veniva raccolta.
 *
 * Il template dedicato non usa piu c-entry: qui si dichiara la larghezza
 * giusta per un checkout.
 * ---------------------------------------------------------------------- */

.is-easybed-checkout {
	background-color: var(--easybed-color-surface);
}

.l-checkout {
	max-inline-size: 1220px;
	padding-block: var(--easybed-space-7) var(--easybed-space-8);
}

/* --- Intestazione -------------------------------------------------------- */

.c-checkout__head {
	margin-block-end: var(--easybed-space-6);
}

/*
 * Il titolo della pagina era l'H1 del tema a 72px: una misura pensata per la
 * hero, sproporzionata sopra un modulo. Qui scende alla scala dei titoli di
 * sezione.
 */
.c-checkout__title {
	margin: 0;
	font-family: var(--easybed-font-heading);
	font-size: clamp(1.75rem, 3vw, 2.25rem);
	font-weight: var(--easybed-font-weight-semibold);
	line-height: 1.2;
	color: var(--easybed-color-navy-soft);
}

.c-checkout__subtitle {
	margin: var(--easybed-space-2) 0 0;
	font-size: var(--easybed-font-size-s);
	color: var(--easybed-color-text-muted);
}

/* --- Due colonne --------------------------------------------------------- */

.is-easybed-checkout .wc-block-checkout {
	max-inline-size: none;
}

@media (min-width: 64em) {
	.is-easybed-checkout .wc-block-checkout__main {
		flex: 0 1 62%;
		max-inline-size: 62%;
		padding-inline-end: 0;
	}

	.is-easybed-checkout .wc-block-checkout__sidebar {
		flex: 0 1 38%;
		max-inline-size: 38%;
	}

	.is-easybed-checkout .wc-block-checkout__form {
		padding-inline-end: var(--easybed-space-7);
	}
}

/* --- Sezioni come schede ------------------------------------------------- */

.is-easybed-checkout .wp-block-woocommerce-checkout-contact-information-block,
.is-easybed-checkout .wp-block-woocommerce-checkout-shipping-address-block,
.is-easybed-checkout .wp-block-woocommerce-checkout-billing-address-block,
.is-easybed-checkout .wp-block-woocommerce-checkout-shipping-methods-block,
.is-easybed-checkout .wp-block-woocommerce-checkout-payment-block,
.is-easybed-checkout .wp-block-woocommerce-checkout-order-note-block {
	margin-block-end: var(--easybed-space-5);
	padding: var(--easybed-space-6);
	border: 1px solid var(--easybed-cart-border);
	border-radius: 22px;
	background-color: var(--easybed-color-surface-alt);
	box-shadow: 0 4px 16px rgba(21, 57, 106, 0.04);
}

.is-easybed-checkout .wc-block-components-title,
.is-easybed-checkout .wp-block-woocommerce-checkout h2 {
	margin-block: 0 var(--easybed-space-4);
	font-family: var(--easybed-font-heading);
	font-size: 1.125rem;
	font-weight: var(--easybed-font-weight-bold);
	color: var(--easybed-color-navy-soft);
	text-transform: none;
}

/* --- Campi --------------------------------------------------------------- */

.is-easybed-checkout .wc-block-components-text-input input,
.is-easybed-checkout .wc-block-components-select select,
.is-easybed-checkout .wc-block-components-textarea,
.is-easybed-checkout .wc-block-components-combobox input {
	min-block-size: 52px;
	border-radius: 13px;
	border-color: var(--easybed-cart-border);
	background-color: var(--easybed-color-surface-alt);
	font-family: var(--easybed-font-body);
	font-size: 1rem;
	color: var(--easybed-color-text);
}

/*
 * Il focus deve restare inequivocabile: il blocco usa un bordo sottile che su
 * questi fondi chiari si perde.
 */
.is-easybed-checkout .wc-block-components-text-input input:focus,
.is-easybed-checkout .wc-block-components-select select:focus,
.is-easybed-checkout .wc-block-components-combobox input:focus,
.is-easybed-checkout .wc-block-components-textarea:focus {
	outline: var(--easybed-focus-width) solid var(--easybed-color-navy-soft);
	outline-offset: 1px;
	box-shadow: none;
}

.is-easybed-checkout .wc-block-components-checkbox__input:focus-visible,
.is-easybed-checkout .wc-block-components-radio-control__input:focus-visible,
.is-easybed-checkout a:focus-visible,
.is-easybed-checkout button:focus-visible {
	outline: var(--easybed-focus-width) solid var(--easybed-color-navy-soft);
	outline-offset: var(--easybed-focus-offset);
}

.is-easybed-checkout .wc-block-components-validation-error {
	color: var(--easybed-color-accent-hover);
}

/* --- Riepilogo ----------------------------------------------------------- */

.is-easybed-checkout .wp-block-woocommerce-checkout-order-summary-block {
	padding: var(--easybed-space-6);
	border: 1px solid var(--easybed-cart-border);
	border-radius: 22px;
	background-color: var(--easybed-color-surface-alt);
	box-shadow: 0 4px 16px rgba(21, 57, 106, 0.04);
}

@media (min-width: 64em) {
	.is-easybed-checkout .wc-block-checkout__sidebar {
		position: sticky;
		/* Sotto l'header fisso, e mai piu alto della viewport. */
		inset-block-start: calc(var(--easybed-header-height) + var(--easybed-space-4));
		max-block-size: calc(100dvh - var(--easybed-header-height) - var(--easybed-space-6));
		overflow-y: auto;
	}
}

.is-easybed-checkout .wc-block-components-order-summary-item__image {
	inline-size: 4.5rem;
	padding: var(--easybed-space-2);
	border-radius: 14px;
	background-color: var(--easybed-cart-surface-mid);
}

.is-easybed-checkout .wc-block-components-order-summary-item__image img {
	object-fit: contain;
}

.is-easybed-checkout .wc-block-components-order-summary-item__description .wc-block-components-product-name {
	font-family: var(--easybed-font-heading);
	font-size: 1rem;
	font-weight: var(--easybed-font-weight-bold);
	color: var(--easybed-color-navy-soft);
}

/*
 * La descrizione della variazione e un testo tecnico lungo ("Completa di piedi
 * cilindrici in tubo tondo, diametro 40 mm..."): nel riepilogo occupa piu
 * spazio del prodotto stesso e non aiuta a decidere nulla, perche la scelta e
 * gia stata fatta. Restano nome, misura e configurazione, che sono le sole
 * informazioni utili a controllare l'ordine.
 *
 * Nascosto anche agli screen reader: e duplicazione, non contenuto mancante.
 */
.is-easybed-checkout .wc-block-components-product-metadata__description {
	display: none;
}

.is-easybed-checkout .wc-block-components-product-details__value,
.is-easybed-checkout .wc-block-components-product-details__name {
	font-size: var(--easybed-font-size-s);
	color: var(--easybed-color-text-muted);
}

.is-easybed-checkout .wc-block-components-totals-item__label {
	color: var(--easybed-color-text-muted);
}

.is-easybed-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.is-easybed-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-family: var(--easybed-font-heading);
	font-weight: var(--easybed-font-weight-bold);
	color: var(--easybed-color-navy-soft);
}

.is-easybed-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-size: 1.75rem;
}

/* --- Metodo di spedizione ------------------------------------------------ */

.is-easybed-checkout .wc-block-components-radio-control-accordion-option,
.is-easybed-checkout .wc-block-components-radio-control__option {
	border-radius: 14px;
}

/* --- Pulsante finale ----------------------------------------------------- */

/*
 * Doppia classe: il blocco dichiara la propria altezza minima con la stessa
 * forza e i suoi fogli vengono accodati dopo quelli del tema.
 */
.is-easybed-checkout .wc-block-components-button.wc-block-components-checkout-place-order-button {
	inline-size: 100%;
	min-block-size: 60px;
	padding-block: var(--easybed-space-4);
	border-radius: var(--easybed-radius-pill);
	background-color: var(--easybed-color-accent-bright);
	color: var(--easybed-color-accent-contrast);
	font-family: var(--easybed-font-heading);
	font-size: var(--easybed-font-size-s);
	font-weight: var(--easybed-font-weight-semibold);
	letter-spacing: var(--easybed-letter-spacing-caps);
	text-transform: uppercase;
	transition: background-color var(--easybed-transition);
}

.is-easybed-checkout .wc-block-components-button.wc-block-components-checkout-place-order-button:hover:not(:disabled) {
	background-color: var(--easybed-color-accent-hover);
}

.is-easybed-checkout .wc-block-components-checkout-place-order-button:disabled {
	opacity: 0.5;
}

/* --- Collegamenti legali ------------------------------------------------- */

.c-checkout__legal {
	margin-block-start: var(--easybed-space-5);
	font-size: var(--easybed-font-size-s);
	color: var(--easybed-color-text-muted);
	text-align: center;
}

.c-checkout__legal a {
	color: var(--easybed-color-navy-soft);
}

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 63.99em) {
	/*
	 * Sotto i 1024px le due colonne diventano illeggibili: il riepilogo passa
	 * sotto il modulo invece di stringersi ancora.
	 */
	.is-easybed-checkout .wc-block-checkout__main,
	.is-easybed-checkout .wc-block-checkout__sidebar {
		flex: 1 1 100%;
		max-inline-size: 100%;
	}

	.is-easybed-checkout .wc-block-checkout__form {
		padding-inline-end: 0;
	}
}

@media (max-width: 47.99em) {
	.l-checkout {
		padding-block: var(--easybed-space-6);
	}

	/*
	 * Su telefono la miniatura si restringe: a 72px lasciava al nome del
	 * prodotto una colonna da poco piu di cento pixel, dove "Rete piazza e
	 * mezza" andava a capo tre volte.
	 */
	.is-easybed-checkout .wc-block-components-order-summary-item__image {
		inline-size: 3.25rem;
	}

	.is-easybed-checkout .wp-block-woocommerce-checkout-contact-information-block,
	.is-easybed-checkout .wp-block-woocommerce-checkout-shipping-address-block,
	.is-easybed-checkout .wp-block-woocommerce-checkout-billing-address-block,
	.is-easybed-checkout .wp-block-woocommerce-checkout-shipping-methods-block,
	.is-easybed-checkout .wp-block-woocommerce-checkout-payment-block,
	.is-easybed-checkout .wp-block-woocommerce-checkout-order-note-block,
	.is-easybed-checkout .wp-block-woocommerce-checkout-order-summary-block {
		padding: var(--easybed-space-5);
	}
}