:root {
    --primary: #f1b13d;
    --primary-hover: #EFAF33;
    --dark: #262626;
}

/* components */

.bg-primary {
    background-color: var(--primary) !important;
    color: var(--dark);

    .breadcrumb ul>li:after {
        color: var(--dark);
    }
}

.text-primary {
    color: var(--primary) !important;
}

.btn-primary {
    color: var(--dark);
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;

    &:hover,
    &:focus-within {
        color: var(--dark);
        background-color: color(from var(--primary) srgb calc(r + .2) g b) !important;
        border-color: color(from var(--primary) srgb calc(r + .2) g b) !important;
    }
}

.btn-ubaya {
    text-transform: none !important;
    font-weight: bold !important;
}

.btn-white {
    color: var(--dark) !important;

    &:hover,
    &:focus-within {
        background-color: var(--dark) !important;
        color: #fff !important;
    }
}

.form-control:focus-within {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 .2rem color(from var(--primary) srgb a(.25)) !important;
}

.form-control-lg {
    font-size: 1.15rem !important;
}

.form-control[readonly] {
    background-color: #fff !important;
}

.custom-choose {
    border-radius: 20px;
    padding: 1rem;
    cursor: pointer;
    border: 4px solid #dee2e6;
    color: var(--dark);
    transition: all .3s ease-in-out;

    div {
        border-bottom: 2px solid transparent;
        transition: all .3s ease-in-out;
    }

    &:has(> input:checked) {
        border-color: var(--primary);
        color: var(--primary);

        >div {
            border-bottom: 2px solid var(--primary);
        }
    }
}

ul.no-bullet {
    list-style-type: none;
}

.navbar.navbar-dark .navbar-nav .nav-link,
.navbar.navbar-dark .header-search-icon>a,
.navbar.navbar-dark .header-social-icon>a,
.navbar.navbar-dark .header-cart-icon>a,
.navbar.navbar-dark .header-language>a,
.navbar.navbar-dark .nav-bar-contact,
.top-bar.navbar-light,
.top-bar.navbar-light .header-search-icon>a,
.top-bar.navbar-light .header-social-icon>a,
.top-bar.navbar-light .header-cart-icon>a,
.top-bar.navbar-light .header-language>a,
.top-bar.navbar-light .top-bar-contact-list>a,
.top-bar.navbar-light .header-language.dropdown-style-01 .btn {
    color: var(--dark) !important;
}

.navbar.navbar-dark .navbar-nav>.dropdown.active>a,
.sticky .navbar.header-dark .navbar-nav>.dropdown.active>a,
.navbar.navbar-dark .navbar-nav>.nav-item.dropdown.megamenu:hover>a,
.navbar.navbar-dark .navbar-nav>.nav-item.dropdown.simple-dropdown:hover>a,
.sticky .navbar.navbar-light.header-dark .navbar-nav>.nav-item.dropdown.megamenu:hover>a,
.sticky .navbar.navbar-light.header-dark .navbar-nav>.nav-item.dropdown.simple-dropdown:hover>a {
    color: rgb(from var(--dark) r g b / .6) !important;
}

.sticky .navbar.header-light .btn.btn-white {
    background-color: #fff !important;
    border: #fff !important;
    color: var(--dark) !important;

    &:hover,
    &:focus-within {
        background-color: var(--dark) !important;
        color: #fff !important;
    }
}

.nav-link.disabled {
    opacity: .5;
    pointer-events: none !important;

    .nav-item:has(&) {
        cursor: not-allowed !important;
    }
}

.tab-style-06 {
    .nav-tabs>li.nav-item>a.nav-link {

        &:hover,
        &:focus,
        &.active,
        &.active:focus {
            border-color: var(--primary) !important;
        }
    }
}

/* landing-page */

.registration-wrapper {
    position: relative;
    margin-top: -100px;

    @media (width >=992px) {
        margin-top: -150px;
    }
}

/* daftar */

@media (width <=767px) {
    .tab-style-01 .nav-tabs>li.nav-item>a.nav-link:not(.active) {
        font-size: 12px;

        &::before {
            content: counter(slideNum);
            position: absolute;
            left: -10px;
        }

        span {
            display: none;
        }
    }

    .tab-style-01 .nav-tabs>li.nav-item>a.nav-link.active {
        font-size: 17px;

        &::before {
            content: counter(slideNum) ".";
            position: absolute;
            left: -25px;
        }
    }
}

/* 3rd party */

.swal2-title {
    line-height: 2;
}

.select2-container--default {
    &.select2-container--open {
        &.select2-container--below .select2-selection {
            border-radius: 25px 25px 0 0 !important;
        }

        &.select2-container--above .select2-selection {
            border-radius: 0 0 25px 25px !important;
        }
    }

    .select2-selection {
        border: 1px solid #ced4da !important;
        border-radius: 25px !important;
    }

    select.form-control-lg+& .select2-selection {
        padding: .5rem !important;
        height: 40.14px !important;

        .select2-selection__rendered {
            line-height: 25px !important;
        }
    }

    select.shadow-sm+& .select2-selection {
        box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075) !important;
    }
}

/* Home */

.ubaya-grid-equal {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    /* jarak antar kolom */
}

.ubaya-grid-equal .grid-item {
    display: flex;
    align-items: stretch;
}

.ubaya-grid-equal .blog-post {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

@media (max-width: 991px) {
    .ubaya-grid-equal {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575px) {
    .ubaya-grid-equal {
        grid-template-columns: 1fr;
    }
}

.ubaya-grid-equal .blog-post:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.same-height-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.same-height-row .col {
    display: flex;
    flex-direction: column;
}

.same-height-row .blog-post {
    flex: 1;
    /* membuat semua blog-post di kolom memiliki tinggi sama */
    display: flex;
    flex-direction: column;
}