/**
 * MedInquiry — front-end styles
 *
 * Everything is namespaced under `.medinq-*` and the modal resets inherited
 * theme styles so it renders consistently on any WordPress theme. Colors are
 * driven by CSS custom properties so the Elementor/Settings brand color and
 * per-button overrides cascade cleanly.
 */


:root {
	/* Rahmet Group brand palette */
	--medinq-brand: #1246ab;          /* primary */
	--medinq-brand-600: #0d3784;      /* primary, darker (hover) */
	--medinq-brand-050: #eaf0fa;      /* primary tint */
	--medinq-ink: #2b3340;            /* headings / input text */
	--medinq-muted: #69727d;          /* brand link / muted text */
	--medinq-line: #d8e0ec;           /* borders */
	--medinq-bg: #ffffff;             /* background */
	--medinq-surface: #f4f7fc;        /* input fill */
	--medinq-field-bg: #f1f3f8;       /* soft "overlay" field fill */
	--medinq-field-shadow: inset 0 0 0 1px rgba(18, 70, 171, 0.05);
	--medinq-danger: #a20000;         /* brand secondary (required / errors) */
	--medinq-radius: 2px;             /* modal shell (brand: square) */
	--medinq-radius-sm: 2px;          /* controls (brand border-radius) */
	--medinq-shadow: 0 24px 60px -18px rgba(18, 70, 171, 0.28);
	--medinq-ring: 0 0 0 2px rgba(18, 70, 171, 0.25);
	--medinq-font: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	--medinq-heading: "Mulish", "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ---------------------------------------------------------------------------
 * Trigger button
 * ------------------------------------------------------------------------- */
.medinq-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55em;
	font-family: var(--medinq-heading);
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 0.8em 1.6em;
	border-radius: var(--medinq-radius-sm);
	border: 2px solid transparent;
	cursor: pointer;
	box-shadow: none;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
	-webkit-appearance: none;
	appearance: none;
	text-decoration: none;
}

.medinq-btn:focus-visible {
	outline: 2px solid var(--medinq-brand-600);
	outline-offset: 2px;
}

.medinq-btn__icon {
	display: inline-flex;
}

.medinq-btn__label {
	color: inherit;
}

.medinq-btn--solid {
	color: #fff;
	background: var(--medinq-brand);
}

.medinq-btn--solid:hover,
.medinq-btn--solid:focus,
.medinq-btn--solid:active {
	color: #fff;
}

.medinq-btn--solid:hover {
	background: var(--medinq-brand-600);
	box-shadow: none;
	transform: translateY(-1px);
}

.medinq-btn--solid:active {
	transform: translateY(0);
}

.medinq-btn--outline {
	background: transparent;
	color: var(--medinq-brand);
	border-color: var(--medinq-brand);
}

.medinq-btn--outline:hover {
	background: var(--medinq-brand);
	color: #fff;
	transform: translateY(-1px);
}

.medinq-btn--soft {
	background: var(--medinq-brand-050);
	color: var(--medinq-brand-600);
}

.medinq-btn--soft:hover {
	background: var(--medinq-brand);
	color: #fff;
	transform: translateY(-1px);
}

/* ---------------------------------------------------------------------------
 * Modal
 * ------------------------------------------------------------------------- */
.medinq-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(8px, 2.5vw, 28px);
	font-family: var(--medinq-font);
	color: var(--medinq-ink);
	-webkit-font-smoothing: antialiased;
}

.medinq-modal[hidden] {
	display: none;
}

.medinq-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(13, 24, 32, 0.55);
	backdrop-filter: blur(3px);
	opacity: 0;
	transition: opacity 0.24s ease;
}

.medinq-modal.is-open .medinq-modal__overlay {
	opacity: 1;
}

.medinq-modal__dialog {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: var(--medinq-modal-width, 560px);
	max-height: calc(100vh - 2 * clamp(8px, 2.5vw, 28px));
	background: var(--medinq-bg);
	border-radius: var(--medinq-radius);
	box-shadow: var(--medinq-shadow);
	overflow: hidden; /* The shell never scrolls; only the form body does. */
	transform: translateY(14px) scale(0.985);
	opacity: 0;
	transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.26s ease;
	overscroll-behavior: contain;
}

.medinq-modal.is-open .medinq-modal__dialog {
	transform: translateY(0) scale(1);
	opacity: 1;
}

