/*
Theme Name:  Hello Elementor Child — Lézard Noir
Theme URI:   https://lezardnoir.com
Description: Thème enfant de Hello Elementor. Checkout "Votre panier" : override du récapitulatif de commande WooCommerce (compatible Sendcloud / Mondial Relay) + styles complets du checkout intégrés ci-dessous.
Author:      Lézard Noir
Template:    hello-elementor
Version:     1.7.6
Text Domain: hello-elementor-child
*/

/* ================================================================
   LÉZARD NOIR — CSS checkout "Votre panier"  (v9)
   État consolidé et validé sur staging.
   À coller intégralement dans :
   Apparence → Personnaliser → CSS additionnel
   ----------------------------------------------------------------
   Prérequis côté thème enfant :
   - Template woocommerce/checkout/review-order.php (v1.0.2+)
     avec <colgroup> : 68px / auto / 52px / 84px
   - Filtre gettext "Votre panier" dans functions.php
   ================================================================ */

/* ============================================================
   1. TITRE "VOTRE PANIER"
   ============================================================ */
.woocommerce-checkout #order_review_heading {
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 1.5em;
	font-weight: 400;
	margin: 0 0 12px;
}

/* ============================================================
   2. TABLE — géométrie verrouillée (colgroup + layout fixed)
   ============================================================ */
.lzn-review-table {
	width: 100% !important;
	table-layout: fixed !important;
	border-collapse: collapse;
}

/* ============================================================
   3. EN-TÊTES : TITRE / QUANTITÉ / PRIX
   ============================================================ */
.lzn-review-table thead th {
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 0.7em;
	font-weight: 400;
	color: #555;
	padding: 6px 0 10px;
	border: none;
}
.lzn-review-table thead th.product-name { text-align: left; }
.lzn-review-table thead th.product-quantity { text-align: center; }
.lzn-review-table thead th.product-total {
	text-align: right;
	padding-right: 4px;
}

/* ============================================================
   4. LIGNES PRODUITS (zébrées, hauteur = vignette)
   ============================================================ */
.lzn-review-table tbody td {
	padding: 0 8px;
	border: none;
	vertical-align: middle !important;
}
.lzn-review-table tbody tr:nth-child(odd) {
	background: #f7f7f7;
}
/* Contre le background:transparent posé par le widget Pro */
.elementor-widget-woocommerce-checkout-page .woocommerce .lzn-review-table tbody tr:nth-child(odd) > td {
	background-color: #f7f7f7 !important;
}
/* Contre le padding 15px haut/bas du widget Pro */
.elementor-widget-woocommerce-checkout-page .woocommerce .lzn-review-table tbody td {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/* Vignette : portrait, ratio naturel, la ligne épouse sa hauteur */
.lzn-review-table .lzn-product-thumb {
	width: 64px !important;
	padding: 0;
}
.lzn-review-table .lzn-product-thumb img {
	max-width: 60px !important;
	width: 60px;
	height: auto !important;
	display: block;
}

/* Titre produit : gras, absorbe la largeur restante.
   Neutralise le max-width:150px du widget Pro. */
.lzn-review-table tbody td.product-name,
.elementor-widget-woocommerce-checkout-page .woocommerce .woocommerce-checkout-review-order-table .cart_item td.product-name {
	font-weight: 700 !important;
	font-size: 1.05em;
	text-align: left !important;
	width: auto !important;
	max-width: none !important;
	white-space: normal !important;
	padding-left: 12px !important;
	padding-inline-end: 8px !important;
	overflow-wrap: break-word;
}

/* Quantité et prix : colonnes compactes */
.lzn-review-table tbody td.product-quantity {
	font-weight: 700 !important;
	font-size: 1.05em;
	text-align: center;
	white-space: nowrap;
	width: 48px !important;
}
.lzn-review-table tbody td.product-total {
	font-weight: 700 !important;
	font-size: 1.05em;
	text-align: right;
	white-space: nowrap;
	width: 80px !important;
	padding-right: 4px;
}

/* ============================================================
   5. TOTAUX — tfoot en caption bas de table (pleine largeur,
   insensible aux colonnes), lignes en flex
   ============================================================ */
.lzn-review-table tfoot {
	display: table-caption !important;
	caption-side: bottom !important;
	width: 100%;
	margin-top: 4px;
	border-top: 2px solid #ddd !important;
}
.lzn-review-table tfoot tr {
	display: flex !important;
	align-items: flex-start !important;
	gap: 16px !important;
	padding: 14px 0 !important;
	border-bottom: 1px solid #eee !important;
}
.lzn-review-table tfoot tr:last-child {
	border-bottom: none !important;
}
.lzn-review-table tfoot th,
.lzn-review-table tfoot td {
	border: none !important;
	padding: 0 !important;
	font-weight: 400;
	color: #444;
}

/* Colonne des libellés : Sous-total / Expédition / Total */
.lzn-review-table tfoot th {
	flex: 0 0 90px !important;
	width: auto !important;
	text-align: left !important;
	white-space: nowrap;
}

/* Montants : calés à droite */
.lzn-review-table tfoot td {
	flex: 1 1 auto !important;
	width: auto !important;
	max-width: none !important;
	text-align: right !important;
	white-space: nowrap;
}

/* Ligne Total en gras */
.lzn-review-table tfoot tr.order-total th,
.lzn-review-table tfoot tr.order-total td {
	font-weight: 700 !important;
	color: #000;
	font-size: 1.05em;
}

/* ============================================================
   6. LIGNE EXPÉDITION — méthodes + picker Sendcloud
   ============================================================ */
.lzn-review-table tfoot tr.woocommerce-shipping-totals td {
	flex: 1 1 auto !important;
	width: auto !important;
	max-width: none !important;
	text-align: left !important;
	white-space: normal !important;
}
.lzn-review-table tfoot ul#shipping_method {
	list-style: none;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	text-align: left !important;
}

