/**
 * Mimi Orgasmic — panier et tunnel de commande.
 *
 * Le panier reste dans l'univers sombre ; la commande et la confirmation passent sur une surface
 * claire (classe `mo-surface-light`, jetons redéfinis dans main.css) : meilleure lisibilité des
 * formulaires et rendu fiable des champs de paiement (iframes Stripe / WooPayments).
 *
 * Les deux versions de WooCommerce sont prises en charge : blocs (par défaut) et codes courts classiques.
 *
 * Sommaire
 *  1. En-tête et pied de page du tunnel
 *  2. Composants des blocs Panier / Commande
 *  3. Panier (blocs)
 *  4. Commande (blocs)
 *  5. Commande classique
 *  6. Confirmation de commande
 *  7. Réassurance
 */

/* ==========================================================================
   1. En-tête et pied de page du tunnel
   ========================================================================== */

.mo-checkout-flow {
	background: var(--mo-bg);
}

.mo-checkout-header {
	border-bottom: 1px solid #2a1d24;
	background: var(--wp--preset--color--nuit, #120d10);
	color: var(--wp--preset--color--ivoire, #f5eee8);

	color-scheme: dark;
}

.mo-checkout-header__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	min-height: 68px;
}

.mo-checkout-header .mo-checkout-header__back {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--wp--preset--color--lin, #bfafb0);
	font-size: 0.8125rem;
	font-weight: 600;
	text-decoration: none;
}

.mo-checkout-header .mo-checkout-header__back:hover {
	color: var(--wp--preset--color--ivoire, #f5eee8);
}

.mo-checkout-header__back .mo-icon {
	width: 1.1rem;
	height: 1.1rem;
}

.mo-checkout-header .mo-wordmark {
	color: var(--wp--preset--color--ivoire, #f5eee8);
}

.mo-checkout-header .mo-wordmark__b {
	color: var(--wp--preset--color--rose-clair, #ff8ab4);
}

.mo-checkout-header__secure {
	display: inline-flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.5rem;
	margin: 0;
	color: var(--wp--preset--color--lin, #bfafb0);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.mo-checkout-header__secure .mo-icon {
	width: 1.1rem;
	height: 1.1rem;
	color: var(--wp--preset--color--champagne, #d9b8a0);
}

@media (max-width: 599px) {

	.mo-checkout-header__back span,
	.mo-checkout-header__secure span {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
	}
}

.mo-checkout-footer {
	padding: 2rem 0;
	border-top: 1px solid var(--mo-line);
	color: var(--mo-muted);
	font-size: 0.8125rem;
}

.mo-checkout-footer__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 2rem;
}

.mo-checkout-footer .mo-contact {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
}

.mo-checkout-footer .mo-contact a {
	color: var(--mo-text);
}

/* ==========================================================================
   2. Composants des blocs Panier / Commande
   ========================================================================== */

.wc-block-cart,
.wc-block-checkout {
	color: var(--mo-text);
	font-family: var(--mo-font-text);
}

.wc-block-components-title.wc-block-components-title,
.wc-block-components-checkout-step__title,
.wc-block-cart__totals-title {
	color: var(--mo-text);
	font-family: var(--mo-font-title);
	font-size: 1.5rem;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
}

.wc-block-cart .wc-block-cart__totals-title {
	font-family: var(--mo-font-title);
	font-size: 1.5rem !important;
	font-weight: 500;
	text-transform: none;
}

.wc-block-components-checkout-step__description,
.wc-block-components-product-metadata,
.wc-block-components-totals-item__description,
.wc-block-components-product-details {
	color: var(--mo-muted);
}

/* Boutons. */
.wc-block-components-button:not(.is-link) {
	min-height: 54px;
	border: 1px solid var(--mo-accent);
	border-radius: var(--mo-radius-pill);
	background: var(--mo-accent);
	color: var(--mo-on-accent);
	font-family: var(--mo-font-text);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.wc-block-components-button:not(.is-link):hover,
.wc-block-components-button:not(.is-link):focus {
	border-color: var(--mo-accent-strong);
	background: var(--mo-accent-strong);
	color: var(--mo-on-accent);
}

.wc-block-components-button.is-link,
.wc-block-components-totals-coupon-link {
	color: var(--mo-link);
}

/* Champs. */
.wc-block-components-text-input input[type],
.wc-block-components-form .wc-block-components-text-input input[type],
.wc-block-components-textarea,
.wc-blocks-components-select .wc-blocks-components-select__select,
.wc-block-components-combobox .wc-block-components-combobox-control input.components-combobox-control__input {
	border: 1px solid var(--mo-line) !important;
	border-radius: var(--mo-radius-s) !important;
	background-color: var(--mo-surface) !important;
	color: var(--mo-text) !important;
	font-family: var(--mo-font-text);
}

.wc-block-components-text-input input[type]:focus,
.wc-blocks-components-select .wc-blocks-components-select__select:focus,
.wc-block-components-textarea:focus {
	border-color: var(--mo-link) !important;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--mo-link) 22%, transparent) !important;
}

.wc-block-components-text-input label,
.wc-blocks-components-select .wc-blocks-components-select__label,
.wc-block-components-combobox .wc-block-components-combobox-control label {
	color: var(--mo-muted) !important;
	font-weight: 500;
}

.wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"],
.wc-block-components-radio-control__input {
	border-color: var(--mo-line);
	background-color: var(--mo-surface);
}

.wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:checked {
	border-color: var(--mo-accent);
	background-color: var(--mo-accent);
}

.wc-block-components-checkbox .wc-block-components-checkbox__mark {
	fill: var(--mo-on-accent);
}

.wc-block-components-radio-control__input:checked {
	border-color: var(--mo-accent);
}

.wc-block-components-radio-control__input:checked::before {
	background: var(--mo-accent);
}

/* Séparateurs et totaux. */
.wc-block-components-totals-wrapper,
.wc-block-components-panel,
.wc-block-cart-items,
.wc-block-cart-items .wc-block-cart-items__row,
.wc-block-components-order-summary-item {
	border-color: var(--mo-line) !important;
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-size: 1.25rem;
	font-weight: 700;
}

.wc-block-components-product-name {
	color: var(--mo-text);
	font-weight: 600;
	text-decoration: none;
}

.wc-block-components-product-badge {
	border-color: var(--mo-accent);
	border-radius: var(--mo-radius-pill);
	color: var(--mo-link);
}

.wc-block-components-sale-badge {
	background: var(--mo-accent);
	color: var(--mo-on-accent);
}

/* Quantité. */
.wc-block-components-quantity-selector {
	border-color: var(--mo-line) !important;
	border-radius: var(--mo-radius-pill) !important;
	background: var(--mo-surface);
}

.wc-block-components-quantity-selector::after {
	border: 0 !important;
}

.wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input {
	background: transparent;
	color: var(--mo-text);
	font-weight: 700;
}

.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button {
	color: var(--mo-text);
	opacity: 0.8;
}

/* Vignettes produits sur fond « écrin » : le conteneur porte le fond et isole le mélange. */
.wc-block-cart-item__image a,
.wc-block-components-order-summary-item__image {
	display: block;
	border-radius: var(--mo-radius-s);
	background: var(--mo-well);
	isolation: isolate;
}

.wc-block-cart-item__image img,
.wc-block-components-order-summary-item__image img {
	padding: 4px;
	border: 0 !important;
	mix-blend-mode: multiply;
}

.mo-well-dark .wc-block-cart-item__image img,
.mo-well-dark .wc-block-components-order-summary-item__image img {
	padding: 0;
	mix-blend-mode: normal;
}

.wc-block-components-order-summary-item__quantity {
	border-color: var(--mo-surface) !important;
	background: var(--mo-text) !important;
	color: var(--mo-bg) !important;
	box-shadow: none !important;
}

/* Notices des blocs. */
.wc-block-components-notice-banner {
	border-left-width: 3px;
}

.wc-block-components-notice-banner.is-error {
	border-left-color: var(--mo-error);
}

.wc-block-components-notice-banner.is-success {
	border-left-color: var(--mo-success);
}

.wc-block-components-notice-banner > svg {
	flex-shrink: 0;
	border-radius: var(--mo-radius-pill);
	background-color: var(--mo-link);
	fill: var(--mo-bg);
}

/* ==========================================================================
   3. Panier (blocs) — univers sombre
   ========================================================================== */

.wc-block-cart .wc-block-cart__sidebar .wc-block-components-sidebar-layout__sidebar,
.wc-block-cart .wc-block-components-sidebar {
	padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
	border: 1px solid var(--mo-line);
	border-radius: var(--mo-radius-m);
	background: var(--mo-surface);
}

.wc-block-cart-items__header {
	color: var(--mo-muted);
	font-size: 0.75rem;
	letter-spacing: 0.12em;
}

.wc-block-cart-item__remove-link {
	color: var(--mo-muted) !important;
}

.wc-block-cart-item__prices .wc-block-components-product-price__regular {
	color: var(--mo-muted);
}

.wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title {
	font-family: var(--mo-font-title);
	font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem);
}

.wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title::before {
	display: none;
}

/* ==========================================================================
   4. Commande (blocs) — surface claire
   ========================================================================== */

.mo-checkout-flow .mo-page-header--compact {
	padding-top: 2rem;
	padding-bottom: 1rem;
}

.wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block {
	border-color: var(--mo-line);
	border-radius: var(--mo-radius-m);
	background: var(--mo-surface);
}

.wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button {
	min-height: 58px;
}

.wc-block-components-checkout-return-to-cart-button {
	color: var(--mo-muted);
}

.wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option,
.wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option,
.wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control__option {
	border-color: var(--mo-line);
	background: var(--mo-surface);
}

.wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option--checked-option-highlighted,
.wc-block-components-radio-control--highlight-checked label.wc-block-components-radio-control__option--checked-option-highlighted {
	box-shadow: inset 0 0 0 1.5px var(--mo-accent) !important;
}

.wc-block-components-express-payment {
	margin-bottom: 2rem;
}

.wc-block-components-express-payment-continue-rule {
	color: var(--mo-muted);
}

/* ==========================================================================
   5. Commande classique (code court)
   ========================================================================== */

form.checkout {
	display: grid;
	gap: 2rem;
	padding-bottom: 2rem;
}

@media (min-width: 1000px) {

	form.checkout {
		grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
		column-gap: clamp(2rem, 1rem + 3vw, 4.5rem);
		align-items: start;
	}

	form.checkout > .woocommerce-NoticeGroup,
	form.checkout > .wc-block-components-notice-banner {
		grid-column: 1 / -1;
	}

	form.checkout #customer_details {
		grid-column: 1;
		grid-row: 1 / span 3;
	}

	form.checkout #order_review_heading,
	form.checkout #order_review {
		grid-column: 2;
	}

	form.checkout #order_review {
		position: sticky;
		top: 1.5rem;
	}
}

