/* ==========================================================
   MAKETBUS
   Sistema de Interesse / Lista de Desejos
   ========================================================== */


/* ==========================================================
   RESUMO DO INTERESSE
   ========================================================== */

.interesse-resumo{

    display:flex;

    align-items:center;

    gap:20px;

    margin-bottom:25px;

    padding:22px;

    border-radius:12px;

    background:#f4f6f9;

}


.interesse-icone{

    display:flex;

    align-items:center;

    justify-content:center;

    width:64px;

    height:64px;

    flex-shrink:0;

    border-radius:50%;

    background:#fff;

    font-size:34px;

    line-height:1;

}


.interesse-resumo-conteudo{

    min-width:0;

}


.interesse-total{

    display:inline-block;

    margin-right:6px;

    color:#1565c0;

    font-size:30px;

    font-weight:700;

}


.interesse-resumo-conteudo > span{

    color:#444;

    font-size:16px;

}


.interesse-resumo-conteudo .form-help{

    margin-top:8px;

    margin-bottom:0;

}


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

.interesse-formulario{

    width:100%;

    margin-top:20px;

}


.interesse-caracteristica{

    margin-bottom:18px;

    padding:18px;

    border:1px solid #dfe3e8;

    border-radius:10px;

    background:#fafbfc;

}


.interesse-caracteristica-original{

    width:100%;

}


.interesse-caracteristica-original .form-check{

    margin-bottom:0;

}


.interesse-caracteristica-original .form-check span{

    line-height:1.5;

}


.interesse-caracteristica-original strong{

    color:#1f2937;

}


/* ==========================================================
   PREFERÊNCIA ALTERNATIVA
   ========================================================== */

.interesse-preferencia{

    margin-top:15px;

    padding-top:15px;

    border-top:1px solid #e5e7eb;

}


.interesse-preferencia[hidden]{

    display:none;

}


.interesse-preferencia label{

    display:block;

    margin-bottom:7px;

    color:#444;

    font-weight:600;

}


.interesse-preferencia input{

    margin-bottom:0;

}


/* ==========================================================
   ESTADO ATIVO
   ========================================================== */

.interesse-caracteristica:has(
    [data-interesse-manter]:checked
){

    background:#f8fafc;

}


.interesse-caracteristica:has(
    [data-interesse-manter]:not(:checked)
){

    border-color:#1565c0;

    background:#f7fbff;

}


/* ==========================================================
   REMOVER INTERESSE
   ========================================================== */

.interesse-remover-formulario{

    margin-top:15px;

}


/* ==========================================================
   VISITANTE
   ========================================================== */

.interesse-visitante{

    padding:20px 0 5px 0;

}


.interesse-visitante p{

    max-width:700px;

    line-height:1.6;

}


/* ==========================================================
   AJUSTES DE ALERTAS
   ========================================================== */

#interesse .alert{

    margin-top:18px;

    margin-bottom:18px;

}


/* ==========================================================
   RESPONSIVO
   ========================================================== */

@media(max-width:700px){

    .interesse-resumo{

        align-items:flex-start;

        gap:15px;

        padding:18px;

    }


    .interesse-icone{

        width:52px;

        height:52px;

        font-size:28px;

    }


    .interesse-total{

        display:block;

        margin-right:0;

        margin-bottom:4px;

        font-size:26px;

    }


    .interesse-resumo-conteudo > span{

        display:block;

        font-size:15px;

    }


    .interesse-caracteristica{

        padding:15px;

    }

}


@media(max-width:480px){

    .interesse-resumo{

        flex-direction:column;

    }


    .interesse-icone{

        margin:auto;

    }


    .interesse-resumo-conteudo{

        width:100%;

        text-align:center;

    }


    .interesse-caracteristica-original
    .form-check{

        align-items:flex-start;

    }

}


/* ==========================================================
   INTERESSE COMPACTO NO ÁLBUM PÚBLICO
   ========================================================== */

#interesse{
    margin-top:18px;
}

#interesse > h2{
    margin-bottom:10px;
}

#interesse .interesse-resumo{
    gap:12px;
    margin-bottom:12px;
    padding:12px 14px;
    border-radius:9px;
}

