/**
 * AmalCure — WPForms presentation layer.
 *
 * WHY THIS FILE EXISTS
 *
 * Every field on the quote form (form 227) and the homepage appointment form
 * (form 67) is set to WPForms' "Medium" field size. Medium is not a spacing
 * preset — it is literally `width: 60%`. So each control stopped well short of
 * its column edge, and because the columns themselves are different widths the
 * form rendered at three unrelated control widths at once:
 *
 *     Full Name / Email / Country   column 249px → control 150px
 *     Treatment / Preferred City    column 518px → control 311px
 *     Medical Condition (textarea)  column 518px → control 518px
 *
 * The phone row was the worst of it. It uses intl-tel-input in
 * `separate-dial-code` mode, which overlays a ~61px flag-and-dial-code box on
 * the left of the input. Against a 150px control that leaves ~89px of typing
 * room, which is why the placeholder rendered as "Your " with the rest clipped.
 *
 * These could each be changed field-by-field in the WPForms builder, but that
 * is nine manual settings per form that any future edit can undo. Fixing it in
 * CSS makes it structural.
 *
 * Everything here is scoped to `.wpforms-container` so no other form on the
 * site is affected.
 *
 * @package amalcure
 */

/* -------------------------------------------------------------------------
 * 1. Controls fill their column
 * ---------------------------------------------------------------------- */

