/* -------------------------------------------------------------------------- */
:root{
  --header-h: 64px;        /* tinggi navbar */
  --sidebar-w: 240px;      /* lebar sidebar normal */
  --sidebar-w-mini: 72px;  /* lebar sidebar collapsed (ikon-only) */
}
/* -------------------------------------------------------------------------- */
.form-control.bg-dark::placeholder{
  color: rgba(255, 255, 255, 0.7) !important; /* Warna putih transparan */
  opacity: 1; /* Pastikan opacity tidak berubah di Firefox */
}
/* -------------------------------------------------------------------------- */
.btn-small{
  --bs-btn-padding-y: .25rem !important;
  --bs-btn-padding-x: .5rem !important;
  --bs-btn-font-size: .70rem !important;
}
/* -------------------------------------------------------------------------- */
.border-secondary{
  --bs-border-opacity: 0.5 !important;
}
/* -------------------------------------------------------------------------- */
.height-fit{
    height: fit-content;
}
.width-fit{
    width: fit-content;
}
/* -------------------------------------------------------------------------- */
.max-h-15{
    max-height: 15vh;
}
.max-h-25{
    max-height: 25vh;
}
.max-h-50{
    max-height: 50vh;
}
.max-h-75{
    max-height: 75vh;
}
.max-h-100{
    max-height: 100vh;
}
.min-h-25{
    min-height: 25vh;
}
.min-h-50{
    min-height: 50vh;
}
.min-h-60{
    min-height: 60vh;
}
.min-h-70{
    min-height: 70vh;
}
/* -------------------------------------------------------------------------- */
.opacity-50{
  --bs-bg-opacity: .5;
}
/* -------------------------------------------------------------------------- */
.fs-7{
  font-size: 0.7rem!important;
}
.fs-8{
  font-size: 0.8rem!important;
}
.fs-9{
  font-size: 0.9rem!important;
}
/* -------------------------------------------------------------------------- */
.bi-1x {
  font-size: 1rem;
}
.bi-2x {
  font-size: 2rem;
}
.bi-3x {
  font-size: 3rem;
}
.bi-4x {
  font-size: 4rem;
}
.bi-5x {
  font-size: 5rem;
}
/* -------------------------------------------------------------------------- */
input[type="datetime-local"]::-webkit-inner-spin-button,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    margin:0;
}
input[type="datetime-local"]::-webkit-datetime-edit {
    display:none;
}
/* -------------------------------------------------------------------------- */
.bg-o-1{
  --bs-bg-opacity: .1;
}
.bg-o-2{
  --bs-bg-opacity: .2;
}
.bg-o-3{
  --bs-bg-opacity: .3;
}
.bg-o-4{
  --bs-bg-opacity: .4;
}
.bg-o-5{
  --bs-bg-opacity: .5;
}
/* -------------------------------------------------------------------------- */
.img-icon{
    max-width: 2.5rem;
    height:auto;
}
.img-cover{
    object-fit: cover;
}
.img-shadow{
    background:rgba(0,0,0,.45);
}
.img-navbar {
  width: auto;
  height: 32px;
  max-width: 150px;
  object-fit: contain;
}
/* -------------------------------------------------------------------------- */
.sort_button { cursor: grab; }
.sortable-ghost { opacity: .5; }
.sortable-chosen { box-shadow: 0 0 0 2px rgba(13,110,253,.35) inset; }
/* -------------------------------------------------------------------------- */
.article h1{
  font-size: 1.8rem;
}
.article h2{
  font-size: 1.6rem;
}
.article h3{
  font-size: 1.4rem;
}
.article h4{
  font-size: 1.3rem;
}
.article h5{
  font-size: 1.2rem;
}
.article h6{
  font-size: 1.1rem;
}
/* -------------------------------------------------------------------------- */
.ratio-3x4{
  --bs-aspect-ratio: 133%;
}
.ratio-4x5{
  --bs-aspect-ratio: 125%;
}
.ratio-jumbotron {
  --bs-aspect-ratio: 37.5%;
}
@media (min-width: 768px) {
  .ratio-jumbotron {
    --bs-aspect-ratio: 37.5%;
  }
}
/* -------------------------------------------------------------------------- */
.btn-qty{
  width: 32px;
  height: 32px;
}
/* -------------------------------------------------------------------------- */
.ratio-hero {
  --bs-aspect-ratio: 25%; /* 1920x480 */
}

.hero-info-section {
  background: #212529;
  padding-bottom: 1rem;
}

.hero-info-wrapper {
  margin-top: -160px; /* info produk masuk full ke slider */
  position: relative;
  z-index: 2;
}

.hero-info-card {
  min-height: 140px;
  background: rgba(0, 0, 0, .20);
  backdrop-filter: blur(10px);
}

.hero-thumb {
  width: 120px;
  height: 120px;
}

@media (max-width: 575.98px) {
  .ratio-hero {
    --bs-aspect-ratio: 65%;
  }

  .hero-info-wrapper {
    margin-top: -110px;
  }

  .hero-info-card {
    min-height: 92px;
  }

  .hero-thumb {
    width: 72px;
    height: 72px;
  }

  .hero-title {
    font-size: 1rem;
  }

  .hero-desc {
    font-size: .825rem;
  }

  .hero-info-card {
    backdrop-filter: blur(2px);
  }
}
/* -------------------------------------------------------------------------- */
.flash-sale-slider {
  overflow: hidden;
  width: 100%;
}

.flash-sale-track {
  display: flex;
  gap: 1rem;
  width: max-content;
  animation-name: flashSaleMarquee;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.flash-sale-slider:hover .flash-sale-track {
  animation-play-state: paused;
}

.flash-sale-item {
  width: 180px;
  flex: 0 0 180px;
}

@keyframes flashSaleMarquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@media (max-width: 575.98px) {
  .flash-sale-item {
    width: 150px;
    flex-basis: 150px;
  }
}