/*!
 * Woo Product Actions - Quick View modal styles
 */

.wpa-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.wpa-modal.is-open {
	display: flex;
}

.wpa-modal-overlay {
	position: absolute;
	inset: 0;
	background: rgba( 17, 17, 20, 0.6 );
	-webkit-backdrop-filter: blur( 4px );
	backdrop-filter: blur( 4px );
	animation: wpa-fade-in 200ms ease;
}

.wpa-modal-panel {
	position: relative;
	background: #fff;
	border-radius: 18px;
	max-width: 900px;
	width: 100%;
	max-height: 90vh;
	overflow-y: auto;
	box-shadow: 0 24px 70px rgba( 0, 0, 0, 0.32 );
	animation: wpa-scale-in 260ms cubic-bezier( .22, 1, .36, 1 );
}

.wpa-modal-close {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1px solid rgba( 255, 255, 255, 0.25 );
	background: rgba( 255, 255, 255, 0.95 );
	-webkit-backdrop-filter: blur( 10px );
	backdrop-filter: blur( 10px );
	box-shadow: 0 8px 22px rgba( 0, 0, 0, 0.14 );
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: #1d2327;
	z-index: 5;
	transition: transform 200ms cubic-bezier( .34, 1.56, .64, 1 ), color 200ms ease, box-shadow 200ms ease;
}

.wpa-modal-close:hover,
.wpa-modal-close:focus-visible {
	transform: scale( 1.08 ) rotate( 90deg );
	color: #ef4444;
	box-shadow: 0 12px 28px rgba( 0, 0, 0, 0.2 );
	outline: none;
}

.wpa-modal-close svg {
	width: 16px;
	height: 16px;
}

.wpa-modal-body {
	padding: 40px;
	min-height: 200px;
}

.wpa-modal-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 200px;
}

.wpa-modal-loading .wpa-icon {
	width: 32px;
	height: 32px;
}

@keyframes wpa-fade-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes wpa-scale-in {
	from {
		opacity: 0;
		transform: scale( 0.96 );
	}

	to {
		opacity: 1;
		transform: scale( 1 );
	}
}

.wpa-quickview {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
}

.wpa-qv-main-image {
	border-radius: 14px;
	overflow: hidden;
}

.wpa-qv-main-image img {
	width: 100%;
	border-radius: 14px;
	display: block;
	transition: transform 400ms ease;
}

.wpa-qv-main-image:hover img {
	transform: scale( 1.04 );
}

.wpa-qv-thumbs {
	display: flex;
	gap: 8px;
	margin-top: 10px;
	flex-wrap: wrap;
}

.wpa-qv-thumb {
	border: 2px solid transparent;
	border-radius: 8px;
	padding: 0;
	background: none;
	cursor: pointer;
	line-height: 0;
	overflow: hidden;
	transition: border-color 180ms ease, transform 180ms ease;
}

.wpa-qv-thumb:hover,
.wpa-qv-thumb:focus-visible {
	transform: translateY( -2px );
	outline: none;
}

.wpa-qv-thumb.is-active {
	border-color: var( --wpa-color-cart, #10b981 );
}

.wpa-qv-thumb img {
	width: 60px;
	height: 60px;
	object-fit: cover;
	border-radius: 4px;
}

.wpa-qv-title {
	margin: 0 0 8px;
	font-size: 22px;
}

.wpa-qv-rating {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 10px;
}

.wpa-qv-price {
	font-size: 20px;
	font-weight: 600;
	margin-bottom: 14px;
}

.wpa-qv-description {
	color: #555;
	margin-bottom: 18px;
	font-size: 14px;
	line-height: 1.6;
}

.wpa-qv-cart-row {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 20px;
}

.wpa-qty-selector {
	display: flex;
	align-items: center;
	border: 1px solid #e2e2e2;
	border-radius: 999px;
	overflow: hidden;
	background: #fafafa;
}

.wpa-qty-btn {
	background: transparent;
	border: none;
	width: 36px;
	height: 42px;
	cursor: pointer;
	font-size: 16px;
	color: #1d2327;
	transition: background-color 150ms ease, color 150ms ease;
}

.wpa-qty-btn:hover,
.wpa-qty-btn:focus-visible {
	background-color: rgba( 0, 0, 0, 0.06 );
	color: var( --wpa-color-cart, #10b981 );
	outline: none;
}

.wpa-qty-input {
	width: 46px;
	height: 42px;
	text-align: center;
	border: none;
	background: transparent;
	font-weight: 600;
	appearance: textfield;
}

.wpa-qv-add-to-cart {
	flex: 1;
	background: var( --wpa-color-cart, #10b981 );
	color: #fff;
	border: none;
	border-radius: 999px;
	height: 42px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	cursor: pointer;
	font-size: 14px;
	font-weight: 600;
	box-shadow: 0 10px 26px rgba( 16, 185, 129, 0.32 );
	transition: transform 200ms cubic-bezier( .34, 1.56, .64, 1 ), box-shadow 200ms ease, opacity 200ms ease;
}

.wpa-qv-add-to-cart:hover,
.wpa-qv-add-to-cart:focus-visible {
	transform: translateY( -2px );
	box-shadow: 0 14px 32px rgba( 16, 185, 129, 0.4 );
	outline: none;
}

.wpa-qv-add-to-cart:active {
	transform: translateY( 0 ) scale( 0.98 );
}

.wpa-qv-add-to-cart .wpa-icon {
	width: 18px;
	height: 18px;
}

.wpa-qv-add-to-cart .wpa-icon-spinner {
	display: none;
}

.wpa-qv-add-to-cart.is-loading .wpa-icon-cart {
	display: none;
}

.wpa-qv-add-to-cart.is-loading .wpa-icon-spinner {
	display: inline-flex;
}

.wpa-qv-out-of-stock {
	color: #b32d2e;
	font-weight: 600;
}

.wpa-qv-meta {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 16px;
	font-size: 13px;
}

.wpa-qv-meta th {
	text-align: left;
	color: #777;
	padding: 6px 12px 6px 0;
	width: 120px;
	vertical-align: top;
}

.wpa-qv-meta td {
	padding: 6px 0;
}

.wpa-in-stock {
	color: #2a8a3e;
}

.wpa-out-of-stock {
	color: #b32d2e;
}

.wpa-qv-full-details {
	color: #1d2327;
	text-decoration: underline;
	font-size: 14px;
}

@media ( max-width: 720px ) {
	.wpa-quickview {
		grid-template-columns: 1fr;
	}

	.wpa-modal-body {
		padding: 24px;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.wpa-modal-overlay,
	.wpa-modal-panel,
	.wpa-modal-close,
	.wpa-qv-main-image img,
	.wpa-qv-thumb,
	.wpa-qty-btn,
	.wpa-qv-add-to-cart {
		animation: none !important;
		transition: none !important;
	}
}

body.wpa-dark-mode .wpa-modal-panel {
	background: #1d2327;
	color: #f2f2f2;
}

body.wpa-dark-mode .wpa-modal-close {
	background: rgba( 38, 41, 44, 0.9 );
	border-color: rgba( 255, 255, 255, 0.12 );
	color: #f2f2f2;
}

body.wpa-dark-mode .wpa-qv-description {
	color: #c9c9c9;
}

body.wpa-dark-mode .wpa-qty-selector {
	background: #26292c;
	border-color: #3a3a3a;
}

body.wpa-dark-mode .wpa-qty-btn {
	color: #f2f2f2;
}

body.wpa-dark-mode .wpa-qv-meta th {
	color: #9a9a9a;
}