/* ==========================================================
   CONFIGURATEUR CHAUSSURE GIGNOUX
   WooCommerce Composite Products, habillage style Apple
   ----------------------------------------------------------
   1.  Conteneur des options (grille 2 colonnes)
   2.  Carte d'option (radio) : repos, survol, sélection
   3.  Cercle de sélection
   4.  Texte : nom et prix
   5.  Focus clavier, effet de pression
   6.  Mobile
   7.  Masquer titre et description du produit choisi
   8.  Message de validation discret
   9.  Menu déroulant de taille (généré par configurateur.js)
   ========================================================== */


/* ---------- 1. Conteneur des options ---------- */

.composite_form ul.component_option_radio_buttons_container {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin: 16px 0;
	padding: 0;
	list-style: none;
}

.composite_form .component_option_radio_buttons_container .component_option_radio_button_container {
	margin: 0;
	padding: 0;
	list-style: none;
}


/* ---------- 2. Carte ---------- */

.composite_form .component_option_radio_buttons_container .component_option_radio_button {
	position: relative;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	width: 100%;
	min-height: 76px;
	padding: 17px 18px;
	background: #ffffff;
	border: 1px solid #d2d2d7;
	border-radius: 14px;
	color: #1d1d1f;
	cursor: pointer;
	transition:
		border-color 0.18s ease,
		box-shadow 0.18s ease,
		background-color 0.18s ease,
		transform 0.12s ease;
}

.composite_form .component_option_radio_buttons_container .component_option_radio_button:hover {
	border-color: #86868b;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* Sélectionnée : bordure 2 px, padding réduit de 1 px pour éviter tout décalage */
.composite_form .component_option_radio_buttons_container .component_option_radio_button.selected {
	border: 2px solid #1d1d1f;
	padding: 16px 17px;
	box-shadow: 0 0 0 1px rgba(29, 29, 31, 0.05);
}

.composite_form .component_option_radio_button.selected:hover {
	border-color: #1d1d1f;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
}

/* Radio natif masqué */
.composite_form .component_option_radio_button .radio_button_input {
	position: static;
	width: 0;
	height: 0;
	margin: 0;
	padding: 0;
}

.composite_form .component_option_radio_button .radio_button_input input.radio_button {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

/* Le label couvre toute la carte : toute la carte est cliquable */
.composite_form .component_option_radio_button .component_option_radio_button_select {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: block;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 14px;
	background: transparent;
	cursor: pointer;
}


/* ---------- 3. Cercle de sélection ---------- */

.composite_form .component_option_radio_button .component_option_radio_button_select::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 18px;
	width: 22px;
	height: 22px;
	box-sizing: border-box;
	transform: translateY(-50%);
	border: 1.5px solid #86868b;
	border-radius: 50%;
	background: #ffffff;
	transition:
		border-color 0.18s ease,
		background-color 0.18s ease,
		box-shadow 0.18s ease;
}

.composite_form .component_option_radio_button.selected .component_option_radio_button_select::after {
	border: 6px solid #1d1d1f;
	background: #ffffff;
}


/* ---------- 4. Texte ---------- */

.composite_form .component_option_radio_button .radio_button_description {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
	box-sizing: border-box;
	padding-right: 42px;
	pointer-events: none;
}

.composite_form .component_option_radio_button .radio_button_title {
	display: block;
	margin: 0;
	color: #1d1d1f;
	font-size: 16px;
	line-height: 1.25;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.composite_form .component_option_radio_button .radio_button_price {
	display: block;
	margin-top: 6px;
	color: #6e6e73;
	font-size: 14px;
	line-height: 1.3;
	font-weight: 400;
}

.composite_form .component_option_radio_button .radio_button_price .woocommerce-Price-amount {
	color: #1d1d1f;
	font-weight: 500;
}

.composite_form .component_option_radio_button .radio_button_price .woocommerce-price-suffix {
	color: #6e6e73;
	font-size: 12px;
	font-weight: 400;
}


/* ---------- 5. Focus clavier et pression ---------- */

.composite_form .component_option_radio_button .radio_button_input input.radio_button:focus-visible + .component_option_radio_button_select {
	outline: 2px solid #0071e3;
	outline-offset: 3px;
}

.composite_form .component_option_radio_button:active {
	transform: scale(0.99);
}


/* ---------- 6. Mobile ---------- */

@media (max-width: 600px) {

	.composite_form ul.component_option_radio_buttons_container {
		grid-template-columns: 1fr;
		gap: 10px;
		margin-top: 12px;
	}

	.composite_form .component_option_radio_button {
		min-height: 68px;
		border-radius: 12px;
		padding: 15px 16px;
	}

	.composite_form .component_option_radio_button.selected {
		padding: 14px 15px;
	}

	.composite_form .component_option_radio_button .component_option_radio_button_select {
		border-radius: 12px;
	}

	.composite_form .component_option_radio_button .component_option_radio_button_select::after {
		right: 16px;
		width: 20px;
		height: 20px;
	}

	.composite_form .component_option_radio_button .radio_button_description {
		padding-right: 36px;
	}

	.composite_form .component_option_radio_button .radio_button_title {
		font-size: 15px;
	}

	.composite_form .component_option_radio_button .radio_button_price {
		font-size: 13px;
	}
}


/* ---------- 7. Tous les composants : masquer le titre et la description
        du produit choisi, mais garder la photo et la taille ---------- */

.composite_form .composited_product_title_wrapper {
	display: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.composite_form .component_data > p {
	display: none !important;
}


/* ---------- 8. Message de validation discret ---------- */

.composite_form .validation_message {
	margin: 8px 0 16px;
}

.composite_form .validation_message .woocommerce-info {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: #6e6e73;
	font-size: 14px;
	line-height: 1.45;
}

.composite_form .validation_message .woocommerce-info::before {
	display: none;
}

.composite_form .validation_message .woocommerce-info ul {
	margin: 4px 0 0;
	padding: 0 0 0 18px;
}

.composite_form .validation_message .woocommerce-info li {
	margin: 0;
}

@media (max-width: 600px) {
	.composite_form .validation_message .woocommerce-info {
		font-size: 13px;
	}
}


/* ---------- 9. Menu déroulant de taille (généré par configurateur.js) ---------- */

/* Select d'origine : caché mais conservé (stock, SKU, panier) */
.gx-hidden-select {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	white-space: nowrap !important;
}

.gx-dd {
	position: relative;
	margin-top: 8px;
}

/* Divi ajoute une flèche (::after) à tout <span> dans les variations : on la supprime ici */
.gx-dd span::after,
.gx-dd span::before,
.et-db #et-boc .et-l .gx-dd span::after,
.et-db #et-boc .et-l .gx-dd span::before {
	content: none !important;
	display: none !important;
	background: none !important;
	border: 0 !important;
}

/* Bouton pilule */
.gx-dd-trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	min-height: 52px;
	padding: 0 20px;
	border: 1px solid #1d1d1f;
	border-radius: 999px;
	background: #ffffff;
	color: #1d1d1f;
	font: inherit;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
	transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.gx-dd-trigger .gx-dd-label {
	flex: 1;
	padding-left: 22px; /* équilibre le chevron pour centrer le texte */
}

.gx-dd-trigger svg {
	flex: none;
	transition: transform 0.2s ease;
}

.gx-dd-trigger:hover {
	background: #f5f5f7;
}

.gx-dd.is-open .gx-dd-trigger svg {
	transform: rotate(180deg);
}

.gx-dd-trigger:focus-visible {
	outline: 2px solid #0071e3;
	outline-offset: 2px;
}

/* Panneau (bureau : sous le bouton) */
.gx-dd-backdrop {
	display: none;
}

.gx-dd-panel {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	z-index: 60;
	display: flex;
	flex-direction: column;
	max-height: 420px;
	overflow: hidden;
	background: #ffffff;
	border-radius: 14px;
	box-shadow: 0 8px 40px rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.04);
	animation: gx-dd-in 0.18s ease;
}

.gx-dd-panel[hidden] {
	display: none;
}

.gx-dd.gx-up .gx-dd-panel {
	top: auto;
	bottom: calc(100% + 8px);
}

@keyframes gx-dd-in {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: translateY(0); }
}

