/*!
 * WooKit — Quick View.
 *
 * Consumes --wookit-* tokens defined in includes/config.php. Hardcoded
 * fallbacks track the indigo + slate default palette so the widget still
 * renders correctly if the inline tokens fail to load. Animations honor
 * prefers-reduced-motion.
 */

.wookit-quick-view {
	display: inline-block;
	font-family: var( --wookit-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif ) !important;
}

.wookit-quick-view__trigger {
	background: var( --wookit-surface, #ffffff ) !important;
	color: var( --wookit-text, #0f172a ) !important;
	border: 1px solid var( --wookit-border, #e2e8f0 ) !important;
	border-radius: var( --wookit-radius-md, 8px ) !important;
	padding: 0.5rem 1rem !important;
	font-family: inherit !important;
	font-size: 0.875rem !important;
	font-weight: 500 !important;
	cursor: pointer !important;
	transition:
		background-color 150ms ease,
		color 150ms ease,
		border-color 150ms ease;
}

.wookit-quick-view__trigger:hover,
.wookit-quick-view__trigger:focus-visible {
	background: var( --wookit-accent, #6366f1 ) !important;
	color: var( --wookit-accent-fg, #ffffff ) !important;
	border-color: var( --wookit-accent, #6366f1 ) !important;
}

.wookit-quick-view__modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var( --wookit-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif ) !important;
}

.wookit-quick-view__modal[hidden] {
	display: none;
}

.wookit-quick-view__overlay {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	background: var( --wookit-overlay, rgba( 15, 23, 42, 0.55 ) ) !important;
	border: 0 !important;
	cursor: pointer !important;
	animation: wookit-qv-fade 250ms ease forwards;
}

.wookit-quick-view__panel {
	position: relative;
	max-width: 920px;
	width: calc( 100% - 2rem );
	max-height: calc( 100vh - 4rem );
	background: var( --wookit-surface, #ffffff ) !important;
	color: var( --wookit-body, #334155 ) !important;
	border-radius: var( --wookit-radius-lg, 10px ) !important;
	overflow-y: auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem;
	padding: 1rem !important;
	box-shadow: 0 25px 50px -12px rgba( 15, 23, 42, 0.25 ) !important;
	animation: wookit-qv-scale 250ms ease forwards;
}

@media ( max-width: 781px ) {
	.wookit-quick-view__panel {
		grid-template-columns: 1fr;
		gap: 1rem;
	}
}

.wookit-quick-view__close {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	width: 2rem;
	height: 2rem;
	display: grid;
	place-items: center;
	border: 0 !important;
	background: transparent !important;
	color: var( --wookit-muted, #64748b ) !important;
	font-size: 1.5rem !important;
	line-height: 1 !important;
	cursor: pointer !important;
	border-radius: 50% !important;
	transition: background-color 150ms ease;
}

.wookit-quick-view__close:hover,
.wookit-quick-view__close:focus-visible {
	background: var( --wookit-surface-alt, #f8fafc ) !important;
}

.wookit-quick-view__image img {
	width: 100%;
	height: auto;
	border-radius: var( --wookit-radius-md, 8px ) !important;
	display: block;
}

.wookit-quick-view__title {
	margin-top: 0 !important;
	margin-bottom: 0.25rem !important;
	font-family: inherit !important;
	color: var( --wookit-text, #0f172a ) !important;
	font-size: 1.5rem !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
}

.wookit-quick-view__price {
	font-size: 1.25rem !important;
	font-weight: 600 !important;
	color: var( --wookit-text, #0f172a ) !important;
	margin-bottom: 0.75rem !important;
}

.wookit-quick-view__summary {
	color: var( --wookit-muted, #64748b ) !important;
	margin-bottom: 1rem !important;
	font-size: 1rem !important;
}

.wookit-quick-view__form {
	margin: 0 !important;
}

.wookit-quick-view__add {
	background: var( --wookit-accent, #6366f1 ) !important;
	color: var( --wookit-accent-fg, #ffffff ) !important;
	border: 0 !important;
	border-radius: var( --wookit-radius-md, 8px ) !important;
	padding: 0.75rem 1.5rem !important;
	font-weight: 500 !important;
	font-size: 1rem !important;
	cursor: pointer !important;
	transition: background-color 150ms ease;
}

.wookit-quick-view__add:hover {
	background: var( --wookit-accent-hover, #4f46e5 ) !important;
}

.wookit-quick-view__link {
	display: inline-block;
	margin-top: 0.75rem !important;
	font-size: 0.875rem !important;
	color: var( --wookit-accent, #6366f1 ) !important;
	text-decoration: none !important;
}

.wookit-quick-view__link:hover {
	text-decoration: underline !important;
}

@keyframes wookit-qv-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes wookit-qv-scale {
	from { opacity: 0; transform: scale( 0.96 ); }
	to   { opacity: 1; transform: scale( 1 ); }
}

@media ( prefers-reduced-motion: reduce ) {
	.wookit-quick-view__overlay,
	.wookit-quick-view__panel {
		animation: none;
	}
}