/* Webpixels CSS */
/* Utility and component-centric Design System based on Bootstrap for fast, responsive UI development */
/* URL: https://github.com/webpixels/css */

@import url(https://unpkg.com/@webpixels/css@1.1.5/dist/index.css);

/* Bootstrap Icons */
@import url("https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.4.0/font/bootstrap-icons.min.css");

@font-face {
    font-family: 'upakarti';
    src: url('/assets/fonts/upakarti.ttf') format('truetype');
    font-weight: normal; /* Atau sesuai dengan font Anda */
    font-style: normal; /* Atau sesuai dengan font Anda */
}

@font-face {
    font-family: 'poppins';
    src: url('/assets/fonts/poppins.ttf') format('truetype');
    font-weight: normal; /* Atau sesuai dengan font Anda */
    font-style: normal; /* Atau sesuai dengan font Anda */
}

@font-face {
    font-family: 'sicret';
    src: url('/assets/fonts/sicret.ttf') format('truetype');
    font-weight: normal; /* Atau sesuai dengan font Anda */
    font-style: normal; /* Atau sesuai dengan font Anda */
}

@font-face {
    font-family: 'cooper';
    src: url('/assets/fonts/cooper.otf') format('opentype');
    font-weight: normal; /* Atau sesuai dengan font Anda */
    font-style: normal;  /* Atau sesuai dengan font Anda */
}

@font-face {
    font-family: 'recoleta';
    src: url('/assets/fonts/recoleta.otf') format('opentype');
    font-weight: normal; /* Atau sesuai dengan font Anda */
    font-style: normal;  /* Atau sesuai dengan font Anda */
}

.text-recoleta{
    font-family: 'recoleta', serif;
}

.text-poppins{
    font-family: 'poppins', sans-serif;
}

.text-logo{
    font-family: 'sicret', sans-serif;
}

.text2-logo{
    font-family: 'sicret', sans-serif;
    font-size: 100px;
    line-height: 100px;
    color: black;
}

.w-100{
    width: 100%;
}

.layer1 {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.layer2 {
    opacity: 0.35;
}





.rating {
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    user-select: none;
}

.rating > input {
    display: none;
}

.rating > label {
    position: relative;
    width: 1em;
    font-size: 30px;
    font-weight: 300;
    color: #FFD600;
    cursor: pointer;
}

.rating > label::before {
    content: "\2605";
    position: absolute;
    opacity: 0;
}

.rating > input:checked ~ label:before {
    opacity: 1;
}

/* .rating:hover > input:not(:disabled):checked ~ label:before {
    opacity: 0.4;
} */

/* Tambahan untuk label ketika tidak disabled */
/* .rating > input:not(:disabled):hover ~ label:before {
    opacity: 0.4;
} */

/* Menambahkan properti untuk label ketika disabled */
.rating > input:disabled ~ label {
    pointer-events: none; /* Memastikan label tidak responsif ketika disabled */
}


.card-wrapper::-webkit-scrollbar {
    display: none; /* Menghilangkan scrollbar */
}

.vw-80{
    width: 80vw;
}


#togglePassword {
    position: absolute;
    right: 40px;
    top: 65%;
    transform: translateY(-50%);
}


.container {
    overflow: hidden;
}


/* ================================
   Custom Button Styles (Bootstrap)
   ================================ */

/* --- Green Button --- */
.btn-green {
  color: #fff;
  background-color: #0F5B36;
  border-color: #0F5B36;
}
.btn-green:hover {
  color: #fff;
  background-color: #0c472b;
  border-color: #0a3d25;
}
.btn-green:focus, .btn-green.focus {
  color: #fff;
  background-color: #0c472b;
  border-color: #0a3d25;
  box-shadow: 0 0 0 0.25rem rgba(15, 91, 54, 0.5);
}
.btn-green:active, .btn-green.active, .show > .btn-green.dropdown-toggle {
  color: #fff;
  background-color: #0a3d25;
  border-color: #08341f;
}
.btn-green:disabled, .btn-green.disabled {
  color: #fff;
  background-color: #0F5B36;
  border-color: #0F5B36;
  opacity: 0.65;
}

/* --- Green Outline Button --- */
.btn-outline-green {
  color: #0F5B36;
  border-color: #0F5B36;
}
.btn-outline-green:hover {
  color: #fff;
  background-color: #0F5B36;
  border-color: #0F5B36;
}
.btn-outline-green:focus, .btn-outline-green.focus {
  box-shadow: 0 0 0 0.25rem rgba(15, 91, 54, 0.5);
}
.btn-outline-green:active, .btn-outline-green.active, .show > .btn-outline-green.dropdown-toggle {
  color: #fff;
  background-color: #0F5B36;
  border-color: #0F5B36;
}
.btn-outline-green:disabled, .btn-outline-green.disabled {
  color: #0F5B36;
  background-color: transparent;
  opacity: 0.65;
}

/* --- Red Button --- */
.btn-red {
  color: #fff;
  background-color: #A04140;
  border-color: #A04140;
}
.btn-red:hover {
  color: #fff;
  background-color: #863534;
  border-color: #772f2e;
}
.btn-red:focus, .btn-red.focus {
  color: #fff;
  background-color: #863534;
  border-color: #772f2e;
  box-shadow: 0 0 0 0.25rem rgba(160, 65, 64, 0.5);
}
.btn-red:active, .btn-red.active, .show > .btn-red.dropdown-toggle {
  color: #fff;
  background-color: #772f2e;
  border-color: #692929;
}
.btn-red:disabled, .btn-red.disabled {
  color: #fff;
  background-color: #A04140;
  border-color: #A04140;
  opacity: 0.65;
}

/* --- Red Outline Button --- */
.btn-outline-red {
  color: #A04140;
  border-color: #A04140;
}
.btn-outline-red:hover {
  color: #fff;
  background-color: #A04140;
  border-color: #A04140;
}
.btn-outline-red:focus, .btn-outline-red.focus {
  box-shadow: 0 0 0 0.25rem rgba(160, 65, 64, 0.5);
}
.btn-outline-red:active, .btn-outline-red.active, .show > .btn-outline-red.dropdown-toggle {
  color: #fff;
  background-color: #A04140;
  border-color: #A04140;
}
.btn-outline-red:disabled, .btn-outline-red.disabled {
  color: #A04140;
  background-color: transparent;
  opacity: 0.65;
}

#navbarVertical {
  background: linear-gradient(120deg, #C45D5C 0%, #1C7A4D 100%);
}


 #navbarLogo {
    width: 100%;
  }



  /* set warna primary dan RGB-nya untuk reuse */
