/**
 * Styles pour la popup de sélection des variations.
 *
 * Design identique aux filtres Berocket du thème :
 * - Popup slide depuis la droite
 * - Header avec titre et croix (style .filters-header)
 * - Bouton Appliquer visible uniquement sur mobile (<768px)
 *
 * Breakpoints :
 * - <1024px : tablette
 * - <768px : mobile
 *
 * @link       https://com-maker.fr
 * @since      1.4.0
 * @package    Sabine_Be
 */

/* ==========================================================================
   Wrapper principal
   ========================================================================== */

.sbe-popup-variations-wrapper {
	--swatch-size: 40px;
}

/* ==========================================================================
   Conteneur des attributs (sélecteurs visibles)
   ========================================================================== */

.sbe-popup-attributes {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* ==========================================================================
   Sélecteur d'attribut (un bloc par attribut)
   ========================================================================== */

.sbe-popup-attribute-selector {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* Nom de l'attribut */
.sbe-popup-attribute-name {
	font-weight: bold;
}

/* Bouton trigger (image + nom + flèche) - Style simple sans bordure */
.sbe-popup-attribute-trigger {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 0;
	background: none;
	border: none;
	cursor: pointer;
	text-align: left;
}

/* Image du terme sélectionné (carrée) */
.sbe-popup-selected-image {
	width: var(--swatch-size);
	height: var(--swatch-size);
	min-width: var(--swatch-size);
	border-radius: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-color: #f5f5f5;
	border: 1px solid #ddd;
}

.sbe-popup-selected-image.has-image {
	border-color: #ccc;
}

/* Nom du terme sélectionné */
.sbe-popup-selected-name {
	flex: 1;
	font-size: 14px;
	color: #333;
}

/* Flèche vers la droite */
.sbe-popup-trigger-arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #333;
	margin-left: auto;
}

/* ==========================================================================
   Overlay (identique aux filtres)
   ========================================================================== */

.sbe-variations-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 999998;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}

.sbe-variations-overlay.active {
	opacity: 1;
	visibility: visible;
}

/* Bloquer le scroll du body quand popup ouverte */
body.sbe-popup-open {
	overflow: hidden;
}

/* ==========================================================================
   Popup (identique à .filters-popup du thème)
   ========================================================================== */

.sbe-variations-popup {
	position: fixed;
	top: 0;
	right: -100%;
	width: 320px;
	height: 100vh;
	height: 100dvh;
	background-color: #fff;
	z-index: 999999;
	display: flex;
	flex-direction: column;
	transition: right 0.3s ease;
	box-shadow: -5px 0 20px rgba(0, 0, 0, 0.15);
}

.sbe-variations-popup.active {
	right: 0;
}

/* ==========================================================================
   Header de la popup (identique à .filters-header du thème)
   ========================================================================== */

.sbe-variations-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15px 20px;
	border-bottom: 1px solid #eee;
	flex-shrink: 0;
}

.sbe-variations-title {
	margin: 0;
	font-size: 18px;
	font-weight: normal;
}

/* Bouton fermer (identique à button.close-filters du thème) */
.sbe-variations-close {
	background: none;
	border: none;
	font-size: 34px;
	line-height: 1;
	cursor: pointer;
	padding: 0;
	color: #666;
}

.sbe-variations-close:hover {
	background-color: transparent;
	color: #666;
}

/* ==========================================================================
   Contenu de la popup
   ========================================================================== */

.sbe-variations-content {
	padding: 20px;
	flex-grow: 1;
	min-height: 0;
	overflow-y: auto;
}

/* Liste des termes */
.sbe-variation-terms-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Item de terme */
.sbe-variation-term {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 0;
	cursor: pointer;
	border-bottom: 1px solid #f0f0f0;
	transition: background-color 0.15s ease;
}

.sbe-variation-term:last-child {
	border-bottom: none;
}

.sbe-variation-term:hover {
	background-color: #f8f8f8;
}

.sbe-variation-term.selected {
	background-color: #e8f4fd;
}

.sbe-variation-term.disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

/* Image du terme (carrée) */
.sbe-variation-term-image {
	width: 28px;
	height: 28px;
	min-width: 28px;
	border-radius: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	border: 2px solid #ddd;
	transition: border-color 0.15s ease;
}

