/* Dark Mode — يفعّل تلقائياً على prefers-color-scheme: dark،
   أو يدوياً عبر [data-theme="dark"] على html */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --dark-gray: #E8E8E8;
    --light-gray: #1F2228;
    --white: #14161B;
    --primary-color: #FF8A36;
  }
  :root:not([data-theme="light"]) body { background: #0F1115; color: #E8E8E8; }
  :root:not([data-theme="light"]) header { background: rgba(20, 22, 27, 0.95); }
  :root:not([data-theme="light"]) .card,
  :root:not([data-theme="light"]) .pricing-card,
  :root:not([data-theme="light"]) .service-card,
  :root:not([data-theme="light"]) .testimonial-card { background: #1A1D24; color: #E8E8E8; }
  :root:not([data-theme="light"]) .breadcrumb-nav { background: #1F2228; }
  :root:not([data-theme="light"]) footer { background: #14161B; color: #C8CBD2; }
  :root:not([data-theme="light"]) .form-control { background: #1F2228; color: #E8E8E8; border-color: #333842; }
}
[data-theme="dark"] { color-scheme: dark; }
.theme-toggle {
  background: transparent; border: 1.5px solid var(--light-gray);
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px; color: var(--dark-gray); transition: all 0.3s;
}
.theme-toggle:hover { border-color: var(--primary-color); color: var(--primary-color); }