/*-------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------
                    WS FORM CUSTOM CSS
---------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------*/
.dp-wsf--main {
    --_radius: 2rem;
    --_height: 44px;
    --_lang-arrow: 6px;
    --_select-arrow: 8px;
    --_clr-placeholder: hsl(0, 0%, 45%);
    --_field-bg-color: var(--clr-transparent);
    --_color: var(--clr-base);
    --_focus-color: var(--_color);
}
.dp-fields-bg {
    --_field-bg-color: hsl(13, 28%, 94%);
}
.dp-wsf-form--dark {
    --_clr-placeholder: hsl(0, 0%, 75%);
    --_color: var(--_clr-placeholder);
    --_focus-color: var(--clr-white);
    --_clr-invalid: #f56c6c;
}
:is(.dp-wsf--main, .dp-wsf-form--dark) .wsf-form ::placeholder {
    color: var(--_clr-placeholder) !important;
}
:is(.dp-wsf--main, .dp-wsf-form--dark) .wsf-form label.wsf-label {
    color: var(--_color);
}
.dp-wsf--main .dp-doctor-item__cost {
    font-size: 1.4rem;
    font-weight: var(--fw-bold);
    margin-bottom: 2em;
}
.dp-wsf-form--dark .dp-doctor-item__cost {
    color: var(--clr-white);
}
.dp-wsf-section--exclusive {
    --_container-height: 495px;
    min-height: var(--_container-height);
}
.dp-wsf--main .wsf-form :is(input[type=checkbox], input[type=radio], input[type=date], input[type=datetime-local], input[type=file], input[type=month], input[type=password], input[type=search], input[type=time], input[type=week], input[type=email], input[type=number], input[type=tel], input[type=text], input[type=url], select, textarea).wsf-field {
    border-radius: var(--_radius);
    border: 1px solid var(--clr-primary);
    background-color: var(--_field-bg-color);
    color: var(--_focus-color);
}
.dp-wsf--main .wsf-form :is(input[type=checkbox], input[type=radio], input[type=date], input[type=datetime-local], input[type=file], input[type=month], input[type=password], input[type=search], input[type=time], input[type=week], input[type=email], input[type=number], input[type=tel], input[type=text], input[type=url], select, textarea).wsf-field:focus {
    border: 1px solid var(--clr-primary);
    box-shadow: 0 0 0 4px hsla(var(--clr-primary-h), 0.25);
    background-color: var(--_field-bg-color);
    color: var(--_focus-color);
}
.dp-wsf--main .wsf-form :is(input[type=date], input[type=datetime-local], input[type=file], input[type=month], input[type=password], input[type=search], input[type=time], input[type=week], input[type=email], input[type=number], input[type=tel], input[type=text], input[type=url], select, textarea).wsf-field:hover:enabled:not(:focus) {
    background-color: var(--_field-bg-color);
    border: 1px solid var(--clr-primary);
}
.dp-wsf--main .wsf-form.wsf-validated :is(input[type=date], input[type=datetime-local], input[type=file], input[type=month], input[type=password], input[type=search], input[type=time], input[type=week], input[type=email], input[type=number], input[type=tel], input[type=text], input[type=url], select, textarea).wsf-field:invalid:focus:not(:hover) {
    box-shadow: 0 0 0 4px hsla(var(--clr-primary-h), 0.75);
}
.dp-wsf--main .wsf-form :is(input[type=text], input[type=tel], input[type=email], select).wsf-field {
    height: var(--_height);
}
.dp-wsf--main .wsf-form:not(.wsf-label-position-inside-hide) .wsf-label-position-inside select.wsf-field ~ label {
    border-radius: var(--_radius);
}
.dp-wsf--main .wsf-form .wsf-label-position-inside :is(input, textarea).wsf-field[placeholder] + label, 
.dp-wsf--main .wsf-form .wsf-label-position-inside :is(select).wsf-field + label {
    border-radius: var(--_radius);
}
.dp-wsf--main .wsf-form .wsf-label-position-inside :is(input, textarea).wsf-field[placeholder] + label {
    inset-inline-start: 28px;
    top: 10.5px;
    z-index: 9;
    /* color: var(--_color); */
}
.dp-wsf--main .wsf-form.wsf-rtl .wsf-label-position-inside input.wsf-field.dp-wsf-phone[placeholder] + label {
    inset-inline-start: 62px;
}
.dp-wsf--main .wsf-form:not(.wsf-label-position-inside-hide) .wsf-label-position-inside input.wsf-field[placeholder]:focus + label {
    background-color: hsl(11, 27%, 15%);
    color: hsl(12, 33%, 94%);
}
.dp-wsf--main .wsf-form select.wsf-field:not([multiple]):not([size]) {
    height: var(--_height);
}
.dp-wsf--main .wsf-form .iti__selected-flag {
    border-start-start-radius: var(--_radius);
    border-end-start-radius: var(--_radius);
    background-color: hsla(var(--clr-primary-h), .3);
    transition: background-color 300ms ease-in-out;
}
.dp-wsf--main .wsf-form .iti__dropdown-content {
    overflow: hidden;
    border-radius: var(--_radius);
}
.dp-wsf--main .wsf-form .iti--inline-dropdown .iti__country-list {
    max-height: 238px;
}
.dp-wsf--main .wsf-form .iti__search-input {
    overflow: hidden;
}
.dp-wsf--main .wsf-form .iti__country.iti__highlight {
    background-color: hsla(var(--clr-primary-h), .25);
}
.dp-wsf--main .wsf-form :is(input[type=checkbox], input[type=radio]).wsf-field:hover:enabled:not(:checked):not(:focus) {
    background-color: var(--_field-bg-color);
    border-color: var(--clr-primary);
}
.dp-wsf--main .wsf-form :is(input[type=checkbox], input[type=radio]).wsf-field:checked {
    background-color: var(--_field-bg-color);
    border-color: var(--clr-primary);
}
.dp-wsf--main .wsf-form :is(input[type=checkbox], input[type=radio]).wsf-field:checked::after {
    --_size: 10px;
    width: var(--_size);
    height: var(--_size);
    top: 50%;
    inset-inline-start: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background-color: var(--clr-primary);
    border-radius: 50%;
    border-style: none;
    border-width: unset;
}
/*--------------- SUBMIT BUTTON ----------------------------------*/
.dp-wsf--main .wsf-form button.wsf-button {
    border-radius: var(--_radius);
    padding: 1rem 3.2em;
}
.dp-wsf--main .wsf-form button:is(.wsf-button:focus, .wsf-button:active) {
    box-shadow: 0 0 0 4px var(--clr-secondary);
}
.dp-wsf--main .wsf-form button.wsf-button.wsf-button-primary {
    background-color: var(--clr-primary);
    border-color: var(--clr-primary);
    width: min(100%, 28rem);
    font-weight: var(--fw-bold);
    transition: all 300ms ease-in-out;
}
.dp-wsf--main .wsf-form button.wsf-button.wsf-button-primary:hover:enabled:not(:checked):not(:focus) {
    background-color: var(--clr-primary-hover);
    border-color: var(--clr-primary-hover);
    color: var(--clr-white);
}
.dp-wsf--main .wsf-form button.wsf-button:is(.wsf-button-primary:focus, .wsf-button-primary:active) {
    background-color: var(--clr-primary);
    border-color: var(--clr-primary);
    color: var(--clr-white);
}
.dp-wsf--main .wsf-form button.wsf-button:hover:enabled:not(:checked):not(:focus) {
    background-color: var(--clr-primary-hover);
    color: var(--clr-white);
}
.dp-wsf--main .wsf-form button:is(.wsf-button:focus, .wsf-button:active) {
    background-color: var(--clr-primary);
    color: var(--clr-white);   
}
/*--------------- SELECT FIELD DROPDOWN ICON ----------------------------------*/
.dp-wsf--main .wsf-form select.wsf-field:not([multiple]):not([size]):not([data-wsf-select2])+span.wsf-select-arrow {
    border-width: 1px 1px 0px 0;
    border-color: var(--clr-primary);
    transform: rotate(135deg);
    width: var(--_select-arrow);
    height: var(--_select-arrow);
    top: -4px;
}
/*--------------- FLAG FIELD DROPDOWN ICON ----------------------------------*/
.dp-wsf--main .wsf-form .iti:has([aria-invalid="true"]) .iti__selected-flag {
    height: 65%;
}
.dp-wsf--main .wsf-form .iti__arrow {
    position: relative;
    top: -1px;
    margin-inline-start: 6px;
    border: solid;
    border-color: var(--clr-primary);
    border-width: 0.1em 0.1em 0 0;
    transform: rotate(135deg);
    width: var(--_lang-arrow);
    height: var(--_lang-arrow);
}
.dp-wsf--main .wsf-form .iti__arrow--up {
    position: relative;
    top: 0;
    transform: rotate(-45deg);
    border-top: revert;
    border-bottom: revert;
    border: solid;
    border-color: var(--clr-primary);
    border-width: 0.1em 0.1em 0 0;
}
.dp-wsf--main .wsf-form .iti .iti__flag-container {
    height: revert;
}
.dp-wsf--main .iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag {
    background-color: hsla(var(--clr-primary-h), .4);
}
/*--------------- LABELS ----------------------------------*/
.wsf-form .dp-wsf-label--bold > label.wsf-label {
    font-weight: var(--fw-bold);
}
.wsf-form .dp-wsf-margin-bottom--s label.wsf-label {
    margin-block-end: .7em;
}
/*--------------- MITIGATE LAYOUT SHIFTS ----------------------------------*/
@media only screen and (max-width: 767px) {
    .dp-wsf-section--exclusive {
        --_container-height: 623px;
    }
}
@media only screen and (max-width: 649px) {
    .dp-wsf-section--exclusive {
        --_container-height: 642px;
    }
}
@media only screen and (max-width: 524px) {
    .dp-wsf-section--exclusive {
        --_container-height: 662px;
    }
}
@media only screen and (max-width: 480px) {
    .dp-wsf-section--exclusive {
        --_container-height: 682px;
    }
}
/*---------------------------------------------------------------------------------------
                                    NEWSLETTER FORM 
----------------------------------------------------------------------------------------*/
.dp-wsf-max--550 {
    max-width: 550px;
}
.wsf-form input[type=checkbox].wsf-field.dp-text--white + label.wsf-label {
    color: var(--clr-white);
}
.wsf-form input[type=checkbox].wsf-field.dp-text--s + label.wsf-label {
    font-size: var(--text-s);
}
.wsf-form input[type=checkbox].wsf-field.dp-wsf-check-circle__field {
    border-radius: 5rem;
    border: 1px solid var(--clr-white);
    background-color: var(--clr-transparent);
    transition: border 300ms ease, background-color 300ms ease;
}
:is(.dp-wsf--main, .dp-wsf--newsletter) .wsf-form .wsf-alert.wsf-alert-success {
    background-color: var(--clr-primary);
    border-color: var(--clr-secondary);
    color: var(--clr-white);
}
/*---------------------------------------------------------------------------------------
                                SPECIFIC STYLING 
----------------------------------------------------------------------------------------*/
.dp-wsf-form--dark .wsf-form .wsf-invalid-feedback {
    color: var(--_clr-invalid);
}
.dp-wsf-form--dark .wsf-form.wsf-validated :is(input[type=text], input[type=email], input[type=tel], input[type=radio], input[type=checkbox], select, textarea).wsf-field:invalid {
    border-color: var(--_clr-invalid);
    background-color: var(--clr-transparent);
}
.dp-wsf-form--dark :is(.wsf-form.wsf-validated, .wsf-form .wsf-validated) select.wsf-field:invalid:not([multiple]):not([size]):invalid {
    border-color: var(--_clr-invalid);
}
.dp-wsf-form--dark .wsf-form .wsf-validated :is(input[type=checkbox], input[type=radio]).wsf-field:invalid + label.wsf-label:before {
    border-color: var(--_clr-invalid);
}
.dp-wsf-form--dark .wsf-form .wsf-text-danger {
    color: var(--_clr-invalid);
}
.dp-wsf--main .wsf-form :is(a:active, a:focus, a:hover, a:link, a:visited) {
    color: var(--clr-primary);
}