/* Campos de formulário: uma base visual comum em todo o site. */
:root {
    --field-height: 46px;
    --field-radius: 10px;
    --field-border: var(--border, #dce5e9);
    --field-bg: var(--surface-alt, #f7f9fa);
    --field-focus: var(--accent, #518d93);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):not([type="file"]):not([type="range"]):not([type="hidden"]):not([maxlength="1"]):not(.input-data input):not(.seletor-data-compra input):not(.seletor-nascimento-viajante input),
select,
textarea {
    box-sizing: border-box;
    min-height: var(--field-height);
    padding: 11px 14px;
    border: 1px solid var(--field-border);
    border-radius: var(--field-radius);
    background-color: var(--field-bg);
    color: var(--text, #222);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.45;
    outline: none;
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

textarea {
    min-height: 112px;
    padding: 12px 14px;
    resize: vertical;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):not([type="file"]):not([type="range"]):not([type="hidden"]):not([maxlength="1"]):not(.input-data input):not(.seletor-data-compra input):not(.seletor-nascimento-viajante input)::placeholder,
textarea::placeholder {
    color: var(--muted, #777);
    opacity: .82;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):not([type="file"]):not([type="range"]):not([type="hidden"]):not([maxlength="1"]):not(.input-data input):not(.seletor-data-compra input):not(.seletor-nascimento-viajante input):focus,
select:focus,
textarea:focus {
    border-color: var(--field-focus);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--field-focus) 18%, transparent);
}

input:disabled,
select:disabled,
textarea:disabled {
    cursor: not-allowed;
    opacity: .65;
}

input[readonly]:not(.input-data input):not(.seletor-data-compra input):not(.seletor-nascimento-viajante input) {
    cursor: pointer;
}

@media (max-width: 600px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):not([type="file"]):not([type="range"]):not([type="hidden"]):not([maxlength="1"]):not(.input-data input):not(.seletor-data-compra input):not(.seletor-nascimento-viajante input),
    select,
    textarea {
        font-size: 16px;
    }
}
/* Mantém os campos de data no mesmo tom em todas as páginas. */
.input-data,
.seletor-data-compra {
    background-color: var(--field-bg);
}

.input-data input,
.seletor-data-compra input {
    background-color: transparent;
}

.input-data .btn-calendario,
.abrir-calendario-compra {
    background-color: var(--field-bg);
}

input[type="date"] {
    box-sizing: border-box;
    border: 1px solid var(--field-border);
    border-radius: var(--field-radius);
    background-color: var(--field-bg);
    color: var(--text, #222);
    font: inherit;
    color-scheme: light;
}

body.dark-mode input[type="date"] {
    border-color: var(--border);
    background-color: var(--surface-alt);
    color: var(--text);
    color-scheme: dark;
}
/* O campo e o botão do calendário formam uma superfície contínua. */
.input-data input,
.seletor-data-compra input {
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.input-data .btn-calendario,
.abrir-calendario-compra {
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
/* Contorno externo único para os campos com calendário. */
.input-data,
.seletor-data-compra {
    box-sizing: border-box;
    border: 1px solid var(--field-border);
    border-radius: var(--field-radius);
    overflow: hidden;
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.input-data:focus-within,
.seletor-data-compra:focus-within {
    border-color: var(--field-focus);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--field-focus) 18%, transparent);
}
/* Cores dos controles quando o tema escuro estiver ativo. */
body.dark-mode input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):not([type="file"]):not([type="range"]):not([type="hidden"]):not([maxlength="1"]):not(.input-data input):not(.seletor-data-compra input):not(.seletor-nascimento-viajante input),
body.dark-mode select,
body.dark-mode textarea {
    border-color: var(--border);
    background-color: var(--surface-alt);
    color: var(--text);
    color-scheme: dark;
}

body.dark-mode input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):not([type="file"]):not([type="range"]):not([type="hidden"]):not([maxlength="1"]):not(.input-data input):not(.seletor-data-compra input):not(.seletor-nascimento-viajante input)::placeholder,
body.dark-mode textarea::placeholder {
    color: var(--muted);
}

body.dark-mode .input-data,
body.dark-mode .seletor-data-compra,
body.dark-mode .input-data .btn-calendario,
body.dark-mode .abrir-calendario-compra {
    background-color: var(--surface-alt);
}

body.dark-mode .input-data input,
body.dark-mode .seletor-data-compra input {
    border: 0;
    background-color: transparent;
    color: var(--text);
    color-scheme: dark;
}

body.dark-mode .input-data:focus-within,
body.dark-mode .seletor-data-compra:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

/* Lista aberta dos selects no mesmo padrão das sugestões de aeroportos. */
select:not([hidden]) {
    cursor: pointer;
    color-scheme: light;
}

select option {
    background-color: var(--surface-strong, #fff);
    color: var(--text, #222);
    padding: 10px 12px;
}

select option:checked {
    background-color: color-mix(in srgb, var(--accent, #518d93) 18%, var(--surface-strong, #fff));
    color: var(--text, #222);
}

@supports (appearance: base-select) {
    select:not([hidden]),
    select:not([hidden])::picker(select) {
        appearance: base-select;
    }

    select:not([hidden]) {
        padding-right: 14px;
    }

    select:not([hidden])::picker(select) {
        margin-block: 6px;
        padding: 6px;
        border: 1px solid var(--field-border);
        border-radius: 12px;
        background: var(--surface-strong, #fff);
        color: var(--text, #222);
        box-shadow: 0 8px 24px rgba(24, 46, 60, .16);
        overflow: auto;
        max-height: min(320px, 45vh);
    }

    select:not([hidden]) option {
        min-height: 40px;
        padding: 10px 12px;
        border-radius: 8px;
        background: transparent;
        transition: background-color .16s ease;
    }

    select:not([hidden]) option:hover,
    select:not([hidden]) option:focus-visible {
        background: var(--hover, #edf4f4);
    }

    select:not([hidden]) option:checked {
        background: color-mix(in srgb, var(--accent, #518d93) 14%, var(--surface-strong, #fff));
        color: var(--text, #222);
    }

    select:not([hidden])::picker-icon {
        color: var(--muted, #777);
        transition: transform .18s ease;
    }

    select:not([hidden]):open::picker-icon {
        transform: rotate(180deg);
    }
}

body.dark-mode select:not([hidden]) {
    color-scheme: dark;
}