/* 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: #4794d1 !important;
    text-decoration: none !important;
}

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

.bg-gold-linear {
    background: linear-gradient(57deg, #095dbd, #4794d1) !important;
    color: #fff;
  }

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

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

.btn-gold {
  background-color: #4794d1;
  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: #4794d1;
  border: 2px solid #4794d1;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: 0.3s;
}

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


/* NAVBAR */
.sticky-header {
  /* position: sticky; sticky header */
  position: static !important;
  top: 0;
  z-index: 1050;
  width: 100%;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

/* RADIO CHECK */
.form-check-input:checked {
    background-color: #4794d1 !important;
    border-color: #4794d1 !important;
}

/* TOOGLER MENU */
/* Sembunyikan ikon bawaan Bootstrap */
.navbar-toggler .navbar-toggler-icon {
  display: none;
}

/* Custom Hamburger Lines - ukuran 2x, jarak lebih rapat */
.custom-toggler {
  border: none !important;
  background: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;             /* jarak diperpendek dari 12px ke 8px */
  width: 30px;           /* 2x dari 30px */
  height: 48px;          /* 2x dari 24px */
  position: relative;
  z-index: 999;
}

.toggler-line {
  display: block;
  height: 6px;           /* 2x dari 3px */
  width: 100%;
  background-color: #79acd7;
  transition: all 0.3s ease-in-out;
  border-radius: 3px;
}

/* Transform to X when expanded */
.custom-toggler[aria-expanded="true"] .toggler-line:nth-child(1) {
  transform: rotate(45deg) translate(10px, 10px);
}

.custom-toggler[aria-expanded="true"] .toggler-line:nth-child(2) {
  opacity: 0;
}

.custom-toggler[aria-expanded="true"] .toggler-line:nth-child(3) {
  transform: rotate(-45deg) translate(10px, -10px);
}


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

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

    /* SLIDER */
    .carousel-item {
      min-height: 400px;
    }
    .carousel-item .row {
      align-items: center;
    }
    /* Efek gambar saat slide aktif */
    .carousel-item .slider-image {
    opacity: 0;
    transform: scale(0.95);
    transition: transform 0.8s ease, opacity 0.8s ease, filter 0.8s ease;
    }

    .carousel-item.active .slider-image {
    opacity: 1;
    transform: scale(1);
    filter: brightness(1.05); /* sedikit lebih terang saat muncul */
    }

    /* Opsional: hover tetap berlaku */
    .carousel-item.active .slider-image:hover {
    transform: scale(1.05);
    filter: brightness(1.1);
    }

    .carousel-caption-custom {
      text-align: left;
      padding: 40px;
    }
    .carousel-caption-custom h2 {
      font-size: 2rem;
      font-weight: 700;
      color: #191a19;
    }
    .carousel-caption-custom p {
      font-size: 1rem;
      margin: 15px 0;
      color: #555;
    }
    .carousel-caption-custom .btn {
      background-color: #191a19;
      color: #fff;
      border-radius: 30px;
      padding: 10px 24px;
    }
    .carousel-caption-custom .btn:hover {
      background-color: #191a19;
    }
    .carousel-image {
      max-width: 100%;
      height: auto;
    }

    .carousel-caption-custom h2,
    .carousel-caption-custom p,
    .carousel-caption-custom a {
    opacity: 0;
    transform: translateY(20px);
    }

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

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

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

    /* Panah carousel bulat & kecil */
    #heroCarousel.carousel .carousel-control-prev,
    #heroCarousel.carousel .carousel-control-next {
    width: 40px !important;
    height: 40px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    position: absolute !important;
    z-index: 10 !important;
    background-color: rgba(45, 86, 68, 0.7) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    transition: background-color 0.3s ease !important;
    }

    #heroCarousel.carousel .carousel-control-prev:hover,
    #heroCarousel.carousel .carousel-control-next:hover {
    background-color: rgba(45, 86, 68, 1) !important;
    }

    #heroCarousel.carousel .carousel-control-prev {
    left: 15px !important;
    }

    #heroCarousel.carousel .carousel-control-next {
    right: 15px !important;
    }

    #heroCarousel.carousel .carousel-control-prev span,
    #heroCarousel.carousel .carousel-control-next span {
    font-size: 20px !important;
    color: #fff !important;
    }



    @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(51, 93, 73, 0.9); /* #191a19 */
  color: #fff; /* text jadi putih */
}