.gx-dd-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 16px 14px 24px;
	border-bottom: 1px solid #ececef;
}

.gx-dd-title {
	color: #1d1d1f;
	font-size: 16px;
	font-weight: 700;
}

.gx-dd-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #1d1d1f;
	cursor: pointer;
}

.gx-dd-close:hover {
	background: #f5f5f7;
}

/* Liste */
.gx-dd-list {
	flex: 1;
	margin: 0;
	padding: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	list-style: none;
}

.gx-dd-item {
	margin: 0;
	padding: 0;
	list-style: none;
	border-bottom: 1px solid #ececef;
}

.gx-dd-item:last-child {
	border-bottom: 0;
}

.gx-dd-option {
	display: flex;
	align-items: center;
	width: 100%;
	min-height: 56px;
	padding: 0 24px;
	border: 0;
	border-radius: 0;
	background: #ffffff;
	color: #1d1d1f;
	font: inherit;
	font-size: 16px;
	text-align: left;
	cursor: pointer;
	transition: background-color 0.12s ease;
}

.gx-dd-option:hover:not(:disabled),
.gx-dd-option:focus-visible {
	background: #f2f2f4;
	outline: none;
}

.gx-dd-size {
	flex: none;
	width: 96px;
	font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
	font-size: 16px;
	letter-spacing: 0.02em;
}

.gx-dd-state {
	flex: 1;
	color: #86868b;
}

.gx-dd-option.is-active {
	font-weight: 700;
}

.gx-dd-option.is-active::after {
	content: "";
	flex: none;
	width: 8px;
	height: 14px;
	margin-right: 4px;
	border: solid #1d1d1f;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg) translateY(-2px);
}

.gx-dd-option:disabled {
	color: #a1a1a6;
	cursor: not-allowed;
}

/* Pied */
.gx-dd-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 24px;
	border-top: 1px solid #ececef;
	background: #ffffff;
	font-size: 15px;
}

.gx-dd-guide {
	color: #1d1d1f;
	text-decoration: underline;
}

.gx-dd-note {
	color: #1d1d1f;
	text-align: right;
}

/* Mobile : le panneau s'ouvre en bas de l'écran */
@media (max-width: 600px) {

	html.gx-dd-open {
		overflow: hidden;
	}

	.gx-dd-trigger {
		min-height: 50px;
		font-size: 15px;
	}

	.gx-dd.is-open .gx-dd-backdrop {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 9998;
		background: rgba(0, 0, 0, 0.4);
	}

	.gx-dd-panel,
	.gx-dd.gx-up .gx-dd-panel {
		position: fixed;
		top: auto;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 9999;
		max-height: 78vh;
		border-radius: 18px 18px 0 0;
		padding-bottom: env(safe-area-inset-bottom, 0px);
		animation: gx-dd-sheet 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
	}

	@keyframes gx-dd-sheet {
		from { transform: translateY(100%); }
		to   { transform: translateY(0); }
	}
}

@media (prefers-reduced-motion: reduce) {
	.composite_form *,
	.gx-dd-panel {
		transition: none !important;
		animation: none !important;
	}
}