/**
 * Universal Elementor Engine - Shared UI Components Stylesheet
 *
 * Lightweight, zero-duplication styles for all 10 core UI components.
 * Consumes --uee-sys-* tokens directly.
 */

/* ==========================================================================
   1. Button (.uwe-btn)
   ========================================================================== */
.uwe-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--uee-sys-space-sm, 8px);
	font-family: var(--uee-sys-font-label, inherit);
	font-weight: var(--uee-sys-font-weight-label, 500);
	text-decoration: none;
	cursor: pointer;
	border: 1px solid transparent;
	border-radius: var(--uee-sys-radius-md, 8px);
	max-width: 100%;
	white-space: normal;
	text-align: center;
	transition: background-color var(--uee-sys-transition-base),
	            border-color var(--uee-sys-transition-base),
	            color var(--uee-sys-transition-base),
	            box-shadow var(--uee-sys-transition-base);
}

.uwe-btn--sm { padding: 6px 12px; font-size: 0.875rem; }
.uwe-btn--md { padding: 10px 20px; font-size: 1rem; }
.uwe-btn--lg { padding: 14px 28px; font-size: 1.125rem; }
.uwe-btn--block { width: 100%; }

.uwe-btn--primary {
	background-color: var(--uee-sys-color-primary, #3b82f6);
	color: #ffffff;
}
.uwe-btn--primary:hover {
	background-color: var(--uee-sys-color-primary-hover, #2563eb);
}

.uwe-btn--secondary {
	background-color: var(--uee-sys-color-secondary, #64748b);
	color: #ffffff;
}

.uwe-btn--outline {
	background-color: transparent;
	border-color: var(--uee-sys-color-primary, #3b82f6);
	color: var(--uee-sys-color-primary, #3b82f6);
}
.uwe-btn--outline:hover {
	background-color: var(--uee-sys-color-primary, #3b82f6);
	color: #ffffff;
}

.uwe-btn--ghost {
	background-color: transparent;
	color: var(--uee-sys-color-text, #0f172a);
}
.uwe-btn--ghost:hover {
	background-color: var(--uee-sys-color-bg, #f8fafc);
}

/* ==========================================================================
   2. Card (.uwe-card)
   ========================================================================== */
.uwe-card {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	background-color: var(--uee-sys-color-surface, #ffffff);
	border: 1px solid var(--uee-sys-color-border, #e2e8f0);
	border-radius: var(--uee-sys-radius-md, 8px);
	overflow: hidden;
	box-shadow: var(--uee-sys-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05));
	transition: box-shadow var(--uee-sys-transition-base);
}
.uwe-card:hover {
	box-shadow: var(--uee-sys-shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1));
}
.uwe-card__media { width: 100%; overflow: hidden; }
.uwe-card__media img { width: 100%; height: auto; object-fit: cover; display: block; }
.uwe-card__body { padding: clamp(var(--uee-sys-space-md, 16px), 3vw, var(--uee-sys-space-lg, 24px)); flex-grow: 1; }
.uwe-card__title { margin: 0 0 var(--uee-sys-space-sm, 8px) 0; font-family: var(--uee-sys-font-heading); font-size: clamp(1.125rem, 2.5vw, 1.375rem); word-break: break-word; }
.uwe-card__description { color: var(--uee-sys-color-muted, #64748b); font-family: var(--uee-sys-font-body); font-size: 0.9375rem; line-height: var(--uee-sys-line-height-body, 1.5); }
.uwe-card__footer { padding: var(--uee-sys-space-md, 16px) clamp(var(--uee-sys-space-md, 16px), 3vw, var(--uee-sys-space-lg, 24px)); border-top: 1px solid var(--uee-sys-color-border, #e2e8f0); }

/* ==========================================================================
   3. Image (.uwe-image)
   ========================================================================== */
.uwe-image { margin: 0; padding: 0; max-width: 100%; display: block; }
.uwe-image__img { max-width: 100%; width: auto; height: auto; display: block; border-radius: inherit; }
.uwe-image__caption { font-size: 0.875rem; color: var(--uee-sys-color-muted, #64748b); margin-top: var(--uee-sys-space-xs, 4px); word-break: break-word; }

/* ==========================================================================
   4. Heading (.uwe-heading)
   ========================================================================== */
.uwe-heading { display: flex; flex-direction: column; gap: var(--uee-sys-space-xs, 4px); }
.uwe-heading__subtitle { font-family: var(--uee-sys-font-label); font-size: var(--uee-sys-font-size-label, 0.875rem); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--uee-sys-color-primary, #3b82f6); }
.uwe-heading__title { margin: 0; font-family: var(--uee-sys-font-heading); font-weight: var(--uee-sys-font-weight-heading, 600); line-height: var(--uee-sys-line-height-heading, 1.25); color: var(--uee-sys-color-text, #0f172a); }

/* ==========================================================================
   5. Badge (.uwe-badge)
   ========================================================================== */
.uwe-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--uee-sys-space-xs, 4px);
	padding: 2px 8px;
	font-family: var(--uee-sys-font-label);
	font-size: 0.75rem;
	font-weight: 600;
	border-radius: var(--uee-sys-radius-pill, 9999px);
	background-color: var(--uee-sys-color-bg, #f8fafc);
	color: var(--uee-sys-color-text, #0f172a);
	border: 1px solid var(--uee-sys-color-border, #e2e8f0);
}
.uwe-badge--primary { background-color: var(--uee-sys-color-primary, #3b82f6); color: #ffffff; border-color: transparent; }
.uwe-badge--accent { background-color: var(--uee-sys-color-accent, #06b6d4); color: #ffffff; border-color: transparent; }

/* ==========================================================================
   6. Price (.uwe-price)
   ========================================================================== */
.uwe-price { display: inline-flex; align-items: baseline; gap: var(--uee-sys-space-xs, 4px); flex-wrap: wrap; }
.uwe-price__original { text-decoration: line-through; color: var(--uee-sys-color-text-muted, #64748b); font-size: 1rem; margin-right: var(--uee-sys-space-xs, 4px); }
.uwe-price__main { display: inline-flex; align-items: baseline; }
.uwe-price__currency { font-size: 1.25rem; font-weight: 600; color: var(--uee-sys-color-text, #0f172a); }
.uwe-price__amount { font-size: 2.25rem; font-weight: 700; color: var(--uee-sys-color-text, #0f172a); line-height: 1; }
.uwe-price__period { font-size: 0.875rem; color: var(--uee-sys-color-text-muted, #64748b); margin-left: 2px; }

/* ==========================================================================
   7. Rating (.uwe-rating)
   ========================================================================== */
.uwe-rating { display: inline-flex; align-items: center; gap: var(--uee-sys-space-xs, 4px); }
.uwe-rating__stars { color: #f59e0b; font-size: 1rem; letter-spacing: 2px; }
.uwe-rating__star--empty { color: var(--uee-sys-color-border, #e2e8f0); }
.uwe-rating__label { font-size: 0.875rem; font-weight: 500; color: var(--uee-sys-color-text-muted, #64748b); }

/* ==========================================================================
   8. Modal (.uwe-modal)
   ========================================================================== */
.uwe-modal {
	position: fixed;
	top: 0; left: 0; width: 100vw; height: 100vh;
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 99999;
}
.uwe-modal[aria-hidden="false"] { display: flex; }
.uwe-modal__backdrop {
	position: absolute; top: 0; left: 0; width: 100%; height: 100%;
	background: rgba(15, 23, 42, 0.6);
}
.uwe-modal__dialog {
	position: relative;
	background: var(--uee-sys-color-surface, #ffffff);
	padding: var(--uee-sys-space-xl, 32px);
	border-radius: var(--uee-sys-radius-md, 8px);
	max-width: 540px;
	width: 90%;
	box-shadow: var(--uee-sys-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
}
.uwe-modal__close {
	position: absolute; top: 16px; right: 16px;
	background: transparent; border: none; font-size: 1.5rem; cursor: pointer;
}

/* ==========================================================================
   9. Slider (.uwe-slider)
   ========================================================================== */
.uwe-slider { position: relative; width: 100%; }
.uwe-slider__track {
	display: flex;
	gap: var(--uee-sys-space-md, 16px);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.uwe-slider__track::-webkit-scrollbar { display: none; }
.uwe-slider__slide { flex: 0 0 100%; scroll-snap-align: start; }
.uwe-slider__arrow {
	position: absolute; top: 50%; transform: translateY(-50%);
	background: var(--uee-sys-color-surface, #ffffff);
	border: 1px solid var(--uee-sys-color-border, #e2e8f0);
	border-radius: var(--uee-sys-radius-full, 9999px);
	width: 36px; height: 36px; cursor: pointer;
}
.uwe-slider__arrow--prev { left: -18px; }
.uwe-slider__arrow--next { right: -18px; }
.uwe-slider__dots { display: flex; justify-content: center; gap: 6px; margin-top: 12px; }
.uwe-slider__dot {
	width: 8px; height: 8px; border-radius: 50%;
	background: var(--uee-sys-color-border, #e2e8f0);
	border: none; cursor: pointer;
}
.uwe-slider__dot--active { background: var(--uee-sys-color-primary, #3b82f6); width: 16px; border-radius: 4px; }

/* ==========================================================================
   10. Form Field (.uwe-form-field)
   ========================================================================== */
.uwe-form-field { display: flex; flex-direction: column; gap: var(--uee-sys-space-xs, 4px); }
.uwe-form-field__label { font-size: 0.875rem; font-weight: 500; color: var(--uee-sys-color-text, #0f172a); }
.uwe-form-field__required { color: #ef4444; }
.uwe-form-field__input {
	padding: 8px 12px;
	border: 1px solid var(--uee-sys-color-border, #e2e8f0);
	border-radius: var(--uee-sys-radius-md, 8px);
	font-family: inherit; font-size: 0.9375rem;
	background: var(--uee-sys-color-surface, #ffffff);
	color: var(--uee-sys-color-text, #0f172a);
	outline: none;
	transition: border-color var(--uee-sys-transition-fast), box-shadow var(--uee-sys-transition-fast);
}
.uwe-form-field__input:focus {
	border-color: var(--uee-sys-color-primary, #3b82f6);
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.uwe-form-field__helper { font-size: 0.75rem; color: var(--uee-sys-color-text-muted, #64748b); margin: 0; }
.uwe-form-field__error { font-size: 0.75rem; color: #ef4444; margin: 0; }