/**
 * JST Bundle — Widget Frontend
 *
 * Convention : BEM avec bloc racine `.jst-bundle-widget` / `.jst-bundle__*`
 * Variables CSS : préfixe --jst-* pour éviter les conflits avec Basel / Woodmart.
 * Aucun !important, aucun reset global — coexistence propre avec les thèmes.
 *
 * @package JST\Bundle
 */

/* ============================================================================
   Variables CSS (thème neutre — peut être overridé par Basel/Woodmart enfant)
   ============================================================================ */

.jst-bundle-widget {
	/* Couleurs */
	--jst-primary:          #1a73e8;
	--jst-primary-light:    #e8f0fe;
	--jst-primary-border:   #1a73e8;
	--jst-surface:          #ffffff;
	--jst-surface-hover:    #f8faff;
	--jst-border:           #dde1e7;
	--jst-border-radius:    8px;
	--jst-text:             #1a1a1a;
	--jst-text-muted:       #6b7280;
	--jst-price-discount:   #d32f2f;
	--jst-price-original:   #9e9e9e;
	--jst-savings-bg:       #e6f4ea;
	--jst-savings-text:     #1b5e20;
	--jst-badge-bg:         #ff6d00;
	--jst-badge-text:       #ffffff;
	--jst-error-bg:         #fdecea;
	--jst-error-border:     #f44336;
	--jst-error-text:       #b71c1c;

	/* Espacement */
	--jst-gap:              12px;
	--jst-offer-padding:    14px 16px;

	/* Typographie */
	--jst-font-size-base:   15px;
	--jst-font-size-sm:     13px;
	--jst-font-size-price:  16px;
	--jst-font-size-badge:  11px;

	/* Transitions */
	--jst-transition:       0.18s ease;
}

/* ============================================================================
   Bloc racine
   ============================================================================ */

.jst-bundle-widget {
	width: 100%;
	margin-bottom: 20px;
	font-size: var( --jst-font-size-base );
	line-height: 1.5;
	color: var( --jst-text );
	box-sizing: border-box;
}

.jst-bundle-widget *,
.jst-bundle-widget *::before,
.jst-bundle-widget *::after {
	box-sizing: inherit;
}

/* ============================================================================
   Aperçu visuel des attributs disponibles (non-interactif)
   ============================================================================ */

.jst-bundle__attr-preview {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 12px;
	padding: 10px 14px;
	margin-bottom: 12px;
	background: var( --jst-surface );
	border: 1px solid var( --jst-border );
	border-radius: var( --jst-border-radius );
	font-size: var( --jst-font-size-sm );
	color: var( --jst-text-muted );
}

/* Groupe par attribut (ex: "Couleur ● ● ●") */
.jst-bundle__preview-group {
	display: flex;
	align-items: center;
	gap: 5px;
	flex-shrink: 0;
}

/* Label de l'attribut : "Couleur :" */
.jst-bundle__preview-attr-label {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var( --jst-text-muted );
	white-space: nowrap;
	margin-right: 2px;
}

.jst-bundle__preview-attr-label::after {
	content: ':';
}

/* Conteneur des options */
.jst-bundle__preview-options {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px;
}

/* Swatch couleur — cercle coloré */
.jst-bundle__preview-swatch {
	display: inline-block;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	flex-shrink: 0;
	box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.15 );
	transition: transform var( --jst-transition );
}

.jst-bundle__preview-swatch:hover {
	transform: scale( 1.25 );
}

/* Chip texte — taille, coupe, etc. */
.jst-bundle__preview-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 1px 7px;
	background: #f3f4f6;
	border: 1px solid #e5e7eb;
	border-radius: 4px;
	font-size: 11px;
	font-weight: 500;
	color: var( --jst-text );
	white-space: nowrap;
	line-height: 1.6;
}

/* Badge "+N" */
.jst-bundle__preview-more {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 1px 6px;
	background: var( --jst-primary-light );
	border: 1px solid var( --jst-primary );
	border-radius: 4px;
	font-size: 11px;
	font-weight: 600;
	color: var( --jst-primary );
	white-space: nowrap;
	line-height: 1.6;
}

/* Séparateur entre groupes */
.jst-bundle__preview-sep {
	color: #cbd5e1;
	font-size: 16px;
	line-height: 1;
	user-select: none;
}

