/*=========================================================
    HELP MED CWB
    Página Pública de Doação de Medicamentos
=========================================================*/


/*=========================================================
    VARIÁVEIS
=========================================================*/

:root{

    --verde-escuro:#170346;
    --verde-principal:#060775;
    --verde-hover:#170346;
    --verde-claro:#e7e7f3;

    --dourado:#d4a017;
    --dourado-claro:#fff5d7;

    --vermelho:#a93226;
    --vermelho-claro:#fdecea;

    --cinza-fundo:#f4f4f7;
    --cinza-borda:#d7d7e1;
    --cinza-texto:#657169;

    --branco:#ffffff;

    --sombra:
        0 12px 34px rgba(22,22,70,.09);

}


/*=========================================================
    CONFIGURAÇÕES GERAIS
=========================================================*/

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    min-height:100vh;

    font-family:'Poppins',sans-serif;

    background:var(--cinza-fundo);

    color:#2d2d41;

}

button,
input,
select,
textarea{

    font-family:'Poppins',sans-serif;

}

button{

    cursor:pointer;

}

button:disabled{

    cursor:not-allowed;

    opacity:.6;

}

.container-doacao{

    width:min(1180px, calc(100% - 40px));

    margin:0 auto;

}


/*=========================================================
    CABEÇALHO — não mora mais aqui

    Ele vivia NESTE arquivo, e por isso login.html e
    minha-conta.html, que usam o mesmo markup sem carregar o
    doar.css, renderizavam o logo em tamanho original dentro
    de um header fixo cobrindo a tela (revisão de 2026-09-03).
    A correção da época copiou o bloco para o style.css mas
    NÃO apagou daqui — e como o doar.css carrega depois, esta
    cópia continuava vencendo. Em 2026-09-15 o original saiu:
    o cabeçalho é do site, e tem um lugar só.
=========================================================*/

/*=========================================================
    APRESENTAÇÃO
=========================================================*/

.apresentacao-doacao{

    padding:72px 0 64px;

    background:
        linear-gradient(
            135deg,
            #170346 0%,
            #170346 65%,
            #170346 100%
        );

    color:#ffffff;

}

.apresentacao-doacao .container-doacao{

    display:grid;

    grid-template-columns:
        minmax(0,1.55fr)
        minmax(300px,.75fr);

    align-items:center;

    gap:55px;

}

.texto-apresentacao span{

    display:inline-block;

    margin-bottom:15px;

    color:#f2ca5b;

    font-size:13px;
    font-weight:700;

    letter-spacing:2.5px;

}

.texto-apresentacao h1{

    max-width:720px;

    font-size:45px;
    line-height:1.2;

    letter-spacing:-1px;

}

.texto-apresentacao p{

    max-width:720px;

    margin-top:22px;

    color:#dcdce9;

    font-size:17px;
    line-height:30px;

}

.aviso-doacao{

    padding:27px;

    background:rgba(255,255,255,.1);

    border:1px solid rgba(255,255,255,.16);
    border-left:5px solid var(--dourado);

    border-radius:16px;

    backdrop-filter:blur(6px);

}

.aviso-doacao strong{

    display:block;

    margin-bottom:10px;

    color:#ffffff;

    font-size:18px;

}

.aviso-doacao p{

    color:#dddde9;

    font-size:14px;
    line-height:25px;

}


/*=========================================================
    CONTEÚDO PRINCIPAL
=========================================================*/

.secao-formulario-doacao{

    padding:55px 0 75px;

}

.grade-doacao{

    display:grid;

    grid-template-columns:
        minmax(0,1.65fr)
        minmax(320px,.85fr);

    align-items:start;

    gap:28px;

}


/*=========================================================
    COLUNA DO FORMULÁRIO
=========================================================*/

.coluna-formulario{

    padding:34px;

    background:var(--branco);

    border-radius:20px;

    box-shadow:var(--sombra);

}

.titulo-etapa{

    display:flex;
    align-items:flex-start;

    gap:15px;

    margin-bottom:28px;

}

.titulo-etapa.etapa-medicamento{

    margin-top:42px;
    padding-top:35px;

    border-top:1px solid #e4e4eb;

}

.numero-etapa{

    width:40px;
    height:40px;

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

    flex-shrink:0;

    border-radius:50%;

    background:var(--verde-principal);

    color:#ffffff;

    font-size:17px;
    font-weight:700;

}

.titulo-etapa h2,
.titulo-resumo h2{

    color:#170346;

    font-size:23px;
    line-height:1.3;

}

.titulo-etapa p,
.titulo-resumo p{

    margin-top:6px;

    color:var(--cinza-texto);

    font-size:14px;
    line-height:23px;

}


/*=========================================================
    FORMULÁRIO
=========================================================*/

.grade-formulario-doacao{

    display:grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:20px;

}

.campo-doacao{

    display:flex;
    flex-direction:column;

    gap:8px;

}

.campo-completo{

    grid-column:span 2;

}

