/* =============================================================
   Dark Mode Toggle Button
   ============================================================= */

.topbar__dark-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px 4px 8px;
  border: 1.5px solid rgba(212,168,67,.45);
  border-radius: 20px;
  background: transparent;
  color: rgba(255,255,255,.78);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .03em;
  cursor: pointer;
  transition: color .2s, border-color .2s, background .2s, box-shadow .2s;
  white-space: nowrap;
  flex-shrink: 0;
}

.topbar__dark-btn:hover {
  color: #D4A843;
  border-color: #D4A843;
  background: rgba(212,168,67,.08);
  box-shadow: 0 0 10px rgba(212,168,67,.18);
}

/* Moon shown in light mode; sun shown in dark mode */
.dark-icon--sun  { display: none; }
.dark-icon--moon { display: block; }

html[data-theme="dark"] .dark-icon--sun  { display: block; }
html[data-theme="dark"] .dark-icon--moon { display: none; }

@media (max-width: 600px) {
  .topbar__dark-btn { padding: 4px 7px; }
}


/* =============================================================
   Dark Mode — Hardcoded Color Overrides
   (semantic token overrides live in style.css :root block)
   ============================================================= */

html[data-theme="dark"] {
  color-scheme: dark;
  background-color: #0A1520; /* match dark topbar — fills admin bar gap */
}

/* Match header background to dark topbar */
html[data-theme="dark"] #site-header {
  background-color: #0A1520;
}

/* Topbar has hardcoded #152e4d */
html[data-theme="dark"] .topbar {
  background-color: #0A1520;
  border-bottom-color: rgba(255,255,255,0.05);
}

/* Nav scrolled state has hardcoded #162e4e */
html[data-theme="dark"] .main-nav.is-scrolled {
  background-color: #0D1A28;
}

/* Nav base background uses --color-primary but darken further */
html[data-theme="dark"] .main-nav {
  background-color: #112236;
}

/* Topbar links already inherit rgba white — stays fine in dark */

/* Footer embed wrappers — var(--color-card) resolves to dark in dark mode,
   but the iframe/widget content itself is still white from external sources;
   brightness filter dims it to feel integrated rather than harsh white. */
html[data-theme="dark"] .footer-fb-strip__embed-wrap iframe {
  filter: brightness(0.65) saturate(0.8);
}
html[data-theme="dark"] .footer-np-embed {
  filter: brightness(0.7) saturate(0.8);
}

/* Cards / panels that use inline or hardcoded backgrounds */
html[data-theme="dark"] .history-card,
html[data-theme="dark"] .mvv-card,
html[data-theme="dark"] .contact-card,
html[data-theme="dark"] .event-card,
html[data-theme="dark"] .gallery-item {
  border-color: var(--color-border);
}

/* Input fields */
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
  background-color: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-border);
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: var(--color-text-light);
}

/* Lightbox backdrop — already black, fine */

/* Scrollbar in dark mode */
html[data-theme="dark"] {
  scrollbar-color: #243447 #0F1923;
}

/* =============================================================
   Dark Mode — Feature Cards (home.css hardcoded light backgrounds)
   ============================================================= */

html[data-theme="dark"] .feature-card {
  background-color: #141E2A;
}

html[data-theme="dark"] .feature-card--blue {
  background-color: #0E1928;
  background-image:
    radial-gradient(ellipse 75% 55% at 4% 2%,   rgba(30,58,95,.30)  0%, transparent 62%),
    radial-gradient(ellipse 55% 45% at 96% 98%,  rgba(30,58,95,.18)  0%, transparent 60%),
    radial-gradient(circle at 1px 1px, rgba(30,58,95,.12) 1px, transparent 0);
  background-size: auto, auto, 20px 20px;
}

html[data-theme="dark"] .feature-card--green {
  background-color: #0C1C14;
  background-image:
    radial-gradient(ellipse 75% 55% at 4% 2%,   rgba(74,124,89,.28)  0%, transparent 62%),
    radial-gradient(ellipse 55% 45% at 96% 98%,  rgba(74,124,89,.16)  0%, transparent 60%),
    radial-gradient(circle at 1px 1px, rgba(74,124,89,.12) 1px, transparent 0);
  background-size: auto, auto, 20px 20px;
}

