/* Van-Tagem Smart Select 1.2
 * Camada visual global para TODOS os <select>. O select nativo continua no DOM,
 * preservando value, required, disabled, change e qualquer regra existente.
 */
:root {
    --vt-select-bg: rgba(8, 24, 39, .985);
    --vt-select-bg-soft: rgba(18, 43, 65, .985);
    --vt-select-border: rgba(116, 151, 180, .22);
    --vt-select-text: #eef6ff;
    --vt-select-muted: #91a8bc;
    --vt-select-accent: #ffb000;
    --vt-select-shadow: 0 22px 70px rgba(0, 0, 0, .36);
}

body.panel-app.panel-design-system {
    --vt-select-bg: var(--ui-bg-elevated, #071827);
    --vt-select-bg-soft: var(--ui-surface-soft, #11283e);
    --vt-select-border: var(--ui-border, rgba(145, 174, 207, .18));
    --vt-select-text: var(--ui-text, #f7f9fc);
    --vt-select-muted: var(--ui-text-soft, #95aac0);
    --vt-select-accent: var(--ui-primary, #ffb000);
    --vt-select-shadow: var(--ui-shadow-md, 0 18px 55px rgba(0, 0, 0, .28));
}

body.vt-address-surface-subscribe,
body:has(.subscribe-shell) {
    --vt-select-bg: #fff;
    --vt-select-bg-soft: #f7f9fc;
    --vt-select-border: rgba(34, 51, 70, .16);
    --vt-select-text: #202d3c;
    --vt-select-muted: #738196;
    --vt-select-accent: #d89400;
    --vt-select-shadow: 0 20px 55px rgba(30, 46, 65, .18);
}

.vt-smart-select {
    position: relative;
    display: block;
    width: 100%;
    min-width: 0;
    flex: 1 1 auto;
}

.vt-smart-select > select.vt-smart-native {
    position: absolute !important;
    inset: 0 !important;
    z-index: -1 !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

.vt-smart-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-width: 0;
    min-height: inherit;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: .86rem;
    line-height: 1.25;
    text-align: left;
    cursor: pointer;
}

/* Selects que eram standalone precisam manter a caixa visual original. */
.vt-smart-select.vt-smart-standalone > .vt-smart-trigger {
    min-height: 48px;
    padding: 0 42px 0 14px;
    border: 1px solid var(--vt-select-border);
    border-radius: 12px;
    background: color-mix(in srgb, var(--vt-select-bg) 78%, transparent);
    color: var(--vt-select-text);
}

.vt-smart-label {
    overflow: hidden;
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.vt-smart-label.is-placeholder { color: var(--vt-select-muted); }

.vt-smart-chevron {
    flex: 0 0 auto;
    color: var(--vt-select-muted);
    font-size: .78em;
    transition: transform .18s ease, color .18s ease;
}

.vt-smart-select.is-open .vt-smart-chevron {
    transform: rotate(180deg);
    color: var(--vt-select-accent);
}

.vt-smart-select.is-disabled { opacity: .62; }
.vt-smart-select.is-disabled .vt-smart-trigger { cursor: not-allowed; }

.vt-smart-menu {
    position: fixed;
    z-index: 2147482500;
    display: none;
    overflow: hidden;
    min-width: 220px;
    max-height: min(420px, calc(100vh - 24px));
    border: 1px solid var(--vt-select-border);
    border-radius: 14px;
    background: var(--vt-select-bg);
    color: var(--vt-select-text);
    box-shadow: var(--vt-select-shadow);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    font-size: .86rem;
}

.vt-smart-menu.is-open { display: flex; flex-direction: column; }

.vt-smart-search-wrap {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--vt-select-border);
    background: var(--vt-select-bg);
}

.vt-smart-search-wrap > i { color: var(--vt-select-muted); }
.vt-smart-search {
    width: 100%;
    min-width: 0;
    height: 34px;
    padding: 0;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    color: var(--vt-select-text) !important;
    font: inherit;
    box-shadow: none !important;
}
.vt-smart-search::placeholder { color: var(--vt-select-muted); }

.vt-smart-options {
    overflow: auto;
    overscroll-behavior: contain;
    max-height: 320px;
    scrollbar-width: thin;
}

.vt-smart-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 44px;
    padding: 8px 12px;
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--vt-select-border) 72%, transparent);
    background: transparent;
    color: var(--vt-select-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background .14s ease, color .14s ease;
}
.vt-smart-option:last-child { border-bottom: 0; }
.vt-smart-option > i { flex: 0 0 16px; color: var(--vt-select-accent); text-align: center; }
.vt-smart-option > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vt-smart-option:hover,
.vt-smart-option.is-active { background: var(--vt-select-bg-soft); }
.vt-smart-option.is-selected { font-weight: 800; }
.vt-smart-option.is-selected::after {
    content: '\f00c';
    margin-left: auto;
    color: var(--vt-select-accent);
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}
.vt-smart-option[disabled] { opacity: .45; cursor: not-allowed; }

.vt-smart-empty {
    padding: 18px 14px;
    color: var(--vt-select-muted);
    text-align: center;
    font-size: .88rem;
}

.vt-smart-menu-foot {
    padding: 8px 12px;
    border-top: 1px solid var(--vt-select-border);
    color: var(--vt-select-muted);
    background: color-mix(in srgb, var(--vt-select-bg-soft) 70%, transparent);
    font-size: .70rem;
}

/* Dentro dos wrappers existentes, o botão usa a altura/padding que o wrapper já fornece. */
.ui-control-wrap > .vt-smart-select,
.student-select-wrapper > .vt-smart-select,
.school-select-wrapper > .vt-smart-select,
.route-select-wrapper > .vt-smart-select,
.monthly-fee-select-wrapper > .vt-smart-select,
.marketplace-profile-control > .vt-smart-select,
.marketplace-field-control > .vt-smart-select,
.marketplace-modal-control > .vt-smart-select,
.input-wrapper > .vt-smart-select,
.marketplace-filter-control > .vt-smart-select,
.marketplace-modal-select-wrap > .vt-smart-select {
    min-height: inherit;
}

.ui-control-wrap > .vt-smart-select > .vt-smart-trigger,
.student-select-wrapper > .vt-smart-select > .vt-smart-trigger,
.school-select-wrapper > .vt-smart-select > .vt-smart-trigger,
.route-select-wrapper > .vt-smart-select > .vt-smart-trigger,
.monthly-fee-select-wrapper > .vt-smart-select > .vt-smart-trigger,
.marketplace-profile-control > .vt-smart-select > .vt-smart-trigger,
.marketplace-field-control > .vt-smart-select > .vt-smart-trigger,
.marketplace-modal-control > .vt-smart-select > .vt-smart-trigger,
.input-wrapper > .vt-smart-select > .vt-smart-trigger,
.marketplace-filter-control > .vt-smart-select > .vt-smart-trigger,
.marketplace-modal-select-wrap > .vt-smart-select > .vt-smart-trigger {
    min-height: 100%;
    padding-right: 14px;
}

/* Se existe ícone irmão à esquerda, respeita o espaço que antes era do select. */
.ui-control-wrap:has(> i:first-child) > .vt-smart-select > .vt-smart-trigger,
.marketplace-profile-control:has(> i:first-child) > .vt-smart-select > .vt-smart-trigger,
.marketplace-field-control:has(> i:first-child) > .vt-smart-select > .vt-smart-trigger,
.marketplace-modal-control:has(> i:first-child) > .vt-smart-select > .vt-smart-trigger,
.input-wrapper:has(> i:first-child) > .vt-smart-select > .vt-smart-trigger {
    padding-left: 0;
}

@media (max-width: 640px) {
    .vt-smart-menu { max-height: min(360px, calc(100vh - 16px)); border-radius: 12px; }
    .vt-smart-options { max-height: 260px; }
}

.vt-smart-select.vt-smart-external-arrow .vt-smart-chevron { display: none; }
.vt-smart-select:focus-within > .vt-smart-trigger {
    border-color: color-mix(in srgb, var(--vt-select-accent) 55%, transparent) !important;
}


/* Integração fina com Marketplace: os proxies de Cidade/Estado criados pelo
 * diretório devem ocupar exatamente a caixa original e manter a seta centrada. */
.marketplace-field-control > .vt-smart-select,
.marketplace-filter-control > .vt-smart-select,
.marketplace-modal-control > .vt-smart-select {
    width: 100% !important;
    min-width: 0 !important;
}
.marketplace-field-control > .vt-smart-select > .vt-smart-trigger,
.marketplace-filter-control > .vt-smart-select > .vt-smart-trigger,
.marketplace-modal-control > .vt-smart-select > .vt-smart-trigger {
    width: 100% !important;
    min-width: 0 !important;
}
.marketplace-field-control .vt-smart-chevron,
.marketplace-filter-control .vt-smart-chevron,
.marketplace-modal-control .vt-smart-chevron {
    align-self: center !important;
    line-height: 1 !important;
    transform-origin: 50% 50%;
}

/* ========================================================================== */
/* 10.8 — setas perfeitamente centralizadas em Marketplace/modais             */
/* ========================================================================== */
.marketplace-field-control > .vt-smart-select > .vt-smart-trigger,
.marketplace-filter-control > .vt-smart-select > .vt-smart-trigger,
.marketplace-modal-control > .vt-smart-select > .vt-smart-trigger {
    position: relative !important;
}
.marketplace-field-control > .vt-smart-select:not(.vt-smart-external-arrow) .vt-smart-chevron,
.marketplace-filter-control > .vt-smart-select:not(.vt-smart-external-arrow) .vt-smart-chevron,
.marketplace-modal-control > .vt-smart-select:not(.vt-smart-external-arrow) .vt-smart-chevron {
    position: absolute !important;
    top: 50% !important;
    right: 17px !important;
    margin: 0 !important;
    line-height: 1 !important;
    transform: translateY(-50%) !important;
}
.marketplace-field-control > .vt-smart-select.is-open:not(.vt-smart-external-arrow) .vt-smart-chevron,
.marketplace-filter-control > .vt-smart-select.is-open:not(.vt-smart-external-arrow) .vt-smart-chevron,
.marketplace-modal-control > .vt-smart-select.is-open:not(.vt-smart-external-arrow) .vt-smart-chevron {
    transform: translateY(-50%) rotate(180deg) !important;
}

/* ========================================================================== */
/* 10.8.1 — centralização óptica das setas (Font Awesome tem baseline próprio) */
/* ========================================================================== */
body.marketplace-find-page :is(.marketplace-select-arrow, .marketplace-modal-arrow),
body.marketplace-results-page .marketplace-modal-arrow,
body.marketplace-driver-page .marketplace-profile-select-arrow,
.marketplace-field-control .vt-smart-chevron,
.marketplace-filter-control .vt-smart-chevron,
.marketplace-modal-control .vt-smart-chevron {
    display: grid !important;
    place-items: center !important;
    width: 18px !important;
    height: 18px !important;
    line-height: 1 !important;
}

body.marketplace-find-page :is(.marketplace-select-arrow, .marketplace-modal-arrow),
body.marketplace-results-page .marketplace-modal-arrow,
body.marketplace-driver-page .marketplace-profile-select-arrow {
    top: 50% !important;
    margin: 0 !important;
    transform: translateY(-50%) !important;
}

/* ========================================================================== */
/* 10.8.2 — evita seta duplicada quando a tela já possui chevron próprio       */
/* O Smart Select cria uma seta interna; Marketplace já renderiza uma externa. */
/* Esta regra precisa vir depois da centralização óptica que usa !important.    */
/* ========================================================================== */
.vt-smart-select.vt-smart-external-arrow > .vt-smart-trigger > .vt-smart-chevron {
    display: none !important;
}

/* ========================================================================== */
/* 1.4 — chevron único e infalível em TODOS os Smart Selects                  */
/* A seta agora é desenhada em CSS e não depende do glyph do Font Awesome.    */
/* ========================================================================== */
.vt-smart-select.vt-smart-external-arrow > .vt-smart-trigger > .vt-smart-chevron,
.vt-smart-select > .vt-smart-trigger > .vt-smart-chevron {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 20px !important;
    width: 20px !important;
    height: 20px !important;
    margin: 0 0 0 auto !important;
    color: var(--vt-select-muted) !important;
    font-size: 0 !important;
    line-height: 1 !important;
    opacity: .96 !important;
    transform: none !important;
    transform-origin: 50% 50% !important;
    transition: color .18s ease, opacity .18s ease, transform .18s ease !important;
}
.vt-smart-select.vt-smart-external-arrow > .vt-smart-trigger > .vt-smart-chevron::before,
.vt-smart-select > .vt-smart-trigger > .vt-smart-chevron::before {
    content: "" !important;
    display: block !important;
    width: 7px !important;
    height: 7px !important;
    border: 0 !important;
    border-right: 2px solid currentColor !important;
    border-bottom: 2px solid currentColor !important;
    background: transparent !important;
    transform: translateY(-2px) rotate(45deg) !important;
    transform-origin: 50% 50% !important;
}
.vt-smart-select.is-open.vt-smart-external-arrow > .vt-smart-trigger > .vt-smart-chevron,
.vt-smart-select.is-open > .vt-smart-trigger > .vt-smart-chevron {
    color: var(--vt-select-accent) !important;
    transform: rotate(180deg) !important;
}
.vt-smart-select.is-disabled.vt-smart-external-arrow > .vt-smart-trigger > .vt-smart-chevron,
.vt-smart-select.is-disabled > .vt-smart-trigger > .vt-smart-chevron {
    display: inline-flex !important;
    opacity: .52 !important;
}
.vt-smart-legacy-arrow {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Os proxies de cidade/bairro são criados dinamicamente pelo diretório.
   Garante largura integral e reserva somente o espaço necessário à seta. */
.vt-smart-select:has(> select[data-vt-directory-proxy]) {
    width: 100% !important;
    min-width: 0 !important;
}
.vt-smart-select:has(> select[data-vt-directory-proxy]) > .vt-smart-trigger {
    width: 100% !important;
    min-width: 0 !important;
    padding-right: 14px !important;
}


/* ========================================================================== */
/* 1.5 — seta estrutural global, inclusive em selects vazios/desabilitados    */
/* -------------------------------------------------------------------------- */
/*
 * A seta não depende mais do <i> interno nem da quantidade de opções.
 * Ela pertence ao wrapper do Smart Select, então continua visível quando um
 * campo dependente (Cidade/Bairro/Escola etc.) ainda está desabilitado.
 */
.vt-smart-select {
    --vt-smart-arrow-size: 8px;
    --vt-smart-arrow-right: 17px;
}

.vt-smart-select::after {
    content: "" !important;
    position: absolute !important;
    z-index: 8 !important;
    top: 50% !important;
    right: var(--vt-smart-arrow-right) !important;
    display: block !important;
    width: var(--vt-smart-arrow-size) !important;
    height: var(--vt-smart-arrow-size) !important;
    margin: 0 !important;
    border: 0 !important;
    border-right: 2px solid currentColor !important;
    border-bottom: 2px solid currentColor !important;
    background: transparent !important;
    color: var(--vt-select-muted, #91a8bc) !important;
    opacity: .94 !important;
    pointer-events: none !important;
    transform: translateY(-66%) rotate(45deg) !important;
    transform-origin: 50% 50% !important;
    transition: transform .18s ease, color .18s ease, opacity .18s ease !important;
}

.vt-smart-select.is-open::after {
    color: var(--vt-select-accent, #ffb000) !important;
    transform: translateY(-34%) rotate(225deg) !important;
}

/* Desabilitado significa "aguardando o campo anterior", não "sem seta". */
.vt-smart-select.is-disabled::after {
    display: block !important;
    visibility: visible !important;
    opacity: .56 !important;
}

/* Uma única seta por campo. O glyph interno e chevrons legados ficam ocultos. */
.vt-smart-select > .vt-smart-trigger > .vt-smart-chevron {
    display: none !important;
    visibility: hidden !important;
}

/* Reserva física para a seta estrutural, mesmo se a Blade original não tinha
   uma classe específica de select (caso típico de Cidade/Bairro convertidos). */
.vt-smart-select > .vt-smart-trigger {
    padding-right: 44px !important;
}

/* Os proxies do diretório brasileiro passam a ser visualmente selects desde o
   primeiro frame, inclusive quando possuem apenas o placeholder. */
.vt-smart-select:has(> select[data-vt-directory-proxy])::after,
.vt-smart-select:has(> select[data-vt-directory-control])::after {
    display: block !important;
    visibility: visible !important;
}

/* Durante o carregamento da lista de escolas, o spinner pode ocupar o mesmo
   canto. Nesse único instante ele substitui visualmente a seta. */
[data-school-control].is-loading > .vt-smart-select::after {
    opacity: 0 !important;
}

/* ========================================================================== */
/* Smart Select 1.6 — seta única + ellipsis global                            */
/* ========================================================================== */
/* A seta oficial do componente é desenhada por vt-form-controls.css em
   .vt-smart-select::after. Toda seta antiga da Blade fica oculta quando o
   select já foi aprimorado, evitando duas setas lado a lado. */
:is(
    .ui-control-wrap,
    .student-select-wrapper,
    .school-select-wrapper,
    .route-select-wrapper,
    .monthly-fee-select-wrapper,
    .marketplace-profile-control,
    .marketplace-field-control,
    .marketplace-modal-control,
    .marketplace-filter-control,
    .marketplace-modal-select-wrap,
    .input-wrapper,
    .support-select-field,
    .students-select-field,
    .schools-select-field,
    .routes-select-field,
    .monthly-fees-select-field,
    .auto-filter-field
):has(> .vt-smart-select) > :is(
    i.fa-chevron-down,
    i.fa-angle-down,
    .auto-filter-chevron,
    .marketplace-select-arrow,
    .marketplace-filter-arrow,
    .marketplace-modal-arrow,
    .marketplace-profile-select-arrow,
    .guardian-reference-filter-chevron,
    .guardian-reference-filter__chevron
),
.vt-smart-legacy-arrow {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.vt-smart-select,
.vt-smart-select > .vt-smart-trigger {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}
.vt-smart-select > .vt-smart-trigger {
    overflow: hidden !important;
    padding-right: 48px !important;
}
.vt-smart-select > .vt-smart-trigger > .vt-smart-label {
    display: block !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
}

/* ========================================================================== */
/* Smart Select 1.7 — UMA seta por campo + folga/ellipsis garantidos          */
/* ========================================================================== */
/*
 * A seta oficial existe apenas em .vt-smart-select::after.
 * Não dependemos de Font Awesome, do select nativo, da quantidade de opções
 * ou de chevrons antigos das Blades. O JS 1.7 também remove chevrons legados
 * do DOM e apaga qualquer background-image copiado do select nativo.
 */
.vt-smart-select {
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    --vt-smart-arrow-right: 17px;
    --vt-smart-arrow-box: 20px;
}

.vt-smart-select::after {
    content: \"\" !important;
    position: absolute !important;
    z-index: 20 !important;
    top: 50% !important;
    right: var(--vt-smart-arrow-right) !important;
    display: block !important;
    visibility: visible !important;
    width: 8px !important;
    height: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-right: 2px solid currentColor !important;
    border-bottom: 2px solid currentColor !important;
    background: none !important;
    color: var(--vt-select-muted, #91a8bc) !important;
    opacity: .92 !important;
    pointer-events: none !important;
    transform: translateY(-66%) rotate(45deg) !important;
    transform-origin: 50% 50% !important;
    transition: transform .18s ease, color .18s ease, opacity .18s ease !important;
}
.vt-smart-select.is-open::after {
    color: var(--vt-select-accent, #ffb000) !important;
    transform: translateY(-34%) rotate(225deg) !important;
}
.vt-smart-select.is-disabled::after {
    display: block !important;
    visibility: visible !important;
    opacity: .52 !important;
}

/* O botão NUNCA carrega seta própria. Isso elimina inclusive background-image
   de .form-select/Bootstrap que pudesse ter sido herdado do select original. */
.vt-smart-select > .vt-smart-trigger {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    padding-right: 56px !important;
    background-image: none !important;
}
.vt-smart-select > .vt-smart-trigger > .vt-smart-chevron {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    min-width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
}
.vt-smart-select > .vt-smart-trigger > .vt-smart-label {
    display: block !important;
    flex: 1 1 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 6px 0 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
}

/* Chevrons externos antigos: fallback CSS para algum HTML que seja pintado
   antes do JS 1.7 removê-lo do DOM. */
:is(
    .ui-control-wrap, .student-select-wrapper, .school-select-wrapper,
    .route-select-wrapper, .monthly-fee-select-wrapper,
    .marketplace-profile-control, .marketplace-field-control,
    .marketplace-modal-control, .marketplace-filter-control,
    .marketplace-modal-select-wrap, .input-wrapper, .support-select-field,
    .students-select-field, .schools-select-field, .routes-select-field,
    .monthly-fees-select-field, .auto-filter-field, .vt-directory-select-host
):has(> .vt-smart-select) > :is(
    i.fa-chevron-down, i.fa-angle-down, .auto-filter-chevron,
    .marketplace-select-arrow, .marketplace-filter-arrow, .marketplace-modal-arrow,
    .marketplace-profile-select-arrow, .guardian-reference-filter-chevron,
    .guardian-reference-filter__chevron
),
.vt-smart-legacy-arrow {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Durante carregamento, preserva a seta. Spinners de campo ficam um pouco à
   esquerda para não competir com ela. */
[data-school-control].is-loading > .vt-smart-select::after {
    display: block !important;
    visibility: visible !important;
    opacity: .52 !important;
}
[data-school-control].is-loading > :is(.marketplace-field-spinner, .vt-field-spinner) {
    right: 42px !important;
}