/* RG-WEBDEV: integrazione, font */

@import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@100..900&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');

/**/

.dresium-btn, #upload-btn {
	display: flex;
	/*margin: 10px; RG-WEBDEV: disabilitato */
	/*padding: 10px 16px; RG-WEBDEV: disabilitato */
	gap: 10px;
	/*font-size: 14px; RG-WEBDEV: disabilitato */
	/*background: #2c7be5; RG-WEBDEV: disabilitato */
	/*color: #fff; RG-WEBDEV: disabilitato */
	/*border: none; RG-WEBDEV: disabilitato */
	/*border-radius: 6px; RG-WEBDEV: disabilitato */
	/*cursor: pointer; RG-WEBDEV: disabilitato */
	/*transition: background 0.2s ease-in-out; RG-WEBDEV: disabilitato */
	/*width: 100px; RG-WEBDEV: disabilitato */
	/*height: 40px; RG-WEBDEV: disabilitato */
	justify-content: center;
	align-items: center;
	/* RG-WEBDEV */
	width: auto;
	text-decoration: none;
	background-color: transparent;
	font-family: "League Spartan", Sans-serif;
	/*font-size: 18px; RG-WEBDEV*/
	font-weight: 600;
	/*color: #000000; RG-WEBDEV: disabilitato */
	/*background-color: #FFFFFF; RG-WEBDEV: disabilitato */
	/*box-shadow: 0px 0px 20px 8px rgba(91.99999999999989, 52.00000000000002, 235, 0.25); RG-WEBDEV: disabilitato */
	transition-duration: 1s;
	text-align: center;
  	transition: all .3s;
	border-style: none;
	border-radius: 5px 5px 5px 5px;
	/*padding: 8px 8px 8px 8px; RG-WEBDEV: disabilitato */
	box-sizing: border-box;
	/*position: absolute; RG-WEBDEV: disabilitato */
	/*z-index: 2; RG-WEBDEV: disabilitato */
}

#upload-btn {
	width: 40px !important;
	background-color: transparent;
	border: 1px solid #2c7be5;
	display: flex;
	padding: 0 !important;
	border: 1px solid #4976fe;
	border-radius: 6px;
}

/* RG-WEBDEV: disabilitato
.dresium-btn:hover {
	color: #fff;
}*/

/* RG-WEBDEV: integrazione */
.dresium-btn:focus, .dresium-btn:hover {
	/*background-color: transparent; RG-WEBDEV: disabilitato */
	/*background-image: linear-gradient(90deg, #4C6EF5 0%, #4C6EF5 100%); RG-WEBDEV: disabilitato */
	/*border-color: #4C6EF5; RG-WEBDEV: disabilitato */
	/*color: #fff; RG-WEBDEV: disabilitato */
}
/**/

.dresium-btn.loading:after {
	content: '';
	background: url('../img/loader.gif');
	width: 20px;
	height: 20px;
	display: inline-block;
	background-size: contain;
	background-repeat: no-repeat;
}

.dresium-btn.loading > span {
	display: none;
}

/**/

.dresium-share-buttons > a.whatsapp > img {
	width: auto;
}

/**/

#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: 10px;
	background-color: #ccc;
	border-radius: 6px;
	overflow: hidden;
	justify-content: center;
	align-items: center;
}

/* Bottone generico iniziale */
.dresium-options > .toggle-btn {
	display: inline-block;
	padding: 6px 12px;
	background: #ccc;
	border-radius: 6px;
	cursor: pointer;
}

/* Opzioni nascoste inizialmente */
.dresium-options span:not(.toggle-btn) {
	display: inline-block;
	max-width: 0;
	padding: 0;
	margin: 0;
	opacity: 0;
	background: #eee;
	border-radius: 50%;
	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;
}

/* Mostra le opzioni quando il mouse è sopra */
.dresium-options:hover span {
	display: inline-block;
}

/* Mostra tutte le opzioni al passaggio del mouse */
.dresium-options:hover span:not(.toggle-btn) {
	max-width: 28px; /* larghezza desiderata */
	padding: 2px;
	margin: 0 6px;
	opacity: 1;
}

/* Stato selezionato */
.dresium-options span.selected {
	background: #aaa;
	border: 2px solid #555;
}

/* === ICONCINE === */
/* ACTION */
.dresium-action[data-dresium-action="sitting"]::before { content: "🪑"; }
.dresium-action[data-dresium-action="running"]::before { content: "🏃"; }
.dresium-action[data-dresium-action="drinking"]::before { content: "🥤"; }
.dresium-action[data-dresium-action="standing"]::before { content: "🧍"; }

/* TIME */
.dresium-time[data-dresium-time="morning"]::before { content: "🌅"; }
.dresium-time[data-dresium-time="afternoon"]::before { content: "🌞"; }
.dresium-time[data-dresium-time="evening"]::before { content: "🌆"; }
.dresium-time[data-dresium-time="night"]::before { content: "🌙"; }

