/* ==========================================================================
   PWD Masonry Gallery — Quotation Popup (v2.0.0)
   All structural / default styles. Visual overrides come from
   Elementor widget CSS vars generated by the popup styling section.
   ========================================================================== */

/* ---------- Overlay ---------- */
.pwd-masonry-quote-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
	z-index: 99998;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease, visibility 0.25s ease;
	backdrop-filter: blur(3px);
}

.pwd-masonry-quote-overlay.is-open {
	opacity: 1;
	visibility: visible;
}

/* ---------- Modal ---------- */
.pwd-masonry-quote-modal {
	background: var(--pwd-quote-modal-bg, #ffffff);
	border-radius: var(--pwd-quote-modal-radius, 12px);
	box-shadow: var(--pwd-quote-modal-shadow, 0 20px 60px rgba(0, 0, 0, 0.25));
	width: 100%;
	max-width: var(--pwd-quote-modal-max-width, 520px);
	max-height: 90vh;
	overflow-y: auto;
	position: relative;
	transform: translateY(20px) scale(0.97);
	transition: transform 0.25s ease;
	border: var(--pwd-quote-modal-border, none);
}

.pwd-masonry-quote-overlay.is-open .pwd-masonry-quote-modal {
	transform: translateY(0) scale(1);
}

/* ---------- Header ---------- */
.pwd-masonry-quote-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	padding: var(--pwd-quote-header-padding, 24px 24px 0);
	gap: 12px;
}

.pwd-masonry-quote-header__product {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 1;
	min-width: 0;
}

.pwd-masonry-quote-product-img {
	width: var(--pwd-quote-product-img-size, 52px);
	height: var(--pwd-quote-product-img-size, 52px);
	object-fit: cover;
	border-radius: var(--pwd-quote-product-img-radius, 8px);
	border: 1px solid rgba(0, 0, 0, 0.08);
	flex-shrink: 0;
}

.pwd-masonry-quote-product-info {
	min-width: 0;
}

.pwd-masonry-quote-label {
	display: block;
	font-size: var(--pwd-quote-label-size, 11px);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--pwd-quote-label-color, #94a3b8);
	margin-bottom: 3px;
}

