/* ---------- Trigger button (rendered inside the product card) ---------- */

button.ewpg-qc-trigger {
	font: inherit;
	background: none;
	-webkit-appearance: none;
	appearance: none;
}

/* Only used when the button is shown *alongside* Add to Cart, so the two
   don't look identical. When it replaces Add to Cart it inherits the
   normal button colors from the widget's Button style controls. Sits on
   the same row as Add to Cart (see .ewpg-card__button-wrap), so no extra
   top margin is needed here. Normal/Hover colors themselves come from the
   widget's Style tab > Quick Checkout controls (Elementor-generated CSS,
   loaded after this stylesheet) — the values here are just a fallback for
   before that CSS loads or if no color was customized. */
.ewpg-qc-trigger--accent {
	background-color: var( --ewpg-qc-accent, #7f54b3 );
	color: #fff;
}

/* ---------- Popup shell (printed once per page, in the footer) ---------- */

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

.ewpg-qc-modal--open {
	display: flex;
}

.ewpg-qc-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba( 0, 0, 0, 0.55 );
}

.ewpg-qc-modal__dialog {
	position: relative;
	background: #fff;
	border-radius: 10px;
	max-width: 640px;
	width: 100%;
	max-height: 90vh;
	overflow-y: auto;
	box-shadow: 0 20px 60px rgba( 0, 0, 0, 0.3 );
	animation: ewpg-qc-pop 0.18s ease;
}

@keyframes ewpg-qc-pop {
	from { opacity: 0; transform: scale( 0.96 ); }
	to   { opacity: 1; transform: scale( 1 ); }
}

@media ( prefers-reduced-motion: reduce ) {
	.ewpg-qc-modal__dialog {
		animation: none;
	}
}

.ewpg-qc-modal__close {
	position: absolute;
	top: 6px;
	right: 8px;
	background: none;
	border: none;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	color: #666;
	z-index: 2;
	padding: 6px 10px;
}

.ewpg-qc-modal__close:hover {
	color: #111;
}

.ewpg-qc-modal__body {
	padding: 28px;
}

.ewpg-qc-modal__loading {
	text-align: center;
	padding: 50px 0;
	color: #666;
}

.ewpg-qc-modal__content {
	display: flex;
	gap: 24px;
	flex-wrap: wrap;
}

.ewpg-qc-modal__image-wrap {
	flex: 0 0 160px;
}

.ewpg-qc-modal__image {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 8px;
	display: block;
	background: #f2f2f2;
}

.ewpg-qc-modal__info {
	flex: 1 1 240px;
	min-width: 0;
}

.ewpg-qc-modal__title {
	margin: 0 0 8px;
	font-size: 18px;
	line-height: 1.3;
}

.ewpg-qc-modal__price {
	font-size: 16px;
	margin-bottom: 16px;
}

.ewpg-qc-modal__price del {
	opacity: 0.6;
	margin-right: 6px;
	font-weight: 400;
}

.ewpg-qc-modal__price ins {
	text-decoration: none;
}

.ewpg-qc-attribute {
	margin-bottom: 14px;
}

.ewpg-qc-attribute label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 6px;
}

.ewpg-qc-attribute select {
	width: 100%;
	padding: 9px 10px;
	border: 1px solid #ccc;
	border-radius: 6px;
	font-size: 14px;
	background: #fff;
}

.ewpg-qc-attribute select:focus {
	outline: none;
	border-color: var( --ewpg-qc-accent, #7f54b3 );
}

/* ---------- "WC Photo Design Options" fields (Frame Colour / Design + required photo uploads) ---------- */

.ewpg-qc-pdo-uploads {
	margin-bottom: 14px;
}

.ewpg-qc-pdo-upload-label {
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 8px;
}

.ewpg-qc-pdo-previews {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 10px;
}

.ewpg-qc-pdo-thumb {
	position: relative;
	width: 60px;
	height: 60px;
	border-radius: 4px;
	overflow: hidden;
	border: 1px solid #ddd;
	flex: 0 0 auto;
	font-size: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #888;
	text-align: center;
}

.ewpg-qc-pdo-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ewpg-qc-pdo-remove {
	position: absolute;
	top: 2px;
	right: 2px;
	background: rgba( 0, 0, 0, 0.6 );
	color: #fff;
	border: none;
	border-radius: 50%;
	width: 16px;
	height: 16px;
	font-size: 10px;
	line-height: 14px;
	cursor: pointer;
	padding: 0;
}

.ewpg-qc-pdo-add-btn {
	background: #eee;
	color: #222;
	border: 1px solid #bbb;
	padding: 8px 16px;
	font-weight: 600;
	font-size: 12px;
	border-radius: 4px;
	cursor: pointer;
}

.ewpg-qc-pdo-add-btn:hover:not( :disabled ) {
	background: #ddd;
}

.ewpg-qc-pdo-add-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.ewpg-qc-modal__qty-row {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 16px;
}

.ewpg-qc-modal__qty-row label {
	font-size: 13px;
	font-weight: 600;
}

.ewpg-qc-modal__qty {
	width: 70px;
	padding: 8px 10px;
	border: 1px solid #ccc;
	border-radius: 6px;
	font-size: 14px;
}

.ewpg-qc-modal__qty:focus {
	outline: none;
	border-color: var( --ewpg-qc-accent, #7f54b3 );
}

.ewpg-qc-modal__message {
	font-size: 13px;
	margin-bottom: 14px;
	padding: 8px 10px;
	border-radius: 6px;
	background: #f6f6f6;
	color: #444;
}

.ewpg-qc-modal__message:empty {
	display: none;
}

.ewpg-qc-modal__message--error {
	background: #fdecea;
	color: #b3261e;
}

.ewpg-qc-modal__submit {
	display: block;
	width: 100%;
	padding: 12px 18px;
	border: none;
	border-radius: 6px;
	background: var( --ewpg-qc-accent, #7f54b3 );
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: opacity 0.2s ease;
}

.ewpg-qc-modal__submit:hover:not( :disabled ) {
	opacity: 0.9;
}

.ewpg-qc-modal__submit:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

html.ewpg-qc-lock-scroll {
	overflow: hidden;
}

@media ( max-width: 480px ) {
	.ewpg-qc-modal__body {
		padding: 20px;
	}

	.ewpg-qc-modal__content {
		flex-direction: column;
	}

	.ewpg-qc-modal__image-wrap {
		flex: 0 0 auto;
		max-width: 140px;
		margin: 0 auto;
	}
}