/**
 * snt-modal.css — componente ÚNICO de modal de confirmação, mesmo padrão
 * self-contained do snt-flash.css (ver web/js/snt-modal.js). Visual portado
 * do app.gimmyclues (.snt-modal-overlay/.snt-modal de lá): mesmo tamanho de
 * janela, borda, botão de fechar e botões.
 */
:root {
    --snt-modal-white:      #FFFFFF;
    --snt-modal-text:       #424242;
    --snt-modal-text-light: #6B6B6B;
    --snt-modal-border:     #cccccc;
    --snt-modal-danger:     #E10600;
    --snt-modal-danger-dark:#B80500;
    --snt-modal-primary:    #FF4D00;
    --snt-modal-primary-dark:#CC3D00;
    --snt-modal-success:    #01BE06;
    --snt-modal-success-dark:#019404;
    --snt-modal-radius:     12px;
    --snt-modal-shadow:     0 12px 40px rgba(0,0,0,0.10);
    --snt-modal-overlay-bg: rgba(0,0,0,0.5);
}

.snt-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--snt-modal-overlay-bg);
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
    box-sizing: border-box;
}

.snt-modal {
    position: relative;
    width: 100%;
    max-width: 540px;
    background: var(--snt-modal-white);
    border-radius: var(--snt-modal-radius);
    box-shadow: var(--snt-modal-shadow);
    padding: 32px;
    box-sizing: border-box;
    text-align: center;
}

/* Modal de conteúdo (Modal::begin/end): formulário alinhado à esquerda. */
.snt-modal form { text-align: left; }

.snt-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--snt-modal-border);
    font-size: 20px;
    color: var(--snt-modal-text);
    cursor: pointer;
    text-decoration: none;
}
.snt-modal-close:hover { background: var(--snt-modal-text-light); color: var(--snt-modal-white); }

.snt-modal-title {
    font-size: 24px;
    font-weight: 800;
    color: var(--snt-modal-text);
    margin: 0 0 20px;
}

.snt-modal-message {
    font-size: 15px;
    color: var(--snt-modal-text-light);
    margin-bottom: 24px;
}

.snt-modal-actions {
    display: flex;
    gap: 16px;
}

.snt-modal-btn-col {
    flex: 1 1 0;
    min-width: 0;
}

.snt-modal-btn-col button {
    width: 100%;
    border: none;
    border-radius: 8px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    color: var(--snt-modal-white);
}

.snt-modal-cancel {
    background: var(--snt-modal-border);
    color: var(--snt-modal-text);
}
.snt-modal-cancel:hover { background: var(--snt-modal-text-light); color: var(--snt-modal-white); }

.snt-modal-confirm {
    background: var(--snt-modal-primary);
}
.snt-modal-confirm:hover { background: var(--snt-modal-primary-dark); }

.snt-modal-confirm.snt-modal-confirm-danger {
    background: var(--snt-modal-danger);
}
.snt-modal-confirm.snt-modal-confirm-danger:hover { background: var(--snt-modal-danger-dark); }

.snt-modal-confirm.snt-modal-confirm-success {
    background: var(--snt-modal-success);
}
.snt-modal-confirm.snt-modal-confirm-success:hover { background: var(--snt-modal-success-dark); }

/* Lightbox de imagem ampliada (mesmo overlay do modal de confirmação, ver
   sntLightbox() em snt-modal.js) - portado do app.gimmyclues
   (.snt-character-lightbox de lá). */
.snt-lightbox {
    flex-direction: column;
    gap: 16px;
}
.snt-lightbox-img {
    max-width: 100%;
    max-height: 90vh;
    border-radius: var(--snt-modal-radius);
}