:root {
    --color-input-background: #fffbf0;
    --color-input-text: #383230;
    --color-input-border: #c2bcb5;

    --color-button-text: #181d31;
    --color-button-background: #ebce98;
    --color-button-submit-background: #f6af0f;
    --color-button-super-background: #bb7000;
    --color-button-super-text: #fff;
}


fieldset {
    border: none;
    margin: 1em 0;
    padding: 0;
    display: flex;
    flex-flow: row wrap;
    gap: 0.5em 2em;
}

input,
textarea,
select {
    font-family: 'Open Sans', sans-serif;
    font-size: 1em;
    color: var(--color-input-text);
    border: 1px solid var(--color-input-border);
    background-color: var(--color-input-background);
    border-radius: 0.35em;
    padding: 0.5em;
    margin-bottom: 1em;
    width: 100%;
    transition: all 250ms;
}

.field {
    display: flex;
    flex-flow: row wrap;
    flex: 1 0 auto;
}

.field input,
.field textarea,
.field select {
    margin-bottom: 0;
}


input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0.5em -0.25em var(--color-primary);
    color: hsl(from var(--color-input-text) h s calc(l - 50));
    filter: brightness(1.05) contrast(1.1);
}

input:disabled,
textarea:disabled,
select:disabled {
    filter: brightness(0.95) contrast(0.8) opacity(0.5);
    cursor: not-allowed;
}

/* Estado de loading durante envio de formulário */
form.form-loading {
    cursor: wait;
    pointer-events: none;
}

form.form-loading input,
form.form-loading textarea,
form.form-loading select,
form.form-loading button {
    opacity: 0.6;
    cursor: wait;
}

form.form-loading button {
    position: relative;
}

form.form-loading button::after {
    content: '';
    position: absolute;
    right: 0.5em;
    top: 50%;
    transform: translateY(-50%);
    width: 1em;
    height: 1em;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: button-loading-spinner 0.6s linear infinite;
}

@keyframes button-loading-spinner {
    to { transform: translateY(-50%) rotate(360deg); }
}

legend,
label {
    font-weight: 600;
    flex: 1 0 100%;
}

textarea {
    resize: vertical;
    min-height: 10em;
}

.input-option {
    display: flex;
    align-items: center;
    gap: 0.5em;
    margin: 0.5em 0 0.25em 0;
}

input[type="radio"],
input[type="checkbox"] {
    width: auto;
    margin-right: 0.5em;
    margin: 0;
}

fieldset>fieldset {
    flex-flow: row wrap;
    gap: 1em 2em;
    padding: 0;
}

fieldset>fieldset label {
    margin: 0.5em 0;
    flex: none;
}

input+span {
    font-weight: normal;
}

input:checked+span {
    font-weight: bold;
}

.field.password {
    flex-flow: row wrap;
    justify-content: space-between;
}

.field.password input {
    width: calc(100% - 4em);
}

.field.password button {
    width: 4em;
    padding: 0.5em;
    font-size: 0.875em;
    background: var(--color-button-background) url('../assets/eye-closed.svg') no-repeat center / 40%;
}

.buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1em;
    margin-top: 0.5em;
    width: 100%;
}

button {
    font: inherit;
    color: #181d31;
    font-weight: 600;
    padding: 0.75em 1.25em;
    border: none;
    border-radius: 0.5em;
    cursor: pointer;
    font-size: 1.0em;
    line-height: 1.25;
    font-family: "Montserrat Alternates", sans-serif;
    transition: all 250ms;
    background-color: var(--color-button-background);
}

button:hover {
    filter: brightness(1.125);
}

button:disabled {
    filter: contrast(0.5) brightness(1.15);
    cursor: not-allowed;
    color: transparent;
}

button[type="submit"] {
    font-weight: 800;
    font-size: 1.125em;
    background-color: var(--color-button-submit-background);
}

.buttons button[type="submit"] {
    margin-left: auto;
}



button.super {
    color: var(--color-button-super-text);
    background: url('../assets/fundo-botao-submit.svg') no-repeat left bottom var(--color-button-super-background);
    font-size: 1.25em;
    border: 0.25em solid hsl(from var(--color-secondary) h s calc(l + 50) / 0.5);
    margin: 1em 0;
}

body>header button {
    background-color: hsl(from var(--color-button-submit-background) h s l / 0);
    color: var(--color-button-submit-background);
    border: 2px solid var(--color-button-submit-background);
}