.woocommerce-checkout .col2-set {
	display: grid;
	gap: 1.5rem;
}

#ship-to-different-address {
	font-family: var(--mo-font-text);
	font-size: 1rem;
	font-weight: 600;
}

#order_review_heading,
.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
.woocommerce-additional-fields h3 {
	font-size: 1.5rem;
}

#order_review {
	padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
	border: 1px solid var(--mo-line);
	border-radius: var(--mo-radius-m);
	background: var(--mo-surface);
}

.woocommerce-checkout-review-order-table .order-total td,
.woocommerce-checkout-review-order-table .order-total th {
	font-size: 1.125rem;
	font-weight: 700;
}

#payment .wc_payment_methods {
	margin: 1.5rem 0;
	padding: 0;
	list-style: none;
}

#payment .wc_payment_method {
	padding: 1rem;
	border: 1px solid var(--mo-line);
	border-radius: var(--mo-radius-s);
}

#payment .wc_payment_method + .wc_payment_method {
	margin-top: 0.6rem;
}

#payment .wc_payment_method > label {
	display: inline;
	margin: 0;
}

#payment .payment_box {
	margin-top: 0.85rem;
	padding: 1rem;
	border-radius: var(--mo-radius-s);
	background: var(--mo-surface-2);
	color: var(--mo-muted);
	font-size: 0.875rem;
}

