/* FILTER CATEGORY @ ETALASE HOME */
  .category-btn.active {
    background-color: #191a19;
    color: #fff !important;
  }

/* BACKGROUND COLOR */
.bg-pink {
  background-color: #db8272;
}
.bg-blue {
  background-color: #5771bb;
}
.bg-green {
  background-color: #191a19 !important;
}

/* CARD OVERRIDE */
.card-header {
  border-bottom: none !important;
}

.card-footer {
  border-top: none !important;
}

/* NAVBAR TOGGLE*/
.navbar-toggler:focus {
  box-shadow: none;
  outline: none;
}

/* FONT */

.idr {
  font-size: 0.7em;
}
section > a {
    color: #d2ae68 !important;
    text-decoration: none !important;
}

.bg-gold {
  background-color: #d2ae68 !important;
}

.bg-gold-linear {
    background: linear-gradient(57deg, #d4a850, #d2ae68) !important;
    color: #fff;
  }

.clg {
    color: rgb(220, 184, 124);
}

.text-gold {
  color:#d2ae68 !important;
}

.btn-gold {
  background-color: #d2ae68;
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: 0.3s;
}

.btn-gold:hover {
  background-color: #b89355; /* sedikit lebih gelap saat hover */
}

.btn-outline-gold {
  background-color: transparent;
  color: #d2ae68;
  border: 2px solid #d2ae68;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: 0.3s;
}

.btn-outline-gold:hover {
  background-color: #d2ae68;
  color: white;
}


/* --- MODERN UI/UX RESTO STYLES --- */

:root {
    --brand-dark: #121212;
    --accent-gold: #ffc107;
    --bg-soft: #f8f9fa;
}

/* Sticky Header Styling */
.sticky-header {
    position: sticky !important;
    top: 0;
    z-index: 1050;
    background: #ffffff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

/* Top bar modern look */
.top-bar {
    background: var(--brand-dark) !important;
    font-size: 13px;
    letter-spacing: 0.3px;
}

/* Search Input Modern Pill Style */
.main-header .search-box input,
.d-md-none .global-search {
    background-color: #f1f3f5 !important;
    border: 1px solid transparent !important;
    font-size: 14px;
    transition: all 0.3s ease;
}

.main-header .search-box input:focus,
.d-md-none .global-search:focus {
    background-color: #ffffff !important;
    border-color: var(--accent-gold) !important;
    box-shadow: 0 0 0 4px rgba(255, 193, 7, 0.15) !important;
}

/* Search Icon Positioning */
.main-header .search-box i,
.d-md-none .position-relative i.mdi-magnify {
    color: #6c757d;
    font-size: 18px;
    left: 16px;
    z-index: 5;
}

/* Navbar Links Hover & Active Pill Effect */
.nav-bar .navbar-nav .nav-link {
    color: #495057;
    transition: all 0.25s ease;
    border-radius: 50px;
    padding: 8px 16px;
}

.nav-bar .navbar-nav .nav-link:hover {
    background-color: #f8f9fa;
    color: #000 !important;
    transform: translateY(-1px);
}

/* --- MOBILE APP UI ENHANCEMENTS & STABLE FLOATING CART --- */
.mobile-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1060;
    backdrop-filter: blur(12px);
    background-color: rgba(255, 255, 255, 0.98) !important;
    border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

/* Container Absolute untuk Mengunci Posisi Keranjang Tepat di Tengah Layar */
.floating-cart-container {
    position: absolute;
    left: 50%;
    top: -26px;
    transform: translateX(-50%);
    z-index: 1070;
}

/* Tombol Melayang Keranjang */
.floating-cart-badge {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #ffc107 13%, #62ff00 100%) !important;
    color: #121212;
    border: 4px solid #ffffff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15) !important;
    transition: transform 0.2s ease;
}

.floating-cart-badge:active {
    transform: scale(0.94);
}

.nav-item-bottom {
    text-decoration: none;
    font-size: 10px;
    transition: transform 0.2s ease, color 0.2s ease;
    flex: 1;
    padding: 4px 0;
}

.nav-item-bottom i {
    font-size: 20px;
    line-height: 1;
}

.nav-item-bottom:active {
    transform: scale(0.92);
}

/* Dropdown Menu Modern Radius */
.dropdown-menu {
    border-radius: 16px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
    border: 1px solid rgba(0,0,0,0.04) !important;
}

.dropdown-item {
    font-size: 13px;
    font-weight: 500;
    transition: background-color 0.2s ease;
}

.dropdown-item:hover {
    background-color: #fff8e1 !important;
    color: #b78103 !important;
}


/* MARGIN */
.mb-100 {
  margin-bottom:100px !important;
}

/* Pastikan tidak ada margin top di body agar menempel */
body {
  margin: 0;
}

  /* ==========================================
    MODERN MOBILE BANNER / CAROUSEL STYLING
    ========================================== */

  /* 1. Kartu Utama Banner (Melengkung & Ada Shadow Tipis) */
  .modern-banner-card {
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
      border: 1px solid rgba(0, 0, 0, 0.04);
      margin-bottom: 20px; /* Ruang untuk indicator */
  }

  .carousel-item {
      min-height: auto !important;
  }

  /* 2. Ukuran Gambar Banner di Mobile (Berjajar horizontal dengan teks) */
  .carousel-item .slider-image {
      max-height: 120px !important;
      width: 100% !important;
      object-fit: contain; /* Agar gambar tidak terpotong */
  }

  /* Efek transisi gambar */
  .carousel-item .slider-image {
      opacity: 0;
      transform: scale(0.95);
      transition: transform 0.6s ease, opacity 0.6s ease;
  }

  .carousel-item.active .slider-image {
      opacity: 1;
      transform: scale(1);
  }

  /* 3. Area Teks Banner */
  .carousel-caption-custom {
      text-align: left !important;
      padding: 12px 15px !important;
  }

  /* 4. Ukuran Judul Banner */
  .carousel-caption-custom h2.animate-title {
      font-size: 14px !important;
      font-weight: 700;
      color: #191a19;
      margin-bottom: 4px;
      display: -webkit-box;
      -webkit-line-clamp: 2; /* Maksimal 2 baris */
      -webkit-box-orient: vertical;
      overflow: hidden;
  }

  /* 5. Ukuran Deskripsi Banner */
  .carousel-caption-custom p.animate-desc {
      font-size: 11px !important;
      color: #666;
      margin-bottom: 8px !important;
      line-height: 1.3;
      display: -webkit-box;
      -webkit-line-clamp: 2; /* Maksimal 2 baris */
      -webkit-box-orient: vertical;
      overflow: hidden;
  }

  /* 6. Tombol Banner */
  .carousel-caption-custom .btn {
      padding: 4px 12px !important;
      font-size: 11px !important;
      border-radius: 20px;
      font-weight: 600;
  }

  /* 7. Animasi Masuk Teks */
  .carousel-caption-custom h2,
  .carousel-caption-custom p,
  .carousel-caption-custom a {
      opacity: 0;
      transform: translateY(10px);
  }

  .carousel-item.active .animate-title {
      animation: fadeSlideIn 0.6s ease forwards;
  }

  .carousel-item.active .animate-desc {
      animation: fadeSlideIn 0.6s ease forwards;
      animation-delay: 0.2s;
  }

  .carousel-item.active .animate-btn {
      animation: fadeSlideIn 0.6s ease forwards;
      animation-delay: 0.4s;
  }

  /* 8. Indikator Titik Carousel di Bawah */
  .carousel-indicators {
      bottom: -15px !important;
  }

  .carousel-indicators [data-bs-target] {
      width: 6px !important;
      height: 6px !important;
      border-radius: 50% !important;
      background-color: #ccc !important;
      border: none;
  }

  .carousel-indicators .active {
      width: 18px !important;
      border-radius: 4px !important;
      background-color: #2d5644 !important; /* Sesuaikan warna aktif */
  }

  /* 9. Sembunyikan Panah Navigasi di Mobile agar Lebih Bersih */
  #heroCarousel.carousel .carousel-control-prev,
  #heroCarousel.carousel .carousel-control-next {
      display: none !important; /* Di mobile biasanya orang swipe pakai jari */
  }



    @keyframes fadeSlideIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
    }

    .slider-image {
    width: 100%;
    height: auto;
    border-radius: 8px;
    transition: transform 0.5s ease, box-shadow 0.5s ease, filter 0.5s ease;
    display: block;
    }

    /* Hover effect */
    .slider-image:hover {
    transform: scale(1.05); /* zoom ringan */
    filter: brightness(1.1); /* sedikit lebih terang */
    }


