/**
 * Luvia Child – sterowanie wyglądem konfiguratora lamp (tryb JASNY)
 *
 * Ten plik ładuje się po stylach wtyczki Luvia Lamp Configurator.
 * Child definiuje: paletę (zmienne), boxy opcji (ramki, cienie, check), styl przycisku WC.
 * Wtyczka definiuje: tryb ciemny (html.luvia-light-off), galerię WC, winietę, animacje.
 * Nie duplikuj w child: kolorów tekstu niezaznaczonych opcji (wtyczka ustawia je w ciemnym trybie).
 */

/* ==========================================================================
   Zmienne – paleta (nadpisują wtyczkę)
   ========================================================================== */

.luvia-configurator--flow {
	/* Obramowania */
	--luvia-border: #e5e0d8;
	--luvia-border-hover: #c4b8a8;
	--luvia-border-selected: #8b7355;

	/* Tła przycisków opcji */
	--luvia-bg-option: #fdfcfa;
	--luvia-bg-option-hover: #f8f5f0;
	--luvia-bg-option-selected: #f5f0e8;

	/* Placeholder (gdy brak ikony/koloru) */
	--luvia-placeholder-bg: #ebe6df;
	--luvia-placeholder-border: #d4cdc3;

	/* Akcent (linki, dopłaty, przycisk „Zmień”) */
	--luvia-accent: #a67c52;

	/* Złoto (zaznaczenie, ramka aktywnej miniatury, ptaszek) */
	--luvia-gold: #c9a962;

	/* Krem (karta „Twoja konfiguracja”, tło obrazu) */
	--luvia-cream: #f8f5f0;

	/* Główny kolor tekstu (nagłówki, etykiety, ceny) */
	--luvia-brown: #5c4a3a;
}

/* ==========================================================================
   Tło strony – kremowe
   ========================================================================== */

body.luvia-has-configurator {
	background-color: #F5F1EF;
}

#primary {
	background-color: #F2EDEB;
}

/* Gdy konfigurator jest w shortcode (np. poza stroną produktu), tło sekcji z konfiguratorem */
.luvia-configurator--flow {
	--luvia-page-bg: #F5F1EF;
}

/* ==========================================================================
   Ramki dla „1. Kolor klosza” i „2. Kolor podstawy” – pełna szerokość, zaokrąglone, cień
   ========================================================================== */

.luvia-configurator--flow .luvia-option-group:not(.luvia-option-group-type) {
	width: 100%;
	max-width: 100%;
	padding: 1.25rem 1.5rem;
	background: #FDFDFC;
	border-radius: 16px;
	/* Cień głównie w dół – od góry delikatniejszy, od dołu wyraźniejszy */
	box-shadow: 0 1px 3px rgba(92, 74, 58, 0.04), 0 6px 20px rgba(92, 74, 58, 0.08);
	box-sizing: border-box;
}

.luvia-configurator--flow .luvia-option-group:not(.luvia-option-group-type) .luvia-option-group-label {
	margin-bottom: 0.75rem;
}

/* Numer kroku (1., 2., 3.) w kolorze #A48568 */
.luvia-configurator--flow .luvia-option-group-label .luvia-option-step-num {
	color: #A48568;
}

/* ==========================================================================
   Opcje kolorów (swatche) – kwadrat zaokrąglony, wybrana vs niewybrana, check nad obrazkiem, cena w rogu
   ========================================================================== */

/* Wspólne: kształt kwadratu zaokrąglonego (nie koło); position: relative żeby dopłata (absolute) nie przesuwała układu */
.luvia-configurator--flow .luvia-option-group:not(.luvia-option-group-type) .luvia-option-choice--swatch {
	position: relative;
	border-radius: 12px;
	width: 120px;
	min-width: 120px;
	min-height: 80px;
	padding: 5px 10px 0px 10px;
	box-sizing: border-box;
	border: 2px solid transparent;
	box-shadow: none;
}
.luvia-configurator--flow .luvia-option-group:not(.luvia-option-group-type) .luvia-option-choice--swatch .luvia-option-icon,
.luvia-configurator--flow .luvia-option-group:not(.luvia-option-group-type) .luvia-option-choice--swatch .luvia-option-color-swatch {
	border-radius: 10px;
	width: 48px;
	height: 48px;
	min-width: 48px;
	min-height: 48px;
	margin: 0px 23px 0px 23px;
}

/* Niewybrana opcja: bez obwódki, bez znaczka (kolor nazwy – wtyczka, w ciemnym trybie biały) */
.luvia-configurator--flow .luvia-option-group:not(.luvia-option-group-type) .luvia-option-choice--swatch:not(.luvia-selected) {
	border-color: transparent;
	background: transparent;
}
.luvia-configurator--flow .luvia-option-group:not(.luvia-option-group-type) .luvia-option-choice--swatch:not(.luvia-selected)::after {
	display: none;
}
.luvia-configurator--flow .luvia-option-group:not(.luvia-option-group-type) .luvia-option-choice--swatch:not(.luvia-selected) .luvia-option-name {
	font-weight: normal;
}

