/* Dewa222 dark-purple theme — html/dew-342
   White content backgrounds are intentionally preserved. */

:root,
[data-theme="default"] {
  --dw-bg: #14081f;
  --dw-surface: #25013b;
  --dw-surface-alt: #31104e;
  --dw-purple: #490897;
  --dw-purple-light: #7a3fd1;
  --dw-purple-dark: #2e0563;
  --dw-gold: #ffb514;
  --dw-gold-soft: #dbbc56;
  --dw-text: #f1e9fb;
  --dw-text-muted: #a894c2;
  --dw-border: #3a2354;
  --dw-danger: #b5442e;
  --dw-success: #5f7a3a;
  --dw-on-light: #2e0563;
  --dw-on-light-muted: #490897;

  /* TeePublic primary (blue) → purple */
  --color-primary-100: #f3e9fb !important;
  --color-primary-200: #dcc6f3 !important;
  --color-primary-300: #a87ee0 !important;
  --color-primary-400: var(--dw-purple-light) !important;
  --color-primary-500: var(--dw-purple) !important;
  --color-primary-600: #3d077d !important;
  --color-primary-700: var(--dw-purple-dark) !important;
  --color-primary-800: var(--dw-surface) !important;
  --color-primary-900: var(--dw-bg) !important;
  --color-primary-500-a10: rgba(73, 8, 151, 0.1) !important;
  --color-primary-500-a25: rgba(73, 8, 151, 0.25) !important;
  --color-primary-500-a70: rgba(73, 8, 151, 0.7) !important;
  --color-link-500: var(--dw-purple) !important;
  --color-link-600: var(--dw-purple-dark) !important;

  /* Success (green) → muted olive */
  --color-success-100: #eef3e4 !important;
  --color-success-200: #d7e2c0 !important;
  --color-success-300: #b4c78a !important;
  --color-success-400: #8aa35c !important;
  --color-success-500: var(--dw-success) !important;
  --color-success-600: #4e642f !important;
  --color-success-700: #3d4e25 !important;
  --color-success-800: #2c381b !important;
  --color-success-900: #1b2210 !important;
  --color-success-500-a10: rgba(95, 122, 58, 0.1) !important;

  /* Warning / orange → gold */
  --color-warning-100: #fff8e6 !important;
  --color-warning-200: #ffe9b3 !important;
  --color-warning-300: #ffd56a !important;
  --color-warning-400: var(--dw-gold-soft) !important;
  --color-warning-500: var(--dw-gold) !important;
  --color-warning-600: #d49410 !important;
  --color-warning-700: #c4890f !important;
  --color-warning-800: #8a620a !important;
  --color-warning-900: var(--dw-purple-dark) !important;
  --color-accent-orange-100: #fff8e6 !important;
  --color-accent-orange-200: #ffe9b3 !important;
  --color-accent-orange-300: #ffd56a !important;
  --color-accent-orange-400: var(--dw-gold-soft) !important;
  --color-accent-orange-500: var(--dw-gold) !important;
  --color-accent-orange-600: #d49410 !important;
  --color-accent-orange-700: #c4890f !important;
  --color-accent-orange-800: #8a620a !important;
  --color-accent-orange-900: var(--dw-purple-dark) !important;

  /* Danger → muted dark red */
  --color-danger-100: #f6e8e4 !important;
  --color-danger-200: #e8c7bf !important;
  --color-danger-300: #d49a8e !important;
  --color-danger-400: #c46b5a !important;
  --color-danger-500: var(--dw-danger) !important;
  --color-danger-600: #933628 !important;
  --color-danger-700: #6f2920 !important;
  --color-danger-800: var(--dw-purple-dark) !important;
  --color-danger-900: var(--dw-bg) !important;

  /* Dark neutrals → purple (light neutrals / white kept) */
  --color-neutral-700: #5a3d78 !important;
  --color-neutral-800: var(--dw-surface) !important;
  --color-neutral-900: var(--dw-bg) !important;

  /* Inline info-box / app-card tokens (override later :root blocks) */
  --gold-primary: var(--dw-gold) !important;
  --gold-secondary: var(--dw-gold-soft) !important;
  --gold-light: #ffe9a3 !important;
  --gold-soft: rgba(255, 181, 20, 0.15) !important;
  --black-deep: var(--dw-bg) !important;
  --black-medium: var(--dw-surface) !important;
  --black-soft: var(--dw-on-light-muted) !important;
  --brand: var(--dw-gold) !important;
  --brand-mid: var(--dw-gold-soft) !important;
  --brand-dark: #c4890f !important;
  --border: var(--dw-border) !important;
  --shadow-gold: 0 5px 20px rgba(255, 181, 20, 0.2) !important;
}

/* ── Links on white content ── */
a,
.link,
.link--default,
.description-content a,
.m-footer__guarantee-link a {
  color: var(--dw-purple);
}

a:hover,
.link:hover,
.description-content a:hover {
  color: var(--dw-purple-light);
}

