/* ==========================================================
   BERBAGEHOST ORDER UI
========================================================== */



/* ==========================================================
   CURRENCY
========================================================== */



.bh-currency-header{

    display:flex;

    align-items:center;

    gap:15px;

    margin-bottom:20px;

}


.bh-currency-header h6{

    margin:0;

    font-weight:700;

}


.bh-currency-header small{

    color:var(--bh-muted);

}

#order-mata-uang label {
    width: calc(100% - 15px);
}


/* select */

#order-mata-uang select{

    border-radius:14px;

    height:50px;

}


/* ==========================================================
   PROGRESS
========================================================== */

.bh-order-wrapper{

    margin-top:-35px;

    padding-bottom:60px;

}


.bh-order-progress{
    display: flex;
    margin-bottom: 35px;
    justify-content: center;
    align-items: flex-start;
}

.bh-step{

    display: flex;
    width: 20%;
    flex-direction: column;
    align-items: center;
    position: relative;

}


.bh-step-number{

    width:54px;

    height:54px;

    border-radius:50%;

    background:#fff;

    border:2px solid var(--bh-border);

    display:flex;

    justify-content:center;

    align-items:center;

    font-weight:700;
    position: relative;

}
.bh-step-number-small {
    background-color: #ffffff;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    position: absolute;
    top: -10px;
    right: -12px;
    box-shadow: -4px 4px 12px rgba(0, 0, 0, .05);
}

.bh-step.active .bh-step-number{

    background:var(--bh-primary);

    border-color:var(--bh-primary);

    color:#fff;

}
.bh-step.active .bh-step-number-small {
    color: var(--bh-text);
}
.bh-step.active .bh-step-line {
    background: var(--bh-primary);
}

.bh-step-text {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.bh-step-line{
    width: calc(100% - 54px);
    height: 2px;
    background: #dde3ef;
    position: absolute;
    top: 24px;
    left: calc(-50% + 27px);
}


/* ==========================================================
   MAIN CARD
========================================================== */

.bh-order-card{

    background:#fff;

    border-radius:24px;

    border:1px solid var(--bh-border);

    box-shadow:

    0 20px 55px rgba(20,30,60,.06);

    overflow:hidden;

}
/* Accordion */
.bh-accordion-item {
    border-radius: 10px !important;
    border: 1px solid var(--bh-light-muted) !important;
}
.accordion-item:first-of-type>.accordion-header .accordion-button, .bh-accordion-button {
    border-top-left-radius: 10px !important;
    border-top-right-radius: 10px !important;
}
.bh-accordion-button {
    background-color: transparent;
    padding: 1rem 1.50rem;
}
.accordion-body {
    padding: 1rem 1.50rem 2rem 1.50rem;
}
#orderManager {
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231f2937' stroke-linecap='round' stroke-width='1.6' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' stroke='%23ffffff' stroke-width='1.2' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e");
    --bs-accordion-btn-icon-width: 1.50rem;
}

.accordion-button {
    font-weight: bold;
}

.accordion-button:not(.collapsed) {
    color: #ffffff;
    background-color: var(--bh-primary);
    box-shadow: unset;
    transition:all .25s;
}
.bh-accordion-item:has(.accordion-button:not(.collapsed)) {
    border-color: var(--bh-primary) !important;
    transition:all .25s;
}
.accordion-button:not(.collapsed) .badge {
    background-color: var(--bh-primary-light) !important;
    color: var(--bh-primary) !important;
    transition:all .25s;
}
.accordion-button:focus {
    box-shadow: unset;
}
.collapsing {
  height: 0;
  overflow: hidden;
  transition: height 0.35s ease; /* Mengatur durasi slide (0.35 detik) */
}

.collapse.show {
  transition: height 0.35s ease;
}