/* Public page dark mode overrides */

html[data-theme="dark"] #public-view {
  color: var(--text);
}

html[data-theme="dark"] #public-view .bg-white,
html[data-theme="dark"] #public-view .bg-slate-50,
html[data-theme="dark"] #public-view .bg-slate-100,
html[data-theme="dark"] #public-view .bg-slate-200,
html[data-theme="dark"] #public-view [class*="from-white"],
html[data-theme="dark"] #public-view [class*="to-slate-50"] {
  background: var(--surface) !important;
}

html[data-theme="dark"] #public-view .text-slate-900,
html[data-theme="dark"] #public-view .text-slate-800,
html[data-theme="dark"] #public-view .text-slate-700,
html[data-theme="dark"] #public-view .text-black {
  color: var(--text) !important;
}

html[data-theme="dark"] #public-view .text-slate-600,
html[data-theme="dark"] #public-view .text-slate-500,
html[data-theme="dark"] #public-view .text-slate-400 {
  color: var(--muted) !important;
}

html[data-theme="dark"] #public-view .border-slate-100,
html[data-theme="dark"] #public-view .border-slate-200,
html[data-theme="dark"] #public-view .border-slate-300 {
  border-color: var(--line) !important;
}

html[data-theme="dark"] #public-view footer {
  background: #020617 !important;
}

html[data-theme="dark"] #public-view .payment-logo-box,
html[data-theme="dark"] #public-view .rounded-lg.bg-white,
html[data-theme="dark"] #public-view .rounded-lg.bg-white.px-5 {
  background: var(--surface-2) !important;
}

html[data-theme="dark"] #public-view header,
html[data-theme="dark"] #public-view nav {
  background: var(--surface) !important;
}