:root,
html[data-drmagica-theme="light"] {
  --drm-bg: #ffffff;
  --drm-surface: #ffffff;
  --drm-surface-soft: #f8f9fa;
  --drm-text: #212529;
  --drm-muted: #6c757d;
  --drm-border: #dee2e6;
  --drm-brand: #234161;
}

html[data-drmagica-theme="dark"] {
  --drm-bg: #263442;
  --drm-surface: #34495a;
  --drm-surface-soft: #40586b;
  --drm-footer: #30475a;
  --drm-text: #f4f7fa;
  --drm-muted: #d2d9e1;
  --drm-border: #61788c;
  --drm-brand: #b7dcff;
  --drm-link: #a8d8ff;
}

html[data-drmagica-theme] body {
  background-color: var(--drm-bg) !important;
  color: var(--drm-text);
}

html[data-drmagica-theme] .gl-navbar,
html[data-drmagica-theme] .dg-navbar,
html[data-drmagica-theme] .offcanvas,
html[data-drmagica-theme] .offcanvas-header,
html[data-drmagica-theme] .dropdown-menu,
html[data-drmagica-theme] .card,
html[data-drmagica-theme] .card-lite,
html[data-drmagica-theme] .svc-card,
html[data-drmagica-theme] .about-card,
html[data-drmagica-theme] .bg-mypurchase,
html[data-drmagica-theme] .box-order-detail,
html[data-drmagica-theme] .p-form-box,
html[data-drmagica-theme] .product-card,
html[data-drmagica-theme] .related-card,
html[data-drmagica-theme] .bg-sub-mypurchase {
  background-color: var(--drm-surface) !important;
  color: var(--drm-text) !important;
  border-color: var(--drm-border) !important;
}

html[data-drmagica-theme] .gl-navbar .nav-link,
html[data-drmagica-theme] .dg-navbar .nav-link,
html[data-drmagica-theme] .dropdown-item,
html[data-drmagica-theme] .lang-switch .lang,
html[data-drmagica-theme] .text-dark,
html[data-drmagica-theme] .table {
  color: var(--drm-text) !important;
}

html[data-drmagica-theme="dark"] .dropdown-item:hover,
html[data-drmagica-theme="dark"] .dropdown-item:focus,
html[data-drmagica-theme="dark"] .btn-account:hover,
html[data-drmagica-theme="dark"] .table > :not(caption) > * > * {
  background-color: var(--drm-surface-soft);
  color: var(--drm-text);
}

html[data-drmagica-theme] .form-control,
html[data-drmagica-theme] .form-select,
html[data-drmagica-theme] textarea,
html[data-drmagica-theme] input:not([type="checkbox"]):not([type="radio"]),
html[data-drmagica-theme] select {
  background-color: var(--drm-surface) !important;
  color: var(--drm-text) !important;
  border-color: var(--drm-border) !important;
}

html[data-drmagica-theme] .text-muted {
  color: var(--drm-muted) !important;
}

html[data-drmagica-theme="light"] .hero {
  color: #212529;
}

html[data-drmagica-theme="light"] .card-lite,
html[data-drmagica-theme="light"] .svc-card {
  background: #ffffff !important;
}

html[data-drmagica-theme="light"] .pill,
html[data-drmagica-theme="light"] .svc-icon {
  background: #eef2f7 !important;
  color: #234161 !important;
}

html[data-drmagica-theme="dark"] .hero {
  background-color: var(--drm-surface) !important;
  color: var(--drm-text) !important;
}

html[data-drmagica-theme="dark"] .pill,
html[data-drmagica-theme="dark"] .svc-icon {
  background: var(--drm-surface-soft) !important;
  color: #e3efff !important;
}

/* Dark mode: normalize legacy public surfaces that still hard-code white. */
html[data-drmagica-theme="dark"] .content-mypurchase,
html[data-drmagica-theme="dark"] #mc-window,
html[data-drmagica-theme="dark"] .mc-body,
html[data-drmagica-theme="dark"] .mc-inputbar {
  background: var(--drm-surface) !important;
  color: var(--drm-text) !important;
  border-color: var(--drm-border) !important;
}

html[data-drmagica-theme="dark"] footer.container-fluid,
html[data-drmagica-theme="dark"] .footer-container {
  background: var(--drm-footer) !important;
  color: var(--drm-text) !important;
  border-color: var(--drm-border) !important;
}

/* Keep the original transparent logo asset legible without recoloring it. */
html[data-drmagica-theme="dark"] .gl-brand-img,
html[data-drmagica-theme="dark"] .dg-brand-img,
html[data-drmagica-theme="dark"] footer .footer-logo {
  box-sizing: border-box;
  background: #f4f7fa;
  border: 1px solid #d9e2ea;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(9, 20, 31, .22);
  padding: 6px 10px;
}

html[data-drmagica-theme="dark"] footer,
html[data-drmagica-theme="dark"] footer h1,
html[data-drmagica-theme="dark"] footer h2,
html[data-drmagica-theme="dark"] footer h3,
html[data-drmagica-theme="dark"] footer h4,
html[data-drmagica-theme="dark"] footer h5,
html[data-drmagica-theme="dark"] footer h6,
html[data-drmagica-theme="dark"] footer li,
html[data-drmagica-theme="dark"] footer .text-dark {
  color: var(--drm-text) !important;
}