/* SCENE */
.dresium-scene[data-dresium-scene="park"]::before { content: "🌳"; }
.dresium-scene[data-dresium-scene="gym"]::before { content: "🏋️"; }
.dresium-scene[data-dresium-scene="home"]::before { content: "🏠"; }
.dresium-scene[data-dresium-scene="beach"]::before { content: "🏖️"; }
.dresium-scene[data-dresium-scene="mountain"]::before { content: "⛰️"; }
.dresium-scene[data-dresium-scene="city"]::before { content: "🌆"; }
.dresium-scene[data-dresium-scene="school"]::before { content: "🏫"; }
.dresium-scene[data-dresium-scene="university"]::before { content: "🎓"; }
.dresium-scene[data-dresium-scene="worship-place"]::before { content: "⛪"; }
.dresium-scene[data-dresium-scene="restaurant"]::before { content: "🍽️"; }
.dresium-scene[data-dresium-scene="pub"]::before { content: "🍺"; }
.dresium-scene[data-dresium-scene="mountain-chalet"]::before { content: "🏔️"; }
.dresium-scene[data-dresium-scene="concert"]::before { content: "🎤"; }

/* FACIAL EXPRESSION */
.dresium-facial-expression[data-dresium-facial-expression="smiling"]::before { content: "😊"; }
.dresium-facial-expression[data-dresium-facial-expression="laughing"]::before { content: "😂"; }
.dresium-facial-expression[data-dresium-facial-expression="sad"]::before { content: "😢"; }
.dresium-facial-expression[data-dresium-facial-expression="serious"]::before { content: "😐"; }
.dresium-facial-expression[data-dresium-facial-expression="neutral"]::before { content: "🙂"; }

/* SIZE */
.dresium-size[data-dresium-size="slim"]::before { content: "🧍"; }
.dresium-size[data-dresium-size="average"]::before { content: "👤"; }
.dresium-size[data-dresium-size="stocky"]::before { content: "💪"; }
.dresium-size[data-dresium-size="slender"]::before { content: "🧘"; }
.dresium-size[data-dresium-size="muscolar"]::before { content: "🏋️"; }
.dresium-size[data-dresium-size="oversize"]::before { content: "🧸"; }

/* EVENT */
.dresium-event[data-dresium-event="party"]::before { content: "🎉"; }
.dresium-event[data-dresium-event="race"]::before { content: "🏁"; }
.dresium-event[data-dresium-event="birthday"]::before { content: "🎂"; }
.dresium-event[data-dresium-event="romantic-date"]::before { content: "💖"; }
.dresium-event[data-dresium-event="interview"]::before { content: "💼"; }
.dresium-event[data-dresium-event="training"]::before { content: "🤸"; }

/* INQUADRATURA (NUOVA) */
.dresium-framing[data-dresium-framing="front"]::before   { content: "📷"; } /* fronte */
.dresium-framing[data-dresium-framing="profile"]::before { content: "👤"; } /* profilo */


/* layout piccolo per mobile: riduce dimensione icone */
@media (max-width:420px){
	.dresium-options span:not(.toggle-btn){ width:34px;height:34px;line-height:34px;font-size:16px; }
	.dresium-options > .toggle-btn{ padding:4px 8px; font-size:13px; }
}

/****/

#photo-thumbnails > div.thumbnail.active img {
	border: 3px solid red;	
}

/****/

img.pswp__img {
	object-fit: contain;
}

/****/

/* RG-WEBDEV: Fixed button overlap issue and added positioning support */
#dresiumWrapper {
	display: flex;
	flex-direction: row; /* Changed from column to row for horizontal layout */
	gap: 8px; /* Spacing between buttons */
	position: absolute;
	z-index: 99;
	/* RG-WEBDEV 2026-04-17: Default position is now bottom-left */
	top: auto;
	bottom: 12px;
	left: 12px;
}

/* RG-WEBDEV 2025-11-03: Fix for single-image products
 * When #dresiumWrapper is injected as first child in .woocommerce-product-gallery__wrapper,
 * it causes the actual product image to become :nth-child(2), triggering WooCommerce's
 * multi-image gallery CSS rule that reduces width to 25%.
 * This rule ensures the product image maintains 100% width even when it's :nth-child(2).
 */
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper > #dresiumWrapper + .woocommerce-product-gallery__image {
	width: 100% !important;
	display: block !important;
}

/* Position variants - controlled via class */
#dresiumWrapper.dresium-position-bottom-left {
	top: auto;
	bottom: 12px;
	left: 12px;
}

#dresiumWrapper.dresium-position-bottom-right {
	top: auto;
	bottom: 12px;
	left: auto;
	right: 12px;
}

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

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

#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: 4px;
	margin: 10px;
}

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

#photo-uploader {
	display: flex;
	flex-direction: row;
}

.hide {
	display: none;
}

/***/