.wpforms-container .wpforms-field input[type="text"],
.wpforms-container .wpforms-field input[type="email"],
.wpforms-container .wpforms-field input[type="tel"],
.wpforms-container .wpforms-field input[type="url"],
.wpforms-container .wpforms-field input[type="number"],
.wpforms-container .wpforms-field input[type="date"],
.wpforms-container .wpforms-field select,
.wpforms-container .wpforms-field textarea {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

/* The size classes are what set 25% / 60%, and WPForms declares them as
 * `.wpforms-container select.wpforms-field-medium` — one class plus one
 * element, exactly the same specificity as the block above. A tie is decided by
 * source order, and WPForms' stylesheet loads after this one, so the block
 * above alone silently lost for every <select> on the form while the text
 * inputs happened to win. Hence the deliberately heavier selector here: four
 * classes and two elements, which nothing in WPForms or Astra outranks. Raising
 * specificity is the right lever — !important would only move the problem to
 * whoever needs to override this next. */
div.wpforms-container .wpforms-form .wpforms-field input.wpforms-field-small,
div.wpforms-container .wpforms-form .wpforms-field input.wpforms-field-medium,
div.wpforms-container .wpforms-form .wpforms-field input.wpforms-field-large,
div.wpforms-container .wpforms-form .wpforms-field select.wpforms-field-small,
div.wpforms-container .wpforms-form .wpforms-field select.wpforms-field-medium,
div.wpforms-container .wpforms-form .wpforms-field select.wpforms-field-large,
div.wpforms-container .wpforms-form .wpforms-field textarea.wpforms-field-small,
div.wpforms-container .wpforms-form .wpforms-field textarea.wpforms-field-medium,
div.wpforms-container .wpforms-form .wpforms-field textarea.wpforms-field-large,
div.wpforms-container .wpforms-form .wpforms-field .wpforms-field-row.wpforms-field-small,
div.wpforms-container .wpforms-form .wpforms-field .wpforms-field-row.wpforms-field-medium,
div.wpforms-container .wpforms-form .wpforms-field .wpforms-field-row.wpforms-field-large {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

/* -------------------------------------------------------------------------
 * 2. Phone field — intl-tel-input
 *
 * The .iti wrapper already spans the column; it was the input inside it that
 * stayed at 60%. iti sets the left padding itself, in an inline style sized to
 * the dial code, so border-box sizing is what keeps the text clear of the flag.
 * ---------------------------------------------------------------------- */

.wpforms-container .iti {
	display: block;
	width: 100%;
}

.wpforms-container .iti input[type="text"],
.wpforms-container .iti input[type="tel"] {
	width: 100%;
	box-sizing: border-box;
}

/* iti renders the country list above the following field unless it is lifted. */
.wpforms-container .iti__country-list {
	z-index: 5;
}

/* -------------------------------------------------------------------------
 * 3. One consistent control
 * ---------------------------------------------------------------------- */

.wpforms-container .wpforms-field input[type="text"],
.wpforms-container .wpforms-field input[type="email"],
.wpforms-container .wpforms-field input[type="tel"],
.wpforms-container .wpforms-field input[type="url"],
.wpforms-container .wpforms-field input[type="number"],
.wpforms-container .wpforms-field select {
	height: 50px;
	padding: 0 14px;
}

.wpforms-container .wpforms-field textarea {
	min-height: 140px;
	padding: 12px 14px;
	resize: vertical;
}

.wpforms-container .wpforms-field input[type="text"],
.wpforms-container .wpforms-field input[type="email"],
.wpforms-container .wpforms-field input[type="tel"],
.wpforms-container .wpforms-field input[type="url"],
.wpforms-container .wpforms-field input[type="number"],
.wpforms-container .wpforms-field select,
.wpforms-container .wpforms-field textarea {
	border: 1px solid #d8e0e6;
	border-radius: 8px;
	background-color: #fff;
	color: #1e293b;
	font-size: 16px; /* below 16px iOS zooms the page on focus */
	line-height: 1.5;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.wpforms-container .wpforms-field input:focus,
.wpforms-container .wpforms-field select:focus,
.wpforms-container .wpforms-field textarea:focus {
	border-color: #12a89d;
	box-shadow: 0 0 0 3px rgba(18, 168, 157, 0.15);
	outline: none;
}

.wpforms-container .wpforms-field input::placeholder,
.wpforms-container .wpforms-field textarea::placeholder {
	color: #94a3b8;
	opacity: 1;
}

/* Keep the native select arrow from sitting on top of the last characters. */
.wpforms-container .wpforms-field select {
	padding-right: 38px;
}

/* -------------------------------------------------------------------------
 * 4. Labels and spacing
 * ---------------------------------------------------------------------- */

.wpforms-container .wpforms-field-label {
	display: block;
	margin-bottom: 7px;
	color: #1e293b;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
}

.wpforms-container .wpforms-field-sublabel,
.wpforms-container .wpforms-field-description {
	color: #64748b;
	font-size: 13px;
	line-height: 1.5;
}

.wpforms-container .wpforms-field {
	padding: 0 0 18px;
}

.wpforms-container .wpforms-required-label {
	color: #dc2626;
}

/* -------------------------------------------------------------------------
 * 5. Two-column rows
 *
 * WPForms floats its halves with a 4% gutter. Below 782px that is too tight to
 * read — WPForms only stacks them at 600px, which leaves tablets cramped.
 * ---------------------------------------------------------------------- */

@media only screen and (max-width: 782px) {

	.wpforms-container .wpforms-field.wpforms-one-half,
	.wpforms-container .wpforms-field.wpforms-first {
		float: none;
		width: 100%;
		margin-left: 0;
	}
}

/* -------------------------------------------------------------------------
 * 6. Submit button
 * ---------------------------------------------------------------------- */

.wpforms-container .wpforms-submit-container button[type="submit"] {
	min-height: 52px;
	padding: 0 32px;
	border: 0;
	border-radius: 8px;
	background-color: #12a89d;
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.15s ease, transform 0.05s ease;
}

.wpforms-container .wpforms-submit-container button[type="submit"]:hover,
.wpforms-container .wpforms-submit-container button[type="submit"]:focus {
	background-color: #0e8d84;
	color: #fff;
}

.wpforms-container .wpforms-submit-container button[type="submit"]:active {
	transform: translateY(1px);
}

@media only screen and (max-width: 782px) {

	.wpforms-container .wpforms-submit-container button[type="submit"] {
		width: 100%;
	}
}

/* -------------------------------------------------------------------------
 * 7. Validation messages
 * ---------------------------------------------------------------------- */

.wpforms-container label.wpforms-error {
	display: block;
	margin-top: 6px;
	color: #dc2626;
	font-size: 13px;
}

.wpforms-container .wpforms-field input.wpforms-error,
.wpforms-container .wpforms-field select.wpforms-error,
.wpforms-container .wpforms-field textarea.wpforms-error {
	border-color: #dc2626;
}

/* -------------------------------------------------------------------------
 * 8. /get-quote/ — vertical alignment of the two columns
 *
 * The intro column is ~336px tall against an ~897px form, and the Elementor
 * container is `align-items: flex-start`, so the whole difference piled up as
 * empty space under the bullet list. Centring splits it above and below, which
 * reads as deliberate. Desktop only — the columns stack below this width.
 * ---------------------------------------------------------------------- */

@media only screen and (min-width: 1025px) {

	.page-id-230 .elementor-element-30ef432 {
		align-items: center;
	}
}