/*═══════════════════════════════════════════════════════════════
  FEATURES PACK v9 - Services + Projects golden borders + Light fix + a11y
═══════════════════════════════════════════════════════════════*/

/* ─── EMAIL VALIDATION ─── */
input.feat-email-valid {
  border-color: rgba(34, 197, 94, 0.6) !important;
  box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.2) !important;
}
input.feat-email-invalid {
  border-color: rgba(239, 68, 68, 0.6) !important;
  box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.2) !important;
}
.feat-email-message {
  display: block;
  font-size: 0.75rem;
  margin-top: 0.4rem;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.02em;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.3s ease, max-height 0.3s ease;
}
.feat-email-message.feat-show   { opacity: 1; max-height: 2rem; }
.feat-email-message.feat-error  { color: rgba(239, 68, 68, 0.95); }
.feat-email-message.feat-success { color: rgba(34, 197, 94, 0.95); }
.feat-submit-disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
  filter: grayscale(0.5);
}
@keyframes feat-shake {
  0%, 100% { transform: translateX(0); }
  25%       { transform: translateX(-6px); }
  50%       { transform: translateX(6px); }
  75%       { transform: translateX(-3px); }
}

/* ─────────────────────────────────────────────
   PROJECT IMAGES — Golden Border (Dark mode default)
   ───────────────────────────────────────────── */
.feat-img-glow {
  border-radius: 12px;
  border: 1.5px solid rgba(212, 175, 55, 0.55) !important;
  box-shadow:
    0 0 0 1px rgba(212, 175, 55, 0.15),
    0 0 18px rgba(212, 175, 55, 0.18),
    0 4px 12px rgba(0, 0, 0, 0.25);
  animation: feat-img-pulse 3s ease-in-out infinite;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease;
}

@keyframes feat-img-pulse {
  0%, 100% {
    border-color: rgba(212, 175, 55, 0.45);
    box-shadow:
      0 0 0 1px rgba(212, 175, 55, 0.1),
      0 0 12px rgba(212, 175, 55, 0.12),
      0 4px 12px rgba(0, 0, 0, 0.25);
  }
  50% {
    border-color: rgba(255, 217, 122, 0.85);
    box-shadow:
      0 0 0 1px rgba(212, 175, 55, 0.3),
      0 0 22px rgba(212, 175, 55, 0.3),
      0 4px 16px rgba(0, 0, 0, 0.3);
  }
}

.projects__content:hover .feat-img-glow,
.swiper-slide:hover .feat-img-glow {
  transform: translateY(-4px) scale(1.01);
  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.4),
    0 10px 22px rgba(0, 0, 0, 0.35);
  animation-play-state: paused;
}

/* ─────────────────────────────────────────────
   SERVICES CARDS — Golden Border
   ───────────────────────────────────────────── */
.feat-service-glow {
  border: 1.5px solid rgba(212, 175, 55, 0.5) !important;
  box-shadow:
    0 0 0 1px rgba(212, 175, 55, 0.12),
    0 0 22px rgba(212, 175, 55, 0.15),
    0 4px 14px rgba(0, 0, 0, 0.2);
  animation: feat-service-pulse 3.5s ease-in-out infinite;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease;
}

@keyframes feat-service-pulse {
  0%, 100% {
    border-color: rgba(212, 175, 55, 0.4);
    box-shadow:
      0 0 0 1px rgba(212, 175, 55, 0.1),
      0 0 16px rgba(212, 175, 55, 0.12),
      0 4px 12px rgba(0, 0, 0, 0.2);
  }
  50% {
    border-color: rgba(255, 217, 122, 0.8);
    box-shadow:
      0 0 0 1px rgba(212, 175, 55, 0.28),
      0 0 26px rgba(212, 175, 55, 0.28),
      0 4px 18px rgba(0, 0, 0, 0.25);
  }
}