/* ============================================================================
   Séparateur d'en-tête
   ============================================================================ */

.jst-bundle__divider {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
}

.jst-bundle__divider::before,
.jst-bundle__divider::after {
	content: '';
	flex: 1;
	height: 1px;
	background: var( --jst-border );
}

.jst-bundle__divider span {
	font-size: var( --jst-font-size-sm );
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var( --jst-text-muted );
	white-space: nowrap;
}

/* ============================================================================
   Liste des offres
   ============================================================================ */

.jst-bundle__offers {
	display: flex;
	flex-direction: column;
	gap: var( --jst-gap );
}

/* ============================================================================
   Offre individuelle
   ============================================================================ */

.jst-bundle__offer {
	position: relative;
	background: var( --jst-surface );
	border: 2px solid var( --jst-border );
	border-radius: var( --jst-border-radius );
	cursor: pointer;
	transition:
		border-color var( --jst-transition ),
		background var( --jst-transition ),
		box-shadow var( --jst-transition );
}

.jst-bundle__offer:hover {
	border-color: var( --jst-primary );
	background: var( --jst-surface-hover );
	box-shadow: 0 2px 8px rgba( 26, 115, 232, .12 );
}

/* État actif */
.jst-bundle__offer--active {
	border-color: var( --jst-primary-border );
	background: var( --jst-primary-light );
	box-shadow: 0 0 0 1px var( --jst-primary ), 0 2px 8px rgba( 26, 115, 232, .15 );
}

.jst-bundle__offer--active:hover {
	box-shadow: 0 0 0 1px var( --jst-primary ), 0 4px 12px rgba( 26, 115, 232, .2 );
}

/* ============================================================================
   Badge
   ============================================================================ */

.jst-bundle__badge {
	position: absolute;
	top: -1px;
	right: 14px;
	padding: 3px 10px;
	background: var( --jst-badge-bg );
	color: var( --jst-badge-text );
	font-size: var( --jst-font-size-badge );
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	border-radius: 0 0 6px 6px;
	line-height: 1.4;
	pointer-events: none;
}

/* ============================================================================
   Label (zone cliquable)
   ============================================================================ */

.jst-bundle__offer-label {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: var( --jst-offer-padding );
	cursor: pointer;
	user-select: none;
	margin: 0; /* reset thème */
}

/* Radio natif masqué — remplacé par .jst-bundle__radio-ui */
.jst-bundle__offer-radio {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	pointer-events: none;
}

/* ============================================================================
   Radio visuel custom
   ============================================================================ */

.jst-bundle__radio-ui {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	border: 2px solid var( --jst-border );
	border-radius: 50%;
	background: var( --jst-surface );
	transition:
		border-color var( --jst-transition ),
		background var( --jst-transition );
	position: relative;
}

.jst-bundle__radio-ui::after {
	content: '';
	position: absolute;
	inset: 3px;
	border-radius: 50%;
	background: transparent;
	transition: background var( --jst-transition );
}

/* État actif du radio */
.jst-bundle__offer--active .jst-bundle__radio-ui {
	border-color: var( --jst-primary );
	background: var( --jst-surface );
}

.jst-bundle__offer--active .jst-bundle__radio-ui::after {
	background: var( --jst-primary );
}

/* ============================================================================
   Corps de l'offre (titre + prix)
   ============================================================================ */

.jst-bundle__offer-body {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
	min-width: 0;
}

.jst-bundle__offer-title {
	font-weight: 600;
	font-size: var( --jst-font-size-base );
	line-height: 1.3;
}

/* Zone prix */
.jst-bundle__offer-pricing {
	display: flex;
	align-items: baseline;
	gap: 6px;
	flex-wrap: wrap;
}

.jst-bundle__offer-price {
	font-size: var( --jst-font-size-price );
	font-weight: 700;
	color: var( --jst-text );
}

.jst-bundle__offer-original {
	font-size: var( --jst-font-size-sm );
	color: var( --jst-price-original );
	text-decoration: line-through;
}

.jst-bundle__offer-discount {
	font-size: var( --jst-font-size-sm );
	font-weight: 700;
	color: var( --jst-price-discount );
}

