/* =======================================================================
   RAREZONE CLEAN DARK — NAVY x RED (NO GOLD)  — BATCH 1
   Scope ketat di .rz-experimental biar nggak nabrak CSS lama
   ======================================================================= */

/* -------------------------------------------------
   0) TOKENS (sedikit lebih "terang" dari navy lama)
-------------------------------------------------- */
.rz-experimental,
.rz-experimental :root {
  --rz-bg-top: #1a2440;    /* lebih “open” dari sebelumnya */
  --rz-bg-mid: #1b2747;
  --rz-bg-bottom: #122038;
  --rz-surface: #1c2743;   /* permukaan konten */
  --rz-card: #202e4e;      /* kartu */
  --rz-nav: #1a2340;       /* header */
  --rz-footer: #1a2340;    /* footer */
  --rz-border: rgba(255,255,255,0.08);
  --rz-price-color: #ffffff;

  --rz-text: #ffffff;
  --rz-text-muted: #b7bfcd;

  --rz-red-1: #f3474c;
  --rz-red-2: #e41f25;
  --rz-red-3: #b9151a;

  --rz-grad-red: linear-gradient(90deg, var(--rz-red-2) 0%, var(--rz-red-1) 100%);
  --rz-grad-panel: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));

  --rz-shadow-soft: 0 8px 28px rgba(0,0,0,.28);
  --rz-glow-red: 0 0 10px rgba(228,31,37,.28), 0 0 22px rgba(228,31,37,.18);

  /* kill variabel lama yang oranye/emas */
  --text-color: var(--rz-grad-red);
  --background-color: var(--rz-grad-red);
  --border-color: var(--rz-red-2);
}

/* ---------------------------------------
   1) CANVAS / BACKGROUND / TYPOGRAPHY
---------------------------------------- */
.rz-experimental {
  background: linear-gradient(180deg, var(--rz-bg-top) 0%, var(--rz-bg-mid) 55%, var(--rz-bg-bottom) 100%) !important;
  color: var(--rz-text);
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  position: relative;
  isolation: isolate;
  min-height: 100%;
}

.rz-experimental .rz-content-wrapper,
.rz-experimental body {
  background: transparent !important;
}

.rz-experimental .content {
  margin-top: 72px;
}
@media (min-width: 768px) { .rz-experimental .content { margin-top: 96px; } }

.rz-experimental h1, .rz-experimental h2, .rz-experimental h3,
.rz-experimental h4, .rz-experimental h5, .rz-experimental h6 {
  color: var(--rz-text);
  letter-spacing: .2px;
}
.rz-experimental p, .rz-experimental li, .rz-experimental span {
  color: rgba(255,255,255,.94);
}

/* ---------------------------------------
   2) PATTERN (ABSOLUTE — BUKAN FIXED)
   * tidak ngotak-atik file rarezone-pattern.css
---------------------------------------- */
.rz-experimental .rz-background-holder {
  position: absolute;
  inset: 0;
  z-index: 0; /* Naik biar di atas gradient background */
  pointer-events: none;
  background: transparent !important;
}

.rz-experimental .rz-pattern {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: url("/public/img/bg/pattern.svg") !important;
  background-repeat: repeat !important;
  background-size: var(--pattern-size, 500px) var(--pattern-size, 500px) !important;
  opacity: var(--pattern-opacity, 0.35) !important;
  filter: saturate(1.05) contrast(1.05);
  mix-blend-mode: soft-light;
  background-attachment: scroll !important;
}

/* fallback kalau pattern kosong */
.rz-experimental .rz-pattern:empty {
  background-image:
    radial-gradient(circle at 20% 25%, rgba(255,255,255,.06) 1px, transparent 1px),
    radial-gradient(circle at 70% 80%, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 90px 90px;
  opacity: .2;
}

/* ---------------------------------------
   3) HEADER / NAV / SIDEBAR
---------------------------------------- */
.rz-experimental nav {
  background-color: var(--rz-nav) !important; /* SOLID */
  border-bottom: 1px solid var(--rz-border) !important;
  box-shadow: 0 2px 14px rgba(0,0,0,.45);
  backdrop-filter: none !important;
}
.rz-experimental nav a {
  color: var(--rz-text) !important;
  transition: color .2s ease;
}
.rz-experimental nav a:hover { color: var(--rz-red-1) !important; }

.rz-experimental aside#logo-sidebar {
  background: var(--rz-nav) !important;
  border-right: 1px solid var(--rz-border) !important;
}

/* search box di header */
.rz-experimental nav .custom-input {
  background: rgba(255,255,255,.9) !important;
  color: #0f1720 !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  border-radius: 10px;
}
.rz-experimental nav .custom-input:focus {
  background: #fff !important;
  border-color: var(--rz-red-2) !important;
  box-shadow: 0 0 0 4px rgba(228,31,37,.20) !important;
  outline: none !important;
}

/* ---------------------------------------
   4) UTILITAS LAMA -> DIHARMONISASI NAVY
---------------------------------------- */
.rz-experimental .bg-murky-900,
.rz-experimental .bg-murky-800,
.rz-experimental .bg-murky-700,
.rz-experimental .bg-murky-600,
.rz-experimental .bg-title-product,
.rz-experimental .bg-dark {
  background-color: var(--rz-surface) !important;
  color: var(--rz-text) !important;
}
.rz-experimental .border-murky-800,
.rz-experimental .border-murky-800\/75,
.rz-experimental .border-murky-600 {
  border-color: var(--rz-border) !important;
}

/* ---------------------------------------
   5) BUTTONS / ACCENTS
---------------------------------------- */
.rz-experimental .x-bg-g,
.rz-experimental .x-btn-g,
.rz-experimental [class*="btn"],
.rz-experimental .btn-primary {
  background: var(--rz-grad-red) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 10px;
  font-weight: 700;
  box-shadow: var(--rz-glow-red);
  transition: transform .15s ease, box-shadow .2s ease, opacity .2s ease;
}
.rz-experimental .x-bg-g:hover,
.rz-experimental .x-btn-g:hover,
.rz-experimental [class*="btn"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(228,31,37,.35);
}

/* tabs */
.rz-experimental .tab {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid var(--rz-border) !important;
  color: #fff !important;
  border-radius: 999px;
}
.rz-experimental .tab.active {
  background: var(--rz-grad-red) !important;
  border-color: rgba(255,255,255,.16) !important;
}

/* ---------------------------------------
   6) CARDS / LIST / SKELETON
---------------------------------------- */
.rz-experimental .card,
.rz-experimental .rz-card,
.rz-experimental .card-tabs {
  background: var(--rz-card) !important;
  border: 1px solid var(--rz-border) !important;
  border-radius: 14px !important;
  box-shadow: var(--rz-shadow-soft);
  transition: border-color .2s, box-shadow .25s;
}
.rz-experimental .card:hover {
  border-color: var(--rz-red-2) !important;
  box-shadow: 0 0 18px rgba(228,31,37,.25);
}

