/**
 * Pagina "Ordine ricevuto".
 *
 * Tutto e circoscritto a .is-easybed-order sul body: nessuna regola raggiunge
 * landing, carrello, checkout o footer.
 *
 * Il markup problematico di WooCommerce non viene corretto a colpi di
 * override: i template che lo producevano sono sostituiti nel tema, quindi le
 * classi .col2-set, .col-1 e .col-2 non vengono piu emesse.
 *
 * I colori vengono dai token gia in uso: nessuna palette nuova.
 */

/* --- Contenitore ---------------------------------------------------------
 *
 * Le pagine del tema vivono dentro article.c-entry, che ha max-width 720px:
 * la larghezza di lettura di un testo, non di una pagina d'ordine con card
 * affiancate. Il titolo della pagina viene nascosto perche il blocco iniziale
 * ha gia il suo H1.
 * ---------------------------------------------------------------------- */

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

.is-easybed-order .c-entry,
.is-easybed-order .c-entry__content {
	max-inline-size: none;
}

.is-easybed-order .c-entry__header {
	display: none;
}

.is-easybed-order .l-container {
	max-inline-size: 1180px;
}

/*
 * Ritmo verticale: un solo valore governa la distanza fra i blocchi, cosi non
 * si accumulano margini di provenienze diverse.
 */
.c-order {
	display: flex;
	flex-direction: column;
	gap: var(--easybed-space-5);
	padding-block: var(--easybed-space-5) var(--easybed-space-7);
}

/* --- Blocco generico ----------------------------------------------------- */

.c-order-block {
	margin: 0;
	padding: var(--easybed-space-6);
	border: 1px solid var(--easybed-cart-border);
	border-radius: 26px;
	background-color: var(--easybed-color-surface-alt);
	box-shadow: 0 6px 20px rgba(21, 57, 106, 0.04);
}

.c-order-block__title {
	margin: 0 0 var(--easybed-space-5);
	font-family: var(--easybed-font-heading);
	font-size: 1.375rem;
	font-weight: var(--easybed-font-weight-bold);
	line-height: 1.3;
	color: var(--easybed-color-navy-soft);
}

/* --- Blocco iniziale ----------------------------------------------------- */

.c-order-hero {
	display: flex;
	align-items: center;
	gap: var(--easybed-space-5);
}

.c-order-hero__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	inline-size: 4rem;
	block-size: 4rem;
	border-radius: var(--easybed-radius-pill);
	background-color: var(--easybed-color-accent-bright);
	color: var(--easybed-color-accent-contrast);
}

.c-order-hero__icon-svg {
	inline-size: 2rem;
	block-size: 2rem;
}

.c-order-hero__title {
	margin: 0;
	font-family: var(--easybed-font-heading);
	font-size: clamp(2rem, 3.4vw, 2.75rem);
	font-weight: var(--easybed-font-weight-bold);
	line-height: 1.15;
	color: var(--easybed-color-navy-soft);
}

.c-order-hero__subtitle {
	margin: var(--easybed-space-2) 0 0;
	font-size: 1.0625rem;
	color: var(--easybed-color-text-muted);
}

/*
 * Badge dello stato: sabbia e navy. Non usa il corallo, che su questa pagina
 * indica le azioni e non lo stato.
 */
.c-order-hero__badge {
	display: inline-block;
	margin: var(--easybed-space-4) 0 0;
	padding: 0.4375rem 1rem;
	border-radius: var(--easybed-radius-pill);
	background-color: var(--easybed-color-sand);
	font-size: 0.8125rem;
	font-weight: var(--easybed-font-weight-bold);
	letter-spacing: var(--easybed-letter-spacing-caps);
	text-transform: uppercase;
	color: var(--easybed-color-navy);
}

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

