/*
 * Croator Webstudio Addons — Elementor Pro form skin.
 *
 * Ported from the "Kontakt" form on Croator Homepage.dc.html: soft grey fields with a
 * 1.5px hairline border and 12px radius, 13px bold labels, and a full-width brand
 * button. Applies to every Elementor Pro Form widget on the site; add the CSS class
 * "cws-form-off" to a Form widget (Advanced → CSS Classes) to keep Elementor's own look.
 *
 * Why !important on some declarations: Elementor writes the Form widget's style controls
 * and the Kit's global form/button settings with selectors like
 *   .elementor-123 .elementor-element.elementor-element-abc .elementor-field-group … .elementor-field
 * which no sane stylesheet out-specifies. The flagged properties are exactly the ones those
 * controls (and the global accent colour on the button) set by default. Everything else
 * rides on normal specificity.
 *
 * Colours come from croator-tokens.css, so the form follows the light/dark switch.
 */

.elementor-widget-form:not(.cws-form-off) {
	--cws-form-field-bg: var(--cws-s1);
	--cws-form-field-bd: var(--cws-bd);
	--cws-form-radius: 12px;
	--cws-form-gap: 16px;
}

/* ------------------------------------------------------------------- layout */

/*
 * Elementor spaces rows with per-group padding + a negative wrapper margin, driven by
 * the "Rows Gap" control. The source uses a plain 16px column gap.
 */
.elementor-widget-form:not(.cws-form-off) .elementor-form-fields-wrapper {
	row-gap: var(--cws-form-gap);
	margin-bottom: 0 !important;
}

.elementor-widget-form:not(.cws-form-off) .elementor-field-group {
	margin-bottom: 0 !important;
}

/* ------------------------------------------------------------------- labels */

.elementor-widget-form:not(.cws-form-off) .elementor-field-group > .elementor-field-label {
	display: block;
	margin: 0 0 7px;
	padding: 0 !important;
	font-family: var(--cws-font-body) !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	line-height: 1.4 !important;
	letter-spacing: 0 !important;
	color: var(--cws-tx) !important;
}

/* The required-field asterisk, in brand red rather than Elementor's default. */
.elementor-widget-form:not(.cws-form-off) .elementor-mark-required .elementor-field-label::after {
	color: var(--cws-brand);
}

/* ------------------------------------------------------------------- fields */

