/* ─── Dark Mode System by Tutor Connect ─── */
/* dark-mode.css — Shared dark theme overrides for all pages */

/* ── Smooth Transition — เปลี่ยนสีอย่างนุ่มนวลเวลาสลับโหมด ── */
body,
.card, .container, .reveal, .nav, .step,
.price-card, .testimonial-card, .trust-badge-card,
.review-card, .timeline-content, .faq-item,
.exit-popup-card, .cookie-banner,
input, select, textarea {
  transition: background-color 0.35s ease, color 0.35s ease,
              box-shadow 0.35s ease, border-color 0.35s ease !important;
}

/* ── Dark Theme Variables Override ── */
/* เมื่อ body มีคลาส .dark-theme → สลับสีทั้งเว็บอัตโนมัติ */
body.dark-theme {
  --bg: #0f0f13;                /* พื้นหลังหลักเข้มสนิท */
  --text: #ececec;              /* ข้อความหลักสว่าง */
  --text-light: #b0b0b0;       /* ข้อความรองสว่างขึ้น */
  --text-muted: #777777;       /* ข้อความจางๆ ปรับให้อ่านง่ายขึ้น */
  --card-bg: #1a1a22;          /* การ์ด/ฟอร์มเข้มขึ้น */
  --card-shadow: 0 4px 24px rgba(0, 0, 0, 0.5); /* เงาเข้มขึ้น */
  --pink-light: #2d1625;       /* พื้นหลังชมพูอ่อนปรับให้เข้ากับโทนมืด */
  --bg-section: #13131a;       /* pricing section background */
  /* หมายเหตุ: --pink และ --pink-dark ไม่เปลี่ยน เพื่อคง Brand Identity */
  background: #0f0f13 !important;  /* Override hardcoded body backgrounds */
  color: #ececec !important;
}