/* BUTTON */
.btn-hover {
  position: relative;
  display: inline-block;
  padding: 6px 16px;
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
  border-radius: 20px;
  transition: all 0.3s ease;
  border: 1px solid transparent; /* agar saat hover tombol tidak “geser” */
  border-radius: 5px;
}

/* Hover efek: background + shadow + warna teks */
.btn-hover:hover {
  background: var(--green);
  color: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  border-color: var(--green);
  border-radius: 8px;
}

/* Tombol Cart */
.cart-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;  /* ukuran kotak tombol */
  height: 44px;
  color: var(--text);
  border-radius: 12px;
  transition: all 0.3s ease;
  border: 1px solid transparent;
  text-decoration: none;
  background: #fff; /* bisa diganti sesuai theme */
}

.cart-btn:hover {
  background: var(--green);
  color: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  border-color: var(--green);
}
/* FEATURED SERVICES */
.banner-card {
  height: 100%;
  position: relative;
  overflow: hidden;
  border-radius: .5rem; /* biar agak rounded */
}

.banner-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at top left,
    rgba(210, 174, 104, 0.9) 0%,
    rgba(210, 174, 104, 0.4) 70%,
    rgba(210, 174, 104, 0.0) 100%
  );
  color: #191a19;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.5rem;
  transition: all 0.4s ease;
  text-decoration: none;
}

