/*
================================================
CONTAINER
================================================
*/


.branch-container{

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

    margin:30px auto;

    padding:20px;

    background:#ffffff;

    border-radius:18px;

    box-shadow:
        0 5px 18px rgba(0,0,0,0.08);

}





.branch-container h2{

    margin:0 0 20px 0;

    font-size:24px;

    color:#222;

}







/*
================================================
DROPDOWN PROVINSI
================================================
*/


.branch-box{

    width:100%;

    margin-bottom:20px;

}



#provinsiSelect{


    width:100%;

    height:50px;


    padding:0 15px;


    border-radius:12px;


    border:

        2px solid #25D366;


    background:white;


    font-size:16px;


    cursor:pointer;


}






/*
================================================
LAYOUT CABANG + MAP
================================================
*/


.branch-layout{


    display:flex;


    gap:20px;


    align-items:stretch;


}







/*
================================================
LIST CABANG
================================================
*/


.branch-list-box{


    width:35%;


    max-height:450px;


    overflow-y:auto;


}



#branchList{


    display:flex;


    flex-direction:column;


    gap:10px;


}






.branch-item{


    padding:15px;


    background:#ffffff;


    border-radius:12px;


    border:

        1px solid #dddddd;


    cursor:pointer;


    transition:.2s;


}




.branch-item:hover{


    background:#f1fff6;


    border-color:#25D366;


}






.branch-item.active{


    background:#e8fff0;


    border:

        2px solid #25D366;


}







.branch-title{


    font-size:16px;


    font-weight:bold;


    color:#222;


}




.branch-status{


    margin-top:5px;


    font-size:13px;


    color:#25D366;


}








/*
================================================
GOOGLE MAP
================================================
*/


.branch-map-box{


    width:65%;


    height:450px;


}




#branchMap{


    width:100%;


    height:100%;


    border:0;


    border-radius:15px;


}








/*
================================================
DETAIL CABANG
================================================
*/


.branch-detail{


    margin-top:20px;


    padding:18px;


    background:#f7f7f7;


    border-radius:14px;


}




.branch-detail h3{


    margin:0 0 10px 0;


    color:#222;


    font-size:20px;


}




.branch-detail p{


    margin:0;


    color:#555;


    line-height:1.5;


}







/*
================================================
RESPONSIVE MOBILE
================================================
*/