/* ── Navbar — ปรับพื้นหลังให้กลมกลืนกับโหมดมืด ── */
body.dark-theme .nav {
  background: rgba(15, 15, 19, 0.92) !important;
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

/* ── Section ที่มี Hard-Coded Background ── */
body.dark-theme .how,
body.dark-theme .social-proof-section,
body.dark-theme .pricing {
  background: #13131a !important;
}

/* ── Sections ที่ใช้ Hard-Coded #fff / #fafafa Background (index.html) ── */
body.dark-theme .trust-section,
body.dark-theme .about-trust {
  background: #0f0f13 !important;
}
body.dark-theme .top-schools,
body.dark-theme .latest-articles,
body.dark-theme section[style*="background:#fafafa"] {
  background: #13131a !important;
}

/* ── Review Page Specifics ── */
body.dark-theme .review-quote-card,
body.dark-theme .gallery-item {
  background: #1a1a22 !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
}
body.dark-theme .review-cta {
  background: linear-gradient(170deg, #2d1625 0%, #0f0f13 100%) !important;
}
body.dark-theme .trust-badge-card {
  background: var(--card-bg) !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
}
body.dark-theme .gallery-section {
  background: var(--bg) !important;
}
body.dark-theme .screenshot-placeholder {
  background: #1e1e28 !important;
}

/* ── Pricing Page Specifics ── */
body.dark-theme .pricing-main {
  background: #0f0f13 !important;
}
body.dark-theme .price-table {
  background: #1a1a22 !important;
}
body.dark-theme .price-table-header {
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}
body.dark-theme .price-row {
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}
body.dark-theme .pricing-section-icon.online {
  background: #1e1028 !important;
}

/* ── Article Page Specifics ── */
body.dark-theme .sge-box {
  background: #1a1a22 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
body.dark-theme .cta-inline {
  background: #2d1625 !important;
  border-color: rgba(222, 92, 142, 0.3) !important;
}
body.dark-theme .step-card {
  background: #1a1a22 !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
}
body.dark-theme .calendar-card {
  background: #1a1a22 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}
body.dark-theme .compare-table {
  background: #1a1a22 !important;
}
body.dark-theme .compare-table th:first-child {
  background: #1a1a22 !important;
  color: #e0e0e0 !important;
  border-bottom-color: var(--pink) !important;
}
body.dark-theme .compare-table td {
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

/* ── Article/School Final CTA with inline gradient ── */
body.dark-theme .final-cta[style*="#fff"],
body.dark-theme section.final-cta {
  background: linear-gradient(170deg, #2d1625 0%, #0f0f13 100%) !important;
}

/* ── School Cards — ปรับ border ── */
body.dark-theme .school-card {
  border-color: rgba(255, 255, 255, 0.08);
}

/* ── Form Card — ปรับพื้นหลังสำหรับฟอร์มหาติวเตอร์ ── */
body.dark-theme .card {
  background: var(--card-bg) !important;
}

/* ── About Feature Items — ปรับพื้นหลัง ── */
body.dark-theme .about-feature-item {
  background: #1a1a22;
  border-color: rgba(255, 255, 255, 0.06);
}

/* ── Hero Section — ปรับ Gradient ให้เข้ากับโทนมืด ── */
body.dark-theme .hero {
  background: linear-gradient(170deg, #0f0f13 40%, #2d1625 100%) !important;
}
body.dark-theme .hero-section {
  background: linear-gradient(135deg, #2d1625 0%, #0f0f13 100%) !important;
}

/* ── Final CTA Section ── */
body.dark-theme .final-cta {
  background: linear-gradient(170deg, #2d1625 0%, #0f0f13 100%) !important;
}

/* ── Timeline Section ── */
body.dark-theme section[style*="background: var(--pink-light)"] {
  background: #1e1220 !important;
}

/* ── ตาราง (Exam Table) — ปรับเส้นขอบ ── */
body.dark-theme .exam-table td {
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

/* ── FAQ — ปรับเส้นคั่น ── */
body.dark-theme .faq-item {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

/* ── Footer — ปรับเส้นบนและสี ── */
body.dark-theme footer {
  border-top-color: rgba(255, 255, 255, 0.08);
}

/* ── Stat Divider — เส้นคั่นระหว่างตัวเลข ── */
body.dark-theme .sp-stat-item:not(:last-child)::after {
  background: rgba(255, 255, 255, 0.1);
}

/* ── Input Fields — ปรับขอบและพื้นหลังในโหมดมืด ── */
body.dark-theme input[type="text"],
body.dark-theme input[type="tel"],
body.dark-theme select,
body.dark-theme textarea,
body.dark-theme .time-select {
  background: #1e1e28 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #ececec !important;
}
body.dark-theme input:focus,
body.dark-theme select:focus,
body.dark-theme textarea:focus,
body.dark-theme .time-select:focus {
  border-color: var(--pink) !important;
}

/* ── Option Buttons (ฟอร์ม) ── */
body.dark-theme .opt {
  background: #1e1e28;
  border-color: rgba(255, 255, 255, 0.1);
  color: #d0d0d0;
}
body.dark-theme .opt:hover {
  border-color: var(--pink);
  background: #2d1625;
}
body.dark-theme .opt.selected {
  border-color: var(--pink);
  background: #2d1625;
  color: var(--pink);
}

/* ── Exit-Intent Popup — ปรับพื้นหลัง ── */
body.dark-theme .exit-popup-card {
  background: #1a1a22;
}
body.dark-theme .exit-popup-close {
  background: #2a2a35;
  color: #999;
}

/* ── Cookie Banner ── */
body.dark-theme .cookie-banner {
  background: #1a1a22 !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
}

/* ── Sticky CTA Bar — Mobile ── */
body.dark-theme .sticky-cta-bar {
  background: rgba(15, 15, 19, 0.96) !important;
  border-top-color: rgba(222, 92, 142, 0.2) !important;
}

/* ── Card Borders ── */
body.dark-theme .trust-badge-card,
body.dark-theme .timeline-content,
body.dark-theme .review-card {
  border-color: rgba(255, 255, 255, 0.06);
}

/* ── Back Button (ฟอร์ม) ── */
body.dark-theme .btn-back {
  background: #2a2a35;
  color: #d0d0d0;
}
body.dark-theme .btn-back:hover {
  background: #3a3a48;
}

/* ── Submission Error ── */
body.dark-theme .submit-error {
  background: #3a1a1a;
  border-color: #5a2020;
  color: #ff8a8a;
}

/* ── Progress Track (ฟอร์ม) ── */
body.dark-theme .progress-track {
  background: #2a2a35;
}

/* ═══════════════════════════════════════════════════ */
/* ── Theme Toggle Button Styles ── */
/* ═══════════════════════════════════════════════════ */
.theme-toggle-btn {
  background: transparent;
  border: none;
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border-radius: 50%;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
  flex-shrink: 0;
}

.theme-toggle-btn:hover,
.theme-toggle-btn:focus-visible {
  background-color: rgba(128, 128, 128, 0.12);
  transform: scale(1.1);
  outline: none;
}

/* ── Icon Switching Logic (ซ่อนหรือแสดงไอคอน) ── */
.theme-toggle-btn .icon-sun  { display: none; }
.theme-toggle-btn .icon-moon { display: block; }

body.dark-theme .theme-toggle-btn .icon-moon { display: none; }
body.dark-theme .theme-toggle-btn .icon-sun  { display: block; color: #ffca28; }

body.dark-theme .theme-toggle-btn:hover,
body.dark-theme .theme-toggle-btn:focus-visible {
  background-color: rgba(255, 202, 40, 0.12);
}