/* AOD COD Form — style « checkout Shopify » (RTL-aware)
   Neutres + labels flottants + bouton sombre, dans l'esprit du checkout Shopify. */
.aod-cod {
	--sh-text: #1a1a1a;
	--sh-text-2: #616161;
	--sh-muted: #8a8a8a;
	--sh-line: #d9d9d9;
	--sh-line-strong: #1a1a1a;
	--sh-bg: #ffffff;
	--sh-bg-sub: #f6f6f7;
	--sh-accent: #008060;     /* vert Shopify : focus / sélection / bouton */
	--sh-accent-dark: #006e52;/* survol du bouton */
	--sh-green: #008060;      /* vert Shopify (validations) */
	--sh-error: #d72c0d;
	--sh-radius: 8px;
	--sh-radius-sm: 6px;

	margin: 24px 0;
	padding: 24px;
	border: 1px solid #e1e3e5;
	border-radius: 12px;
	background: var(--sh-bg);
	max-width: 560px;
	color: var(--sh-text);
	box-sizing: border-box;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
}

/* Titre */
.aod-cod__title {
	margin: 0 0 18px;
	font-size: 1.25em;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -.01em;
	color: var(--sh-text);
}

/* ---- Champs ---- */
.aod-cod__field { margin-bottom: 14px; }

/* Libellés de section (variantes, mode de livraison) : titre au-dessus */
.aod-cod__field:not(.aod-cod__float) > label {
	display: block;
	margin-bottom: 8px;
	font-weight: 500;
	font-size: .92em;
	color: var(--sh-text);
}
.aod-cod__field > label span { color: var(--sh-error); }