/* Chaque méthode : ligne flex "radio + libellé",
   wrap pour que le bouton relais passe dessous */
.lzn-review-table tfoot ul#shipping_method li {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: baseline;
	gap: 8px;
	width: 100% !important;
	max-width: none !important;
	white-space: normal !important;
	margin: 0 0 10px !important;
}
.lzn-review-table tfoot ul#shipping_method li input[type="radio"] {
	flex: 0 0 auto;
	position: relative;
	top: 2px;
}
/* Le libellé consomme toute la 1re ligne après la radio */
.lzn-review-table tfoot ul#shipping_method li label {
	flex: 1 1 calc(100% - 30px) !important;
	width: auto !important;
	max-width: none !important;
	white-space: normal !important;
	display: inline-block !important;
	margin: 0 !important;
}

/* Bouton "Sélectionner un point relais" : sous le libellé */
.lzn-review-table tfoot button#sendcloudshipping_service_point_select {
	flex: 0 0 auto !important;
	display: inline-block !important;
	margin: 8px 0 0 24px !important;
	font-size: 13px;
	white-space: nowrap;
}
/* Libellé du point choisi */
#sendcloudshipping_service_point_selected_label {
	flex: 0 0 100% !important;
	margin: 6px 0 0 24px !important;
	white-space: normal !important;
	font-size: 13px;
}

/* ============================================================
   7. BANDEAU "DÉJÀ CLIENT"
   Replié : le bleu épouse exactement la hauteur du hipster,
   texte centré verticalement à droite de l'image.
   Déplié : formulaire pleine largeur dessous, champs empilés,
   bouton Connexion sous les champs.
   ============================================================ */

/* Le bloc : fond bleu, aucun padding vertical */
.woocommerce-checkout .e-checkout__container .e-woocommerce-login-section {
	background: #cfe2ec !important;
	border: none;
	padding: 0 32px !important;
	margin-bottom: 32px !important;
}
/* Div de messages vide du widget : hors flux */
.e-woocommerce-login-section .elementor-woocommerce-login-messages {
	display: none !important;
}

/* Bande du haut : image absolue + texte (pas de flex,
   sinon le texte nu se fait découper en items) */
.e-woocommerce-login-section .woocommerce-form-login-toggle {
	position: relative;
	display: block !important;
	min-height: 115px;
	padding: 0 0 0 228px !important;
	margin: 0 !important;
	align-content: center;
}
.e-woocommerce-login-section .woocommerce-form-login-toggle::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 200px;
	height: 115px;
	background: url('https://lezardnoir.com/wp-content/uploads/2021/06/deja_client.png') no-repeat left center / contain;
}
.e-woocommerce-login-section .woocommerce-form-login-toggle a.e-show-login {
	display: inline !important;
	margin: 0 !important;
}

/* Déplié : intro + formulaire sous la bande */
.e-woocommerce-login-section .e-woocommerce-login-anchor {
	padding-top: 8px;
	padding-bottom: 24px;
}
.e-woocommerce-login-section .e-woocommerce-login-nudge {
	margin: 16px 0 24px !important;
	min-height: 0;
}

/* Formulaire : pleine largeur, champs empilés */
.e-woocommerce-login-section .e-login-wrap {
	display: block !important;
}
.e-woocommerce-login-section .e-login-wrap-start .form-row {
	float: none !important;
	width: 100% !important;
	margin: 0 0 16px !important;
}
.e-woocommerce-login-section .input-text {
	width: 100% !important;
	max-width: 520px;
}

/* Bouton Connexion : sous les champs, aligné à gauche */
.e-woocommerce-login-section .e-login-label {
	display: none !important;
}
.e-woocommerce-login-section .e-login-wrap-end .form-row {
	margin: 0 !important;
}
.e-woocommerce-login-section .e-woocommerce-form-login-submit {
	margin-top: 4px;
}

/* Mobile : image et bande réduites */
@media (max-width: 767px) {
	.e-woocommerce-login-section .woocommerce-form-login-toggle {
		min-height: 69px;
		padding: 0 0 0 140px !important;
	}
	.e-woocommerce-login-section .woocommerce-form-login-toggle::before {
		width: 120px;
		height: 69px;
	}
}

/* ============================================================
   8. MOBILE — colonnes resserrées sur petits écrans
   ============================================================ */