.campo-doacao label{

    color:#303048;

    font-size:14px;
    font-weight:600;

}

.campo-doacao input,
.campo-doacao select,
.campo-doacao textarea{

    width:100%;

    padding:13px 14px;

    border:1px solid var(--cinza-borda);
    border-radius:9px;

    background:#ffffff;

    color:#424250;

    font-size:14px;

    outline:none;

    transition:
        border-color .25s ease,
        box-shadow .25s ease;

}

.campo-doacao textarea{

    min-height:120px;

    resize:vertical;

    line-height:23px;

}

.campo-doacao input:focus,
.campo-doacao select:focus,
.campo-doacao textarea:focus{

    border-color:var(--verde-principal);

    box-shadow:
        0 0 0 3px rgba(6,7,117,.11);

}

.campo-doacao input::placeholder,
.campo-doacao textarea::placeholder{

    color:#646f68;

}


/*=========================================================
    BOTÃO ADICIONAR MEDICAMENTO
=========================================================*/

.btn-adicionar-doacao{

    width:100%;

    margin-top:24px;
    padding:15px 20px;

    border:2px dashed #8686aa;
    border-radius:11px;

    background:#f5faf7;

    color:var(--verde-principal);

    font-size:15px;
    font-weight:700;

    transition:.25s;

}

.btn-adicionar-doacao:hover{

    border-style:solid;
    border-color:var(--verde-principal);

    background:var(--verde-claro);

    transform:translateY(-2px);

}


/*=========================================================
    RESUMO DA DOAÇÃO
=========================================================*/

.resumo-doacao{

    position:sticky;

    top:110px;

    padding:28px;

    background:var(--branco);

    border-radius:20px;

    box-shadow:var(--sombra);

}

.titulo-resumo{

    display:flex;
    align-items:flex-start;

    gap:14px;

    margin-bottom:24px;

}

.lista-itens-doacao{

    display:flex;
    flex-direction:column;

    gap:13px;

    min-height:100px;

}

.lista-vazia{

    padding:26px 18px;

    background:#f7f9f8;

    border:1px dashed #cbcbd6;
    border-radius:11px;

    color:#646f68;

    font-size:14px;

    text-align:center;

}

.item-doacao{

    padding:16px;

    background:#f8faf8;

    border:1px solid #e1e1e8;
    border-radius:12px;

}

.item-doacao-cabecalho{

    display:flex;
    align-items:flex-start;
    justify-content:space-between;

    gap:15px;

}

.item-doacao h3{

    color:#170346;

    font-size:15px;
    line-height:22px;

}

.item-doacao p{

    margin-top:5px;

    color:#69746d;

    font-size:13px;
    line-height:21px;

}

.item-doacao-dados{

    display:grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:8px;

    margin-top:13px;

}

.item-doacao-dados span{

    padding:7px 9px;

    background:#ffffff;

    border-radius:7px;

    color:#657169;

    font-size:12px;

}

.btn-remover-doacao{

    flex-shrink:0;

    padding:6px 9px;

    border:none;
    border-radius:7px;

    background:var(--vermelho-claro);

    color:var(--vermelho);

    font-size:12px;
    font-weight:600;

    transition:.2s;

}

.btn-remover-doacao:hover{

    background:#f4d4cf;

}


/*=========================================================
    TOTAL
=========================================================*/

.total-doacao{

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:20px;

    margin-top:22px;
    padding:18px 0;

    border-top:1px solid #e1e1e8;
    border-bottom:1px solid #e1e1e8;

}

.total-doacao span{

    color:#526058;

    font-size:15px;
    font-weight:500;

}

.total-doacao strong{

    color:var(--verde-principal);

    font-size:25px;

}


/*=========================================================
    TERMO DE CONFIRMAÇÃO
=========================================================*/

.termo-doacao{

    display:flex;
    align-items:flex-start;

    gap:11px;

    margin-top:20px;

    cursor:pointer;

}

.termo-doacao input{

    width:19px;
    height:19px;

    flex-shrink:0;

    margin-top:3px;

    accent-color:var(--verde-principal);

}

.termo-doacao span{

    color:#59665e;

    font-size:13px;
    line-height:22px;

}


/*=========================================================
    MENSAGENS
=========================================================*/

.mensagem-doacao{

    display:none;

    margin-top:18px;
    padding:13px 15px;

    border-radius:9px;

    font-size:13px;
    line-height:21px;

}

.mensagem-doacao.erro{

    display:block;

    background:var(--vermelho-claro);

    border:1px solid #efbbb5;

    color:var(--vermelho);

}

.mensagem-doacao.sucesso{

    display:block;

    /*
        Verde de SUCESSO, escrito por extenso de proposito (2026-09-25):
        as variaveis --verde-* desta folha viraram o azul da logo, e o
        sucesso precisa continuar se lendo como sucesso -- ao lado do
        ambar e do vermelho de erro.
    */
    background:#e7f6ec;

    border:1px solid #afd8ba;

    color:#14573a;

}


/*=========================================================
    BOTÃO ENVIAR
=========================================================*/

