/* kayankdialog.css */

/* Reset básico para evitar conflitos */
.kayankdialog-backdrop *,
.kayankdialog-backdrop *::before,
.kayankdialog-backdrop *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* 1. Backdrop (Fundo escuro/Overlay) */
.kayankdialog-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw; /* Viewport width */
    height: 100vh; /* Viewport height */
    background-color: rgba(0, 0, 0, 0.7); /* Fundo semi-transparente */
    display: flex; /* Para centralizar o popup */
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center; /* Centraliza verticalmente */
    z-index: 10000; /* Garante que fique acima de tudo */
    opacity: 0; /* Começa invisível para animação */
    transition: opacity 0.2s ease-out; /* Transição para fade-in/out */
    overflow: hidden; /* Evita scroll no backdrop */
}

.kayankdialog-backdrop.kayankdialog-show {
    opacity: 1;
}

/* Estilo para o body quando o modal está aberto (para desabilitar scroll) */
body.kayankdialog-open {
    overflow: hidden;
    /* Adiciona padding para compensar a barra de rolagem e evitar "jump" na tela */
    padding-right: var(--kayankdialog-scrollbar-padding, 0px); 
}

/* Desabilita a seleção de texto durante o arrasto */
body.kayankdialog-no-select {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}
.kayankdialog-popup.kayankdialog-dragging {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}


/* 2. Popup (A caixa do modal) */
.kayankdialog-popup {
    background-color: #f0f0f0; /* Fundo cinza claro, similar ao Win11 */
    color: #333; /* Texto padrão */
    border-radius: 8px; /* Bordas arredondadas */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2), 0 0 15px rgba(0, 0, 0, 0.1); /* Sombra sutil */
    width: 100%;
    max-width: 500px; /* Largura máxima, ajustável (ajustei para 500px como no seu JS) */
    padding: 20px; /* Preenchimento interno geral */
    display: flex;
    flex-direction: column;
    
    /* Configurações para o arrasto: o JS vai setar position: absolute e left/top */
    /* Cursor padrão aqui, será alterado via JS se draggable for true */
    cursor: default; 
    will-change: transform, top, left; /* Otimização para transformações CSS */

    /* Animação inicial de entrada do popup */
    opacity: 0;
    transform: scale(0.9); /* Começa menor para efeito de escala */
    transition: opacity 0.2s ease-out, transform 0.2s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.kayankdialog-popup.kayankdialog-show {
    opacity: 1;
    transform: scale(1);
}

/* 3. Header */
.kayankdialog-header {
    display: flex;
    align-items: center;
    margin-bottom: 15px; /* Espaço abaixo do header */
    position: relative;
    /* Cursor para arrastar: definido via JS agora */
    cursor: default; 
}

