:root {
  --brand-primary: #7a0019;
  --brand-primary-rgb: 122, 0, 25;
  --brand-primary-light: #98263d;
  --brand-primary-dark: #4f0010;
  --brand-accent: #f5c542;
  --brand-accent-2: #bd6c2f;
  --brand-page-bg: #7a0019;
  --brand-surface: #f5c542;
  --brand-gradient: linear-gradient(135deg, #7a0019, #f5c542);
  --brand-surface-gradient: linear-gradient(135deg, #a54427, #f5c542);
  --brand-gradient-angle: 135deg;
  --brand-text-on-surface: #12141a;
  --brand-muted-on-surface: #3a3321;
}

/* Two-tone + gradient: stop1/stop2 wash across chrome and sections */
:root,
html,
body,
body[class*="palette-hue-"],
[class*="palette-hue-"] {
  --brand-bg: #7a0019 !important;
  --brand-panel: #f5c542 !important;
  --brand-panel-2: #f5c542 !important;
  --brand-text: #f5f7fa !important;
  --brand-muted: #d9c0c8 !important;
  --brand-accent: #f5c542 !important;
  --brand-accent-2: #bd6c2f !important;
  --bs-body-bg: #7a0019 !important;
  --bs-body-color: #f5f7fa !important;
  --bs-primary: #f5c542 !important;
}

meta[name="theme-color"] { /* marker */ }

html, body {
  background-color: #7a0019 !important;
  background-image: var(--brand-gradient) !important;
  background-attachment: fixed !important;
  color: #f5f7fa !important;
}

.navbar, header, #header, .portal-nav, .hero {
  background-color: transparent !important;
  background-image: var(--brand-gradient) !important;
  color: #f5f7fa !important;
}

.bg-primary, .btn-primary, .text-bg-primary {
  background-color: #f5c542 !important;
  background-image: var(--brand-gradient) !important;
  border-color: #f5c542 !important;
  color: #ffffff !important;
}

.btn-outline-light {
  color: #f5f7fa !important;
  border-color: color-mix(in srgb, #f5f7fa 65%, transparent) !important;
}

/* Info sections share one surface gradient (not flat single fill) */
.section,
.brand-card,
.article-card,
.eeat-card,
.spotlight-card,
.support-card,
.stat-tile,
.card,
.bg-body,
.bg-body-tertiary,
.peer-stake-stats,
.toc-shell,
.portal-table-wrap,
.accordion,
.accordion-item,
.accordion-button,
.accordion-body {
  background-color: #f5c542 !important;
  background-image: var(--brand-surface-gradient) !important;
  color: #12141a !important;
}

/* FAQ spacing — keep readable even if accordion markup is thin */
.accordion-item {
  margin-bottom: 0.55rem;
  border: 1px solid color-mix(in srgb, #12141a 18%, transparent) !important;
  border-radius: 0.65rem !important;
  overflow: hidden;
}
.accordion-header {
  margin: 0 !important;
}
.accordion-button {
  padding: 0.95rem 1.1rem !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}
.accordion-button:not(.collapsed) {
  box-shadow: none !important;
}
.accordion-body {
  padding: 0.85rem 1.1rem 1.05rem !important;
  line-height: 1.55;
}

/* High-contrast copy on surfaces — never blend into the fill */
.section,
.section p,
.section li,
.section td,
.section th,
.brand-card,
.article-card,
.eeat-card,
.spotlight-card,
.support-card,
.accordion-body,
.toc-shell,
.peer-stake-stats {
  color: #12141a !important;
}

.section .section-kicker,
.section .text-body-secondary,
.brand-card .text-body-secondary,
.spotlight-card .text-body-secondary,
.eeat-card .text-body-secondary,
.support-card .text-body-secondary,
.section-lede,
.article-copy,
.toc-shell .small,
.toc-shell .text-uppercase,
.stat-label,
.payment-chip {
  color: #3a3321 !important;
  opacity: 1 !important;
}

.section h1, .section h2, .section h3, .section h4,
.brand-card h2, .brand-card h3, .brand-card strong,
.spotlight-card h3, .eeat-card h3,
.peer-stake-stats h2, .toc-shell a, .toc-link {
  color: #12141a !important;
}

.toc-shell .badge,
.toc-shell .btn,
.toc-shell a.btn,
.payment-chip,
.section .badge {
  color: #12141a !important;
  border-color: color-mix(in srgb, #12141a 35%, transparent) !important;
  background: color-mix(in srgb, #12141a 14%, transparent) !important;
}

.hero h1, .hero .display-5, .hero .fw-black {
  color: #f5f7fa !important;
  background: none !important;
  -webkit-text-fill-color: #f5f7fa !important;
}

.hero .lead, .hero-lede, .hero p {
  color: #d9c0c8 !important;
}

a {
  text-decoration-color: #f5c542;
}

/* Mobile bottom nav — readable labels on surface */
.bottom-bar {
  background-color: #f5c542 !important;
  background-image: var(--brand-surface-gradient) !important;
  border-top-color: color-mix(in srgb, #12141a 18%, transparent) !important;
}
.bottom-bar-item,
.bottom-bar-item i,
.bottom-bar-item span,
.bottom-bar-cta,
.bottom-bar-cta span {
  color: #12141a !important;
  opacity: 1 !important;
}
.bottom-bar-item:not(.active) {
  color: #3a3321 !important;
}
.bottom-bar-item.active,
.bottom-bar-cta {
  color: #12141a !important;
  font-weight: 800;
}
.bottom-bar-cta-btn {
  background-image: var(--brand-gradient) !important;
  background-color: #f5c542 !important;
  color: #ffffff !important;
}

/* Sticky Daftar / Log Masuk — fixed winlah MY palette (not brand gradient) */
#br-stick {
  --br-my-blue: #0033a0;
  --br-my-green: #00f5d4;
  --br-daftar-1: #008080;
  --br-daftar-2: #00f5d4;
  --br-daftar-border: #008080;
  --br-close-x: #e31b23;
  --br-bg1: #7a0019 !important;
  --br-bg2: #f5c542 !important;
  --br-bg3: #f5c542 !important;
  --br-accent: var(--br-daftar-2) !important;
  --br-accent2: var(--br-my-blue) !important;
  --br-cta1: var(--br-daftar-1) !important;
  --br-cta2: var(--br-daftar-2) !important;
  --br-cta3: var(--br-daftar-2) !important;
  --br-cta-text: #12141a !important;
  --br-cta-shadow: 0 1px 0 rgba(255,255,255,.28) !important;
  --br-login1: #ffffff !important;
  --br-login2: #ffffff !important;
  --br-login-text: #12141a !important;
  --br-copy: #12141a !important;
  --br-border: var(--br-daftar-border) !important;
  --br-glow: rgba(0, 245, 212, 0.30) !important;
}

/* MY badge: dark blue chip + green label */
#br-stick.br-style-myclean .br-stick-card:after {
  background: var(--br-my-blue) !important;
  color: var(--br-my-green) !important;
  border-color: var(--br-my-green) !important;
}

/* Daftar: teal gradient, black text */
#br-stick .br-stick-register,
#br-stick.br-style-myclean .br-stick-register,
#br-stick.br-style-vnclean .br-stick-register,
#br-stick.br-style-vnmini .br-stick-register,
#br-stick.br-style-pakmini .br-stick-register {
  background: linear-gradient(135deg, #008080 0%, #00f5d4 100%) !important;
  background-image: linear-gradient(135deg, #008080 0%, #00f5d4 100%) !important;
  background-color: #00f5d4 !important;
  color: #12141a !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.28) !important;
  border-color: #008080 !important;
}

/* Log Masuk: white bg, black text, same border as Daftar */
#br-stick .br-stick-login,
#br-stick.br-style-myclean .br-stick-login,
#br-stick.br-style-vnclean .br-stick-login,
#br-stick.br-style-vnmini .br-stick-login,
#br-stick.br-style-pakmini .br-stick-login {
  background: #ffffff !important;
  background-image: none !important;
  background-color: #ffffff !important;
  color: #12141a !important;
  text-shadow: none !important;
  border-color: #008080 !important;
}

/* Shared button border color (scraped packs hardcode gold/yellow) */
#br-stick.br-style-myclean .br-stick-btn,
#br-stick .br-stick-btn {
  border-color: #008080 !important;
}

/* Close: dark blue chip (like MY), red × */
#br-stick .br-stick-close,
#br-stick.br-style-myclean .br-stick-close,
#br-stick.br-style-vnclean .br-stick-close,
#br-stick.br-style-vnmini .br-stick-close,
#br-stick.br-style-pakmini .br-stick-close {
  background: #0033a0 !important;
  background-color: #0033a0 !important;
  color: #e31b23 !important;
  border-color: #0033a0 !important;
}
#br-stick .br-stick-close:hover,
#br-stick.br-style-myclean .br-stick-close:hover {
  background: #00257a !important;
  color: #ff2d2d !important;
}

/* Mobile open nav menu */
.navbar-collapse.show,
.navbar-collapse.collapsing {
  background-image: var(--brand-surface-gradient) !important;
  background-color: #f5c542 !important;
  border-radius: 0 0 1rem 1rem;
  padding: 0.75rem 1rem 1rem !important;
}
.navbar-collapse .nav-link {
  color: #12141a !important;
}
.navbar-collapse .nav-link.active {
  color: #12141a !important;
  font-weight: 800;
  background: color-mix(in srgb, #12141a 14%, transparent);
  border-radius: 999px;
}