/* --- Contact Modal Styles --- */
.contact-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  font-family: 'Segoe UI', sans-serif;
}
.contact-modal.active { display: flex; }
.contact-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(2px);
}
.contact-box {
  position: relative;
  background: #fff;
  color: #111;
  border-radius: 12px;
  padding: 30px 24px;
  max-width: 420px;
  width: 90%;
  z-index: 2;
  box-shadow: 0 12px 28px rgba(0,0,0,.2);
  animation: fadeUp .3s ease-out;
}
@keyframes fadeUp { from {transform:translateY(20px);opacity:0;} to {transform:translateY(0);opacity:1;} }
.close-btn {
  position: absolute; top:10px; right:14px;
  background:none; border:0; font-size:1.4rem; cursor:pointer; color:#666;
}
.close-btn:hover { color:#000; }
.contact-box h2 {
  color:#2D6CDF;
  text-align:center;
  margin-bottom:1rem;
  font-weight:800;
}
#contact-form label { display:block; font-size:0.9rem; font-weight:600; margin:8px 0 4px; }
#contact-form input, #contact-form textarea {
  width:100%; padding:10px 12px; border:1px solid #ccc;
  border-radius:8px; font-size:1rem;
}
.send-btn {
  margin-top:14px; background:#2D6CDF; color:#fff; border:0; border-radius:8px;
  padding:10px 16px; font-weight:700; cursor:pointer; width:100%; transition:background .2s;
}
.send-btn:hover { background:#1e4eb9; }
.form-status { margin-top:10px; text-align:center; font-size:0.9rem; }

.toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #2D6CDF;
  color: #fff;
  padding: 12px 18px;
  border-radius: 8px;
  font-weight: 600;
  opacity: 0;
  transform: translateY(20px);
  transition: all .3s ease;
  z-index: 10000;
}
.toast.show {
  opacity: 1;
  transform: translateY(0);
}

/* === Contact Modal Form Styles === */
.contact-box form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
}

.contact-box label {
  font-weight: 600;
  font-size: 0.95rem;
  color: #1E3A8A;
  display: block;
  margin-bottom: 4px;
}

.contact-box input[type="text"],
.contact-box input[type="email"],
.contact-box textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  background: #fff;
  font-size: 0.95rem;
  color: #111827;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.contact-box input:focus,
.contact-box textarea:focus {
  outline: none;
  border-color: #2D6CDF;
  box-shadow: 0 0 0 3px rgba(45,108,223,0.15);
}

.send-btn {
  align-self: flex-start;
  background: #2D6CDF;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 12px 22px;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s ease, transform .15s ease;
}

.send-btn:hover {
  background: #1d56b0;
  transform: translateY(-1px);
}

.form-status {
  font-size: 0.9rem;
  margin-top: 8px;
}

@media (max-width: 600px) {
  .contact-box {
    width: 90%;
    padding: 20px;
  }
  .send-btn {
    width: 100%;
    text-align: center;
  }
}