/* ============================================================================
   Lignes de variantes (qty > 1)
   ============================================================================ */

.jst-bundle__variants {
	flex-direction: column;
	gap: 8px;
	padding: 0 16px 14px;
	/* display géré par JS */
}

/* Sous-titre de guidage au-dessus des lignes de sélection */
.jst-bundle__variants-subtitle {
	width: 100%;
	margin: 0 0 10px;
	padding: 7px 12px;
	background: var( --jst-primary-light );
	border-left: 3px solid var( --jst-primary );
	border-radius: 0 4px 4px 0;
	font-size: 12px;
	font-weight: 600;
	color: var( --jst-primary );
	letter-spacing: .01em;
}

/* Une ligne */
.jst-bundle__variant-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	background: rgba( 255, 255, 255, 0.7 );
	border: 1px solid var( --jst-border );
	border-radius: 6px;
}

/* Numéro de l'article (#1, #2, …) */
.jst-bundle__variant-index {
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var( --jst-primary );
	color: #fff;
	border-radius: 50%;
	font-size: 12px;
	font-weight: 700;
}

/* Groupe de selects */
.jst-bundle__variant-selects {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	flex: 1;
}

/* Select individuel */
.jst-bundle__variant-select {
	flex: 1;
	min-width: 110px;
	padding: 6px 10px;
	border: 1px solid var( --jst-border );
	border-radius: 5px;
	background: var( --jst-surface );
	font-size: var( --jst-font-size-sm );
	color: var( --jst-text );
	appearance: auto;
	cursor: pointer;
	transition: border-color var( --jst-transition );
}

.jst-bundle__variant-select:focus {
	outline: 2px solid var( --jst-primary );
	outline-offset: 1px;
	border-color: var( --jst-primary );
}

/* État d'erreur */
.jst-bundle__variant-select--error {
	border-color: var( --jst-error-border );
	background: var( --jst-error-bg );
}

/* ============================================================================
   Barre d'économies
   ============================================================================ */

.jst-bundle__savings-bar {
	align-items: center;
	gap: 8px;
	margin-top: 12px;
	padding: 10px 14px;
	background: var( --jst-savings-bg );
	border: 1px solid #a5d6a7;
	border-radius: 6px;
	font-size: var( --jst-font-size-sm );
	color: var( --jst-savings-text );
	/* display géré par JS */
}

.jst-bundle__savings-icon {
	font-size: 16px;
	line-height: 1;
}

.jst-bundle__savings-text {
	font-weight: 600;
}

/* ============================================================================
   Message d'erreur de validation
   ============================================================================ */

.jst-bundle__error {
	margin-top: 10px;
	padding: 10px 14px;
	background: var( --jst-error-bg );
	border: 1px solid var( --jst-error-border );
	border-radius: 6px;
	color: var( --jst-error-text );
	font-size: var( --jst-font-size-sm );
	font-weight: 600;
}

/* ============================================================================
   Responsive
   ============================================================================ */

@media ( max-width: 480px ) {
	.jst-bundle__offer-body {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
	}

	.jst-bundle__variant-selects {
		flex-direction: column;
	}

	.jst-bundle__variant-select {
		min-width: 0;
		width: 100%;
	}
}

/* ============================================================================
   Compatibilité Basel / Woodmart — surcharges ciblées
   ============================================================================

   Basel et Woodmart ont des sélecteurs aggressifs sur les <label> et les
   <input type="radio"> dans les formulaires produit. Ces règles rétablissent
   l'apparence souhaitée du widget sans toucher au reste de la page.
   ============================================================================ */

/* Annuler le style de label générique de Basel/Woodmart sur nos labels */
.jst-bundle-widget .jst-bundle__offer-label {
	font-weight: inherit;
	color: inherit;
	display: flex; /* réaffirmer contre un éventuel override */
}

/* Annuler la bordure/fond que certains thèmes appliquent aux radio */
.jst-bundle-widget input[type="radio"].jst-bundle__offer-radio {
	margin: 0;
	padding: 0;
	border: none;
	background: transparent;
	box-shadow: none;
}

/* Empêcher Basel/Woodmart de re-styler nos selects de variante */
.jst-bundle-widget .jst-bundle__variant-select {
	height: auto;
	line-height: inherit;
}