:root {
    --ebes-primary-color: #F95E2F;
    --ebes-warning-color: #FFB61B;
    --ebes-soft-color: #FFF6F5;
    --soft-shadow: 0 6px 22px rgba(252,96,118,.12);
}

.card.card-ebes-soft-pink {
    border-radius: 10px;
    background: var(--Primary-L-25, #FFF6F5);
}

.card.card-ebes-soft-grey {
    border-radius: 10px;
    background: #F9FAFB;
}

.card.card-ebes-pink {
    border-radius: 8px;
    background: var(--Primary-L-25, #FFF6F5);
    /* Sm */
    box-shadow: 0 1px 3px 0 rgba(16, 24, 40, 0.10), 0 1px 2px 0 rgba(16, 24, 40, 0.06);
}

.card.card-ebes {
    border-radius: 12px;
    box-shadow: 0 1px 3px 0 rgba(16, 24, 40, 0.10), 0 1px 2px 0 rgba(16, 24, 40, 0.06);
}

    .card.card-ebes .card-header {
        border-bottom: 1px solid #E2E8F0;
        background: var(--Gray-50, #F9FAFB);
    }

.card.card-ebes-success {
    border-radius: 12px;
    border: 2px solid #A7F3D0;
    background: #ECFDF5;
}

    .card.card-ebes-success .label-ebes-card {
        border-radius: 9999px;
        background: #D1FAE5;
        color: #047857;
        font-family: Poppins;
        font-size: 11.625px;
        font-style: normal;
        font-weight: 500;
        line-height: 16px;
    }

.card.card-ebes-warning {
    border-radius: 12px;
    border: 2px solid #FDE68A;
    background: #FFFBEB;
}

    .card.card-ebes-warning .label-ebes-card {
        border-radius: 9999px;
        background: #FEF3C7;
        color: #B45309;
        font-family: Poppins;
        font-size: 11.438px;
        font-style: normal;
        font-weight: 500;
        line-height: 16px; /* 139.891% */
    }

.card.card-ebes-info {
    border-radius: 12px;
    border: 2px solid #60A5FA;
    background: #F0F9FF;
}

    .card.card-ebes-info .label-ebes-card {
        border-radius: 9999px;
        background: #DBEAFE;
        color: #1E40AF;
        font-family: Poppins;
        font-size: 11.438px;
        font-style: normal;
        font-weight: 500;
        line-height: 16px; /* 139.891% */
    }



/* wrapper komponen */
.cover-card {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
}

    /* ====== STATE: EMPTY (ada gradient banner & dekor) ====== */
    .cover-card.is-empty .cover-card-banner {
        background: linear-gradient(90deg, var(--ebes-primary-color) 0%, var(--ebes-warning-color) 100%);
        color: #fff;
        padding: 1.5rem 1.25rem;
        font-weight: 700;
        font-family: Poppins;
        z-index: 1;
    }

    .cover-card.is-empty .cover-card-panel {
        position: relative;
        background: var(--ebes-soft-color);
        padding: 1.25rem;
        border-radius: 18px;
        z-index: 0; /* di bawah banner */
        margin-top: -15px;
    }

        /* panel isi putih (kartu di dalam) */
        .cover-card.is-empty .cover-card-panel > .d-flex {
            /*background: #fff;*/
            border-radius: 12px;
            padding: 1.25rem;
        }

    /* ====== STATE: FILLED (tanpa banner & dekor) ====== */
    .cover-card:not(.is-empty) {
        border-radius: 0;
    }
    .cover-card:not(.is-empty) .cover-card-banner {
        display: none;
    }

    .cover-card:not(.is-empty) .cover-card-panel {
        background: #fff;
        padding: 0;
    }

        .cover-card:not(.is-empty) .cover-card-panel > .d-flex {
            background: #fff;
            padding: 0;
        }

.cover-table {
    position: relative;
    padding: 10px 10px;
    margin-bottom: 28px;
    background: #fff; /* state filled */
}

    /* ==== STATE: EMPTY ==== */
    .cover-table.is-empty {
        border: 0;
        padding-top: 40px; /* ruang untuk ribbon */
        background: linear-gradient(90deg, var(--ebes-primary-color) 0%, var(--ebes-warning-color) 100%);
        border-radius: 18px;
        box-shadow: var(--soft-shadow);
    }

/* ribbon tipis di atas */
.cover-table-banner {
    position: absolute;
    inset: 0 0 auto 0;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-family: Poppins;
    pointer-events: none;
}

/* ====== STATE: FILLED (tanpa banner & dekor) ====== */
.cover-table:not(.is-empty) {
    margin-bottom: 0;
    padding: 0;
}

    .cover-table:not(.is-empty) .cover-table-banner {
        display: none;
    }

.symbol-ebes-primary .symbol-label {
    border-radius: 8px !important;
    background-color: #F95E2F !important; /* ganti dengan warna Primary L/500 milikmu */
    color: #ffffff !important; /* warna isi icon jadi putih */
}

.symbol-ebes-primary-gradient .symbol-label {
    border-radius: 8px !important;
    background: linear-gradient(180deg, #F95E2F 0%, #FF8F69 100%) !important;
    color: #ffffff !important; /* warna isi icon jadi putih */
}

.symbol-ebes-warning .symbol-label {
    border-radius: 8px !important;
    background-color: #F59E0B !important; /* ganti dengan warna Primary L/500 milikmu */
    color: #ffffff !important; /* warna isi icon jadi putih */
}

.symbol-ebes-success .symbol-label {
    border-radius: 8px !important;
    background-color: #10B981 !important; /* ganti dengan warna Primary L/500 milikmu */
    color: #ffffff !important; /* warna isi icon jadi putih */
}


/* Chips */
.ebes-chip {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .35rem .7rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: .85rem;
    border: 1px solid transparent;
    line-height: 1;
}

.ebes-chip-primary {
    background: rgba(249,94,47,.10);
    color: #F95E2F;
    border-color: rgba(249,94,47,.25);
}

.ebes-chip-success {
    background: rgba(16,185,129,.10);
    color: #10B981;
    border-color: rgba(16,185,129,.25);
}

/* Separator halus */
.ebes-separator {
    border-color: rgba(16,24,40,.06) !important;
}

.ebes-period__item {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .75rem;
}

.ebes-period__label {
    color: #98A2B3; /* abu-abu muted */
    font-size: .9rem;
    white-space: nowrap;
}

.ebes-period__value {
    font-weight: 600;
    color: #111827; /* teks gelap */
    margin-left: .25rem;
}

/* Garis pemisah antar kolom */
@media (min-width: 768px) {
    .ebes-period > .col-md-4:not(:first-child) {
        border-left: 1px solid rgba(16, 24, 40, 0.08);
    }
}

/* Warna tambahan */
.text-purple {
    color: #6D28D9 !important;
}

.alert.alert-ebes-info {
    border-radius: 10px;
    border-left: 4px solid #2B7FFF;
    background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.10), 0 1px 2px -1px rgba(0, 0, 0, 0.10);
}

.alert.alert-ebes-primary {
    border-radius: 10px;
    border-left: 4px solid #FF6900;
    background: linear-gradient(135deg, #FFF7ED 0%, #FFEDD4 100%);
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.10), 0 1px 2px -1px rgba(0, 0, 0, 0.10);
}

.alert.alert-ebes-warning {
    border-radius: 10px;
    border-left: 4px solid #FDC700;
    background: #FEFCE8;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.10), 0 1px 2px -1px rgba(0, 0, 0, 0.10);
}

.alert.alert-ebes-danger {
    border-radius: 10px;
    border-left: 4px solid #FF6467;
    background: #FEF2F2;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.10), 0 1px 2px -1px rgba(0, 0, 0, 0.10);
}


.upload-card-ebes {
    position: relative; /* anchor untuk posisi absolute anak */
    cursor: pointer;
    overflow: hidden;
    border: 0;
    background: #F3F6F9; /* sama seperti bg-light-primary */
    border-radius: .75rem;
}

    .upload-card-ebes span.label-upload-card-ebes {
        color: #303135;
        font-family: Poppins;
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: 22px; /* 137.5% */
    }

    /* Overlay input file menutupi seluruh card */
    .upload-card-ebes input[type="file"] {
        position: absolute;
        inset: 0; /* top:0 right:0 bottom:0 left:0 */
        width: 100%;
        height: 100%;
        opacity: 0 !important; /* benar-benar tak terlihat */
        z-index: 5; /* pastikan di atas konten */
        cursor: pointer;
        display: block;
        -webkit-appearance: none; /* hilangkan tombol default Safari */
        appearance: none;
    }

    /* Biar konten tidak menangkap klik (opsional, aman) */
    .upload-card-ebes .upload-content {
        pointer-events: none;
    }


.checkbox.checkbox-ebes-primary {
    border-radius: 5.85px;
}

/* Override warna checkbox-warning Metronic */
    .checkbox.checkbox-ebes-primary > input:checked ~ span {
        background-color: var(--Primary-L-500, #F95E2F) !important;
        border-color: var(--Primary-L-500, #F95E2F) !important;
    }

/* Titik pemisah " | " yang halus */
.dot-sep {
    display: inline-block;
    width: 2px;
    height: 14px;
    background: #E4E6EF;
}

.radio-inline {
    display: flex;
    align-items: center;
    gap: 3rem; /* jarak antar pilihan */
}

.radio-outline.radio-ebes-primary input:checked ~ span {
    border-color: #F63A25 !important; /* Primary L/500 */
    background-color: #FFE7E1 !important; /* Primary / 50 */
}

    /* Inner dot */
    .radio-outline.radio-ebes-primary input:checked ~ span:after {
        background-color: #F63A25 !important; /* Primary L/500 */
    }

/* Saat hover, ubah border-nya juga */
.radio-outline.radio-ebes-primary:hover input:not(:checked) ~ span {
    border-color: #F63A25 !important;
}

/* Fokus: matikan ring biru bootstrap */
.radio-outline.radio-ebes-primary input:focus {
    outline: none !important;
    box-shadow: none !important;
}

.radio-outline-2x input:checked ~ span {
    border-width: 2px !important;
}

.label-ebes-h5 {
    color: var(--Heading, #3F434A);
    /* H5 */
    font-family: Poppins;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.label-ebes-bold-14 {
    color: #071437;
    font-family: Poppins;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 23.4px; /* 167.143% */
}



.label-ebes-medium-14 {
    color: #3F434A;
    /* Body/Medium/14 */
    font-family: Poppins;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.label-ebes-medium-15 {
    color: #111827;
    font-family: Poppins;
    font-size: 15.125px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px; /* 158.678% */
}

.label-ebes-medium-16 {
    color: #19222A;
    font-family: Poppins;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 22px; /* 137.5% */
}

.label-ebes-abu-regular-14 {
    color: #6B7280;
    font-family: Poppins;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px; /* 142.857% */
    letter-spacing: 0.35px;
}

.label-ebes-regular-14 {
    color: #44566C;
    /* Body/Regular/14 */
    font-family: Poppins;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.label-ebes-title-1 {
    align-self: stretch;
    justify-content: center;
    display: flex;
    flex-direction: column;
    color: #19222A;
    font-size: 13.62px;
    font-family: Poppins;
    font-weight: 700;
    line-height: 20px;
    word-wrap: break-word;
}

.label-ebes-title-2 {
    justify-content: center;
    display: flex;
    flex-direction: column;
    color: #19222A;
    font-size: 12.36px;
    font-family: Poppins;
    font-weight: 700;
    line-height: 18px;
    word-wrap: break-word;
}

.label-ebes-muted-1 {
    justify-content: center;
    display: flex;
    flex-direction: column;
    color: rgba(25, 34, 42, 0.70);
    font-size: 10.50px;
    font-family: Poppins;
    font-weight: 500;
    line-height: 16px;
    word-wrap: break-word
}

.label-ebes-muted-2 {
    justify-content: center;
    display: flex;
    flex-direction: column;
    color: rgba(25, 34, 42, 0.70);
    font-size: 10.50px;
    font-family: Poppins;
    font-weight: 500;
    line-height: 16px;
    word-wrap: break-word
}

.btn.btn-ebes-primary {
    border-radius: 5.46px;
    background: var(--primary-l-500, #F95E2F);
    color: var(--neutral-light-n-0, #FFF);
    text-align: center;
    font-family: Poppins;
    transition: background-color 0.15s ease;
}

    .btn.btn-ebes-primary:hover {
        background-color: #e75528; /* sedikit lebih gelap */
    }

    .btn.btn-ebes-primary:active {
        background-color: #d44f24; /* lebih gelap lagi saat diklik */
    }

    .btn.btn-ebes-primary i {
        color: #ffffff;
    }

.keep-newline {
    white-space: pre-wrap;
    text-align: left;
}

.btn.btn-ebes-light-primary {
    border: 1px solid var(--Primary-L-500, #F95E2F);
    border-radius: 5.46px;
    background: var(--primary-l-500, #FFFFFF);
    color: var(--neutral-light-n-0, #F95E2F);
    text-align: center;
    font-family: Poppins;
}

    .btn.btn-ebes-light-primary i {
        color: #F95E2F;
    }

    .btn.btn-ebes-light-primary:hover {
        border-color: #e24f22; /* sedikit lebih gelap dari #F95E2F */
        background: #fff3ef; /* sedikit bayangan warna oranye muda */
        color: #e24f22;
    }

        .btn.btn-ebes-light-primary:hover i {
            color: #e24f22;
        }

    /* Active (saat diklik / ditekan) */
    .btn.btn-ebes-light-primary:active {
        border-color: #c93f17; /* lebih gelap lagi */
        background: #ffe7e0; /* lebih pekat dari hover */
        color: #c93f17;
    }

        .btn.btn-ebes-light-primary:active i {
            color: #c93f17;
        }




.btn.btn-ebes-danger {
    border-radius: 5.46px;
    background: var(--primary-l-500, #D92D20);
    color: var(--neutral-light-n-0, #FFF);
    text-align: center;
    font-family: Poppins;
}

    .btn.btn-ebes-danger:hover {
        background-color: #A8211A; /* sedikit lebih gelap */
    }

    .btn.btn-ebes-danger:active {
        background-color: #8F1B17; /* lebih gelap lagi saat diklik */
    }

    .btn.btn-ebes-danger i {
        color: #ffffff;
    }


.btn.btn-ebes-download {
    /* Button/Button Small */
    font-size: 10px;
    font-style: normal;
    font-weight: 600;
    line-height: 12px; /* 120% */
}

.btn.btn-ebes-submit {
    color: var(--neutral-light-n-0, #FFF);
    text-align: center;
    /* Button/Button Small */
    font-family: Poppins;
    font-size: 10px;
    font-style: normal;
    font-weight: 600;
    line-height: 12px; /* 120% */
}

input[radio].radio-ebes {
    fill: var(--primary-50, #FFEEEF);
    stroke-width: 1px;
    stroke: var(--orange-o-400, #F95E2F);
}

input.search-table-ebes {
    border-radius: 10px;
    border-style: solid;
    height: 40px;
    background: var(--neutral-light-n-20, #F4F5F7);
    width: 150px;
    border-width: 0px;
}

select.search-select-table-ebes {
    border-radius: 10px;
    border-style: solid;
    height: 40px;
    background: var(--neutral-light-n-20, #F4F5F7);
    border-width: 0px;
    padding: 10px 30px 10px 35px;
    font-size: 14px;
    width: 150px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

/*    input.search-table-ebes:focus {
        border: 3px solid #555;
    }*/

label.placeholder-icon {
    position: relative;
}

    label.placeholder-icon.icon-search:before {
        content: "";
        position: absolute;
        left: 10px;
        top: 0;
        bottom: 0;
        width: 20px;
        background: url('../media/search-placeholder.svg') center / contain no-repeat;
    }

    label.placeholder-icon > input {
        padding: 10px 30px 10px 35px;
    }

        label.placeholder-icon > input:focus {
            outline: none;
            border: 1px solid #FF6C06;
            box-shadow: 0 0 2px #8A9099;
        }

.label.label-ebes-light-draft {
    color: #F95E2F;
    border-radius: 4px;
    background: #E9F3FF;
    min-height: 25px;
    height: auto;
}

label.placeholder-select-icon {
    position: relative;
}

    label.placeholder-select-icon.icon-search:before {
        content: "";
        position: absolute;
        left: 10px;
        top: 0;
        bottom: 0;
        width: 20px;
        background: url('../media/search-placeholder.svg') center / contain no-repeat;
    }

    label.placeholder-select-icon > select {
        padding: 10px 30px 10px 35px;
    }

        label.placeholder-select-icon > select:focus {
            outline: none;
            border: 1px solid #FF6C06;
            box-shadow: 0 0 2px #8A9099;
        }


.label.label-ebes-secondary {
    color: #3F4254;
    border-radius: 4px;
    background: #EBEDF3;
    min-height: 25px;
    height: auto;
}

.label.label-ebes-light-secondary {
    color: #3F4254;
    border-radius: 4px;
    background: #EBEDF3;
    min-height: 25px;
    height: auto;
}

.label.label-ebes-primary {
    color: #ffffff;
    border-radius: 4px;
    background: #0D6EFD;
    min-height: 25px;
    height: auto;
}

.label.label-ebes-light-primary {
    color: #026AA2;
    border-radius: 4px;
    background: #F0F9FF;
    min-height: 25px;
    height: auto;
}

.label.label-ebes-success {
    color: #ffffff;
    border-radius: 4px;
    background: var(--success-600, #039855);
    min-height: 25px;
    height: auto;
}

.label.label-ebes-light-success {
    color: #027A48;
    border-radius: 4px;
    background: #F1FFF8;
    min-height: 25px;
    height: auto;
}

.label.label-ebes-warning {
    color: #ffffff;
    border-radius: 4px;
    background: var(--primary-l-500, #F95E2F);
    min-height: 25px;
    height: auto;
}

.label.label-ebes-light-warning {
    color: #993A0F;
    border-radius: 4px;
    background: #FFF2EC;
    min-height: 25px;
    height: auto;
}

.label.label-ebes-danger {
    color: #ffffff;
    border-radius: 4px;
    background: var(--error-600, #D92D20);
    min-height: 25px;
    height: auto;
}

.label.label-ebes-light-danger {
    color: #B42318;
    border-radius: 4px;
    background: #FEF3F2;
    min-height: 25px;
    height: auto;
}

.nav.nav-tabs.nav-tabs-ebes .nav-link {
    background-color: transparent;
    border: 0;
}

    .nav.nav-tabs.nav-tabs-ebes .nav-link:hover {
        border-bottom: 2px solid #F95E2F;
    }

    .nav.nav-tabs.nav-tabs-ebes .nav-link.active {
        border-bottom: 2px solid #F95E2F;
    }

    .nav.nav-tabs.nav-tabs-ebes .nav-link .nav-text {
        font-family: Poppins;
        font-size: 13.975px;
        font-style: normal;
        font-weight: 500;
        line-height: 20.962px; /* 150% */
    }

    .nav.nav-tabs.nav-tabs-ebes .nav-link:hover .nav-text {
        color: #F95E2F;
    }

    .nav.nav-tabs.nav-tabs-ebes .nav-link.active .nav-text {
        color: #F95E2F;
    }

    .nav.nav-tabs.nav-tabs-ebes .nav-link:hover .nav-icon > i {
        color: #F95E2F;
    }

    .nav.nav-tabs.nav-tabs-ebes .nav-link.active .nav-icon > i {
        color: #F95E2F;
    }

.card-gradient-ebes {
    border-radius: 8px;
    background: rgb(249,180,21);
    background: linear-gradient(301deg, rgba(249,180,21,1) 0%, rgba(255,108,6,1) 100%);
    box-shadow: 0px 3px 10px 0px rgba(48, 46, 56, 0.06);
}

label.judul-bayar {
    color: #FFF;
    font-family: Poppins;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 22px; /* 137.5% */
    letter-spacing: 0.375px;
}

label.total-bayar {
    color: #FFF;
    font-family: Poppins;
    font-size: 30px;
    font-style: normal;
    font-weight: 700;
    line-height: 36px; /* 120% */
}

label.kurang-sudah-bayar {
    color: #E0E7FF;
    font-family: Poppins;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
}

label.nominal-kurang-sudah-bayar {
    color: #FFF;
    font-family: Poppins;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px; /* 150% */
}

.wrapper-right:after {
    content: "";
    background-color: #DBDFE9;
    position: absolute;
    width: 2px;
    height: 20px;
    top: 0px;
    left: 50%;
    display: inherit;
}

.tabs-padding-card {
    padding: 0 2.25rem 0 2.25rem;
}

.nav-tabs-without-line {
    border-bottom: none !important;
}

.card-border-ebes {
    border: 1px solid #F1F1F4 !important;
    border-radius: 12px !important;
}

.label-with-rightline {
    position: relative;
    display: inline-block;
    padding-right: 30px; /* Jarak antara label dan garis */
}

    .label-with-rightline::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        width: 2px; /* Ketebalan garis */
        background-color: #CBD2D9; /* Warna garis */
    }

.card-border-putus {
    border: 1.5px dashed #DBDFE9; /* Garis putus-putus dengan warna biru */
    border-radius: 10px; /* Sesuaikan sudut jika perlu */
}

.separator-justify-content {
    width: 2px; /* Ketebalan garis */
    background-color: #DBDFE9; /* Warna garis */
    height: 50px; /* Tinggi garis */
    margin: 0 15px; /* Jarak antara elemen */
}

.arrow {
    transition: transform 0.3s ease;
}

.collapsed .arrow {
    transform: rotate(180deg);
}

.btn-container {
    display: flex;
    flex-direction: column;
    width: fit-content; /* Agar lebar menyesuaikan konten */
}


.shimmer {
    position: relative;
    overflow: hidden;
}

    .shimmer::before {
        content: "";
        position: absolute;
        top: 0;
        left: -150%;
        width: 150%;
        height: 100%;
        background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.3), transparent );
        animation: shimmer-slide 2s infinite;
    }

@keyframes shimmer-slide {
    0% {
        left: -150%;
    }

    50% {
        left: 100%;
    }

    100% {
        left: 100%;
    }
}

/* Background shimmer khusus */
.bg-shimmer-danger {
    background: linear-gradient(270deg, #e53935, #F04438, #e53935);
    background-size: 400% 400%;
    animation: shimmer-color-bg 2s infinite;
    color: white;
    border-radius: 999px;
    padding: 0.5rem 1rem;
    display: inline-block;
    white-space: nowrap;
}

.bg-shimmer-warning {
    background: linear-gradient(270deg, #f59e0b, #facc15, #f59e0b);
    background-size: 400% 400%;
    animation: shimmer-color-bg 2s infinite;
    color: white;
    border-radius: 999px;
    padding: 0.5rem 1rem;
    display: inline-block;
    white-space: nowrap;
}

.bg-shimmer-success {
    background: linear-gradient(270deg, #16a34a, #22c55e, #16a34a); /* Hijau shimmer */
    background-size: 400% 400%;
    animation: shimmer-color-bg 2s infinite;
    color: white;
    border-radius: 999px;
    padding: 0.5rem 1rem;
    display: inline-block;
    white-space: nowrap;
}

.bg-shimmer-info {
    background: linear-gradient(270deg, #0ea5e9, #38bdf8, #0ea5e9); /* Soft blue shimmer */
    background-size: 400% 400%;
    animation: shimmer-color-bg 2s infinite;
    color: white;
    border-radius: 999px;
    padding: 0.5rem 1rem;
    display: inline-block;
    white-space: nowrap;
}


.bg-shimmer-primary {
    background: linear-gradient(270deg, #2563eb, #3b82f6, #2563eb); /* Deep blue shimmer */
    background-size: 400% 400%;
    animation: shimmer-color-bg 2s infinite;
    color: white;
    border-radius: 999px;
    padding: 0.5rem 1rem;
    display: inline-block;
    white-space: nowrap;
}


@keyframes shimmer-color-bg {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.list-styled {
    list-style-position: outside; /* atau inside sesuai preferensi */
    padding-left: 1.25rem; /* sesuai dengan desain indentasi */
    font-size: 1rem;
    line-height: 1.6;
}

    .list-styled li {
        margin-bottom: 0.4rem;
    }


.btn-circle {
    flex: 0 0 auto; /* jangan ikut stretch */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    background-color: white;
    border-radius: 50%;
    color: #ff7f00;
    text-decoration: none;
    font-size: 18px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

    .btn-circle:hover {
        background-color: #fff3e0; /* Warna hover lebih soft */
        transform: scale(1.1); /* Membesar sedikit saat hover */
        box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    }

.header-ebes-custom {
    background: linear-gradient(to right, #f15b2a, #ffce3a);
    color: white;
    padding: 16px;
    border-radius: 12px 12px 0 0;
    font-weight: bold;
}

.card-ebes-custom {
    background-color: white;
    padding: 24px;
    margin: 0 auto 40px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.radio-card-group {
    display: flex;
    gap: 10px;
    margin-top: 8px;
}

.radio-card {
    flex: 1;
    display: flex;
    align-items: center; /* 🔹 Bikin sejajar vertikal tengah */
    justify-content: center; /* 🔹 Bikin teks di tengah horizontal */
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 12px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s ease;
    background: #fff;
}

    .radio-card input[type="radio"] {
        accent-color: #ff7a59; /* warna oranye lembut */
        transform: scale(1.1);
        margin-right: 8px;
    }

    .radio-card:hover {
        background: #fff8f6;
        border-color: #ffd9ce;
    }

    .radio-card input[type="radio"]:checked + .radio-label {
        color: #ff7a59;
        font-weight: 600;
    }

.radio-group {
    display: flex;
    gap: 24px;
    margin-top: 6px;
}

.radio-option {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
}

    .radio-option input[type="radio"] {
        accent-color: #ff7549;
    }
}

/* Custom Styles for Checkbox-lg */
.checkbox.checkbox-lg .custom-control-input:checked ~ .custom-control-label::before {
    background-color: #10B981 !important;
    border-color: #10B981 !important;
}

.checkbox.checkbox-lg .custom-control-input:focus ~ .custom-control-label::before {
    border-color: #10B981 !important;
    box-shadow: 0 0 0 0.2rem rgba(16, 185, 129, 0.25) !important;
}

.checkbox.checkbox-lg .custom-control-input:checked ~ .custom-control-label::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23ffffff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e") !important;
}