/* ─── Custom Styles (non-Tailwind additions) ─── */
/* Font */
body {
  font-family: 'Plus Jakarta Sans', sans-serif;
}
/* Gradient text for heading */
.gradient-text {
  background: linear-gradient(to right, #7c3aed, #6366f1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
/* Gradient card (Working Hours) */
.gradient-card {
  background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%);
}
/* Submit button gradient */
.submit-btn {
  background: linear-gradient(to right, #7c3aed, #4f46e5);
}
.submit-btn:hover {
  box-shadow: 0 10px 25px rgba(124, 58, 237, 0.35);
  transform: translateY(-2px);
}
.submit-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
/* Input focus */
.input-field:focus {
  border-color: #7c3aed;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12);
}
/* Pulsing green dot */
.pulse-dot {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}
/* ─── Entrance Animations ─── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes slideLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideRight {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}
.animate-fade-in-up  { animation: fadeInUp  0.6s ease both; }
.animate-slide-left  { animation: slideLeft  0.6s ease both 0.1s; }
.animate-slide-right { animation: slideRight 0.6s ease both 0.15s; }
/* ─── Toast ─── */
.toast { transition: opacity 0.3s ease, transform 0.3s ease; }
.toast.show { display: block !important; }
.toast-success { background-color: #16a34a; }
.toast-error   { background-color: #dc2626; }
/* ─── Contact info link hover ─── */
.contact-link:hover .contact-icon-box {
  background-color: #ede9fe;
}
.contact-link:hover .contact-value {
  color: #7c3aed;
}

/* ─── Dark Theme — Contact Section ─── */

/* Section background */
[data-theme="dark"] #contact {
  background-color: #0f172a !important;
}

/* Header badge */
[data-theme="dark"] #contact .bg-violet-100 {
  background-color: rgba(124, 58, 237, 0.2) !important;
  color: #c4b5fd !important;
}

/* Heading & paragraph */
[data-theme="dark"] #contact h2 {
  color: #f1f5f9 !important;
}
[data-theme="dark"] #contact p.text-gray-500 {
  color: #94a3b8 !important;
}

/* ── Contact Info Card ── */
[data-theme="dark"] #contact .bg-white {
  background-color: #1e293b !important;
  border-color: #334155 !important;
}
[data-theme="dark"] #contact h3 {
  color: #f1f5f9 !important;
}

/* Labels (Email / Phone / Office small text) */
[data-theme="dark"] #contact .text-gray-400 {
  color: #64748b !important;
}

/* Values (email address, phone number, location) */
[data-theme="dark"] #contact .text-gray-800 {
  color: #cbd5e1 !important;
}

/* Icon boxes */
[data-theme="dark"] #contact .bg-violet-50 {
  background-color: rgba(124, 58, 237, 0.15) !important;
}
[data-theme="dark"] #contact .group:hover .bg-violet-50,
[data-theme="dark"] #contact .group:hover .group-hover\:bg-violet-100 {
  background-color: rgba(124, 58, 237, 0.25) !important;
}

/* ── Form inputs ── */
[data-theme="dark"] .input-field {
  background-color: #0f172a !important;
  border-color: #334155 !important;
  color: #f1f5f9 !important;
}
[data-theme="dark"] .input-field::placeholder {
  color: #475569 !important;
}
[data-theme="dark"] .input-field:focus {
  border-color: #7c3aed !important;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.18) !important;
  background-color: #1e293b !important;
}

/* ── Working Hours card stays vivid — no override needed ── */

/* ── "Send a Message" form card ── */
[data-theme="dark"] #contact .lg\:col-span-3.bg-white {
  background-color: #1e293b !important;
  border-color: #334155 !important;
}

/* ── Submit button — unchanged; gradient looks great in both modes ── */