/* webform */
.webform-message {
    margin: 1.5em 0;
}

.webform-required {
    margin: 1em 0;
}

.webform-required .form-required::after {
    margin: 0;
    margin-right: 0.25em;
}

/* form-item */
.form-item {
    margin-bottom: 1.5em;
}

.form-item-placeholder {
    position: relative;
}

.form-item .description {
    font-size: var(--theme--font-size--xsmall);
    color: var(--theme--color--text);
    margin: 0.25em 0 0 0;
}
    .form-item.has-placeholder .description {
        margin: 0.25em 0 0 1.75em;
    }

.form-item label {
    color: var(--theme--color--text);
    display: block;
    font-weight: 600;
}
    .form-item.has-placeholder label {
        font-weight: 400;
        position: absolute;
        top: 50%;
        left: 1.25em;
        z-index: 1;
        transform: translate(0, -50%);
        pointer-events: none;
        transition: top 0.3s ease, transform 0.3s ease;
        background: rgba(255,255,255, 1);
        padding: 0 0.25em;
        border-radius: 4px;
    }
    .form-item.form-type-textarea.has-placeholder label {
        top: 1em;
        transform: translate(0, 0);
    }
    .form-item.has-placeholder:is(.has-input, .has-focus) label {
        top: 0;
        transform: translate(0, -50%);
    }

.form-text,
.form-email,
.form-url,
.form-date,
.form-time,
.form-file,
.form-textarea,
.form-select {
    padding: 1em 1.5em;
    background: rgba(255,255,255, 1);
    border-radius: 999px;
    border: 1px solid var(--theme--color--light);
    width: 100%;
    font-weight: 600;
    color: var(--theme--color--text);
    cursor: text;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
    .form-textarea {
        border-radius: 26px;
        border-bottom-right-radius: 0;
    }
    .form-select {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        cursor: pointer;
    }
    .form-item.has-placeholder :where(.form-text, .form-email, .form-url, .form-date, .form-textarea, .form-select, .form-time) {
        color: rgba(255,255,255, 1);
    }
    .form-item.has-focus :where(.form-text, .form-email, .form-url, .form-date, .form-textarea, .form-select, .form-time),
    .form-item.has-focus.has-input :where(.form-text, .form-email, .form-url, .form-date, .form-textarea, .form-select, .form-time) {
        border-color: var(--theme--color--primary);
        color: var(--theme--color--primary);
    }
    .form-item.has-input :where(.form-text, .form-email, .form-url, .form-date, .form-textarea, .form-select, .form-time) {
        color: var(--theme--color--text);
    }
    .form-item.form-item--error :where(.form-text, .form-email, .form-url, .form-date, .form-textarea, .form-select, .form-time) {
        border-color: var(--theme--color--error);
    }

/* select style */
.select__wrapper {
    position: relative;
}

.select__dropdown {
    position: absolute;
    top: 50%;
    right: 1.5em;
    z-index: 1;
    transform: translate(0, -50%);
    display: flex;
}

.select__dropdown i {
    font-size: var(--theme--font-size--medium);
    color: var(--theme--color--text);
}

/* error required */
.form-item--error-message {
    display: flex;
    width: 100%;
    margin: 0.25em 0 0 1.75em;
    font-size: var(--theme--font-size--xsmall);
}

.form-item--error-message strong {
    font-size: var(--theme--font-size--xsmall);
    color: var(--theme--color--error);
}

.form-required {

}
    .form-required::after {
        content: '*';
        color: var(--theme--color--error);
        margin-left: 0.25em;
        font-size: var(--theme--font-size--xsmall);
    }

/* checkboxes, radios */
.webform-type-checkboxes .fieldset-wrapper,
.webform-type-radios .fieldset-wrapper {
    display: flex;
    flex-direction: column;
}

.webform-type-checkboxes .fieldset-wrapper .form-item--error-message,
.webform-type-radios .fieldset-wrapper .form-item--error-message {
    order: 2;
}

.form-type-radio,
.form-type-checkbox {
    display: flex;
    align-items: center;
    margin-bottom: 0.25em;
    flex-wrap: wrap;
}

.form-type-radio .form-radio,
.form-type-checkbox .form-checkbox {
    margin-right: 0.25em;
}

.form-type-radio .option,
.form-type-checkbox .option {
    cursor: pointer;
    font-weight: 400;
}
    .form-type-radio input:checked + .option,
    .form-type-checkbox input:checked + .option {
        font-weight: 600;
        color: var(--theme--color--primary);
    }

.form-type-radio .description,
.form-type-checkbox .description {
    margin-top: 0.5em;
}

.captcha {
    margin-bottom: 1.5em;
}