/*
 * Theme layer for donate.php.
 * File này được nạp sau style.css và chỉ tác động khi trang có donate-theme-root.
 */

html.donate-theme-root {
  --dt-content-width: 1200px;
  --dt-left-grow: 60;
  --dt-right-grow: 40;
  --dt-column-gap: 40px;
  --dt-container-padding: 40px;
  --dt-banner-height: 250px;
  --dt-corner-radius: 20px;
  --dt-accent-primary: #00f5ff;
  --dt-accent-secondary: #9d4edd;

  --dt-page-bg: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
  --dt-surface: #111827;
  --dt-panel: #0f172a;
  --dt-elevated: #1f2a44;
  --dt-input: #0b1626;
  --dt-text: #ffffff;
  --dt-muted: #94a3b8;
  --dt-border: rgba(148, 163, 184, .20);
  --dt-nav-bg: rgba(17, 24, 39, .85);
  --dt-nav-bg-scrolled: rgba(17, 24, 39, .97);
  --dt-shadow: 0 0 50px rgba(0, 0, 0, .60);
  --dt-accent-contrast: #000000;
}

html.donate-theme-root[data-donate-theme="ocean"] {
  --dt-page-bg: linear-gradient(135deg, #031522, #07324d, #0a2238);
  --dt-surface: #071b2b;
  --dt-panel: #0b263d;
  --dt-elevated: #103653;
  --dt-input: #061725;
  --dt-text: #f0f9ff;
  --dt-muted: #8fb6cc;
  --dt-border: rgba(56, 189, 248, .22);
  --dt-nav-bg: rgba(4, 25, 40, .88);
  --dt-nav-bg-scrolled: rgba(4, 25, 40, .97);
  --dt-shadow: 0 24px 70px rgba(1, 12, 20, .58);
  --dt-accent-contrast: #03131f;
}

html.donate-theme-root[data-donate-theme="royal"] {
  --dt-page-bg: linear-gradient(135deg, #120824, #2c1458, #12091f);
  --dt-surface: #1a0f2f;
  --dt-panel: #251541;
  --dt-elevated: #321d52;
  --dt-input: #140b25;
  --dt-text: #faf5ff;
  --dt-muted: #c4b5d8;
  --dt-border: rgba(192, 132, 252, .22);
  --dt-nav-bg: rgba(25, 13, 45, .88);
  --dt-nav-bg-scrolled: rgba(25, 13, 45, .97);
  --dt-shadow: 0 24px 70px rgba(9, 3, 18, .62);
  --dt-accent-contrast: #130720;
}

html.donate-theme-root[data-donate-theme="sunset"] {
  --dt-page-bg: linear-gradient(135deg, #210e13, #4b1c24, #170c13);
  --dt-surface: #271318;
  --dt-panel: #351921;
  --dt-elevated: #4b222a;
  --dt-input: #1d0f14;
  --dt-text: #fff7ed;
  --dt-muted: #d6aaa5;
  --dt-border: rgba(251, 113, 133, .22);
  --dt-nav-bg: rgba(38, 17, 22, .88);
  --dt-nav-bg-scrolled: rgba(38, 17, 22, .97);
  --dt-shadow: 0 24px 70px rgba(18, 5, 8, .62);
  --dt-accent-contrast: #250b0d;
}

html.donate-theme-root[data-donate-theme="emerald"] {
  --dt-page-bg: linear-gradient(135deg, #041714, #0a3028, #061512);
  --dt-surface: #081e1a;
  --dt-panel: #0d2b25;
  --dt-elevated: #123d34;
  --dt-input: #061814;
  --dt-text: #ecfdf5;
  --dt-muted: #91b9ae;
  --dt-border: rgba(52, 211, 153, .22);
  --dt-nav-bg: rgba(6, 29, 24, .88);
  --dt-nav-bg-scrolled: rgba(6, 29, 24, .97);
  --dt-shadow: 0 24px 70px rgba(1, 15, 12, .62);
  --dt-accent-contrast: #041510;
}

html.donate-theme-root[data-donate-theme="graphite"] {
  --dt-page-bg: linear-gradient(135deg, #090b0e, #181b20, #0b0e12);
  --dt-surface: #14171c;
  --dt-panel: #1b1f26;
  --dt-elevated: #252b34;
  --dt-input: #0e1115;
  --dt-text: #f8fafc;
  --dt-muted: #9ca3af;
  --dt-border: rgba(203, 213, 225, .16);
  --dt-nav-bg: rgba(18, 21, 26, .90);
  --dt-nav-bg-scrolled: rgba(18, 21, 26, .98);
  --dt-shadow: 0 24px 70px rgba(0, 0, 0, .62);
  --dt-accent-contrast: #020617;
}

/* ===== Kích thước an toàn, không thay đổi DOM hoặc JavaScript ===== */

html.donate-theme-root body.donate-page .container,
html.donate-theme-root body.donate-page .navbar-inner {
  max-width: var(--dt-content-width);
}

html.donate-theme-root body.donate-page .banner {
  border-radius: var(--dt-corner-radius);
}

@media (min-width: 981px) {
  html.donate-theme-root body.donate-page .container {
    padding: var(--dt-container-padding);
    border-radius: var(--dt-corner-radius);
  }

  html.donate-theme-root body.donate-page .main-layout {
    gap: var(--dt-column-gap);
  }

  html.donate-theme-root body.donate-page .left-col {
    flex: var(--dt-left-grow) 1 0;
  }

  html.donate-theme-root body.donate-page .right-col {
    flex: var(--dt-right-grow) 1 0;
    min-width: 280px;
    border-radius: var(--dt-corner-radius);
  }

  html.donate-theme-root body.donate-page .banner {
    height: var(--dt-banner-height);
  }
}

/* Các nút thương hiệu có giá trị mặc định giống hệt giao diện cũ. */
html.donate-theme-root body.donate-page button.main-btn,
html.donate-theme-root body.donate-page .navbar-login-btn {
  background-image: linear-gradient(90deg, var(--dt-accent-primary), var(--dt-accent-secondary));
}

html.donate-theme-root body.donate-page button.main-btn,
html.donate-theme-root body.donate-page .navbar-login-btn {
  color: var(--dt-accent-contrast);
}

/*
 * Logo dùng gradient 5 điểm và background-size 300% để giữ nguyên animation
 * logoGradientMove đã có trong style.css. Không gộp logo với gradient 2 màu
 * của button vì sẽ làm hiệu ứng đổi màu gần như biến mất.
 */
html.donate-theme-root body.donate-page .navbar-logo {
  background-image: linear-gradient(
    90deg,
    #00f5ff,
    #a855f7,
    #ff4ecd,
    #ffd166,
    #00f5ff
  );
  background-size: 300% 100%;
  animation: logoGradientMove 240s linear infinite;
}

html.donate-theme-root:not([data-donate-theme="current"]) body.donate-page .navbar-logo,
html.donate-theme-root[data-donate-custom-accent="1"] body.donate-page .navbar-logo {
  background-image: linear-gradient(
    90deg,
    var(--dt-accent-primary),
    var(--dt-accent-secondary),
    var(--dt-accent-primary),
    var(--dt-accent-secondary),
    var(--dt-accent-primary)
  );
}

@supports (color: color-mix(in srgb, #fff 50%, #000)) {
  html.donate-theme-root:not([data-donate-theme="current"]) body.donate-page .navbar-logo,
  html.donate-theme-root[data-donate-custom-accent="1"] body.donate-page .navbar-logo {
    background-image: linear-gradient(
      90deg,
      var(--dt-accent-primary),
      var(--dt-accent-secondary),
      color-mix(in srgb, var(--dt-accent-primary) 42%, #ffffff),
      var(--dt-accent-secondary),
      var(--dt-accent-primary)
    );
  }
}

/* ===== Áp palette cho các preset mới; preset current giữ CSS production ===== */

html.donate-theme-root:not([data-donate-theme="current"]),
html.donate-theme-root:not([data-donate-theme="current"]) body.donate-page {
  background: var(--dt-page-bg);
  color: var(--dt-text);
}

html.donate-theme-root:not([data-donate-theme="current"]) body.donate-page .container {
  background: var(--dt-surface);
  color: var(--dt-text);
  box-shadow: var(--dt-shadow);
}

html.donate-theme-root:not([data-donate-theme="current"]) body.donate-page .top-navbar {
  background: var(--dt-nav-bg);
  border-bottom-color: var(--dt-border);
}

html.donate-theme-root:not([data-donate-theme="current"]) body.donate-page .top-navbar.scrolled {
  background: var(--dt-nav-bg-scrolled);
}

@media (min-width: 769px) {
  html.donate-theme-root:not([data-donate-theme="current"]) body.donate-page .right-col {
    background: var(--dt-panel);
  }
}

html.donate-theme-root:not([data-donate-theme="current"]) body.donate-page input:not([type="checkbox"]):not([type="radio"]),
html.donate-theme-root:not([data-donate-theme="current"]) body.donate-page textarea,
html.donate-theme-root:not([data-donate-theme="current"]) body.donate-page select,
html.donate-theme-root:not([data-donate-theme="current"]) body.donate-page .wheel-picker select {
  background: var(--dt-input);
  color: var(--dt-text);
  border-color: var(--dt-border);
}

html.donate-theme-root:not([data-donate-theme="current"]) body.donate-page select option {
  background: var(--dt-surface);
  color: var(--dt-text);
}

html.donate-theme-root:not([data-donate-theme="current"]) body.donate-page select:hover,
html.donate-theme-root:not([data-donate-theme="current"]) body.donate-page input:hover,
html.donate-theme-root:not([data-donate-theme="current"]) body.donate-page textarea:hover {
  border-color: var(--dt-accent-primary);
}

html.donate-theme-root:not([data-donate-theme="current"]) body.donate-page select:focus,
html.donate-theme-root:not([data-donate-theme="current"]) body.donate-page input:focus,
html.donate-theme-root:not([data-donate-theme="current"]) body.donate-page textarea:focus {
  border-color: var(--dt-accent-secondary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dt-accent-secondary) 20%, transparent);
}

html.donate-theme-root:not([data-donate-theme="current"]) body.donate-page .quick-amount button,
html.donate-theme-root:not([data-donate-theme="current"]) body.donate-page .emoji-picker,
html.donate-theme-root:not([data-donate-theme="current"]) body.donate-page .record-area,
html.donate-theme-root:not([data-donate-theme="current"]) body.donate-page .record-box,
html.donate-theme-root:not([data-donate-theme="current"]) body.donate-page .wheel-donate-card,
html.donate-theme-root:not([data-donate-theme="current"]) body.donate-page .wheel-donate-note,
html.donate-theme-root:not([data-donate-theme="current"]) body.donate-page .wheel-select-status {
  background: var(--dt-input);
  color: var(--dt-text);
  border-color: var(--dt-border);
}

html.donate-theme-root:not([data-donate-theme="current"]) body.donate-page .quick-amount button:hover,
html.donate-theme-root:not([data-donate-theme="current"]) body.donate-page .msg-tab:hover {
  background: var(--dt-elevated);
  color: var(--dt-text);
}

html.donate-theme-root:not([data-donate-theme="current"]) body.donate-page .msg-tab.active,
html.donate-theme-root:not([data-donate-theme="current"]) body.donate-page .tab-btn.active-tab,
html.donate-theme-root[data-donate-custom-accent="1"] body.donate-page .msg-tab.active,
html.donate-theme-root[data-donate-custom-accent="1"] body.donate-page .tab-btn.active-tab {
  background: linear-gradient(90deg, var(--dt-accent-primary), var(--dt-accent-secondary));
  color: var(--dt-accent-contrast);
}

html.donate-theme-root:not([data-donate-theme="current"]) body.donate-page .donate-bubble {
  background: var(--dt-input);
  border-color: var(--dt-border);
  color: var(--dt-text);
}

html.donate-theme-root:not([data-donate-theme="current"]) body.donate-page .donate-bubble::after {
  background: var(--dt-input);
  border-color: var(--dt-border);
}

html.donate-theme-root:not([data-donate-theme="current"]) body.donate-page .donate-sub,
html.donate-theme-root:not([data-donate-theme="current"]) body.donate-page .donate-time,
html.donate-theme-root:not([data-donate-theme="current"]) body.donate-page .char-count,
html.donate-theme-root:not([data-donate-theme="current"]) body.donate-page .profile-meta,
html.donate-theme-root:not([data-donate-theme="current"]) body.donate-page .profile-handle,
html.donate-theme-root:not([data-donate-theme="current"]) body.donate-page .profile-location,
html.donate-theme-root:not([data-donate-theme="current"]) body.donate-page .profile-country,
html.donate-theme-root:not([data-donate-theme="current"]) body.donate-page .profile-location-icon {
  color: var(--dt-muted) !important;
}

html.donate-theme-root:not([data-donate-theme="current"]) body.donate-page .avatar-big,
html.donate-theme-root[data-donate-custom-accent="1"] body.donate-page .avatar-big {
  background: linear-gradient(135deg, var(--dt-accent-primary), var(--dt-accent-secondary));
}

html.donate-theme-root:not([data-donate-theme="current"]) body.donate-page .recent-donate-icon path,
html.donate-theme-root[data-donate-custom-accent="1"] body.donate-page .recent-donate-icon path {
  fill: var(--dt-accent-secondary);
}

html.donate-theme-root:not([data-donate-theme="current"]) body.donate-page .navbar-dropdown-menu,
html.donate-theme-root:not([data-donate-theme="current"]) body.donate-page .notify-box,
html.donate-theme-root:not([data-donate-theme="current"]) body.donate-page .msg-box,
html.donate-theme-root:not([data-donate-theme="current"]) body.donate-page .cn-box,
html.donate-theme-root:not([data-donate-theme="current"]) body.donate-page .vip-modal-box {
  background: var(--dt-panel);
  color: var(--dt-text);
  border-color: var(--dt-border);
}

html.donate-theme-root:not([data-donate-theme="current"]) body.donate-page .dropdown-name,
html.donate-theme-root:not([data-donate-theme="current"]) body.donate-page .dropdown-item,
html.donate-theme-root:not([data-donate-theme="current"]) body.donate-page .cn-title,
html.donate-theme-root:not([data-donate-theme="current"]) body.donate-page .vip-modal-title {
  color: var(--dt-text);
}

html.donate-theme-root:not([data-donate-theme="current"]) body.donate-page .dropdown-role,
html.donate-theme-root:not([data-donate-theme="current"]) body.donate-page .cn-current {
  color: var(--dt-muted);
}

html.donate-theme-root:not([data-donate-theme="current"]) body.donate-page .navbar-toggle-btn {
  color: var(--dt-muted);
  border-color: var(--dt-border);
}

html.donate-theme-root:not([data-donate-theme="current"]) body.donate-page .navbar-toggle-btn:hover {
  color: var(--dt-accent-primary);
  border-color: var(--dt-accent-primary);
}

/* Trình duyệt cũ không hỗ trợ color-mix vẫn có border focus, chỉ thiếu glow. */
@supports not (color: color-mix(in srgb, #fff 50%, #000)) {
  html.donate-theme-root:not([data-donate-theme="current"]) body.donate-page select:focus,
  html.donate-theme-root:not([data-donate-theme="current"]) body.donate-page input:focus,
  html.donate-theme-root:not([data-donate-theme="current"]) body.donate-page textarea:focus {
    box-shadow: none;
  }
}