/******* Do not edit this file *******
Woody Code Snippets CSS and JS
Saved: Jan 25 2026 | 23:20:59 */
/* =========================================================
   PELAGOS WIZARD UI (Elementor)
   Scope: #pelagosWizard (ID колонки/контейнера)
   ========================================================= */


/* =========================================================
   1) TOKENS / ПЕРЕМЕННЫЕ (цвета, радиусы, тени)
   ========================================================= */
#pelagosWizard{
  --pelagos-blue:#0b63ff;
  --tg:#2AABEE;
  --wa:#22c55e;

  --text:#0b1220;
  --muted:#6b7280;
  --stroke:#e5e7eb;

  --shadow: 0 16px 44px rgba(15,23,42,.10);
  --radius:20px;

  /* по умолчанию акцент TG, дальше JS может менять на WA */
  --accent: var(--tg);
}


/* =========================================================
   2) КАРТОЧКА ФОРМЫ + ВНУТРЕННИЕ ОТСТУПЫ
   (делаем одну “карту”, управляем вертикальными зазорами)
   ========================================================= */
#pelagosWizard form.elementor-form{
  background:#fff;
  border:1px solid var(--stroke);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
}

/* убираем стандартные пляски Elementor по отступам */
#pelagosWizard .elementor-form .elementor-field-group{
  margin:0;
}

/* одинаковые боковые паддинги для полей (кроме HTML блоков) */
#pelagosWizard .elementor-form .elementor-field-group:not(.elementor-field-type-html){
  padding:0 18px;
}

/* вертикальные интервалы между “полями”, чтобы не было каши */
#pelagosWizard .elementor-form .elementor-field-group:not(.elementor-field-type-html)
+ .elementor-field-group:not(.elementor-field-type-html){
  margin-top:12px;
}


/* =========================================================
   3) HEADER / HERO (pw-head, логотип, заголовок, подзаголовок)
   ========================================================= */
#pelagosWizard .pw-head{
  padding:18px 18px 10px;
  display:grid;
  gap:8px;
}

#pelagosWizard .pw-head-top{
  display:flex;
  gap:14px;
  align-items:flex-start;
}

#pelagosWizard img.pw-logo{
  width:56px;
  height:56px;
  padding:10px;
  border-radius:18px;
  background:linear-gradient(135deg, rgba(11,99,255,.10), rgba(42,171,238,.12));
  border:1px solid rgba(11,99,255,.18);
  display:block;
  object-fit:contain;
  flex:0 0 auto;
}

#pelagosWizard .pw-title{
  margin:0;
  font-size:18px;
  line-height:1.25;
  font-weight:800;
  letter-spacing:.2px;
  color:var(--text);
}

#pelagosWizard .pw-sub{
  margin:0;
  font-size:13px;
  line-height:1.35;
  color:var(--muted);
}


/* =========================================================
   4) PROGRESS (pw-progress, bar, step)
   ========================================================= */
#pelagosWizard .pw-progress{
  margin-top:8px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--stroke);
  background:#fff;
}

#pelagosWizard .pw-bar{
  height:8px;
  flex:1;
  border-radius:999px;
  background:#eef2ff;
  overflow:hidden;
  position:relative;
}

#pelagosWizard .pw-bar > i{
  position:absolute;
  inset:0;
  width:0%;
  background:linear-gradient(90deg, var(--accent), rgba(11,99,255,.70));
  border-radius:999px;
  transition:width .25s ease, background .25s ease;
}

#pelagosWizard .pw-step{
  font-size:12px;
  color:var(--muted);
  white-space:nowrap;
}


/* =========================================================
   5) SERVICE PILL (pw-service-pill)
   ========================================================= */
#pelagosWizard .pw-service-pill{
  margin:10px 18px 0;
  display:inline-flex;
  gap:8px;
  align-items:center;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid var(--stroke);
  background:#fff;
  font-size:12.5px;
  color:#111827;
  max-width:calc(100% - 36px);
}

#pelagosWizard .pw-service-pill .pw-dot{
  width:8px;
  height:8px;
  border-radius:999px;
  background:var(--pelagos-blue);
  flex:0 0 auto;
}

#pelagosWizard .pw-service-title{
  font-weight:800;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:min(560px, 70vw);
}