/* Hover effect */
.banner-overlay:hover {
  background: radial-gradient(
    circle at top left,
    rgba(51, 93, 73, 0.9) 0%,    /* hijau tua */
    rgba(51, 93, 73, 0.4) 70%,
    rgba(51, 93, 73, 0.0) 100%
  );
  color: #fff; /* text putih saat hover */
  transform: scale(1.05); /* zoom sedikit */
}

.banner-card:hover .banner-overlay {
  background: rgba(18, 19, 18, 0.9); /* #191a19 */
  color: #fff; /* text jadi putih */
}

/* ==========================================
   ULTRA MODERN MOBILE APP PRODUCT UI/UX
   ========================================== */

.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Kategori Chip Ala Aplikasi Pesan Antar */
.category-chip {
    background-color: #f3f4f6 !important;
    color: #4b5563 !important;
    border: none !important;
    border-radius: 99px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 5px 12px !important;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.category-chip:hover, .category-chip.active-chip {
    background-color: #111111 !important; /* Warna tema utama */
    color: #ffffff !important;
    box-shadow: 0 3px 10px rgba(45, 86, 68, 0.25);
}

/* Kartu Produk Modern */
.modern-food-card {
    background: #ffffff;
    border-radius: 14px !important;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04) !important;
    border: 1px solid rgba(0, 0, 0, 0.04) !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.modern-food-card:active {
    transform: scale(0.97); /* Efek ketuk aplikasi native */
}

/* Container Gambar 1:1 Persegi Sempurna */
.card-img-container {
    width: 100%;
    aspect-ratio: 1 / 1; /* Memastikan kotak selalu 1:1 (persegi) otomatis */
    background: #f8f9fa;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Pastikan tag gambar mengisi penuh kotak 1:1 dengan mulus */
.card-img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Karena gambar aslinya sudah 1:1, cover tidak akan memotong bagian penting */
    transition: transform 0.3s ease;
}

/* Efek sedikit zoom saat card disentuh/di-hover (opsional, menambah kesan interaktif) */
.modern-food-card:hover .card-img-container img {
    transform: scale(1.05);
}

/* Floating Discount Badge (Pengganti Ribbon Jadul) */
.badge-floating-discount {
    position: absolute;
    top: 6px;
    left: 6px;
    background: linear-gradient(135deg, #ff4757, #ff6b81);
    color: #ffffff;
    font-size: 9px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 12px;
    box-shadow: 0 2px 5px rgba(255, 71, 87, 0.3);
    z-index: 2;
}

/* Sold Out Backdrop */
.sold-out-backdrop {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
}
.sold-out-backdrop span {
    background: #1f2937;
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 12px;
}

/* Judul Produk Clean 2 Baris */
.product-title-modern {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #1f2937;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 32px;
}

/* Tombol Pesan Minimalis Modern */
.btn-success-modern {
    background-color: #0c0c0c;
    color: #ffffff;
    border: none;
    font-size: 11px;
    font-weight: 600;
    transition: background-color 0.2s;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.btn-success-modern:hover {
    background-color: #181818;
    color: #ffffff;
}

/* Animasi Sembunyi/Tampil Filter Kategori */
.product-card {
    transition: all 0.3s ease;
    opacity: 1;
}
.product-card.hide {
    opacity: 0;
    transform: scale(0.9);
    pointer-events: none;
    display: none !important;
}

/* SECTION TEstimoni */
/* Kartu Ulasan Modern */
.testimonial-card-modern {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.04) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important;
    transition: transform 0.2s ease;
}

.testimonial-card-modern:hover {
    transform: translateY(-2px);
}

/* Marquee Track Container (Opsional jika menggunakan animasi berjalan otomatis) */
.logo-marquee {
    width: 100%;
    mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}

.logo-track {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding-bottom: 8px;
}

/* Sembunyikan scrollbar bawaan pada track marquee agar bersih */
.logo-track::-webkit-scrollbar {
    display: none;
}
.logo-track {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.logo-marquee:hover .logo-track {
  animation-play-state: paused; /* berhenti saat hover */
}

@keyframes scrollLogos {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); } /* geser setengah track, karena kita duplicate konten */
}

/* SECTION TAGLINE */
/* Lingkaran ikon dengan shadow */
.icon-circle-mitra {
  width: 42px;
  height: 42px;
  min-width: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f7941e, #ffcd91);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.icon-circle-mitra:hover {
  transform: scale(1.2);
  box-shadow: 0 6px 15px rgba(0,0,0,0.2);
}

.icon-circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f7941e, #ffcd91);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Efek hover lingkaran */
.icon-circle:hover {
  transform: scale(1.2);
  box-shadow: 0 6px 15px rgba(0,0,0,0.2);
}

/* Ikon di dalam lingkaran */
.tagline-icon {
  font-size: 32px;
  color: white;
}

/* Teks tagline */
.tagline-text {
  font-size: 1rem;
  font-weight: 500;
  color: #333;
  margin-top: 0.5rem;
}

/* SECTION FAQ */
.faq-accordion .faq-item {
  border-bottom: 1px solid #ddd;
  padding: 12px 0;
}

.faq-header {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
}

.faq-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease, padding 0.5s ease;
  padding: 0 0;
}

