/* ── Динамические формы конструктора (.cf-form) ───────────────────────────── */
.cf-form { display: flex; flex-direction: column; gap: 16px; font-family: pfdm, sans-serif; }
.cf-title { font-size: 20px; font-weight: 700; color: #1c2b2b; margin-bottom: 2px; }
.cf-field { display: flex; flex-direction: column; gap: 6px; }
.cf-label { font-size: 13px; color: #6b7a7a; }
.cf-req { color: #e5484d; font-style: normal; }
.cf-control { position: relative; display: block; }

.cf-input {
  width: 100%; box-sizing: border-box; padding: 12px 14px;
  border: 1px solid #d6e6e6; border-radius: 12px;
  font-size: 15px; font-family: inherit; color: #1c2b2b; background: #fff;
  outline: none; transition: border-color .15s, box-shadow .15s;
}
.cf-input::placeholder { color: #9aa7a7; }
.cf-input:focus { border-color: #149394; box-shadow: 0 0 0 3px rgba(20,147,148,.12); }
textarea.cf-input { min-height: 104px; resize: vertical; line-height: 1.5; }

/* иконка слева (по центру поля) */
.cf-field-icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); display: inline-flex; color: #9aa7a7; pointer-events: none; }
.cf-field-icon--top { top: 14px; transform: none; }   /* для textarea — иконка вверху */
.cf-input-icon { padding-left: 42px; }
/* иконка внутри кастомного select-триггера */
.fdrop-ico { display: inline-flex; align-items: center; margin-right: 8px; color: #9aa7a7; }
.fdrop-ico svg { width: 18px; height: 18px; }

/* подсказка и ошибка */
.cf-help { font-size: 12px; color: #8a9a9a; }
.cf-error { display: none; font-size: 12.5px; color: #e5484d; }
.cf-field.cf-has-error .cf-error { display: block; }
.cf-field.cf-has-error .cf-input,
.cf-field.cf-has-error .fdrop-trigger,
.cf-field.cf-has-error .cf-file { border-color: #e5484d; }

/* кнопка отправки */
.cf-submit {
  align-self: flex-start; margin-top: 4px; padding: 13px 30px;
  border: 0; border-radius: 12px; cursor: pointer;
  background: #149394; color: #fff; font-size: 15px; font-weight: 600; font-family: pfdb, inherit;
  transition: background .15s, opacity .15s;
}
.cf-submit:hover { background: #0f7373; }
.cf-submit:disabled { opacity: .6; cursor: default; }
.cf-turnstile { margin-top: 2px; }

/* ── Кастомный file + drag'n'drop ─────────────────────────────────────────── */
.cf-file { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; cursor: pointer;
  border: 1.5px dashed #cfe0e0; border-radius: 12px; padding: 14px 16px; background: #fafdfd; transition: .15s; }
.cf-file:hover { border-color: #149394; background: #f3fbfb; }
.cf-file.is-dragging { border-color: #149394; background: #e6f5f5; box-shadow: inset 0 0 0 2px rgba(20,147,148,.35); }
.cf-file-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.cf-file-btn { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  background: #e8f5f5; color: #149394; font-size: 14px; font-weight: 600; border-radius: 9px; padding: 8px 13px; transition: .15s; }
.cf-file:hover .cf-file-btn { background: #d6eeed; }
.cf-file-name { font-size: 13px; color: #8a9a9a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.cf-file-size { font-size: 12px; color: #9aa7a7; background: #eef4f4; border-radius: 6px; padding: 2px 8px; white-space: nowrap; }
.cf-file-remove { margin-left: auto; flex-shrink: 0; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: 7px; background: #f6dada; color: #c4393f; font-size: 13px; cursor: pointer; transition: .15s; }
.cf-file-remove:hover { background: #efc3c5; }
.cf-file.cf-has-file { border-style: solid; border-color: #149394; background: #f0faf9; }
.cf-file.cf-has-file .cf-file-name { color: #1c2b2b; font-weight: 600; }

/* ── Кастомный выпадающий список .fdrop (как на news) ──────────────────────── */
.cf-fdrop { width: 100%; }
.fdrop { position: relative; }
.fdrop-trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
  font-family: pfdm, inherit; font-size: 15px; color: #1c2b2b; background: #fff;
  border: 1px solid #d6e6e6; border-radius: 12px; padding: 12px 14px; cursor: pointer;
  text-align: left; transition: .15s;
}
.fdrop-trigger:hover { border-color: #149394; }
.fdrop-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-fdrop .fdrop-label[data-placeholder]:not(.has-value) { color: #9aa7a7; }
.fdrop-arrow {
  flex-shrink: 0; width: 8px; height: 8px;
  border-right: 2px solid #149394; border-bottom: 2px solid #149394;
  transform: rotate(45deg) translateY(-2px); transition: transform .18s; opacity: .7;
}
.fdrop.open .fdrop-arrow { transform: rotate(-135deg); opacity: 1; }
.fdrop-menu {
  position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; right: 0;
  max-height: 240px; overflow-y: auto;
  background: #fff; border: 1px solid #e0ecec; border-radius: 12px;
  box-shadow: 0 12px 34px rgba(20,60,60,.16); padding: 6px;
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: .16s;
}
.fdrop.open .fdrop-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.fdrop-opt {
  display: block; width: 100%; text-align: left; font-family: pfdm, inherit; font-size: 14px;
  color: #34504f; background: none; border: none; border-radius: 8px; padding: 9px 12px; cursor: pointer; transition: .12s;
}
.fdrop-opt:hover { background: #eef7f7; }
.fdrop-opt.is-sel { background: #149394; color: #fff; }

/* ── Окно «Есть вопрос?» (#new_user): форма помещается ─────────────────────── */
#new_user .cf-form { gap: 13px; }
/* дизайн-заголовок окна уже есть → скрываем дублирующий заголовок формы */
#new_user .cf-title { display: none; }

/* ── Поле-галочка (согласие) с HTML-меткой ── */
.cf-field-checkbox { gap: 4px; }
.cf-checkbox { display: flex; align-items: flex-start; gap: 11px; cursor: pointer; }
.cf-checkbox-input {
  appearance: none; -webkit-appearance: none; flex-shrink: 0; width: 20px; height: 20px; margin-top: 1px;
  border: 2px solid #cfe0e0; border-radius: 6px; background: #fff; cursor: pointer; position: relative;
  transition: background .15s, border-color .15s;
}
.cf-checkbox-input:hover { border-color: #149394; }
.cf-checkbox-input:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(20,147,148,.18); }
.cf-checkbox-input:checked { background: #149394; border-color: #149394; }
.cf-checkbox-input:checked::after {
  content: ''; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px;
  border: solid #fff; border-width: 0 2.4px 2.4px 0; transform: rotate(45deg);
}
.cf-checkbox-text { font-family: pfdm; font-size: 13px; line-height: 1.5; color: #5a6a6a; }
.cf-checkbox-text p { margin: 0; display: inline; }
.cf-checkbox-text a { color: #149394; text-decoration: underline; }
.cf-checkbox-text a:hover { color: #0f7373; }
.cf-field-checkbox.cf-has-error .cf-checkbox-input { border-color: #e5484d; }
/* Согласие на ПДн в статичных формах (вне конструктора) */
.cf-consent { display: flex; align-items: flex-start; gap: 10px; margin: 4px 0 14px; font-family: pfdm; font-size: 13px; line-height: 1.5; color: #5a6a6a; cursor: pointer; text-align: left; }
.cf-consent input { margin-top: 2px; width: 17px; height: 17px; flex: 0 0 auto; accent-color: #149394; cursor: pointer; }
.cf-consent a { color: #149394; text-decoration: underline; }
.cf-consent a:hover { color: #0f7373; }
/* Скрытое поле — не занимает места */
.cf-hidden { display: none !important; }

/* ── Красивое диалоговое окно отправки формы (cfNotify) ─────────────────────── */
.cf-notify-overlay {
  position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center;
  padding: 20px; background: rgba(16,40,40,.42); opacity: 0; transition: opacity .2s ease; backdrop-filter: blur(2px);
}
.cf-notify-overlay.cf-notify--in { opacity: 1; }
.cf-notify-overlay.cf-notify--closing { opacity: 0; }
.cf-notify {
  width: 100%; max-width: 380px; background: #fff; border-radius: 18px; padding: 30px 28px 26px;
  text-align: center; box-shadow: 0 24px 60px rgba(12,40,40,.28); font-family: pfdm, sans-serif;
  transform: translateY(14px) scale(.96); transition: transform .22s cubic-bezier(.2,.8,.3,1);
}
.cf-notify-overlay.cf-notify--in .cf-notify { transform: translateY(0) scale(1); }
.cf-notify-icon {
  width: 62px; height: 62px; margin: 0 auto 16px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 32px; line-height: 1; font-weight: 700;
}
.cf-notify--success .cf-notify-icon { background: #e3f6f1; color: #149394; }
.cf-notify--error .cf-notify-icon { background: #fbe6e7; color: #e5484d; }
.cf-notify-title { font-family: pfdb, sans-serif; font-size: 21px; color: #1c2b2b; margin-bottom: 8px; }
.cf-notify-msg { font-size: 15px; line-height: 1.5; color: #5a6a6a; margin-bottom: 22px; }
.cf-notify-btn {
  min-width: 140px; padding: 12px 26px; border: 0; border-radius: 12px; cursor: pointer;
  background: #149394; color: #fff; font-size: 15px; font-weight: 600; font-family: pfdb, inherit; transition: background .15s;
}
.cf-notify--error .cf-notify-btn { background: #e5484d; }
.cf-notify-btn:hover { filter: brightness(.94); }

/* ── Кастомная кнопка-блок (шорткод [button …]) ───────────────────────────── */
.rte-btn {
  display: inline-block; margin: 6px 0; padding: 12px 26px;
  border: 0; border-radius: 12px; cursor: pointer;
  background: #149394; color: #fff !important; text-decoration: none;
  font-family: pfdb, inherit; font-size: 15px; font-weight: 600; line-height: 1.2;
  transition: background .15s, transform .05s;
}
.rte-btn:hover { background: #0f7373; }
.rte-btn:active { transform: translateY(1px); }

/* ── Модальный диалог с формой (кнопка type=form) ─────────────────────────── */
.form-dialog { position: fixed; inset: 0; z-index: 10000; display: none; }
.form-dialog.is-open { display: block; }
.form-dialog__overlay { position: absolute; inset: 0; background: rgba(12,43,43,.55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.form-dialog__box {
  position: relative; z-index: 1; width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 48px); overflow: auto;
  margin: 24px auto; top: 50%; transform: translateY(-50%);
  background: #fff; border-radius: 16px; padding: 28px 26px;
  box-shadow: 0 24px 60px rgba(12,43,43,.28);
}
.form-dialog__close {
  position: absolute; top: 10px; right: 12px; width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent; color: #6b7a7a; font-size: 26px; line-height: 1; cursor: pointer; border-radius: 8px;
}
.form-dialog__close:hover { background: #f0f4f4; color: #1c2b2b; }
@media (max-width: 600px) { .form-dialog__box { padding: 22px 16px; } }