/* =====================================================================
   JPW FRONTEND FIX — स्टाइल
   सिर्फ़ उन्हीं तत्वों को छूता है जो यह प्लगइन ख़ुद बनाता है
   (.jwpfx-*), और फ़िल्टर बार को। बाक़ी साइट पर कोई असर नहीं।
   ===================================================================== */

/* --- फ़िल्टर बार ---------------------------------------------------
   रंग थीम के CSS variables से लिए गए हैं, हार्डकोड नहीं — इसलिए जब
   पूरी साइट का रंग बदलेगा, फ़िल्टर बार अपने आप उसके साथ बदल जाएगा। */
.jwpfx-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	margin: 0 0 36px;
}

.jwpfx-bar .jw-fbtn {
	background: var(--white, #fff);
	border: 1.5px solid var(--line, #E3DCD0);
	color: var(--ink, #16232E);
	padding: 11px 22px;
	border-radius: 30px;
	font-size: 14.5px;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	transition: border-color .22s, color .22s, background .22s;
}

.jwpfx-bar .jw-fbtn:hover {
	border-color: var(--teal, #0A6E72);
	color: var(--teal, #0A6E72);
}

.jwpfx-bar .jw-fbtn.jw-act {
	background: var(--navy, #0B2545);
	border-color: var(--navy, #0B2545);
	color: #fff;
}

.jwpfx-bar .jw-fbtn:focus-visible {
	outline: 3px solid var(--gold, #C9922E);
	outline-offset: 2px;
}

/* --- पूछताछ फ़ॉर्म का submit बटन ------------------------------------
   पहले बटन का रंग उसके पीछे के background जैसा ही था, इसलिए वह बटन
   जैसा दिखता ही नहीं था। अब सुनहरा (gold) — पेज पर यही एकमात्र
   सुनहरा बटन है, इसलिए नज़र सीधे इसी पर जाती है। */
/* ⚠️ specificity जान-बूझकर ऊँची रखी गई है।
   थीम का नियम `.jw-root button{background:none}` (0,1,1) है और वह
   पेज के अपने <style> ब्लॉक से आता है, जो प्लगइन की CSS के *बाद* छपता
   है। सादा `.jwpfx-send` (0,1,0) उससे हार जाता था — इसीलिए v1.1 में
   बटन पारदर्शी दिख रहा था। `.jw-root button.jwpfx-send` (0,2,1) से
   बिना !important के जीत मिलती है। */
.jw-root button.jwpfx-send,
.jwpfx-send {
	display: block;
	width: 100%;
	margin-top: 14px;
	padding: 15px 30px;
	border: none;
	border-radius: 9px;
	background: var(--gold, #C9922E);
	color: #fff;
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: .2px;
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(201, 146, 46, .32);
	transition: background .2s, transform .2s, box-shadow .2s;
}

.jw-root button.jwpfx-send:hover,
.jwpfx-send:hover {
	background: #B07F22;
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(201, 146, 46, .38);
}

.jw-root button.jwpfx-send:active,
.jwpfx-send:active {
	transform: translateY(0);
}

.jwpfx-send:focus-visible {
	outline: 3px solid var(--navy, #0B2545);
	outline-offset: 2px;
}

/* --- संदेश (त्रुटि / पुष्टि) ---------------------------------------
   रंग के अलावा एक आइकन भी है, ताकि जिन्हें रंग पहचानने में दिक़्क़त
   होती है उन्हें भी फ़र्क़ साफ़ दिखे। */
.jwpfx-note {
	margin-top: 12px;
	padding: 11px 14px;
	border-radius: 8px;
	font-size: 14.5px;
	line-height: 1.5;
	border: 1px solid transparent;
}

.jwpfx-note.jwpfx-err {
	background: #FDECEC;
	border-color: #E8B4B4;
	color: #8E2B2B;
}

.jwpfx-note.jwpfx-err::before {
	content: "⚠ ";
}

.jwpfx-note.jwpfx-ok {
	background: #E8F5EC;
	border-color: #A9D6B8;
	color: #1E6B38;
}

.jwpfx-note.jwpfx-ok::before {
	content: "✓ ";
}

/* पुराने (ख़राब) error बॉक्स — JS इन्हें छिपा देता है, पर अगर किसी
   वजह से JS न चले तो भी ये न दिखें, इसलिए CSS से भी बंद। */
.jwpfx-old-err {
	display: none !important;
}

@media (max-width: 600px) {
	.jwpfx-bar {
		gap: 8px;
		margin-bottom: 26px;
	}
	.jwpfx-bar .jw-fbtn {
		padding: 9px 16px;
		font-size: 13.5px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.jwpfx-send,
	.jwpfx-bar .jw-fbtn {
		transition: none;
	}
	.jw-root button.jwpfx-send:hover,
.jwpfx-send:hover {
		transform: none;
	}
}