/* ============================================================
   BUYE IELTS GLOBAL THEME
   ============================================================ */

:root {
  --buye-bg: #ffffff;
  --buye-surface: #ffffff;
  --buye-surface-2: #f7f9fc;
  --buye-text: #14213d;
  --buye-muted: #5a667c;
  --buye-border: #e2e7ef;
  --buye-primary: #2563eb;
  --buye-primary-soft: #eef4ff;
  --buye-header: rgba(255,255,255,.94);
  --buye-shadow: rgba(25,45,80,.10);
}

html[data-theme="dark"] {
  --buye-bg: #0b1120;
  --buye-surface: #111827;
  --buye-surface-2: #172033;
  --buye-text: #f3f6fb;
  --buye-muted: #aab5c7;
  --buye-border: #2a3548;
  --buye-primary: #60a5fa;
  --buye-primary-soft: #172a49;
  --buye-header: rgba(11,17,32,.94);
  --buye-shadow: rgba(0,0,0,.35);
}

/* Common page surfaces */
html[data-theme="dark"] body {
  background: var(--buye-bg) !important;
  color: var(--buye-text) !important;
}

html[data-theme="dark"] .site-header {
  background: var(--buye-header) !important;
  border-color: var(--buye-border) !important;
}

html[data-theme="dark"] .hero,
html[data-theme="dark"] .tinted {
  background: var(--buye-surface-2) !important;
}

html[data-theme="dark"] .card,
html[data-theme="dark"] .hero-card,
html[data-theme="dark"] .lesson-box,
html[data-theme="dark"] .contact-card,
html[data-theme="dark"] .section,
html[data-theme="dark"] .result {
  background: var(--buye-surface) !important;
  color: var(--buye-text) !important;
  border-color: var(--buye-border) !important;
}

html[data-theme="dark"] p,
html[data-theme="dark"] .lead,
html[data-theme="dark"] .section p,
html[data-theme="dark"] .muted,
html[data-theme="dark"] .contact-card small {
  color: var(--buye-muted) !important;
}

html[data-theme="dark"] a {
  color: inherit;
}

html[data-theme="dark"] .formula,
html[data-theme="dark"] .warning,
html[data-theme="dark"] .topic-pills span,
html[data-theme="dark"] .essay-types span,
html[data-theme="dark"] .tag {
  background: var(--buye-primary-soft) !important;
  color: var(--buye-text) !important;
}

html[data-theme="dark"] .site-footer {
  background: var(--buye-surface-2) !important;
  border-color: var(--buye-border) !important;
}

/* Global theme button */
.buye-theme-toggle {
  position: fixed;
  top: 82px;
  right: 20px;
  z-index: 90;
  border: 1px solid var(--buye-border);
  background: var(--buye-surface);
  color: var(--buye-text);
  border-radius: 999px;
  padding: 9px 14px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 5px 18px var(--buye-shadow);
}

.buye-theme-toggle:hover {
  transform: translateY(-1px);
}

/* Floating WhatsApp */
.buye-whatsapp {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 18px;
  border-radius: 999px;
  background: #25d366;
  color: #ffffff !important;
  font-weight: 900;
  text-decoration: none !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.20);
}

.buye-whatsapp:hover {
  transform: translateY(-2px);
}

.buye-whatsapp-icon {
  font-size: 20px;
  line-height: 1;
}

/* Logo */
.buye-global-logo {
  width: 40px;
  height: 40px;
  object-fit: contain;
  flex: 0 0 auto;
}

/* Contact */
.buye-contact-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 25px;
}

.buye-contact-strip a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 14px;
  border: 1px solid var(--buye-border);
  border-radius: 10px;
  background: var(--buye-surface);
  color: var(--buye-text);
  font-weight: 700;
}

@media (max-width: 700px) {
  .buye-theme-toggle {
    top: 76px;
    right: 12px;
  }

  .buye-whatsapp {
    right: 12px;
    bottom: 12px;
  }
}


/* ============================================================
   BUYE DARK MODE — VISIBILITY & BUTTON CONTRAST FIX
   ============================================================ */

/* Dark page background */
html[data-theme="dark"] {
  color-scheme: dark;
}

/* ------------------------------------------------------------
   WHITE CARDS WITH BUYE BLUE TEXT
   ------------------------------------------------------------ */

html[data-theme="dark"] .card,
html[data-theme="dark"] .hero-card,
html[data-theme="dark"] .lesson-box,
html[data-theme="dark"] .contact-card,
html[data-theme="dark"] .topic,
html[data-theme="dark"] .steps > div {
  background: #ffffff !important;
  color: #2563eb !important;
  border-color: #dbe5f5 !important;
}

/* Card headings */
html[data-theme="dark"] .card h2,
html[data-theme="dark"] .card h3,
html[data-theme="dark"] .hero-card h2,
html[data-theme="dark"] .hero-card h3,
html[data-theme="dark"] .lesson-box h2,
html[data-theme="dark"] .lesson-box h3,
html[data-theme="dark"] .contact-card strong,
html[data-theme="dark"] .topic {
  color: #2563eb !important;
}