.rz-experimental .overlay {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  background: linear-gradient(180deg, rgba(18,25,37,.32), rgba(18,25,37,.66)) !important;
  border-top: 1px solid rgba(255,255,255,.08);
}

.rz-experimental .skeleton-banner,
.rz-experimental .skeleton-fs,
.rz-experimental .skeleton-card,
.rz-experimental .skeleton-berita {
  background-color: rgba(255,255,255,.08) !important;
}

/* ribbons (diskon) full merah */
.rz-experimental .ribbon span {
  background: linear-gradient(180deg, var(--rz-red-1), var(--rz-red-3)) !important;
}
.rz-experimental .ribbon span::before,
.rz-experimental .ribbon span::after {
  border-top-color: var(--rz-red-2) !important;
  border-left-color: var(--rz-red-2) !important;
  border-right-color: var(--rz-red-2) !important;
}

/* ---------------------------------------
   7) SWIPER / SHAPES
---------------------------------------- */
.rz-experimental .swiper-pagination-bullet {
  background: rgba(255,255,255,.6) !important;
}
.rz-experimental .swiper-pagination-bullet-active {
  background: var(--rz-red-2) !important;
  box-shadow: var(--rz-glow-red);
}

/* ---------------------------------------
   7) FLOATING SHAPES — PURE RED GLOW FIX
---------------------------------------- */
.rz-experimental .floating-shapes {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}

/* Shape utama */
.rz-experimental .floating-shapes .shape {
  position: absolute;
  border-radius: 50%;
  opacity: 0.45;
  background: radial-gradient(
    circle at 30% 30%,
    rgba(255, 0, 0, 0.9) 0%,
    rgba(200, 0, 0, 0.6) 40%,
    rgba(120, 0, 0, 0.3) 70%,
    transparent 100%
  );
  box-shadow:
    0 0 25px rgba(255, 0, 0, 0.25),
    0 0 60px rgba(255, 0, 0, 0.15);
  filter: blur(1px) saturate(1.4);
  mix-blend-mode: screen; /* bikin glow nyatu sama background navy */
  animation: floatUpFast 12s linear infinite, spin 18s linear infinite;
}

/* Responsif di mobile */
@media (max-width: 768px) {
  .rz-experimental .floating-shapes .shape {
    opacity: 0.4;
    filter: blur(1.3px) saturate(1.3);
  }
}

/* Animasi sama seperti sebelumnya */
@keyframes floatUpFast {
  from {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
  to {
    transform: translateY(-120vh) rotate(360deg);
    opacity: 1;
  }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
/* ---------------------------------------
   8) INPUTS / FORMS (incl. ORDER / PAYMENT)
---------------------------------------- */
.rz-experimental input[type="text"],
.rz-experimental input[type="password"],
.rz-experimental input[type="email"],
.rz-experimental input[type="number"],
.rz-experimental input[type="tel"],
.rz-experimental textarea,
.rz-experimental select,
.rz-experimental .form-control {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 10px !important;
  padding: 10px 12px !important;
  transition: all 0.25s ease !important;
}

.rz-experimental input:focus,
.rz-experimental textarea:focus,
.rz-experimental select:focus,
.rz-experimental .form-control:focus {
  background: #fff !important;
  border-color: var(--rz-red-2) !important;
  box-shadow: 0 0 0 4px rgba(228,31,37,.18) !important;
}
.rz-experimental ::placeholder { color: #6b7280 !important; }

/* area form card (login/register/order block) */
.rz-experimental .auth-card,
.rz-experimental .form-card,
.rz-experimental .bg-murky-800.form,
.rz-experimental .order-form,
.rz-experimental .payment-form,
.rz-experimental [class*="form-panel"] {
  background: var(--rz-grad-panel) !important;
  border: 1px solid var(--rz-border) !important;
  border-radius: 14px !important;
}

/* Payment methods — kartu radio generik */
.rz-experimental .payment-methods,
.rz-experimental [class*="payment-method"],
.rz-experimental [id*="payment-method"] {
  display: grid;
  gap: 10px;
}
.rz-experimental .payment-option,
.rz-experimental .payment-card,
.rz-experimental label[for*="payment"],
.rz-experimental label[for*="bank"],
.rz-experimental label[for*="e-wallet"],
.rz-experimental label[for*="va"] {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--rz-card) !important;
  border: 1px solid var(--rz-border) !important;
  border-radius: 12px !important;
  padding: 10px 12px;
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s, transform .1s;
}
.rz-experimental input[type="radio"][name*="payment"],
.rz-experimental input[type="radio"][id*="payment"],
.rz-experimental input[type="radio"][name*="metode"],
.rz-experimental input[type="radio"][id*="metode"] {
  accent-color: var(--rz-red-2);
}

/* state active (kalau markup pakai :checked + label) */
.rz-experimental input[type="radio"]:checked + label,
.rz-experimental .payment-card.active,
.rz-experimental .payment-option.active {
  border-color: var(--rz-red-2) !important;
  box-shadow: 0 0 0 4px rgba(228,31,37,.14);
  transform: translateY(-1px);
}

/* tombol “Bayar / Beli” */
.rz-experimental .btn-pay,
.rz-experimental button[id*="bayar"],
.rz-experimental button[name*="bayar"],
.rz-experimental a[href*="bayar"] {
  background: var(--rz-grad-red) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 10px;
  box-shadow: var(--rz-glow-red);
  font-weight: 800;
}

/* ---------------------------------------
   9) SEARCH OVERLAY
---------------------------------------- */
.rz-experimental #searchResults {
  background: linear-gradient(180deg, var(--rz-nav), var(--rz-surface)) !important;
  border: 1px solid var(--rz-border) !important;
  box-shadow: var(--rz-shadow-soft);
}
.rz-experimental .search-result a {
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
}

/* ---------------------------------------
   10) MODAL / BACKDROP
---------------------------------------- */
.rz-experimental #backdrop {
  background: rgba(0,0,0,.6) !important;
  backdrop-filter: blur(6px);
}
.rz-experimental #static-modal .rounded-lg {
  background: linear-gradient(180deg, var(--rz-nav), var(--rz-surface)) !important;
  border: 1px solid var(--rz-border) !important;
  color: #fff;
}

/* ---------------------------------------
   11) WAVES FOOTER (PAKAI VERSI FAVORITMU)
---------------------------------------- */
.rz-experimental .waves { filter: drop-shadow(0 8px 28px rgba(228,31,37,.22)); }
.rz-experimental .waves .parallax use:nth-child(1){ fill: rgba(215,44,44,0.08) !important; }
.rz-experimental .waves .parallax use:nth-child(2){ fill: rgba(215,44,44,0.12) !important; }
.rz-experimental .waves .parallax use:nth-child(3){ fill: rgba(215,44,44,0.18) !important; }
.rz-experimental .waves .parallax use:nth-child(4){ fill: var(--rz-footer) !important; }

