/* contact-modal.css (common)
   Centralized modal via flex overlay + simple motion.
*/
.modal-overlay{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.45);
  z-index:6000;

  display:none;
  align-items:center;
  justify-content:center;

  padding: 14px;
}
.modal-overlay.open{ display:flex; }

.modal-panel{
  width: min(520px, calc(100vw - 28px));
  background:#fff;
  border-radius:16px;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  overflow:hidden;

  transform: translateY(8px) scale(.985);
  opacity: 0;
  transition: transform .18s ease, opacity .18s ease;
}
.modal-overlay.open .modal-panel{
  transform: translateY(0) scale(1);
  opacity: 1;
}

.modal-head{
  padding:14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border-bottom:1px solid var(--line, #e6e6e6);
}
.modal-title{
  margin:0;
  font-size:1.05rem;
  font-weight:800;
}
.modal-close{
  border:none;
  background:none;
  font-weight:800;
  color:var(--brand-color, #004098);
  cursor:pointer;
  padding:6px 0;
  line-height:1.1;
}
.modal-body{ padding:14px 16px 16px; }
.modal-body .pills{ margin-top:12px; }
.modal-body .note{ margin-top:10px; }

/* align pills buttons in modal */
#contactModal .btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.4em;
}

/* icons */
.btn-icon{
  width:1.1em;
  height:1.1em;
  vertical-align:-0.15em;
  flex:0 0 auto;
}