.elementor-widget-form:not(.cws-form-off) .elementor-field-group .elementor-field-textual,
.elementor-widget-form:not(.cws-form-off) .elementor-field-group .elementor-select-wrapper select {
	width: 100%;
	min-height: 0;
	margin: 0;
	padding: 13px 15px !important;
	font-family: var(--cws-font-body) !important;
	font-size: 15px !important;
	font-weight: 500 !important;
	line-height: 1.45 !important;
	letter-spacing: 0 !important;
	color: var(--cws-tx) !important;
	background-color: var(--cws-form-field-bg) !important;
	border: 1.5px solid var(--cws-form-field-bd) !important;
	border-radius: var(--cws-form-radius) !important;
	box-shadow: none !important;
	outline: none;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.elementor-widget-form:not(.cws-form-off) .elementor-field-group textarea.elementor-field-textual {
	resize: vertical;
	min-height: 120px;
}

.elementor-widget-form:not(.cws-form-off) .elementor-field-textual::placeholder {
	color: var(--cws-tx3);
	opacity: 1;
}

.elementor-widget-form:not(.cws-form-off) .elementor-field-group .elementor-field-textual:hover {
	border-color: var(--cws-rule) !important;
}

/*
 * The source sets outline:none and nothing else, which leaves keyboard users with no
 * focus cue at all. A brand border plus a soft tinted ring keeps the calm look.
 */
.elementor-widget-form:not(.cws-form-off) .elementor-field-group .elementor-field-textual:focus,
.elementor-widget-form:not(.cws-form-off) .elementor-field-group .elementor-select-wrapper select:focus {
	background-color: var(--cws-card) !important;
	border-color: var(--cws-brand) !important;
	box-shadow: 0 0 0 4px var(--cws-tint) !important;
}

/* Browser autofill paints its own yellow/blue; keep the field on-palette. */
.elementor-widget-form:not(.cws-form-off) .elementor-field-textual:-webkit-autofill {
	-webkit-text-fill-color: var(--cws-tx);
	box-shadow: 0 0 0 1000px var(--cws-form-field-bg) inset !important;
}

/* Select caret — Elementor draws it as an icon inside .elementor-select-wrapper. */
.elementor-widget-form:not(.cws-form-off) .elementor-select-wrapper::before {
	color: var(--cws-tx3);
	right: 15px;
}

/* ------------------------------------------------- checkbox / radio / accept */

.elementor-widget-form:not(.cws-form-off) .elementor-field-subgroup .elementor-field-option label,
.elementor-widget-form:not(.cws-form-off) .elementor-field-type-acceptance label {
	font-family: var(--cws-font-body);
	font-size: 14px;
	font-weight: 500;
	color: var(--cws-tx2);
}

.elementor-widget-form:not(.cws-form-off) .elementor-field-subgroup input[type="checkbox"],
.elementor-widget-form:not(.cws-form-off) .elementor-field-subgroup input[type="radio"] {
	accent-color: var(--cws-brand);
}

/* ------------------------------------------------------------------- button */

.elementor-widget-form:not(.cws-form-off) .e-form__buttons .elementor-button,
.elementor-widget-form:not(.cws-form-off) .elementor-field-type-submit .elementor-button {
	width: 100%;
	min-height: 0;
	padding: 15px !important;
	font-family: var(--cws-font-body) !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: #fff !important;
	background-color: var(--cws-brand) !important;
	background-image: none !important;
	border: 0 !important;
	border-radius: 13px !important;
	box-shadow: 0 8px 20px -10px rgba(219, 68, 55, 0.7);
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.elementor-widget-form:not(.cws-form-off) .e-form__buttons .elementor-button:hover,
.elementor-widget-form:not(.cws-form-off) .e-form__buttons .elementor-button:focus-visible,
.elementor-widget-form:not(.cws-form-off) .elementor-field-type-submit .elementor-button:hover,
.elementor-widget-form:not(.cws-form-off) .elementor-field-type-submit .elementor-button:focus-visible {
	color: #fff !important;
	background-color: var(--cws-brand-hover) !important;
	transform: translateY(-1px);
	box-shadow: 0 12px 24px -12px rgba(219, 68, 55, 0.75);
}

.elementor-widget-form:not(.cws-form-off) .elementor-field-type-submit .elementor-button:focus-visible {
	outline: 2px solid var(--cws-brand);
	outline-offset: 3px;
}

.elementor-widget-form:not(.cws-form-off) .elementor-button .elementor-button-content-wrapper {
	justify-content: center;
}

/* ------------------------------------------------------- validation messages */

.elementor-widget-form:not(.cws-form-off) .elementor-field-group .elementor-field-textual[aria-invalid="true"],
.elementor-widget-form:not(.cws-form-off) .elementor-error .elementor-field-textual {
	border-color: var(--cws-brand) !important;
}

.elementor-widget-form:not(.cws-form-off) .elementor-message {
	margin-top: 12px;
	font-family: var(--cws-font-body);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.5;
}

.elementor-widget-form:not(.cws-form-off) .elementor-message.elementor-message-danger,
.elementor-widget-form:not(.cws-form-off) .elementor-field-group .elementor-message {
	color: var(--cws-acc);
}

@media (prefers-reduced-motion: reduce) {
	.elementor-widget-form:not(.cws-form-off) .elementor-field-textual,
	.elementor-widget-form:not(.cws-form-off) .elementor-button {
		transition: none !important;
		transform: none !important;
	}
}