/**
 * Dresium Main Stylesheet
 *
 * Modular, organized, and maintainable CSS architecture
 *
 * @package Dresium
 * @version 2.0.0
 * @author Dresium Team
 */


/* ============================================
   VARIABLES & DESIGN TOKENS
   ============================================ */

@import url('dresium-variables.css');

/* ============================================
   BASE STYLES & RESETS
   ============================================ */

@import url('dresium-base.css');

/* ============================================
   COMPONENTS
   ============================================ */

@import url('dresium-buttons.css');
@import url('dresium-modal.css');
@import url('dresium-forms.css');
@import url('dresium-gallery.css');

/* ============================================
   LEGACY COMPATIBILITY
   Temporary - to be refactored
   ============================================ */

/* Keep existing functionality while we migrate */

/* Photo uploader wrapper */
#dresiumWrapper {
	width: 300px; /* RG-WEBDEV: Changed from 100% to auto to fit the content */
	/* height: 50px; */ /* RG-WEBDEV 2026-01-24: Commented out to allow dynamic height based on button sizes */
	display: flex;
	position: absolute;
	z-index: 99;
	flex-direction: row; /* RG-WEBDEV: BK-> column; */
	justify-content: flex-start; /* RG-WEBDEV: Default left alignment, overridden for right positions */
	align-items: flex-start;
}

#dresium-photos {
	position: absolute;
	top: 0px;
	left: 120px;
}

#photo-thumbnails {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}

#photo-thumbnails > .thumbnail {
	position: relative;
}

#photo-thumbnails > .thumbnail > img {
	width: 40px;
	height: 40px;
	object-fit: cover;
	border-radius: var(--dresium-radius-base);
	margin: var(--dresium-space-2);
}

#photo-thumbnails > .thumbnail.active img {
	border: 3px solid var(--dresium-error);
}

#photo-thumbnails > .thumbnail > span.remove {
	position: absolute;
	width: 10px;
	height: 10px;
	border-radius: var(--dresium-radius-full);
	background-color: var(--dresium-error);
	color: var(--dresium-white);
	top: 4px;
	right: 4px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 10px;
	padding-bottom: 2px;
	cursor: pointer;
}

/* Settings panel */
#dresium-settings {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	width: auto;
	height: auto;
}

.dresium-options {
	position: relative;
	display: flex;
	margin: var(--dresium-space-2);
	background-color: var(--dresium-gray-300);
	border-radius: var(--dresium-radius-base);
	overflow: hidden;
	justify-content: center;
	align-items: center;
}

.dresium-options > .toggle-btn {
	display: inline-block;
	padding: var(--dresium-space-2) var(--dresium-space-3);
	background: var(--dresium-gray-300);
	border-radius: var(--dresium-radius-base);
	cursor: pointer;
}

.dresium-options span:not(.toggle-btn) {
	display: inline-block;
	max-width: 0;
	padding: 0;
	margin: 0;
	opacity: 0;
	background: var(--dresium-gray-200);
	border-radius: var(--dresium-radius-full);
	cursor: pointer;
	vertical-align: middle;
	overflow: hidden;
	transition: max-width 0.3s ease, padding 0.3s ease, margin 0.3s ease, opacity 0.3s ease;
}

.dresium-options:hover span:not(.toggle-btn) {
	max-width: 28px;
	padding: 2px;
	margin: 0 var(--dresium-space-2);
	opacity: 1;
}

.dresium-options span.selected {
	background: var(--dresium-gray-400);
	border: 2px solid var(--dresium-gray-600);
}

/* Upload button */
#upload-btn {
	width: 40px;
	background-color: transparent;
	border: 1px solid var(--dresium-primary);
	display: flex;
	padding: 0;
	border-radius: var(--dresium-radius-base);
}

#upload-btn::before {
	content: "🖼️";
}

/* ============================================================================
 * DRESIUM GENERATED IMAGE WRAPPER OVERLAY
 * RG-WEBDEV 2025-11-08: Overlay approach per immagini generate
 * Preserva gallery WooCommerce originale, zero conflitti con FlexSlider/Zoom
 * ============================================================================ */

/* Wrapper overlay - Posizionato sopra immagine originale WooCommerce */
.dresium-generated-wrapper {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 10; /* Sopra immagine originale, sotto controlli UI */
	pointer-events: none; /* Default: NON bloccare eventi - permette zoom su originale */
	display: none; /* Nascosto per default */
	transition: opacity 0.3s ease;
	cursor: default; /* Non mostra pointer come link */
}

