/* ==========================================================================
   Farmhouse "Enquire Now" Sticky Button + Popup Form
   Namespace: .fceq-* / #fceq-*
   Fully independent from fc-frontend.css / the [farmhouse_consultation_form]
   shortcode. Font inherits the theme; colors via CSS variables.

   IMPORTANT — why `all: unset !important` is used on the buttons below:
   Many WordPress themes/page builders (Elementor, Divi, etc.) ship global
   selectors like `button`, `.elementor-widget button`, or mobile rules
   such as `button { width: 100%; }` that are broad enough to hit ANY
   <button> on the page — including ours — and were overriding our size,
   padding and width (turning the slim sticky tab into a giant block).
   `all: unset !important` wipes every inherited/global rule the theme
   might apply to a bare <button> element before we rebuild it from zero
   with our own explicit, !important values. This is the most reliable
   way to guarantee the button always renders identically regardless of
   the active theme.
   ========================================================================== */

.fceq-widget {
	--fceq-accent: #f2b01e;
	--fceq-accent-dark: #d99b0d;
	--fceq-ink: #1c2530;
	--fceq-muted: #6b7280;
	--fceq-border: #e6e9ec;
	--fceq-soft-bg: #f6f7f9;
	--fceq-danger: #d64545;
	--fceq-danger-bg: #fdecec;
	--fceq-success: #1c7a3d;
	--fceq-success-bg: #e9f8ee;
}

.fceq-widget,
.fceq-widget *,
.fceq-widget *::before,
.fceq-widget *::after {
	box-sizing: border-box;
	font-family: inherit !important;
}

/* ---------- Sticky trigger tab: fixed right edge, vertically centered,
   identical position + size on every device / breakpoint, immune to
   theme button styles. ---------- */
#fceq-trigger-btn.fceq-trigger-btn {
	all: unset !important;
	box-sizing: border-box !important;
	cursor: pointer !important;

	position: fixed !important;
	top: 50% !important;
	right: 0 !important;
	left: auto !important;
	bottom: auto !important;
	transform: translateY(-50%) !important;
	z-index: 999998 !important;

	display: inline-flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px !important;

	width: auto !important;
	min-width: 0 !important;
	max-width: 104px !important;
	height: auto !important;
	margin: 0 !important;
	/*padding: 6px 11px !important;*/
	padding: 12px 9px 12px 9px !important;

	border: none !important;
	border-radius: 10px 0 0 10px !important;
	background: var(--fceq-accent) !important;
	color: #1c1c1c !important;

	font-family: inherit !important;
	font-size: 0.92rem !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	text-decoration: none !important;
	text-transform: none !important;
	letter-spacing: 0.02em !important;

	box-shadow: -4px 4px 16px rgba(0, 0, 0, 0.18) !important;
	transition: background 0.15s ease !important;
}

#fceq-trigger-btn.fceq-trigger-btn:hover,
#fceq-trigger-btn.fceq-trigger-btn:focus {
	background: var(--fceq-accent-dark) !important;
	outline: none !important;
}

#fceq-trigger-btn .fceq-trigger-icon {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 15px !important;
	height: 15px !important;
	flex: 0 0 auto !important;
}

#fceq-trigger-btn .fceq-trigger-icon svg {
	width: 15px !important;
	height: 15px !important;
	display: block !important;
}

#fceq-trigger-btn .fceq-trigger-text {
	writing-mode: vertical-rl !important;
	transform: rotate(180deg) !important;
	white-space: nowrap !important;
	display: inline-block !important;
}

/* ---------- Overlay + modal ---------- */
.fceq-overlay {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(20, 24, 30, 0.55);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, visibility 0.2s ease;
}

.fceq-overlay.fceq-open {
	opacity: 1;
	visibility: visible;
}

.fceq-modal {
	position: relative;
	width: 100%;
	max-width: 460px;
	max-height: 92vh;
	overflow-y: auto;
	background: #ffffff !important;
	border-radius: 16px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
	padding: 30px 26px 24px;
	transform: translateY(16px) scale(0.98);
	transition: transform 0.2s ease;

	/* Keep it scrollable as a safety net on very small screens, but
	   never show a visible scrollbar track — keeps the popup clean. */
	scrollbar-width: none;      /* Firefox */
	-ms-overflow-style: none;   /* old Edge / IE */
}

.fceq-modal::-webkit-scrollbar {
	display: none;              /* Chrome / Safari / new Edge */
	width: 0;
	height: 0;
}

.fceq-overlay.fceq-open .fceq-modal {
	transform: translateY(0) scale(1);
}

#fceq-close-btn.fceq-close-btn {
	all: unset !important;
	box-sizing: border-box !important;
	cursor: pointer !important;

	position: absolute !important;
	top: 14px !important;
	right: 14px !important;
	z-index: 2 !important;

	display: flex !important;
	align-items: center !important;
	justify-content: center !important;

	width: 32px !important;
	height: 32px !important;
	padding: 0 !important;
	margin: 0 !important;

	border: none !important;
	border-radius: 50% !important;
	background: var(--fceq-soft-bg) !important;
	color: var(--fceq-ink) !important;
	transition: background 0.15s ease !important;
}