/* Card body text */
html[data-theme="dark"] .card p,
html[data-theme="dark"] .hero-card p,
html[data-theme="dark"] .lesson-box p,
html[data-theme="dark"] .contact-card small,
html[data-theme="dark"] .topic small,
html[data-theme="dark"] .steps > div p {
  color: #2563eb !important;
}

/* ------------------------------------------------------------
   WHITE BUTTON + BLUE LETTERS
   ------------------------------------------------------------ */

html[data-theme="dark"] button,
html[data-theme="dark"] .btn.secondary,
html[data-theme="dark"] .choice,
html[data-theme="dark"] .nav button,
html[data-theme="dark"] .theme,
html[data-theme="dark"] .buye-theme-toggle {
  background: #ffffff !important;
  color: #2563eb !important;
  border-color: #2563eb !important;
}

/* Button hover */
html[data-theme="dark"] button:hover,
html[data-theme="dark"] .btn.secondary:hover,
html[data-theme="dark"] .choice:hover,
html[data-theme="dark"] .nav button:hover {
  background: #eef4ff !important;
  color: #1d4ed8 !important;
}

/* ------------------------------------------------------------
   PRIMARY BLUE BUTTON + WHITE LETTERS
   ------------------------------------------------------------ */

html[data-theme="dark"] .btn.primary,
html[data-theme="dark"] .gateway-btn,
html[data-theme="dark"] button.primary,
html[data-theme="dark"] .actions .primary {
  background: #2563eb !important;
  color: #ffffff !important;
  border-color: #2563eb !important;
}

html[data-theme="dark"] .btn.primary:hover,
html[data-theme="dark"] .gateway-btn:hover,
html[data-theme="dark"] button.primary:hover {
  background: #1d4ed8 !important;
  color: #ffffff !important;
}

/* ------------------------------------------------------------
   CURRENT QUESTION / SELECTED ANSWER
   ------------------------------------------------------------ */

html[data-theme="dark"] .choice.selected {
  background: #eef4ff !important;
  color: #2563eb !important;
  border-color: #2563eb !important;
  outline-color: #2563eb !important;
}

html[data-theme="dark"] .nav .cur {
  background: #2563eb !important;
  color: #ffffff !important;
  border-color: #2563eb !important;
}

html[data-theme="dark"] .nav .ans {
  color: #2563eb !important;
}

html[data-theme="dark"] .nav .flag {
  border-color: #2563eb !important;
}

/* ------------------------------------------------------------
   LINKS
   ------------------------------------------------------------ */

html[data-theme="dark"] .card a,
html[data-theme="dark"] .lesson-box a,
html[data-theme="dark"] .contact-card,
html[data-theme="dark"] .footer-grid a {
  color: #2563eb !important;
}

/* ------------------------------------------------------------
   ORIGINAL BUYE SITE — DARK MODE
   ------------------------------------------------------------ */

html[data-theme="dark"] .site-header .brand {
  color: #2563eb !important;
}

html[data-theme="dark"] .site-header .brand span {
  color: #2563eb !important;
}

html[data-theme="dark"] .nav nav a {
  color: #2563eb !important;
}

html[data-theme="dark"] .nav nav a:hover {
  color: #1d4ed8 !important;
}

html[data-theme="dark"] .section h1,
html[data-theme="dark"] .section h2,
html[data-theme="dark"] .section h3 {
  color: #2563eb !important;
}

/* ------------------------------------------------------------
   TEST / PRACTICE CENTRE
   ------------------------------------------------------------ */

html[data-theme="dark"] .test,
html[data-theme="dark"] .passage {
  color: #2563eb !important;
}

html[data-theme="dark"] .passage {
  background: #ffffff !important;
  border: 1px solid #dbe5f5;
}

html[data-theme="dark"] .result {
  background: #ffffff !important;
  color: #2563eb !important;
}

html[data-theme="dark"] .result h1,
html[data-theme="dark"] .result h2,
html[data-theme="dark"] .result p {
  color: #2563eb !important;
}

/* ------------------------------------------------------------
   THEME TOGGLE
   ------------------------------------------------------------ */

html[data-theme="dark"] .buye-theme-toggle {
  background: #ffffff !important;
  color: #2563eb !important;
  border-color: #2563eb !important;
}

/* ------------------------------------------------------------
   CONTACT CARDS
   ------------------------------------------------------------ */

html[data-theme="dark"] .contact-card:hover {
  background: #ffffff !important;
  color: #1d4ed8 !important;
  border-color: #2563eb !important;
}

/* ------------------------------------------------------------
   KEEP WHATSAPP DISTINCT
   ------------------------------------------------------------ */

html[data-theme="dark"] .buye-whatsapp {
  background: #25d366 !important;
  color: #ffffff !important;
  border-color: #25d366 !important;
}