.faq-item.active .faq-body {
  max-height: 500px; /* atur sesuai kebutuhan */
  padding: 10px 0;
}

.arrow-icon {
  transition: transform 0.3s ease;
}

.faq-item.active .arrow-icon {
  transform: rotate(180deg);
}

/* FOOTER SECTION */
.footer-divider {
  margin: 0;
}
.footer-divider svg {
  display: block;
  width: 100%;
  height: auto;
  margin: -0.5px !important;
}

.footer-content {
  padding-top: 0;  /* hapus celah */
  padding-bottom: 0;
}

.bg-gradient-footer {
  background: linear-gradient(
    to bottom,
    #000000 0%,    /* bagian atas gelap */
    #191a19 100%   /* bagian bawah terang */
  );
}

.footer-grow-hover {
  display: inline-block; /* supaya transform bisa jalan */
  transition: transform 0.3s ease;
}

.footer-grow-hover:hover {
  transform: scale(1.1);
}

.btn-promo {
  background-color: rgb(210, 174, 104) !important; /* warna gold */
  color: #fff !important;
  border-radius: 30px;
  padding: 10px 24px;
  transition: all 0.3s ease;
}

.btn-promo:hover {
  background-color: rgb(220, 184, 124) !important; /* gold lebih terang saat hover */
  color: #fff !important;
  transform: translateY(-2px) !important; /* sedikit efek naik */
}

.divider-path {
  fill: #000;
}