#fceq-close-btn.fceq-close-btn:hover {
	background: #eceef1 !important;
}

#fceq-close-btn .fceq-close-btn svg,
#fceq-close-btn svg {
	width: 14px !important;
	height: 14px !important;
	display: block !important;
}

.fceq-modal-title {
	font-size: 1.32rem !important;
	font-weight: 800 !important;
	color: var(--fceq-ink) !important;
	margin: 0 0 18px !important;
	padding: 0 !important;
	border: none !important;
	text-align: left;
}

/* ---------- Form ---------- */
.fceq-form {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* Name + Email side by side on desktop/tablet */
.fceq-form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.fceq-field {
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
}

.fceq-field label {
	font-size: 0.83rem !important;
	font-weight: 700 !important;
	color: var(--fceq-ink) !important;
	margin: 0 !important;
}

.fceq-required {
	color: var(--fceq-danger) !important;
}

.fceq-field input,
.fceq-field textarea {
	width: 100%;
	padding: 11px 13px;
	border: 1.5px solid var(--fceq-border) !important;
	border-radius: 8px;
	background: var(--fceq-soft-bg) !important;
	color: var(--fceq-ink) !important;
	font-size: 0.93rem !important;
	line-height: 1.4 !important;
	box-shadow: none !important;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.fceq-field textarea {
	resize: vertical;
	min-height: 70px;
}

.fceq-field input:focus,
.fceq-field textarea:focus {
	outline: none !important;
	border-color: var(--fceq-accent) !important;
	box-shadow: 0 0 0 4px rgba(242, 176, 30, 0.16) !important;
	background: #ffffff !important;
}

.fceq-field.fceq-invalid input,
.fceq-field.fceq-invalid textarea {
	border-color: var(--fceq-danger) !important;
	background: var(--fceq-danger-bg) !important;
}

.fceq-error-msg {
	font-size: 0.74rem !important;
	color: var(--fceq-danger) !important;
	min-height: 1em;
	display: block;
}

.fceq-hp-field {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---------- Submit button ---------- */
#fceq-submit-btn.fceq-submit-btn {
	all: unset !important;
	box-sizing: border-box !important;
	cursor: pointer !important;

	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 10px !important;

	width: 100% !important;
	margin-top: 2px !important;
	padding: 13px 20px !important;

	border: none !important;
	border-radius: 999px !important;
	background: var(--fceq-accent) !important;
	color: #1c1c1c !important;

	font-family: inherit !important;
	font-size: 0.98rem !important;
	font-weight: 700 !important;
	text-align: center !important;
	text-decoration: none !important;

	box-shadow: 0 8px 18px rgba(242, 176, 30, 0.28) !important;
	transition: background 0.15s ease, transform 0.08s ease !important;
}

#fceq-submit-btn.fceq-submit-btn:hover {
	background: var(--fceq-accent-dark) !important;
	transform: translateY(-1px);
}

#fceq-submit-btn.fceq-submit-btn[disabled] {
	opacity: 0.75 !important;
	cursor: not-allowed !important;
	transform: none !important;
}

.fceq-btn-spinner {
	display: none;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	border: 2px solid rgba(28, 28, 28, 0.25);
	border-top-color: #1c1c1c;
	animation: fceq-spin 0.7s linear infinite;
}

#fceq-submit-btn.fceq-is-loading .fceq-btn-spinner {
	display: inline-block;
}

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

/* ---------- Notice ---------- */
.fceq-form-notice {
	display: none;
	align-items: center;
	gap: 8px;
	padding: 10px 13px;
	border-radius: 8px;
	font-size: 0.83rem !important;
	font-weight: 600 !important;
}

.fceq-form-notice.fceq-notice-success {
	display: flex;
	background: var(--fceq-success-bg) !important;
	color: var(--fceq-success) !important;
	border: 1px solid #bfe8cc;
}

.fceq-form-notice.fceq-notice-error {
	display: flex;
	background: var(--fceq-danger-bg) !important;
	color: #b3261e !important;
	border: 1px solid #f5c2c0;
}

/* Prevent background scroll while modal is open */
body.fceq-lock-scroll {
	overflow: hidden !important;
}

/* ---------- Mobile: everything full width, tighter spacing so the
   form fits without needing to scroll on typical phone screens.
   Trigger tab position/size is intentionally NOT changed here — it
   must stay identical on every device per requirement. ---------- */
@media (max-width: 560px) {
	.fceq-overlay {
		padding: 12px;
	}

	.fceq-modal {
		padding: 24px 18px 18px;
		border-radius: 14px;
		max-height: 94vh;
	}

	.fceq-modal-title {
		font-size: 1.18rem !important;
		margin-bottom: 14px !important;
	}

	.fceq-form {
		gap: 11px;
	}

	.fceq-form-row {
		grid-template-columns: 1fr;
		gap: 11px;
	}

	.fceq-field input,
	.fceq-field textarea {
		padding: 10px 12px;
	}

	.fceq-field textarea {
		min-height: 60px;
	}
}