.optimization-input__container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-12);
}

.optimization-input__label {
    font-feature-settings: 'dlig' on;
    font: var(--font-body-sm);
    font-weight: 600;
    color: var(--color-iceland-800);
    margin: 0;
}

.optimization-input__input {
    height: 56px;
    padding: var(--spacing-x2) var(--spacing-20);
    width: 100%;

    border-radius: var(--spacing-x1);
    border: 1px solid var(--color-iceland-600);
    background: var(--color-contrast-100);

    font-feature-settings: 'dlig' on;
    font: var(--font-body-sm);
    font-weight: 600;

    transition: border 0.3s ease-in-out;
    margin-bottom: var(--spacing-4);
}

.optimization-input__input::placeholder {
    color: var(--color-iceland-700);
}

.optimization-input__input:focus-within {
    border: 1px solid var(--color-iceland-1000);
    outline: none;
}

select.optimization-input__input {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23524F48' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 20px center;
    padding-right: 48px;
}

select.optimization-input__input:invalid,
select.optimization-input__input option[value=""][disabled] {
    color: var(--color-iceland-700);
}

select.optimization-input__input option {
    color: var(--color-iceland-1000);
}

/* add this class to text area when using it */
/* it should be added with the input one */
.optimization-input__text_area {
    padding: var(--spacing-x2);
    font-weight: 400;
    height: 138px;
    resize: none;
    margin: 0;
}


/* check box */
.optimization__checkbox-outer-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: fit-content;
    margin: auto;
    margin-top: var(--spacing-x2);
}

.optimization-input__check-box-container {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.optimization-input__check-box {
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: var(--spacing-4);
    border: 1.5px solid var(--color-iceland-600);
    position: relative;
    transition: border 0.3s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
}

.optimization-input__check-box:checked {
    background: transparent;
    border: 1.5px solid var(--color-error-1100);
}

.optimization-input__check-box::after {
    opacity: 0;
    content: "✔";
    color: var(--color-error-1100);
    font-size: 10px;

    transition: opacity 0.3s ease-in-out;
}

.optimization-input__check-box:checked::after {
    opacity: 1;
}

label[id*="-error"] {
    font: var(--font-body-xs);
    font-feature-settings: 'dlig' on;
    color: var(--color-error-1000);
    margin: 0;
    margin-left: var(--spacing-x2);
    display: block;
    order: 3;
    flex: 1;
    width: 100%;
}

.optimization-input__container:has(input[aria-invalid="true"]) .optimization-input__label,
.optimization-input__container:has(textarea[aria-invalid="true"]) .optimization-input__label,
.optimization-input__container:has(select[aria-invalid="true"]) .optimization-input__label {
    color: var(--color-error-1000);
}

.optimization-input__container:has(input[aria-invalid="true"]) .optimization-input__input,
.optimization-input__container:has(input[aria-invalid="true"]) .optimization-input__input::placeholder,
.optimization-input__container:has(textarea[aria-invalid="true"]) .optimization-input__input,
.optimization-input__container:has(textarea[aria-invalid="true"]) .optimization-input__input::placeholder,
.optimization-input__container:has(select[aria-invalid="true"]) .optimization-input__input {
    border-color: var(--color-error-1000);
    color: var(--color-error-1000);
}

.recaptcha-error-message {
    color: var(--color-error-1000);
    font: var(--font-body-sm);
    font-weight: 600;
    padding: var(--spacing-x2);
    border: 1px solid var(--color-error-1000);
    border-radius: var(--spacing-x1);
    margin-top: var(--spacing-x2);
    margin-bottom: var(--spacing-x2);
}