#payment .place-order {
	margin: 0;
}

#place_order {
	width: 100%;
	min-height: 58px;
	margin-top: 1rem;
	font-size: 0.875rem;
}

.woocommerce-terms-and-conditions-wrapper {
	font-size: 0.875rem;
}

.woocommerce-form-coupon-toggle .woocommerce-info,
.woocommerce-form-login-toggle .woocommerce-info {
	border-left-color: var(--mo-gold);
}

form.checkout_coupon,
form.woocommerce-form-login {
	margin-bottom: 2rem;
	padding: 1.5rem;
	border: 1px solid var(--mo-line);
	border-radius: var(--mo-radius-m);
	background: var(--mo-surface);
}

/* ==========================================================================
   6. Confirmation de commande
   ========================================================================== */

.woocommerce-order {
	max-width: 860px;
	margin: 0 auto;
}

.woocommerce-order h2,
.woocommerce-order-details__title,
.woocommerce-column__title {
	margin-top: 2.5rem;
	font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem);
}

.woocommerce-thankyou-order-received,
.wc-block-order-confirmation-status {
	margin: 0 0 1.5rem;
	font-family: var(--mo-font-title);
	font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem);
	line-height: 1.15;
}

ul.woocommerce-order-overview {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	margin: 0 0 2rem;
	padding: 1.25rem;
	border: 1px solid var(--mo-line);
	border-radius: var(--mo-radius-m);
	background: var(--mo-surface);
	list-style: none;
}

ul.woocommerce-order-overview li {
	color: var(--mo-muted);
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

ul.woocommerce-order-overview strong {
	display: block;
	margin-top: 0.3rem;
	color: var(--mo-text);
	font-size: 1rem;
	letter-spacing: 0;
	text-transform: none;
}

.mo-thankyou-note {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	margin: 0 0 2rem;
	padding: 1.25rem 1.5rem;
	border: 1px solid var(--mo-line);
	border-radius: var(--mo-radius-m);
	background: var(--mo-surface);
}

.mo-thankyou-note__icon {
	color: var(--mo-accent);
}

.mo-thankyou-note p {
	display: grid;
	gap: 0.2rem;
	margin: 0;
}

.mo-thankyou-note span {
	color: var(--mo-muted);
	font-size: 0.9375rem;
}

/* ==========================================================================
   7. Réassurance
   ========================================================================== */

.mo-tunnel-reassurance {
	margin-top: 2.5rem;
	padding-top: 1.75rem;
	border-top: 1px solid var(--mo-line);
}