.sbe-variation-term.selected .sbe-variation-term-image {
	border-color: #000;
}

/* Nom du terme - Style par défaut */
.sbe-variation-term-name {
	flex: 1;
	font-size: 13px;
	font-weight: 600;
	color: #333;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.sbe-variation-term.selected .sbe-variation-term-name {
	color: #000;
}

.sbe-variation-term.disabled .sbe-variation-term-name {
	text-decoration: line-through;
}

/* Nom du terme - Structure avec premier mot + reste (uniquement pour couleurs) */
.sbe-variation-term-name--split {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: inherit;
}

/* Premier mot du terme (style comme nom d'attribut) */
.sbe-term-first-word {
	font-size: 13px;
	font-weight: 600;
	color: #333;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

/* Reste du nom (plus petit, en dessous) */
.sbe-term-rest-name {
	font-size: 12px;
	font-weight: normal;
	color: #666;
	text-transform: none;
	letter-spacing: 0;
}

.sbe-variation-term.selected .sbe-term-first-word {
	color: #000;
}

.sbe-variation-term.disabled .sbe-term-first-word,
.sbe-variation-term.disabled .sbe-term-rest-name {
	text-decoration: line-through;
}

/* ==========================================================================
   Indicateurs de stock
   ========================================================================== */

/* Label de stock (En précommande / Rupture de stock) */
.sbe-variation-stock-label {
	font-size: 11px;
	padding: 2px 8px;
	border-radius: 3px;
	margin-left: auto;
	white-space: nowrap;
	font-weight: 500;
}

/* En précommande - style avertissement */
.sbe-variation-stock-label.sbe-stock-onbackorder {
	background-color: #fff3cd;
	color: #856404;
}

/* Rupture de stock - style erreur */
.sbe-variation-stock-label.sbe-stock-outofstock {
	background-color: #f8d7da;
	color: #721c24;
}

/* Item en rupture de stock */
.sbe-variation-term.sbe-stock-outofstock {
	opacity: 0.5;
	cursor: not-allowed;
}

.sbe-variation-term.sbe-stock-outofstock .sbe-variation-term-name,
.sbe-variation-term.sbe-stock-outofstock .sbe-term-first-word,
.sbe-variation-term.sbe-stock-outofstock .sbe-term-rest-name {
	text-decoration: line-through;
}

/* Item en précommande - style normal (cliquable) */
.sbe-variation-term.sbe-stock-onbackorder {
	/* Style identique aux items en stock */
}

/* ==========================================================================
   Bouton Appliquer (identique à button.apply-filters du thème)
   Visible uniquement sur mobile (<768px)
   ========================================================================== */

.sbe-variations-apply {
	display: none;
	flex-shrink: 0;
	font-size: 18px;
	font-weight: bold;
	background: var(--texte, #000);
	color: #fff;
	width: calc(100% - 40px);
	margin: 20px;
	padding: 14px 20px;
	border: none;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.sbe-variations-apply:hover {
	opacity: 0.9;
}

/* ==========================================================================
   Responsive - Tablette (<1024px)
   ========================================================================== */

@media (max-width: 1023px) {
	/* Styles tablette si nécessaire */
}

/* ==========================================================================
   Responsive - Mobile (<768px)
   ========================================================================== */

@media (max-width: 768px) {
	/* Popup pleine largeur sur mobile */
	.sbe-variations-popup.active {
		width: 100%;
	}

	/* Bouton Appliquer visible sur mobile */
	.sbe-variations-apply {
		display: block;
		width: calc(100% - 40px);
		margin: 20px;
	}
}

/* ==========================================================================
   Loader AJAX (chargement des variations à la demande)
   ========================================================================== */

.sbe-variations-popup .sbe-loading-overlay {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(255, 255, 255, 0.7);
	z-index: 10;
	align-items: center;
	justify-content: center;
}

.sbe-variations-popup.sbe-loading .sbe-loading-overlay {
	display: flex;
}

.sbe-loading-spinner {
	width: 28px;
	height: 28px;
	border: 3px solid #e0e0e0;
	border-top-color: #333;
	border-radius: 50%;
	animation: sbe-spin 0.6s linear infinite;
}

@keyframes sbe-spin {
	to { transform: rotate(360deg); }
}