html[data-drmagica-theme="dark"] footer .footer-link,
html[data-drmagica-theme="dark"] body a:not(.btn):not(.nav-link):not(.dropdown-item):not(.navbar-brand) {
  color: var(--drm-link) !important;
}

html[data-drmagica-theme="dark"] footer .footer-link:hover,
html[data-drmagica-theme="dark"] footer .footer-link:focus,
html[data-drmagica-theme="dark"] body a:not(.btn):not(.nav-link):not(.dropdown-item):not(.navbar-brand):hover,
html[data-drmagica-theme="dark"] body a:not(.btn):not(.nav-link):not(.dropdown-item):not(.navbar-brand):focus {
  color: #d8edff !important;
}

html[data-drmagica-theme="dark"] h1,
html[data-drmagica-theme="dark"] h2,
html[data-drmagica-theme="dark"] h3,
html[data-drmagica-theme="dark"] h4,
html[data-drmagica-theme="dark"] h5,
html[data-drmagica-theme="dark"] h6,
html[data-drmagica-theme="dark"] .name-price,
html[data-drmagica-theme="dark"] .txt-title-detail-order,
html[data-drmagica-theme="dark"] .txt-detail-mypur,
html[data-drmagica-theme="dark"] .my-pur-order-id {
  color: var(--drm-text) !important;
}

html[data-drmagica-theme="dark"] .desc,
html[data-drmagica-theme="dark"] .text-muted,
html[data-drmagica-theme="dark"] .product-card [style*="color:#777"],
html[data-drmagica-theme="dark"] .related-card [style*="color:#777"],
html[data-drmagica-theme="dark"] .content-mypurchase [style*="color:#777"] {
  color: var(--drm-muted) !important;
}

html[data-drmagica-theme="dark"] .about-card [style*="color:#333"],
html[data-drmagica-theme="dark"] h3[style*="color:#234161"],
html[data-drmagica-theme="dark"] p[style*="color:#234161"],
html[data-drmagica-theme="dark"] .product-card [style*="color:#444"],
html[data-drmagica-theme="dark"] .related-card [style*="color:#444"],
html[data-drmagica-theme="dark"] .product-card [style*="color:#666"],
html[data-drmagica-theme="dark"] .related-card [style*="color:#666"],
html[data-drmagica-theme="dark"] .product-card [style*="color:#888"],
html[data-drmagica-theme="dark"] .related-card [style*="color:#888"] {
  color: var(--drm-text) !important;
}

html[data-drmagica-theme="dark"] .btn-outline-primary,
html[data-drmagica-theme="dark"] .btn-outline-secondary,
html[data-drmagica-theme="dark"] .btn-outline-pill {
  background: transparent !important;
  border-color: var(--drm-link) !important;
  color: var(--drm-link) !important;
}

html[data-drmagica-theme="dark"] .btn-outline-primary:hover,
html[data-drmagica-theme="dark"] .btn-outline-primary:focus,
html[data-drmagica-theme="dark"] .btn-outline-secondary:hover,
html[data-drmagica-theme="dark"] .btn-outline-secondary:focus,
html[data-drmagica-theme="dark"] .btn-outline-pill:hover,
html[data-drmagica-theme="dark"] .btn-outline-pill:focus {
  background: var(--drm-link) !important;
  color: #101820 !important;
}

html[data-drmagica-theme="dark"] .btn-fill-pill,
html[data-drmagica-theme="dark"] .btn-primary,
html[data-drmagica-theme="dark"] .btn-sumorder-mypur {
  background: #356f9f !important;
  border-color: var(--drm-link) !important;
  color: #ffffff !important;
}

html[data-drmagica-theme="dark"] .table {
  --bs-table-bg: var(--drm-surface);
  --bs-table-color: var(--drm-text);
  --bs-table-border-color: var(--drm-border);
}

html[data-drmagica-theme="dark"] .img-thumbnail {
  background-color: var(--drm-surface-soft);
  border-color: var(--drm-border);
}

html[data-drmagica-theme="dark"] .navbar-toggler-icon,
html[data-drmagica-theme="dark"] .btn-close {
  filter: invert(1) grayscale(1) brightness(1.8);
}

html[data-drmagica-theme="dark"] .mc-bot,
html[data-drmagica-theme="dark"] .mc-me {
  background: var(--drm-surface-soft) !important;
  color: var(--drm-text) !important;
}

html[data-drmagica-theme="dark"] ::placeholder {
  color: var(--drm-muted) !important;
  opacity: 1;
}

.drmagica-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  min-height: 36px;
  padding: .35rem .65rem;
  border: 1px solid var(--drm-border, #dee2e6);
  border-radius: 999px;
  background: var(--drm-surface, #fff);
  color: var(--drm-text, #212529);
  font: inherit;
  line-height: 1;
  cursor: pointer;
}

.drmagica-theme-toggle:hover,
.drmagica-theme-toggle:focus-visible {
  color: var(--drm-brand, #234161);
  border-color: currentColor;
  outline: 2px solid transparent;
}