/* ---------------------------------------
   12) FOOTER — NETRAL, BRAND MERAH
---------------------------------------- */
.rz-experimental footer {
  background-color: var(--rz-footer) !important; /* SOLID */
  border-top: 1px solid var(--rz-border);
  color: var(--rz-text);
}
.rz-experimental footer h2 {
  color: #fff;           /* no gold, no full merah default */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: .75rem;
}
.rz-experimental footer ul li a { color: var(--rz-text-muted) !important; }
.rz-experimental footer ul li a:hover { color: var(--rz-red-1) !important; text-decoration: underline; }
.rz-experimental footer hr { border-color: var(--rz-border) !important; }
.rz-experimental footer .social a { color: var(--rz-text) !important; }

 /* brand name di copyright → merah */
.rz-experimental footer hr + div span > a {
  color: var(--rz-red-1) !important;
  font-weight: 800 !important;
}

/* ---------------------------------------
   13) TEXT / LINKS / DECOR
---------------------------------------- */
.rz-experimental h3::after {
  content:"";
  display:block;
  width:40px;
  height:3px;
  margin-top:6px;
  border-radius:2px;
  background: var(--rz-red-2);
  box-shadow: var(--rz-glow-red);
}
@media (max-width:768px){ .rz-experimental h3::after{ width:28px; } }

.rz-experimental .text-gray-400,
.rz-experimental .text-gray-500,
.rz-experimental .text-muted { color: var(--rz-text-muted) !important; }

.rz-experimental a { color: var(--rz-red-2); transition: .22s; text-decoration: none; }
.rz-experimental a:hover { color: var(--rz-red-1); }

/* ---------------------------------------
   14) DATATABLES / TOAST / ALERTS
---------------------------------------- */
.rz-experimental table.dataTable,
.rz-experimental .dataTables_wrapper .dataTables_filter input,
.rz-experimental .dataTables_wrapper .dataTables_length select {
  background: rgba(255,255,255,.95) !important;
  color: #0f1720 !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  border-radius: 10px !important;
}
.rz-experimental .dataTables_wrapper .dataTables_paginate .paginate_button.current,
.rz-experimental .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--rz-grad-red) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  color: #fff !important;
}

.rz-experimental .swal2-popup {
  background: linear-gradient(180deg, var(--rz-nav), var(--rz-surface)) !important;
  color: #fff !important;
  border: 1px solid var(--rz-border) !important;
}
.rz-experimental .swal2-confirm { background: var(--rz-grad-red) !important; border: 1px solid rgba(255,255,255,.14) !important; }
.rz-experimental .swal2-cancel  { background: rgba(255,255,255,.06) !important; color: #fff !important; border: 1px solid var(--rz-border) !important; }

/* ---------------------------------------
   15) “KILL SWITCH” ORANGE / GOLD
---------------------------------------- */
.rz-experimental [style*="#FF914D"],
.rz-experimental [style*="ff914d"],
.rz-experimental [style*="gold"],
.rz-experimental [style*="#f0c76a"],
.rz-experimental .text-gold,
.rz-experimental .bg-gold {
  background: var(--rz-grad-red) !important;
  color: #fff !important;
  -webkit-text-fill-color: initial !important;
}

/* ---------------------------------------
   16) ACCESSIBILITY / FOCUS
---------------------------------------- */
.rz-experimental a:focus-visible,
.rz-experimental button:focus-visible,
.rz-experimental input:focus-visible,
.rz-experimental select:focus-visible,
.rz-experimental textarea:focus-visible {
  outline: 2px solid var(--rz-red-2);
  outline-offset: 2px;
}

/* ---------------------------------------
   17) MISC SAFETY
---------------------------------------- */
.rz-experimental nav,
.rz-experimental footer,
.rz-experimental aside#logo-sidebar { opacity: 1 !important; }

.rz-experimental .bg-section-one { background: transparent !important; } /* biar banner lega */

.rz-experimental .animate-flash-flicker {
  filter: drop-shadow(0 0 10px rgba(228,31,37,.35));
  color: var(--rz-red-1) !important;
}

/* REVISI BLOK DI SIDEBAR MOBILE*/

.rz-experimental aside#logo-sidebar {
  padding-top: 5px !important;
}
.rz-experimental aside#logo-sidebar ul {
  margin-top: 10px !important; /* biar teks MENU gak nempel ke atas */
}

/* === Product / Payment Cards Harmonization === */
.rz-experimental .bg-gray-300,
.rz-experimental .bg-white {
  background: var(--rz-card) !important;
  color: var(--rz-text) !important;
  border: 1px solid var(--rz-border) !important;
}
.rz-experimental .bg-gray-300:hover,
.rz-experimental .bg-white:hover {
  border-color: var(--rz-red-2) !important;
  box-shadow: var(--rz-glow-red);
}
.rz-experimental input:focus,
.rz-experimental .custom-input:focus {
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: var(--rz-red-2) !important;
  box-shadow: 0 0 0 4px rgba(228, 31, 37, 0.25) !important;
  color: #fff !important;
}

.rz-experimental ::placeholder {
  color: rgba(255,255,255,0.6) !important;
}

/* =======================================================================
   RAREZONE CLEAN DARK — PATCH VISUAL STABILIZATION (SAFE EDIT)
   Tidak mengubah fungsi. Hanya fix tone & tampilan.
   ======================================================================= */

/* === 2. SEARCH BAR COLOR FIX === */
.rz-experimental nav .custom-input {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 10px !important;
  transition: all 0.25s ease !important;
}

.rz-experimental nav .custom-input:focus {
  background: rgba(255, 255, 255, 0.15) !important;
  color: #fff !important;
  border-color: var(--rz-red-2) !important;
  box-shadow: 0 0 0 4px rgba(228,31,37,0.25) !important;
}

/* === 3. INPUT FIELD UNIFICATION === */
.rz-experimental input[type="text"],
.rz-experimental input[type="password"],
.rz-experimental input[type="email"],
.rz-experimental input[type="number"],
.rz-experimental input[type="tel"],
.rz-experimental textarea,
.rz-experimental select,
.rz-experimental .form-control {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 10px !important;
  padding: 10px 12px !important;
  transition: all 0.25s ease !important;
}

.rz-experimental input:focus,
.rz-experimental textarea:focus,
.rz-experimental select:focus {
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: var(--rz-red-2) !important;
  box-shadow: 0 0 0 4px rgba(228,31,37,0.25) !important;
  color: #fff !important;
}

.rz-experimental ::placeholder {
  color: rgba(255,255,255,0.6) !important;
}

/* === 4. CHECKBOX VISIBLE FIX === */
.rz-experimental input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255,255,255,0.4);
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  transition: all 0.25s ease;
  position: relative;
}

.rz-experimental input[type="checkbox"]:checked {
  background-color: var(--rz-red-2);
  border-color: var(--rz-red-2);
  box-shadow: 0 0 6px rgba(228,31,37,0.45);
}

.rz-experimental input[type="checkbox"]:checked::after {
  content: "✓";
  position: absolute;
  color: #fff;
  font-size: 12px;
  top: -1px;
  left: 3px;
}

