/* Brand color overrides to replace pink with Kharisma gold/navy */
:root {
  --brand-gold: #D4AF37;
  --brand-gold-dark: #b88f2a;
  --brand-gold-text: #000000;
  --brand-navy: #0b2545;
  --brand-blue: #0b63c7;
  --pink: #D4AF37; /* override vendor pink variable */
}

/* Common button overrides */
.btn-primary, .login-btn, .cta-button {
  background: linear-gradient(90deg, var(--brand-gold), var(--brand-gold-dark)) !important;
  border-color: var(--brand-gold-dark) !important;
  color: #ffffff !important;
}

/* Gold-themed buttons should show white text for contrast */
.btn-warning {
  color: #ffffff !important;
}

/* Catch remaining inline-styled gold backgrounds and force white text */
[style*="#D4AF37"], [style*="var(--brand-gold)"], [style*="linear-gradient(90deg,#D4AF37"], [style*="linear-gradient(90deg,var(--brand-gold)"],
.btn[style*="linear-gradient"], a[style*="linear-gradient"], button[style*="linear-gradient"],
.btn[style*="var(--brand-gold)"], a[style*="var(--brand-gold)"], button[style*="var(--brand-gold)"],
.btn[style*="#D4AF37"], a[style*="#D4AF37"], button[style*="#D4AF37"] {
  color: #ffffff !important;
}

/* Footer links remain dark for contrast; avoid globally overriding all anchors */
.footer a {
  color: var(--brand-gold-text) !important;
}

/* Sidebar / main menu links should be gold to match design (override other rules) */
.list-unstyled a, .navbar-nav.sidebar a, .navbar-nav.sidebar a .nav-link {
  color: var(--brand-gold) !important;
}

/* If sidebar uses buttons or other link-like elements, ensure text is gold */
.list-unstyled a:hover, .navbar-nav.sidebar a:hover {
  color: #000000 !important;
}

/* Product and listing accents: change former pink accents to brand blue */
.img-prod a, .img-prod a:hover, .buy-now, .product-price a, .home .img-prod h3 a, .produk h3 a, .kategori_view h3 a, .home h3 a, .detail h3 a {
  color: var(--brand-blue) !important;
  text-decoration: none !important;
}

.img-prod:hover .price span, .buy-now:hover {
  color: var(--brand-blue) !important;
  background-color: rgba(11,99,199,0.08) !important;
}

/* Hover states for product links and buttons */
.img-prod a:hover, .product-name h3 a:hover, .produk h3 a:hover, .buy-now:hover, .home .img-prod h3 a:hover {
  color: var(--brand-blue) !important;
  cursor: pointer !important;
}

/* Price highlight on image hover */
.img-prod:hover .price span, .img-prod .price span, .price span {
  color: var(--brand-blue) !important;
}
/* Replace explicit pink color usages (text -> black) */
.text-pink, .text-accent-pink {
  color: var(--brand-gold-text) !important;
}

/* Small utility overrides for cards and highlights */
.highlight-box, .bg-pink, .badge-pink {
  background: linear-gradient(135deg,#fffaf0,#fff6e6) !important;
  border-color: var(--brand-gold) !important;
}

/* Ensure FAQ floating button uses blue if left inline not present */
.floating-faq-btn {
  background-color: var(--brand-blue) !important;
  color: #fff !important;
}

/* Product listing: ensure name and price are black for readability */
/* Product title and price forced black */
.product .text h3 a, .product .text .price span {
  color: #000000 !important;
  text-transform: none !important;
  font-weight: 700 !important;
}

/* Card-like product appearance similar to reference */
.product {
  background: #ffffff;
  border-radius: 14px;
  padding: 10px;
  box-shadow: 0 6px 18px rgba(15,15,15,0.06);
  position: relative;
  overflow: visible;
}

.product .img-prod img {
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(15,15,15,0.06);
}

/* Price pill displayed over image (top-right) */
.price-pill {
  position: absolute;
  top: 12px;
  right: 14px;
  background: rgba(0,0,0,0.7);
  color: #fff;
  padding: 6px 10px;
  border-radius: 20px;
  font-weight: 700;
  font-size: 13px;
}

/* Small beige badge (e.g., Best Seller) */
.badge-beige {
  background: #f1e6d0;
  color: #4b3b2b;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  margin-right: 6px;
}

/* Small gray stock badge */
.stock-badge {
  background-color: #e6eef6;
  color: #0b2545;
  padding: 4px 8px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 12px;
}

/* Title row layout */
.product .text .title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* On product hover: convert any pink/gold accents to brand blue */
.product:hover .text-pink,
.product:hover .text-accent-pink {
  color: var(--brand-blue) !important;
}

.product:hover .badge-pink,
.product:hover .bg-pink {
  background: linear-gradient(90deg, var(--brand-blue), var(--brand-blue)) !important;
  border-color: var(--brand-blue) !important;
  color: #ffffff !important;
}

/* Catch inline-style gold/pink on hover inside a product card */
.product:hover [style*="#D4AF37"],
.product:hover [style*="var(--brand-gold)"],
.product:hover [style*="linear-gradient(90deg,#D4AF37"],
.product:hover [style*="linear-gradient(90deg,var(--brand-gold)"] {
  background: linear-gradient(90deg, var(--brand-blue), var(--brand-blue)) !important;
  color: #ffffff !important;
  border-color: var(--brand-blue) !important;
}

/* Make price-pill adopt blue accent on hover for better coherence */
.product:hover .price-pill {
  background: var(--brand-blue) !important;
}

/* Stronger hover overrides for red/pink overlays/buttons that may use other hexes */
.product:hover .img-prod .overlay {
  background: var(--brand-blue) !important;
  opacity: 0.32 !important;
}

.product:hover .img-prod span.status,
.product:hover .img-prod .detail-btn,
.product:hover .img-prod .buy-now,
.product:hover .img-prod .btn-detail {
  background: var(--brand-blue) !important;
  color: #ffffff !important;
  border-color: var(--brand-blue) !important;
}

/* Catch common red hex values used in templates */
.product:hover [style*="#dc3545"],
.product:hover [style*="#e74c3c"],
.product:hover [style*="#ff4b4b"],
.product:hover [style*="#ff5a5f"] {
  background: var(--brand-blue) !important;
  color: #ffffff !important;
  border-color: var(--brand-blue) !important;
}

/* Main/header navbar links: make text gold and hover to black for contrast */
.navbar .nav-link, .navbar-nav .nav-link, .site-nav a, .main-menu a {
  color: var(--brand-gold) !important;
}
.navbar .nav-link:hover, .navbar-nav .nav-link:hover, .site-nav a:hover, .main-menu a:hover {
  color: #000000 !important;
}

/* Explicit sidebar-link class to ensure sidebar text becomes gold */
.sidebar-link {
  color: var(--brand-gold) !important;
  text-decoration: none !important;
}
.sidebar-link:hover {
  color: #000000 !important;
}