.footercpoint {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  padding: 5px;
  height: 36px;
  width: 71px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  background: #fff; /* biar logo lebih jelas */
}

.footercpoint:hover {
  background: #fce7be; /* biar logo lebih jelas */
}

.footercpoint img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
}

.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;   /* diameter */
  height: 40px;
  border-radius: 20%;
  background: rgba(255, 255, 255, 0.1); /* transparan putih */
  color: #fff;   /* icon putih */
  font-size: 18px;
  transition: all 0.3s ease;
  margin-right: 8px;
  text-decoration: none;
}

.social-icon:hover {
  background: #d2ae68; /* merah gradiasi bisa juga */
  color: #fff;
}

/* FLOATING BUTTON */
.floating-buttons {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 8888;
}

.fab-btn {
  position: relative;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 30px;
  text-decoration: none;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.fab-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 12px rgba(0,0,0,0.3);
}

/* Tooltip default (desktop) */
.fab-btn::after {
  content: attr(data-label);
  position: absolute;
  right: 60px;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.8);
  color: #fff;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 6px;
  opacity: 0;
  white-space: normal;
  word-break: keep-all;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.fab-btn:hover::after {
  opacity: 1;
}

.fab-btn.whatsapp { background-color: #ffffff00; }
.fab-btn.group { background-color: #25d366; }

/* Make sure the image fits inside the circular button */
.wa-channel-icon {
  width: 30px;   /* adjust as needed */
  height: 30px;  /* adjust as needed */
  object-fit: contain;
}

/* ==========================================
   FLASH SALE SWIPER MODERN MOBILE APP
   ========================================== */

.flashsale-swiper {
    padding: 5px 2px 35px 2px !important; /* Ruang bawah untuk pagination/indikator */
}

/* Lebar slide per item diatur agar pas 2 item terlihat sebagian di layar HP */
.flashsale-swiper .swiper-slide {
    width: 145px !important; /* Lebar card pas untuk mobile view */
    height: auto;
}

/* Container Gambar 1:1 Sempurna */
.flashsale-swiper .card-img-container {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #f8f9fa;
    overflow: hidden;
    position: relative;
}

.flashsale-swiper .card-img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Pagination Titik Swiper */
.flashsale-swiper .swiper-pagination {
    bottom: 0px !important;
}

.flashsale-swiper .swiper-pagination-bullet {
    width: 6px !important;
    height: 6px !important;
    background-color: #cbd5e1 !important;
    opacity: 1;
    transition: all 0.3s ease;
}

.flashsale-swiper .swiper-pagination-bullet-active {
    width: 16px !important;
    border-radius: 4px !important;
    background-color: #2d5644 !important;
}

/* Sembunyikan tombol panah kiri-kanan di layar mobile agar interaksi geser (swipe) lebih natural */
.flashsale-swiper .swiper-button-prev,
.flashsale-swiper .swiper-button-next {
    display: none !important;
}

  /* PRODUCT DETAIL */
  .main-img {
    transition: opacity 0.4s ease-in-out;
  }

  .main-img.fade-out {
    opacity: 0;
  }

  /* CART DETAIL */
.cart-item {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.cart-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

/* Tombol qty */
.qty-btn {
  transition: background-color 0.3s ease, transform 0.2s ease;
}
.qty-btn:hover {
  background-color: #f8f9fa;
  transform: scale(1.1);
}

/* Tombol hapus */
.delete-btn {
  transition: color 0.3s ease;
}
.delete-btn:hover {
  color: #ff4d4f;
}

/* Tombol checkout */
.checkout-btn {
  transition: all 0.3s ease;
}
.checkout-btn:hover {
  transform: translateY(-2px);
  background-color: #28a745 !important;
  box-shadow: 0 6px 16px rgba(40,167,69,0.4);
}

/* Tombol back */
.back-btn {
  transition: all 0.3s ease;
}
.back-btn:hover {
  transform: translateY(-2px);
  background-color: #d2ae68 !important;
  color: #fff !important;
  border: none;
}

.progress-steps {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.step {
  position: relative;
  z-index: 2;
  flex: 1;
}
.icon-wrapper {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #e9ecef;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #6c757d;
  margin: 0 auto;
  transition: all 0.3s ease;
}
.icon-wrapper.active {
  background: #d2ae68;
  color: #fff;
  box-shadow: 0 0 12px rgba(255, 234, 194, 0.4);
}
.step-line {
  flex: 1;
  height: 2px;
  background: #dee2e6;
  margin: 0 12px;
}

/* TOPBAR */
.scroll-wrapper {
  overflow: hidden;
  white-space: nowrap;
}

.scroll-content {
  display: inline-flex;
  animation: scroll-left 20s linear infinite;
}

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


/* TERMS & CONDITION */
  .accordion-button {
    cursor: pointer;
    transition: background 0.2s ease;
  }
  .accordion-button:hover {
    background-color: rgba(0, 123, 255, 0.1);
  }
  .accordion-body {
    font-size: 0.95rem;
    line-height: 1.6;
  }
  .accordion-collapse {
    overflow: hidden;
    height: 0;
  }

  /* ORDER HISTORY */
  .order-card .card-header {
      cursor: pointer;
      transition: background 0.2s ease;
  }
  .order-card .card-header:hover {
      background-color: #f8f9fa;
  }
  .toggle-icon {
      transition: transform 0.3s ease;
  }
  .collapse-content {
      transition: max-height 0.4s ease, opacity 0.4s ease;
  }

  /* ORDER STEP */
  .step-card {
    transition: all 0.3s ease;
    background: #fff;
  }
  .step-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
  }

  .gosend-icon {
    max-width:15%;
  }

  /* ABOUT US */
  .about-us-section p {
    font-size: 0.95rem;
    line-height: 1.7;
  }
  .highlight-card {
    transition: all 0.3s ease;
    background: #fff;
  }
  .highlight-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 18px rgba(0,0,0,0.15);
  }

  /* REGISTRATION */
  .benefit-box {
    background: url("../images/registration.png") no-repeat center center;
    background-size: cover;
    border-radius: 0.5rem;
    position: relative;
    min-height: 100%;
  }

  /* Overlay supaya teks tetap terbaca */
  .benefit-box::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.644);
    border-radius: 0.5rem;
  }

  .benefit-box > * {
    position: relative;
    z-index: 2;
  }
  .benefit-item {
    transition: transform 0.2s ease, color 0.2s ease;
    cursor: default;
  }
  .benefit-item:hover {
    transform: translateX(5px);
    color: #d2ae68; /* emas */
  }
  .benefit-item:hover i {
    color: #d2ae68;
  }

  /* LOGIN PAGE */