/* === 5. LIGHTER BACKGROUND LAYER (slight contrast lift) === */
.rz-experimental {
  --rz-bg-top: #1b2745;
  --rz-bg-mid: #1d2a4a;
  --rz-bg-bottom: #122038;
  --rz-surface: #1c2743;
  --rz-card: #202e4e;
}
/* =======================================================================
   PRODUCT CARD STATE FIX — SELECTED / HOVER EFFECT
   Aman, tidak ubah fungsi apa pun
   ======================================================================= */

/* === 1. IDLE STATE (sedikit depth) === */
.rz-experimental .product-card,
.rz-experimental .bg-title-product,
.rz-experimental .order-item,
.rz-experimental [class*="product"],
.rz-experimental [class*="nominal"],
.rz-experimental label[for*="produk"],
.rz-experimental label[for*="product"] {
  background: var(--rz-card) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 12px !important;
  transition: all .22s ease !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}

/* === 2. HOVER (nyala halus) === */
.rz-experimental .product-card:hover,
.rz-experimental label[for*="product"]:hover {
  border-color: var(--rz-red-2) !important;
  box-shadow: 0 0 12px rgba(228,31,37,0.25);
  transform: translateY(-1px);
}

/* === 3. ACTIVE / SELECTED STATE === */
/* Untuk case jika pakai input radio + label */
.rz-experimental input[type="radio"]:checked + label[for*="product"],
.rz-experimental input[type="radio"]:checked + label[for*="produk"],
/* Untuk case pakai JS class active */
.rz-experimental .product-card.active,
.rz-experimental .bg-title-product.active,
.rz-experimental .nominal-item.active {
  background: var(--rz-grad-red) !important;
  color: #fff !important;
  border-color: var(--rz-red-2) !important;
  box-shadow: 0 0 18px rgba(228,31,37,0.35);
  transform: translateY(-1px);
}

.rz-experimental .active,
button.active {
  background: var(--rz-grad-red) !important;
  border-color: var(--rz-red-2) !important;
  color: #fff !important;
  box-shadow: 0 0 18px rgba(228,31,37,0.35);
  transform: translateY(-1px);
}

/* semua teks di dalam card produk */
.rz-experimental .bg-gray-300 span,
.rz-experimental .bg-gray-300 p,
.rz-experimental .bg-gray-300 h5,
.rz-experimental .bg-gray-300 h6,
.rz-experimental .bg-gray-300 .text-gray-900,
.rz-experimental .bg-gray-300 .text-gray-800 {
  color: #ffffff !important;
  opacity: 0.92;
}

/* === TYPOGRAPHY IMPROVEMENT UNTUK CARD PRODUK === */

/* Nama produk */
.rz-experimental button[id^="productBtn"] span:first-child {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.92) !important;
  letter-spacing: 0.2px;
  line-height: 1.4;
  margin-bottom: 4px;
}

/* Harga produk */
.rz-experimental #hargaProduk,
.rz-experimental button[id^="productBtn"] #hargaProduk {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  letter-spacing: 0.3px;
  line-height: 1.3;
}

/* Optional: biar nama & harga keliatan beda tone */
.rz-experimental button[id^="productBtn"] span:first-child {
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}
.rz-experimental #hargaProduk {
  text-shadow: 0 1px 3px rgba(0,0,0,0.35);
}

/* === RARE MARKET — CYBER GLITCH EFFECT === */
/* === RARE MARKET FIX POSITION DI SIDEBAR === */
.rz-experimental .rare-glitch-title {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  text-align: center;
  font-family: 'Orbitron', 'Plus Jakarta Sans', sans-serif;
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: 1px;
  color: #fff;
  text-transform: uppercase;
  text-shadow: 0 0 6px rgba(255, 60, 60, 0.5),
               0 0 12px rgba(255, 60, 60, 0.2);
  z-index: 10;
}

/* kasih jarak biar gak nabrak teks MENU */
.rz-experimental aside#logo-sidebar ul {
  margin-top: 60px !important;
}

/* clone teks buat glitch layer */
.rz-experimental .rare-glitch-title::before,
.rz-experimental .rare-glitch-title::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  width: 100%;
  color: #fff;
  clip: rect(0, 900px, 0, 0);
  overflow: hidden;
}

.rz-experimental .rare-glitch-title::before {
  text-shadow: -2px 0 #ff1b1b;
  animation: rare-glitch-anim 2.2s infinite linear alternate-reverse;
}

.rz-experimental .rare-glitch-title::after {
  text-shadow: 2px 0 #00eaff;
  animation: rare-glitch-anim2 2.3s infinite linear alternate-reverse;
}

/* glitch flicker animation */
@keyframes rare-glitch-anim {
  0% { clip: rect(12px, 9999px, 44px, 0); transform: skew(0.5deg); }
  5% { clip: rect(85px, 9999px, 140px, 0); transform: skew(1deg); }
  10% { clip: rect(10px, 9999px, 20px, 0); transform: skew(0deg); }
  15% { clip: rect(60px, 9999px, 80px, 0); transform: skew(-1deg); }
  25% { clip: rect(30px, 9999px, 60px, 0); transform: skew(0.2deg); }
  40% { clip: rect(10px, 9999px, 30px, 0); transform: skew(-0.3deg); }
  60% { clip: rect(60px, 9999px, 100px, 0); transform: skew(0.3deg); }
  80% { clip: rect(20px, 9999px, 40px, 0); transform: skew(-0.4deg); }
  100% { clip: rect(0, 9999px, 0, 0); transform: skew(0deg); }
}

@keyframes rare-glitch-anim2 {
  0% { clip: rect(80px, 9999px, 140px, 0); transform: skew(-0.5deg); }
  5% { clip: rect(0px, 9999px, 30px, 0); transform: skew(1deg); }
  10% { clip: rect(40px, 9999px, 60px, 0); transform: skew(0deg); }
  20% { clip: rect(10px, 9999px, 30px, 0); transform: skew(-0.4deg); }
  30% { clip: rect(70px, 9999px, 100px, 0); transform: skew(0.4deg); }
  50% { clip: rect(30px, 9999px, 60px, 0); transform: skew(-0.3deg); }
  70% { clip: rect(60px, 9999px, 100px, 0); transform: skew(0.2deg); }
  100% { clip: rect(0, 9999px, 0, 0); transform: skew(0deg); }
}
/* =======================================================================
   RAREZONE FOOTER — FLAT AESTHETIC (ESTETIKA LEBIH BERASA)
   ======================================================================= */

/* === Base layout === */
.rz-experimental footer {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  letter-spacing: 0.2px;
  line-height: 1.6;
  padding: 2.5rem 0 2rem;
  color: rgba(255,255,255,0.85);
}

.rz-experimental footer .grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 2.2rem;
}

/* === Heading aesthetic === */
.rz-experimental footer h2,
.rz-experimental footer h3 {
  font-family: 'Poppins', 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  font-size: 0.9rem !important;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 0.6rem !important;
  letter-spacing: 0.7px;
  position: relative;
}

/* Accent pendek di bawah judul */
.rz-experimental footer h2::after,
.rz-experimental footer h3::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 20px;
  height: 2px;
  background: var(--rz-red-2);
  border-radius: 999px;
  opacity: 0.9;
}

