/*
CTC Separate Stylesheet
Updated: 2025-12-18 23:32:18
*/


/* ==========================================================================
   JustPro — лид-форма (Fluent Forms #1)
   ========================================================================== */

:root {
  --jp-error: #D93025;
  --jp-success: #1E8E3E;
}

.frm-fluent-form.fluent_form_1 > fieldset {
  display: flex;
  flex-wrap: wrap;
  column-gap: 48px;
}

.frm-fluent-form.fluent_form_1 > fieldset > .ff-el-group {
  flex: 0 0 100%;
  min-width: 0;
}

.frm-fluent-form.fluent_form_1 > fieldset > .ff-el-group.jp-half {
  flex: 0 0 calc(50% - 24px);
}

@media (max-width: 689.98px) {
  .frm-fluent-form.fluent_form_1 > fieldset > .ff-el-group.jp-half {
    flex: 0 0 100%;
  }
}

.fluent_form_1 .ff-el-input--label label {
  font-family: var(--theme-font-family);
  font-size: 20px;
  font-weight: 400;
  line-height: var(--theme-line-height);
  color: var(--theme-text-color);
  margin-bottom: 10px;
}

.fluent_form_1 .ff-el-is-required > span {
  color: var(--theme-palette-color-2);
  font-weight: 400;
}

.fluent_form_1 .ff-el-form-control {
  padding-block: 10px;
  transition: border-bottom-color 0.15s ease;
}

.fluent_form_1 input[name="phone"] {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.fluent_form_1 .ff-el-is-error .ff-el-form-control,
.fluent_form_1 .ff-el-is-error .ff-el-form-control:focus,
.fluent_form_1 .ff-el-is-error .ff-el-form-control:hover {
  border-bottom-color: var(--jp-error) !important;
  border-bottom-width: 2px !important;
  box-shadow: none !important;
}

.fluent_form_1 .text-danger,
.fluent_form_1 .error,
.ff-errors-in-stack,
[id^="fluentform_"][id$="_errors"] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.frm-fluent-form.fluent_form_1 .ff-el-group button.ff-btn-submit {
  min-height: var(--theme-button-min-height);
  padding: var(--theme-button-padding);
  border-radius: var(--theme-button-border-radius);
  border: var(--theme-button-border);
  font-family: var(--theme-button-font-family, var(--theme-font-family));
  font-size: var(--wp--preset--font-size--medium);
  font-weight: var(--theme-button-font-weight);
  line-height: 1.4;
  color: var(--theme-button-text-initial-color);
  background-color: var(--theme-button-background-initial-color);
  box-shadow: var(--wp--preset--shadow--crisp);
  transition: all 0.12s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

.frm-fluent-form.fluent_form_1 .ff-el-group button.ff-btn-submit:hover {
  color: var(--theme-button-text-hover-color);
  background-color: var(--theme-button-background-hover-color);
}

.fluent_form_1.ff_submitting .ff-el-group button.ff-btn-submit {
  pointer-events: none;
  opacity: 0.65;
  position: relative;
  color: transparent;
}

.fluent_form_1.ff_submitting .ff-el-group button.ff-btn-submit::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: jp-spin 0.6s linear infinite;
}

@keyframes jp-spin {
  to { transform: rotate(360deg); }
}

#fluentform_1_success {
  background: var(--theme-palette-color-6);
  border: 1px solid var(--theme-palette-color-3);
  border-radius: 10px;
  box-shadow: var(--wp--preset--shadow--sharp);
  padding: var(--wp--preset--spacing--60);
  text-align: center;
  animation: jp-fade-in 0.3s ease;
}

#fluentform_1_success::before {
  content: "";
  display: block;
  width: 48px;
  height: 48px;
  margin: 0 auto 16px;
  background: var(--jp-success);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1.4 14.6-4.2-4.2 1.4-1.4 2.8 2.8 6-6 1.4 1.4-7.4 7.4z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1.4 14.6-4.2-4.2 1.4-1.4 2.8 2.8 6-6 1.4 1.4-7.4 7.4z'/%3E%3C/svg%3E") center / contain no-repeat;
}

#fluentform_1_success p {
  margin: 0;
  font-size: 17px;
  line-height: 1.5;
}

#fluentform_1_success p + p {
  margin-top: 8px;
  opacity: 0.85;
}

#fluentform_1_success strong {
  font-size: 21px;
  font-weight: 600;
}

@keyframes jp-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .fluent_form_1.ff_submitting .ff-el-group button.ff-btn-submit::after,
  #fluentform_1_success {
    animation: none;
  }

  .fluent_form_1 .ff-el-form-control,
  .frm-fluent-form.fluent_form_1 .ff-el-group button.ff-btn-submit {
    transition: none;
  }
}


/* ==========================================================================
   JustPro — плавающая кнопка контактов (FAB, правый нижний угол)
   Раскрытие на чистом CSS (checkbox hack). Idle-напоминание: первое — через 5с
   после загрузки, далее повтор каждые 15с.
   Анимации переведены на transform/opacity (GPU-композитинг, плавно в Firefox).
   ========================================================================== */