/* Wrapper visibile - SOLO quando visibile blocca eventi */
.dresium-generated-wrapper.visible {
	display: block;
	pointer-events: auto; /* SOLO quando visibile cattura click per bloccare lightbox */
}

/* Assicura che il parent slide abbia position: relative */
.woocommerce-product-gallery__image {
	position: relative !important;
}

/* RG-WEBDEV 2025-11-09: Permetti overflow quando c'è immagine generata visibile
 * WooCommerce imposta overflow: hidden per default, ma questo taglia le immagini
 * generate più alte dell'originale quando il viewport si espande
 */
.woocommerce-product-gallery__image.has-generated-visible {
	overflow: visible !important;
}

/* Fallback con :has() per browser moderni */
.woocommerce-product-gallery__image:has(.dresium-generated-wrapper.visible) {
	overflow: visible !important;
}

/* Blocca click sul link parent quando wrapper è visibile - METODO 1: class-based */
.woocommerce-product-gallery__image.has-generated-visible > a {
	pointer-events: none !important;
	cursor: default !important;
	user-select: none !important;
}

/* Blocca click sul link parent quando wrapper è visibile - METODO 2: :has() fallback */
.woocommerce-product-gallery__image:has(.dresium-generated-wrapper.visible) > a {
	pointer-events: none !important;
	cursor: default !important;
	user-select: none !important;
}

/* Immagini generate dentro il wrapper */
.dresium-generated-image {
	width: 100%;
	height: auto; /* RG-WEBDEV 2025-11-22: Use natural height, not 100% of parent */
	max-width: 100%;
	object-fit: contain; /* Mantiene aspect ratio */
	pointer-events: auto; /* Abilita interazione */
	cursor: default; /* Non mostra pointer */
	transition: opacity 0.3s ease;
	display: block;
	user-select: none; /* Previene selezione */
}

/* RG-WEBDEV 2025-11-09: Fix FlexSlider viewport height per immagini generate alte
 * Quando un'immagine generata è più alta dell'originale, il flex-viewport
 * mantiene l'altezza originale e taglia l'immagine.
 * Soluzione: min-height auto permette al viewport di espandersi per contenere l'immagine
 *
 * DOM: .flex-viewport > .woocommerce-product-gallery__image > .dresium-generated-wrapper.visible
 */
.flex-viewport:has(.woocommerce-product-gallery__image .dresium-generated-wrapper.visible) {
	/*min-height: fit-content !important;
	height: auto !important;*/
}

/* RG-WEBDEV 2025-11-22: Universal viewport height adjustment for ANY gallery library
 * Supports FlexSlider, Slick, Swiper, Owl Carousel, Splide, and custom galleries
 * Applied via JavaScript when Dresium generated image is visible on active slide
 */
.flex-viewport.has-dresium-generated,         /* FlexSlider */
.slick-list.has-dresium-generated,            /* Slick Slider */
.swiper-wrapper.has-dresium-generated,        /* Swiper */
.owl-stage-outer.has-dresium-generated,       /* Owl Carousel */
.splide__track.has-dresium-generated,         /* Splide */
.woocommerce-product-gallery__wrapper.has-dresium-generated {  /* Fallback */
	/*min-height: fit-content !important;
	height: auto !important;*/
}

/* Immagine nascosta */
.dresium-generated-image.hidden {
	display: none;
}

/* Disabilita zoom WooCommerce quando c'è immagine generata visibile */
.woocommerce-product-gallery__image:has(.dresium-generated-wrapper.visible) .zoomImg {
	display: none !important;
	opacity: 0 !important;
}

/* Alternativa con class sul parent (più compatibile) */
.woocommerce-product-gallery__image.has-generated-visible .zoomImg {
	display: none !important;
	opacity: 0 !important;
}

/* Badge "Prova Virtuale" nell'angolo */
.dresium-generated-wrapper::before {
	content: "Prova Virtuale";
	position: absolute;
	top: 10px;
	left: 10px;
	background: linear-gradient(135deg, #5B6BF5 0%, #9B5BF5 100%);
	color: white;
	padding: 6px 12px;
	border-radius: 6px;
	font-size: 11px;
	font-weight: 700;
	font-family: "League Spartan", Sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	z-index: 20;
	pointer-events: none;
	box-shadow: 0 2px 8px rgba(91, 107, 245, 0.3);
}

/* Mobile responsive */
@media (max-width: 768px) {
	.dresium-generated-wrapper::before {
		font-size: 10px;
		padding: 4px 8px;
		top: 5px;
		left: 5px;
	}
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
	.dresium-modal,
	.dresium-modal::backdrop,
	#dresiumWrapper {
		display: none !important;
	}
}