/*═══════════════════════════════════════════════════════════════
  BLUE TO GOLD v4 — Fixed separation + Light mode visibility
═══════════════════════════════════════════════════════════════*/

/* ─────────────────────────────────────────────
   1) أزرار اللغة - منفصلة كلياً
   ───────────────────────────────────────────── */

.lang-btn,
.language-btn,
.lang-switcher button,
.language-switcher button,
[class*="lang-"]:not([class*="container"]):not([class*="wrapper"]):not([class*="switch"]),
[data-lang],
button[data-lang],
.nav__lang button,
.header__lang button,
.lang-switch button {
  background: transparent !important;
  border: 1.5px solid rgba(212, 175, 55, 0.55) !important;
  border-radius: 8px !important;
  padding: 0.4rem 0.85rem !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  color: rgba(245, 240, 232, 0.92) !important;
  cursor: pointer !important;
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1) !important;
  box-shadow: 0 0 0 0 transparent !important;
  margin: 0 !important;
  outline: none !important;
}

/* الحاوية: فجوة واضحة بين الأزرار */
.lang-switcher,
.language-switcher,
.nav__lang,
.header__lang,
.lang-switch,
.lang-buttons,
.lang-container,
[class*="lang-"][class*="container"],
[class*="lang-"][class*="wrapper"],
[class*="lang-"][class*="group"],
.nav__lang-wrapper,
.header__lang-wrapper {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0 !important;
  margin: 0 0.5rem !important;
  display: inline-flex !important;
  gap: 0.6rem !important;
  align-items: center !important;
}

/* إزالة أي إطار من pseudo-elements */
.lang-switcher::before,
.lang-switcher::after,
.language-switcher::before,
.language-switcher::after,
.nav__lang::before,
.nav__lang::after,
.header__lang::before,
.header__lang::after,
.lang-switch::before,
.lang-switch::after,
[class*="lang-"][class*="container"]::before,
[class*="lang-"][class*="container"]::after,
[class*="lang-"][class*="wrapper"]::before,
[class*="lang-"][class*="wrapper"]::after {
  display: none !important;
  content: none !important;
  border: none !important;
  background: none !important;
}

/* Hover */
.lang-btn:hover,
[data-lang]:hover,
.language-btn:hover {
  border-color: rgba(255, 217, 122, 1) !important;
  color: rgba(255, 217, 122, 1) !important;
  background: rgba(212, 175, 55, 0.1) !important;
  box-shadow: 0 0 14px rgba(212, 175, 55, 0.25) !important;
  transform: translateY(-1px) !important;
}

/* الزر النشط */
.lang-btn.active,
.lang-btn.is-active,
[data-lang].active,
[data-lang].is-active,
.language-btn.active,
[data-lang][aria-current="true"] {
  background: linear-gradient(
    135deg,
    rgba(212, 175, 55, 0.95),
    rgba(255, 217, 122, 0.95),
    rgba(212, 175, 55, 0.95)
  ) !important;
  color: #1a1a1a !important;
  border-color: rgba(255, 217, 122, 1) !important;
  font-weight: 700 !important;
  box-shadow:
    0 0 0 1px rgba(184, 148, 31, 0.5),
    0 2px 12px rgba(212, 175, 55, 0.4),
    inset 0 1px 2px rgba(255, 255, 255, 0.3) !important;
}

/* ─────────────────────────────────────────────
   2) LIGHT MODE — أزرار اللغة (الأحرف ظاهرة!)
   ───────────────────────────────────────────── */

[data-theme="light"] .lang-btn,
body.light-theme .lang-btn,
html.light .lang-btn,
.light .lang-btn,
[data-theme="light"] [data-lang],
body.light-theme [data-lang],
html.light [data-lang],
.light [data-lang],
[data-theme="light"] .language-btn,
body.light-theme .language-btn {
  border: 2px solid rgba(139, 111, 0, 0.7) !important;
  color: #5a3f00 !important;
  background: rgba(255, 255, 255, 0.5) !important;
}

[data-theme="light"] .lang-btn:hover,
body.light-theme .lang-btn:hover,
[data-theme="light"] [data-lang]:hover,
body.light-theme [data-lang]:hover {
  border-color: rgba(139, 111, 0, 1) !important;
  color: #1a1a1a !important;
  background: rgba(212, 175, 55, 0.18) !important;
  box-shadow: 0 0 12px rgba(184, 148, 31, 0.3) !important;
}

