/* =========================================================
   Site themes — เลือกได้จากปุ่มจานสีใน header (data-theme บน <html>)
   midnight = ค่าเริ่มต้นใน shop-theme.css
   ========================================================= */
[data-theme="ocean"] {
	--sp-bg: #0f1a24; --sp-bg-rgb: 15, 26, 36;
	--sp-surface: #162433; --sp-surface-2: #1d2f42; --sp-surface-3: #253a50;
	--sp-text: #e6f1fa; --sp-muted: #8ea6bb;
	--sp-blue: #4fc3f7; --sp-blue-rgb: 79, 195, 247;
	--sp-mint: #64ffda; --sp-mint-rgb: 100, 255, 218;
	--sp-footer: #0b141c;
}
[data-theme="violet"] {
	--sp-bg: #17131f; --sp-bg-rgb: 23, 19, 31;
	--sp-surface: #211b2d; --sp-surface-2: #2a2339; --sp-surface-3: #342b46;
	--sp-text: #eee8f7; --sp-muted: #a79cb8;
	--sp-blue: #b388ff; --sp-blue-rgb: 179, 136, 255;
	--sp-mint: #ff80ab; --sp-mint-rgb: 255, 128, 171;
	--sp-footer: #120f18;
}
[data-theme="sunset"] {
	--sp-bg: #1f1715; --sp-bg-rgb: 31, 23, 21;
	--sp-surface: #2a201d; --sp-surface-2: #352824; --sp-surface-3: #40312c;
	--sp-text: #f5ebe6; --sp-muted: #b39f96;
	--sp-blue: #ff8a65; --sp-blue-rgb: 255, 138, 101;
	--sp-mint: #ffd166; --sp-mint-rgb: 255, 209, 102;
	--sp-footer: #18110f;
}
[data-theme="emerald"] {
	--sp-bg: #111c17; --sp-bg-rgb: 17, 28, 23;
	--sp-surface: #182720; --sp-surface-2: #1f3229; --sp-surface-3: #273d33;
	--sp-text: #e6f4ec; --sp-muted: #92ad9f;
	--sp-blue: #34d399; --sp-blue-rgb: 52, 211, 153;
	--sp-mint: #bef264; --sp-mint-rgb: 190, 242, 100;
	--sp-footer: #0d1612;
}
[data-theme="crimson"] {
	--sp-bg: #1a1214; --sp-bg-rgb: 26, 18, 20;
	--sp-surface: #24191c; --sp-surface-2: #2e2024; --sp-surface-3: #39282d;
	--sp-text: #f5e9eb; --sp-muted: #b0989d;
	--sp-blue: #ff4d6d; --sp-blue-rgb: 255, 77, 109;
	--sp-mint: #ff9e57; --sp-mint-rgb: 255, 158, 87;
	--sp-footer: #140e10;
}
[data-theme="cyber"] {
	--sp-bg: #0d0d12; --sp-bg-rgb: 13, 13, 18;
	--sp-surface: #16161f; --sp-surface-2: #1e1e2a; --sp-surface-3: #272736;
	--sp-text: #f0f0ff; --sp-muted: #9a9ab5;
	--sp-blue: #f72585; --sp-blue-rgb: 247, 37, 133;
	--sp-mint: #fee440; --sp-mint-rgb: 254, 228, 64;
	--sp-on-accent: #0d0d12;
	--sp-footer: #09090d;
}
[data-theme="gold"] {
	--sp-bg: #141311; --sp-bg-rgb: 20, 19, 17;
	--sp-surface: #1e1c19; --sp-surface-2: #282521; --sp-surface-3: #322e29;
	--sp-text: #f3eee4; --sp-muted: #a8a090;
	--sp-blue: #e9c46a; --sp-blue-rgb: 233, 196, 106;
	--sp-mint: #f4a261; --sp-mint-rgb: 244, 162, 97;
	--sp-footer: #0f0e0c;
}
[data-theme="sakura"] {
	--sp-bg: #1c1519; --sp-bg-rgb: 28, 21, 25;
	--sp-surface: #271d23; --sp-surface-2: #31252c; --sp-surface-3: #3c2e36;
	--sp-text: #f8ecf2; --sp-muted: #b49fab;
	--sp-blue: #f9a8d4; --sp-blue-rgb: 249, 168, 212;
	--sp-mint: #c4b5fd; --sp-mint-rgb: 196, 181, 253;
	--sp-footer: #161014;
}
[data-theme="snow"] {
	--sp-bg: #f3f5f9; --sp-bg-rgb: 243, 245, 249;
	--sp-surface: #ffffff; --sp-surface-2: #eef1f6; --sp-surface-3: #e3e8f0;
	--sp-border: rgba(15, 23, 42, 0.09); --sp-border-strong: rgba(15, 23, 42, 0.18);
	--sp-text: #1b2230; --sp-muted: #5f6b7d;
	--sp-blue: #4f6bed; --sp-blue-rgb: 79, 107, 237;
	--sp-mint: #0f9f73; --sp-mint-rgb: 15, 159, 115;
	--sp-on-accent: #ffffff;
	--sp-footer: #e9edf3;
	--sp-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
	--sp-sunken: rgba(15, 23, 42, 0.035);
	--sp-dma: #6d4fd8;
	--sp-warn: #a86b00;
	--sp-danger: #d33b3b;
}

