/* Fonts */

.font-dm-sans {
    font-family: "DM Sans", sans-serif;
}

.font-dm-sans-italic {
    font-family: "DM Sans Italic", sans-serif;
}

.font-nunito-sans {
    font-family: "Nunito Sans", sans-serif;
}

.font-dm-sans-italic {
    font-family: "Nunito Sans Italic", sans-serif;
}

.font-open-sans {
    font-family: "Open Sans", sans-serif;
}

.font-open-sans-italic {
    font-family: "Open Sans Italic", sans-serif;
}

.font-public-sans {
    font-family: "Public Sans", sans-serif;
}

.font-public-sans-italic {
    font-family: "Public Sans Italic", sans-serif;
}

/* Bootstrap Variables */

.nav-pills {
    --bs-nav-pills-link-active-bg: #FA9D1C;
}

.nav {
    --bs-nav-link-color: #636772;
    --bs-nav-link-font-weight: 400;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    --bs-nav-link-font-weight: 700;
}

/* Colors */

.color-vivid-orange {
    color: #F37021;
}

.color-golden-orange {
    color: #FA9D1C !important;
}

.color-dark-mauve {
    color: #834777;
}

.color-mauve {
    color: #9E5F9E;
}

.color-light-amber {
    color: #FFCB08;
}

.color-dark-navy {
    color: #23476F;
}

.bg-vivid-orange {
    background-color: #F37021;
}

.bg-golden-orange {
    background-color: #FA9D1C;
}

.bg-light-amber {
    background-color: #FFCB08;
}

.bg-dark-navy {
    background-color: #23476F;
}

.bg-gradient-golden-orange {
    background: linear-gradient(270deg, #FFCA08 12.82%, #FA9D1C 100%);
}

.border-gray {
    --bs-border-opacity: 1;
    border-color: #D8DCE8;
}

.border-golden-orange {
    --bs-border-opacity: 1;
    border-color: #FA9D1C;
}

.text-gray {
    --bs-text-opacity: 1;
    color: #63666E;
}

.text-golden-orange {
    --bs-text-opacity: 1;
    color: #FA9D1C;
}

/* Customs */

.border-feature-desktop {
    border: 2px solid transparent;
}

.border-feature-desktop:hover {
    border: 2px solid #FA9D1C;
}


/* Base style hanya untuk button dengan class circle-pill */
.circle-pill-light-amber {
    border: 2px solid #C4C4C4; /* outline default */
    background-color: #fff; /* background putih */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 0;
}

/* Outline kuning saat active */
.circle-pill-light-amber.active {
    padding: 1.5rem !important;
    border-color: #FFCB08;
    box-shadow: var(--bs-box-shadow-lg)
}

/* Mask kuning di tengah saat active */
.circle-pill-light-amber::after {
    content: "";
    position: absolute;
    inset: 5px;
    background-color: #FFCB08;
    border-radius: 50%;
}

.circle-pill-dark-navy {
    border: 2px solid #C4C4C4; /* outline default */
    background-color: #fff; /* background putih */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 0;
}

/* Outline kuning saat active */
.circle-pill-dark-navy.active {
    padding: 1.5rem !important;
    border-color: #23476F;
    box-shadow: var(--bs-box-shadow-lg)
}

/* Mask kuning di tengah saat active */
.circle-pill-dark-navy::after {
    content: "";
    position: absolute;
    inset: 5px;
    background-color: #23476F;
    border-radius: 50%;
}

/* Table Cost */

/* aktifkan garis bawah default Bootstrap */
.table.table-border-bottom-only td,
.table.table-border-bottom-only th {
    border-bottom: 1px solid #dee2e6;
}

/* bikin hanya border vertical antar kolom */
.table.custom-inner-vertical td,
.table.custom-inner-vertical th {
    border-left: 1px solid #dee2e6;
}

/* hapus border kiri pertama supaya sisi luar gak ada */
.table.custom-inner-vertical td:first-child,
.table.custom-inner-vertical th:first-child {
    border-left: none;
}

/* hapus border luar tabel */
.table.custom-inner-vertical {
    border: none;
}

/* Table FAQ */

.table-golden-orange {
    --bs-table-color: white;
    --bs-table-bg: #FA9D1C;
    --bs-table-border-color: #FEEBD2;
    --bs-table-striped-bg: #ecedee;
    --bs-table-striped-color: #FEEBD2;
    --bs-table-active-bg: #dfe0e1;
    --bs-table-active-color: #000;
    --bs-table-hover-bg: #e5e6e7;
    --bs-table-hover-color: #000;
    color: var(--bs-table-color);
    border-color: var(--bs-table-border-color);
}

.table-inner-only th,
.table-inner-only td {
    border: 1px solid #FEEBD2;
}

.table-inner-only th:first-child,
.table-inner-only td:first-child {
    border-left: none;
}

.table-inner-only th:last-child,
.table-inner-only td:last-child {
    border-right: none;
}

.table-inner-only thead tr:first-child th {
    border-top: none;
}

.table-inner-only tbody tr:last-child td {
    border-bottom: none;
}

.accordion-button:not(.collapsed)::after {
    color: rgb(250, 157, 28);
    filter: invert(47%) sepia(83%) saturate(532%) hue-rotate(360deg) brightness(100%) contrast(96%);
}

.accordion-button:not(.collapsed) {
    color: rgb(250, 157, 28) !important;
    background-color: #fff;
    box-shadow: none;
}

.accordion-button-tablet {
    font-size: 4vw;
}

/* Animation */

.ring-gradient {
    box-shadow: inset 0 0 10px 5px white;
    width: 98vw;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: conic-gradient(
            #FDC5F9,
            #C6F3FF,
            #AA9CE9,
            #F7B1F3,
            #7AF9FF,
            #FDC5F9
    );
    background-size: 200% 400%;
    -webkit-mask: radial-gradient(circle, transparent 50%, white 56%);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: cover;
    mask: radial-gradient(circle, transparent 50%, white 65%);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: cover;
    animation: updown 6s linear infinite;
}

@keyframes updown {
    0% {
        background-position: 50% 0%;
    }
    50% {
        background-position: 50% 100%;
    }
    100% {
        background-position: 50% 0%;
    }
}