/* Wybrana opcja: ramka zaokrąglona, cień, check nad obrazkiem, napis czarny pogrubiony */
.luvia-configurator--flow .luvia-option-group:not(.luvia-option-group-type) .luvia-option-choice--swatch.luvia-selected {
	border-color: #A48568;
	background: #fff;
	/* Cień z lewej, prawej i od dołu (bez góry) – brązowy, wyższa widoczność */
	box-shadow:
		0 4px 12px rgba(92, 74, 58, 0.20),
		-3px 0 8px rgba(92, 74, 58, 0.18),
		3px 0 8px rgba(92, 74, 58, 0.18);
}
/* Wybrana opcja z focusem – zachowaj cień (nadpisuje ogólne :focus box-shadow: none) */
.luvia-configurator--flow .luvia-option-group:not(.luvia-option-group-type) .luvia-option-choice--swatch.luvia-selected:focus,
.luvia-configurator--flow .luvia-option-group:not(.luvia-option-group-type) .luvia-option-choice--swatch.luvia-selected:focus-visible {
	box-shadow:
		0 4px 12px rgba(92, 74, 58, 0.20),
		-3px 0 8px rgba(92, 74, 58, 0.18),
		3px 0 8px rgba(92, 74, 58, 0.18) !important;
}
.luvia-configurator--flow .luvia-option-group:not(.luvia-option-group-type) .luvia-option-choice--swatch.luvia-selected::after {
	display: block;
	content: '';
	position: absolute;
	top: 40px;
	left: 60px;
	width: 20px;
	height: 20px;
	background: #A48568;
	border: 3px solid white;
	border-radius: 50%;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
	background-size: 12px;
	background-repeat: no-repeat;
	background-position: center;
}
.luvia-configurator--flow .luvia-option-group:not(.luvia-option-group-type) .luvia-option-choice--swatch.luvia-selected .luvia-option-name {
	color: #000;
	font-weight: 700;
}

/* Wszystkie napisy opcji kolorów – domyślnie czarne (nadpisanie koloru z wtyczki) */
.luvia-configurator--flow .luvia-option-group:not(.luvia-option-group-type) .luvia-option-choice--swatch .luvia-option-name {
	color: #000;
}
.luvia-configurator--flow .luvia-option-group:not(.luvia-option-group-type) .luvia-option-choice--swatch .luvia-option-price {
	color: #000;
}

/* Dopłata w prawym górnym rogu elementu opcji – tło #EBDACB, zaokrąglone rogi */
.luvia-configurator--flow .luvia-option-group:not(.luvia-option-group-type) .luvia-option-choice--swatch .luvia-option-price {
	position: absolute;
	top: 3px;
	right: 3px;
	font-size: 0.7rem;
	font-weight: 600;
	margin: 0;
	line-height: 1.2;
	background: #EBDACB;
	border-radius: 6px;
	padding: 2px 3px;
}
.luvia-configurator--flow .luvia-option-choice--pill .luvia-option-price {
	background: #EBDACB;
	border-radius: 6px;
	padding: 2px 6px;
}

/* Focus/active w naszych odcieniach – bez niebieskiego WooCommerce */
.luvia-configurator--flow .luvia-option-choice:focus {
	outline: 2px solid #A48568;
	outline-offset: 2px;
	box-shadow: none !important;
}
.luvia-configurator--flow .luvia-option-choice:focus:not(:focus-visible) {
	outline: none;
}
.luvia-configurator--flow .luvia-option-choice:focus-visible {
	outline: 2px solid #A48568;
	outline-offset: 2px;
	box-shadow: none !important;
}
.luvia-configurator--flow .luvia-option-choice--swatch:active,
.luvia-configurator--flow .luvia-option-choice--pill:active {
	background-color: #f5f0e8 !important;
	border-color: #c4b8a8 !important;
	box-shadow: none !important;
}
.luvia-configurator--flow .luvia-option-choice--swatch.luvia-selected:active {
	background-color: #fff !important;
	border-color: #A48568 !important;
	/* Zachowaj cień także przy kliknięciu (nadpisuje ogólne :active) */
	box-shadow:
		0 4px 12px rgba(92, 74, 58, 0.20),
		-3px 0 8px rgba(92, 74, 58, 0.18),
		3px 0 8px rgba(92, 74, 58, 0.18) !important;
}

/* ==========================================================================
   Wersja światła – ten sam wygląd co wybór klosza/podstawy (boxy w rzędzie, ramka, cień, check)
   ========================================================================== */