html[data-theme="dark"] .feature-card--gold {
  background-color: #1C1608;
  background-image:
    radial-gradient(ellipse 75% 55% at 4% 2%,   rgba(212,168,67,.28) 0%, transparent 62%),
    radial-gradient(ellipse 55% 45% at 96% 98%,  rgba(212,168,67,.16) 0%, transparent 60%),
    radial-gradient(circle at 1px 1px, rgba(180,140,50,.12) 1px, transparent 0);
  background-size: auto, auto, 20px 20px;
}

html[data-theme="dark"] .feature-card--red {
  background-color: #1E0A0C;
  background-image:
    radial-gradient(ellipse 75% 55% at 4% 2%,   rgba(178,34,52,.28)  0%, transparent 62%),
    radial-gradient(ellipse 55% 45% at 96% 98%,  rgba(178,34,52,.16)  0%, transparent 60%),
    radial-gradient(circle at 1px 1px, rgba(178,34,52,.12) 1px, transparent 0);
  background-size: auto, auto, 20px 20px;
}

html[data-theme="dark"] .feature-card--purple {
  background-color: #120C1E;
  background-image:
    radial-gradient(ellipse 75% 55% at 4% 2%,   rgba(107,70,193,.28) 0%, transparent 62%),
    radial-gradient(ellipse 55% 45% at 96% 98%,  rgba(107,70,193,.16) 0%, transparent 60%),
    radial-gradient(circle at 1px 1px, rgba(107,70,193,.12) 1px, transparent 0);
  background-size: auto, auto, 20px 20px;
}

html[data-theme="dark"] .feature-card--teal {
  background-color: #081C1E;
  background-image:
    radial-gradient(ellipse 75% 55% at 4% 2%,   rgba(13,148,136,.28) 0%, transparent 62%),
    radial-gradient(ellipse 55% 45% at 96% 98%,  rgba(13,148,136,.16) 0%, transparent 60%),
    radial-gradient(circle at 1px 1px, rgba(13,148,136,.12) 1px, transparent 0);
  background-size: auto, auto, 20px 20px;
}

/* Feature card titles use --color-primary (navy) — needs to lighten in dark */
html[data-theme="dark"] .feature-card__title {
  color: var(--color-text);
}

