/*
 * V4 — Butuh Bantuan dan footer dipisahkan secara jelas.
 * PHP 7.4 compatible.
 */

/* Area Butuh Bantuan menjadi kartu tersendiri */
.support-strip{
    width:100% !important;
    margin:26px 0 28px !important;
    padding:0 !important;
    background:transparent !important;
}

.support-inner{
    width:min(1240px,calc(100% - 40px)) !important;
    min-height:78px !important;
    height:78px !important;
    margin:0 auto !important;
    padding:0 20px !important;
    display:grid !important;
    grid-template-columns:1.22fr .78fr 1.05fr 1.25fr !important;
    align-items:center !important;
    gap:0 !important;
    overflow:hidden !important;
    border-radius:16px !important;
    background:linear-gradient(100deg,#0757B8 0%,#0C68D4 100%) !important;
    box-shadow:0 12px 28px rgba(5,70,150,.18) !important;
}

/* Jangan pernah menempel ke footer */
.support-strip + .footer,
.support-strip + .exact-footer{
    margin-top:0 !important;
}

.support-agent{
    height:78px !important;
    padding-left:100px !important;
}

.support-agent img{
    width:88px !important;
    height:88px !important;
    left:5px !important;
    bottom:-2px !important;
}

.support-contact{
    min-height:46px !important;
}

/* Footer menjadi blok terpisah penuh */
.footer,
.exact-footer{
    width:100% !important;
    margin:0 !important;
    padding:28px 0 0 !important;
    border-radius:0 !important;
    background:linear-gradient(120deg,#084786 0%,#06356F 100%) !important;
    box-shadow:none !important;
}

/* Tambahkan garis ruang kosong di antara kartu bantuan dan footer */
.footer::before,
.exact-footer::before{
    content:"" !important;
    display:block !important;
    position:absolute !important;
    width:0 !important;
    height:0 !important;
}

/* Footer lebih seimbang dan tidak terlalu tinggi */
.footer-columns{
    min-height:112px !important;
    padding-bottom:18px !important;
}

.footer-rule{
    margin-top:8px !important;
}

.footer-bottom-exact{
    min-height:38px !important;
}

/* Tablet */
@media(max-width:1080px){
    .support-strip{
        margin:22px 0 24px !important;
    }

    .support-inner{
        width:min(100% - 28px,1240px) !important;
        height:auto !important;
        min-height:78px !important;
        grid-template-columns:1fr 1fr !important;
        padding:12px 16px !important;
    }

    .support-agent{
        grid-column:1/-1 !important;
        height:70px !important;
        padding-left:92px !important;
    }
}

/* Mobile */
@media(max-width:680px){
    .support-strip{
        margin:18px 0 22px !important;
    }

    .support-inner{
        width:calc(100% - 22px) !important;
        grid-template-columns:1fr !important;
        border-radius:14px !important;
        padding:12px !important;
    }

    .support-agent{
        grid-column:auto !important;
        padding-left:82px !important;
    }

    .footer,
    .exact-footer{
        padding-top:24px !important;
    }
}