/* =========================================================
   6) ERROR BOX (pw-error)
   ========================================================= */
#pelagosWizard .pw-error{
  margin:12px 18px 0;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid #fecaca;
  background:#fff5f5;
  color:#991b1b;
  font-size:13px;
  line-height:1.35;
}


/* =========================================================
   7) LABELS + INPUTS (только реальные input/select/textarea)
   ВАЖНО: не трогаем .elementor-field как класс-обертку
   ========================================================= */
#pelagosWizard .elementor-field-label,
#pelagosWizard label{
  font-size:12px;
  color:var(--muted);
  margin-bottom:6px;
}

/* базовый вид полей */
#pelagosWizard input.elementor-field,
#pelagosWizard textarea.elementor-field,
#pelagosWizard select.elementor-field{
  border:1px solid var(--stroke);
  border-radius:14px;
  padding:13px 12px;
  font-size:15px;
  outline:none;
  background:#fff;
  transition:border .15s ease, box-shadow .15s ease;
  width:100%;
}

/* focus */
#pelagosWizard input.elementor-field:focus,
#pelagosWizard textarea.elementor-field:focus,
#pelagosWizard select.elementor-field:focus{
  border-color:color-mix(in srgb, var(--accent) 55%, #ffffff);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
}

/* disabled */
#pelagosWizard input.elementor-field:disabled,
#pelagosWizard textarea.elementor-field:disabled,
#pelagosWizard select.elementor-field:disabled{
  background:#f9fafb;
  color:#9ca3af;
}


/* =========================================================
   8) CHECKBOX "Дата уточняется/неизвестна"
   ========================================================= */
#pelagosWizard .elementor-field-type-checkbox .elementor-field-subgroup{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:6px;
}

#pelagosWizard .elementor-field-type-checkbox .elementor-field-option{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border:1px solid var(--stroke);
  border-radius:14px;
  background:#fff;
}

#pelagosWizard .elementor-field-type-checkbox input[type="checkbox"]{
  width:18px;
  height:18px;
}


/* =========================================================
   9) STEPPER (pw-stepper) - твой HTML блок с +/- и числом
   ========================================================= */
#pelagosWizard .pw-stepper{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px;
  border:1px solid var(--stroke);
  border-radius:14px;
  background:#fff;
}

#pelagosWizard .pw-stepper button{
  width:40px;
  height:40px;
  border-radius:14px;
  border:1px solid var(--stroke);
  background:#fff;
  cursor:pointer;
  font-size:18px;
  line-height:1;
}

#pelagosWizard .pw-stepper button:active{
  transform:translateY(1px);
}

#pelagosWizard .pw-stepper b{
  width:56px;
  text-align:center;
  font-size:16px;
  font-weight:900;
  color:var(--text);
}


/* =========================================================
   10) STEP 1 ACTIONS (pw-actions + Далее)
   ========================================================= */
#pelagosWizard .pw-actions{
  padding:12px 18px 18px;
  display:flex;
  justify-content:flex-end;
  align-items:center;
}

#pelagosWizard .pw-btn{
  border:0;
  border-radius:16px;
  padding:13px 16px;
  font-size:15px;
  font-weight:900;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

#pelagosWizard .pw-next{
  background:linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 75%, #000000));
  color:#fff;
  box-shadow:0 14px 34px color-mix(in srgb, var(--accent) 25%, transparent);
  min-width:160px;
}

#pelagosWizard .pw-btn:active{
  transform:translateY(1px);
}

/* =========================================================
   11) CHANNELS (Step 2) — TG / WhatsApp всегда цветные
   ========================================================= */

#pelagosWizard{
  --tg:#2AABEE;
  --wa:#22c55e;
}

/* сетка */
#pelagosWizard .pw-channels{
  margin:12px 18px 0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

/* базовая карточка */
#pelagosWizard .pw-channel{
  border-radius:18px;
  padding:14px;
  cursor:pointer;
  display:flex;
  gap:12px;
  align-items:center;
  min-height:74px;
  text-align:left;
  color:#fff;
  border:0;
}