/* === Deskripsi website === */
.rz-experimental footer p,
.rz-experimental footer .web-desc {
  font-size: 0.8rem !important;
  color: rgba(255,255,255,0.65) !important;
  line-height: 1.5;
  margin-top: 0.6rem;
  margin-bottom: 0.6rem;
  max-width: 280px;
}

/* === Link / isi === */
.rz-experimental footer ul {
  margin-top: 0.7rem;
}

.rz-experimental footer ul li {
  margin-bottom: 0.35rem;
}

.rz-experimental footer ul li a {
  font-size: 0.8rem !important;
  color: rgba(255,255,255,0.7) !important;
  transition: all 0.2s ease;
}

.rz-experimental footer ul li a:hover {
  color: var(--rz-red-1) !important;
  text-decoration: underline;
}

/* === Contact icons === */
.rz-experimental footer ul li i {
  font-size: 0.8rem;
  margin-right: 6px;
  color: var(--rz-red-2);
  opacity: 0.8;
}

/* === Payment icons === */
.rz-experimental footer .animate-scrollX img {
  opacity: 0.8;
  height: 22px !important;
  transition: transform .25s ease, opacity .25s ease;
}
.rz-experimental footer .animate-scrollX img:hover {
  opacity: 1;
  transform: scale(1.05);
}

/* === Copyright === */
.rz-experimental footer hr {
  margin-top: 2rem;
  margin-bottom: 1.2rem;
  border-color: rgba(255,255,255,0.08);
}

.rz-experimental footer .text-gray-400 {
  font-size: 0.75rem !important;
  color: rgba(255,255,255,0.55) !important;
  letter-spacing: 0.3px;
}

/* === MOBILE OPTIMIZATION (real aesthetic, bukan sekadar kecil) === */
@media (max-width: 768px) {
  .rz-experimental footer {
    padding: 2rem 1rem !important;
  }

  .rz-experimental footer .grid {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
  }

  /* judul lebih kecil tapi masih kuat */
  .rz-experimental footer h2,
  .rz-experimental footer h3 {
    font-size: 0.78rem !important;
    margin-bottom: 0.4rem;
  }

  .rz-experimental footer p,
  .rz-experimental footer .web-desc {
    font-size: 0.74rem !important;
    line-height: 1.4;
    max-width: 220px;
  }

  .rz-experimental footer ul li a {
    font-size: 0.74rem !important;
  }

  .rz-experimental footer hr {
    margin-top: 1.5rem;
    margin-bottom: 0.8rem;
  }

  .rz-experimental footer .text-gray-400 {
    font-size: 0.7rem !important;
  }
}


/* =======================================================================
   PATCH FINAL: PAYMENT PANEL  GUNMETAL METALLIC & MOBILE SAFE
   Author: Rare + GPT
   ======================================================================= */

/* === HEADER (E-Wallet, Virtual Account, dll) === */
.rz-experimental #dataMetode h2 > button,
.rz-experimental #dataMetode [data-accordion-target] {
  background: linear-gradient(
    135deg,
    rgba(28, 40, 70, 1) 0%,
    rgba(45, 58, 95, 1) 40%,
    rgba(22, 30, 55, 1) 100%
  ) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 10px !important;
  color: #fff !important;
  font-weight: 600 !important;
  letter-spacing: 0.4px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    inset 0 -1px 2px rgba(0,0,0,0.45),
    0 3px 12px rgba(0,0,0,0.35);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.rz-experimental #dataMetode h2 > button:hover {
  background: linear-gradient(
    135deg,
    rgba(36, 50, 85, 1) 0%,
    rgba(55, 70, 105, 1) 50%,
    rgba(24, 35, 65, 1) 100%
  ) !important;
  border-color: rgba(255,255,255,0.12) !important;
  box-shadow: 0 0 14px rgba(255,255,255,0.05),
              0 4px 20px rgba(0,0,0,0.45);
  transform: translateY(-1px);
}

/* === BODY PANEL (isi metode) === */
.rz-experimental #dataMetode [id*="accordion-collapse-body"],
.rz-experimental #dataMetode .shadow.rounded-lg {
  background: linear-gradient(
    180deg,
    rgba(32, 45, 80, 0.98) 0%,
    rgba(18, 28, 55, 0.98) 100%
  ) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-top: none !important;
  border-radius: 0 0 10px 10px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 6px 16px rgba(0,0,0,0.4);
  padding: 14px 16px !important;
  margin-top: -1px !important;
  transition: all 0.3s ease;
}

/* Hover area bawah (sedikit glossy efek) */
.rz-experimental #dataMetode [id*="accordion-collapse-body"]:hover {
  background: linear-gradient(
    180deg,
    rgba(40, 55, 95, 0.96) 0%,
    rgba(25, 35, 65, 0.98) 100%
  ) !important;
}

/* === PAYMENT CARDS === */
.rz-experimental #dataMetode .grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px !important;
  width: 100%;
  box-sizing: border-box;
}

.rz-experimental #dataMetode button {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 12px !important;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  text-align: left;
  width: 100%;
  height: 100%;
  min-height: 80px;
  padding: 12px 14px !important;
  color: #fff !important;
  box-sizing: border-box;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.rz-experimental #dataMetode button:hover {
  border-color: rgba(255,255,255,0.16) !important;
  background: rgba(255,255,255,0.07) !important;
  transform: translateY(-1px);
  box-shadow: 0 0 10px rgba(228,31,37,0.2);
}

/* === TEXT === */
.rz-experimental #dataMetode button .text-sm {
  font-family: 'Manrope', 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 500;
  font-size: 0.85rem !important;
  color: #fff !important;
}

.rz-experimental #dataMetode button .text-xs,
.rz-experimental #dataMetode button .text-gray-400 {
  font-size: 0.6rem !important;
  color: rgba(255,255,255,0.7) !important;
  line-height: 1.4;
}

/* Divider tipis */
.rz-experimental #dataMetode button .divider {
  border: none;
  border-top: 1px solid rgba(255,255,255,0.08);
  width: 80%;
  align-self: center;
}


/* =======================================================================
   PATCH MINI: RESPONSIVE FONT & SPACING FIX (Mobile Compact Mode)
   ======================================================================= */

@media (max-width: 768px) {
  /* Judul kategori (“E-Wallet”, “Virtual Account”, dst) */
  .rz-experimental #dataMetode h2 > button {
    font-size: 0.8rem !important;
    padding: 8px 10px !important;
    border-radius: 8px !important;
    letter-spacing: 0.2px !important;
  }

  /* Isi kartu pembayaran */
  .rz-experimental #dataMetode button {
    padding: 8px 10px !important;
    min-height: 66px !important;
    gap: 4px !important;
  }

  /* Nama metode (misal: QRIS, ShopeePay) */
  .rz-experimental #dataMetode button .text-sm {
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
  }

  /* Fee atau deskripsi kecil */
  .rz-experimental #dataMetode button .text-xs,
  .rz-experimental #dataMetode button .text-gray-400 {
    font-size: 0.68rem !important;
    opacity: 0.85;
  }

  /* Logo payment */
  .rz-experimental #dataMetode button img {
    width: 26px !important;
    max-height: 14px !important;
    margin-bottom: 3px !important;
  }

  /* Grid lebih rapat */
  .rz-experimental #dataMetode .grid {
    gap: 6px !important;
  }

  /* Divider pendek biar gak makan ruang */
  .rz-experimental #dataMetode button .divider {
    margin: 3px 0 !important;
    width: 70% !important;
  }
}