@media(max-width:768px){



    .branch-container{


        padding:15px;


    }




    .branch-layout{


        flex-direction:column;


    }




    .branch-list-box,
    .branch-map-box{


        width:100%;


    }




    .branch-map-box{


        height:350px;


    }


}
/* Branch tab styling aligned with the existing translucent MM Juice page panels. */
.tm-contact-page .branch-container {max-width:1120px;width:100%;margin:0 auto 28px;padding:0;background:transparent;box-shadow:none;border-radius:0;font-family:'Open Sans',Arial,sans-serif;color:#303d35;}
.branch-heading {background:rgba(255,255,255,.88);padding:27px 32px 23px;border-radius:6px 6px 0 0;border-bottom:3px solid #73a64a;}
.branch-eyebrow {display:block;font-size:11px;letter-spacing:2.5px;font-weight:700;color:#668f43;margin-bottom:9px;}
.branch-container .branch-heading h2 {margin:0 0 8px;font-size:clamp(23px,3vw,32px);font-weight:600;color:#2b4b30;}
.branch-heading p {margin:0;color:#68736b;font-size:14px;line-height:1.7;}
.branch-panel {padding:24px 28px 28px;background:rgba(255,255,255,.93);border-radius:0 0 6px 6px;box-shadow:0 10px 32px rgba(0,0,0,.08);}
.branch-toolbar {display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px;}
.branch-field label {display:block;font-size:12px;font-weight:700;letter-spacing:.5px;margin-bottom:8px;color:#4e6251;}
.branch-field select,.branch-field input {width:100%;height:48px;border:1px solid #dce5d9;border-radius:5px;background:#fff;padding:0 14px;color:#35483b;font:inherit;font-size:14px;outline:none;box-shadow:none;}
.branch-field select:focus,.branch-field input:focus {border-color:#77a851;box-shadow:0 0 0 3px rgba(119,168,81,.13);}
.branch-layout {display:grid;grid-template-columns:minmax(250px,37%) minmax(0,1fr);gap:18px;align-items:stretch;}
.branch-list-box {width:auto;max-height:none;height:400px;overflow:hidden;border:1px solid #e2e9df;border-radius:6px;background:#fafcf9;display:flex;flex-direction:column;}
.branch-list-heading {display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid #e4eae1;font-size:13px;color:#34553a;gap:8px;}
.branch-list-heading span {font-size:11px;color:#738075;white-space:nowrap;}
#branchList {padding:10px;gap:8px;overflow-y:auto;min-height:0;flex:1;}
.branch-item {padding:13px 14px;border-radius:5px;border:1px solid #e1e8df;box-shadow:none;background:#fff;}
.branch-item:hover {background:#f3f8ef;border-color:#a6c68c;transform:translateY(-1px);}
.branch-item.active {background:#edf5e7;border:1px solid #79a756;box-shadow:inset 3px 0 #79a756;}
.branch-title {font-size:13px;color:#304934;line-height:1.45;}
.branch-status {font-size:12px;color:#778276;margin-top:5px;}
.branch-empty {padding:38px 18px;text-align:center;color:#819080;font-size:13px;line-height:1.7;}
.branch-map-box {width:auto;height:400px;position:relative;border:1px solid #e2e9df;border-radius:6px;overflow:hidden;background:#f2f5f0;}
.branch-map-heading {position:absolute;z-index:2;top:12px;left:12px;padding:8px 12px;border-radius:4px;background:rgba(255,255,255,.95);box-shadow:0 2px 10px rgba(0,0,0,.09);font-size:12px;font-weight:700;color:#35593a;}
.branch-map-dot {display:inline-block;width:8px;height:8px;border-radius:50%;background:#83ad5a;margin-right:6px;}
#branchMap {height:100%;width:100%;border-radius:0;}
.branch-map-placeholder {position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;color:#59745a;background:#f2f5f0;padding:20px;}
.branch-map-placeholder small {color:#829082;font-size:12px;}
.branch-pin {font-size:46px;color:#7aa355;line-height:1;}
.branch-detail {margin-top:18px;display:flex;align-items:center;gap:15px;background:#f6f9f4;border:1px solid #e2e9df;border-radius:6px;padding:17px 19px;}
.branch-detail-icon {font-size:26px;color:#729b50;flex-shrink:0;}
.branch-detail-copy {flex:1;min-width:0;}
.branch-detail-copy span {font-size:10px;letter-spacing:1.6px;font-weight:700;color:#80a260;}
.branch-detail h3 {margin:4px 0 5px;font-size:17px;color:#304c34;}
.branch-detail p {font-size:12px;color:#6b786e;line-height:1.65;}
.branch-directions {background:#638e45;color:#fff!important;padding:11px 15px;border-radius:4px;font-size:12px;font-weight:600;text-decoration:none;white-space:nowrap;}
.branch-directions:hover {background:#4b7535;text-decoration:none;}
.branch-directions[hidden] {display:none;}
@media(max-width:768px) {.branch-panel{padding:18px}.branch-heading{padding:22px 20px}.branch-toolbar{grid-template-columns:1fr;gap:12px}.branch-layout{grid-template-columns:1fr}.branch-list-box{height:235px}.branch-map-box{height:300px}.branch-detail{align-items:flex-start;flex-wrap:wrap}.branch-directions{margin-left:40px}}
@media(max-width:480px) {.tm-contact-page .branch-container{padding:0}.branch-heading{padding:18px}.branch-panel{padding:13px}.branch-map-box{height:260px}.branch-list-box{height:220px}}

/* Penyesuaian ukuran Branch: tipografi dan peta lebih besar */
.tm-contact-page .branch-container {max-width:1320px;}
.branch-container .branch-heading h2 {font-size:clamp(30px,3.5vw,40px);}
.branch-eyebrow {font-size:13px;}
.branch-heading p {font-size:17px;}
.branch-field label {font-size:15px;}
.branch-field select,.branch-field input {font-size:17px;height:56px;}
.branch-layout {grid-template-columns:minmax(260px,32%) minmax(0,1fr);gap:20px;}
.branch-list-box {height:560px;}
.branch-map-box {height:560px;}
.branch-list-heading {font-size:17px;}
.branch-list-heading span {font-size:14px;}
.branch-title {font-size:17px;}
.branch-status {font-size:15px;}
.branch-empty {font-size:16px;}
.branch-map-heading {font-size:15px;}
.branch-map-placeholder {font-size:17px;}
.branch-map-placeholder small {font-size:15px;}
.branch-detail-copy span {font-size:13px;}
.branch-detail h3 {font-size:22px;}
.branch-detail p {font-size:16px;}
.branch-directions {font-size:15px;padding:13px 18px;}
@media(max-width:768px) {
 .branch-layout {grid-template-columns:1fr;}
 .branch-list-box {height:300px;}
 .branch-map-box {height:440px;}
}
@media(max-width:480px) {
 .branch-list-box {height:280px;}
 .branch-map-box {height:380px;}
 .branch-container .branch-heading h2 {font-size:29px;}
}