/* Add Contact (public/contact-add.js): GHL's right-hand panel. */

.ac-back { position: fixed; inset: 0; z-index: 940; background: rgba(16, 24, 40, 0); transition: background .18s; }
.ac-back.open { background: rgba(16, 24, 40, .35); }
/* A dialog opened from the panel (discard changes, insert link) goes above
   it. At its own z-index of 200 it drew under the panel's overlay, which
   then took every click meant for it. */
.ac-back ~ .dlg-backdrop { z-index: 1200; }
.ac-panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(100%, 420px); background: var(--surface);
  display: flex; flex-direction: column; box-shadow: -12px 0 32px rgba(16, 24, 40, .18);
  transform: translateX(100%); transition: transform .2s ease-out;
}
.ac-back.open .ac-panel { transform: none; }
.ac-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 12px 16px; border-bottom: 1px solid #eaecf0; }
.ac-title { font-size: 15px; font-weight: 600; color: #101828; }
.ac-body { flex: 1; overflow-y: auto; padding: 14px 16px 20px; display: flex; flex-direction: column; gap: 16px; }
.ac-main, .ac-custom { display: flex; flex-direction: column; gap: 16px; }
.ac-error:empty { display: none; }
.ac-error { font-size: 13px; color: #b42318; background: #fef3f2; border: 1px solid #fecdca; border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }

.ac-group { display: flex; flex-direction: column; gap: 6px; }
.ac-label { font-size: 13.5px; font-weight: 600; color: #101828; }
.ac-req { color: #d92d20; }
.ac-row-between { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ac-customize {
  display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; padding: 0;
  font: inherit; font-size: 12.5px; font-weight: 500; color: #155eef; cursor: pointer;
}
.ac-customize:hover { text-decoration: underline; }

.ac-input {
  width: 100%; min-width: 0; border: 1px solid #d0d5dd; border-radius: 6px; padding: 7px 9px;
  font: inherit; font-size: 13.5px; color: #101828; background: var(--surface); box-sizing: border-box;
}
.ac-input:focus { outline: none; border-color: #155eef; box-shadow: 0 0 0 3px #eff4ff; }
textarea.ac-input { resize: vertical; }

.ac-avatar-row { display: flex; align-items: center; gap: 12px; }
.ac-avatar {
  position: relative; width: 64px; height: 64px; border-radius: 50%; border: 1px solid #eaecf0; background: #f2f4f7;
  color: #475467; display: grid; place-items: center; cursor: pointer; padding: 0; flex: none;
}
.ac-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.ac-avatar-pen {
  position: absolute; right: -2px; bottom: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--surface);
  border: 1px solid #eaecf0; display: grid; place-items: center; color: #344054;
}

.ac-multi { display: flex; flex-direction: column; gap: 6px; }
.ac-multi-row { display: flex; align-items: center; gap: 6px; }
.ac-radio { flex: none; margin: 0; accent-color: #155eef; }
.ac-ptype { width: 92px; flex: none; }
.ac-pcountry { width: 92px; flex: none; }
.ac-del { flex: none; color: #667085; }
.ac-add { align-self: flex-start; border: 0; background: none; padding: 0; font: inherit; font-size: 12px; color: #667085; cursor: pointer; }
.ac-add:hover { color: #155eef; }

.ac-dnd { border: 1px solid #eaecf0; border-radius: 8px; padding: 12px 14px; display: flex; flex-direction: column; gap: 9px; }
.ac-check { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: #344054; cursor: pointer; }
.ac-check input { margin: 0; accent-color: #155eef; }
.ac-check.off { color: #98a2b3; cursor: not-allowed; }
.ac-or { display: flex; align-items: center; gap: 10px; color: #475467; font-size: 13px; font-weight: 500; }
.ac-or::before, .ac-or::after { content: ''; flex: 1; height: 1px; background: #eaecf0; }
.ac-dnd-h { font-size: 13.5px; color: #344054; font-weight: 500; }
.ac-info { display: inline-flex; color: #667085; cursor: help; }
.ac-checks { display: flex; flex-direction: column; gap: 6px; }

.ac-section { border-top: 1px solid #eaecf0; padding-top: 14px; display: flex; flex-direction: column; gap: 14px; }
.ac-section-h { font-size: 14px; font-weight: 600; color: #344054; }

.ac-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 16px; border-top: 1px solid #eaecf0; }
.ac-foot-right { display: flex; gap: 8px; }
.ac-another { border: 0; background: none; padding: 0; font: inherit; font-size: 13.5px; color: #344054; cursor: pointer; }
.ac-another:disabled { color: #98a2b3; cursor: not-allowed; }
.ac-another:not(:disabled):hover { color: #155eef; }