/*
 * Confirmação e aviso da Confyare (Scripts/confyare-confirm.js): diálogo centralizado sobre um fundo
 * escuro, com ícone, título, descrição e botões (o aviso esconde o de cancelar). O tipo (perigo, aviso,
 * info, sucesso) pinta o ícone e o botão principal. Usa os tokens do :root de style-confyare.css.
 *
 * Os estilos são todos explícitos (títulos, parágrafos e botões) porque o diálogo é inserido no fim do
 * <body> e não pode herdar regras globais do Bootstrap ou do style.css do layout externo.
 */

.confyare-confirm {
    --confirm-cor: var(--color-primary, #2563eb);
    --confirm-cor-suave: rgba(37, 99, 235, .16);
    --confirm-cor-borda: rgba(60, 120, 255, .42);
    --confirm-botao: var(--color-primary, #2563eb);
    --confirm-botao-texto: #fff;
    position: fixed;
    inset: 0;
    /* Acima dos modais do Bootstrap (1050) e da barra inferior (99999); abaixo dos toasts (999999) */
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(2, 6, 20, .74);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity .2s ease;
}

    .confyare-confirm[hidden],
    .confyare-confirm [hidden] {
        display: none !important;
    }

    .confyare-confirm.aberto {
        opacity: 1;
    }

/* TIPOS: cor do ícone (clara, para ler no fundo escuro) e do botão de confirmar (com contraste para o texto) */

.confyare-confirm--perigo {
    --confirm-cor: var(--color-error, #FF5252);
    --confirm-cor-suave: rgba(255, 82, 82, .14);
    --confirm-cor-borda: rgba(255, 82, 82, .38);
    --confirm-botao: #dc2626;
    --confirm-botao-texto: #fff;
}

.confyare-confirm--aviso {
    --confirm-cor: #f59e0b;
    --confirm-cor-suave: rgba(245, 158, 11, .14);
    --confirm-cor-borda: rgba(245, 158, 11, .38);
    --confirm-botao: #f59e0b;
    --confirm-botao-texto: #241500;
}

.confyare-confirm--sucesso {
    --confirm-cor: var(--color-success, #00C853);
    --confirm-cor-suave: rgba(0, 200, 83, .14);
    --confirm-cor-borda: rgba(0, 200, 83, .38);
    --confirm-botao: #15803d;
    --confirm-botao-texto: #fff;
}

/* DESTAQUE: botão principal azul com brilho (opção "destaque" do Confyare.alert/confirm), em qualquer tipo */

.confyare-confirm--destaque .confyare-confirm-ok {
    background: var(--color-primary, #2563eb);
    color: #fff;
    border-color: rgba(120, 165, 255, .55);
    box-shadow: 0 0 0 1px rgba(37, 99, 235, .35), 0 0 22px rgba(37, 99, 235, .65), 0 6px 18px rgba(37, 99, 235, .45);
}

    .confyare-confirm--destaque .confyare-confirm-ok:hover {
        filter: brightness(1.12);
        box-shadow: 0 0 0 1px rgba(37, 99, 235, .5), 0 0 30px rgba(37, 99, 235, .85), 0 8px 22px rgba(37, 99, 235, .55);
    }

.confyare-confirm--destaque .confyare-confirm-botoes button.confyare-confirm-ok:focus-visible {
    box-shadow: 0 0 0 3px #12172A, 0 0 0 5px #7aa5ff, 0 0 26px rgba(37, 99, 235, .8);
}

/* CARD */

.confyare-confirm-card {
    width: 100%;
    max-width: 400px;
    max-height: 100%;
    overflow-y: auto;
    padding: 28px 26px 22px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 20px;
    background: var(--color-surface, #12172A);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
    color: var(--color-text-primary, #E6EDF3);
    text-align: center;
    transform: scale(.94) translateY(8px);
    transition: transform .2s ease;
}

.confyare-confirm.aberto .confyare-confirm-card {
    transform: none;
}

.confyare-confirm-icone {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    border: 1px solid var(--confirm-cor-borda);
    border-radius: 50%;
    background: var(--confirm-cor-suave);
    box-shadow: 0 0 24px var(--confirm-cor-suave);
    color: var(--confirm-cor);
    font-size: 28px;
}

.confyare-confirm-titulo {
    margin: 0 0 8px;
    color: #fff;
    font-family: inherit;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
}

.confyare-confirm-descricao {
    margin: 0;
    color: var(--color-text-secondary, #AAB3C5);
    font-size: 15px;
    line-height: 1.55;
    /* Quebras de linha do texto (\n) aparecem como no confirm() nativo */
    white-space: pre-line;
}

/* BOTÕES: "cancelar" no estilo do .btn-secondary-custom; "confirmar" na cor do tipo */

.confyare-confirm-botoes {
    display: flex;
    gap: 10px;
    margin-top: 24px;
}

    .confyare-confirm-botoes button {
        flex: 1 1 0;
        min-width: 0;
        min-height: 46px;
        margin: 0;
        padding: 10px 14px;
        border: 1px solid transparent;
        border-radius: 14px;
        font-family: inherit;
        font-size: 15px;
        font-weight: 700;
        line-height: 1.25;
        cursor: pointer;
        transition: background-color .2s ease, filter .2s ease, box-shadow .2s ease;
    }

.confyare-confirm-cancelar {
    border-color: rgba(255, 255, 255, .08) !important;
    background: #262a37;
    color: #dfe2f3;
}

    .confyare-confirm-cancelar:hover {
        background: #2f3444;
    }

.confyare-confirm-ok {
    background: var(--confirm-botao);
    color: var(--confirm-botao-texto);
}

    .confyare-confirm-ok:hover {
        filter: brightness(1.1);
    }

/* O style-confyare.css tira o outline de todo botão; o anel de foco do teclado fica no box-shadow */
.confyare-confirm-botoes button:focus-visible {
    box-shadow: 0 0 0 3px #12172A, 0 0 0 5px var(--confirm-cor);
}

@media (max-width: 480px) {
    .confyare-confirm-card {
        padding: 24px 20px 18px;
    }

    /* Botões empilhados, com o de confirmar em cima */
    .confyare-confirm-botoes {
        flex-direction: column-reverse;
    }

        .confyare-confirm-botoes button {
            flex: none;
            width: 100%;
        }
}

@media (prefers-reduced-motion: reduce) {
    .confyare-confirm,
    .confyare-confirm-card {
        transition: none;
    }
}