/**
 * Dresium Base Styles
 *
 * Minimal reset and base styles for Dresium components
 *
 * @package Dresium
 * @version 2.0.0
 */

/* ============================================
   CSS SPECIFICITY STRATEGY - NO CASCADE LAYERS
   ============================================ */

/**
 * RG-WEBDEV 2025-11-24: CSS Cascade Layers strategy REMOVED
 *
 * IMPORTANT: @layer makes styles WEAKER, not stronger!
 * CSS Cascade order (lowest to highest priority):
 * 1. @layer styles (weakest)
 * 2. Unlayered styles (theme reset.css, Elementor CSS)
 * 3. Inline styles
 * 4. !important in @layer
 * 5. !important in unlayered styles (STRONGEST)
 *
 * Our strategy instead:
 * - Load Dresium CSS AFTER theme CSS (via wp_enqueue_scripts priority 999)
 * - Use ID selectors (#dresium-main-modal) for high specificity
 * - Use !important ONLY on critical properties that need to override theme
 * - Keep styles unlayered so they compete at same level as theme CSS
 */

/* ============================================
   DEFENSIVE RESET - ISOLATE FROM THEME/PAGE BUILDER CSS
   ============================================ */

/**
 * RG-WEBDEV 2025-11-22: Protect Dresium modals from external CSS interference
 * Neutralizes aggressive resets from themes (Hello Elementor, etc.) and page builders
 *
 * Strategy: Reset inheritance for all modal elements to prevent external styles
 * from leaking into Dresium components, then re-apply Dresium-specific styles.
 */

/* Step 1: Isolate modal root from external styles */
/* RG-WEBDEV 2025-11-22: DISABLED - all: initial was too aggressive
dialog.dresium-main-modal,
dialog.dresium-upload-modal,
dialog#dresium-main-modal,
dialog#dresium-upload-modal {
	all: initial;
	display: none;
	position: fixed;
	inset: 0;
	margin: auto;
	border: none;
	padding: 0;
	background: transparent;
	max-width: none;
	max-height: none;
	overflow: visible;
	color: initial;
}
*/

/* Step 2: Neutralize theme reset for ALL elements inside modals ONLY */
/* RG-WEBDEV 2025-11-22: DISABLED - all: unset broke modal functionality
/* IMPORTANT: Only targets elements INSIDE <dialog>, not triggers outside */
/*
dialog.dresium-main-modal *,
dialog.dresium-upload-modal *,
dialog#dresium-main-modal *,
dialog#dresium-upload-modal * {
	all: unset;
}
*/

/* Step 3-4: DISABLED - Not needed without all: unset */

/* ============================================
   MODAL-SPECIFIC HIGH SPECIFICITY OVERRIDES
   ============================================ */

/**
 * RG-WEBDEV 2025-11-24: Maximum specificity overrides for Dresium modals
 * Neutralizes Elementor reset.css and Hello theme interference
 *
 * Strategy: Use ID selectors + targeted !important on critical properties
 * ID specificity (1,0,0) + class (0,1,0) + element (0,0,1) = (1,1,1)
 * This beats Elementor's (0,0,1,1) selector weight
 *
 * Critical: Only affects elements INSIDE #dresium-main-modal and #dresium-upload-modal
 * Does NOT affect #dresiumWrapper or buttons outside modals (universal script compatibility)
 */

/* ===== BUTTONS - Override Elementor's pink button reset ===== */
/* RG-WEBDEV 2025-11-24: Nuclear option - EVERYTHING !important with ID specificity */
/* Specificity: (1,0,1) = ID + element, beats theme's (0,1,1) = attribute + element */
/* Plus !important beats non-!important at same specificity level */
/* Modal-specific components (nav items, dresium-btn, etc.) override these via higher specificity */
#dresium-main-modal button,
#dresium-upload-modal button {
	/* CRITICAL: Set explicit values, not inherit/initial which may fail */
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	border: none !important;
	border-width: 0 !important;
	border-style: none !important;
	border-color: transparent !important;
	border-radius: 0 !important;
	color: #333 !important;
	padding: 0 !important;
	margin: 0 !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	line-height: 1.5 !important;
	text-align: start !important;
	text-decoration: none !important;
	text-transform: none !important;
	transition: none !important;
	user-select: auto !important;
	-webkit-user-select: auto !important;
	-moz-user-select: auto !important;
	white-space: normal !important;
	width: auto !important;
	height: auto !important;
	min-width: 0 !important;
	min-height: 0 !important;
	max-width: none !important;
	max-height: none !important;
	/*display: inline-block !important; RG-WEBDEV */
	cursor: pointer !important;
	box-sizing: border-box !important;
	-webkit-appearance: none !important;
	appearance: none !important;
}

