/**
 * VB Product Quote Pro - Frontend Stylesheet
 *
 * @package VBPQ
 * @version 1.1.1
 */

:root {
	--vbpq-primary-color: #2563eb;
	--vbpq-primary-hover: #1d4ed8;
	--vbpq-dark-slate: #0f172a;
	--vbpq-modal-width: 540px;
	--vbpq-overlay-bg: rgba(15, 23, 42, 0.75);
}

/* ==========================================
   Popup Overlay & Modal Container
   ========================================== */
.vbpq-popup-overlay {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	width: 100vw !important;
	height: 100vh !important;
	background-color: var(--vbpq-overlay-bg) !important;
	backdrop-filter: blur(8px) !important;
	-webkit-backdrop-filter: blur(8px) !important;
	z-index: 999999 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 20px !important;
	box-sizing: border-box !important;

	/* Hidden default state */
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
	transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Active State when triggered */
.vbpq-popup-overlay.vbpq-active {
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: auto !important;
}

.vbpq-popup-container {
	background: #ffffff !important;
	color: #0f172a !important;
	width: 100% !important;
	max-width: var(--vbpq-modal-width) !important;
	max-height: 90vh !important;
	border-radius: 16px !important;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
	overflow-y: auto !important;
	position: relative !important;
	outline: none !important;

	/* Transform animation */
	transform: scale(0.92) translateY(15px) !important;
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.vbpq-popup-overlay.vbpq-active .vbpq-popup-container {
	transform: scale(1) translateY(0) !important;
}

.vbpq-popup-content {
	padding: 32px !important;
	position: relative !important;
}

/* ==========================================
   Close Button & Header
   ========================================== */
.vbpq-popup-close {
	position: absolute !important;
	top: 20px !important;
	right: 20px !important;
	width: 36px !important;
	height: 36px !important;
	border-radius: 50% !important;
	background: #f1f5f9 !important;
	border: none !important;
	color: #64748b !important;
	font-size: 24px !important;
	line-height: 1 !important;
	cursor: pointer !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease !important;
	z-index: 10 !important;
}

.vbpq-popup-close:hover,
.vbpq-popup-close:focus-visible {
	background: #e2e8f0 !important;
	color: #0f172a !important;
	transform: rotate(90deg) !important;
}

.vbpq-popup-header {
	margin-bottom: 20px !important;
	padding-right: 30px !important;
}

.vbpq-popup-title {
	margin: 0 0 6px 0 !important;
	font-size: 22px !important;
	font-weight: 700 !important;
	color: #0f172a !important;
	letter-spacing: -0.02em !important;
	font-family: inherit !important;
}

.vbpq-popup-subtitle {
	margin: 0 !important;
	font-size: 14px !important;
	color: #64748b !important;
	line-height: 1.5 !important;
	font-family: inherit !important;
}

/* ==========================================
   Product Card Summary Inside Modal
   ========================================== */
.vbpq-product-card {
	display: flex !important;
	align-items: center !important;
	gap: 14px !important;
	background: #f8fafc !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: 12px !important;
	padding: 14px 16px !important;
	margin-bottom: 24px !important;
}

.vbpq-product-icon {
	width: 42px !important;
	height: 42px !important;
	border-radius: 10px !important;
	background: #e0f2fe !important;
	color: #0284c7 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex-shrink: 0 !important;
}

.vbpq-product-details {
	flex-grow: 1 !important;
	min-width: 0 !important;
}

.vbpq-product-name {
	font-size: 15px !important;
	font-weight: 600 !important;
	color: #0f172a !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
}

.vbpq-product-meta {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 6px !important;
	margin-top: 4px !important;
}

.vbpq-product-sku-badge,
.vbpq-product-variation-badge,
.vbpq-product-cat-badge {
	font-size: 11px !important;
	font-weight: 600 !important;
	padding: 2px 8px !important;
	border-radius: 12px !important;
	text-transform: uppercase !important;
	letter-spacing: 0.5px !important;
}

.vbpq-product-sku-badge {
	background: #e2e8f0 !important;
	color: #475569 !important;
}

.vbpq-product-variation-badge {
	background: #dbeafe !important;
	color: #1d4ed8 !important;
}

.vbpq-product-cat-badge {
	background: #f1f5f9 !important;
	color: #64748b !important;
}

/* ==========================================
   Form Fields & Controls (High Contrast Fix)
   ========================================== */
.vbpq-quote-form {
	display: flex !important;
	flex-direction: column !important;
	gap: 16px !important;
}

.vbpq-form-row-half {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 16px !important;
}

.vbpq-field-group {
	display: flex !important;
	flex-direction: column !important;
	gap: 6px !important;
}

.vbpq-field-group label {
	display: block !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: #0f172a !important; /* Force visible dark slate label text */
	margin-bottom: 2px !important;
	font-family: inherit !important;
}

.vbpq-required {
	color: #ef4444 !important;
	font-weight: 700 !important;
}

/* Form Inputs High Contrast Styles */
.vbpq-input,
.vbpq-textarea {
	width: 100% !important;
	padding: 11px 14px !important;
	border: 1.5px solid #cbd5e1 !important; /* Visible border */
	border-radius: 8px !important;
	font-size: 14px !important;
	line-height: 1.4 !important;
	color: #0f172a !important; /* Dark text color when typing */
	background-color: #ffffff !important; /* Solid white background */
	box-shadow: none !important;
	box-sizing: border-box !important;
	transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
	font-family: inherit !important;
	-webkit-appearance: none !important;
}

.vbpq-input:focus,
.vbpq-textarea:focus {
	outline: none !important;
	border-color: #2563eb !important; /* High visibility blue focus border */
	box-shadow: 0 0 0 3.5px rgba(37, 99, 235, 0.2) !important;
	background-color: #ffffff !important;
}

/* Explicit placeholder styling */
.vbpq-input::placeholder,
.vbpq-textarea::placeholder {
	color: #94a3b8 !important; /* Clear muted placeholder */
	opacity: 1 !important;
}

.vbpq-input::-webkit-input-placeholder,
.vbpq-textarea::-webkit-input-placeholder {
	color: #94a3b8 !important;
	opacity: 1 !important;
}

.vbpq-textarea {
	resize: vertical !important;
	min-height: 85px !important;
}

/* ==========================================
   Form Actions & Buttons
   ========================================== */
.vbpq-form-actions {
	margin-top: 8px !important;
}

.vbpq-btn {
	width: 100% !important;
	padding: 13px 24px !important;
	border-radius: 10px !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	border: none !important;
	cursor: pointer !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	transition: background-color 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease !important;
	font-family: inherit !important;
}

.vbpq-btn-primary {
	background-color: #2563eb !important;
	color: #ffffff !important;
	box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3) !important;
}

.vbpq-btn-primary:hover {
	background-color: #1d4ed8 !important;
	box-shadow: 0 6px 16px rgba(37, 99, 235, 0.4) !important;
}

.vbpq-btn-primary:active {
	transform: translateY(1px) !important;
}

.vbpq-btn:disabled {
	opacity: 0.65 !important;
	cursor: not-allowed !important;
}

/* Loading Spinner */
.vbpq-spinner {
	width: 18px !important;
	height: 18px !important;
	border: 2px solid rgba(255, 255, 255, 0.3) !important;
	border-top-color: #ffffff !important;
	border-radius: 50% !important;
	animation: vbpq-spin 0.8s linear infinite !important;
}

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

/* ==========================================
   Form Notices
   ========================================== */
.vbpq-notice {
	padding: 12px 16px !important;
	border-radius: 8px !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	margin-bottom: 16px !important;
	line-height: 1.4 !important;
}

.vbpq-notice-success {
	background-color: #ecfdf5 !important;
	border: 1px solid #a7f3d0 !important;
	color: #065f46 !important;
}

.vbpq-notice-error {
	background-color: #fef2f2 !important;
	border: 1px solid #fecaca !important;
	color: #991b1b !important;
}

/* Responsive Mobile Rules */
@media (max-width: 600px) {
	.vbpq-popup-content {
		padding: 24px 18px !important;
	}

	.vbpq-form-row-half {
		grid-template-columns: 1fr !important;
	}

	.vbpq-popup-container {
		max-height: 95vh !important;
	}
}