/* =========================
   CONTACT OVERLAY — FINAL FIX
   Matches:
   <div class="overlay" id="contactOverlay">
   <div class="overlay-card">
   ========================= */

/* ---------- Overlay wrapper ---------- */
#contactOverlay.overlay {
  position: fixed;
  inset: 0;
  display: none; /* toggled via JS */
  align-items: center;
  justify-content: center;
  background: transparent; /* NO BLACK BACKDROP */
  backdrop-filter: none;
  z-index: 9999;
  padding: 24px;
}

/* Visible states */
#contactOverlay.is-open,
#contactOverlay[aria-hidden="false"] {
  display: flex;
}

/* ---------- Modal card ---------- */
#contactOverlay .overlay-card {
  width: min(760px, 100%);
  max-width: 760px;
  border-radius: 22px;
  padding: 26px 28px 24px;

  /* SINGLE, FLAT SURFACE — NO TOP BAND */
  background-color: #0f1626;

  border: 1px solid rgba(231,192,86,0.35);
  box-shadow: 0 28px 80px rgba(0,0,0,0.55);
  position: relative;
}

/* ---------- Close button ---------- */
#contactOverlay .overlay-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(231,192,86,0.35);
  background: transparent;
  color: #e7c056;
  font-size: 26px;
  cursor: pointer;
  display: grid;
  place-items: center;
}

#contactOverlay .overlay-close:hover {
  background: rgba(231,192,86,0.12);
}

/* ---------- Heading ---------- */
#contactOverlay h2 {
  margin: 6px 0 6px;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: 0.3px;
  color: #e7c056;
}

#contactOverlay p {
  margin: 0 0 20px;
  color: rgba(255,255,255,0.8);
}

/* ---------- Form ---------- */
#contactOverlay form {
  width: 100%;
}

/* Stack labels cleanly */
#contactOverlay form label {
  display: block;
  margin-bottom: 16px;
  font-weight: 700;
  color: #e7c056;
}

/* ---------- Inputs ---------- */
#contactOverlay form input[type="text"],
#contactOverlay form input[type="email"],
#contactOverlay form textarea {
  width: 100%;
  display: block;
  margin-top: 8px;
  padding: 14px 16px;
  border-radius: 12px;

  border: 1px solid rgba(231,192,86,0.35);
  background-color: rgba(255,255,255,0.06);
  color: #ffffff;
  font-size: 15px;

  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}

/* Bigger message box */
#contactOverlay form textarea {
  min-height: 170px;
  resize: vertical;
}

/* Focus */
#contactOverlay form input:focus,
#contactOverlay form textarea:focus {
  border-color: rgba(231,192,86,0.85);
  box-shadow: 0 0 0 4px rgba(231,192,86,0.18);
}

/* ---------- Buttons ---------- */
#contactOverlay .form-actions {
  display: flex;
  gap: 12px;
  margin-top: 18px;
}

/* Send button */
#contactOverlay .overlay-primary-btn {
  flex: 1;
  padding: 14px 16px;
  border-radius: 14px;
  border: none;
  cursor: pointer;

  background: linear-gradient(135deg, #e7c056, #b78a1f);
  color: #10131b;
  font-weight: 800;
  font-size: 15px;

  box-shadow: 0 14px 34px rgba(231,192,86,0.28);
  transition: transform .15s ease, box-shadow .15s ease;
}

#contactOverlay .overlay-primary-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 44px rgba(231,192,86,0.38);
}

/* Cancel button */
#contactOverlay #cancelContactBtn {
  width: 150px;
  padding: 14px 16px;
  border-radius: 14px;
  cursor: pointer;

  background: transparent;
  border: 1px solid rgba(231,192,86,0.35);
  color: rgba(255,255,255,0.9);
  font-weight: 800;
}

#contactOverlay #cancelContactBtn:hover {
  background: rgba(231,192,86,0.12);
}

/* ---------- Mobile ---------- */
@media (max-width: 520px) {
  #contactOverlay .overlay-card {
    padding: 22px 18px 20px;
    border-radius: 18px;
  }

  #contactOverlay h2 {
    font-size: 28px;
  }

  #contactOverlay .form-actions {
    flex-direction: column;
  }

  #contactOverlay #cancelContactBtn {
    width: 100%;
  }
}
#contactOverlay.overlay {
  background: transparent !important;
  backdrop-filter: none !important;
  pointer-events: auto !important;  /* keep clicks */
}
#contactOverlay .overlay-card {
  pointer-events: auto !important;  /* keep form usable */
}
/* =========================
   CONTACT OVERLAY — REMOVE BACKDROP + FORCE HIDE/SHOW
   ========================= */

/* Default: overlay is fully hidden */
#contactOverlay {
  display: none !important;
}

/* Only show when open */
#contactOverlay.is-open,
#contactOverlay[aria-hidden="false"] {
  display: flex !important;
}

/* Kill any backdrop styling */
#contactOverlay.overlay {
  background: transparent !important;
  backdrop-filter: none !important;
}

/* Kill pseudo-element backdrops (very common) */
#contactOverlay.overlay::before,
#contactOverlay.overlay::after {
  content: none !important;
  display: none !important;
}

/* Ensure the card is visible and centered */
#contactOverlay .overlay-card {
  margin: 0 auto !important;
}