/* TELEGRAM */
#pelagosWizard .pw-channel.pw-tg{
  background:linear-gradient(180deg, var(--tg), color-mix(in srgb, var(--tg) 75%, #000));
  box-shadow:0 14px 34px color-mix(in srgb, var(--tg) 30%, transparent);
}

/* WHATSAPP */
#pelagosWizard .pw-channel.pw-wa{
  background:linear-gradient(180deg, var(--wa), color-mix(in srgb, var(--wa) 75%, #000));
  box-shadow:0 14px 34px color-mix(in srgb, var(--wa) 30%, transparent);
}

/* hover */
#pelagosWizard .pw-channel:hover{
  filter:brightness(1.04);
}

/* иконка в кружке */
#pelagosWizard .pw-channel .pw-ic{
  width:44px;
  height:44px;
  border-radius:16px;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.35);
  color:#fff;
  flex:0 0 auto;
}

/* текст */
#pelagosWizard .pw-channel .pw-meta{
  display:grid;
  gap:2px;
}

#pelagosWizard .pw-channel .pw-meta b{
  font-weight:900;
  color:#fff;
}

#pelagosWizard .pw-channel .pw-meta small{
  font-size:12px;
  color:rgba(255,255,255,.85);
}

/* мобильная версия */
@media (max-width:760px){
  #pelagosWizard .pw-channels{
    grid-template-columns:1fr;
  }
}


/* =========================================================
   12) STEP 3 TOP ROW (Канал + Изменить)
   ========================================================= */
#pelagosWizard .pw-row{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}

#pelagosWizard .pw-top3{
  padding:0 18px;
  margin-top:12px;
}

#pelagosWizard .pw-picked{
  font-size:13px;
  color:var(--muted);
}

#pelagosWizard .pw-picked b{ color:var(--text); }

#pelagosWizard .pw-link{
  border:0;
  background:transparent;
  font-size:13px;
  color:var(--accent);
  font-weight:800;
  cursor:pointer;
  padding:8px 10px;
  border-radius:12px;
}

#pelagosWizard .pw-link:active{
  transform:translateY(1px);
}


/* =========================================================
   13) TRUST (щит)
   ========================================================= */
#pelagosWizard .pw-trust{
  margin:12px 18px 0;
  border:1px solid var(--stroke);
  border-radius:16px;
  background:#fff;
  padding:12px 12px;
  display:flex;
  gap:10px;
  align-items:flex-start;
}

#pelagosWizard .pw-trust-ic{
  width:18px;
  height:18px;
  max-width:18px;
  margin-top:1px;
  display:block;
}

#pelagosWizard .pw-trust-txt{
  font-size:12.5px;
  color:#374151;
  line-height:1.35;
}


/* =========================================================
   14) СКРЫТЬ реальное поле Канал (pel_channel)
   ========================================================= */
#pelagosWizard .elementor-field-group-pel_channel{
  display:none !important;
}


/* =========================================================
   15) SUBMIT BUTTON (Elementor отправка)
   ========================================================= */
#pelagosWizard .elementor-field-type-submit{
  padding:12px 18px 18px;
}

#pelagosWizard .elementor-button{
  width:100%;
  border-radius:16px;
  padding:14px 16px;
  font-size:15px;
  font-weight:900;
  border:0;
  background:linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 75%, #000000));
  box-shadow:0 14px 34px color-mix(in srgb, var(--accent) 25%, transparent);
}

#pelagosWizard .elementor-button:active{
  transform:translateY(1px);
}

/* чтобы не всплывал “Your submission was successful.” */
#pelagosWizard .elementor-message{
  margin:12px 18px 0;
  border-radius:14px;
}
#pelagosWizard .elementor-message-success{
  display:none; /* если хочешь вообще скрыть */
}


/* =========================================================
   16) RESPONSIVE (мобилка)
   ========================================================= */
@media (max-width:760px){
  #pelagosWizard .pw-channels{ grid-template-columns:1fr; }
  #pelagosWizard .elementor-form .elementor-field-group:not(.elementor-field-type-html){ padding:0 16px; }
  #pelagosWizard .pw-head{ padding:16px 16px 10px; }
  #pelagosWizard .pw-service-pill{ margin:10px 16px 0; max-width:calc(100% - 32px); }
  #pelagosWizard .pw-hint{ margin:10px 16px 0; }
  #pelagosWizard .pw-trust{ margin:12px 16px 0; }
  #pelagosWizard .pw-actions{ padding:12px 16px 16px; }
  #pelagosWizard .elementor-field-type-submit{ padding:12px 16px 16px; }
}