.c-order-facts {
	display: grid;
	gap: var(--easybed-space-4);
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

.c-order-fact {
	display: flex;
	flex-direction: column;
	gap: var(--easybed-space-2);
	padding: var(--easybed-space-5);
	border-radius: 16px;
	background-color: var(--easybed-cart-surface-low);
}

.c-order-fact__label {
	font-size: 0.75rem;
	font-weight: var(--easybed-font-weight-bold);
	letter-spacing: var(--easybed-letter-spacing-caps);
	text-transform: uppercase;
	color: var(--easybed-color-text-muted);
}

.c-order-fact__value {
	font-family: var(--easybed-font-heading);
	font-size: 1.125rem;
	font-weight: var(--easybed-font-weight-bold);
	line-height: 1.3;
	color: var(--easybed-color-navy-soft);
}

/* Un indirizzo email lungo deve andare a capo, non uscire dalla card. */
.c-order-fact__value--wrap {
	font-family: var(--easybed-font-body);
	font-size: 0.9375rem;
	overflow-wrap: anywhere;
}

.c-order-fact__value--total {
	font-size: 1.5rem;
}

/* --- Bonifico ------------------------------------------------------------ */

.c-order-bank {
	display: grid;
	gap: var(--easybed-space-6);
	background-color: var(--easybed-cart-surface-low);
	border-color: transparent;
}

@media (min-width: 64em) {
	.c-order-bank {
		grid-template-columns: 1fr 1fr;
		align-items: start;
	}

	/* Il contenuto aggiunto da estensioni occupa la riga intera. */
	.c-order-bank__extra {
		grid-column: 1 / -1;
	}
}

.c-order-bank__text {
	margin: 0;
	font-size: var(--easybed-font-size-s);
	line-height: 1.7;
	color: var(--easybed-color-text);
}

.c-order-bank__text p {
	margin: 0 0 var(--easybed-space-3);
}

.c-order-bank__text p:last-child {
	margin-block-end: 0;
}

.c-order-bank__panel {
	padding: var(--easybed-space-5);
	border-radius: 20px;
	background-color: var(--easybed-color-surface-alt);
}

.c-order-bank__subtitle {
	margin: 0 0 var(--easybed-space-4);
	font-family: var(--easybed-font-heading);
	font-size: 1rem;
	font-weight: var(--easybed-font-weight-bold);
	letter-spacing: var(--easybed-letter-spacing-caps);
	text-transform: uppercase;
	color: var(--easybed-color-text-muted);
}

.c-order-bank__list {
	margin: 0;
}

.c-order-bank__row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--easybed-space-1) var(--easybed-space-4);
	padding-block: var(--easybed-space-3);
	border-block-end: 1px solid var(--easybed-cart-border);
}

.c-order-bank__row:last-child {
	border-block-end: 0;
}

.c-order-bank__row dt {
	flex: 0 0 7rem;
	margin: 0;
	font-size: var(--easybed-font-size-s);
	color: var(--easybed-color-text-muted);
}

.c-order-bank__row dd {
	flex: 1 1 12rem;
	margin: 0;
	font-size: var(--easybed-font-size-s);
	font-weight: var(--easybed-font-weight-bold);
	color: var(--easybed-color-navy-soft);
}

/*
 * L'IBAN: monospaziato perche va letto carattere per carattere, selezionabile
 * per intero con un gesto, e libero di andare a capo invece di uscire dallo
 * schermo su telefono.
 */
.c-order-bank__iban {
	display: inline-block;
	font-family: var(--easybed-font-mono);
	font-size: 1rem;
	letter-spacing: 0.02em;
	overflow-wrap: anywhere;
	user-select: all;
}

.c-order-bank__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--easybed-space-4);
	margin: var(--easybed-space-5) 0 0;
}

.c-order-bank__copy {
	padding: 0.6875rem 1.375rem;
	border: 1px solid var(--easybed-color-navy-soft);
	border-radius: var(--easybed-radius-pill);
	background-color: transparent;
	color: var(--easybed-color-navy-soft);
	font-family: var(--easybed-font-body);
	font-size: var(--easybed-font-size-s);
	font-weight: var(--easybed-font-weight-bold);
	cursor: pointer;
	transition: background-color var(--easybed-transition), color var(--easybed-transition);
}

.c-order-bank__copy:hover {
	background-color: var(--easybed-color-navy-soft);
	color: var(--easybed-color-navy-contrast);
}