/* ETALASE PRODUK */
.etalase h2 {
  font-weight: 700;
}

.categories .btn {
  border-radius: 30px;
}

.product-card .card {
  border: 1px solid #e0e0e0;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-card .card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

.product-card {
  transition: all 0.4s ease; /* smooth untuk transform & opacity */
  opacity: 1;
  transform: translateY(0);
}

/* saat disembunyikan */
.product-card.hide {
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none; /* agar tidak bisa diklik */
  position:absolute;
}

.ribbon {
  width: 100px;
  height: 100px;
  overflow: hidden;
  position: absolute;
  top: -5px;
  right: -5px;
}

.ribbon span {
  position: absolute;
  display: block;
  width: 140px;
  padding: 0px 0;
  background: linear-gradient(135deg, #ff4d4d, #c90000); /* merah */
  color: #fff;
  font-weight: bold;
  text-align: center;
  font-size: 12px;
  transform: rotate(45deg);
  top: 7px;
  right: -52px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.3);
}
.badge-discount {
  display: inline-block;
  background: linear-gradient(135deg, #ff4d4d, #e60000);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 999px; /* pill shape */
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  white-space: nowrap;
}

/* SECTION SHIPPING */
.logo-marquee {
  width: 100%;
  overflow: hidden;
}

.logo-track {
  display: flex;
  animation: scrollLogos 15s linear infinite;
}

.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, #98d1cd, #54b772);
  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, #98d1cd, #54b772);
  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: #4794d1; /* 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: 9999;
}

.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 section */
.swiper {
  padding: 20px 0;
}
.swiper-slide {
  height: auto;
}
.sold-out-overlay {
    background-color: rgba(0, 0, 0, 0.5);
    font-weight: bold;
    font-size: 1rem;
    z-index: 10;
  }
  /* Tombol Prev & Next Custom */
  .flashsale-swiper .swiper-button-prev,
  .flashsale-swiper .swiper-button-next {
    width: 36px;
    height: 36px;
    background-color: #ffffff;
    color: #263d32;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
  }

  .flashsale-swiper .swiper-button-prev:hover,
  .flashsale-swiper .swiper-button-next:hover {
    background-color: #263d32;
    color: #fff;
  }

  /* Ganti default icon Swiper (bisa juga gunakan font-icon jika mau) */
  .flashsale-swiper .swiper-button-prev::after,
  .flashsale-swiper .swiper-button-next::after {
    font-size: 16px;
  }

  /* Posisikan tombol lebih rapi */
  .flashsale-swiper .swiper-button-prev {
    left: 20px;
  }

  .flashsale-swiper .swiper-button-next {
    right: 20px;
  }

  /* Optional: Bulatkan pagination bullet */
  .flashsale-swiper .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background-color: #ccc;
    opacity: 1;
    transition: background 0.3s ease;
  }

    .flashsale-swiper {
    padding-bottom: 70px;
    }

    .swiper-pagination {
    margin-top: 50px !important;
    text-align: center;
    }

  .flashsale-swiper .swiper-pagination-bullet-active {
    background-color: #263d32;
  }


  /* 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: #4794d1 !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: #4794d1;
  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%);
  }
}

/* Tambahan untuk mobile */
@media (max-width: 767px) {
  .top-bar {
    flex-direction: column;
    text-align: center;
  }
  .top-bar .d-flex {
    flex-direction: column;
    gap: 4px;
    margin-top: 5px;
  }

  .main-header {
    padding: 10px 16px;
  }

  .main-header .search-box {
    width: 100%;
    margin-top: 8px;
  }

  .main-header .search-box input {
    height: 44px;
    font-size: 14px;
  }

  /* Mega menu di mobile jadi stack */
  .mega-dropdown .row {
    flex-direction: column;
  }
  .mega-dropdown .col-3,
  .mega-dropdown .col-9 {
    width: 100%;
  }
  .mega-dropdown img {
    max-width: 150px;
    margin: 10px auto;
    display: block;
  }
}

/* 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: #4794d1; /* emas */
  }
  .benefit-item:hover i {
    color: #4794d1;
  }

  /* 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: #4794d1 !important;
  border: 1px solid #4794d1 !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: #4794d1 !important;
  color: #4794d1 !important;
}

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

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

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

/* Progress bar (jika pakai timer) */
.swal2-timer-progress-bar {
  background: #4794d1 !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;
  }

  /* 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, #77ffaa, #25d366);
  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;
  }