.luvia-configurator--flow .luvia-option-group-type {
	width: 100%;
	max-width: 100%;
	padding: 1.25rem 1.5rem;
	background: #FDFDFC;
	border-radius: 16px;
	box-shadow: 0 1px 3px rgba(92, 74, 58, 0.04), 0 6px 20px rgba(92, 74, 58, 0.08);
	box-sizing: border-box;
}
.luvia-configurator--flow .luvia-option-group-type .luvia-option-group-label {
	margin-bottom: 0.75rem;
}
.luvia-configurator--flow .luvia-option-group-type .luvia-option-choices--pills {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 1.25rem;
}
.luvia-configurator--flow .luvia-option-group-type .luvia-option-choice--pill {
	position: relative;
	width: 120px;
	min-width: 120px;
	max-width: none;
	min-height: 80px;
	padding: 5px 10px 0 10px;
	border-radius: 12px;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	border: 2px solid transparent;
	box-shadow: none;
	box-sizing: border-box;
}
.luvia-configurator--flow .luvia-option-group-type .luvia-option-choice--pill .luvia-option-pill-inner {
	flex-direction: column;
	align-items: center;
	gap: 0.25rem;
	flex: none;
	min-width: 0;
}
.luvia-configurator--flow .luvia-option-group-type .luvia-option-choice--pill .luvia-option-icon {
	width: 48px;
	height: 48px;
	min-width: 48px;
	min-height: 48px;
	border-radius: 10px;
	margin: 0 23px 0 23px;
}
.luvia-configurator--flow .luvia-option-group-type .luvia-option-choice--pill .luvia-option-icon img {
	width: 48px;
	height: 48px;
	object-fit: contain;
}
.luvia-configurator--flow .luvia-option-group-type .luvia-option-choice--pill .luvia-option-price {
	position: absolute;
	top: 3px;
	right: 3px;
	font-size: 0.7rem;
	font-weight: 600;
	margin: 0;
	line-height: 1.2;
}
.luvia-configurator--flow .luvia-option-group-type .luvia-option-choice--pill .luvia-option-pill-text {
	align-items: center;
	text-align: center;
}
.luvia-configurator--flow .luvia-option-group-type .luvia-option-choice--pill:not(.luvia-selected) {
	background: transparent;
	border-color: transparent;
}
.luvia-configurator--flow .luvia-option-group-type .luvia-option-choice--pill:not(.luvia-selected) .luvia-option-name {
	font-weight: normal;
}
.luvia-configurator--flow .luvia-option-group-type .luvia-option-choice--pill:not(.luvia-selected)::before {
	display: none;
}
.luvia-configurator--flow .luvia-option-group-type .luvia-option-choice--pill.luvia-selected {
	border-color: #A48568;
	background: #fff;
	box-shadow:
		0 4px 12px rgba(92, 74, 58, 0.20),
		-3px 0 8px rgba(92, 74, 58, 0.18),
		3px 0 8px rgba(92, 74, 58, 0.18);
}
.luvia-configurator--flow .luvia-option-group-type .luvia-option-choice--pill.luvia-selected:focus,
.luvia-configurator--flow .luvia-option-group-type .luvia-option-choice--pill.luvia-selected:focus-visible {
	box-shadow:
		0 4px 12px rgba(92, 74, 58, 0.20),
		-3px 0 8px rgba(92, 74, 58, 0.18),
		3px 0 8px rgba(92, 74, 58, 0.18) !important;
}
.luvia-configurator--flow .luvia-option-group-type .luvia-option-choice--pill.luvia-selected::before {
	content: '';
	position: absolute;
	top: 40px;
	left: 60px;
	width: 20px;
	height: 20px;
	background: #A48568;
	border: 3px solid white;
	border-radius: 50%;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
	background-size: 12px;
	background-repeat: no-repeat;
	background-position: center;
	margin-right: 0;
}
.luvia-configurator--flow .luvia-option-group-type .luvia-option-choice--pill.luvia-selected .luvia-option-name {
	color: #000;
	font-weight: 700;
}
.luvia-configurator--flow .luvia-option-group-type .luvia-option-choice--pill.luvia-selected:active {
	background-color: #fff !important;
	border-color: #A48568 !important;
	box-shadow:
		0 4px 12px rgba(92, 74, 58, 0.20),
		-3px 0 8px rgba(92, 74, 58, 0.18),
		3px 0 8px rgba(92, 74, 58, 0.18) !important;
}

/* ==========================================================================
   Zmienne – layout i rozmiary (opcjonalnie)
   Możesz dodać własne zmienne i użyć ich w nadpisaniach poniżej.
   ========================================================================== */

.luvia-configurator--flow {
	--luvia-radius: 16px;
	--luvia-radius-small: 12px;
	--luvia-gap: 2.5rem;
	--luvia-left-width: min(420px, 45%);
}