.c-order-bank__feedback {
	font-size: var(--easybed-font-size-s);
	font-weight: var(--easybed-font-weight-bold);
	color: #067a4b;
}

/* --- Righe dell'ordine --------------------------------------------------- */

.c-order-lines {
	display: flex;
	flex-direction: column;
	gap: var(--easybed-space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.c-order-line {
	display: flex;
	align-items: center;
	gap: var(--easybed-space-5);
	padding-block-end: var(--easybed-space-4);
	border-block-end: 1px solid var(--easybed-cart-border);
}

.c-order-line:last-child {
	padding-block-end: 0;
	border-block-end: 0;
}

.c-order-line__media {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	inline-size: 5.5rem;
	block-size: 5.5rem;
	padding: var(--easybed-space-2);
	border-radius: 16px;
	background-color: var(--easybed-cart-surface-low);
	overflow: hidden;
}

/* contain, non cover: la rete deve restare intera, non ritagliata. */
.c-order-line__image {
	inline-size: 100%;
	block-size: 100%;
	object-fit: contain;
}

.c-order-line__body {
	flex: 1 1 auto;
	min-inline-size: 0;
}

.c-order-line__title {
	margin: 0;
	font-family: var(--easybed-font-heading);
	font-size: 1.125rem;
	font-weight: var(--easybed-font-weight-bold);
	color: var(--easybed-color-navy-soft);
}

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

/* Puntino di separazione: decorativo, non contenuto. */
.c-order-line__meta-sep::before {
	content: "·";
	margin-inline: var(--easybed-space-2);
}

.c-order-line__figures {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: var(--easybed-space-1);
	flex: 0 0 auto;
	text-align: end;
}

.c-order-line__qty {
	font-size: var(--easybed-font-size-s);
	color: var(--easybed-color-text-muted);
}

.c-order-line__price {
	font-family: var(--easybed-font-heading);
	font-size: 1.25rem;
	font-weight: var(--easybed-font-weight-bold);
	color: var(--easybed-color-navy-soft);
	white-space: nowrap;
}

/* --- Totali -------------------------------------------------------------- */

/*
 * WooCommerce elenca il metodo di pagamento come ultima voce dei totali, dopo
 * il totale stesso. Con il totale in evidenza quella riga finiva sotto il
 * numero grande, dove sembrava una postilla. Qui il totale viene spostato in
 * fondo, cosi chiude il blocco: e il dato che si cerca per ultimo.
 */
.c-order-totals {
	display: flex;
	flex-direction: column;
	margin: var(--easybed-space-5) 0 0;
	padding-block-start: var(--easybed-space-5);
	border-block-start: 1px solid var(--easybed-cart-border);
}

.c-order-totals__row--order_total {
	order: 10;
}

.c-order-totals__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--easybed-space-4);
	margin-block-end: var(--easybed-space-3);
	font-size: var(--easybed-font-size-s);
	color: var(--easybed-color-text-muted);
}

.c-order-totals__row dt,
.c-order-totals__row dd {
	margin: 0;
}

.c-order-totals__free {
	font-weight: var(--easybed-font-weight-bold);
	color: #067a4b;
}

/* Il totale chiude il blocco: e il numero che conta. */
.c-order-totals__row--order_total {
	align-items: center;
	margin-block: var(--easybed-space-4) 0;
	padding-block-start: var(--easybed-space-4);
	border-block-start: 1px solid var(--easybed-cart-border);
}

.c-order-totals__row--order_total dt {
	font-family: var(--easybed-font-heading);
	font-size: 1.125rem;
	font-weight: var(--easybed-font-weight-bold);
	color: var(--easybed-color-navy-soft);
}

.c-order-totals__row--order_total dd {
	font-family: var(--easybed-font-heading);
	font-size: 2rem;
	font-weight: var(--easybed-font-weight-bold);
	line-height: 1;
	color: var(--easybed-color-navy-soft);
}

/* --- Indirizzi ----------------------------------------------------------- */

.c-order-addresses__grid {
	display: grid;
	gap: var(--easybed-space-4);
}