/* Re-apply Dresium button styles with maximum specificity */
/* RG-WEBDEV 2025-01-17: Updated font-size, border, border-radius, padding */
#dresium-main-modal .dresium-btn,
#dresium-upload-modal .dresium-btn {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	gap: var(--dresium-space-2) !important;
	padding: 16px !important;
	font-family: var(--dresium-font-primary) !important;
	font-size: 14px !important;
	font-weight: var(--dresium-weight-medium) !important;
	line-height: var(--dresium-leading-tight) !important;
	text-decoration: none !important;
	white-space: nowrap !important;
	border-style: none !important;
	border-radius: 8px !important;
	cursor: pointer !important;
	user-select: none !important;
	transition: all var(--dresium-transition-fast) var(--dresium-ease) !important;
	height: auto !important;
}

#dresium-main-modal .dresium-btn--primary,
#dresium-upload-modal .dresium-btn--primary {
	background-color: var(--dresium-primary) !important;
	color: var(--dresium-white) !important;
	border-color: var(--dresium-primary) !important;
}

/* RG-WEBDEV 2025-01-17: Hide select photo button by default, shown via JS when photos exist */
#dresium-main-modal #dresium-select-photo-btn {
	display: none !important;
}

#dresium-main-modal #dresium-select-photo-btn.dresium-btn--visible {
	display: flex !important;
}

/* RG-WEBDEV 2025-01-17: Reset button specific styles */
#dresium-main-modal .dresium-btn--reset {
	background: #f4f5f9 !important;
	color: #000000 !important;
	font-weight: 500 !important;
	justify-content: center !important;
	gap: 8px !important;
}

#dresium-main-modal .dresium-btn--reset svg {
	flex-shrink: 0 !important;
}

#dresium-main-modal .dresium-btn--reset:hover {
	background: #e8e9ed !important;
}

#dresium-main-modal .dresium-btn--gradient,
#dresium-upload-modal .dresium-btn--gradient {
	background: var(--dresium-gradient) !important;
	color: var(--dresium-white) !important;
	border: none !important;
}

/* RG-WEBDEV 2025-01-18: Loading state - hide text and show spinner */
/* Targets buttons in #dresiumWrapper (product gallery) */
#dresiumWrapper .dresium-btn--loading,
.dresium-openid-connect-login-button.dresium-btn--loading {
	color: transparent !important;
	pointer-events: none !important;
	position: relative !important;
}

/* Spinner for loading state in product gallery */
#dresiumWrapper .dresium-btn--loading::after,
.dresium-openid-connect-login-button.dresium-btn--loading::after {
	content: "" !important;
	position: absolute !important;
	top: 50% !important;
	left: 50% !important;
	width: 20px !important;
	height: 20px !important;
	border: 2px solid rgba(255, 255, 255, 0.3) !important;
	border-top-color: #ffffff !important;
	border-radius: 50% !important;
	animation: dresium-spin 0.8s linear infinite !important;
}

/* RG-WEBDEV 2026-03-20: Countdown style for generation button */
#dresiumWrapper .dresium-btn--countdown,
.dresium-openid-connect-login-button.dresium-btn--countdown {
	pointer-events: none !important;
	position: relative !important;
}

#dresiumWrapper .dresium-btn--countdown .dresium-countdown,
.dresium-openid-connect-login-button.dresium-btn--countdown .dresium-countdown {
	display: inline-block !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	color: #ffffff !important;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
	visibility: visible !important;
	opacity: 1 !important;
}

