/* Minification failed. Returning unminified contents.
(36,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xxs'
(37,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold'
(38,17): run-time error CSS1039: Token not allowed after unary operator: '-color-warning-deep'
(53,19): run-time error CSS1039: Token not allowed after unary operator: '-padding-xs'
(55,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xxxs'
(56,17): run-time error CSS1039: Token not allowed after unary operator: '-color-neutral-darker'
(88,24): run-time error CSS1039: Token not allowed after unary operator: '-color-success-pure'
(89,22): run-time error CSS1039: Token not allowed after unary operator: '-color-success-tinted'
(90,17): run-time error CSS1039: Token not allowed after unary operator: '-color-success-deep'
(94,24): run-time error CSS1039: Token not allowed after unary operator: '-color-error-pure'
(95,22): run-time error CSS1039: Token not allowed after unary operator: '-color-error-tinted'
(96,17): run-time error CSS1039: Token not allowed after unary operator: '-color-error-pure'
(100,22): run-time error CSS1039: Token not allowed after unary operator: '-color-warning-tinted'
(101,17): run-time error CSS1039: Token not allowed after unary operator: '-color-warning-deep'
(105,22): run-time error CSS1039: Token not allowed after unary operator: '-color-success-tinted'
(106,17): run-time error CSS1039: Token not allowed after unary operator: '-color-success-deep'
(116,17): run-time error CSS1039: Token not allowed after unary operator: '-color-success-pure'
(149,28): run-time error CSS1039: Token not allowed after unary operator: '-color-secondary-pure'
 */
/* ============================================================================
   Checkout Pix — SOMENTE o que é específico do Pix.
   A modal em si é Bootstrap (esqueleto canônico de Views/Imovel/_Modais.cshtml)
   e todo o resto vem do design system (~/bundles/novoLayout): botões button.css,
   inputs inputs.css, .alert/.chip/.loading-overlay/tipografia _variables.css.
   Nada aqui redefine cor/tamanho que o design system já tenha — só tokens.
   ========================================================================== */

/* Overlay de geração: por cima do X (que é position:absolute no
   .modal-content) e mais opaco que o .loading-overlay padrão, porque cobre
   texto e precisa legibilidade das mensagens rotativas. */
.modal-pix-loading {
    background: rgba(255, 255, 255, 0.96);
    z-index: 11;
    animation: modal-pix-fade-in 160ms ease-out;
}

/* Crossfade da mensagem rotativa do loading (o JS alterna .is-trocando). */
.modal-pix-loading-texto {
    min-height: 21px;
    transition: opacity 200ms ease;
}

.modal-pix-loading-texto.is-trocando {
    opacity: 0;
}

/* Valores monetários alinham dígitos (o valor troca via AJAX). */
.modal-pix-valor {
    font-variant-numeric: tabular-nums;
}

/* Contagem regressiva de expiração do QR. */
.modal-pix-timer {
    font-family: Consolas, "Courier New", monospace;
    font-size: var(--font-size-xxs, 14px);
    font-weight: var(--font-weight-bold, 700);
    color: var(--color-warning-deep, #663700);
    font-variant-numeric: tabular-nums;
}

/* QR: dimensão fixa obrigatória — o reset global (_variables.css) força
   img { width:100%; height:100% } e distorceria o código. */
.modal-pix-qr-img {
    display: block;
    width: 172px;
    height: 172px;
}

/* Fallback quando a imagem do QR falha (nó criado pelo JS). */
.modal-pix-qr-fallback {
    width: 200px;
    padding: var(--padding-xs, 16px);
    text-align: center;
    font-size: var(--font-size-xxxs, 12px);
    color: var(--color-neutral-darker, #7F7F7F);
}

/* Payload copia-e-cola: mono truncado — o código tem 200+ chars. */
.modal-pix-copia-e-cola {
    flex: 1;
    min-width: 0;
    font-family: Consolas, "Courier New", monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Chips com troca spinner <-> check por data-estado. O check nasce oculto;
   nos estados finais o spinner some e o check aparece. */
.modal-pix-status-check {
    display: none;
}

.modal-pix-status[data-estado="pago"] .modal-pix-status-spinner,
.modal-pix-status[data-estado="falha"] .modal-pix-status-spinner,
.modal-pix-relatorio-chip[data-estado="pronto"] .modal-pix-status-spinner {
    display: none;
}

.modal-pix-status[data-estado="pago"] .modal-pix-status-check,
.modal-pix-relatorio-chip[data-estado="pronto"] .modal-pix-status-check {
    display: inline-flex;
}

/* Variantes de cor por estado — em cima do .alert/.chip do design system. */
.modal-pix-status[data-estado="pago"] {
    border-color: var(--color-success-pure, #29CC5F);
    background: var(--color-success-tinted, #E6F8EC);
    color: var(--color-success-deep, #145A29);
}

.modal-pix-status[data-estado="falha"] {
    border-color: var(--color-error-pure, #D44333);
    background: var(--color-error-tinted, #FBE8E6);
    color: var(--color-error-pure, #D44333);
}

.modal-pix-relatorio-chip[data-estado="preparando"] {
    background: var(--color-warning-tinted, #FFECD9);
    color: var(--color-warning-deep, #663700);
}

.modal-pix-relatorio-chip[data-estado="pronto"] {
    background: var(--color-success-tinted, #E6F8EC);
    color: var(--color-success-deep, #145A29);
}

/* Hint do status some quando o JS não tem nada a dizer. */
.modal-pix-status-hint:empty {
    display: none;
}

/* Check de sucesso pós-pagamento. */
.modal-pix-sucesso-icone {
    color: var(--color-success-pure, #29CC5F);
    animation: modal-pix-pop 350ms ease-out;
}

@keyframes modal-pix-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes modal-pix-pop {
    0% { transform: scale(0.4); opacity: 0; }
    70% { transform: scale(1.08); }
    100% { transform: scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .modal-pix-loading,
    .modal-pix-sucesso-icone {
        animation: none;
    }

    .modal-pix-loading-texto {
        transition: none;
    }
}

/* Bolinha dos bullets do passo "intro". O .laudo-bullet do design system vive
   em portal-laudo.css, que NÃO está no bundle desta modal — replicado aqui
   (só o token, nada que o DS já cubra), seguindo a política deste arquivo. */
.modal-pix-bullet {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--color-secondary-pure, #163867);
}

/* Botão "Acessar análise" (data-modal-pix-avancar) enquanto o AJAX de
   /cobranca-pendente está em voo. O JS aplica is-carregando + disabled
   pra travar clique — o visual precisa comunicar "estamos checando" sem
   quebrar o layout, então mantém texto + valor no lugar e escurece só
   um pouco. cursor:progress evita o "not-allowed" (que combina mais com
   erro que com espera). */
[data-modal-pix-avancar].is-carregando {
    opacity: 0.75;
    cursor: progress;
}