/* =========================================================
   forminator-steps-clean.css
   Universal, conflict-free steps bar for Forminator multi-step forms

   Works with inline variables on .forminator-pagination-steps:
   --fm-steps-count (int) and --fm-progress (0..1)

   Desktop: labels ON
   Mobile: labels OFF
   ========================================================= */

/* Scope to Forminator forms only */
.forminator-custom-form .forminator-pagination-steps{
  /* fallback defaults (usually overwritten inline) */
  --fm-steps-count: 5;
  --fm-progress: 0;

  /* sizing */
  --fm-dot: 22px;
  --fm-dot-b: 2px;
  --fm-bar-h: 2px;
  --fm-gap-x: 6px;

  /* colors */
  --fm-active: #2a7bd6;
  --fm-bar: rgba(0,0,0,.28);
  --fm-dot-bg: #fff;
  --fm-dot-border: rgba(0,0,0,.35);
  --fm-dot-text: rgba(0,0,0,.65);
  --fm-label: rgba(0,0,0,.45);

  /* label */
  --fm-label-size: 12px;
  --fm-label-weight: 600;
  --fm-label-lh: 1.15;
  --fm-label-gap: 8px;

  /* layout */
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;

  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;

  margin: 14px 0 18px !important;
  padding: 0 !important;

  counter-reset: fmstep;

  /* bar should start/end at centers of first/last dot */
  --fm-inset: calc(100% / (var(--fm-steps-count) * 2));
}

/* responsive */
@media (max-width: 640px){
  .forminator-custom-form .forminator-pagination-steps{
    --fm-dot: 18px;
    --fm-label-size: 11px;
    --fm-label-gap: 6px;
  }
}

/* remove separators */
.forminator-custom-form .forminator-pagination-steps .forminator-break{
  display: none !important;
}

/* base bar */
.forminator-custom-form .forminator-pagination-steps::before{
  content: "";
  position: absolute;
  left: var(--fm-inset);
  right: var(--fm-inset);
  top: calc(var(--fm-dot) / 2);
  transform: translateY(-50%);
  height: var(--fm-bar-h);
  background: var(--fm-bar);
  border-radius: 999px;
  pointer-events: none;
}

/* progress bar */
.forminator-custom-form .forminator-pagination-steps::after{
  content: "";
  position: absolute;
  left: var(--fm-inset);
  right: var(--fm-inset);
  top: calc(var(--fm-dot) / 2);
  transform: translateY(-50%) scaleX(var(--fm-progress));
  transform-origin: left center;
  height: var(--fm-bar-h);
  background: var(--fm-active);
  border-radius: 999px;
  pointer-events: none;
}

/* each step: equal width so dots are centered perfectly */
.forminator-custom-form .forminator-pagination-steps .forminator-step{
  counter-increment: fmstep;

  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;

  margin: 0 !important;
  padding: 0 var(--fm-gap-x) !important;

  flex: 1 1 0 !important;
  width: 0 !important;
  min-width: 0 !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: var(--fm-label-gap) !important;

  /* prevent font metrics from affecting geometry */
  font-size: 0 !important;
  line-height: 1 !important;

  text-align: center !important;
  cursor: pointer;
}

/* reorder because HTML is: label then dot */
.forminator-custom-form .forminator-pagination-steps .forminator-step-dot{ order: 1 !important; }
.forminator-custom-form .forminator-pagination-steps .forminator-step-label{ order: 2 !important; }

/* dot: perfect circle everywhere */
.forminator-custom-form .forminator-pagination-steps .forminator-step-dot{
  width: var(--fm-dot) !important;
  height: var(--fm-dot) !important;
  min-width: var(--fm-dot) !important;
  min-height: var(--fm-dot) !important;

  padding: 0 !important;
  margin: 0 !important;

  box-sizing: border-box !important;
  border-radius: 50% !important;
  aspect-ratio: 1 / 1 !important;

  background: var(--fm-dot-bg) !important;
  border: var(--fm-dot-b) solid var(--fm-dot-border) !important;

  display: grid !important;
  place-items: center !important;

  position: relative !important;
  z-index: 2 !important;

  overflow: hidden !important;

  /* mobile rendering fix for “egg” circles */
  transform: translateZ(0) !important;
  -webkit-transform: translateZ(0) !important;
}

/* number inside dot */
.forminator-custom-form .forminator-pagination-steps .forminator-step-dot::before{
  content: counter(fmstep);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  color: var(--fm-dot-text);
}

/* label styling */
.forminator-custom-form .forminator-pagination-steps .forminator-step-label{
  font-size: var(--fm-label-size) !important;
  font-weight: var(--fm-label-weight) !important;
  line-height: var(--fm-label-lh) !important;
  color: var(--fm-label) !important;

  width: 100% !important;
  text-align: center !important;

  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
}

/* current step */
.forminator-custom-form .forminator-pagination-steps .forminator-step.forminator-current .forminator-step-dot{
  background: var(--fm-active) !important;
  border-color: var(--fm-active) !important;
}
.forminator-custom-form .forminator-pagination-steps .forminator-step.forminator-current .forminator-step-dot::before{
  color: #fff !important;
}
.forminator-custom-form .forminator-pagination-steps .forminator-step.forminator-current .forminator-step-label{
  color: var(--fm-active) !important;
}

/* visited / done */
.forminator-custom-form .forminator-pagination-steps .forminator-step.is-done .forminator-step-dot,
.forminator-custom-form .forminator-pagination-steps .forminator-step.forminator-visited .forminator-step-dot{
  background: var(--fm-active) !important;
  border-color: var(--fm-active) !important;
}
.forminator-custom-form .forminator-pagination-steps .forminator-step.is-done .forminator-step-dot::before,
.forminator-custom-form .forminator-pagination-steps .forminator-step.forminator-visited .forminator-step-dot::before{
  color: #fff !important;
}
.forminator-custom-form .forminator-pagination-steps .forminator-step.is-done .forminator-step-label,
.forminator-custom-form .forminator-pagination-steps .forminator-step.forminator-visited .forminator-step-label{
  color: var(--fm-active) !important;
}

