/* ==========================================================================
   WS Form skin overrides, site-wide (every [ws_form] / WS Form block).
   Ported from Advanced Scripts "Global CSS" (.brxe-ws-form-form …, .wsf-form, .unique-wrapper);
   the Bricks wrapper .brxe-ws-form-form is replaced by the form element itself (.wsf-form).
   !important flags are kept where the original used them (they beat WS Form's skin CSS).
   ========================================================================== */

.wsf-form { max-width: 50vw; }
@media (max-width: 767px) {
	.wsf-form { max-width: 100vw; }
}

/* Multi-step tabs: dots joined by a line, labels under the dots. */
.wsf-form .wsf-group-tabs {
	position: relative;
	justify-content: center;
	column-gap: 10.5rem !important;
	border-bottom: unset !important;
}
.wsf-form .wsf-group-tabs::before {
	content: "";
	position: absolute;
	top: .55rem;
	left: calc(50% - 6rem);
	z-index: 0;
	width: 11.5rem;
	height: 4px;
	background-color: var(--primary);
}
.wsf-form .wsf-group-tabs .wsf-group-tab {
	position: relative;
	z-index: 1;
}
.wsf-form .wsf-group-tabs .wsf-group-tab a {
	width: 1.3rem;
	height: 1.3rem;
	padding: unset !important;
	border: 3px solid #e1f1fd;
	border-radius: 50%;
	background: #fff;
}
.wsf-form .wsf-group-tabs .wsf-group-tab a span {
	position: absolute;
	right: -1.1rem;
	bottom: -2.5rem;
	font-size: 1.4rem;
	letter-spacing: -1.1px;
	text-transform: uppercase;
	color: rgba(12, 18, 33, 0.45);
}
.wsf-form .wsf-group-tabs .wsf-tab-active { position: relative; }
.wsf-form .wsf-group-tabs .wsf-tab-active a {
	width: 1.3rem;
	height: 1.3rem;
	padding: unset !important;
	border: 3px solid var(--primary) !important;
	border-radius: 50%;
	background: #fff;
}
/* Steps before the active one: filled dot. */
.wsf-form .wsf-group-tabs .wsf-group-tab:has(~ .wsf-group-tab.wsf-tab-active) a {
	z-index: 9999;
	width: 1.3rem;
	height: 1.3rem;
	border: 3px solid var(--primary) !important;
	border-radius: 50%;
	background: var(--primary) !important;
}

.wsf-form .wsf-group {
	display: flex;
	align-items: center;
	justify-content: center;
	padding-top: 3.7rem;
}
.wsf-form .wsf-sections { width: 50%; }
@media (max-width: 767px) {
	.wsf-form .wsf-sections { width: 100%; }
}
.wsf-form .wsf-sections legend {
	font-size: 1.8rem !important;
	font-weight: bold !important;
	letter-spacing: -1.1px !important;
	color: var(--base) !important;
}

/* Fields */
.wsf-form .wsf-sections .wsf-fields .wsf-field-wrapper .wsf-label {
	font-size: 1.6rem;
	letter-spacing: -1.1px;
	color: var(--base);
}
.wsf-form .wsf-sections .wsf-fields .wsf-field-wrapper .wsf-label .wsf-required-wrapper .wsf-text-danger { color: var(--primary); }
.wsf-form .wsf-sections .wsf-fields .wsf-field-wrapper .wsf-field {
	border: 1px solid #e1f1fd !important;
	border-radius: 10px;
	background-color: rgba(155, 203, 235, 0.1) !important;
	box-shadow: unset !important;
}
.wsf-form input[type=checkbox].wsf-field:checked::after { border-color: var(--primary) !important; }

/* Buttons */
.wsf-form .wsf-sections .wsf-fields .wsf-field-wrapper .wsf-button-full {
	padding: 13px;
	color: #fff !important;
	background-color: var(--primary);
	border: 1px solid var(--primary) !important;
	border-radius: 16px !important;
}
.wsf-form .wsf-sections .wsf-fields .wsf-field-wrapper .wsf-button-full:hover {
	background-color: var(--primary-dark) !important;
	border: 1px solid var(--primary-dark) !important;
}
/* Repeatable section "add" button: text link with a plus icon. */
.wsf-form .wsf-sections .wsf-fields .wsf-field-wrapper .wsf-add-button {
	position: relative;
	padding-left: 3.3rem;
	font-size: 1.6rem;
	text-align: -webkit-left;
	text-align: left;
	color: var(--primary) !important;
	background-color: #fff;
	border: unset !important;
	outline: unset !important;
	box-shadow: unset !important;
}
.wsf-form .wsf-sections .wsf-fields .wsf-field-wrapper .wsf-add-button::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 1.95rem;
	height: 1.95rem;
	background: url("../../img/form-add.svg") no-repeat center / contain;
	transform: translateY(-50%);
	pointer-events: none;
}
.wsf-form .wsf-sections .wsf-fields .wsf-field-wrapper .wsf-add-button:hover {
	background-color: #fff !important;
	border: unset !important;
	outline: unset !important;
}

/* Numbered repeatable rows (sections with the custom class "unique-wrapper"). */
body { counter-reset: fieldset-counter; }
.unique-wrapper {
	position: relative;
	counter-increment: fieldset-counter;
}
.unique-wrapper::before {
	content: counter(fieldset-counter);
	position: absolute;
	top: 0;
	left: .5rem;
	font-size: 1.6rem;
	color: var(--base);
}
.unique-wrapper .wsf-field-wrapper {
	padding-right: .5rem !important;
	padding-left: .5rem !important;
}
.unique-wrapper .wsf-field-wrapper .wsf-label { padding-left: 1.5rem; }