/* =========================================================
   MUSICALWORLD — MODAL DE SAÍDA

   Arquivo:
   css/components/ModalSaida.css

   Responsabilidade:

   - Estilizar exclusivamente o ModalSaida.
   - Utilizar o elemento nativo <dialog>.
   - Permitir que showModal() coloque o componente no Top Layer.
   - Manter o modal acima de todo o index.
   - Impedir interferência no layout da aplicação.
   - Estilizar overlay, conteúdo, ícone, textos e botões.
   - Manter comportamento responsivo.

   IMPORTANTE:

   Este CSS não altera:

   - body
   - html
   - header
   - feed
   - cards
   - menus
   - botões externos
   - containers externos

   O posicionamento do modal é controlado pelo
   Top Layer nativo do elemento <dialog>.
   ========================================================= */


/* =========================================================
   1. DIALOG — CAMADA PRINCIPAL
   ========================================================= */

dialog.modal-saida {

    /*
     * O dialog ocupa a viewport inteira.
     */

    position: fixed;

    inset: 0;

    width: 100vw;
    height: 100vh;

    max-width: none;
    max-height: none;

    min-width: 0;
    min-height: 0;

    margin: 0;
    padding: 24px;

    box-sizing: border-box;

    /*
     * Remove a aparência padrão do navegador.
     */

    border: none;

    outline: none;

    /*
     * O fundo do próprio dialog é transparente.
     * O fundo escuro será controlado pelo ::backdrop.
     */

    background: transparent;

    /*
     * O conteúdo do dialog é centralizado.
     */

    display: flex;

    align-items: center;
    justify-content: center;

    flex-direction: column;

    /*
     * Não permite que o próprio dialog gere
     * uma barra de rolagem.
     */

    overflow: hidden;

    /*
     * Estado inicial da animação.
     */

    opacity: 0;

    visibility: hidden;

    /*
     * O dialog aberto através de showModal()
     * já está no Top Layer.
     *
     * O z-index não precisa ser gigantesco.
     */

    z-index: auto;

    transition:
        opacity 180ms ease,
        visibility 180ms ease;

}


/* =========================================================
   2. DIALOG ABERTO
   ========================================================= */

dialog.modal-saida.aberto {

    opacity: 1;

    visibility: visible;

}


/* =========================================================
   3. BACKDROP NATIVO DO DIALOG
   ========================================================= */

dialog.modal-saida::backdrop {

    /*
     * O ::backdrop pertence ao Top Layer do dialog.
     *
     * Ele cobre a página inteira sem alterar
     * o layout do index.
     */

    background:
        rgba(
            15,
            23,
            42,
            0.52
        );

    backdrop-filter:
        blur(4px);

    -webkit-backdrop-filter:
        blur(4px);

}


/* =========================================================
   4. OVERLAY INTERNO
   =========================================================

   O JavaScript mantém este elemento porque ele é usado
   para detectar o clique fora do cartão.

   A aparência do fundo, porém, é controlada pelo
   ::backdrop acima.
========================================================= */

dialog.modal-saida .modal-saida-overlay {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    box-sizing: border-box;

    background: transparent;

    border: none;

    z-index: 0;

    pointer-events: auto;

}


/* =========================================================
   5. CONTEÚDO PRINCIPAL
   ========================================================= */

dialog.modal-saida .modal-saida-conteudo {

    position: relative;

    z-index: 1;

    width: min(
        430px,
        calc(100vw - 48px)
    );

    max-width: 430px;

    min-width: 0;

    height: auto;

    max-height: calc(
        100vh - 48px
    );

    margin: 0;

    padding: 28px;

    box-sizing: border-box;

    /*
     * O cartão é um flex independente.
     */

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    flex: 0 0 auto;

    /*
     * Aparência.
     */

    background: #ffffff;

    border: 1px solid rgba(
        15,
        23,
        42,
        0.08
    );

    border-radius: 24px;

    box-shadow:
        0 24px 70px rgba(
            15,
            23,
            42,
            0.22
        );

    text-align: center;

    overflow: auto;

    /*
     * Estado inicial da animação.
     */

    transform:
        translateY(12px)
        scale(0.97);

    opacity: 0;

    transition:
        transform 180ms ease,
        opacity 180ms ease;

}


/* =========================================================
   6. CONTEÚDO QUANDO O MODAL ESTÁ ABERTO
   ========================================================= */

dialog.modal-saida.aberto
.modal-saida-conteudo {

    transform:
        translateY(0)
        scale(1);

    opacity: 1;

}


/* =========================================================
   7. ÍCONE
   ========================================================= */

dialog.modal-saida .modal-saida-icone {

    width: 54px;
    height: 54px;

    min-width: 54px;
    min-height: 54px;

    max-width: 54px;
    max-height: 54px;

    margin: 0 0 18px;
    padding: 0;

    box-sizing: border-box;

    display: flex;

    align-items: center;
    justify-content: center;

    flex: 0 0 54px;

    border-radius: 50%;

    background:
        rgba(
            109,
            74,
            255,
            0.10
        );

    color: #6d4aff;

}


/* =========================================================
   8. SVG DO ÍCONE
   ========================================================= */

dialog.modal-saida
.modal-saida-icone
svg {

    display: block;

    width: 26px;
    height: 26px;

    min-width: 26px;
    min-height: 26px;

    max-width: 26px;
    max-height: 26px;

    margin: 0;
    padding: 0;

    box-sizing: border-box;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;

    stroke-linejoin: round;

}