.btn-enviar-doacao{

    width:100%;

    margin-top:18px;
    padding:15px 20px;

    border:none;
    border-radius:10px;

    background:var(--verde-principal);

    color:#ffffff;

    font-size:15px;
    font-weight:700;

    transition:.25s;

}

.btn-enviar-doacao:not(:disabled):hover{

    background:var(--verde-hover);

    transform:translateY(-2px);

    box-shadow:
        0 9px 20px rgba(6,7,117,.2);

}

.informacao-envio{

    display:block;

    margin-top:12px;

    color:#646f68;

    font-size:12px;
    line-height:20px;

    text-align:center;

}


/*=========================================================
    MODAL DE CONFIRMAÇÃO
=========================================================*/

.modal-confirmacao-doacao{

    position:fixed;

    inset:0;

    z-index:3000;

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

    padding:20px;

    background:rgba(0,0,0,.62);

    backdrop-filter:blur(5px);

    opacity:0;
    visibility:hidden;
    pointer-events:none;

    transition:
        opacity .3s ease,
        visibility .3s ease;

}

.modal-confirmacao-doacao.ativo{

    opacity:1;
    visibility:visible;
    pointer-events:auto;

}

.confirmacao-doacao-conteudo{

    width:100%;
    max-width:520px;

    padding:42px 36px;

    background:#ffffff;

    border-radius:20px;

    text-align:center;

    box-shadow:
        0 28px 70px rgba(0,0,0,.3);

    transform:
        translateY(-20px)
        scale(.98);

    transition:transform .3s ease;

}

.modal-confirmacao-doacao.ativo
.confirmacao-doacao-conteudo{

    transform:
        translateY(0)
        scale(1);

}

.icone-sucesso-doacao{

    width:76px;
    height:76px;

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

    margin:0 auto 22px;

    border-radius:50%;

    background:var(--verde-claro);

    color:var(--verde-principal);

    font-size:38px;
    font-weight:700;

}

.confirmacao-doacao-conteudo h2{

    color:#170346;

    font-size:27px;

}

.confirmacao-doacao-conteudo > p{

    margin-top:13px;

    color:#657169;

    font-size:15px;
    line-height:26px;

}

.protocolo-doacao{

    margin:25px 0;
    padding:18px;

    background:#f5f5f8;

    border:1px solid #dcdce5;
    border-radius:12px;

}

.protocolo-doacao span{

    display:block;

    color:#6e7972;

    font-size:13px;

}

.protocolo-doacao strong{

    display:block;

    margin-top:7px;

    color:var(--verde-principal);

    font-size:20px;
    letter-spacing:.5px;

}

.btn-fechar-confirmacao{

    width:100%;

    padding:14px 20px;

    border:none;
    border-radius:10px;

    background:var(--verde-principal);

    color:#ffffff;

    font-size:15px;
    font-weight:700;

    transition:.25s;

}

.btn-fechar-confirmacao:hover{

    background:var(--verde-hover);

}


/*=========================================================
    RODAPÉ
=========================================================*/

footer{

    padding:24px 20px;

    background:var(--verde-escuro);

    color:#d8d8e5;

    text-align:center;

}

footer p{

    font-size:13px;

}


/*=========================================================
    ATRIBUTO HIDDEN
=========================================================*/

[hidden]{

    display:none !important;

}


/*=========================================================
    RESPONSIVIDADE
=========================================================*/

@media(max-width:1000px){

    .apresentacao-doacao .container-doacao{

        grid-template-columns:1fr;

    }

    .aviso-doacao{

        max-width:700px;

    }

    .grade-doacao{

        grid-template-columns:1fr;

    }

    .resumo-doacao{

        position:static;

    }

}

@media(max-width:820px){




    .texto-apresentacao h1{

        font-size:37px;

    }

}

@media(max-width:650px){

    .container-doacao,

    .apresentacao-doacao{

        padding:52px 0;

    }

    .texto-apresentacao h1{

        font-size:31px;

    }

    .texto-apresentacao p{

        font-size:15px;
        line-height:27px;

    }

    .secao-formulario-doacao{

        padding:35px 0 55px;

    }

    .coluna-formulario,
    .resumo-doacao{

        padding:24px 19px;

        border-radius:15px;

    }

    .grade-formulario-doacao{

        grid-template-columns:1fr;

    }

    .campo-completo{

        grid-column:auto;

    }

    .titulo-etapa,
    .titulo-resumo{

        gap:11px;

    }

    .titulo-etapa h2,
    .titulo-resumo h2{

        font-size:20px;

    }

    .item-doacao-dados{

        grid-template-columns:1fr;

    }

    .confirmacao-doacao-conteudo{

        padding:34px 22px;

    }

}

@media(max-width:420px){


    .texto-apresentacao h1{

        font-size:28px;

    }

    .numero-etapa{

        width:36px;
        height:36px;

        font-size:15px;

    }

    .confirmacao-doacao-conteudo h2{

        font-size:23px;

    }

}