@media (max-width: 420px) {
  .rz-experimental #dataMetode button {
    padding: 7px 8px !important;
    min-height: 60px !important;
  }
  .rz-experimental #dataMetode button .text-sm {
    font-size: 0.7rem !important;
  }
  .rz-experimental #dataMetode button .text-xs {
    font-size: 0.64rem !important;
  }
}
.rz-experimental #dataMetode [id^="selectedMetodeHarga"] {
  font-family: 'Manrope', 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 400 !important;              /* tipis elegan */
  font-size: 11px !important;               /* lebih kecil dari nama */
  color: rgba(255,255,255,0.78) !important; /* abu-abu lembut */
  display: block !important;
  margin-top: 3px !important;               /* kasih jarak manis dari nama */
  line-height: 1.25 !important;
  text-align: left !important;              /* rata kiri */
  text-shadow: 0 1px 2px rgba(0,0,0,0.35) !important;
}

/* Responsive balance */
@media (max-width: 768px) {
  .rz-experimental #dataMetode [id^="selectedMetodeHarga"] {
    font-size: 10px !important;
    margin-top: 2px !important;
  }
}

/* =======================================================================
   PATCH ULTRA-OVERRIDE: PRODUCT TYPOGRAPHY (Guaranteed Apply)
   ======================================================================= */

/* === NAMA PRODUK — besar tapi masih elegan === */
.rz-experimental :is(button[id^="productBtn"], .product-card, .nominal-item)
  :where(span:first-child, .product-name, [data-product-name]) {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,0.94) !important;
  letter-spacing: 0.25px !important;
  line-height: 1.35 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.25) !important;
}

/* === HARGA PRODUK — lebih kecil, ringan, halus === */
.rz-experimental :is(button[id^="productBtn"], .product-card, .nominal-item)
  :where(#hargaProduk, .harga, [data-price], span:last-child) {
  font-family: 'Manrope', 'Plus Jakarta Sans', sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important; /* tidak bold */
  color: rgba(255,255,255,0.8) !important;
  letter-spacing: 0.2px !important;
  line-height: 1.25 !important;
  opacity: 0.9 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35) !important;
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
  .rz-experimental button[id^="productBtn"] span:first-child {
    font-size: 11.5px !important;
    font-weight: 500 !important;
    color: rgba(255,255,255,0.85) !important;
    line-height: 1.3 !important;
  }

  .rz-experimental :is(button[id^="productBtn"], .product-card, .nominal-item)
    :where(#hargaProduk, .harga, [data-price], span:last-child) {
    font-size: 11.2px !important;
    color: rgba(255,255,255,0.75) !important;
    opacity: 0.85 !important;
  }
}

@media (max-width: 420px) {
  .rz-experimental :is(button[id^="productBtn"], .product-card, .nominal-item)
    :where(span:first-child, .product-name, [data-product-name]) {
    font-size: 10.5px !important;
  }
  .rz-experimental :is(button[id^="productBtn"], .product-card, .nominal-item)
    :where(#hargaProduk, .harga, [data-price], span:last-child) {
    font-size: 10.2px !important;
  }
}
/* =======================================================================
   PATCH: FLASH SALE METALLIC CARD — BRUSHED NAVY STEEL EFFECT
   Author: Rare + GPT
   ======================================================================= */

.rz-experimental .swiper-fs .swiper-slide-fs,
.rz-experimental .swiper-fs .bg-murky-800 {
  background: linear-gradient(
    145deg,
    rgba(40, 52, 85, 1) 0%,
    rgba(22, 30, 55, 1) 50%,
    rgba(15, 22, 38, 1) 100%
  ) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 14px !important;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.06),
    inset 0 -1px 2px rgba(0,0,0,0.45),
    0 6px 18px rgba(0,0,0,0.4);
  position: relative;
  overflow: hidden;
  transition: all 0.25s ease-in-out;
}

/* efek pantulan metal halus */
.rz-experimental .swiper-fs .swiper-slide-fs::before,
.rz-experimental .swiper-fs .bg-murky-800::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0.15) 0%,
    rgba(255,255,255,0.03) 30%,
    rgba(255,255,255,0.10) 60%,
    rgba(255,255,255,0) 100%
  );
  mix-blend-mode: overlay;
  opacity: 0.7;
  pointer-events: none;
}

/* glow merah lembut pas hover */
.rz-experimental .swiper-fs .swiper-slide-fs:hover,
.rz-experimental .swiper-fs .bg-murky-800:hover {
  box-shadow:
    0 0 14px rgba(228,31,37,0.25),
    0 0 26px rgba(120,140,200,0.12);
  border-color: rgba(255,255,255,0.12) !important;
  transform: translateY(-1px);
}

/* nama & subnama teks sedikit bercahaya */
.rz-experimental .swiper-fs .name-fs {
  text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.rz-experimental .swiper-fs .subname-fs {
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
  opacity: 0.85;
}

/* === MOBILE SAFE (biar ga over-bright di layar kecil) === */
@media (max-width: 768px) {
  .rz-experimental .swiper-fs .swiper-slide-fs,
  .rz-experimental .swiper-fs .bg-murky-800 {
    border-radius: 10px !important;
    background: linear-gradient(
      145deg,
      rgba(35, 45, 75, 1) 0%,
      rgba(18, 25, 45, 1) 100%
    ) !important;
  }
  .rz-experimental .swiper-fs .swiper-slide-fs::before,
  .rz-experimental .swiper-fs .bg-murky-800::before {
    opacity: 0.55;
  }
}
/* ============================================================
   METALLIC SHINE v2.5 — CLEARER, STILL NATURAL
   ============================================================ */
.rz-experimental .swiper-fs .swiper-slide-fs::after,
.rz-experimental .swiper-fs .bg-murky-800::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.1) 20%,
    rgba(255,255,255,0.55) 45%,
    rgba(255,255,255,0.15) 65%,
    rgba(255,255,255,0) 100%
  );
  filter: blur(6px);
  transform: translateX(-160%) skewX(-10deg);
  animation: metallicSweepSoft 4.2s ease-in-out infinite;
  mix-blend-mode: soft-light;
  pointer-events: none;
  opacity: 0.9; /* naik dari 0.6 → 0.9 */
}

