/*
 * "Turite klausimų apie prekę?" dialog.
 *
 * Carries the brown from the Terasistas card (`--mds-usp-accent-warm`, #6d4a32) rather than the
 * terracotta the other two buttons use: the row now offers three different things, and a
 * consultation is the warm one. The dimensions follow the popup this replaces — 550px wide, a
 * centred box on a half-black overlay — so returning visitors meet something they recognise.
 */

.mds-inquiry-dialog {
	--mds-inquiry-brown: #6d4a32;

	width: min(550px, calc(100vw - 32px));
	max-width: 550px;
	padding: 0;
	border: 5px solid var(--mds-inquiry-brown);
	border-radius: 0;
	background: #fff;
	color: #000;
}

.mds-inquiry-dialog::backdrop {
	background: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(2px);
}

.mds-inquiry-dialog__inner {
	position: relative;
	padding: 30px;
}

.mds-inquiry-dialog__title {
	margin: 0 0 20px;
	padding-right: 30px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	color: #312319;
}

/* Woodmart styles every `button` on the site — grey fill, its own box model, `position: relative`.
   Beating that needs `!important`, the same way the CTA row next door already does. */
.mds-inquiry-dialog .mds-inquiry-dialog__close {
	position: absolute !important;
	top: 8px !important;
	right: 10px !important;
	width: 34px !important;
	height: 34px !important;
	min-width: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	font-size: 30px !important;
	line-height: 1 !important;
	color: var(--mds-inquiry-brown) !important;
	cursor: pointer;
}

.mds-inquiry-dialog .mds-inquiry-dialog__close:hover,
.mds-inquiry-dialog .mds-inquiry-dialog__close:focus-visible {
	color: #000 !important;
}

/* The form inherits the MDS skin from partials/fluent-forms; only the button changes lane, so the
   dialog is not a terracotta island inside a brown frame. */
/* Fluent prints a per-form rule — `form.fluent_form_9 .ff-btn-submit:not(.ff_btn_no_style)` — that
   is one step more specific than anything reasonable here, and it carries the terracotta the
   migration wrote into the form. Inside this dialog the lane is brown. */
.mds-inquiry-dialog .fluentform .ff-btn-submit {
	border-color: var(--mds-inquiry-brown) !important;
	color: var(--mds-inquiry-brown) !important;
}

.mds-inquiry-dialog .fluentform .ff-btn-submit:hover,
.mds-inquiry-dialog .fluentform .ff-btn-submit:focus {
	background: var(--mds-inquiry-brown) !important;
	border-color: var(--mds-inquiry-brown) !important;
	color: #fff !important;
}

.mds-inquiry-dialog .fluentform .ff-el-form-control:focus {
	border-color: var(--mds-inquiry-brown);
}

@media (max-width: 470px) {
	.mds-inquiry-dialog__inner {
		padding: 16px;
	}

	.mds-inquiry-dialog__close {
		top: 4px;
		right: 6px;
	}
}