.pwd-masonry-quote-product-name {
	font-size: var(--pwd-quote-product-name-size, 15px);
	font-weight: 700;
	color: var(--pwd-quote-product-name-color, #1e293b);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.pwd-masonry-quote-close {
	background: none;
	border: none;
	cursor: pointer;
	color: var(--pwd-quote-close-color, #94a3b8);
	padding: 4px;
	border-radius: 6px;
	line-height: 1;
	transition: color 0.15s, background 0.15s;
	flex-shrink: 0;
}

.pwd-masonry-quote-close:hover {
	color: var(--pwd-quote-close-hover-color, #1e293b);
	background: var(--pwd-quote-close-hover-bg, #f1f5f9);
}

/* ---------- Title / intro ---------- */
.pwd-masonry-quote-body {
	padding: var(--pwd-quote-body-padding, 20px 24px 24px);
}

.pwd-masonry-quote-title {
	font-size: var(--pwd-quote-title-size, 18px);
	font-weight: 700;
	color: var(--pwd-quote-title-color, #1a1a2e);
	margin: 0 0 4px;
}

.pwd-masonry-quote-intro {
	font-size: var(--pwd-quote-intro-size, 13px);
	color: var(--pwd-quote-intro-color, #64748b);
	margin: 0 0 20px;
	line-height: 1.6;
}

/* ---------- Form ---------- */
.pwd-masonry-quote-form {
	display: flex;
	flex-direction: column;
	gap: var(--pwd-quote-field-gap, 14px);
}

.pwd-masonry-quote-field {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.pwd-masonry-quote-field label {
	font-size: var(--pwd-quote-field-label-size, 12px);
	font-weight: 600;
	color: var(--pwd-quote-field-label-color, #374151);
	letter-spacing: 0.01em;
}

.pwd-masonry-quote-field label .pwd-required {
	color: var(--pwd-quote-required-color, #ef4444);
	margin-left: 2px;
}

.pwd-masonry-quote-field input,
.pwd-masonry-quote-field textarea {
	width: 100%;
	padding: var(--pwd-quote-input-padding, 10px 14px);
	border: var(--pwd-quote-input-border, 1px solid #d1d5db);
	border-radius: var(--pwd-quote-input-radius, 7px);
	font-size: var(--pwd-quote-input-font-size, 14px);
	color: var(--pwd-quote-input-color, #1e293b);
	background: var(--pwd-quote-input-bg, #ffffff);
	outline: none;
	transition: border-color 0.18s, box-shadow 0.18s;
	font-family: inherit;
	box-sizing: border-box;
}

.pwd-masonry-quote-field input:focus,
.pwd-masonry-quote-field textarea:focus {
	border-color: var(--pwd-quote-input-focus-border, #4f7ef8);
	box-shadow: var(--pwd-quote-input-focus-shadow, 0 0 0 3px rgba(79,126,248,0.15));
}

.pwd-masonry-quote-field textarea {
	min-height: var(--pwd-quote-textarea-height, 100px);
	resize: vertical;
}

/* Honeypot — visually hidden */
.pwd-masonry-quote-honeypot {
	position: absolute;
	left: -9999px;
	opacity: 0;
	pointer-events: none;
	height: 0;
	overflow: hidden;
}

/* Turnstile */
.pwd-masonry-quote-turnstile {
	display: flex;
	justify-content: var(--pwd-quote-turnstile-align, flex-start);
}

/* ---------- Error / success message ---------- */
.pwd-masonry-quote-message {
	padding: 12px 16px;
	border-radius: 7px;
	font-size: 13px;
	line-height: 1.5;
	display: none;
}

.pwd-masonry-quote-message.is-error {
	background: #fef2f2;
	color: #b91c1c;
	border: 1px solid #fecaca;
	display: block;
}

.pwd-masonry-quote-message.is-success {
	background: #f0fdf4;
	color: #166534;
	border: 1px solid #bbf7d0;
	display: block;
	text-align: center;
	padding: 24px 20px;
}

.pwd-masonry-quote-message.is-success svg {
	display: block;
	margin: 0 auto 10px;
	color: #16a34a;
}

/* ---------- Submit button ---------- */
.pwd-masonry-quote-submit {
	width: 100%;
	padding: var(--pwd-quote-submit-padding, 12px 20px);
	background: var(--pwd-quote-submit-bg, #1a1a2e);
	color: var(--pwd-quote-submit-color, #ffffff) !important;
	border: var(--pwd-quote-submit-border, 2px solid #1a1a2e);
	border-radius: var(--pwd-quote-submit-radius, 7px);
	font-size: var(--pwd-quote-submit-font-size, 14px);
	font-weight: var(--pwd-quote-submit-font-weight, 700);
	cursor: pointer;
	font-family: inherit;
	letter-spacing: 0.02em;
	transition: background 0.18s, border-color 0.18s, transform 0.12s, box-shadow 0.18s, opacity 0.18s;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.pwd-masonry-quote-submit:hover:not(:disabled) {
	background: var(--pwd-quote-submit-hover-bg, #16213e);
	border-color: var(--pwd-quote-submit-hover-border, #16213e);
	color: var(--pwd-quote-submit-hover-color, #ffffff) !important;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

.pwd-masonry-quote-submit:disabled {
	opacity: 0.7;
	cursor: not-allowed;
	transform: none;
}

/* Spinner inside submit */
.pwd-masonry-quote-spinner {
	width: 16px;
	height: 16px;
	border: 2px solid rgba(255, 255, 255, 0.4);
	border-top-color: #fff;
	border-radius: 50%;
	animation: pwd-spin 0.7s linear infinite;
	display: none;
}

.pwd-masonry-quote-submit.is-loading .pwd-masonry-quote-spinner { display: block; }
.pwd-masonry-quote-submit.is-loading .pwd-masonry-quote-submit-label { display: none; }

@keyframes pwd-spin {
	to { transform: rotate(360deg); }
}

/* ---------- Request Quotation button (card-level) ---------- */
.pwd-masonry-request-quote-btn {
	display: block;
	width: 100%;
	text-align: center;
	cursor: pointer;
	padding: var(--pwd-quote-btn-padding, 12px 24px);
	background: var(--pwd-quote-btn-bg, #1a1a2e);
	color: var(--pwd-quote-btn-color, #ffffff) !important;
	border: none;
	border-radius: var(--pwd-quote-btn-radius, 4px);
	font-size: var(--pwd-quote-btn-font-size, 14px);
	font-weight: var(--pwd-quote-btn-font-weight, 600);
	line-height: 1.4;
	margin-top: auto;
	transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.3s ease;
	box-sizing: border-box;
	text-decoration: none;
	font-family: inherit;
	-webkit-appearance: none;
	appearance: none;
}

.pwd-masonry-request-quote-btn:hover {
	background: var(--pwd-quote-btn-hover-bg, #16213e);
	color: var(--pwd-quote-btn-hover-color, #ffffff) !important;
	text-decoration: none;
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* ---------- Responsive ---------- */
@media (max-width: 480px) {
	.pwd-masonry-quote-overlay { padding: 12px; align-items: flex-end; }
	.pwd-masonry-quote-modal { max-width: 100%; border-radius: 12px 12px 0 0; }
}