/* =========================================================
   17) SAFETY (Elementor иногда прячет форму)
   ========================================================= */
#pelagosWizard form.elementor-form{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
}
/*==========================далее кнопка==========
/* Кнопка "Далее" на всю ширину */
#pelagosWizard .pw-actions{
  justify-content:stretch;
}

#pelagosWizard .pw-actions .pw-btn,
#pelagosWizard .pw-actions .pw-next{
  width:100%;
}

/* =========================================================
   STEPPER: подпись + синие кнопки +/- как в демо
   ========================================================= */
#pelagosWizard .pw-stepper-block{ width:100%; }

#pelagosWizard .pw-stepper-label{
  font-size:12px;
  letter-spacing:.14em;
  font-weight:800;
  color:var(--muted);
  margin:0 0 8px;
}

#pelagosWizard .pw-stepper{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border:1px solid var(--stroke);
  border-radius:14px;
  background:#fff;
}

#pelagosWizard .pw-stepper button{
  width:54px !important;
  height:46px !important;
  border-radius:14px;
  border:1px solid color-mix(in srgb, var(--pelagos-blue) 35%, #ffffff) !important;
  background:linear-gradient(180deg, var(--pelagos-blue), color-mix(in srgb, var(--pelagos-blue) 75%, #000000)) !important;
  color:#fff !important;
  font-size:22px;
  line-height:1;
  font-weight:900;
  cursor:pointer;
  display:grid;
  place-items:center;
}

#pelagosWizard .pw-stepper button:active{ transform:translateY(1px); }

#pelagosWizard .pw-stepper b{
  flex:1;
  text-align:center;
  font-size:18px;
  font-weight:900;
  color:var(--text);
}

/* =========================================================
   DATE: иконка календаря в поле даты
   ========================================================= */
#pelagosWizard .elementor-field-group-pel_date .elementor-field{
  padding-right:46px !important;
  background-repeat:no-repeat !important;
  background-position:right 14px center !important;
  background-size:18px 18px !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") !important;
}

/*=====================прогресс бар
/* ---------- HEADER LAYOUT (DESKTOP) ---------- */
.pw-head-top{
  display:flex;
  align-items:center;
  gap:16px;
}

.pw-col-logo{ flex: 0 0 auto; }
.pw-col-text{ flex: 1 1 auto; min-width: 0; }
.pw-col-service{ flex: 0 0 auto; }

.pw-title{ font-weight: 800; }
.pw-sub{ margin-top: 4px; }

/* ---------- PROGRESS BAR (ONLY LINE) ---------- */
.pw-progress{
  margin-top: 14px;
}

.pw-bar{
  width: 100%;
  position: relative;
  height: 10px;              /* как нормальная “линия”, не узко */
  border-radius: 999px;
  background: #eef3fb;
  overflow: hidden;
}