#dresium-main-modal .dresium-btn--secondary,
#dresium-upload-modal .dresium-btn--secondary {
	background-color: var(--dresium-white) !important;
	color: var(--dresium-primary) !important;
	border-color: var(--dresium-primary) !important;
}

#dresium-main-modal .dresium-btn--secondary:hover,
#dresium-upload-modal .dresium-btn--secondary:hover {
	background-color: var(--dresium-gray-50) !important;
	color: var(--dresium-primary-hover) !important;
	border-color: var(--dresium-primary-hover) !important;
}

#dresium-main-modal .dresium-btn--secondary:active,
#dresium-main-modal .dresium-btn--secondary:focus,
#dresium-main-modal .dresium-btn--secondary:visited,
#dresium-upload-modal .dresium-btn--secondary:active,
#dresium-upload-modal .dresium-btn--secondary:focus,
#dresium-upload-modal .dresium-btn--secondary:visited {
	background-color: var(--dresium-gray-100) !important;
	color: var(--dresium-primary) !important;
	border-color: var(--dresium-primary) !important;
}

#dresium-main-modal .dresium-btn--ghost,
#dresium-upload-modal .dresium-btn--ghost {
	background-color: transparent !important;
	color: var(--dresium-gray-700) !important;
	border-color: transparent !important;
}

#dresium-main-modal .dresium-btn--danger,
#dresium-upload-modal .dresium-btn--danger {
	background-color: var(--dresium-error) !important;
	color: var(--dresium-white) !important;
	border-color: var(--dresium-error) !important;
}

/* RG-WEBDEV 2025-01-18: Exception for crop control buttons - fixed size, not full width */
#dresium-main-modal .dresium-crop-controls .dresium-btn,
#dresium-upload-modal .dresium-crop-controls .dresium-btn {
	width: 40px !important;
	height: 40px !important;
	min-width: 40px !important;
	min-height: 40px !important;
	padding: 0 !important;
}

@media (min-width: 768px) {
	#dresium-main-modal .dresium-crop-controls .dresium-btn,
	#dresium-upload-modal .dresium-crop-controls .dresium-btn {
		width: 44px !important;
		height: 44px !important;
		min-width: 44px !important;
		min-height: 44px !important;
	}
}

#dresium-main-modal .dresium-modal__close,
#dresium-upload-modal .dresium-modal__close {
	width: 36px !important;
	height: 36px !important;
	padding: 0 !important;
	background-color: transparent !important;
	border: none !important;
	border-radius: var(--dresium-radius-lg) !important;
	color: var(--dresium-gray-500) !important;
	font-size: var(--dresium-text-2xl) !important;
	line-height: 1 !important;
	cursor: pointer !important;
}

/* RG-WEBDEV 2025-01-17: Main modal close button - black X, no background, no scale */
#dresium-main-modal .dresium-main-modal__close {
	position: absolute !important;
	top: 12px !important;
	right: 12px !important;
	width: 32px !important;
	height: 32px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: transparent !important;
	border: none !important;
	cursor: pointer !important;
	font-size: 0 !important;
	z-index: 100 !important;
}

#dresium-main-modal .dresium-main-modal__close:hover {
	background: transparent !important;
}

/* RG-WEBDEV 2025-01-18: Removed ::before pseudo-element - SVG is now directly in HTML template */

/* Responsive: mobile - close button più accessibile */
@media (max-width: 768px) {
	#dresium-main-modal .dresium-main-modal__close {
		top: 8px !important;
		right: 8px !important;
	}
}

/* ===== LINKS - Override Elementor's pink links (#c36) ===== */
#dresium-main-modal a,
#dresium-upload-modal a {
	background-color: transparent !important;
	color: inherit !important;
	text-decoration: none !important;
}

/* Re-apply styled links */
#dresium-main-modal a[href],
#dresium-upload-modal a[href] {
	color: var(--dresium-primary) !important;
	text-decoration: none !important;
}

#dresium-main-modal a[href]:hover,
#dresium-upload-modal a[href]:hover {
	color: var(--dresium-primary-hover) !important;
	text-decoration: underline !important;
}