#interesse .interesse-icone{
    width:42px;
    height:42px;
    font-size:23px;
}

#interesse .interesse-total{
    font-size:22px;
}

#interesse .interesse-resumo-conteudo > span{
    font-size:14px;
}

#interesse .interesse-resumo-conteudo .form-help{
    margin-top:3px;
    font-size:11px;
}

#interesse .alert{
    margin:10px 0;
    padding:10px 12px;
}

.interesse-criacao{
    overflow:hidden;
    margin-top:12px;
    border:1px solid #d8e0e8;
    border-radius:9px;
    background:#fff;
}

.interesse-criacao > summary{
    display:flex;
    align-items:center;
    gap:8px 14px;
    min-height:44px;
    padding:9px 12px;
    cursor:pointer;
    list-style:none;
    user-select:none;
}

.interesse-criacao > summary::-webkit-details-marker{
    display:none;
}

.interesse-criacao > summary::before{
    content:'+';
    display:flex;
    align-items:center;
    justify-content:center;
    width:24px;
    height:24px;
    flex:0 0 24px;
    border-radius:50%;
    background:#e8eef6;
    color:#1565c0;
    font-size:18px;
    font-weight:700;
}

.interesse-criacao[open] > summary::before{
    content:'−';
}

.interesse-criacao > summary strong{
    font-size:14px;
}

.interesse-criacao > summary span{
    color:#6f7a86;
    font-size:12px;
}

.interesse-criacao[open] > summary{
    border-bottom:1px solid #e3e8ed;
    background:#f8fafc;
}

.interesse-criacao-introducao{
    padding:11px 12px 0;
    color:#66717d;
    font-size:12px;
}

.interesse-criacao .interesse-formulario{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:9px;
    margin:0;
    padding:11px 12px 12px;
}

.interesse-criacao .interesse-caracteristica{
    min-width:0;
    margin:0;
    padding:10px;
    border-radius:8px;
}

.interesse-criacao .form-check{
    align-items:flex-start;
}

.interesse-caracteristica-texto{
    display:flex;
    min-width:0;
    flex-direction:column;
    gap:2px;
}

.interesse-caracteristica-texto small{
    color:#6e7884;
    font-size:10px;
    font-weight:600;
    text-transform:uppercase;
}

.interesse-caracteristica-texto strong{
    overflow:hidden;
    font-size:13px;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.interesse-criacao .interesse-preferencia{
    margin-top:8px;
    padding-top:8px;
}

.interesse-criacao .interesse-preferencia label{
    margin-bottom:4px;
    font-size:11px;
}

.interesse-criacao .interesse-preferencia input{
    min-height:36px;
    padding:7px 9px;
    font-size:12px;
}

.interesse-criacao .form-group,
.interesse-criacao .form-acoes{
    grid-column:1 / -1;
    margin:0;
}

.interesse-criacao .form-group label{
    margin-bottom:5px;
    font-size:13px;
}

.interesse-criacao textarea{
    min-height:74px;
    padding:9px 10px;
}

.interesse-criacao .form-help{
    margin-top:3px;
    font-size:10px;
}

.interesse-criacao .form-acoes{
    padding-top:0;
}

@media(max-width:900px){
    .interesse-criacao .interesse-formulario{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }
}

@media(max-width:560px){
    .interesse-criacao > summary{
        align-items:flex-start;
        flex-wrap:wrap;
    }

    .interesse-criacao > summary span{
        width:100%;
        padding-left:38px;
        margin-top:-8px;
    }

    .interesse-criacao .interesse-formulario{
        grid-template-columns:1fr;
    }
}

/* ==========================================================
   UX03-T01 — Tema escuro: Interesse / Lista de Desejos
   ========================================================== */

html[data-theme="dark"] .interesse-resumo{
    background:var(--surface-2);
}

html[data-theme="dark"] .interesse-icone{
    background:var(--surface);
}

html[data-theme="dark"] .interesse-total{
    color:var(--brand-400);
}

html[data-theme="dark"] .interesse-resumo-conteudo > span{
    color:var(--text);
}