/* pergerakan tetap smooth */
@keyframes metallicSweepSoft {
  0% {
    transform: translateX(-200%) skewX(-10deg);
    opacity: 0;
  }
  15% {
    opacity: 0.5;
  }
  40% {
    opacity: 0.95;
  }
  60% {
    opacity: 0.95;
  }
  85% {
    opacity: 0.4;
  }
  100% {
    transform: translateX(200%) skewX(-10deg);
    opacity: 0;
  }
}

/* mobile: lebih lembut, tapi tetap kelihatan */
@media (max-width: 768px) {
  .rz-experimental .swiper-fs .swiper-slide-fs::after,
  .rz-experimental .swiper-fs .bg-murky-800::after {
    filter: blur(8px);
    animation: metallicSweepSoft 3.5s ease-in-out infinite;
    opacity: 0.75;
  }
}
/* =======================================================================
   PATCH FINAL: Flash Sale Typography Alignment (Match Instant Product)
   ======================================================================= */

.rz-experimental button[id^="productBtn"] .ribbon ~ #hargaProduk {
  font-family: 'Manrope', 'Plus Jakarta Sans', sans-serif !important;
  font-size: 11.8px !important;
  font-weight: 400 !important;
  color: rgba(255,255,255,0.8) !important;
  letter-spacing: 0.2px !important;
  line-height: 1.25 !important;
  opacity: 0.9 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35) !important;
}

@media (max-width: 768px) {
  .rz-experimental button[id^="productBtn"] .ribbon ~ #hargaProduk {
    font-size: 10.5px !important;
    opacity: 0.85 !important;
  }
}

@media (max-width: 420px) {
  .rz-experimental button[id^="productBtn"] .ribbon ~ #hargaProduk {
    font-size: 9.6px !important;
  }
}
/* =======================================================================
   PATCH FIX FINAL: Flash Sale Old Price (Red Strikethrough)
   ======================================================================= */

.rz-experimental button[id^="productBtn"] span.line-through {
  font-family: 'Manrope', 'Plus Jakarta Sans', sans-serif !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--rz-red-2) !important; /* merah elegan */
  text-decoration: line-through !important;
  text-decoration-thickness: 1.3px !important;
  text-decoration-color: var(--rz-red-1) !important; /* coretannya agak terang */
  letter-spacing: 0.2px !important;
  line-height: 1.25 !important;
  opacity: 0.95 !important;
  margin-top: 3px !important;
  display: inline-block !important;
  text-shadow: 0 0 5px rgba(228,31,37,0.2) !important; /* efek glow lembut */
}

@media (max-width: 768px) {
  .rz-experimental button[id^="productBtn"] span.line-through {
    font-size: 9.8px !important;
  }
}
/* ===============================================================
   RAREZONE FLOATING CS — UNYU FIXED ANIMATION EDITION 🩵
   =============================================================== */
.rz-experimental .floating-cs {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

/* tombol utama */
.rz-experimental .floating-cs .cs-toggle {
  background: var(--rz-grad-red);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  font-size: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  animation: cs-breath 3s ease-in-out infinite, cs-wiggle 6s ease-in-out infinite;
  transition: transform 0.3s ease;
}

.rz-experimental .floating-cs .cs-toggle:hover {
  transform: scale(1.15) rotate(8deg);
}

/* breathing effect */
@keyframes cs-breath {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.08); filter: brightness(1.2); }
}

/* goyang manja */
@keyframes cs-wiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(3deg); }
  50% { transform: rotate(-3deg); }
  75% { transform: rotate(0deg); }
}

/* menu icons container */
.rz-experimental .floating-cs .cs-menu {
  position: absolute;
  bottom: 75px;
  right: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: all 0.25s ease;
}

/* aktif = muncul */
.rz-experimental .floating-cs.active .cs-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* icon-item */
.rz-experimental .floating-cs .cs-menu a {
  background: var(--rz-card);
  color: #fff;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(0);
  opacity: 0;
  transition: all 0.3s ease;
}

/* animasi bubble muncul */
.rz-experimental .floating-cs.active .cs-menu a {
  animation: cs-bubble-in 0.35s cubic-bezier(.25, .75, .5, 1.2) forwards;
}
.rz-experimental .floating-cs.active .cs-menu a:nth-child(1) { animation-delay: 0.05s; }
.rz-experimental .floating-cs.active .cs-menu a:nth-child(2) { animation-delay: 0.15s; }
.rz-experimental .floating-cs.active .cs-menu a:nth-child(3) { animation-delay: 0.25s; }

@keyframes cs-bubble-in {
  0% { transform: translateY(15px) scale(0.3) rotate(-15deg); opacity: 0; }
  60% { transform: translateY(-4px) scale(1.15) rotate(5deg); opacity: 1; }
  100% { transform: translateY(0) scale(1) rotate(0deg); opacity: 1; }
}

/* hover = nyala merah */
.rz-experimental .floating-cs .cs-menu a:hover {
  background: var(--rz-grad-red);
  transform: scale(1.2) rotate(5deg);
  transition: all 0.25s ease;
}
/* === RAREZONE CARD (BLUR HALUS & ELEGAN) === */

.card {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(30, 30, 30, 0.9);
  transition: all 0.3s ease;
  box-shadow: 0 3px 12px rgba(0,0,0,0.4);
}

.card img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  transition: transform 0.4s ease;
}

.card:hover img {
  transform: scale(1.03);
}

/* === OVERLAY DENGAN BLUR LEMBUT === */
.card .overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 30%;
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 -25px 35px rgba(0,0,0,0.5);
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  transition: all 0.3s ease;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.card:hover .overlay {
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 -30px 45px rgba(255,49,49,0.25);
}

/* === TEKS === */
.card .text-produk {
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.3px;
  text-align: center;
  text-shadow: 0 2px 6px rgba(0,0,0,0.7);
  margin-bottom: 2px;
}

.card .overlay p:last-child {
  color: rgba(255,255,255,0.85);
  font-weight: 400;
  font-size: 0.75rem;
  text-align: center;
  text-shadow: 0 2px 4px rgba(0,0,0,0.6);
}

/* === BORDER GLOW RAREZONE === */
.card::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #b9151a, #f3474c);
  opacity: 0.8;
  box-shadow: 0 0 12px rgba(255, 49, 49, 0.4);
}

/* === RESPONSIVE FIX === */
@media (max-width: 768px) {
  .card .text-produk {
    font-size: 0.85rem;
  }
  .card .overlay p:last-child {
    font-size: 0.7rem;
  }
}
/* =======================================================================
   RAREZONE PATCH — GAME CARD FIX (ASPECT + FONT BALANCE)
   Author: Rare + GPT
   Priority: Ultra override (safe)
   ======================================================================= */

.rz-experimental .card {
  position: relative !important;
  aspect-ratio: 3 / 4 !important; /* Proporsi fix */
  border-radius: 14px !important;
  overflow: hidden !important;
  background: var(--rz-card) !important;
  box-shadow: 0 3px 14px rgba(0,0,0,0.45) !important;
  transition: all 0.3s ease !important;
}

.rz-experimental .card img {
  object-fit: cover !important;
  width: 100% !important;
  height: 100% !important;
  transition: transform 0.4s ease !important;
}