.feat-service-glow:hover {
  transform: translateY(-5px);
  border-color: rgba(255, 217, 122, 1) !important;
  box-shadow:
    0 0 0 1.5px rgba(212, 175, 55, 0.5),
    0 0 32px rgba(212, 175, 55, 0.4),
    0 12px 26px rgba(0, 0, 0, 0.3);
  animation-play-state: paused;
}

/* ─────────────────────────────────────────────
   LIGHT MODE — ذهبي أغمق + إصلاح rainbow
   body بدون .dark-theme = light mode (confirmed from main.js)
   ───────────────────────────────────────────── */

body:not(.dark-theme) .feat-img-glow {
  border: 2px solid rgba(139, 111, 0, 0.7) !important;
  animation: feat-img-pulse-light 3s ease-in-out infinite;
}

@keyframes feat-img-pulse-light {
  0%, 100% {
    border-color: rgba(139, 111, 0, 0.6);
    box-shadow:
      0 0 0 1px rgba(139, 111, 0, 0.2),
      0 0 14px rgba(184, 148, 31, 0.25),
      0 4px 12px rgba(0, 0, 0, 0.15);
  }
  50% {
    border-color: rgba(184, 148, 31, 1);
    box-shadow:
      0 0 0 1.5px rgba(139, 111, 0, 0.5),
      0 0 28px rgba(184, 148, 31, 0.55),
      0 4px 18px rgba(0, 0, 0, 0.2);
  }
}

body:not(.dark-theme) .feat-service-glow {
  border: 2px solid rgba(139, 111, 0, 0.65) !important;
  animation: feat-service-pulse-light 3.5s ease-in-out infinite;
}

@keyframes feat-service-pulse-light {
  0%, 100% {
    border-color: rgba(139, 111, 0, 0.55);
    box-shadow:
      0 0 0 1px rgba(139, 111, 0, 0.18),
      0 0 16px rgba(184, 148, 31, 0.22),
      0 4px 14px rgba(0, 0, 0, 0.12);
  }
  50% {
    border-color: rgba(184, 148, 31, 1);
    box-shadow:
      0 0 0 1.5px rgba(139, 111, 0, 0.5),
      0 0 30px rgba(184, 148, 31, 0.55),
      0 4px 20px rgba(0, 0, 0, 0.18);
  }
}

body:not(.dark-theme) .projects__content:hover .feat-img-glow,
body:not(.dark-theme) .swiper-slide:hover .feat-img-glow {
  border-color: rgba(139, 111, 0, 1) !important;
}

body:not(.dark-theme) .feat-service-glow:hover {
  border-color: rgba(139, 111, 0, 1) !important;
}

/* إصلاح rainbow: تخفيف الـ canvas في Light mode */
body:not(.dark-theme) .p24-code-bg {
  opacity: 0.06 !important;
  mix-blend-mode: multiply !important;
  filter: grayscale(0.8) !important;
}

@media (prefers-reduced-motion: reduce) {
  .feat-img-glow,
  .feat-service-glow          { animation: none; }
  .feat-img-glow:hover,
  .feat-service-glow:hover    { transform: none; }
}

@media (max-width: 767px) {
  .feat-img-glow,
  .feat-service-glow          { animation-duration: 4s; }
}

/* ─────────────────────────────────────────────
   FOCUS VISIBLE — keyboard navigation (a11y)
   ───────────────────────────────────────────── */

*:focus-visible {
  outline: 2px solid rgba(212, 175, 55, 0.85);
  outline-offset: 3px;
  border-radius: 3px;
}

/* للروابط: تأثير ذهبي يناسب التصميم */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid rgba(212, 175, 55, 0.9);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.15);
}

/* Light mode: outline أغمق */
body:not(.dark-theme) *:focus-visible {
  outline-color: rgba(139, 111, 0, 0.9);
  box-shadow: 0 0 0 4px rgba(139, 111, 0, 0.12);
}