@media (max-width: 480px) {
	.lzn-review-table col:nth-child(1) { width: 52px !important; }
	.lzn-review-table col:nth-child(3) { width: 36px !important; }
	.lzn-review-table col:nth-child(4) { width: 70px !important; }
	.lzn-review-table .lzn-product-thumb img {
		width: 46px;
		max-width: 46px !important;
	}
}

/* Mention (OFFERT) sur la méthode point relais quand le franco s'applique */
.lzn-offert {
	font-weight: 700;
}

/* Mini-panier : message franco point relais */
.lzn-franco-relais {
	margin: 4px 0 16px;
	padding: 14px 16px;
	font-size: 1.05em;
	line-height: 1.45;
	background: #f5f5f5;
}

/* Bouton Sendcloud « Sélectionner un point relais » : rouge, assorti à Commander */
#sendcloudshipping_service_point_select,
#sendcloudshipping_service_point_select:focus {
	background: #c00 !important;
	border: 1px solid #c00 !important;
	color: #fff !important;
	border-radius: 0 !important;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 700;
	padding: 10px 18px !important;
	box-shadow: none !important;
}
#sendcloudshipping_service_point_select:hover {
	background: #a00 !important;
	border-color: #a00 !important;
	color: #fff !important;
}

/* Checkout : message franco point relais sous les méthodes de livraison */
.lzn-review-table tfoot tr.lzn-franco-relais-row td {
	padding: 0 0 12px !important;
	flex: 0 0 100% !important;
	width: 100% !important;
	max-width: none !important;
	white-space: normal !important;
	text-align: left !important;
}
.lzn-review-table tfoot tr.lzn-franco-relais-row .lzn-franco-relais {
	margin: 0;
}

/* Checkout : la colonne récapitulatif occupe tout l'espace restant, au lieu
   d'être dimensionnée sur son contenu. Elementor définit une grille à une seule
   colonne explicite (la 1re, réglée dans le widget) ; la 2e est implicite et
   suit grid-auto-columns, qu'on force à remplir l'espace disponible. */
.e-checkout__container {
	width: 100% !important;
	max-width: 100% !important;
	grid-auto-columns: minmax(0, 1fr) !important;
}
.e-checkout__column-end {
	min-width: 0 !important;
}
.e-checkout__column-end .e-checkout__column-inner,
.e-checkout__column-end .e-checkout__order_review,
.e-checkout__column-end #order_review,
.e-checkout__column-end .lzn-review-table {
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box;
}
/* Le bouton relais ne doit jamais imposer sa largeur */
.lzn-review-table tfoot button#sendcloudshipping_service_point_select {
	white-space: normal !important;
	max-width: calc(100% - 24px) !important;
	text-align: center;
	line-height: 1.3;
}

/* Checkout : lien « Modifier le panier » */
.lzn-edit-cart {
	margin: 0 0 12px;
	font-size: 1.15em;
	font-weight: 600;
}
.lzn-edit-cart a {
	text-decoration: underline;
}

/* Boutons d'action rouges, assortis au « Commander » du checkout :
   - panier : « Valider la commande » (WooCommerce, violet par défaut) ;
   - checkout : bouton « Commander » de PayPal Payments quand « Cartes de débit/crédit »
     est sélectionné. PayPal masque alors le bouton WooCommerce (stylé par le widget
     Elementor) et affiche le sien (.ppcp-dcc-order-button), que le widget ne stylise pas. */
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce-checkout #payment .ppcp-dcc-order-button {
	background: #c00 !important;
	border: 1px solid #c00 !important;
	color: #fff !important;
	border-radius: 0 !important;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 700;
	box-shadow: none !important;
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:focus,
.woocommerce-checkout #payment .ppcp-dcc-order-button:hover,
.woocommerce-checkout #payment .ppcp-dcc-order-button:focus {
	background: #a00 !important;
	border-color: #a00 !important;
	color: #fff !important;
}
.woocommerce-checkout #payment .ppcp-dcc-order-button {
	padding: 10px 18px !important;
}

/* Page panier : message franco point relais au-dessus de « Valider la commande » */
.woocommerce-cart .wc-proceed-to-checkout .lzn-franco-relais {
	margin: 0 0 16px;
}

/* Page panier : lien « Continuer mes achats » sous « Valider la commande » */
.woocommerce-cart .lzn-continue-shopping {
	margin: 16px 0 0;
	text-align: center;
	font-size: 1.15em;
	font-weight: 600;
}
.woocommerce-cart .lzn-continue-shopping a {
	text-decoration: underline;
}

/* Page panier : titre produit plus grand */
.woocommerce-cart table.cart td.product-name {
	font-size: 1.2em !important;
	line-height: 1.3;
}
.woocommerce-cart table.cart td.product-name a {
	font-size: inherit !important;
	font-weight: 600;
}

/* Page panier : croix de suppression plus grande (cible de clic incluse) */
.woocommerce-cart table.cart td.product-remove a.remove {
	font-size: 2em !important;
	width: 1em !important;
	height: 1em !important;
	line-height: 1 !important;
	display: inline-block;
	text-align: center;
}