:root{
  --bs-primary: #A04140;
  --bs-primary-rgb: 160,65,64; /* untuk rgba(...) */
}

/* Tombol primary (normal / hover / active / focus / disabled) */
.btn-primary {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  color: #ffffff;
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: rgba(var(--bs-primary-rgb), 0.92);
  border-color: rgba(var(--bs-primary-rgb), 0.92);
  color: #ffffff;
  text-decoration: none;
}
.btn-primary:active,
.btn-primary.active,
.btn-primary.show {
  background-color: rgba(var(--bs-primary-rgb), 0.86);
  border-color: rgba(var(--bs-primary-rgb), 0.86);
}
.btn-primary:focus {
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}
/* disabled */
.btn-primary.disabled,
.btn-primary:disabled {
  background-color: rgba(var(--bs-primary-rgb), 0.6);
  border-color: rgba(var(--bs-primary-rgb), 0.6);
  color: #ffffff;
  opacity: 0.85;
}

/* Outline variant */
.btn-outline-primary {
  color: var(--bs-primary);
  border-color: var(--bs-primary);
  background-color: transparent;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
  color: #fff;
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

/* Utility classes */
.bg-primary {
  background-color: var(--bs-primary) !important;
  color: #fff !important;
}
.text-primary {
  color: var(--bs-primary) !important;
}
.border-primary {
  border-color: var(--bs-primary) !important;
}

/* Form controls (checkbox / radio / switch when checked) */
.form-check-input:checked {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}
.form-range::-webkit-slider-thumb {
  background-color: var(--bs-primary);
  border: 1px solid rgba(var(--bs-primary-rgb), 0.9);
}

/* Links that use primary color */
a.text-primary:hover {
  color: rgba(var(--bs-primary-rgb), 0.9) !important;
}

/* Navbar (jika pakai .bg-primary pada navbar) */
.navbar.bg-primary,
.navbar.bg-primary .navbar-nav .nav-link {
  background-color: var(--bs-primary) !important;
  color: #fff !important;
}

  

  @media (max-width: 991.98px) {
    #navbarLogo {
      width: 20%;
    }
  }