/* FINAL CONTACT PAGE
   Same old contact.php visual style, no Font Awesome CDN, static/secure Astro.
*/

body .contact-page {
  background: #c0c0c0 !important;
  color: #333 !important;
  padding: 50px 20px !important;
  margin: 0 !important;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif !important;
}

body .contact-container {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 40px !important;
  background: #e0e0e0 !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
}

body .contact-container h1 {
  text-align: center !important;
  color: #444 !important;
  font-size: 2.5em !important;
  margin: 0 0 30px !important;
  font-weight: 300 !important;
  line-height: 1.2 !important;
}

body .contact-info {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: space-between !important;
  margin: 20px 0 !important;
  gap: 20px !important;
}

body .contact-card {
  flex: 1 1 calc(50% - 20px) !important;
  margin: 0 !important;
  padding: 20px !important;
  background: #d0d0d0 !important;
  border-radius: 10px !important;
  text-align: center !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
}

body .contact-card p {
  margin: 10px 0 !important;
  font-size: 1.1em !important;
  color: #555 !important;
  line-height: 1.35 !important;
}

body .contact-card a {
  color: #0056b3 !important;
  text-decoration: none !important;
  transition: color 0.3s ease !important;
}

body .contact-card a:hover {
  color: #003d80 !important;
  text-decoration: underline !important;
}

body .contact-social-wrapper {
  text-align: center !important;
  margin: 30px 0 !important;
}

body .contact-social-icons {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 26px !important;
  background: #333 !important;
  padding: 10px 18px !important;
  border-radius: 10px !important;
}

body .contact-social-icons a {
  color: #e0e0e0 !important;
  width: 32px !important;
  height: 32px !important;
  display: grid !important;
  place-items: center !important;
  transition: transform 0.25s ease, color 0.25s ease, filter 0.25s ease !important;
  text-decoration: none !important;
}

body .contact-social-icons svg {
  width: 30px !important;
  height: 30px !important;
  fill: currentColor !important;
}

body .contact-social-icons a:hover {
  transform: scale(1.2) !important;
}

body .contact-social-icons a[aria-label="Facebook"]:hover {
  color: #3b5998 !important;
  filter: drop-shadow(0 0 8px #3b5998) !important;
}

body .contact-social-icons a[aria-label="X"]:hover {
  color: #1da1f2 !important;
  filter: drop-shadow(0 0 8px #1da1f2) !important;
}

body .contact-social-icons a[aria-label="Instagram"]:hover {
  color: #e1306c !important;
  filter: drop-shadow(0 0 8px #e1306c) !important;
}

body .contact-map-container {
  margin: 30px 0 !important;
  text-align: center !important;
}

body .contact-map-container iframe {
  width: 100% !important;
  height: 400px !important;
  border: 0 !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
  background: #d0d0d0 !important;
}

body .directions-link {
  margin-top: 20px !important;
  text-align: center !important;
}

body .directions-link a {
  color: #0056b3 !important;
  text-decoration: none !important;
  font-size: 1.2em !important;
  font-weight: 600 !important;
}

body .directions-link a:hover {
  color: #003d80 !important;
  text-decoration: underline !important;
}

/* Arabic */
body .contact-page[dir="rtl"] .contact-card {
  text-align: center !important;
}

/* Mobile */
@media (max-width: 768px) {
  body .contact-page {
    padding: 28px 12px !important;
  }

  body .contact-container {
    padding: 24px 14px !important;
  }

  body .contact-container h1 {
    font-size: 2em !important;
  }

  body .contact-info {
    flex-direction: column !important;
  }

  body .contact-card {
    flex: 1 1 100% !important;
  }

  body .contact-map-container iframe {
    height: 330px !important;
  }

  body .contact-social-icons {
    gap: 20px !important;
  }
}