@media (min-width: 48em) {
	.c-order-addresses__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.c-order-address {
	display: flex;
	flex-direction: column;
	padding: var(--easybed-space-5);
	border-radius: 20px;
	background-color: var(--easybed-cart-surface-low);
}

.c-order-address__title {
	margin: 0 0 var(--easybed-space-3);
	font-family: var(--easybed-font-heading);
	font-size: 1rem;
	font-weight: var(--easybed-font-weight-bold);
	color: var(--easybed-color-navy-soft);
}

.c-order-address__body {
	font-style: normal;
	font-size: var(--easybed-font-size-s);
	line-height: 1.7;
	color: var(--easybed-color-text);
}

.c-order-address__row {
	display: flex;
	align-items: center;
	gap: var(--easybed-space-2);
	margin-block-start: var(--easybed-space-3);
}

.c-order-address__row a {
	color: var(--easybed-color-navy-soft);
	overflow-wrap: anywhere;
}

.c-order-address__icon {
	flex: 0 0 auto;
	inline-size: 1rem;
	block-size: 1rem;
	color: var(--easybed-color-accent-bright);
}

/* --- Azioni finali ------------------------------------------------------- */

.c-order-help {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--easybed-space-5);
	background-color: var(--easybed-color-navy);
	border-color: transparent;
}

.c-order-help__title {
	margin: 0;
	font-family: var(--easybed-font-heading);
	font-size: 1.375rem;
	font-weight: var(--easybed-font-weight-bold);
	color: var(--easybed-color-navy-contrast);
}

.c-order-help__text {
	margin: var(--easybed-space-2) 0 0;
	font-size: var(--easybed-font-size-s);
	color: var(--easybed-color-on-navy-muted);
}

.c-order-help__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--easybed-space-3);
}

.c-order-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 1rem 2rem;
	border-radius: var(--easybed-radius-pill);
	font-family: var(--easybed-font-heading);
	font-size: var(--easybed-font-size-s);
	font-weight: var(--easybed-font-weight-semibold);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--easybed-transition), color var(--easybed-transition);
}

.c-order-cta--primary {
	background-color: var(--easybed-color-accent-bright);
	color: var(--easybed-color-accent-contrast);
}

.c-order-cta--primary:hover {
	background-color: var(--easybed-color-accent-hover);
}

.c-order-cta--ghost {
	border: 1px solid var(--easybed-color-navy-contrast);
	color: var(--easybed-color-navy-contrast);
}

.c-order-cta--ghost:hover {
	background-color: var(--easybed-color-navy-contrast);
	color: var(--easybed-color-navy);
}

.c-order-failed {
	background-color: rgba(233, 69, 63, 0.06);
}

/* --- Focus --------------------------------------------------------------- */

.is-easybed-order a:focus-visible,
.is-easybed-order button:focus-visible {
	outline: var(--easybed-focus-width) solid var(--easybed-color-navy-soft);
	outline-offset: var(--easybed-focus-offset);
}

/* Sul fondo navy l'outline navy sarebbe invisibile. */
.c-order-help a:focus-visible {
	outline-color: var(--easybed-color-navy-contrast);
}

/* --- Tablet e telefono --------------------------------------------------- */

@media (max-width: 63.99em) {
	.c-order-help {
		align-items: flex-start;
	}
}

@media (max-width: 47.99em) {
	.c-order-block {
		padding: var(--easybed-space-5);
	}

	.c-order-hero {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--easybed-space-4);
	}

	/*
	 * La riga d'ordine passa a due righe: immagine e testo sopra, quantita e
	 * prezzo sotto. Su 375px tre colonne lascerebbero al nome una colonna da
	 * poche decine di pixel.
	 */
	.c-order-line {
		flex-wrap: wrap;
		gap: var(--easybed-space-4);
	}

	.c-order-line__figures {
		flex: 1 1 100%;
		flex-direction: row;
		align-items: baseline;
		justify-content: space-between;
	}

	.c-order-help__actions,
	.c-order-cta {
		inline-size: 100%;
	}
}