[data-theme="light"] .lang-btn.active,
body.light-theme .lang-btn.active,
[data-theme="light"] [data-lang].active,
body.light-theme [data-lang].active,
[data-theme="light"] [data-lang].is-active,
body.light-theme [data-lang].is-active {
  background: linear-gradient(
    135deg,
    rgba(184, 148, 31, 1),
    rgba(212, 175, 55, 1)
  ) !important;
  color: #ffffff !important;
  border-color: rgba(139, 111, 0, 1) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

/* ─────────────────────────────────────────────
   3) LIGHT MODE — Skills section text visibility
   ───────────────────────────────────────────── */

[data-theme="light"] .skills__title,
[data-theme="light"] .skills__name,
[data-theme="light"] .skills__group h3,
[data-theme="light"] .skills__group h2,
[data-theme="light"] .skills h3,
[data-theme="light"] .skills h2,
[data-theme="light"] .section__title,
[data-theme="light"] .section__subtitle,
body.light-theme .skills__title,
body.light-theme .skills__name,
body.light-theme .skills__group h3,
body.light-theme .skills__group h2,
body.light-theme .skills h3,
body.light-theme .skills h2,
body.light-theme .section__title,
body.light-theme .section__subtitle {
  color: #1a1a1a !important;
}

[data-theme="light"] .skills__category,
[data-theme="light"] .skills__subtitle,
[data-theme="light"] .skills__group .section__subtitle,
body.light-theme .skills__category,
body.light-theme .skills__subtitle,
body.light-theme .skills__group .section__subtitle {
  color: #2a2a2a !important;
  font-weight: 600 !important;
}

[data-theme="light"] .skills__level,
[data-theme="light"] .skills__type,
[data-theme="light"] .skills small,
[data-theme="light"] .skills span,
[data-theme="light"] .skills p,
body.light-theme .skills__level,
body.light-theme .skills__type,
body.light-theme .skills small,
body.light-theme .skills span,
body.light-theme .skills p {
  color: #5a5a5a !important;
}

[data-theme="light"] h1,
[data-theme="light"] h2:not(.lang-btn),
[data-theme="light"] h3:not(.lang-btn),
[data-theme="light"] h4:not(.lang-btn),
body.light-theme h1,
body.light-theme h2:not(.lang-btn),
body.light-theme h3:not(.lang-btn),
body.light-theme h4:not(.lang-btn) {
  color: #1a1a1a !important;
}

[data-theme="light"] p,
[data-theme="light"] li,
[data-theme="light"] .description,
[data-theme="light"] .text,
body.light-theme p,
body.light-theme li,
body.light-theme .description,
body.light-theme .text {
  color: #2a2a2a !important;
}

[data-theme="light"] .nav__link,
[data-theme="light"] .nav a,
body.light-theme .nav__link,
body.light-theme .nav a {
  color: #1a1a1a !important;
}

[data-theme="light"] .nav__link:hover,
body.light-theme .nav__link:hover {
  color: #b8941f !important;
}

/* ─────────────────────────────────────────────
   4) REVIEW FLOAT BUTTON (.review-float-btn)
   ───────────────────────────────────────────── */

.review-float-btn {
  background: linear-gradient(135deg, #1a1600 0%, #2a2000 100%) !important;
  border: 2px solid rgba(212, 175, 55, 0.65) !important;
  color: #ffd97a !important;
  box-shadow:
    0 0 0 1px rgba(212, 175, 55, 0.3),
    0 0 18px rgba(212, 175, 55, 0.3),
    0 6px 20px rgba(0, 0, 0, 0.5) !important;
}

.review-float-btn:hover {
  background: linear-gradient(135deg, #2a2000 0%, #3a2d00 100%) !important;
  border-color: rgba(255, 217, 122, 1) !important;
  box-shadow:
    0 0 0 1px rgba(212, 175, 55, 0.5),
    0 0 28px rgba(212, 175, 55, 0.5),
    0 8px 24px rgba(0, 0, 0, 0.6) !important;
  transform: scale(1.1) !important;
}

.review-float-btn::before,
.review-float-btn::after {
  border-color: rgba(212, 175, 55, 0.6) !important;
}

/* ─────────────────────────────────────────────
   5) REVIEW MODAL BOX (.review-modal-box)
   ───────────────────────────────────────────── */

.review-modal-box {
  border-color: rgba(212, 175, 55, 0.6) !important;
  box-shadow:
    0 0 0 1px rgba(212, 175, 55, 0.25),
    0 0 30px rgba(212, 175, 55, 0.2),
    0 16px 48px rgba(0, 0, 0, 0.55) !important;
}

.review-modal-group input:focus,
.review-modal-group textarea:focus {
  border-color: rgba(212, 175, 55, 0.8) !important;
  box-shadow:
    0 0 0 2px rgba(212, 175, 55, 0.2),
    0 0 10px rgba(212, 175, 55, 0.15) !important;
  outline: none !important;
}

.review-modal-group label {
  color: rgba(212, 175, 55, 0.9) !important;
}

.review-modal-close:hover {
  color: rgba(212, 175, 55, 0.9) !important;
}

.review-modal-submit {
  background: linear-gradient(135deg, #d4af37 0%, #ffd97a 50%, #d4af37 100%) !important;
  background-size: 200% auto !important;
  color: #111 !important;
  font-weight: 700 !important;
  border: none !important;
  box-shadow:
    0 0 0 1px rgba(184, 148, 31, 0.5),
    0 4px 14px rgba(212, 175, 55, 0.4),
    inset 0 1px 2px rgba(255, 255, 255, 0.3) !important;
  transition: all 0.3s ease !important;
}

.review-modal-submit:hover {
  background-position: right center !important;
  color: #000 !important;
  transform: translateY(-2px) !important;
  box-shadow:
    0 0 0 1px rgba(184, 148, 31, 0.7),
    0 6px 20px rgba(212, 175, 55, 0.55),
    inset 0 1px 2px rgba(255, 255, 255, 0.4) !important;
}

.review-modal-submit i {
  color: #111 !important;
}

/* ─────────────────────────────────────────────
   6) TESTIMONIAL MODAL (styles.css classes)
   ───────────────────────────────────────────── */

.testimonial__modal-content {
  border-color: rgba(212, 175, 55, 0.55) !important;
  box-shadow:
    0 0 0 1px rgba(212, 175, 55, 0.2),
    0 16px 48px rgba(0, 0, 0, 0.55) !important;
}

.testimonial__modal-close:hover {
  color: rgba(212, 175, 55, 0.9) !important;
}

.testimonial__form-group input:focus,
.testimonial__form-group textarea:focus {
  border-color: rgba(212, 175, 55, 0.8) !important;
  box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.15) !important;
  outline: none !important;
}

.testimonial__form-submit {
  background: linear-gradient(135deg, #d4af37 0%, #ffd97a 50%, #d4af37 100%) !important;
  background-size: 200% auto !important;
  color: #111 !important;
  font-weight: 700 !important;
  box-shadow:
    0 0 0 1px rgba(184, 148, 31, 0.5),
    0 4px 14px rgba(212, 175, 55, 0.4) !important;
}

.testimonial__form-submit:hover {
  background-position: right center !important;
  color: #000 !important;
  transform: translateY(-2px) !important;
  box-shadow:
    0 0 0 1px rgba(184, 148, 31, 0.7),
    0 6px 20px rgba(212, 175, 55, 0.55) !important;
}

.testimonial__form-submit i {
  color: #111 !important;
}

/* ─────────────────────────────────────────────
   7) Light mode adjustments — Review/Submit buttons
   ───────────────────────────────────────────── */

body:not(.dark-theme) .review-float-btn {
  background: linear-gradient(135deg, #fffaeb 0%, #fff6d4 100%) !important;
  border-color: rgba(139, 111, 0, 0.7) !important;
  color: #8b6f00 !important;
  box-shadow:
    0 0 0 1px rgba(139, 111, 0, 0.25),
    0 0 14px rgba(184, 148, 31, 0.25),
    0 6px 16px rgba(0, 0, 0, 0.15) !important;
}

body:not(.dark-theme) .review-float-btn:hover {
  border-color: rgba(139, 111, 0, 1) !important;
  box-shadow:
    0 0 0 1px rgba(139, 111, 0, 0.5),
    0 0 22px rgba(184, 148, 31, 0.4),
    0 8px 20px rgba(0, 0, 0, 0.2) !important;
}

body:not(.dark-theme) .review-float-btn::before,
body:not(.dark-theme) .review-float-btn::after {
  border-color: rgba(139, 111, 0, 0.5) !important;
}

body:not(.dark-theme) .review-modal-submit,
body:not(.dark-theme) .testimonial__form-submit {
  background: linear-gradient(135deg, #b8941f 0%, #d4af37 50%, #b8941f 100%) !important;
}
/*═══════════════════════════════════════════════════════════════*/

/*═══════════════════════════════════════════════════════════════
  LIGHT MODE FIX v5 — Text visibility everywhere
═══════════════════════════════════════════════════════════════*/

/* ─────────────────────────────────────────────
   أزرار اللغة EN/DE/AR — الأحرف داكنة في light mode
   ───────────────────────────────────────────── */

[data-theme="light"] .lang-btn,
[data-theme="light"] [data-lang],
[data-theme="light"] .language-btn,
[data-theme="light"] button[data-lang],
[data-theme="light"] .nav__lang button,
[data-theme="light"] .lang-switch button,
body.light-theme .lang-btn,
body.light-theme [data-lang],
body.light-theme .language-btn,
body.light-theme button[data-lang],
html.light .lang-btn,
html.light [data-lang],
.light .lang-btn,
.light [data-lang] {
  color: #3a2a00 !important;
  background: rgba(255, 250, 240, 0.6) !important;
  border: 2px solid rgba(139, 111, 0, 0.7) !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

[data-theme="light"] .lang-btn *,
[data-theme="light"] [data-lang] *,
[data-theme="light"] .language-btn *,
body.light-theme .lang-btn *,
body.light-theme [data-lang] *,
body.light-theme .language-btn * {
  color: inherit !important;
  opacity: 1 !important;
}

[data-theme="light"] .lang-btn:hover,
[data-theme="light"] [data-lang]:hover,
body.light-theme .lang-btn:hover,
body.light-theme [data-lang]:hover,
html.light .lang-btn:hover,
.light .lang-btn:hover {
  color: #1a1a1a !important;
  background: rgba(212, 175, 55, 0.25) !important;
  border-color: rgba(139, 111, 0, 1) !important;
  box-shadow: 0 0 14px rgba(184, 148, 31, 0.4) !important;
}

[data-theme="light"] .lang-btn.active,
[data-theme="light"] [data-lang].active,
[data-theme="light"] [data-lang].is-active,
[data-theme="light"] [data-lang][aria-current="true"],
body.light-theme .lang-btn.active,
body.light-theme [data-lang].active,
body.light-theme [data-lang].is-active,
html.light .lang-btn.active,
.light .lang-btn.active {
  background: linear-gradient(
    135deg,
    rgba(184, 148, 31, 1),
    rgba(212, 175, 55, 1)
  ) !important;
  color: #ffffff !important;
  border-color: rgba(139, 111, 0, 1) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
  font-weight: 700 !important;
}

[data-theme="light"] .lang-btn.active *,
[data-theme="light"] [data-lang].active *,
body.light-theme .lang-btn.active *,
body.light-theme [data-lang].active * {
  color: #ffffff !important;
}

/* ─────────────────────────────────────────────
   أي نص أبيض inline في light mode → داكن
   ───────────────────────────────────────────── */

[data-theme="light"] [style*="color: white"],
[data-theme="light"] [style*="color: #fff"],
[data-theme="light"] [style*="color:#fff"],
[data-theme="light"] [style*="color: rgb(255"],
body.light-theme [style*="color: white"],
body.light-theme [style*="color: #fff"] {
  color: #1a1a1a !important;
}

/*═══════════════════════════════════════════════════════════════*/

/*═══════════════════════════════════════════════════════════════
  LIGHT MODE — قوة قسرية للنصوص والأزرار (v6)
═══════════════════════════════════════════════════════════════*/


/* ━━━━━━━ 2) أزرار اللغة في Light Mode ━━━━━━━ */

[data-theme="light"] .lang-btn,
[data-theme="light"] [data-lang],
[data-theme="light"] .language-btn,
[data-theme="light"] button[data-lang],
[data-theme="light"] .nav__lang button,
body.light-theme .lang-btn,
body.light-theme [data-lang],
body.light-theme .language-btn,
body.light-theme button[data-lang],
body.light-theme .nav__lang button,
html.light .lang-btn,
html.light [data-lang],
.light .lang-btn,
.light [data-lang] {
  color: #2a1a00 !important;
  background-color: rgba(255, 255, 255, 0.7) !important;
  border: 2px solid rgba(139, 111, 0, 0.8) !important;
  text-shadow: none !important;
  opacity: 1 !important;
  font-weight: 700 !important;
}

[data-theme="light"] .lang-btn span,
[data-theme="light"] [data-lang] span,
body.light-theme .lang-btn span,
body.light-theme [data-lang] span {
  color: #2a1a00 !important;
  opacity: 1 !important;
}

[data-theme="light"] .lang-btn.active,
[data-theme="light"] [data-lang].active,
[data-theme="light"] [data-lang].is-active,
[data-theme="light"] [data-lang][aria-current="true"],
body.light-theme .lang-btn.active,
body.light-theme [data-lang].active,
html.light .lang-btn.active,
.light .lang-btn.active {
  background: linear-gradient(
    135deg,
    #8b6f00 0%,
    #b8941f 50%,
    #8b6f00 100%
  ) !important;
  color: #ffffff !important;
  border: 2px solid #5a3f00 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) !important;
  font-weight: 800 !important;
  box-shadow:
    0 0 0 1px rgba(139, 111, 0, 0.5),
    0 4px 12px rgba(184, 148, 31, 0.4),
    inset 0 1px 2px rgba(255, 255, 255, 0.4) !important;
}

[data-theme="light"] .lang-btn.active *,
[data-theme="light"] [data-lang].active *,
body.light-theme .lang-btn.active *,
body.light-theme [data-lang].active * {
  color: #ffffff !important;
}

[data-theme="light"] .lang-btn:hover:not(.active),
[data-theme="light"] [data-lang]:hover:not(.active),
body.light-theme .lang-btn:hover:not(.active),
body.light-theme [data-lang]:hover:not(.active) {
  background-color: rgba(212, 175, 55, 0.25) !important;
  color: #1a1a1a !important;
  border-color: rgba(139, 111, 0, 1) !important;
}
/*═══════════════════════════════════════════════════════════════*/

/*═══════════════════════════════════════════════════════════════
  LANGUAGE BUTTONS — CORRECT LIGHT MODE FIX
  السبب الجذري: الثيم يُطبَّق بـ body.dark-theme
  اللايت مود = body بدون dark-theme
═══════════════════════════════════════════════════════════════*/

/* الزر العادي في light mode */
body:not(.dark-theme) .lang-btn,
body:not(.dark-theme) .lang-btn *,
body:not(.dark-theme) [data-lang],
body:not(.dark-theme) [data-lang] * {
  color: #1a1a1a !important;
  opacity: 1 !important;
  visibility: visible !important;
}

body:not(.dark-theme) .lang-btn,
body:not(.dark-theme) [data-lang] {
  background: rgba(255, 255, 255, 0.88) !important;
  background-image: none !important;
  border: 1.5px solid rgba(139, 111, 0, 0.75) !important;
  font-weight: 700 !important;
  text-shadow: none !important;
  box-shadow: 0 2px 6px rgba(184, 148, 31, 0.12) !important;
}

/* الزر النشط */
body:not(.dark-theme) .lang-btn.active,
body:not(.dark-theme) .lang-btn.active *,
body:not(.dark-theme) [data-lang].active,
body:not(.dark-theme) [data-lang].active * {
  color: #ffffff !important;
}

body:not(.dark-theme) .lang-btn.active,
body:not(.dark-theme) [data-lang].active {
  background: linear-gradient(135deg, #8b6f00, #b8941f) !important;
  border-color: #5a3f00 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
  font-weight: 800 !important;
  box-shadow:
    0 4px 12px rgba(184, 148, 31, 0.35),
    inset 0 1px 2px rgba(255, 255, 255, 0.3) !important;
}

/* Hover */
body:not(.dark-theme) .lang-btn:hover:not(.active),
body:not(.dark-theme) [data-lang]:hover:not(.active) {
  color: #000000 !important;
  background: rgba(212, 175, 55, 0.28) !important;
  border-color: #8b6f00 !important;
  box-shadow: 0 0 10px rgba(184, 148, 31, 0.35) !important;
}

body:not(.dark-theme) .lang-btn:hover:not(.active) * {
  color: #000000 !important;
}
/*═══════════════════════════════════════════════════════════════*/

/* Canvas code background — في light mode اجعله مرئياً بدون screen blend */
body:not(.dark-theme) .p24-code-bg {
  mix-blend-mode: multiply !important;
  opacity: 0.45 !important;
}
/*═══════════════════════════════════════════════════════════════*/

/*═══════════════════════════════════════════════════════════════
  Marquee text visibility in Light Mode (minimal fix)
═══════════════════════════════════════════════════════════════*/

body:not(.dark-theme) .marquee-item,
body:not(.dark-theme) .marquee-track * {
  color: #8b6f00 !important;
}

body:not(.dark-theme) .marquee-item strong,
body:not(.dark-theme) .marquee-item b {
  color: #5a3f00 !important;
  font-weight: 700 !important;
}

body:not(.dark-theme) .marquee-item i,
body:not(.dark-theme) .marquee-item em {
  color: #8b6f00 !important;
  font-style: italic !important;
}
/*═══════════════════════════════════════════════════════════════*/