/* Contact form popup (components/forms/ContactPopup.jsx). Colours and fonts match the site:
   headings Outfit 500 #0F172A, text Outfit 300, buttons DM Sans 700 with the #346FFA outline style of the form's Submit button. */

html.contact-popup-open { overflow: hidden; }

.contact-popup { position: fixed; inset: 0; z-index: 99999; align-items: center; justify-content: center; padding: 16px; }
.contact-popup:not([hidden]) { display: flex; }
.contact-popup [hidden] { display: none !important; }

.contact-popup__overlay { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.55); animation: contact-popup-fade 0.2s ease-out; }

.contact-popup__card {
  position: relative; width: 100%; max-width: 480px; box-sizing: border-box;
  padding: 48px 40px 40px; border-radius: 15px; background: #fff; text-align: center;
  box-shadow: 0 20px 60px rgba(52, 111, 250, 0.18);
  font-family: "DM Sans", sans-serif;
  animation: contact-popup-pop 0.25s ease-out;
  outline: none;
}

.contact-popup__icon { display: block; width: 64px; height: 64px; margin: 0 auto 20px; }

.contact-popup .contact-popup__title {
  margin: 0 0 12px; font-family: "Outfit", sans-serif; font-weight: 500; font-size: 32px; line-height: 1.3; color: #0F172A;
}

.contact-popup .contact-popup__text {
  margin: 0 0 28px; font-family: "Outfit", sans-serif; font-weight: 300; font-size: 18px; line-height: 1.5; color: #364151;
}
.contact-popup .contact-popup__text a { color: #346FFA; }

.contact-popup .contact-popup__button {
  font-family: "DM Sans", sans-serif; font-size: 14px; font-weight: 700; line-height: 20px; text-transform: capitalize;
  padding: 10px 36px; border: 2px solid #346FFA; border-radius: 10px; background: transparent; color: #346FFA;
  cursor: pointer; transition: background-color 0.2s, color 0.2s;
}
.contact-popup .contact-popup__button:focus { background: transparent; color: #346FFA; }
.contact-popup .contact-popup__button:hover,
.contact-popup .contact-popup__button:focus-visible { background: #346FFA; color: #fff; }
.contact-popup .contact-popup__button:focus-visible,
.contact-popup .contact-popup__close:focus-visible { outline: 2px solid #346FFA; outline-offset: 3px; }

.contact-popup .contact-popup__close {
  position: absolute; top: 12px; right: 12px; display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: #364151; cursor: pointer;
}
.contact-popup .contact-popup__close:hover,
.contact-popup .contact-popup__close:focus-visible { background: #E7F6FF; color: #0F172A; }

@media (max-width: 767px) {
  .contact-popup__card { padding: 40px 24px 28px; }
  .contact-popup .contact-popup__title { font-size: 26px; }
  .contact-popup .contact-popup__text { font-size: 16px; }
}

@keyframes contact-popup-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes contact-popup-pop { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .contact-popup__overlay, .contact-popup__card { animation: none; } }