.medinq-modal__close {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 5;
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: #9aa3b2;
	cursor: pointer;
	padding: 0;
	transition: color 0.15s ease;
}

.medinq-modal__close svg {
	pointer-events: none;
}

.medinq-modal__close:hover {
	color: #69727d;
}

.medinq-modal__close:focus-visible {
	outline: 2px solid var(--medinq-brand);
	outline-offset: 2px;
}

.medinq-modal__close:focus-visible {
	outline: none;
	box-shadow: var(--medinq-ring);
}

.medinq-modal__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
	overflow: hidden;
}

.medinq-modal__loading {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 220px;
	flex: 1 1 auto;
}

/* Error/notice injected directly into the (padding-less) body before a form exists. */
.medinq-modal__body > .medinq-form__feedback {
	margin: clamp(22px, 4vw, 34px);
}

/* ---------------------------------------------------------------------------
 * Form
 * ------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------
 * Form — fixed header + internally scrollable body + sticky footer.
 * The modal shell itself never scrolls; only .medinq-form__body does, and
 * only when the fields exceed the available height.
 * ------------------------------------------------------------------------- */
.medinq-form {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
}

.medinq-form__head {
	flex: 0 0 auto;
	padding: clamp(18px, 3vw, 24px) clamp(20px, 3.5vw, 28px) 0.9rem;
	padding-right: 3.2rem; /* clear the close button */
	border-bottom: 1px solid var(--medinq-line);
	background: var(--medinq-bg);
}

.medinq-form__eyebrow {
	margin: 0 0 0.28rem;
	font-family: var(--medinq-font);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--medinq-brand);
}

.medinq-form__title {
	margin: 0;
	font-family: var(--medinq-heading);
	font-size: clamp(1.3rem, 2.6vw, 1.62rem);
	font-weight: 600;
	line-height: 1.2;
	color: var(--medinq-ink);
	letter-spacing: -0.01em;
	word-break: break-word;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.medinq-form__desc {
	margin: 0.34rem 0 0;
	font-size: 0.88rem;
	line-height: 1.45;
	color: var(--medinq-muted);
}

/* Product SKU chip under a dynamic product title. */
.medinq-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: 0.55rem;
	padding: 0.26rem 0.66rem;
	font-size: 0.76rem;
	font-weight: 600;
	color: var(--medinq-brand);
	background: var(--medinq-brand-050);
	border-radius: var(--medinq-radius-sm);
	letter-spacing: 0.01em;
}

.medinq-chip__key {
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	opacity: 0.7;
}

.medinq-form__body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overflow-x: hidden;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	padding: clamp(15px, 3vw, 20px) clamp(20px, 3.5vw, 28px);
	scrollbar-width: thin;
	scrollbar-color: var(--medinq-line) transparent;
}

.medinq-form__body::-webkit-scrollbar {
	width: 9px;
}

.medinq-form__body::-webkit-scrollbar-thumb {
	background: var(--medinq-line);
	border-radius: 999px;
	border: 2px solid var(--medinq-bg);
}

.medinq-form__body::-webkit-scrollbar-thumb:hover {
	background: #cdd5da;
}

.medinq-form__grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 0.85rem 0.85rem;
}

.medinq-field.is-full {
	grid-column: span 12;
}

.medinq-field.is-half {
	grid-column: span 6;
}

.medinq-field.is-third {
	grid-column: span 4;
}