/* mobile: hide labels */
@media (max-width: 760px){
  .forminator-custom-form .forminator-pagination-steps .forminator-step-label{
    display: none !important;
  }
}


/* ===== Mobile Safari fixes: perfect circles + bar centering ===== */
@media (max-width: 760px){

  /* 1) Line exactly through dot center (Safari often needs a tiny offset) */
  .forminator-custom-form .forminator-pagination-steps::before,
  .forminator-custom-form .forminator-pagination-steps::after{
    top: calc(var(--fm-dot) / 2 + 1px) !important;
  }

  /* keep progress scaling */
  .forminator-custom-form .forminator-pagination-steps::after{
    transform: translateY(-50%) scaleX(var(--fm-progress)) !important;
  }

  /* 2) Force true circle rendering on mobile (anti “egg” effect) */
  .forminator-custom-form .forminator-pagination-steps .forminator-step-dot{
    /* remove GPU translate that can create subpixel distortion */
    transform: none !important;
    -webkit-transform: none !important;

    /* Safari anti-alias / mask trick */
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
    -webkit-mask-image: -webkit-radial-gradient(circle, #fff 100%, #000 100%) !important;

    /* ensure it’s treated as a strict box */
    display: block !important;
    width: var(--fm-dot) !important;
    height: var(--fm-dot) !important;
    aspect-ratio: auto !important; /* iOS sometimes “jiggles” aspect-ratio */
    border-radius: 9999px !important;
    box-sizing: border-box !important;
  }

  /* center the number inside even if display:block */
  .forminator-custom-form .forminator-pagination-steps .forminator-step-dot::before{
    position: absolute !important;
    inset: 0 !important;
    display: grid !important;
    place-items: center !important;
  }
}


/* ALL Forminator buttons */
.forminator-ui .forminator-button{
  border-radius: 7px !important;
  /*box-shadow: 0 6px 18px rgba(0,0,0,.12) !important;*/
  border: 5px !important;
  text-padding:50px;
  padding: 10px 18px !important;   /* уменьшай первое число для высоты */
  line-height: 1.1 !important;
  min-height: 0 !important;
  border: 5px !important;
}

/* hover */
.forminator-ui .forminator-button:hover{
  box-shadow: 0 2px 4px rgba(0,0,0,.1) !important;
    border: 5px !important;

}

/* active */
.forminator-ui .forminator-button:active{
  box-shadow: 0 2px 4px rgba(0,0,0,.1) !important;
}
/* SELECT2 (Forminator select) — background + radius */
.forminator-ui .select2-container .select2-selection--single,
.forminator-ui .select2-container .select2-selection--multiple{
  background: #fff !important;      /* фон */
  border-radius: 7px !important;   /* радиус */
  border: 1px solid #cfd6dd !important;
  min-height: 44px;                 /* высота поля */
}

/* текст внутри */
.forminator-ui .select2-container .select2-selection__rendered{
  line-height: 15px !important;
}

/* стрелка */
.forminator-ui .select2-container .select2-selection__arrow{
  height: 42px !important;
}

/* выпадающий список */
.forminator-ui .select2-dropdown{
  background: #f2f2f2  !important;
  border-radius: 10px !important;
  border: 1px solid #cfd6dd !important;
  overflow: hidden;
}

/* подсветка выбранного/hover пункта */
.forminator-ui .select2-results__option--highlighted{
  background: rgba(42,123,214,.12) !important;
  color: inherit !important;
}

.forminator-ui .forminator-input,
.forminator-ui .forminator-textarea{
  background: #fff !important;
  border-radius: 7px !important;
  border: 1px solid #cfd6dd !important;
}

/* radio outer ring */
.forminator-ui .forminator-radio .forminator-radio-bullet{
  border-radius: 50% !important;
  border: 1px solid #cfd6dd !important;
  background: #fff !important;
}

/* selected dot */
.forminator-ui .forminator-radio input:checked + .forminator-radio-bullet{
  border-color: #2a7bd6 !important;
}
.forminator-ui .forminator-radio input:checked + .forminator-radio-bullet::before{
  background: #2a7bd6 !important;
}

.forminator-ui .select2-results{
  background: #fff !important;
}

/* фон всей выпадашки */
.forminator-ui .select2-dropdown{
  background: #f2f2f2 !important;      /* нужный цвет */
  border: 1px solid #2a7bd6 !important; /* как у тебя на скрине */
  border-radius: 0 !important;          /* если надо без скругления */
}

/* фон списка (иногда нужен отдельно) */
.forminator-ui .select2-results{
  background: #f2f2f2 !important;
}

/* фон конкретных пунктов по умолчанию */
.forminator-ui .select2-results__option{
  background: transparent !important;
}

/* hover / подсветка */
.forminator-ui .select2-results__option--highlighted{
  background: rgba(42,123,214,.12) !important;
  color: inherit !important;
}

/* выбранный пункт (если нужно выделять) */
.forminator-ui .select2-results__option[aria-selected="true"]{
  background: rgba(42,123,214,.18) !important;
}



/* Forminator field descriptions (Description / optional text) */
.forminator-ui .forminator-description{
  color: rgba(0,0,0,.55) !important;  /* цвет подсказки */
  font-size: 13px !important;         /* размер */
  line-height: 1.35 !important;       /* межстрочный */
  font-weight: 400 !important;        /* насыщенность */
  margin-top: 6px !important;         /* отступ от поля */
}