/* =========================================================
   9. ÍCONE DE ERRO
   ========================================================= */

dialog.modal-saida
.modal-saida-icone.erro {

    background:
        rgba(
            239,
            68,
            68,
            0.10
        );

    color: #dc2626;

}


/* =========================================================
   10. ÁREA DE TEXTO
   ========================================================= */

dialog.modal-saida .modal-saida-texto {

    width: 100%;

    margin: 0;
    padding: 0;

    box-sizing: border-box;

    text-align: center;

}


/* =========================================================
   11. TÍTULO
   ========================================================= */

dialog.modal-saida
.modal-saida-texto
h2 {

    margin: 0;
    padding: 0;

    font-family:
        "Sora",
        sans-serif;

    font-size: 20px;

    line-height: 1.35;

    font-weight: 600;

    color: #172033;

}


/* =========================================================
   12. DESCRIÇÃO
   ========================================================= */

dialog.modal-saida
.modal-saida-texto
p {

    margin: 10px 0 0;
    padding: 0;

    font-family:
        "Manrope",
        sans-serif;

    font-size: 14px;

    line-height: 1.6;

    font-weight: 400;

    color: #667085;

}


/* =========================================================
   13. ÁREA DOS BOTÕES
   ========================================================= */

dialog.modal-saida
.modal-saida-acoes {

    width: 100%;

    margin: 24px 0 0;
    padding: 0;

    box-sizing: border-box;

    display: flex;

    flex-direction: row;

    align-items: center;
    justify-content: center;

    gap: 10px;

}


/* =========================================================
   14. BOTÕES
   ========================================================= */

dialog.modal-saida
.modal-saida-acoes
button {

    appearance: none;
    -webkit-appearance: none;

    position: relative;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    flex: 1 1 0;

    width: auto;

    min-width: 0;

    max-width: none;

    height: 46px;

    margin: 0;
    padding: 0 18px;

    box-sizing: border-box;

    border-radius: 12px;

    border: 1px solid transparent;

    font-family:
        "Manrope",
        sans-serif;

    font-size: 14px;

    line-height: 1;

    font-weight: 600;

    cursor: pointer;

    outline: none;

    transition:
        background-color 160ms ease,
        border-color 160ms ease,
        color 160ms ease,
        transform 160ms ease,
        box-shadow 160ms ease;

}


/* =========================================================
   15. BOTÃO CANCELAR
   ========================================================= */

dialog.modal-saida
.modal-saida-acoes
.modal-saida-cancelar {

    background: #ffffff;

    border-color:
        #d9dee8;

    color: #344054;

}


/* =========================================================
   16. HOVER — CANCELAR
   ========================================================= */

dialog.modal-saida
.modal-saida-acoes
.modal-saida-cancelar:hover {

    background: #f8fafc;

    border-color:
        #cbd5e1;

}


/* =========================================================
   17. BOTÃO CONFIRMAR
   ========================================================= */

dialog.modal-saida
.modal-saida-acoes
.modal-saida-confirmar {

    background: #6d4aff;

    border-color: #6d4aff;

    color: #ffffff;

    box-shadow:
        0 8px 18px rgba(
            109,
            74,
            255,
            0.20
        );

}


/* =========================================================
   18. HOVER — CONFIRMAR
   ========================================================= */

dialog.modal-saida
.modal-saida-acoes
.modal-saida-confirmar:hover {

    background: #5d3de0;

    border-color: #5d3de0;

    transform:
        translateY(-1px);

    box-shadow:
        0 10px 22px rgba(
            109,
            74,
            255,
            0.26
        );

}


/* =========================================================
   19. ACTIVE
   ========================================================= */

dialog.modal-saida
.modal-saida-acoes
button:active {

    transform:
        translateY(0)
        scale(0.98);

}


/* =========================================================
   20. FOCO
   ========================================================= */

dialog.modal-saida
.modal-saida-acoes
button:focus-visible {

    outline:
        3px solid
        rgba(
            109,
            74,
            255,
            0.25
        );

    outline-offset: 2px;

}


/* =========================================================
   21. CELULAR
   ========================================================= */

@media (max-width: 600px) {

    dialog.modal-saida {

        padding: 18px;

    }


    dialog.modal-saida
    .modal-saida-conteudo {

        width: calc(
            100vw - 36px
        );

        max-width: 430px;

        padding: 24px;

        border-radius: 22px;

    }

}


/* =========================================================
   22. CELULAR PEQUENO
   ========================================================= */

@media (max-width: 380px) {

    dialog.modal-saida {

        padding: 14px;

    }


    dialog.modal-saida
    .modal-saida-conteudo {

        width: calc(
            100vw - 28px
        );

        padding: 22px 18px;

        border-radius: 20px;

    }


    dialog.modal-saida
    .modal-saida-texto
    h2 {

        font-size: 18px;

    }


    dialog.modal-saida
    .modal-saida-texto
    p {

        font-size: 13px;

    }


    dialog.modal-saida
    .modal-saida-acoes {

        gap: 8px;

    }


    dialog.modal-saida
    .modal-saida-acoes
    button {

        height: 44px;

        padding: 0 12px;

        font-size: 13px;

    }

}


/* =========================================================
   23. REDUÇÃO DE MOVIMENTO
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    dialog.modal-saida,
    dialog.modal-saida
    .modal-saida-conteudo,
    dialog.modal-saida
    .modal-saida-acoes
    button {

        transition: none;

    }

}