/* Estilos exclusivos da página whatsapp_chatbot.php */

.dns-wrap{
    width:100%;
    max-width:none;
    margin:0;
    padding:0 18px;
}
.dns-card{
    border-radius:18px;
    overflow:hidden;
    width:100%;
    margin-bottom:18px;
}
.dns-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:18px 22px;
}
.dns-title{
    display:flex;
    align-items:center;
    gap:14px;
}
.dns-title .ic{
    width:44px;
    height:44px;
    min-width:44px;
    border-radius:14px;
    background:rgba(25,135,84,.10);
    border:1px solid rgba(25,135,84,.20);
    display:flex;
    align-items:center;
    justify-content:center;
}
.dns-title .ic i{
    font-size:24px;
    color:#198754;
}
.dns-title h5{
    margin:0;
    font-weight:900;
}
.dns-title span{
    display:block;
    margin-top:3px;
    font-size:13px;
    color:rgba(255,255,255,.55);
}
.badge-soft{
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:8px 12px;
    border-radius:999px;
    background:rgba(25,135,84,.10);
    border:1px solid rgba(25,135,84,.20);
    color:#198754;
    font-weight:900;
    white-space:nowrap;
}
.input-radius{
    border-radius:14px !important;
    min-height:48px;
}
.save-btn{
    border-radius:14px;
    min-height:46px;
    font-weight:900;
    padding-left:22px;
    padding-right:22px;
}
.info-box{
    background:rgba(0,0,0,.03);
    border:1px solid rgba(0,0,0,.08);
    border-radius:14px;
    padding:12px 14px;
    font-weight:700;
}
.tutorial-list{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px;
}
.tutorial-step{
    background:rgba(0,0,0,.03);
    border:1px solid rgba(0,0,0,.08);
    border-radius:16px;
    padding:14px;
}
.tutorial-step .num{
    width:32px;
    height:32px;
    border-radius:999px;
    background:rgba(25,135,84,.12);
    border:1px solid rgba(25,135,84,.22);
    color:#198754;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:1000;
    margin-bottom:10px;
}
.tutorial-step strong{
    display:block;
    font-weight:1000;
    margin-bottom:4px;
}
.tutorial-step span{
    display:block;
    font-size:13px;
    color:rgba(255,255,255,.58);
}
.alert{
    border-radius:14px;
}
@media(max-width:991px){
    .tutorial-list{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}
@media(max-width:575px){
    .dns-wrap{
        padding:0 8px;
    }
    .dns-header{
        align-items:flex-start;
        padding:16px;
    }
    .dns-title .ic{
        width:40px;
        height:40px;
        min-width:40px;
    }
    .dns-title .ic i{
        font-size:22px;
    }
    .dns-title h5{
        font-size:18px;
    }
    .badge-soft{
        padding:7px 10px;
        font-size:12px;
    }
    .tutorial-list{
        grid-template-columns:1fr;
    }
    .save-btn{
        width:100%;
    }
}
.dns-title span,
.tutorial-step span,
.text-muted,
.info-box,
.info-box strong,
.info-box a,
.alert,
.form-label,
small,
.dns-card,
.dns-card .card-body,
.tutorial-step,
.tutorial-step strong {
    color: #111 !important;
}

.dns-title h5,
.tutorial-step .num,
label,
strong {
    color: #000 !important;
}

.badge-soft {
    color: #198754 !important;
}

input::placeholder {
    color: #555 !important;
    opacity: 1 !important;
}