.aod-cod__form input[type="text"],
.aod-cod__form input[type="tel"],
.aod-cod__form input[type="number"],
.aod-cod__form select {
	width: 100%;
	padding: 12px 13px;
	border: 1px solid var(--sh-muted);
	border-radius: var(--sh-radius-sm);
	font-size: 1em;
	line-height: 1.4;
	box-sizing: border-box;
	background: #fff;
	color: var(--sh-text);
	transition: border-color .12s, box-shadow .12s;
	-webkit-appearance: none;
	appearance: none;
}
.aod-cod__form input:hover,
.aod-cod__form select:hover { border-color: #616161; }

/* Focus « Shopify » : bordure verte doublée d'un anneau fin */
.aod-cod__form input:focus,
.aod-cod__form select:focus {
	outline: none;
	border-color: var(--sh-accent);
	box-shadow: 0 0 0 1px var(--sh-accent);
}
.aod-cod__form input::placeholder { color: transparent; } /* labels flottants */

/* Flèche personnalisée pour les selects */
.aod-cod__form select {
	min-height: 52px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%238a8a8a' d='M6 8 0 2 1.4.6 6 5.2 10.6.6 12 2z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 13px center;
	padding-right: 38px;
}
.rtl .aod-cod__form select {
	background-position: left 13px center;
	padding-right: 13px;
	padding-left: 38px;
}
.aod-cod__form select:disabled { background-color: var(--sh-bg-sub); color: #9ca3af; cursor: not-allowed; }

/* ---- Labels flottants (signature Shopify) ---- */
.aod-cod__float { position: relative; }
.aod-cod__float > input,
.aod-cod__float > select {
	height: 56px;
	padding-top: 24px;
	padding-bottom: 6px;
	line-height: 1.2;
}
.aod-cod__float > label {
	position: absolute;
	inset-inline-start: 14px;
	/* Repos : centré verticalement (robuste quelle que soit la hauteur de
	   glyphes, ex. arabe) — pas de chevauchement avec la valeur saisie. */
	top: 50%;
	transform: translateY(-50%);
	margin: 0;
	font-size: 1em;
	line-height: 1;
	font-weight: 400;
	color: var(--sh-text-2);
	background: transparent;
	pointer-events: none;
	transition: top .12s ease, transform .12s ease, font-size .12s ease, color .12s ease;
	max-width: calc(100% - 40px);
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
/* État « flottant » : focus, champ rempli, ou select (toujours).
   Épinglé en haut (line-height:1) avec une marge nette sous le label, le
   texte/la sélection occupant le bas du champ (padding-top:24px). */
.aod-cod__float > input:focus + label,
.aod-cod__float > input:not(:placeholder-shown) + label,
.aod-cod__float--sel > select + label {
	top: 9px;
	transform: translateY(0);
	font-size: .72em;
	color: var(--sh-text-2);
}

/* ---- Quantité : stepper − / + ---- */
.aod-cod__stepper {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--sh-muted);
	border-radius: var(--sh-radius-sm);
	overflow: hidden;
	background: #fff;
	transition: border-color .12s, box-shadow .12s;
}
.aod-cod__stepper:focus-within {
	border-color: var(--sh-accent);
	box-shadow: 0 0 0 1px var(--sh-accent);
}
.aod-cod__step {
	flex: 0 0 auto;
	width: 46px;
	border: 0;
	background: var(--sh-bg-sub);
	color: var(--sh-text);
	font-size: 1.35em;
	line-height: 1;
	font-weight: 500;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background .12s, color .12s;
	user-select: none;
}
.aod-cod__step:hover { background: var(--sh-accent); color: #fff; }
.aod-cod__step:active { background: var(--sh-accent-dark); color: #fff; }
.aod-cod__step:focus-visible { outline: 2px solid var(--sh-accent); outline-offset: -2px; }
/* L'input du stepper : pas de bordure propre (le conteneur la porte), centré,
   sans les flèches natives. On surcharge le style générique des number. */
.aod-cod__stepper input[type="number"] {
	width: 64px;
	border: 0;
	border-inline: 1px solid var(--sh-line);
	border-radius: 0;
	text-align: center;
	padding: 12px 4px;
	font-weight: 600;
	-moz-appearance: textfield;
}
.aod-cod__stepper input[type="number"]:focus { box-shadow: none; border-color: var(--sh-line); }
.aod-cod__stepper input[type="number"]::-webkit-outer-spin-button,
.aod-cod__stepper input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Wilaya / Commune : pleine largeur, l'un sous l'autre (noms longs AR) */
.aod-cod__row { display: block; }
.aod-cod__row .aod-cod__field { width: 100%; }

/* ---- Mode de livraison : lignes de sélection style Shopify ---- */
.aod-cod__radios { display: flex; flex-direction: row; gap: 0; border: 1px solid var(--sh-line); border-radius: var(--sh-radius-sm); overflow: hidden; }
.aod-cod__radio { cursor: pointer; margin: 0; flex: 1 1 0; min-width: 0; }
.aod-cod__radio + .aod-cod__radio .aod-cod__radio-card { border-inline-start: 1px solid var(--sh-line); }
.aod-cod__radio input { position: absolute; opacity: 0; width: 0; height: 0; }
.aod-cod__radio-card {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 12px;
	height: 100%;
	background: #fff;
	transition: background .12s;
}
/* Très petits écrans : on repasse les deux modes l'un sous l'autre. */
@media (max-width: 360px) {
	.aod-cod__radios { flex-direction: column; }
	.aod-cod__radio + .aod-cod__radio .aod-cod__radio-card { border-inline-start: 0; border-top: 1px solid var(--sh-line); }
}
/* Pastille radio dessinée (à gauche) */
.aod-cod__radio-card::before {
	content: "";
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 1px solid var(--sh-muted);
	background: #fff;
	transition: border-color .12s, box-shadow .12s;
}
.aod-cod__radio-icon { font-size: 1.15em; line-height: 1; }
.aod-cod__radio-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.aod-cod__radio-title { font-weight: 500; font-size: .95em; color: var(--sh-text); }
.aod-cod__radio-price { font-size: .9em; font-weight: 600; color: var(--sh-text); margin-inline-start: auto; }
.aod-cod__radio-price:empty::before { content: "—"; color: var(--sh-muted); font-weight: 400; }

.aod-cod__radio input:checked + .aod-cod__radio-card { background: var(--sh-bg-sub); }
.aod-cod__radio input:checked + .aod-cod__radio-card::before {
	border-color: var(--sh-accent);
	box-shadow: inset 0 0 0 4px var(--sh-accent);
}
.aod-cod__radio input:focus-visible + .aod-cod__radio-card::before {
	box-shadow: 0 0 0 2px rgba(0, 128, 96, .25);
}

/* ---- Récapitulatif ---- */
.aod-cod__summary {
	margin: 20px 0;
	padding: 16px 0 0;
	border-top: 1px solid var(--sh-line);
}
.aod-cod__summary > div {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	padding: 5px 0;
	font-size: .95em;
	color: var(--sh-text-2);
}
.aod-cod__summary > div strong { color: var(--sh-text); font-weight: 500; }
.aod-cod__grand {
	margin-top: 8px;
	padding-top: 12px !important;
	border-top: 1px solid var(--sh-line);
	font-size: 1em !important;
	color: var(--sh-text) !important;
}
.aod-cod__grand > span { font-weight: 500; }
.aod-cod__grand strong { font-size: 1.35em; font-weight: 600 !important; color: var(--sh-text) !important; }

/* ---- Bouton « Confirmer » (Pay-now Shopify : sombre, pleine largeur) ---- */
.aod-cod__submit,
.aod-cod__submit.button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 16px;
	font-size: 1.02em;
	font-weight: 600;
	border: none;
	border-radius: var(--sh-radius);
	background: var(--sh-accent);
	color: #fff !important;
	cursor: pointer;
	transition: background .12s, transform .05s, opacity .12s;
}
.aod-cod__submit:hover { background: var(--sh-accent-dark); }
.aod-cod__submit:active { transform: translateY(1px); }
.aod-cod__submit[disabled] { opacity: .55; cursor: not-allowed; }

/* ---- Réassurance ---- */
.aod-cod__reassure {
	margin: 14px 0 0;
	text-align: center;
	font-size: .82em;
	color: var(--sh-text-2);
	line-height: 1.5;
}

/* ---- Messages ---- */
.aod-cod__msg { margin: 12px 0 0; text-align: center; font-weight: 500; font-size: .92em; }
.aod-cod__msg:empty { margin: 0; }
.aod-cod__msg.is-error {
	color: var(--sh-error);
	background: #fff1f0;
	border: 1px solid #f8c9c4;
	border-radius: var(--sh-radius-sm);
	padding: 11px 13px;
}
.aod-cod__msg.is-success {
	color: var(--sh-green);
	background: #f0faf6;
	border: 1px solid #b9e3d4;
	border-radius: var(--sh-radius-sm);
	padding: 11px 13px;
}

/* ---- Panneau de remerciement (après commande validée) ---- */
.aod-cod__done {
	text-align: center;
	padding: 28px 20px;
	background: #f0faf6;
	border: 1px solid #b9e3d4;
	border-radius: var(--sh-radius);
	animation: aod-done-in .35s ease;
}
.aod-cod__done-ic {
	width: 56px;
	height: 56px;
	margin: 0 auto 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 30px;
	line-height: 1;
	color: #fff;
	background: var(--sh-green);
	border-radius: 50%;
}
.aod-cod__done-title { margin: 0 0 6px; font-size: 1.15em; font-weight: 700; color: #14784f; }
.aod-cod__done-order { margin: 0 0 4px; font-weight: 600; color: var(--sh-green); }
.aod-cod__done-sub { margin: 0; color: #4b5563; font-size: .95em; }
@keyframes aod-done-in {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: none; }
}

/* ---- Incitation livraison gratuite ---- */
.aod-cod__free-hint {
	margin: 10px 0 0;
	padding: 9px 12px;
	text-align: center;
	font-size: .85em;
	font-weight: 500;
	color: var(--sh-green);
	background: #f0faf6;
	border: 1px solid #b9e3d4;
	border-radius: var(--sh-radius-sm);
}
.aod-cod__free-hint[hidden] { display: none; }
.aod-cod__radio-price s { opacity: .55; font-weight: 400; margin-inline-end: 4px; }

/* RTL : WordPress ajoute la classe .rtl au <body> pour l'arabe */
.rtl .aod-cod__summary > div { flex-direction: row-reverse; }

@media (max-width: 480px) {
	.aod-cod { padding: 18px; }
}

/* ---- Arguments de vente ---- */
.aod-cod__points{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-direction:column;gap:6px}
.aod-cod__points li{position:relative;padding-inline-start:26px;font-size:14px;color:var(--sh-text)}
.aod-cod__points li::before{content:"✓";position:absolute;inset-inline-start:0;color:var(--sh-green);font-weight:700}

/* ---- Contenu d'un pack assortiment ---- */
.aod-cod__pack{background:var(--sh-bg-sub);border:1px solid #e1e3e5;border-radius:var(--sh-radius-sm);padding:12px 14px;margin:0 0 16px}
.aod-cod__pack-label{display:block;font-size:12.5px;font-weight:600;color:var(--sh-text-2);margin-bottom:5px}
.aod-cod__pack-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px}
.aod-cod__pack-list li{font-size:14px;color:var(--sh-text)}
.aod-cod__pack-qty{font-weight:600;color:var(--sh-text)}

/* ---- Cartes d'offres (1 produit, 2 produits…) ---- */
.aod-cod__offers{display:flex;flex-direction:column;gap:7px;margin:0 0 14px}
/* La carte est un conteneur : en-tête cliquable + panneau de variantes imbriqué. */
.aod-cod__offer-card{
	position:relative;
	border:1.5px solid var(--sh-line);border-radius:var(--sh-radius-sm);background:#fff;
	transition:border-color .12s,box-shadow .12s;overflow:hidden;
}
.aod-cod__offer-card:hover{border-color:var(--sh-line-strong)}
.aod-cod__offer-card.is-selected{border-color:var(--sh-accent);box-shadow:0 0 0 1px var(--sh-accent)}
/* Différenciation des offres : liseré couleur à gauche (survit à l'état sélectionné). */
.aod-cod__offer-card::before{
	content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
	background:var(--aod-c,transparent);z-index:1;pointer-events:none;
}
.rtl .aod-cod__offer-card::before{left:auto;right:0}
/* En-tête cliquable de la carte (rangée titre / prix / coche). */
.aod-cod__offer-head{
	display:flex;align-items:center;gap:9px;margin:0;padding:8px 12px;cursor:pointer;
}
.aod-cod__offer-card.is-selected .aod-cod__offer-head{background:var(--sh-bg-sub)}
.aod-cod__offer-card input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.aod-cod__offer-body{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.aod-cod__offer-title{font-size:13.5px;font-weight:700;color:var(--aod-c,var(--sh-text))}
.aod-cod__offer-badge{
	align-self:flex-start;font-size:10.5px;font-weight:700;color:#fff;background:var(--sh-green,#16a34a);
	border-radius:999px;padding:1px 7px;
}
.aod-cod__offer-price{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.aod-cod__offer-now{font-size:14px;font-weight:700;color:var(--sh-accent)}
.aod-cod__offer-old{font-size:12px;color:var(--sh-text-2)}
/* Pastille « cochée » à droite de l'en-tête. */
.aod-cod__offer-check{
	flex-shrink:0;width:18px;height:18px;border-radius:50%;border:2px solid var(--sh-line-strong);
	background:#fff;transition:.12s;position:relative;
}
.aod-cod__offer-card.is-selected .aod-cod__offer-check{border-color:var(--sh-accent);background:var(--sh-accent)}
.aod-cod__offer-card.is-selected .aod-cod__offer-check::after{
	content:"";position:absolute;inset:0;margin:auto;width:5px;height:9px;
	border:solid #fff;border-width:0 2px 2px 0;transform:translateY(-1px) rotate(45deg);
}

/* ---- Panneau de variantes, déplié À L'INTÉRIEUR de la carte sélectionnée ---- */
.aod-cod__offer-panel{padding:10px 12px;border-top:1px solid var(--sh-line)}
.aod-cod__offer-panel[hidden]{display:none}
.aod-cod__unit{
	border:1px solid var(--sh-line);border-radius:var(--sh-radius-sm);
	/* Différenciation des articles : bordure de départ épaisse et colorée. */
	border-inline-start:3px solid var(--aod-c,var(--sh-line));
	background:#fff;padding:10px 12px;margin:0 0 8px;
}
.aod-cod__unit:last-child{margin-bottom:0}
.aod-cod__unit-head{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--aod-c,var(--sh-text));margin:0 0 9px}
/* Pastille de couleur de l'article devant son libellé. */
.aod-cod__unit-head::before{content:"";flex-shrink:0;width:8px;height:8px;border-radius:50%;background:var(--aod-c,var(--sh-text))}
.aod-cod__unit .aod-cod__optsec:last-child{margin-bottom:0}

/* ---- Sections d'options (Taille, Couleur, Pointure…) — style Shopify ---- */
.aod-cod__optsec{margin-bottom:12px}
.aod-cod__optlabel{display:block;font-size:12px;font-weight:600;color:var(--sh-text);margin:0 0 6px}
.aod-cod__optlabel span{color:var(--sh-error)}
.aod-cod__opts{display:flex;flex-wrap:wrap;gap:6px}
/* La case radio reste accessible mais invisible (la carte fait le rendu). */
.aod-cod__opt{position:relative;display:inline-flex;margin:0;cursor:pointer}
.aod-cod__opt input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.aod-cod__opt-card{
	display:flex;align-items:center;justify-content:center;gap:5px;
	min-width:36px;min-height:32px;padding:5px 10px;
	border:1px solid var(--sh-line);border-radius:var(--sh-radius-sm);background:#fff;
	font-size:12.5px;font-weight:500;color:var(--sh-text);text-align:center;transition:.12s;
}
.aod-cod__opt:hover .aod-cod__opt-card{border-color:var(--sh-line-strong)}
.aod-cod__opt input:checked + .aod-cod__opt-card{
	border-color:var(--sh-accent);box-shadow:0 0 0 1px var(--sh-accent);background:var(--sh-bg-sub);
}
.aod-cod__opt input:focus-visible + .aod-cod__opt-card{box-shadow:0 0 0 2px rgba(0,128,96,.25)}
.aod-cod__opt-name{line-height:1.2}
.aod-cod__opt-plus{font-size:11px;color:var(--sh-accent);font-weight:600}
/* Valeurs « avec photo » : pastille verticale (vignette + nom). */
.aod-cod__opt--visual .aod-cod__opt-card{flex-direction:column;gap:5px;min-width:60px;padding:6px}
.aod-cod__opt-thumb{
	width:52px;height:52px;border-radius:6px;background-size:cover;background-position:center;
	border:1px solid var(--sh-line);
}
/* Pastille de couleur prédéfinie (pas de photo) : on affiche la vraie couleur. */
.aod-cod__opt-thumb--color{box-shadow:inset 0 0 0 2px #fff;border-color:rgba(0,0,0,.18)}
/* Couleur sans photo : carte compacte en ligne (petit point rond + nom),
   au lieu de la grande vignette verticale des valeurs avec photo. */
.aod-cod__opt--color .aod-cod__opt-card{flex-direction:row;min-width:0;padding:5px 9px;gap:6px}
.aod-cod__opt--color .aod-cod__opt-thumb{width:16px;height:16px;border-radius:50%}

/* ---- Message d'erreur de configuration (variante manquante) ---- */
.aod-cod__config-msg{margin:8px 0 12px;font-size:12.5px;color:var(--sh-error);min-height:0}
.aod-cod__config-msg:empty{display:none}

/* ---- Flèches de navigation ‹ › superposées sur la galerie produit ---- */
.woocommerce-product-gallery .aod-gallery-nav{
	position:absolute;top:50%;transform:translateY(-50%);z-index:99;
	display:flex;align-items:center;justify-content:center;
	width:40px;height:40px;padding:0;margin:0;
	border:1px solid rgba(0,0,0,.08);border-radius:50%;
	background:rgba(255,255,255,.9);color:#1a1a1a;
	font-size:24px;line-height:1;cursor:pointer;
	box-shadow:0 1px 4px rgba(0,0,0,.18);
	transition:background .12s, transform .05s, box-shadow .12s;
	-webkit-appearance:none;appearance:none;
}
.woocommerce-product-gallery .aod-gallery-nav:hover{background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.woocommerce-product-gallery .aod-gallery-nav:active{transform:translateY(-50%) scale(.94)}
.woocommerce-product-gallery .aod-gallery-nav:focus-visible{outline:2px solid var(--sh-accent,#008060);outline-offset:2px}
.woocommerce-product-gallery .aod-gallery-nav--prev{left:12px}
.woocommerce-product-gallery .aod-gallery-nav--next{right:12px}
/* RTL : on inverse les positions pour garder ‹ = précédent côté logique. */
.rtl .woocommerce-product-gallery .aod-gallery-nav--prev{left:auto;right:12px}
.rtl .woocommerce-product-gallery .aod-gallery-nav--next{right:auto;left:12px}