/* ===== INPUTS - Override Elementor's 100% width + style resets ===== */
/* RG-WEBDEV 2025-01-17: Removed select from this rule to allow custom dropdown styling */
#dresium-main-modal input,
#dresium-main-modal textarea,
#dresium-upload-modal input,
#dresium-upload-modal textarea {
	font-family: inherit !important;
	font-size: inherit !important;
	line-height: inherit !important;
	margin: 0 !important;
	border: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
	transition: none !important;
	width: auto !important;
	box-sizing: border-box !important;
}

/* Re-apply Dresium input styles */
#dresium-main-modal .dresium-input,
#dresium-upload-modal .dresium-input {
	width: 100% !important;
	padding: var(--dresium-space-3) var(--dresium-space-4) !important;
	font-family: var(--dresium-font-primary) !important;
	font-size: var(--dresium-text-sm) !important;
	color: var(--dresium-gray-900) !important;
	line-height: var(--dresium-leading-normal) !important;
	background-color: var(--dresium-white) !important;
	border: 1px solid var(--dresium-gray-300) !important;
	border-radius: var(--dresium-radius-lg) !important;
	transition: all var(--dresium-transition-fast) var(--dresium-ease) !important;
}

/* ===== TYPOGRAPHY - Override Elementor's typography resets ===== */
/* RG-WEBDEV 2025-11-24: Apply specific typography styles instead of inherit */
#dresium-main-modal h1,
#dresium-main-modal h2,
#dresium-main-modal h3,
#dresium-main-modal h4,
#dresium-main-modal h5,
#dresium-main-modal h6,
#dresium-upload-modal h1,
#dresium-upload-modal h2,
#dresium-upload-modal h3,
#dresium-upload-modal h4,
#dresium-upload-modal h5,
#dresium-upload-modal h6 {
	font-family: "Poppins", Sans-serif !important;
	font-size: 18px !important;
	font-weight: 600 !important;
	color: #000000 !important;
	line-height: 1.5 !important;
	margin-block-end: 0 !important;
	margin-block-start: 0 !important;
}

#dresium-main-modal p,
#dresium-upload-modal p {
	font-family: "Inter", Sans-serif !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	/* color: inherit !important; RGWEBDEV */
	line-height: 1.5 !important;
	margin-block-end: 0 !important;
	margin-block-start: 0 !important;
}

/* Re-apply specific modal typography */
#dresium-main-modal .dresium-modal__title,
#dresium-upload-modal .dresium-modal__title {
	margin: 0 !important;
	padding: 0 !important;
	font-size: var(--dresium-text-2xl) !important;
	font-weight: var(--dresium-weight-semibold) !important;
	font-family: var(--dresium-font-display) !important;
	line-height: var(--dresium-leading-tight) !important;
	color: var(--dresium-gray-900) !important;
}

/* ============================================
   SCOPED RESET (only for Dresium components)
   ============================================ */

[class^="dresium-"],
[class*=" dresium-"] {
	box-sizing: border-box;
}

[class^="dresium-"] *,
[class^="dresium-"] *::before,
[class^="dresium-"] *::after,
[class*=" dresium-"] *,
[class*=" dresium-"] *::before,
[class*=" dresium-"] *::after {
	box-sizing: inherit;
}

/* ============================================
   BASE TYPOGRAPHY
   ============================================ */

.dresium-modal,
.dresium-modal * {
	font-family: var(--dresium-font-primary);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Visibility */
.dresium-hidden {
	display: none !important;
}

.dresium-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

/* Focus styles */
.dresium-focus-visible:focus-visible {
	outline: 2px solid var(--dresium-primary);
	outline-offset: 2px;
}

/* Smooth transitions */
.dresium-transition {
	transition-property: all;
	transition-timing-function: var(--dresium-ease);
	transition-duration: var(--dresium-transition-base);
}

/* ============================================
   LOADING STATE
   ============================================ */

@keyframes dresium-spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

@keyframes dresium-pulse {
	0%, 100% {
		opacity: 1;
	}
	50% {
		opacity: 0.5;
	}
}

@keyframes dresium-fade-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes dresium-slide-up {
	from {
		transform: translateY(20px);
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* High contrast mode support */
@media (prefers-contrast: high) {
	.dresium-modal {
		border: 2px solid currentColor;
	}
}