.login-section {
  background: url('../images/login-bg-people.png') no-repeat center center;
  background-size: cover;
  position: relative;
  min-height: 100vh; /* biar full layar */
}

.login-section .overlay {
  position: absolute;
  inset: 0;
  /* background: rgba(0,0,0,0.5); opacity */
  z-index: 0;
}

.login-section .container {
  position: relative;
  z-index: 1; /* konten di atas overlay */
}

 /* Warna icon default */
  .input-icon {
    font-size: 1.3rem;
    color: #aaa;
    transition: color 0.3s ease;
  }

  /* Saat input fokus, icon berubah hijau */
  .form-control:focus + .input-icon,
  .form-control:focus ~ .input-icon {
    color: #191a19; /* Bootstrap success */
  }

  /* SWAL ALERT */
  /* ===== SWEETALERT2 CUSTOM THEME (RUBIC WEB STYLE) ===== */

/* Warna utama background popup */
.swal2-popup {
  background: #ffffff !important; /* hijau tua */
  color: #191a19 !important; /* teks putih */
  border-radius: 14px !important;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.4) !important;
  padding: 1rem 1rem 1rem !important;
}

/* Judul */
.swal2-title {
  color: #353535 !important; /* gold untuk judul */
  font-size: 1.3rem;
}

/* Isi teks */
.swal2-html-container {
  color: #4d4d4d !important;
}

.swal2-icon {
  transform: scale(0.6) !important; /* perkecil ikon keseluruhan */
  margin: 0.5rem auto !important;
}

.swal2-icon-content {
  font-size: 2rem !important; /* teks di dalam ikon (misal tanda ! atau i) */
}