.rz-experimental .card:hover img {
  transform: scale(1.05) !important;
}

/* === OVERLAY: auto height aesthetic === */
.rz-experimental .card .overlay {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  background: rgba(0,0,0,0.45) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  border-top: 1px solid rgba(255,255,255,0.08) !important;
  padding: 8px 10px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  height: auto !important;
  min-height: 28% !important;
  text-align: center !important;
}

/* === TEXT — Single line aesthetic === */
.rz-experimental .card .text-produk {
  color: #fff !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  letter-spacing: 0.3px !important;
  text-shadow: 0 2px 5px rgba(0,0,0,0.65) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  width: 100% !important;
  margin-bottom: 2px !important;
}

.rz-experimental .card .overlay p:last-child {
  color: rgba(255,255,255,0.8) !important;
  font-weight: 400 !important;
  font-size: 0.75rem !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  width: 100% !important;
  opacity: 0.85 !important;
}

/* === BORDER GLOW === */
.rz-experimental .card::after {
  content: "" !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 2px !important;
  background: var(--rz-grad-red) !important;
  opacity: 0.9 !important;
  box-shadow: 0 0 12px rgba(255,49,49,0.4) !important;
}

/* === MOBILE FIX === */
@media (max-width: 768px) {
  .rz-experimental .card {
    aspect-ratio: 3 / 4 !important;
    border-radius: 10px !important;
  }

  .rz-experimental .card .text-produk {
    font-size: 0.78rem !important;
    letter-spacing: 0.2px !important;
  }

  .rz-experimental .card .overlay p:last-child {
    font-size: 0.68rem !important;
  }
}

@media (max-width: 420px) {
  .rz-experimental .card {
    aspect-ratio: 3 / 4.2 !important;
  }

  .rz-experimental .card .text-produk {
    font-size: 0.72rem !important;
  }

  .rz-experimental .card .overlay p:last-child {
    font-size: 0.62rem !important;
  }
}


/* =======================================================================
   PATCH FINAL: GRID STRETCH FIX (Flash Sale Neighbor Height)
   ======================================================================= */
.rz-experimental .grid,
.rz-experimental .flex.flex-wrap,
.rz-experimental .produk-grid,
.rz-experimental #produkList {
  align-items: stretch !important;
}

.rz-experimental button[id^="productBtn"] {
  height: 100% !important;
  min-height: 80px !important;
}
/* =======================================================
   RAREZONE CATEGORY BUTTON v3 — Deep Navy + Metallic Active
   ======================================================= */
.rz-experimental .category-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-width: 150px !important;
  min-height: 54px !important;
  padding: 12px 26px !important;
  border-radius: 999px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px !important;
  color: rgba(255,255,255,0.92) !important;
  background: linear-gradient(180deg, #222d4e 0%, #1a223c 100%) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,0.05),
    0 3px 8px rgba(0,0,0,0.25) !important;
  transition: all .25s ease-in-out !important;
}

/* Hover  soft lift */
.rz-experimental .category-btn:hover {
  background: linear-gradient(180deg, #2e3a65 0%, #232d4f 100%) !important;
  box-shadow:
    0 0 8px rgba(120,160,255,0.2),
    inset 0 1px 3px rgba(255,255,255,0.08) !important;
  transform: translateY(-1px) !important;
}

/* Active  metallic glow & deep reflection */
.rz-experimental .category-btn.active {
  background: linear-gradient(180deg, #33498a 0%, #25376d 60%, #1b2852 100%) !important;
  border-color: rgba(160,200,255,0.4) !important;
  color: #fff !important;
  box-shadow:
    0 0 18px rgba(110,150,255,0.35),
    inset 0 0 15px rgba(150,180,255,0.25),
    inset 0 1px 4px rgba(255,255,255,0.2) !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Efek khas: metalic shimmer */
.rz-experimental .category-btn.active::after {
  content: "";
  position: absolute;
  top: -60%;
  left: -50%;
  width: 200%;
  height: 220%;
  background: linear-gradient(
    115deg,
    rgba(255,255,255,0.05) 0%,
    rgba(255,255,255,0.25) 40%,
    rgba(255,255,255,0.1) 70%,
    rgba(255,255,255,0) 100%
  );
  transform: rotate(25deg);
  animation: metallicSweepDeep 5s infinite linear;
  mix-blend-mode: soft-light;
  opacity: 0.6;
  pointer-events: none;
}

@keyframes metallicSweepDeep {
  0% { transform: translateX(-160%) rotate(25deg); opacity: 0; }
  40% { opacity: 0.8; }
  100% { transform: translateX(160%) rotate(25deg); opacity: 0; }
}

/* Responsive */
@media (max-width: 768px) {
  .rz-experimental .category-btn {
    min-width: 100px !important;
    min-height: 26px !important;
    font-size: 12.5px !important;
    padding: 10px 18px !important;
  }
}
.rz-experimental .category-btn img {
  width: 48px;
  height: 48px;
  margin-right: 6px;
  transition: transform 0.2s ease, filter 0.2s ease;
}
/* === MOBILE ONLY: GESER KATEGORI (tanpa ubah HTML) === */
@media (max-width: 768px) {
  .flex.flex-wrap.gap-2.mb-4.justify-start {
    flex-wrap: nowrap !important;         /* jangan pecah ke bawah */
    overflow-x: auto !important;          /* biar bisa digeser */
    -webkit-overflow-scrolling: touch !important; /* smooth di iPhone */
    scroll-snap-type: x mandatory !important;
    gap: 10px !important;
    padding-bottom: 6px !important;
  }

  .flex.flex-wrap.gap-2.mb-4.justify-start::-webkit-scrollbar {
    display: none !important; /* sembunyikan scrollbar di Chrome/Safari */
  }

  .flex.flex-wrap.gap-2.mb-4.justify-start .category-btn {
    flex: 0 0 auto !important;            /* biar tombol ga melebar */
    scroll-snap-align: start !important;  /* snap saat berhenti */
  }
}

/* DESKTOP: tetap normal, wrap biasa */
@media (min-width: 769px) {
  .flex.flex-wrap.gap-2.mb-4.justify-start {
    flex-wrap: wrap !important;
    overflow: visible !important;
  }
}

/* === FINAL FIX WARNA SALDO (PUTIH SOLID) === */
.rz-experimental #dataMetode button#metodeBtnsaldo span#selectedMetodeHargasaldo.x-color-g {
  color: #ffffff !important;           /* putih solid */
  -webkit-text-fill-color: #ffffff !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  text-shadow: none !important;
}

.rz-experimental #dataMetode button#metodeBtnsaldo span#selectedMetodeHargasaldo {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* === ABSOLUTE COLOR OVERRIDE — KILL .x-color-g MERAH === */
.rz-experimental #selectedMetodeHargasaldo.x-color-g,
.rz-experimental button#metodeBtnsaldo span#selectedMetodeHargasaldo.x-color-g,
.rz-experimental #dataMetode #selectedMetodeHargasaldo.x-color-g,
#selectedMetodeHargasaldo.x-color-g {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}