/* Loja IMT Academy — o seletor de parcelas do cartão (06/10/2026)
 * Fonte de 16px de propósito: abaixo disso o iPhone dá zoom ao tocar.
 * O CAMPO FECHADO, com JS (.parcelas--vivo, posto pelo parcelas.js): a escolha
 * aparece em duas linhas por cima do select ("3× de R$ 39,96" / "total R$
 * 119,88"), e o texto do próprio select fica transparente. Numa linha só, de
 * 320 a 390px o total era cortado no meio do número ("total R$ 1.5…"). A
 * lista aberta continua com o texto inteiro de cada opção, nas cores do
 * sistema; sem JS, o select mostra o texto dele, como sempre.
 * Vive no form#form-compra (fundo escuro, .compra) das landings da loja e da
 * Agência. Cor de foco: --acento-escuro / --acento-halo da base (lp.css), senão
 * o --lime da Agência, senão o lime da marca. Sem JS o seletor aparece sempre
 * (vai no POST); com JS (parcelas.js) some quando a forma é Pix. Nenhum style="". */
.form .parcelas { --pc-cor: var(--acento-escuro, var(--lime, #D8FF00)); display: grid; gap: 7px; min-width: 0; }
.form .parcelas[hidden] { display: none; }
/* produto só à vista (09/10/2026, parcelas.php): o campo existe para o cupom.js e o parcelas.js, mas
   nunca aparece; o parcelas.js tira o hidden com o cartão marcado, e esta regra segura (parcelas.css?v=2) */
.form .parcelas--fixo, .form .parcelas--fixo[hidden] { display: none !important; }
.form .parcelas__rotulo { min-width: 0; }
.parcelas__caixa { position: relative; display: block; min-width: 0; }
.form .parcelas__select {
  -webkit-appearance: none; appearance: none; display: block; width: 100%; min-width: 0; max-width: 100%;
  min-height: 56px; padding: 0 36px 0 14px; border-radius: 14px; border: 1px solid rgba(255,255,255,.16);
  background: #151515 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23BFC5B9' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 16px 16px;
  color: #FCFCFC; font: 500 1rem/1.2 var(--f, Montserrat, system-ui, sans-serif); letter-spacing: -.01em; text-transform: none;
  text-overflow: ellipsis; white-space: nowrap; overflow: hidden; cursor: pointer;
  transition: border-color .2s, box-shadow .2s; }
.form .parcelas__select:focus { outline: none; border-color: var(--pc-cor); box-shadow: 0 0 0 3px var(--acento-halo, rgba(216,255,0,.22)); }
.form .parcelas__select:focus-visible { outline: 3px solid var(--pc-cor); outline-offset: 2px; }
.form .parcelas__select[aria-invalid="true"] { border-color: #FC5860; }
/* a lista aberta usa as cores do sistema: texto escuro em fundo claro, legível em qualquer aparelho */
.form .parcelas__select option { color: #0A0A0A; background: #FCFCFC; }
/* a escolha em duas linhas, por cima do select (só com JS; o clique passa para o select) */
.parcelas__mostra { display: none; }
.parcelas--vivo .parcelas__select { color: transparent; text-shadow: none; }
.parcelas--vivo .parcelas__mostra {
  position: absolute; top: 0; right: 40px; bottom: 0; left: 15px; display: flex; flex-direction: column; justify-content: center;
  gap: 2px; min-width: 0; pointer-events: none; text-transform: none; letter-spacing: -.01em; }
.parcelas__mostra b, .parcelas__mostra small { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.parcelas__mostra b { font: 600 1rem/1.15 var(--f, Montserrat, system-ui, sans-serif); color: #FCFCFC; }
.parcelas__mostra small { font: 500 .8rem/1.2 var(--f, Montserrat, system-ui, sans-serif); color: #A9B0A3; }
.parcelas__nota { font: 500 .84rem/1.45 var(--f, Montserrat, system-ui, sans-serif); letter-spacing: 0; text-transform: none; color: #8E9588; }
@media (prefers-reduced-motion: reduce) { .form .parcelas__select { transition: none; } }