/* Tombol konfirmasi */
.swal2-confirm {
  background-color: #191a19 !important; /* gold */
  color: #ffffff !important; /* hijau tua */
  font-weight: 600 !important;
  border-radius: 8px !important;
  border: none !important;
  transition: background-color 0.2s ease-in-out;
}

.swal2-confirm:hover {
  background-color: #e8c47c !important; /* gold lebih terang */
}

/* Tombol batal */
.swal2-cancel {
  background-color: transparent !important;
  color: #d2ae68 !important;
  border: 1px solid #d2ae68 !important;
  border-radius: 8px !important;
}

.swal2-cancel:hover {
  background-color: rgba(210, 174, 104, 0.2) !important;
}

/* Warna ikon */
.swal2-icon.swal2-success {
  border-color: #d2ae68 !important;
  color: #d2ae68 !important;
}

.swal2-icon.swal2-error {
  border-color: #f87171 !important;
  color: #f87171 !important;
}

.swal2-icon.swal2-warning {
  border-color: #d2ae68 !important;
  color: #d2ae68 !important;
}

.swal2-icon.swal2-info {
  border-color: #91e6ff !important;
  color: #91e6ff !important;
}

/* Progress bar (jika pakai timer) */
.swal2-timer-progress-bar {
  background: #d2ae68 !important;
}


/* MEMBER PROFILE SIDE NAVBAR */
/* Default (mobile): tetap horizontal scrollable */
.nav-tabs-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* === DESKTOP MODE: ubah ke sidebar kiri === */
@media (min-width: 992px) {
  .nav-tabs-wrapper {
    float: left;
    width: 250px;
    margin-right: 30px;
  }

  .nav-tabs-wrapper .nav {
    flex-direction: column !important;
    border: none;
    background: #fff;
    border-radius: 0.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    overflow: hidden;
  }

  .nav-tabs-wrapper .nav .nav-link {
    border: none;
    border-left: 4px solid transparent;
    border-radius: 0;
    text-align: left;
    padding: 12px 16px;
    color: #555;
    font-weight: 500;
    display: flex;
    align-items: center;
    transition: all 0.25s ease;
  }

  .nav-tabs-wrapper .nav .nav-link i {
    font-size: 1.2rem;
    margin-right: 10px;
    transition: color 0.25s ease;
  }

  /* Hover efek */
  .nav-tabs-wrapper .nav .nav-link:hover {
    background: #f9f9f9;
    color: #191a19;
  }

  /* customer dashboard sidebar hover */
  .nav-tabs-wrapper .nav-item .nav-link.custom-tab-hover {
    width: 100%;
    display: flex;
    align-items: center;
  }

  /* Hover & Active full width */
  .nav-tabs-wrapper .nav-item .nav-link.custom-tab-hover:hover,
  .nav-tabs-wrapper .nav-item .nav-link.custom-tab-hover.active {
    background: linear-gradient(to right, #fff1b0, #ffffff) !important;
    color: #000 !important;
  }

  /* Icon ikut hitam */
  .nav-tabs-wrapper .nav-item .nav-link.custom-tab-hover:hover i,
  .nav-tabs-wrapper .nav-item .nav-link.custom-tab-hover.active i {
    color: #000 !important;
  }

  /* end customer dashboard sidebar hover */

  /* Hover ikon berubah warna */
  .nav-tabs-wrapper .nav .nav-link:hover i {
    color: #191a19;
  }

  /* Active state */
  .nav-tabs-wrapper .nav .nav-link.active {
    background: linear-gradient(to right, #fff8e1, #fff);
    border-left-color: #191a19;
    color: #000;
    font-weight: 600;
  }

  .nav-tabs-wrapper .nav .nav-link.active i {
    color: #191a19;
  }
  
}

/* Tambahan kecil: agar tab mobile lebih rapi */
.nav-tabs .nav-link {
  white-space: nowrap;
}


/* PARTNER CARD */
.bg-gradient-partner {
  background: linear-gradient(135deg, #fff8e1, #ffffff);
}

.partner-card {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;   /* semua slide sama */
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  transition: transform 0.35s ease;
}

.partner-card:hover {
  transform: translateY(-6px) scale(1.02);
}

/* IMAGE */
.partner-card img {
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 18px;
  display: block;
}

.partnerSwiper {
  visibility: hidden; /* sembunyikan dulu */
}

.partnerSwiper.ready {
  visibility: visible; /* tunjukkan setelah Swiper inisialisasi */
}

.partnerSwiper,
.partnerSwiper .swiper-wrapper {
  width: 100%;
  height: 100%;
  min-height: 250px; /* minimal tinggi saat load */
}

.partnerSwiper .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Testimoni Slider */
.testimonial-card {
  background: #fff;
  border-radius: 20px;
  padding: 30px;
  height: 100%;
  box-shadow: 0 20px 50px rgba(0,0,0,0.08);
  transition: all .4s ease;
}

.testimonial-card:hover {
  transform: translateY(-6px);
}

.stars {
  color: #ffc107;
  font-size: 20px;
  margin-bottom: 10px;
}

.testimonial-card p {
  font-style: italic;
  color: #555;
}

.profile {
  display: flex;
  align-items: center;
  margin-top: 20px;
  gap: 12px;
}

.profile img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
}

.profile small {
  display: block;
  color: #999;
}

/* ===============================
   TESTIMONIAL MODERN
================================ */

.testimonial-item {
    min-width: 260px;
    max-width: 260px;
}

.testimonial-card {
    background: #fff;
    border-radius: 16px;
    padding: 16px;
    height: 100%;
    box-shadow: 0 8px 20px rgba(0,0,0,0.06);
    transition: transform .25s ease, box-shadow .25s ease;
}

.testimonial-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 28px rgba(0,0,0,0.08);
}

/* Header */
.testimonial-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.testimonial-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}