/* ==========================================================================
   Nadpisania – layout
   Odkomentuj i zmień według potrzeb.
   ========================================================================== */

/* Szerokość lewej kolumny (obraz + miniatury + Twoja konfiguracja) */
/* .luvia-configurator--flow .luvia-configurator-left {
	flex: 0 0 var(--luvia-left-width, min(420px, 45%));
} */

/* Odstęp między kolumnami */
/* .luvia-configurator--flow {
	gap: var(--luvia-gap);
} */

/* Zaokrąglenie ramki obrazu i karty */
/* .luvia-configurator--flow .luvia-configurator-left .luvia-configurator-image-wrap,
.luvia-configurator--flow .luvia-configurator-your-config {
	border-radius: var(--luvia-radius);
} */

/* ==========================================================================
   Nadpisania – typografia
   ========================================================================== */

/* Nagłówek „Stwórz swoją lampę” */
/* .luvia-configurator--flow .luvia-configurator-headline {
	font-size: 1.75rem;
	font-weight: 600;
} */

/* Nazwa produktu nad nagłówkiem */
/* .luvia-configurator--flow .luvia-configurator-product-name {
	font-size: 0.95rem;
} */

/* ==========================================================================
   Nadpisania – przycisk CTA „Stwórz i zamów”
   ========================================================================== */

/* Inny gradient / kolor */
/* .luvia-configurator--flow .luvia-configurator-cta {
	background: linear-gradient(135deg, #5c4a3a 0%, #8b7355 100%);
	color: #fff;
} */

/* Wielkość i zaokrąglenie */
/* .luvia-configurator--flow .luvia-configurator-cta {
	padding: 1rem 1.75rem;
	font-size: 1.05rem;
	border-radius: 12px;
} */

/* ==========================================================================
   Nadpisania – miniatury pod obrazem
   ========================================================================== */

/* Rozmiar miniaturek */
/* .luvia-configurator--flow .luvia-configurator-thumb {
	width: 72px;
	height: 72px;
	border-radius: 12px;
} */

/* ==========================================================================
   Nadpisania – swatche kolorów (krok 1, 2)
   ========================================================================== */

/* Większe kółka */
/* .luvia-configurator--flow .luvia-option-choice--swatch {
	width: 80px;
	height: 80px;
	min-width: 80px;
	min-height: 80px;
}
.luvia-configurator--flow .luvia-option-choice--swatch .luvia-option-icon,
.luvia-configurator--flow .luvia-option-choice--swatch .luvia-option-color-swatch {
	width: 52px;
	height: 52px;
	min-width: 52px;
	min-height: 52px;
} */

/* ==========================================================================
   Strona produktu – oryginalny przycisk WC, tekst „Stwórz i zamów”, styl jak CTA
   Ukrywamy przycisk CTA z shortcode; przycisk WC ostylowany jak główny CTA.
   ========================================================================== */

body.luvia-has-configurator .luvia-configurator-cta-wrap {
	display: none !important;
}

body.luvia-has-configurator form.cart .single_add_to_cart_button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 1rem 1.75rem;
	font-size: 1.05rem;
	font-weight: 600;
	color: #fff !important;
	background: linear-gradient(135deg, #8b7355 0%, #a67c52 50%, #c9a962 100%) !important;
	border: none !important;
	border-radius: 12px;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(139, 115, 85, 0.35);
	transition: transform 0.2s, box-shadow 0.2s;
}
body.luvia-has-configurator form.cart .single_add_to_cart_button:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 20px rgba(139, 115, 85, 0.4);
	color: #fff !important;
}

/* Przy widocznej galerii WC layout jest domyślny (galeria | konfigurator). Pełna szerokość nie jest wymuszana. */

/* ==========================================================================
   Wersja CIEMNA („Zgaś światło”) – html.luvia-light-off
   Przycisk przełącza klasę na <html>. Kolory dopisz / zmień na docelowe.
   ========================================================================== */

html.luvia-light-off {
	--luvia-theme-page-bg: #1e1c1a;
	--luvia-theme-primary-bg: #252320;
	--luvia-theme-block-bg: #2a2826;
	--luvia-theme-block-shadow-top: 0 1px 3px rgba(0, 0, 0, 0.2);
	--luvia-theme-block-shadow-bottom: 0 6px 20px rgba(0, 0, 0, 0.25);
	--luvia-theme-step-num: #c9a962;
	--luvia-theme-text: #f0ede8;
	--luvia-theme-text-muted: #9a9690;
	--luvia-theme-price: #e0ddd6;
	--luvia-theme-swatch-border: #8b7355;
	--luvia-theme-swatch-bg: #353230;
	--luvia-theme-swatch-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
	--luvia-theme-check-bg: #c9a962;
}