.jp-fab {
  position: fixed;
  right: 20px;
  left: auto;
  bottom: 20px;
  z-index: 9990;                 /* ниже модалок/куки-баннера, выше контента */
  width: 56px;
  height: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Скрытый чекбокс — управляет раскрытием */
.jp-fab__toggle {
  position: absolute;
  opacity: 0;
  width: 56px;
  height: 56px;
  margin: 0;
  cursor: pointer;
  z-index: 2;
}

/* --- Главная кнопка --- */
.jp-fab__main {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--theme-palette-color-2);   /* #E0312B */
  color: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  line-height: 0;
  pointer-events: none;          /* клики ловит чекбокс сверху */
  transition: transform 0.25s ease;
  transform: translateZ(0);      /* свой слой на GPU */
}

.jp-fab__main svg { display: block; width: 30px; height: 30px; }
.jp-fab__icon-close { display: none; }

/* nudge качает иконку, а не кнопку → transform кнопки свободен под ховер */
.jp-fab__icon-open {
  display: inline-flex;          /* transform на inline не применяется */
  animation: jp-fab-nudge 15s ease-in-out 5s infinite;
}

/* Пульс-волна: слой под кнопкой (transform/opacity вместо box-shadow) */
.jp-fab__main::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--theme-palette-color-2);
  z-index: -1;
  opacity: 0;
  animation: jp-fab-ring 5s ease-out 5s infinite; 
  will-change: transform, opacity;
}

/* Открытое состояние: крестик, поворот, стоп idle-анимаций */
.jp-fab__toggle:checked ~ .jp-fab__main {
  transform: rotate(90deg);
}

.jp-fab__toggle:checked ~ .jp-fab__main::before { animation: none; }
.jp-fab__toggle:checked ~ .jp-fab__main .jp-fab__icon-open  { display: none; }
.jp-fab__toggle:checked ~ .jp-fab__main .jp-fab__icon-close { display: block; }

/* Ховер: подъём + увеличение, без смены цвета (только в закрытом состоянии) */
.jp-fab:hover .jp-fab__main {
  transform: translateY(-2px) scale(1.05);
  color: #fff;
}

.jp-fab:hover .jp-fab__main::before { animation: none; }

/* В раскрытом состоянии кнопка не увеличивается от ховера — только поворот */
.jp-fab:hover .jp-fab__toggle:checked ~ .jp-fab__main {
  transform: rotate(90deg);
}

/* --- Список иконок --- */
.jp-fab__list {
  position: absolute;
  left: 50%;
  right: auto;
  transform: translateX(-50%);   /* центр списка = центр FAB */
  bottom: 68px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.jp-fab__list li {
  display: flex;
  line-height: 0;
}

/* --- Иконки-пункты --- */
.jp-fab__item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  color: #fff;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22);
  line-height: 0;
  opacity: 0;
  transform: translateY(12px) scale(0.8);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.jp-fab__item svg {
  display: block;
  width: 26px;
  height: 26px;
  pointer-events: none;          /* клик/ховер ловит кружок, не иконка */
}

/* Раскрытие */
.jp-fab__toggle:checked ~ .jp-fab__list .jp-fab__item {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* Ступенчатое появление снизу вверх */
.jp-fab__toggle:checked ~ .jp-fab__list li:nth-child(1) .jp-fab__item { transition-delay: 0.03s; }
.jp-fab__toggle:checked ~ .jp-fab__list li:nth-child(2) .jp-fab__item { transition-delay: 0.06s; }
.jp-fab__toggle:checked ~ .jp-fab__list li:nth-child(3) .jp-fab__item { transition-delay: 0.09s; }
.jp-fab__toggle:checked ~ .jp-fab__list li:nth-child(4) .jp-fab__item { transition-delay: 0.12s; }

/* Ховер пункта: двигается кружок, цвет не меняется */
.jp-fab__toggle:checked ~ .jp-fab__list .jp-fab__item:hover {
  transform: translateY(0) scale(1.12);
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.3);
  color: #fff;
}

/* --- Бренд-цвета иконок --- */
.jp-fab__item--telegram  { background: #229ED9; }
.jp-fab__item--messenger { background: #0084FF; }
.jp-fab__item--phone     { background: #2CA34A; }
.jp-fab__item--email     { background: #5A5F66; }
.jp-fab__item--telegram svg { transform: translate(-2px, 1.5px); }

/* --- Анимации --- */
@keyframes jp-fab-nudge {
  0%    { transform: rotate(0deg); }
  1.5%  { transform: rotate(-7deg); }
  3%    { transform: rotate(6deg); }
  4.5%  { transform: rotate(-4deg); }
  6%    { transform: rotate(2deg); }
  7.5%  { transform: rotate(-1deg); }
  9%    { transform: rotate(0deg); }
  100%  { transform: rotate(0deg); }
}

/* scale(1.64): радиус 28px → 46px, эквивалент старому spread 18px */
@keyframes jp-fab-ring {
  0%   { transform: scale(1);    opacity: .45; }
  60%  { transform: scale(1.64); opacity: 0;   }
  100% { transform: scale(1.64); opacity: 0;   }
}

@media (prefers-reduced-motion: reduce) {
  .jp-fab__main::before,
  .jp-fab__icon-open,
  .jp-fab__item { animation: none; transition: opacity 0.2s ease; }
}