/* Extracted from the inline <style> block in index.html so the CSP can drop
   'unsafe-inline' from style-src (re-test finding 1). Landing-page-only rules. */

body {
  font-family: 'Cairo', sans-serif;
}

[dir='ltr'] body {
  font-family: 'Noto Sans', Arial, sans-serif;
}

.language-switcher {
  display: inline-flex;
  gap: 0.25rem;
  padding: 0.25rem;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.9);
}

.language-option {
  border: 0;
  border-radius: 0.55rem;
  padding: 0.45rem 0.6rem;
  color: #475569;
  background: transparent;
  font-weight: 700;
  cursor: pointer;
  transition:
    color 0.2s ease,
    background 0.2s ease;
}

.language-option:hover,
.language-option.active,
.language-option.is-active {
  background: #2563eb;
  color: #fff;
}

button:focus-visible,
a:focus-visible,
input:focus-visible {
  outline: 3px solid rgba(37, 99, 235, 0.45);
  outline-offset: 3px;
}

.fade-in {
  animation: fadeIn 0.6s ease-in;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.slide-down {
  animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    max-height: 0;
  }

  to {
    opacity: 1;
    max-height: 500px;
  }
}

@keyframes modalIn {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(-12px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes pulseGreen {
  0%,
  100% {
    box-shadow: 0 4px 24px rgba(37, 211, 102, 0.4);
  }

  50% {
    box-shadow: 0 4px 36px rgba(37, 211, 102, 0.7);
  }
}

#whatsapp-float {
  animation: pulseGreen 2.5s ease-in-out infinite;
}