/****/

				#dresium-iframe-auth {
					position: fixed;
					z-index: 999999;
					top: calc(50% - 300px);
					bottom: 0;
					left: 0;
					right: 0;
					width: 100%;
					max-width: 450px;
					height: 100%;
					max-height: 600px;
					overflow: scroll;
					padding: 0;
					margin: 0 auto;
					display: flex;
					justify-content: center;
					align-items: flex-start;
					background: white;
					border-radius: 10px;
					box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
				}

				#dresium-iframe-auth div.container {
					width: 100%;
					height: 100%;
				}

				#dresium-iframe-auth-modal-overlay {
					position: fixed;
					top: 0;
					left: 0;
					width: 100%;
					height: 100vh;
					opacity: 0.5;
					z-index: 98;
					background-color: #000;
				}

				body.oauth-hide {
					display: none !important;
				}

				#dresium-iframe-auth {

				}

				.header {
					background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
					color: white;
					padding: 24px;
					text-align: center;
				}

				.header h1 {
					font-size: 24px;
					font-weight: 600;
					margin-bottom: 8px;
				}

				.header p {
					font-size: 14px;
					opacity: 0.9;
				}

				.iframe-wrapper {
					position: relative;
					width: 100%;
					height: 600px;
					background: #f5f5f5;
				}

				.iframe-wrapper iframe {
					width: 100%;
					height: 100%;
					border: none;
				}

				#dresium-iframe-auth #iframeLoading {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					text-align: center;
				}

				#dresium-iframe-auth .spinner {
					width: 50px;
					height: 50px;
					border: 4px solid #e0e0e0;
					border-top-color: #667eea;
					border-radius: 50%;
					animation: spin 1s linear infinite;
					margin: 0 auto 16px;
				}

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

				#dresium-iframe-auth #iframeLoading p {
					color: #666;
					font-size: 14px;
				}

				.footer {
					padding: 16px 24px;
					background: #f9f9f9;
					border-top: 1px solid #e0e0e0;
					text-align: center;
					font-size: 12px;
					color: #666;
				}

				.security-badge {
					display: inline-flex;
					align-items: center;
					gap: 6px;
					background: #e8f5e9;
					color: #2e7d32;
					padding: 6px 12px;
					border-radius: 20px;
					font-size: 12px;
					font-weight: 500;
					margin-top: 8px;
				}

				.security-badge svg {
					width: 16px;
					height: 16px;
				}

				.error-message {
					display: none;
					background: #ffebee;
					color: #c62828;
					padding: 16px;
					margin: 16px;
					border-radius: 8px;
					font-size: 14px;
					line-height: 1.5;
				}

				.error-message.show {
					display: block;
				}

/* ============================================================================
 * 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;
}

/* 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: 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 */
}

/* 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;
	}
}

/* ============================================
   ONBOARDING BANNER
   RG-WEBDEV 2026-03-15: First-time visitor banner
   Simple horizontal layout with pattern-based theming
   ============================================ */

.dresium-onboarding-banner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px;
	padding: 12px 16px;
	border-radius: 8px;
	font-family: var(--dresium-font-primary, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);
	opacity: 0;
	transform: translateY(-10px);
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.dresium-onboarding-banner--visible {
	opacity: 1;
	transform: translateY(0);
}

.dresium-onboarding-banner--hiding {
	opacity: 0;
	transform: translateY(-10px);
}

/* Text with inline icon */
.dresium-onboarding-banner__text {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
}

.dresium-onboarding-banner__text svg {
	flex-shrink: 0;
}

/* Close button */
.dresium-onboarding-banner__close {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	background: rgba(255, 255, 255, 0.3);
	border: none;
	border-radius: 50%;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.2s ease;
}

.dresium-onboarding-banner__close:hover {
	background: rgba(255, 255, 255, 0.5);
	transform: scale(1.1);
}

.dresium-onboarding-banner__close svg {
	color: inherit;
	opacity: 0.8;
}

/* ============================================
   PATTERN-BASED COLOR THEMES
   Colors match the try-on button settings
   ============================================ */

/* Standard theme - Gradient purple/blue */
.dresium-onboarding-banner--standard {
	background: linear-gradient(90deg, #4C6EF5 0%, #9B51E0 100%);
	color: #ffffff;
}

/* Black & White theme */
.dresium-onboarding-banner--bw {
	background: linear-gradient(90deg, #374151 0%, #1f2937 100%);
	color: #ffffff;
}

/* Sepia theme - Warm tones */
.dresium-onboarding-banner--sepia {
	background: linear-gradient(90deg, #92400e 0%, #78350f 100%);
	color: #ffffff;
}

/* Mobile responsive */
@media (max-width: 480px) {
	.dresium-onboarding-banner {
		padding: 10px 14px;
	}

	.dresium-onboarding-banner__text {
		font-size: 13px;
		gap: 8px;
	}

	.dresium-onboarding-banner__text svg {
		width: 16px;
		height: 16px;
	}

	.dresium-onboarding-banner__close {
		width: 24px;
		height: 24px;
	}
}