.avatar-placeholder {
  background: linear-gradient(135deg, #ffb703, #fb8500);
  color: #fff;
  font-weight: 700;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
}

/* Name */
.testimonial-name {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
}

/* Rating */
.testimonial-rating {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #f5b301; /* warna emas */
}

.testimonial-rating i {
    font-size: 12px;
}

/* Text */
.testimonial-text {
    font-size: 13px;
    line-height: 1.6;
    color: #555;
    margin: 0;
}

.testimonial-rating .bi-star-fill {
    color: #f4b400; /* emas / makanan */
    font-size: 14px;
}

.testimonial-rating .rating-text {
    font-size: 13px;
    color: #555;
    font-weight: 500;
}

/* .testimonial-rating {
    background: #fff7e6;
    padding: 10px 10px;
    border-radius: 20px;
} */

/* Mobile */
@media (max-width: 767px) {
    .testimonial-item {
        min-width: 220px;
    }
}


/* ======================================
   MATIKAN SEMUA SHADOW KHUSUS SLIDER INI
   ====================================== */

.slider-clean *,
.slider-clean *::before,
.slider-clean *::after {
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
}

/* Pastikan slide tidak pudar */
.slider-clean .swiper-slide {
  opacity: 1 !important;
  transform: none !important;
  background: transparent !important;
}

/* Card solid tanpa efek */
.slider-clean .partner-card,
.slider-clean .testimonial-card {
  background: #fff !important;
  border: 1px solid #eee;
}

/* Hilangkan efek overlay pseudo-element */
.slider-clean .partner-card::before,
.slider-clean .partner-card::after,
.slider-clean .testimonial-card::before,
.slider-clean .testimonial-card::after {
  content: none !important;
}
/* TRACKING GOSEND PAGE */
#trackingOverlay.hidden {
    display: none !important;
}
#trackingOverlay {
      position: fixed;
      background: #191a19;
      pointer-events: auto; /* iframe tetap bisa di klik */
      z-index: 999999999999;
      display: none;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      padding: 15px;
      box-sizing: border-box;
      color: white;
      text-align: center;
  }

  /* Tombol tetap clickable */
  #trackingOverlay button {
      pointer-events: auto;
  }

  @media (max-width: 991px) {
      #trackingOverlay {
          display: flex !important;
          top: 0 !important;
          left: 0 !important;
          width: 100% !important;
          height: 200px; /* tinggi overlay mobile, bisa diubah */
          flex-direction: column;
          justify-content: center;
          align-items: center;
          padding: 20px;
      }
  }

  .icon-box {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
  }