:root {
    --overlay-bg: rgba(0,0,0,.55);
    --card-bg: #fff;
    --radius: 16px;
    --shadow: 0 20px 50px rgba(0,0,0,.25);
}

body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Arial, sans-serif; }

/* Overlay centralizado */
.overlay {
    position: fixed; inset: 0;
    display: none; /* controlado via .show */
    align-items: center; justify-content: center;
    background: var(--overlay-bg);
    z-index: 9999;
}
.overlay.show { display: flex; }

/* modal-popup card */
.modal-popup {
    width: min(560px, 92vw);
    background: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 0px;
    transform: translateY(12px) scale(.98);
    opacity: 0;
    transition: transform .18s ease, opacity .18s ease;
}
.overlay.show .modal-popup {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.modal-popup .banner{
    width: 100%; height: 250px;
    background-image: url("../../../assets/img/banner/popup-banner.png");
    background-size: cover;
    background-position: 50% 50%;
    border-radius: 16px 16px 0 0;
    margin-bottom: 16px;
}

.modal-popup header { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.modal-popup header h2 { margin:0; font-size: 1.25rem; }
.badge {
    font-size:.75rem; padding:4px 8px; border-radius:999px;
    background:#eef2ff; color:#3730a3; font-weight:600;
}
.reason { font-size:.8rem; color:#6b7280; }

.modal-popup p { margin: 10px 0 0; color:#374151; line-height:1.5; }

.actions { display:flex; gap:10px; margin-top:18px; flex-wrap:wrap; padding: 10px;}
/* Botões com ícone + texto alinhados */
.actions .btn{
    display: inline-flex;           /* coloca ícone e texto lado a lado */
    align-items: center;            /* alinha verticalmente no centro */
    gap: 8px;                       /* espaço entre ícone e texto */
    line-height: 1;                 /* evita salto vertical estranho */
}

/* Ícones (Boxicons) */
.actions .btn i{
    font-size: 22px;                /* tamanho do ícone */
    line-height: 1;                 /* corrige baseline */
    color: currentColor;            /* herda a cor do botão */
}

/* Cores dos botões já existentes */
.btn.primary{ background:#111827; color:#fff; }
.btn.ghost{ background:#f3f4f6; color:#111827; }

/* Acessibilidade: esconder do fluxo ao ocultar */
.overlay[aria-hidden="true"] { display:none !important; }