.medinq-field {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.medinq-label {
	font-family: var(--medinq-font);
	font-size: 0.85rem;
	font-weight: 400;
	color: var(--medinq-ink);
	margin-bottom: 0.38rem;
	letter-spacing: 0.005em;
}

.medinq-req {
	color: var(--medinq-danger);
	font-weight: 500;
	margin-left: 0.12rem;
}

/* Soft "overlay" field — a gently filled surface rather than a hard-bordered
 * box. Compact, thin type, the fill is the resting (active) state. */
.medinq-input {
	width: 100%;
	box-sizing: border-box;
	font-family: var(--medinq-font);
	font-size: 0.9rem;
	font-weight: 400;
	color: var(--medinq-ink);
	background: var(--medinq-field-bg);
	border: 1px solid transparent;
	border-radius: var(--medinq-radius-sm);
	padding: 0.6rem 0.8rem;
	line-height: 1.4;
	box-shadow: var(--medinq-field-shadow);
	transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
	-webkit-appearance: none;
	appearance: none;
}

.medinq-input::placeholder {
	color: #9aa3b8;
	font-weight: 300;
}

textarea.medinq-input {
	resize: vertical;
	min-height: 88px;
}

/* Small, refined dropdown chevron — replaces the oversized native toggle. */
select.medinq-input {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='none' stroke='%2369727d' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.8rem center;
	background-size: 10px 6px;
	padding-right: 2rem;
	cursor: pointer;
}

.medinq-input:focus {
	outline: none;
	background: var(--medinq-bg);
	border-color: var(--medinq-brand);
	box-shadow: var(--medinq-ring);
}

/* Phone: a dial-code dropdown joined to the number input. */
.medinq-phone {
	display: flex;
	gap: 0.5rem;
	align-items: stretch;
	width: 100%;
}

.medinq-phone__code,
.medinq-phone .medinq-cc {
	flex: 0 0 6rem;
	width: 6rem;
}

.medinq-phone__num {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
}

/* Custom flag dropdown (JS-enhanced). The native select is hidden when this
 * is active; flags are real images so they show on every OS incl. Windows. */
.medinq-cc {
	position: relative;
	flex: 0 0 auto;
	width: 6.6rem;
}

.medinq-cc--wide {
	width: 100%;
}

.medinq-cc-wrap {
	width: 100%;
}

.medinq-flag--blank {
	display: inline-block;
	width: 20px;
	height: 15px;
	border-radius: 2px;
	background: var(--medinq-line);
	flex: 0 0 auto;
}

.medinq-cc__pop--wide {
	width: 100%;
}

.medinq-cc__native {
	display: none;
}

.medinq-flag {
	display: inline-block;
	width: 20px;
	height: 15px;
	object-fit: cover;
	border-radius: 2px;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
	flex: 0 0 auto;
}

.medinq-cc__btn {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	width: 100%;
	cursor: pointer;
	text-align: left;
}

.medinq-cc__val {
	font-size: 0.86rem;
	color: var(--medinq-ink);
}

.medinq-cc__val--placeholder {
	color: #9aa3b8;
	font-weight: 300;
}

.medinq-cc__caret {
	margin-left: auto;
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid var(--medinq-muted);
}

.medinq-cc__pop {
	position: absolute;
	z-index: 20;
	top: calc(100% + 4px);
	left: 0;
	width: 17rem;
	max-width: 80vw;
	background: var(--medinq-bg);
	border: 1px solid var(--medinq-line);
	border-radius: var(--medinq-radius-sm);
	box-shadow: 0 14px 34px -12px rgba(18, 70, 171, 0.3);
	padding: 0.4rem;
	overflow: hidden;
}

.medinq-cc__search {
	width: 100%;
	box-sizing: border-box;
	font-family: var(--medinq-font);
	font-size: 0.86rem;
	color: var(--medinq-ink);
	background: var(--medinq-field-bg);
	border: 1px solid transparent;
	border-radius: calc(var(--medinq-radius-sm) - 1px);
	padding: 0.5rem 0.6rem;
	margin-bottom: 0.35rem;
	-webkit-appearance: none;
	appearance: none;
}

.medinq-cc__search:focus {
	outline: none;
	background: var(--medinq-bg);
	border-color: var(--medinq-brand);
	box-shadow: var(--medinq-ring);
}

.medinq-cc__list {
	max-height: 14rem;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.medinq-cc__opt {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	width: 100%;
	border: none;
	background: transparent;
	padding: 0.5rem 0.6rem;
	border-radius: calc(var(--medinq-radius-sm) - 1px);
	cursor: pointer;
	font-family: var(--medinq-font);
	font-size: 0.88rem;
	color: var(--medinq-ink);
	text-align: left;
}

.medinq-cc__opt:hover {
	background: var(--medinq-field-bg);
}

.medinq-cc__opt.is-active {
	background: var(--medinq-brand-050);
	color: var(--medinq-brand);
	font-weight: 600;
}

.medinq-cc__name {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.medinq-cc__dial {
	flex: 0 0 auto;
	color: var(--medinq-muted);
	font-size: 0.82rem;
}

.medinq-cc__opt.is-active .medinq-cc__dial {
	color: var(--medinq-brand);
}

.medinq-input--file {
	padding: 0.45rem 0.55rem;
	font-size: 0.85rem;
	font-weight: 400;
	background: var(--medinq-field-bg);
	cursor: pointer;
}

.medinq-input--file::file-selector-button {
	font-family: var(--medinq-heading);
	font-size: 0.8rem;
	font-weight: 600;
	color: #fff;
	background: var(--medinq-brand);
	border: none;
	border-radius: var(--medinq-radius-sm);
	padding: 0.4rem 0.85rem;
	margin-right: 0.75rem;
	cursor: pointer;
	transition: background 0.16s ease;
}

.medinq-input--file::file-selector-button:hover {
	background: var(--medinq-brand-600);
}

.medinq-hint {
	margin-top: 0.4rem;
	font-size: 0.78rem;
	font-weight: 300;
	color: var(--medinq-muted);
}

.medinq-field.has-error .medinq-input {
	border-color: var(--medinq-danger);
	box-shadow: 0 0 0 3px rgba(162, 0, 0, 0.12);
}

.medinq-error {
	display: none;
	margin-top: 0.34rem;
	font-size: 0.76rem;
	font-weight: 500;
	color: var(--medinq-danger);
}

.medinq-field.has-error .medinq-error {
	display: block;
}

/* Honeypot — kept in the layout but invisible/inert to humans. */
.medinq-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.medinq-form__feedback {
	margin-top: 1rem;
	padding: 0.75rem 0.95rem;
	border-radius: var(--medinq-radius-sm);
	background: #fdeceb;
	border: 1px solid #f6cfcc;
	color: var(--medinq-danger);
	font-size: 0.85rem;
	line-height: 1.45;
}

.medinq-form__feedback[hidden] {
	display: none;
}

.medinq-form__foot {
	flex: 0 0 auto;
	padding: 0.85rem clamp(20px, 3.5vw, 28px) clamp(14px, 2.5vw, 18px);
	border-top: 1px solid var(--medinq-line);
	background: var(--medinq-bg);
}

.medinq-submit {
	position: relative;
	width: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	font-family: var(--medinq-heading);
	font-size: 0.9rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #fff;
	background: var(--medinq-brand);
	border: none;
	border-radius: var(--medinq-radius-sm);
	padding: 0.85rem 1.4rem;
	cursor: pointer;
	box-shadow: none;
	transition: background 0.15s ease, transform 0.12s ease;
}

.medinq-submit,
.medinq-submit:hover,
.medinq-submit:focus,
.medinq-submit:active,
.medinq-submit .medinq-submit__text {
	color: #fff;
}

.medinq-submit:hover:not(:disabled) {
	background: var(--medinq-brand-600);
	box-shadow: none;
	transform: translateY(-1px);
}

.medinq-submit:active:not(:disabled) {
	transform: translateY(0);
}

.medinq-submit:focus-visible {
	outline: 2px solid var(--medinq-brand-600);
	outline-offset: 2px;
	box-shadow: none;
}

.medinq-submit:disabled {
	opacity: 0.72;
	cursor: progress;
}

.medinq-form__note {
	margin: 0.65rem 0 0;
	font-size: 0.73rem;
	line-height: 1.45;
	color: var(--medinq-muted);
	text-align: center;
}

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

.medinq-spinner--lg {
	width: 30px;
	height: 30px;
	border-width: 3px;
	border-color: var(--medinq-brand-050);
	border-top-color: var(--medinq-brand);
	display: inline-block;
}

.medinq-submit.is-loading .medinq-spinner {
	display: inline-block;
}

.medinq-submit.is-loading .medinq-submit__text {
	opacity: 0.85;
}

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

/* ---------------------------------------------------------------------------
 * Success state
 * ------------------------------------------------------------------------- */
.medinq-modal__success {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: clamp(28px, 5vw, 44px);
	text-align: center;
}

.medinq-modal__success[hidden] {
	display: none;
}

.medinq-success__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--medinq-brand-050, #eaf0fa);
	color: var(--medinq-brand);
	margin-bottom: 1rem;
	animation: medinq-pop 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.medinq-success__icon {
	color: var(--medinq-brand);
	margin-bottom: 0.9rem;
	animation: medinq-pop 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.medinq-success__title {
	margin: 0 0 0.5rem;
	font-family: var(--medinq-heading);
	font-size: 1.3rem;
	font-weight: 800;
	color: var(--medinq-ink);
}

.medinq-success__text {
	margin: 0 auto 1.5rem;
	max-width: 34ch;
	font-size: 0.92rem;
	line-height: 1.55;
	color: var(--medinq-muted);
}

@keyframes medinq-pop {
	from {
		transform: scale(0.6);
		opacity: 0;
	}
	to {
		transform: scale(1);
		opacity: 1;
	}
}

/* ---------------------------------------------------------------------------
 * Responsive
 * ------------------------------------------------------------------------- */

/* Tablet / small laptop: keep 2 columns but tighten gaps; thirds become halves
 * so three-up rows don't get cramped before the full mobile collapse. */
@media (max-width: 820px) {
	.medinq-form__grid {
		gap: 0.75rem 0.7rem;
	}
	.medinq-field.is-third {
		grid-column: span 6;
	}
}

/* Phones: single column, modal becomes a bottom sheet, bigger tap targets. */
@media (max-width: 600px) {
	.medinq-field.is-half,
	.medinq-field.is-third {
		grid-column: span 12;
	}

	.medinq-modal {
		padding: 0;
		align-items: flex-end;
	}

	.medinq-modal__dialog {
		max-width: 100%;
		width: 100%;
		max-height: 90vh;
		max-height: 90dvh; /* dynamic viewport height — accounts for mobile chrome */
		border-radius: 0;
		transform: translateY(100%);
	}

	.medinq-modal.is-open .medinq-modal__dialog {
		transform: translateY(0);
	}

	/* Tighter, comfortable padding on small screens. */
	.medinq-form__head {
		padding: 18px 16px 0.8rem;
		padding-right: 3rem;
	}
	.medinq-form__body {
		padding: 16px;
	}
	.medinq-form__foot {
		padding: 0.85rem 16px calc(0.85rem + env(safe-area-inset-bottom, 0px));
	}

	/* Keep the close button clearly tappable in the corner. */
	.medinq-modal__close {
		top: 10px;
		right: 10px;
		width: 40px;
		height: 40px;
	}

	/* Phone code + number stay on one row; code compact, number fills. */
	.medinq-phone {
		flex-wrap: nowrap;
		gap: 0.4rem;
	}
	.medinq-phone__code,
	.medinq-phone .medinq-cc {
		width: 5.2rem;
		flex: 0 0 auto;
	}
	.medinq-phone__num {
		flex: 1 1 auto;
		min-width: 0;
	}

	/* Country / code dropdown popup: never overflow the viewport. */
	.medinq-cc__pop {
		width: min(20rem, calc(100vw - 24px));
		max-width: calc(100vw - 24px);
	}
	.medinq-cc--wide .medinq-cc__pop,
	.medinq-cc__pop--wide {
		width: calc(100vw - 32px);
		left: 0;
	}

	/* Larger tap targets; 16px font stops iOS auto-zoom on focus. */
	.medinq-input {
		font-size: 16px;
		padding: 0.72rem 0.85rem;
	}
	.medinq-cc__btn,
	.medinq-phone__code {
		font-size: 15px;
	}

	.medinq-submit {
		padding: 0.95rem 1.4rem;
		font-size: 0.95rem;
	}

	/* Inline forms: sit edge-to-edge comfortably, no fixed widths. */
	.medinq-inline {
		max-width: 100% !important;
		border-radius: 0;
		border-left: none;
		border-right: none;
	}
	.medinq-inline .medinq-form__body {
		padding: 16px;
	}

	/* Stand-alone buttons go full width so they're easy to tap. */
	.medinq-widget .medinq-btn,
	.medinq-widget .medinq-wa,
	.medinq-wa-widget .medinq-wa {
		width: 100%;
	}

	/* Form title doesn't get oversized on small screens. */
	.medinq-form__title {
		font-size: 1.15rem;
	}
	.medinq-success__title {
		font-size: 1.15rem;
	}
}

/* Very small phones. */
@media (max-width: 360px) {
	.medinq-form__grid {
		gap: 0.65rem 0;
	}
	.medinq-phone__code,
	.medinq-phone .medinq-cc {
		width: 4.8rem;
	}
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
	.medinq-modal__overlay,
	.medinq-modal__dialog,
	.medinq-btn,
	.medinq-submit,
	.medinq-wa,
	.medinq-success__icon {
		transition: none;
		animation: none;
	}
}

/* ===========================================================================
 * Form design variants (Forms Library). The base form is .medinq-form;
 * each library template adds .medinq-form--{design} for a distinct look.
 * ======================================================================== */

/* --- Card: centered, friendly, roomy (Quick Contact) --- */
.medinq-form--card .medinq-form__head {
	text-align: center;
	padding-top: clamp(22px, 4vw, 30px);
}
.medinq-form--card .medinq-form__title {
	font-size: clamp(1.4rem, 3vw, 1.7rem);
}
.medinq-form--card .medinq-form__desc {
	max-width: 30rem;
	margin-left: auto;
	margin-right: auto;
}
.medinq-form--card .medinq-form__body {
	padding: clamp(20px, 4vw, 30px) clamp(24px, 5vw, 40px);
}
.medinq-form--card .medinq-submit {
	border-radius: var(--medinq-radius-sm);
}

/* --- Split: colored info panel beside the fields (Detailed Contact) --- */
.medinq-form--split .medinq-form__head {
	background: linear-gradient( 135deg, var(--medinq-brand), var(--medinq-brand-600) );
	border-bottom: none;
	color: #fff;
}
.medinq-form--split .medinq-form__title {
	color: #fff;
}
.medinq-form--split .medinq-form__eyebrow {
	color: rgba( 255, 255, 255, 0.85 );
}
.medinq-form--split .medinq-form__desc {
	color: rgba( 255, 255, 255, 0.9 );
}
.medinq-form--split .medinq-modal__close,
.medinq-form--split + .medinq-modal__close {
	color: #fff;
}

/* --- Minimal: lean newsletter (Newsletter Sign-up) --- */
.medinq-form--minimal .medinq-form__head {
	text-align: center;
	border-bottom: none;
	padding-bottom: 0.2rem;
}
.medinq-form--minimal .medinq-form__title {
	font-size: clamp(1.3rem, 2.8vw, 1.55rem);
}
.medinq-form--minimal .medinq-form__desc {
	max-width: 26rem;
	margin: 0.4rem auto 0;
}
.medinq-form--minimal .medinq-form__body {
	padding-top: clamp(14px, 3vw, 18px);
}
.medinq-form--minimal .medinq-form__note {
	margin-top: 0.6rem;
}
.medinq-form--minimal .medinq-submit {
	font-size: 0.95rem;
}

/* ===========================================================================
 * Inline forms (embedded on the page, not in the popup modal). The shared
 * .medinq-form markup is reused; these rules undo the modal's fixed-height
 * scroll behaviour and give the form a clean card frame in the page flow.
 * ======================================================================== */
.medinq-inline {
	width: 100%;
	margin: 0 auto;
	background: var(--medinq-bg);
	border: none;
	border-radius: 0;
	box-shadow: none;
	overflow: hidden;
}

.medinq-inline .medinq-form {
	display: block;
	max-height: none;
}

.medinq-inline .medinq-form__body {
	overflow: visible;
	max-height: none;
}

/* Split design inside an inline context keeps its colored header nicely. */
.medinq-inline .medinq-form--split .medinq-form__head {
	border-radius: 0;
}

/* Inline success panel (shown in place after submit). */
.medinq-inline__success {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: clamp(32px, 5vw, 48px) clamp(20px, 4vw, 36px);
}
.medinq-inline__success .medinq-success__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--medinq-brand-050, #eaf0fa);
	color: var(--medinq-brand);
	margin-bottom: 1rem;
}
.medinq-inline__success .medinq-success__title {
	font-family: var(--medinq-heading);
	font-size: 1.35rem;
	font-weight: 700;
	margin: 0 0 0.5rem;
	color: var(--medinq-ink);
}
.medinq-inline__success .medinq-success__text {
	margin: 0 auto;
	max-width: 30rem;
	color: var(--medinq-muted);
	font-size: 0.95rem;
	line-height: 1.6;
}

/* Editor hint when no forms are active. */
.medinq-editor-note {
	display: inline-block;
	padding: 10px 14px;
	background: #fff3cd;
	border: 1px solid #ffe69c;
	border-radius: 6px;
	color: #7a5b00;
	font-size: 13px;
}

/* --- Simple: plain bordered fields, no heading (contact / newsletter) --- */
.medinq-form--simple .medinq-form__body {
	padding-top: clamp(20px, 4vw, 26px);
}
/* When there's no header, soften the footer divider so the whole thing reads
 * as one clean bordered card of fields + button. */
.medinq-inline .medinq-form--simple .medinq-form__foot {
	border-top: none;
	padding-top: 0;
}
.medinq-inline .medinq-form--simple .medinq-form__note {
	text-align: left;
}

/* ===========================================================================
 * WhatsApp button
 * ======================================================================== */
.medinq-wa {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55em;
	font-family: var(--medinq-heading);
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 0.8em 1.6em;
	border-radius: var(--medinq-radius-sm);
	border: 2px solid transparent;
	cursor: pointer;
	text-decoration: none;
	box-shadow: none;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
	-webkit-appearance: none;
	appearance: none;
}
.medinq-wa__icon { flex: 0 0 auto; }

.medinq-wa--solid,
.medinq-wa--solid:hover,
.medinq-wa--solid:focus,
.medinq-wa--solid:active,
.medinq-wa--solid .medinq-wa__label {
	color: #fff;
}
.medinq-wa--solid {
	background: #25d366; /* WhatsApp green */
}
.medinq-wa--solid:hover {
	background: #1ebe5b;
	transform: translateY(-1px);
}
.medinq-wa--solid:active { transform: translateY(0); }

.medinq-wa--brand,
.medinq-wa--brand:hover,
.medinq-wa--brand:focus,
.medinq-wa--brand:active,
.medinq-wa--brand .medinq-wa__label {
	color: #fff;
}
.medinq-wa--brand {
	background: var(--medinq-brand);
}
.medinq-wa--brand:hover {
	background: var(--medinq-brand-600);
	transform: translateY(-1px);
}
.medinq-wa--brand:active { transform: translateY(0); }

.medinq-wa--outline {
	background: transparent;
	color: #1ebe5b;
	border-color: #25d366;
}
.medinq-wa--outline:hover {
	background: #25d366;
	color: #fff;
	transform: translateY(-1px);
}

.medinq-wa:focus-visible {
	outline: 2px solid var(--medinq-brand);
	outline-offset: 2px;
}

/* Standalone widget wrapper + full-width alignment option. */
.medinq-wa-widget { line-height: 0; }
.medinq-wa-align-justify .medinq-wa { width: 100%; }

/* When the WhatsApp button follows a form button/inline form, give it room. */
.medinq-widget .medinq-btn + .medinq-wa,
.medinq-widget--inline .medinq-wa {
	margin-top: 10px;
}

/* ===========================================================================
 * PREMIUM B2B ACTION BUTTON SYSTEM — Woodmart-compatible
 *
 * Matches the "Back to main product" Woodmart button exactly: solid brand
 * blue background, white text, slight 4px corners, no shadow on rest OR hover
 * — a small lift only. The selectors use !important on the IDENTITY rules
 * (background, text color) so Woodmart's .btn theme styles can't blank them.
 * Padding/typography stay clean (no !important) so Elementor controls still
 * work for customization.
 * ======================================================================== */

/* Shared geometry across all action buttons. */
.medinq-btn,
.medinq-submit,
.medinq-wa {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	min-height: 48px !important;
	height: auto;
	padding: 12px 24px !important;
	margin: 0;
	font-family: var(--medinq-heading);
	font-size: 14px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	letter-spacing: 0.06em !important;
	text-transform: uppercase;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	border-radius: 4px !important;
	border: 2px solid transparent !important;
	cursor: pointer;
	text-decoration: none;
	box-shadow: none !important;
	box-sizing: border-box;
	transition: background-color 0.3s ease, color 0.3s ease,
		border-color 0.3s ease, transform 0.3s ease;
	-webkit-appearance: none;
	appearance: none;
}

.medinq-submit { width: 100%; }

/* Icon alignment fix — flex-center the icon container, kill baseline gap,
 * and lock both buttons' icons to an identical 18px box so neither looks bulkier. */
.medinq-btn__icon,
.medinq-wa__icon,
.medinq-submit .medinq-btn__icon {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	line-height: 0;
}
.medinq-btn__icon svg,
.medinq-wa__icon svg,
.medinq-btn__icon img,
.medinq-wa__icon img {
	display: block;
	width: 18px;
	height: 18px;
}
.medinq-btn__label,
.medinq-wa__label,
.medinq-submit__text {
	display: inline-flex;
	align-items: center;
	line-height: 1.2;
	color: inherit;
}

/* IDENTITY RULES — !important so the Woodmart theme can't repaint them.
 * Elementor widget controls also use !important + higher specificity so the
 * user can still override these from the editor. */

/* Solid (Send Inquiry, Submit) — brand blue, white text, matches "Back to main product". */
.medinq-btn--solid,
.medinq-submit {
	background-color: var(--medinq-brand) !important;
	color: #ffffff !important;
	border-color: transparent !important;
}
.medinq-btn--solid:hover,
.medinq-btn--solid:focus,
.medinq-submit:hover:not(:disabled),
.medinq-submit:focus:not(:disabled) {
	background-color: var(--medinq-brand-600) !important;
	color: #ffffff !important;
	border-color: transparent !important;
}
.medinq-btn--solid .medinq-btn__label,
.medinq-btn--solid:hover .medinq-btn__label,
.medinq-submit .medinq-submit__text,
.medinq-submit:hover .medinq-submit__text {
	color: #ffffff !important;
}

/* WhatsApp — green identity, white text always. */
.medinq-wa,
.medinq-wa--solid {
	background-color: #25d366 !important;
	color: #ffffff !important;
	border-color: transparent !important;
}
.medinq-wa:hover,
.medinq-wa:focus,
.medinq-wa--solid:hover,
.medinq-wa--solid:focus {
	background-color: #1ebe5b !important;
	color: #ffffff !important;
	border-color: transparent !important;
}
.medinq-wa .medinq-wa__label,
.medinq-wa .medinq-wa__icon,
.medinq-wa:hover .medinq-wa__label,
.medinq-wa:hover .medinq-wa__icon {
	color: #ffffff !important;
	fill: #ffffff;
}
/* SVG inside WhatsApp button uses fill="currentColor" — force white explicitly
 * too in case a theme rule sets fill on inline SVGs. */
.medinq-wa svg,
.medinq-wa:hover svg {
	color: #ffffff;
	fill: currentColor;
}

/* WhatsApp BRAND variant (uses site brand color instead of green) — keep
 * blue background but force white text. */
.medinq-wa--brand {
	background-color: var(--medinq-brand) !important;
	color: #ffffff !important;
}
.medinq-wa--brand:hover {
	background-color: var(--medinq-brand-600) !important;
	color: #ffffff !important;
}

/* WhatsApp OUTLINE variant — transparent bg, green border + text. */
.medinq-wa--outline {
	background-color: transparent !important;
	color: #1ebe5b !important;
	border-color: #25d366 !important;
}
.medinq-wa--outline:hover {
	background-color: #25d366 !important;
	color: #ffffff !important;
	border-color: #25d366 !important;
}

/* Hover lift — small, professional. NO shadow. */
.medinq-btn:hover,
.medinq-submit:hover:not(:disabled),
.medinq-wa:hover {
	transform: translateY(-1px);
	box-shadow: none !important;
}
.medinq-btn:active,
.medinq-submit:active:not(:disabled),
.medinq-wa:active {
	transform: translateY(0);
}

/* Focus — identical accessible ring on both buttons. */
.medinq-btn:focus-visible,
.medinq-submit:focus-visible,
.medinq-wa:focus-visible {
	outline: 2px solid var(--medinq-brand-600);
	outline-offset: 2px;
}

/* Disabled — identical muted treatment, no lift. */
.medinq-btn:disabled,
.medinq-submit:disabled,
.medinq-wa:disabled,
.medinq-btn[aria-disabled="true"],
.medinq-wa[aria-disabled="true"] {
	opacity: 0.55;
	cursor: not-allowed;
	transform: none !important;
}

/* Mobile: keep dimensions touch-friendly without going oversized. */
@media (max-width: 600px) {
	.medinq-btn,
	.medinq-submit,
	.medinq-wa {
		min-height: 48px !important;
		padding: 12px 20px !important;
		font-size: 14px !important;
		white-space: nowrap;
	}
	/* When a Send Inquiry + WhatsApp button sit together, make them equal full width. */
	.medinq-widget .medinq-btn,
	.medinq-widget .medinq-wa,
	.medinq-wa-align-justify .medinq-wa {
		width: 100%;
	}
}