.pw-fill{
  position: absolute;
  inset: 0;
  width: 33.333%;
  background: linear-gradient(90deg,#2f80ed,#56a7ff);
  transition: width .25s ease;
}

.pw-cut{
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(0,0,0,.12);
  z-index: 2;
}
.pw-cut.c1{ left: 33.333%; }
.pw-cut.c2{ left: 66.666%; }

/* ---------- ERROR BLOCK (BELOW, NOT IN PROGRESS) ---------- */
.pw-error{
  margin-top: 12px;
}

/* ---------- MOBILE ADAPTIVE ---------- */
@media (max-width: 767px){
  .pw-head-top{
    display:grid;
    grid-template-columns: 52px 1fr;   /* лого | заголовок */
    grid-template-areas:
      "logo title"
      "sub sub"
      "service service";
    align-items:center;
    gap:10px 12px;
  }

  .pw-col-logo{ grid-area: logo; }
  .pw-col-text{ grid-area: title; }
  .pw-col-service{ grid-area: service; }

  /* чтобы подзаголовок ушёл отдельной строкой */
  .pw-col-text .pw-sub{
    grid-column: 1 / -1;
    margin-top: 6px;
  }

  /* на мобилке логично уменьшить “пилюлю услуги” и дать ей 100% */
  .pw-service-pill{
    width: 100%;
    justify-content: center;
  }

  /* прогресс чуть выше, но не жирный */
  .pw-bar{ height: 10px; }

  /* ошибка тоже на всю ширину */
  .pw-error{ width: 100%; }
}

@media (max-width: 767px){

  /* 1) шапка становится колонкой */
  .pw-head-top{
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }

  /* 2) все колонки на 100% */
  .pw-col{
    width: 100% !important;
  }

  /* 3) лого + заголовок в одну строку (аккуратно) */
  .pw-col-logo{
    width: auto !important;
  }

  /* 4) подзаголовок не “в столбик” из-за узкой ширины */
  .pw-col-text{
    width: 100% !important;
  }
  .pw-sub{
    white-space: normal !important;
    line-height: 1.35 !important;
  }

  /* 5) услуга точно уходит на новую строку и растягивается */
  .pw-col-service{
    width: 100% !important;
  }
  .pw-service-pill{
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    justify-content: flex-start !important;
  }

  /* 6) чтобы "Услуга:" не слипалось с названием */
  .pw-service-title{
    white-space: normal !important;
  }
}

@media (max-width: 767px){

  /* шапка как сетка */
  .pw-head-top{
    display: grid !important;
    grid-template-columns: 56px 1fr;
    grid-template-areas:
      "logo title"
      "sub sub"
      "service service";
    column-gap: 12px;
    row-gap: 8px;
    align-items: center;
  }

  /* зоны */
  .pw-col-logo{
    grid-area: logo;
  }

  .pw-col-text{
    grid-area: title;
  }

  .pw-col-text .pw-title{
    font-size: 20px;
    line-height: 1.2;
    margin: 0;
  }

  .pw-col-text .pw-sub{
    grid-area: sub;
    margin: 0;
    font-size: 14px;
    line-height: 1.4;
    white-space: normal;
  }

  .pw-col-service{
    grid-area: service;
    width: 100%;
  }

  /* плашка услуги на всю ширину */
  .pw-service-pill{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 8px;
  }

  .pw-service-title{
    white-space: normal;
  }
}
/*щит================*/

#pelagosWizard .pw-trust{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;

  padding:14px 16px !important;
  border-radius:16px !important;

  background: linear-gradient(180deg, rgba(47,128,237,.10), rgba(47,128,237,.04)) !important;
  border:1px solid rgba(47,128,237,.18) !important;
  box-shadow:0 10px 26px rgba(15,23,42,.06) !important;

  position:relative !important;
  overflow:hidden !important;
}

#pelagosWizard .pw-trust:before{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  top:10px !important;
  bottom:10px !important;
  width:4px !important;
  border-radius:8px !important;
  background: rgba(47,128,237,.75) !important;
}

#pelagosWizard .pw-trust-ic{
  width:22px !important;
  height:22px !important;
  flex:0 0 auto !important;
  opacity:.95 !important;
}

#pelagosWizard .pw-trust-txt{
  font-size:16px !important;
  line-height:1.45 !important;
  font-weight:600 !important;
  color:#1f2a44 !important;
}

@media (max-width: 767px){
  #pelagosWizard .pw-trust{
    padding:12px 14px !important;
    border-radius:14px !important;
  }
  #pelagosWizard .pw-trust-txt{
    font-size:15px !important;
    line-height:1.4 !important;
  }
}
/*плюс минус*/

#pelagosWizard .pw-stepper{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

#pelagosWizard .pw-minus,
#pelagosWizard .pw-plus{
  width:88px;
  height:58px;
  border-radius:16px;

  border:1px solid rgba(15,23,42,.12);
  background: linear-gradient(180deg, rgba(47,128,237,1), rgba(23,98,214,1));
  color:#fff;

  font-size:30px;
  font-weight:800;
  line-height:1;

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

  box-shadow:0 10px 20px rgba(47,128,237,.22);
  cursor:pointer;
}

#pelagosWizard .pw-minus:active,
#pelagosWizard .pw-plus:active{
  transform: translateY(1px);
}

#pelagosWizard .pw-persons-value{
  min-width:48px;
  text-align:center;
  font-size:28px;
  font-weight:800;
  color:#0f172a;
  }
}