/* 4. Ícone (AGORA COM TAG <i> INTERNA, O CSS APLICA A MÁSCARA DIRETO NA <i>) */
.kayankdialog-icon {
    width: 32px; /* Tamanho do contêiner do ícone */
    height: 32px;
    margin-right: 15px;
    display: flex; /* Para centralizar o <i> dentro */
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

/* Estilo BASE para a tag <i> que contém o ícone SVG como máscara */
.kayankdialog-icon i {
    display: block; /* Garante que o elemento ocupe o espaço */
    width: 100%;
    height: 100%;
    
    /* Propriedades de máscara - aplicadas aqui para todos os ícones */
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
}

/* Cores e máscaras específicas para cada tipo de ícone */
/* A `mask-image` define a forma do ícone, e `background-color` define a cor. */
/* Estes `mask-image` URLs são gerados a partir de SVGs monocromáticos e OTIMIZADOS. */

.kayankdialog-icon-success {
    /* SVG: Círculo e V (checkmark) - Monocromático para mask-image */
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm109.3 160.7l-124.7 124.7c-4.6 4.6-12.3 4.6-16.9 0l-55.7-55.7c-4.6-4.6-4.6-12.3 0-16.9l16.9-16.9c4.6-4.6 12.3-4.6 16.9 0l38.7 38.7 107.7-107.7c4.6-4.6 12.3-4.6 16.9 0l16.9 16.9c4.6 4.6 4.6 12.3 0 16.9z"/></svg>');
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm109.3 160.7l-124.7 124.7c-4.6 4.6-12.3 4.6-16.9 0l-55.7-55.7c-4.6-4.6-4.6-12.3 0-16.9l16.9-16.9c4.6-4.6 12.3-4.6 16.9 0l38.7 38.7 107.7-107.7c4.6-4.6 12.3-4.6 16.9 0l16.9 16.9c4.6 4.6 4.6 12.3 0 16.9z"/></svg>');
    background-color: #28a745; /* Verde */
}
.kayankdialog-icon-error {
    /* SVG: Círculo e X - Monocromático para mask-image */
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L308.7 402.5c-4.7 4.7-12.3 4.7-17 0l-73.6-73.6-73.6 73.6c-4.7 4.7-4.7 12.3 0-17l-17-17c-4.7-4.7-4.7-12.3 0-17l73.6-73.6-73.6-73.6c-4.7-4.7-4.7-12.3 0-17l17-17c4.7-4.7 12.3-4.7 17 0l73.6 73.6 73.6-73.6c4.7-4.7 12.3-4.7 17 0l17 17c4.7 4.7 4.7 12.3 0 17l-73.6 73.6 73.6 73.6z"/></svg>');
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L308.7 402.5c-4.7 4.7-12.3 4.7-17 0l-73.6-73.6-73.6 73.6c-4.7 4.7-4.7 12.3 0-17l-17-17c-4.7-4.7-4.7-12.3 0-17l73.6-73.6-73.6-73.6c-4.7-4.7-4.7-12.3 0-17l17-17c4.7-4.7 12.3-4.7 17 0l73.6 73.6 73.6-73.6c4.7-4.7 12.3-4.7 17 0l17 17c4.7 4.7 4.7 12.3 0 17l-73.6 73.6 73.6 73.6z"/></svg>');
    background-color: #dc3545; /* Vermelho */
}
.kayankdialog-icon-warning {
    /* SVG: Triângulo com exclamação - Monocromático para mask-image */
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M569.517 440.013C587.975 472.4 564.846 512 527.999 512H48.003c-36.845 0-59.948-39.601-41.517-72.001L255.485 24.001c18.39-32.391 64.017-32.391 82.407 0l231.625 416.012zM288 362c-18 0-32-14-32-32s14-32 32-32 32 14 32 32-14 32-32 32zM288 298v-130c0-9-7-16-16-16s-16 7-16 16v130c0 9 7 16 16 16s16-7 16-16z"/></svg>');
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M569.517 440.013C587.975 472.4 564.846 512 527.999 512H48.003c-36.845 0-59.948-39.601-41.517-72.001L255.485 24.001c18.39-32.391 64.017-32.391 82.407 0l231.625 416.012zM288 362c-18 0-32-14-32-32s14-32 32-32 32 14 32 32-14 32-32 32zM288 298v-130c0-9-7-16-16-16s-16 7-16 16v130c0 9 7 16 16 16s16-7 16-16z"/></svg>');
    background-color: #ffc107; /* Amarelo/Laranja */
}
.kayankdialog-icon-info {
    /* SVG: Círculo com i - Monocromático para mask-image */
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 8C119.034 8 8 119.034 8 256s111.034 248 248 248s248-111.034 248-248S392.966 8 256 8zm0 160a24 24 0 0 1 24 24v176a24 24 0 0 1-48 0V192a24 24 0 0 1 24-24zm0-96a36 36 0 1 1 0 72 36 36 0 0 1 0-72z"/></svg>');
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 8C119.034 8 8 119.034 8 256s111.034 248 248 248s248-111.034 248-248S392.966 8 256 8zm0 160a24 24 0 0 1 24 24v176a24 24 0 0 1-48 0V192a24 24 0 0 1 24-24zm0-96a36 36 0 1 1 0 72 36 36 0 0 1 0-72z"/></svg>');
    background-color: #17a2b8; /* Azul claro */
}
.kayankdialog-icon-question {
    /* SEU SVG de question, mas MONOCROMÁTICO para mask-image */
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M504 256c0 137-111 248-248 248S8 393 8 256C8 119.1 119 8 256 8s248 111.1 248 248zM262.7 90c-54.5 0-89.3 23-116.5 63.8-3.5 5.3-2.4 12.4 2.7 16.3l34.7 26.3c5.2 3.9 12.6 3 16.7-2.1 17.9-22.7 30.1-35.8 57.3-35.8 20.4 0 45.7 13.1 45.7 33 0 15-12.4 22.7-32.5 34C247.1 238.5 216 254.9 216 296v4c0 6.6 5.4 12 12 12h56c6.6 0 12-5.4 12-12v-1.3c0-28.5 83.2-29.6 83.2-106.7 0-58-60.2-102-116.5-102zM256 338c-25.4 0-46 20.6-46 46 0 25.4 20.6 46 46 46s46-20.6 46-46c0-25.4-20.6-46-46-46z"/></svg>');
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M504 256c0 137-111 248-248 248S8 393 8 256C8 119.1 119 8 256 8s248 111.1 248 248zM262.7 90c-54.5 0-89.3 23-116.5 63.8-3.5 5.3-2.4 12.4 2.7 16.3l34.7 26.3c5.2 3.9 12.6 3 16.7-2.1 17.9-22.7 30.1-35.8 57.3-35.8 20.4 0 45.7 13.1 45.7 33 0 15-12.4 22.7-32.5 34C247.1 238.5 216 254.9 216 296v4c0 6.6 5.4 12 12 12h56c6.6 0 12-5.4 12-12v-1.3c0-28.5 83.2-29.6 83.2-106.7 0-58-60.2-102-116.5-102zM256 338c-25.4 0-46 20.6-46 46 0 25.4 20.6 46 46 46s46-20.6 46-46c0-25.4-20.6-46-46-46z"/></svg>');
    background-color: #2f99e9; /* Cor do ícone de question (azul) */
}


.kayankdialog-title {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Fonte do Win11 */
    font-size: 1.5em; /* Tamanho do título */
    font-weight: 600; /* Semibold */
    color: #2c2c2c; /* Cor do título */
    flex-grow: 1; /* Permite que o título ocupe o espaço restante */
}

/* 5. Botão de Fechar (X) */
.kayankdialog-close-button {
    position: absolute;
    top: 5px; /* Ajuste a posição para um pouco mais centralizado */
    right: 5px; /* Ajuste a posição para um pouco mais centralizado */
    background: none;
    border: none;
    font-size: 1.5em; /* Tamanho do 'X' (ajustado ligeiramente para ser mais discreto) */
    color: #888; /* Cor do 'X' */
    cursor: pointer;
    padding: 8px; /* Aumenta o padding para uma área de clique maior sem expandir o visual */
    border-radius: 4px; /* Pequeno border-radius para um toque suave no hover, mas não redondo */
    line-height: 1; /* Garante que o 'X' fique bem alinhado verticalmente */
    transition: color 0.15s ease, background-color 0.15s ease;
    z-index: 1; /* Para garantir que seja clicável mesmo com arrasto */
}

.kayankdialog-close-button:hover {
    color: #333;
    background-color: rgba(0, 0, 0, 0.08); /* Fundo sutil cinza claro no hover */
}

/* 6. Conteúdo (Texto/HTML) */
.kayankdialog-content {
    margin-bottom: 20px; /* Espaço abaixo do conteúdo */
}

.kayankdialog-html-container {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1em;
    line-height: 1.6;
    color: #555; /* Cor do texto do corpo */
}

/* 7. Ações (Botões) */
.kayankdialog-actions {
    display: flex;
    justify-content: flex-end; /* Botões alinhados à direita */
    gap: 10px; /* Espaço entre os botões */
    margin-top: 15px; /* Espaço acima dos botões */
}

.kayankdialog-button {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1em;
    font-weight: 500; /* Médio */
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* Estilo para o botão principal (Confirmar) */
.kayankdialog-button.kayankdialog-confirm-button {
    background-color: #0078d4; /* Azul padrão do Win11 para ações primárias */
    color: #fff;
}

.kayankdialog-button.kayankdialog-confirm-button:hover {
    background-color: #005bb5; /* Azul mais escuro no hover */
}

/* Estilo para botões secundários (Cancelar, Negar) */
.kayankdialog-button.kayankdialog-cancel-button,
.kayankdialog-button.kayankdialog-deny-button {
    background-color: #ffffff; /* Cinza claro para botões secundários */
    color: #555;
    border: 1px solid #ccc;
}

.kayankdialog-button.kayankdialog-cancel-button:hover,
.kayankdialog-button.kayankdialog-deny-button:hover {
    background-color: #f0f0f0;
    border-color: #bbb;
}

/* 8. Footer */
.kayankdialog-footer {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 0.85em;
    color: #888;
    margin-top: 15px;
    text-align: right;
    padding-top: 10px;
    border-top: 1px solid #eee;
}

/* Responsividade básica */
@media (max-width: 600px) {
    .kayankdialog-popup {
        max-width: 90%; /* Ocupa mais espaço em telas menores */
        margin: 0 15px; /* Margem nas laterais */
    }
}