/* ============================================================= Custom Select — substitui visualmente o original fica hidden mas continua ativo para submit e validação nativa do browser. ============================================================= */ .vm-select-wrap { position: relative; } /* Mantém o select nativo funcional mas invisível (acessibilidade fallback) */ .vm-select-wrap > select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; } /* Botão visível que dispara o dropdown */ .vm-select-trigger { display: flex; align-items: center; justify-content: space-between; gap: 0.55rem; width: 100%; min-height: 54px; padding: 0.375rem 0.75rem; border-radius: 16px; border: 1px solid rgba(148, 163, 184, 0.35); background: rgba(255, 255, 255, 0.96); color: #212529; font-size: 1rem; font-weight: 400; font-family: inherit; line-height: 1.5; text-align: left; cursor: pointer; transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease, background 0.22s ease; user-select: none; } .vm-select-trigger:hover { transform: translateY(-1px); border-color: rgba(37, 99, 235, 0.34); } .vm-select-wrap.is-open .vm-select-trigger, .vm-select-trigger:focus-visible { border-color: rgba(37, 99, 235, 0.55); box-shadow: 0 0 0 0.25rem rgba(37, 99, 235, 0.12); background: #fff; outline: none; } .vm-select-trigger-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vm-select-trigger-text.is-placeholder { color: #6c757d; } .vm-select-trigger-icon { flex-shrink: 0; width: 18px; height: 18px; color: #64748b; transition: transform 0.22s ease; } .vm-select-wrap.is-open .vm-select-trigger-icon { transform: rotate(180deg); color: #2563eb; } /* Painel dropdown — vive no e usa position fixed (escapa de backdrop-filter/overflow de ancestrais). Posição definida via JS. */ .vm-select-panel { position: fixed; top: 0; left: 0; z-index: 4000; max-height: 260px; overflow-y: auto; overscroll-behavior: contain; padding: 0.4rem; border-radius: 16px; border: 1px solid rgba(148, 163, 184, 0.28); background: #fff; box-shadow: 0 4px 6px rgba(15, 23, 42, 0.04), 0 10px 30px rgba(15, 23, 42, 0.10); opacity: 0; transform: translateY(-6px) scaleY(0.97); transform-origin: top center; pointer-events: none; visibility: hidden; transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s; } .vm-select-panel.is-open { opacity: 1; transform: translateY(0) scaleY(1); pointer-events: auto; visibility: visible; transition: opacity 0.18s ease, transform 0.18s ease; } /* Abre para cima */ .vm-select-panel.opens-up { transform-origin: bottom center; } /* Cada opção */ .vm-select-option { display: flex; align-items: center; gap: 0.6rem; width: 100%; padding: 0.62rem 0.82rem; border-radius: 12px; border: 0; background: transparent; color: #0f172a; font-size: 0.92rem; font-weight: 600; font-family: inherit; text-align: left; cursor: pointer; transition: background 0.12s ease, color 0.12s ease; } .vm-select-option:hover, .vm-select-option.is-focused { background: #f1f5f9; color: #0f172a; } .vm-select-option.is-selected { background: #e0ecff; color: #1d4ed8; font-weight: 800; } .vm-select-option.is-selected::after { content: ''; display: block; width: 8px; height: 8px; border-radius: 50%; background: #2563eb; margin-left: auto; flex-shrink: 0; } .vm-select-option.is-placeholder-opt { color: #94a3b8; font-style: italic; font-weight: 400; } .vm-select-option[disabled], .vm-select-option.is-disabled { color: #cbd5e1; cursor: default; pointer-events: none; } /* Scrollbar fina no painel */ .vm-select-panel::-webkit-scrollbar { width: 4px; } .vm-select-panel::-webkit-scrollbar-track { background: transparent; } .vm-select-panel::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; } /* Adaptação mobile */ @media (max-width: 575.98px) { .vm-select-trigger { min-height: 50px; font-size: 0.95rem; } .vm-select-panel { max-height: 220px; } }