/* ============================================================
   O POPUP DE CONFIRMAÇÃO
   ============================================================
   Autor: Hacker 0 5 90

   Desenhado aqui e não pedido à caixa partilhada do ux-async.js. A razão está
   escrita nos dois sítios que o usam, e é sempre a mesma: uma pergunta que a
   pessoa TEM de ver não pode depender de outro ficheiro ter carregado, nem do
   `window.confirm` do browser — que numa app instalada no telemóvel pode
   simplesmente não abrir, devolvendo "não" sem uma janela sequer.

   Serve duas acções que não se desfazem: apagar um método de pagamento e
   desmarcar a consulta de alguém. */

.mp-confirmar {
    position: fixed;
    inset: 0;
    z-index: 99998;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(58, 33, 24, 0.42);
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity 0.18s ease;
}

.mp-confirmar.is-aberto { opacity: 1; }

.mp-confirmar-caixa {
    width: min(100%, 340px);
    padding: 22px 20px 18px;
    border-radius: 18px;
    background: #FFFFFF;
    box-shadow: 0 18px 44px rgba(58, 33, 24, 0.26);
    text-align: center;
    transform: translateY(12px) scale(0.97);
    transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

.mp-confirmar.is-aberto .mp-confirmar-caixa { transform: none; }

.mp-confirmar-selo {
    width: 46px;
    height: 46px;
    margin: 0 auto 12px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FBEDEA;
    color: #C0392B;
    font-size: 1.02rem;
}

.mp-confirmar-caixa h2 {
    margin: 0 0 6px;
    color: #3A2118;
    font-size: 1rem;
    font-weight: 700;
}

.mp-confirmar-caixa p {
    margin: 0 0 18px;
    color: #7A6154;
    font-size: 0.8rem;
    line-height: 1.5;
}

/* Manter à esquerda e a acção à direita: o polegar cai no lado direito, e o
   que lá está tem de ser o que a pessoa veio fazer. */
.mp-confirmar-acoes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.mp-confirmar-btn {
    min-height: 44px;
    padding: 11px 12px;
    border-radius: 999px;
    border: 1.5px solid transparent;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
}

.mp-confirmar-btn.is-manter {
    border-color: #E4D9CE;
    background: #FFFFFF;
    color: #7A6154;
}

.mp-confirmar-btn.is-apagar {
    background: #C0392B;
    color: #FFFFFF;
}

.mp-confirmar-btn:focus-visible {
    outline: 2px solid #3A2118;
    outline-offset: 2px;
}