/* Feature card icon colors — hardcoded dark tints, lighten for dark mode */
html[data-theme="dark"] .feature-card--blue   .feature-card__icon { color: #7aaee0; background: rgba(30,58,95,0.35); }
html[data-theme="dark"] .feature-card--green  .feature-card__icon { color: #65c282; background: rgba(74,124,89,0.35); }
html[data-theme="dark"] .feature-card--gold   .feature-card__icon { color: #d4a843; background: rgba(212,168,67,0.30); }
html[data-theme="dark"] .feature-card--red    .feature-card__icon { color: #e87885; background: rgba(178,34,52,0.30); }
html[data-theme="dark"] .feature-card--purple .feature-card__icon { color: #a882e0; background: rgba(107,70,193,0.32); }
html[data-theme="dark"] .feature-card--teal   .feature-card__icon { color: #3ecac2; background: rgba(13,148,136,0.32); }

/* =============================================================
   Dark Mode — Form Inputs (main.css hardcoded #fff background)
   ============================================================= */

html[data-theme="dark"] .form-input {
  background: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-border);
}

html[data-theme="dark"] .form-input:focus {
  border-color: var(--color-accent);
}

/* =============================================================
   Dark Mode — About / Team / Timeline cards (main.css)
   ============================================================= */

html[data-theme="dark"] .history-card {
  background: var(--color-card);
}

html[data-theme="dark"] .mvv-card {
  background: var(--color-card);
}

html[data-theme="dark"] .team-card {
  background: var(--color-card);
}

html[data-theme="dark"] .team--past {
  background: var(--color-surface);
}

html[data-theme="dark"] .team-card--past {
  background: var(--color-card);
}

html[data-theme="dark"] .timeline__card {
  background: var(--color-card);
  border-color: var(--color-border);
}

/* Contact cards */
html[data-theme="dark"] .contact-card {
  background: var(--color-card);
}

/* =============================================================
   Dark Mode — Section alt background
   ============================================================= */

html[data-theme="dark"] .section--alt {
  background: var(--color-surface);
}

/* =============================================================
   Dark Mode — Mobile nav menu background (main.css hardcoded #162e4e)
   ============================================================= */

@media (max-width: 1024px) {
  html[data-theme="dark"] .main-nav__menu-wrap {
    background: #0D1A28;
  }
}

/* =============================================================
   Dark Mode — Headings
   h1–h6 default to color: var(--color-primary) (dark navy) in style.css;
   override to readable light color on dark backgrounds.
   Headings inside nav/hero/footer already use white and are unaffected
   because --color-text in dark mode (#E8EDF2) is also near-white.
   ============================================================= */

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6 {
  color: var(--color-text);
}

/* =============================================================
   Dark Mode — Text elements using var(--color-primary) directly
   ============================================================= */

/* Team cards */
html[data-theme="dark"] .team-card__name {
  color: var(--color-text);
}

/* Timeline */
html[data-theme="dark"] .timeline__title {
  color: var(--color-text);
}

html[data-theme="dark"] .timeline__dot {
  border-color: var(--color-surface);
}

/* Contact cards & map */
html[data-theme="dark"] .contact-card__title {
  color: var(--color-text);
}

html[data-theme="dark"] .contact-card__link {
  color: var(--color-link);
}

html[data-theme="dark"] .contact-card__icon--navy {
  background: rgba(107,159,212,0.12);
  color: var(--color-link);
}

html[data-theme="dark"] .contact-map-meta svg {
  color: var(--color-text-light);
}

/* Event cards */
html[data-theme="dark"] .event-card__title a {
  color: var(--color-text);
}

html[data-theme="dark"] .event-card__link:hover {
  color: var(--color-accent);
}

/* Filter tabs */
html[data-theme="dark"] .filter-tab:hover {
  color: var(--color-text);
  border-color: var(--color-border);
}

html[data-theme="dark"] .filter-tab.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

/* Home — QA / feature section card titles */
html[data-theme="dark"] .qa-card__title {
  color: var(--color-text);
}

/* Home — stat numbers (use accent gold for visual emphasis) */
html[data-theme="dark"] .stat-number {
  color: var(--color-accent);
}

html[data-theme="dark"] .stat-label {
  color: var(--color-text-light);
}

/* Home — news / blog card titles */
html[data-theme="dark"] .news-card__title,
html[data-theme="dark"] .news-card__title a {
  color: var(--color-text);
}

/* Legal pages */
html[data-theme="dark"] .legal-page__wrap a,
html[data-theme="dark"] .legal-page__zone a {
  color: var(--color-link);
}

html[data-theme="dark"] .legal-page__zone a:hover {
  color: var(--color-link-hover);
}

/* =============================================================
   Dark Mode — No Red: all crimson/red replaced with brand gold
   --color-secondary is already overridden to #D4A843 in style.css.
   These rules fix:
   (a) hardcoded hex red values that bypass the CSS variable
   (b) buttons where gold background needs dark text (not white)
   (c) gradient endpoints that still reference hard red hex values
   ============================================================= */

/* ── Buttons ──────────────────────────────────────────────────
   Gold (#D4A843) as a background has only 2.1:1 contrast with
   white — swap button text to dark charcoal for legibility.    */
html[data-theme="dark"] .btn--primary {
  color: #1E2328;
}
html[data-theme="dark"] .btn--primary:hover {
  background-color: #b8892d;
  border-color: #b8892d;
  color: #1E2328;
}

/* Nav "Apply / Join" button (has !important overrides in main.css) */
html[data-theme="dark"] .main-nav__apply-btn {
  background: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
  color: #1E2328 !important;
}
html[data-theme="dark"] .main-nav__apply-btn:hover {
  background: #b8892d !important;
  border-color: #b8892d !important;
  color: #1E2328 !important;
}

/* Member-portal primary button */
html[data-theme="dark"] .portal-btn--primary {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #1E2328;
}
html[data-theme="dark"] .portal-btn--primary:hover {
  background: #b8892d;
  border-color: #b8892d;
  color: #1E2328;
}

/* ── Advertisement Ribbon ─────────────────────────────────── */
/* Gold background stays gold in dark mode; darken slightly for depth. */
html[data-theme="dark"] .ad-ribbon {
  background: #c49a35;
}
html[data-theme="dark"] .ad-ribbon__tag  { color: rgba(30, 35, 40, 0.5); }
html[data-theme="dark"] .ad-ribbon__desc { color: rgba(30, 35, 40, 0.68); }

/* ── CTA Banner ───────────────────────────────────────────────
   Banner background was var(--color-secondary); gold with white
   text fails contrast — use deep navy instead.                 */
html[data-theme="dark"] .cta-banner {
  background-color: #0D1E35;
}

/* ── Crimson gradient cards — fix dark-red endpoint ──────────
   "Crimson" event-card headers and gallery placeholders used
   linear-gradient(... #8f1a27). Replace endpoint with dark gold. */
html[data-theme="dark"] .event-card__header--crimson,
html[data-theme="dark"] .event-card__header--crimson {
  background: linear-gradient(135deg, var(--color-accent) 0%, #a07e2a 100%);
}
html[data-theme="dark"] .gallery-item--crimson,
html[data-theme="dark"] .gallery__item--crimson {
  background: linear-gradient(135deg, var(--color-accent) 0%, #a07e2a 100%);
}

/* ── Feature card "red" variant ───────────────────────────── */
html[data-theme="dark"] .feature-card--red .feature-card__icon {
  color: var(--color-accent);
  background: rgba(212,168,67,0.18);
}

/* ── Alert / flash states (hardcoded red backgrounds + text) ─ */
html[data-theme="dark"] .portal-alert--error {
  background: rgba(212,168,67,0.07);
  color: var(--color-accent);
  border-color: rgba(212,168,67,0.22);
}
html[data-theme="dark"] .contact-flash--error {
  background: rgba(212,168,67,0.07);
  color: var(--color-accent);
  border-color: rgba(212,168,67,0.22);
}

/* ── Portal red info-card / badge / action-card ───────────── */
html[data-theme="dark"] .portal-info-card__icon--red {
  background: rgba(212,168,67,0.10);
  color: var(--color-accent);
}
html[data-theme="dark"] .portal-status-badge--red {
  background: rgba(212,168,67,0.10);
  color: var(--color-accent);
}
html[data-theme="dark"] .portal-action-card--red,
html[data-theme="dark"] .portal-action-card--red strong,
html[data-theme="dark"] .portal-action-card--red .portal-action-card__arrow {
  color: var(--color-accent);
}
html[data-theme="dark"] .portal-action-card--red:hover {
  border-color: var(--color-accent);
  box-shadow: 0 6px 24px rgba(212,168,67,0.15);
}

/* ── Event sidebar — replace light gold stripes with dark navy ── */
html[data-theme="dark"] .single-event-sidebar {
  background: #162231;
}

/* ── Event info card ──────────────────────────────────────── */
html[data-theme="dark"] .event-info-card {
  background: #1A2A3A;
  border-color: rgba(212, 168, 67, 0.30);
}

html[data-theme="dark"] .event-info-card__title {
  color: var(--color-accent);
}

html[data-theme="dark"] .event-info-card__list strong {
  color: rgba(212, 168, 67, 0.7);
}

html[data-theme="dark"] .event-info-card__list span {
  color: var(--color-text);
}

html[data-theme="dark"] .event-info-card__list svg {
  color: rgba(212, 168, 67, 0.6);
}

html[data-theme="dark"] .event-info-card__list li {
  border-bottom-color: rgba(212, 168, 67, 0.12);
}

/* ── Event ticket box ─────────────────────────────────────── */
html[data-theme="dark"] .event-ticket-box {
  background: #1A2A3A;
  border-color: rgba(212, 168, 67, 0.30);
}

html[data-theme="dark"] .event-ticket-box__header h3 {
  color: var(--color-text);
}

html[data-theme="dark"] .event-ticket-box__price-amount {
  color: var(--color-accent);
}

html[data-theme="dark"] .event-ticket-box__price-label {
  color: var(--color-text-light);
}

html[data-theme="dark"] .event-ticket-box__price {
  border-bottom-color: rgba(212, 168, 67, 0.2);
}

html[data-theme="dark"] .event-ticket-box__availability {
  border-bottom-color: rgba(212, 168, 67, 0.15);
}

html[data-theme="dark"] .event-ticket-avail-text {
  color: var(--color-text-light);
}

html[data-theme="dark"] .event-ticket-box__desc {
  color: var(--color-text-light);
  border-bottom-color: rgba(212, 168, 67, 0.15);
}

html[data-theme="dark"] .event-ticket-box__details-label span {
  color: var(--color-text-light);
}

html[data-theme="dark"] .event-ticket-box__details-label::after {
  background: rgba(212, 168, 67, 0.2);
}

html[data-theme="dark"] .event-ticket-box--closed h3,
html[data-theme="dark"] .event-ticket-box--soldout h3 {
  color: var(--color-text);
}

html[data-theme="dark"] .event-ticket-box--closed p,
html[data-theme="dark"] .event-ticket-box--soldout p {
  color: var(--color-text-light);
}

/* ── Tier selector ────────────────────────────────────────── */
html[data-theme="dark"] .event-ticket-tiers-section {
  background: rgba(212, 168, 67, 0.06);
  border-bottom-color: rgba(212, 168, 67, 0.2);
}

html[data-theme="dark"] .event-ticket-tiers-section__label {
  color: var(--color-text);
}

html[data-theme="dark"] .event-ticket-tier__card {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(212, 168, 67, 0.3);
}

html[data-theme="dark"] .event-ticket-tier__card:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(212, 168, 67, 0.6);
}

html[data-theme="dark"] .event-ticket-tier input[type="radio"]:checked + .event-ticket-tier__card {
  border-color: var(--color-accent);
  background: rgba(212, 168, 67, 0.14);
}

html[data-theme="dark"] .event-ticket-tier__label {
  color: var(--color-text);
}

html[data-theme="dark"] .event-ticket-tier__price {
  color: var(--color-accent);
}

html[data-theme="dark"] .event-ticket-free-note {
  color: var(--color-text-light);
}

/* ── Ticket purchase form ─────────────────────────────────── */
html[data-theme="dark"] .event-ticket-form__field label {
  color: var(--color-text);
}

html[data-theme="dark"] .event-ticket-form__field .optional {
  color: var(--color-text-light);
}

html[data-theme="dark"] .event-ticket-form__field .req {
  color: #e05c6e;
}

html[data-theme="dark"] .event-ticket-form__field input,
html[data-theme="dark"] .event-ticket-form__field select {
  background: rgba(255, 255, 255, 0.12);
  color: var(--color-text);
  border-color: rgba(212, 168, 67, 0.45);
}

html[data-theme="dark"] .event-ticket-form__field input::placeholder {
  color: var(--color-text-light);
}

html[data-theme="dark"] .event-ticket-form__field input:focus,
html[data-theme="dark"] .event-ticket-form__field select:focus {
  background: rgba(255, 255, 255, 0.18);
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(212, 168, 67, 0.22);
}

html[data-theme="dark"] .event-ticket-form__hint {
  color: var(--color-text-light);
}

html[data-theme="dark"] .event-ticket-form__total-label {
  color: var(--color-text-light);
}

html[data-theme="dark"] .event-ticket-form__total-amount {
  color: var(--color-accent);
}

html[data-theme="dark"] .event-ticket-form__secure {
  color: var(--color-text-light);
}

/* ── Ticket notices ───────────────────────────────────────── */
html[data-theme="dark"] .event-ticket-notice--error {
  background: rgba(178, 34, 52, 0.2);
  border-color: rgba(178, 34, 52, 0.45);
  color: #f08090;
}

html[data-theme="dark"] .event-ticket-notice--success {
  background: rgba(74, 124, 89, 0.2);
  border-color: rgba(74, 124, 89, 0.45);
  color: #7dcf96;
}

/* =============================================================
   Dark Mode — Members Portal Login
   The login card keeps its gold/white stripe background in dark
   mode, so all text inside must stay in their dark-on-gold
   values — override the global h1–h6 light-text rule.
   ============================================================= */

html[data-theme="dark"] .portal-login-heading {
  color: #3D2A04;
}

html[data-theme="dark"] .portal-login-title {
  color: #3D2A04;
}

html[data-theme="dark"] .portal-login-subtitle {
  color: #7D6318;
}

html[data-theme="dark"] .portal-login-card .portal-label {
  color: #5A3D08;
}

html[data-theme="dark"] .portal-login-card .portal-label__link {
  color: #7D6318;
}

html[data-theme="dark"] .portal-login-footer {
  color: #7D6318;
}

html[data-theme="dark"] .portal-login-footer a {
  color: #5A3D08;
}

/* =============================================================
   Dark Mode — Home Page Non-Heading Titles
   (class-based color: --color-primary not caught by h1–h6 rule)
   ============================================================= */

/* About-section stats (large numbers + labels) */
html[data-theme="dark"] .about__badge-num,
html[data-theme="dark"] .about__badge-label,
html[data-theme="dark"] .about__deco-card {
  color: var(--color-text);
}

/* Facebook / community feed section heading */
html[data-theme="dark"] .fb-feed-section__title {
  color: var(--color-text);
}

/* =============================================================
   Dark Mode — Membership Page Titles
   ============================================================= */

html[data-theme="dark"] .review-section__heading {
  color: var(--color-text-light);
}

html[data-theme="dark"] .success-title {
  color: var(--color-text);
}

html[data-theme="dark"] .success-steps {
  background: #1A2A3A;
  border-color: rgba(212, 168, 67, 0.20);
}
html[data-theme="dark"] .success-steps h3 {
  color: var(--color-text);
}
html[data-theme="dark"] .success-steps li {
  color: #8D9AAB;
}

/* =============================================================
   Dark Mode — Members Portal (additional titles & elements)
   ============================================================= */

/* Section headings inside cards */
html[data-theme="dark"] .portal-summary-card__title,
html[data-theme="dark"] .portal-section__title {
  color: var(--color-text);
}

/* Welcome emphasis */
html[data-theme="dark"] .portal-welcome strong {
  color: var(--color-text);
}

/* Avatar/photo placeholder initial */
html[data-theme="dark"] .portal-photo-placeholder {
  background: rgba(107,159,212,0.12);
  color: var(--color-link);
}

/* Navy action card — replace navy with link-blue */
html[data-theme="dark"] .portal-action-card--navy,
html[data-theme="dark"] .portal-action-card--navy strong,
html[data-theme="dark"] .portal-action-card--navy .portal-action-card__arrow {
  color: var(--color-link);
}

html[data-theme="dark"] .portal-action-card--navy:hover {
  border-color: var(--color-link);
  box-shadow: 0 6px 24px rgba(107,159,212,0.15);
}

/* Outline button — replace navy with gold */
html[data-theme="dark"] .portal-btn--outline {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

html[data-theme="dark"] .portal-btn--outline:hover {
  background: var(--color-accent);
  color: #1E2328;
  border-color: var(--color-accent);
}

/* =============================================================
   Dark Mode — Membership Type Selection Cards
   (General & Lifetime — initial plan-chooser step)
   ============================================================= */

html[data-theme="dark"] .mem-type-card {
  background: #1A2A3A;
  border-color: rgba(100, 130, 170, 0.30);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.30);
}
html[data-theme="dark"] .mem-type-card:hover {
  border-color: rgba(107, 159, 212, 0.60);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.40);
}
html[data-theme="dark"] .mem-type-card--featured {
  background: #1C2B3C;
  border-color: rgba(212, 168, 67, 0.40);
}
html[data-theme="dark"] .mem-type-card--featured:hover {
  border-color: rgba(212, 168, 67, 0.70);
}
html[data-theme="dark"] .mem-type-card--selected {
  border-color: rgba(107, 159, 212, 0.80) !important;
  box-shadow: 0 0 0 3px rgba(107, 159, 212, 0.20), 0 6px 24px rgba(0, 0, 0, 0.40);
}
html[data-theme="dark"] .mem-type-card--featured.mem-type-card--selected {
  border-color: rgba(212, 168, 67, 0.90) !important;
  box-shadow: 0 0 0 3px rgba(212, 168, 67, 0.25), 0 4px 20px rgba(212, 168, 67, 0.20);
}

html[data-theme="dark"] .mem-type-card__name {
  color: #E8EDF2;
}
html[data-theme="dark"] .mem-type-price {
  color: #E8EDF2;
}
html[data-theme="dark"] .mem-type-card--featured .mem-type-price {
  color: var(--color-accent);
}
html[data-theme="dark"] .mem-type-period {
  color: #8D9AAB;
}
html[data-theme="dark"] .mem-type-card__desc {
  color: #8D9AAB;
}
html[data-theme="dark"] .mem-type-features li {
  color: #C8D4E0;
}
html[data-theme="dark"] .mem-type-features li::before {
  color: #6B9FD4;
}
html[data-theme="dark"] .mem-type-card--featured .mem-type-features li::before {
  color: var(--color-accent);
}
html[data-theme="dark"] .mem-type-badge--blue {
  background: rgba(30, 80, 130, 0.40);
  color: #7BB3D4;
}
html[data-theme="dark"] .mem-type-badge--gold {
  background: rgba(212, 168, 67, 0.15);
  color: #D4A843;
}

/* =============================================================
   Dark Mode — Donation Thank-You Share Section
   ============================================================= */

html[data-theme="dark"] .donate-success-share {
  border-top-color: rgba(212, 168, 67, 0.20);
}
html[data-theme="dark"] .donate-success-share p {
  color: #8D9AAB;
}