/* ── Blue icon glyphs → purple ── */
.teepublicon--blue-default,
.teepublicon--blue-default svg,
.teepublicon--blue-default path {
  color: var(--dw-purple) !important;
  fill: var(--dw-purple) !important;
}

.teepublicon--color-orange-400,
.teepublicon--color-orange-400 svg,
.teepublicon--color-orange-400 path {
  color: var(--dw-gold) !important;
  fill: var(--dw-gold) !important;
}

/* ── Search submit CTA ── */
.m-header__search-submit,
.btn.m-header__search-submit {
  background: var(--dw-purple) !important;
  border-color: var(--dw-purple) !important;
  color: var(--dw-text) !important;
}

.m-header__search-submit:hover,
.btn.m-header__search-submit:hover {
  background: var(--dw-purple-light) !important;
  border-color: var(--dw-purple-light) !important;
}

/* ── LOGIN (gold CTA) ── */
.login,
.login-button,
a.login {
  background: linear-gradient(180deg, #ffe08a 0%, var(--dw-gold) 30%, var(--dw-gold-soft) 70%, #c4890f 100%) !important;
  border-color: rgba(255, 181, 20, 0.45) !important;
  color: #ffffff !important;
  text-shadow: 2px 2px 4px rgba(20, 8, 31, 0.5) !important;
  box-shadow:
    0 4px 0 var(--dw-purple-dark),
    0 8px 15px rgba(73, 8, 151, 0.3),
    inset 0 1px 2px rgba(255, 255, 255, 0.5) !important;
}

.login:hover,
.login-button:hover,
a.login:hover {
  background: linear-gradient(180deg, #ffe9a3 0%, var(--dw-gold-soft) 30%, var(--dw-gold) 70%, #c4890f 100%) !important;
  border-color: rgba(255, 181, 20, 0.7) !important;
  color: #ffffff !important;
  box-shadow:
    0 6px 0 var(--dw-purple),
    0 12px 20px rgba(73, 8, 151, 0.4),
    inset 0 1px 3px rgba(255, 255, 255, 0.8) !important;
}

/* ── DAFTAR (purple CTA) ── */
.register,
.register-button,
a.register {
  background: linear-gradient(180deg, var(--dw-purple-light) 0%, var(--dw-purple) 30%, var(--dw-surface) 70%, var(--dw-bg) 100%) !important;
  border-color: rgba(255, 181, 20, 0.45) !important;
  color: #ffffff !important;
  text-shadow: 2px 2px 4px rgba(255, 181, 20, 0.35) !important;
  box-shadow:
    0 4px 0 var(--dw-purple-dark),
    0 8px 15px rgba(255, 181, 20, 0.25),
    inset 0 1px 2px rgba(255, 255, 255, 0.25) !important;
}

.register:hover,
.register-button:hover,
a.register:hover {
  background: linear-gradient(180deg, var(--dw-purple-light) 0%, var(--dw-purple) 40%, var(--dw-purple-dark) 100%) !important;
  border-color: var(--dw-gold) !important;
  color: var(--dw-gold) !important;
  box-shadow:
    0 6px 0 var(--dw-purple-dark),
    0 12px 20px rgba(73, 8, 151, 0.5),
    inset 0 1px 3px rgba(255, 255, 255, 0.35) !important;
}

/* ── Extra gold CTA (.btn-x) ── */
.btn-x {
  background: linear-gradient(180deg, var(--dw-gold) 0%, var(--dw-gold-soft) 50%, #c4890f 100%) !important;
  color: #ffffff !important;
  border-color: var(--dw-gold-soft) !important;
  box-shadow: 0 4px 15px rgba(73, 8, 151, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}

.btn-x:hover {
  background: linear-gradient(180deg, var(--dw-gold-soft) 0%, var(--dw-gold) 100%) !important;
  box-shadow: 0 6px 20px rgba(255, 181, 20, 0.4) !important;
  color: #ffffff !important;
}

/* ── Info box: keep white body, recolor chrome ── */
.info-box-boba {
  border-color: var(--dw-gold) !important;
  box-shadow: 0 15px 35px rgba(73, 8, 151, 0.12), 0 5px 20px rgba(255, 181, 20, 0.2) !important;
}

.info-header-boba {
  background: linear-gradient(145deg, var(--dw-bg), var(--dw-surface)) !important;
  color: var(--dw-gold) !important;
  border-bottom-color: var(--dw-gold) !important;
}

.info-label-boba {
  color: var(--dw-on-light) !important;
}

.info-label-boba::before {
  color: var(--dw-gold) !important;
}

.info-value-boba {
  color: var(--dw-on-light-muted) !important;
}

.info-value-boba strong {
  color: var(--dw-purple) !important;
  background: rgba(73, 8, 151, 0.08) !important;
}

.info-row-boba {
  border-bottom-color: rgba(255, 181, 20, 0.18) !important;
}

.info-row-boba:hover {
  box-shadow: inset 0 0 0 1px rgba(73, 8, 151, 0.12) !important;
}

.rating-boba,
.rating-boba::before,
.rating-boba span,
.rating-boba .stars {
  color: var(--dw-gold) !important;
}

.rating-boba strong {
  background: linear-gradient(145deg, var(--dw-gold), #c4890f) !important;
}

/* ── Titles / review accents on white ── */
.section-title {
  color: var(--dw-on-light) !important;
  border-bottom-color: var(--dw-gold) !important;
}

.description-content strong,
.reviewer-name,
.review-author {
  color: var(--dw-on-light) !important;
}

.review-card {
  border-left-color: var(--dw-gold) !important;
}

.review-card:hover {
  box-shadow: 0 5px 15px rgba(73, 8, 151, 0.15) !important;
}

.review-rating,
.stars::after {
  color: var(--dw-gold) !important;
  text-shadow: 0 0 2px rgba(255, 181, 20, 0.4) !important;
}

/* ── FAQ (already dark) → purple + gold ── */
.faq-section {
  background: linear-gradient(145deg, var(--dw-bg), var(--dw-surface)) !important;
  border-color: var(--dw-gold) !important;
  box-shadow: 0 18px 42px rgba(20, 8, 31, 0.35), 0 0 22px rgba(255, 181, 20, 0.13) !important;
}

.faq-section .section-title {
  color: var(--dw-gold) !important;
  border-bottom-color: rgba(255, 181, 20, 0.35) !important;
}

.faq-item {
  background: var(--dw-surface-alt) !important;
  border-color: rgba(255, 181, 20, 0.38) !important;
}

.faq-item:hover,
.faq-item[open] {
  border-color: var(--dw-gold) !important;
  box-shadow: 0 6px 20px rgba(255, 181, 20, 0.12) !important;
}

.faq-question {
  color: var(--dw-text) !important;
}

.faq-question::after {
  border-color: var(--dw-gold) !important;
  color: var(--dw-gold) !important;
}

.faq-item[open] .faq-question::after {
  background: var(--dw-gold) !important;
  color: var(--dw-bg) !important;
}

.faq-answer {
  border-top-color: rgba(255, 181, 20, 0.16) !important;
}

.faq-answer p {
  color: var(--dw-text-muted) !important;
}

/* ── App info card (white body kept via --bg) ── */
.app-card {
  border-color: var(--dw-border) !important;
  box-shadow: 0 6px 15px rgba(73, 8, 151, 0.1) !important;
}

.app-card:hover {
  box-shadow: 0 10px 25px rgba(255, 181, 20, 0.2) !important;
}

.app-header {
  background: linear-gradient(135deg, var(--dw-gold), var(--dw-gold-soft), #c4890f) !important;
  color: var(--dw-bg) !important;
  border-bottom-color: var(--dw-gold-soft) !important;
}

.app-table th {
  background: #f3e9fb !important;
  color: var(--dw-on-light) !important;
  border-bottom-color: var(--dw-border) !important;
}

@media (max-width: 640px) {
  .app-table th {
    background: #f3e9fb !important;
  }
}

/* ── Floating footer bar (already dark) ── */
.footer-floating-BOBATOTO {
  background: linear-gradient(to bottom, var(--dw-bg) 0%, var(--dw-surface) 48%, var(--dw-bg) 100%) !important;
  border-color: rgba(255, 181, 20, 0.72) !important;
  box-shadow: 0 0 30px rgba(255, 181, 20, 0.3) !important;
}

.footer-btn-BOBATOTO {
  color: var(--dw-bg) !important;
  background: linear-gradient(180deg, #ffe08a 0%, var(--dw-gold) 48%, #c4890f 100%) !important;
  border-color: var(--dw-gold) !important;
  box-shadow: 0 0 14px rgba(255, 181, 20, 0.42) !important;
}

.footer-btn-BOBATOTO img {
  filter: drop-shadow(0 0 5px rgba(255, 181, 20, 0.7)) !important;
}

.footer-btn-BOBATOTO:hover {
  background: var(--dw-gold) !important;
  box-shadow:
    0 0 15px var(--dw-gold),
    0 0 30px var(--dw-gold),
    0 0 50px var(--dw-gold) !important;
}

.footer-btn-BOBATOTO:active {
  background: linear-gradient(135deg, var(--dw-bg), var(--dw-surface-alt)) !important;
  color: var(--dw-gold) !important;
  border-color: var(--dw-gold) !important;
}

/* ── Explore nav / product titles on white ── */
.m-explore-nav__link .link__content,
.m-design__ratings-heading,
.m-design__ratings-service-name,
.m-product-options__social-title,
.m-design-product-info--product-quality h4 {
  color: var(--dw-on-light);
}

.m-tab-nav__item a {
  color: var(--dw-on-light-muted);
}

.m-tab-nav__item a:hover,
.m-tab-nav__item.is-active a,
.m-tab-nav__item [aria-selected="true"] {
  color: var(--dw-purple) !important;
}

.tp-text-note--information {
  border-color: var(--dw-purple) !important;
}