[data-theme="snow"] .sp-alert-warn { background: #fff8ea; border-color: #f2d9a6; color: #8a5a00; }
[data-theme="snow"] .sp-alert-info { background: rgba(79, 107, 237, .07); border-color: rgba(79, 107, 237, .25); color: #3047b8; }
[data-theme="snow"] .sp-alert-off { background: #fdf0f0; border-color: #f2c4c4; color: #b42d2d; }

[data-theme] {
	--sp-grad: linear-gradient(90deg, var(--sp-blue) 0%, var(--sp-mint) 100%);
}

body.sp-themed .back-top { background: var(--sp-grad); color: var(--sp-on-accent); border-radius: 14px; box-shadow: var(--sp-shadow); }
body.sp-themed .back-top:hover { background: var(--sp-grad); color: var(--sp-on-accent); filter: brightness(1.08); }

/* ---------- Theme picker ---------- */
.sp-theme-menu { width: 300px; padding: 10px !important; }
.sp-theme-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.sp-theme-opt {
	display: flex; align-items: center; gap: 9px; width: 100%;
	padding: 7px 8px; border-radius: 10px; border: 1px solid var(--sp-border);
	background: var(--sp-surface-2); color: var(--sp-text); font-size: .82rem; font-weight: 600; text-align: left;
	cursor: pointer; transition: border-color .15s, background .15s;
}
.sp-theme-opt:hover { border-color: var(--sp-border-strong); background: var(--sp-surface-3); }
.sp-theme-opt.active { border-color: var(--sp-blue); box-shadow: 0 0 0 1px var(--sp-blue) inset; }
.sp-theme-sw {
	position: relative; flex-shrink: 0; width: 28px; height: 28px; border-radius: 8px;
	background: var(--sw-bg); border: 1px solid rgba(128, 128, 128, .35); overflow: hidden;
}
.sp-theme-sw::after {
	content: ""; position: absolute; left: 5px; right: 5px; bottom: 5px; height: 8px; border-radius: 4px;
	background: linear-gradient(90deg, var(--sw-a), var(--sw-b));
}
.sp-theme-opt .bi-check2 { margin-left: auto; color: var(--sp-blue); display: none; }
.sp-theme-opt.active .bi-check2 { display: inline; }

/* ---------- Light theme fixes ---------- */
[data-theme="snow"] .sp-header { box-shadow: 0 1px 0 var(--sp-border); }
[data-theme="snow"] .sp-brand img { border-color: var(--sp-border-strong); }
[data-theme="snow"] .sp-badge-on { color: #0f8a63; }
[data-theme="snow"] .sp-badge-warn { color: #a86b00; }
[data-theme="snow"] .sp-badge-off { color: #d33b3b; }
[data-theme="snow"] :is(.sp-card-badges, .by-media-badges, .sp-gallery-main) .sp-badge-on { color: #8fe3c0; }
[data-theme="snow"] :is(.sp-card-badges, .by-media-badges, .sp-gallery-main) .sp-badge-warn { color: #ffcf75; }
[data-theme="snow"] :is(.sp-card-badges, .by-media-badges, .sp-gallery-main) .sp-badge-off { color: #ff8f8f; }
[data-theme="snow"] .hx-hot-item:first-child .hx-rank { color: #d08a00; }
[data-theme="snow"] .hx-side-head b i { color: #e8590c; }
[data-theme="snow"] .sp-footer { color: var(--sp-muted); }
[data-theme="snow"] .sp-hero::before,
[data-theme="snow"] .sp-hero::after { opacity: .5; }