:root{
  --eca-blue:#0E4174;
  --eca-orange:#EF9600;
  --eca-bg:#F6F8FB;
  --eca-text:#0B1B2B;
  --eca-border:#D9E1EC;
  --eca-muted:#5f7288;
}

*{box-sizing:border-box}

body{
  margin:0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color:var(--eca-text);
  background:var(--eca-bg);
}

.eca-container{
  width:min(1120px, calc(100% - 32px));
  margin-inline:auto;
}

.eca-header{
  background:#fff;
  border-bottom:1px solid var(--eca-border);
}

.eca-header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 0;
}

.eca-logo img{display:block; height:auto; max-width:260px}

.eca-header__title{
  font-weight:600;
  color:var(--eca-blue);
}

.eca-main{padding:24px 0}

.eca-page__title{
  margin:0 0 16px;
  color:var(--eca-blue);
}

.eca-page__content{
  background:#fff;
  border:1px solid var(--eca-border);
  border-radius:12px;
  padding:28px;
  box-shadow: 0 10px 30px rgba(14, 65, 116, 0.06);
}

.eca-footer{
  padding:18px 0;
  color:#49627a;
}

/* прибрати велике лого всередині сторінки (залишається хедер) */
.eca-page__content img,
.eca-page__content svg{
  max-width:100%;
  height:auto;
}
.eca-page__content > img:first-child,
.eca-page__content .eca-wizard img:first-child,
.eca-page__content .eca-wizard__logo,
.eca-page__content .eca-step-logo{
  display:none !important;
}

/* типографіка */
.eca-page__content h1,
.eca-page__content h2{
  margin:0 0 8px;
  color:var(--eca-blue);
  font-weight:700;
  line-height:1.25;
}
.eca-page__content h2{ font-size:22px; }

.eca-page__content p{
  margin:0 0 12px;
  color:#49627a;
  line-height:1.6;
  font-size:14.5px;
}
.eca-muted{
  color:var(--eca-muted);
  font-size:13.5px;
  line-height:1.55;
}

/* Step header */
.eca-step-header{
  margin:0 auto 18px;
  max-width:720px;
}
.eca-step-kicker{
  font-size:13px;
  font-weight:700;
  color:var(--eca-orange);
  letter-spacing:0.02em;
  text-transform:uppercase;
  margin:0 0 4px;
}
.eca-step-title{
  margin:0 0 6px;
  font-size:22px;
  font-weight:700;
  color:var(--eca-blue);
}
.eca-step-desc{
  margin:0;
  font-size:15px;
  color:#5f7288;
  line-height:1.5;
}

/* кроки/меню */
.eca-step-nav,
.eca-wizard__steps,
.eca-steps{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:16px auto 18px;
  padding:0;
  list-style:none;
  max-width:720px;
}

.eca-step-nav a,
.eca-wizard__steps a,
.eca-steps__item{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 12px;
  border-radius:999px;
  background:rgba(14,65,116,0.08);
  color:var(--eca-blue);
  text-decoration:none;
  font-size:13px;
  border:1px solid rgba(14,65,116,0.12);
}

.eca-step-nav .is-active a,
.eca-steps__item.is-active{
  background:var(--eca-blue);
  color:#fff;
  border-color:var(--eca-blue);
}

/* форма */
.eca-form,
.eca-step,
.eca-wizard{
  max-width:720px;
  margin:0 auto;
}

/* fieldset / legend — щоб step-11 виглядав “карточкою” */
.eca-fieldset{
  border:1px solid var(--eca-border);
  border-radius:12px;
  padding:16px 16px 18px;
  background:#fbfcfe;
}
.eca-fieldset legend{
  padding:0 10px;
  font-weight:700;
  color:var(--eca-blue);
  font-size:14px;
}

/* сітка */
.eca-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px 18px;
  margin-top:12px;
}

/* поля */
.eca-field{ display:flex; flex-direction:column; min-width:0; }
.eca-label{
  font-size:13px;
  font-weight:700;
  color:var(--eca-text);
  margin:0 0 6px;
}

.eca-input,
.eca-select,
.eca-textarea{
  width:100%;
  height:44px;
  padding:0 12px;
  border-radius:10px;
  border:1px solid var(--eca-border);
  background:#fff;
  color:var(--eca-text);
  font-size:14px;
  transition:border-color .15s, box-shadow .15s;
}

.eca-textarea{
  height:auto;
  min-height:96px;
  padding:10px 12px;
  resize:vertical;
}

.eca-input:focus,
.eca-select:focus,
.eca-textarea:focus{
  outline:none;
  border-color:rgba(14,65,116,0.55);
  box-shadow:0 0 0 3px rgba(14,65,116,0.12);
}

.eca-hint{
  margin-top:6px;
  font-size:12.5px;
  color:#6b7f93;
}

/* блок “Важливо” */
.eca-info,
.eca-important,
.eca-note{
  margin:16px 0 0;
  padding:16px;
  border-radius:12px;
  background:rgba(239,150,0,0.08);
  border:1px solid rgba(239,150,0,0.25);
  color:var(--eca-text);
}
.eca-info h3,
.eca-important h3,
.eca-note h3{
  margin:0 0 8px;
  font-size:15px;
  font-weight:800;
  color:#7a4a00;
}

/* ✅ ЧЕКБОКСИ — опустити нижче і зробити рівно */
.eca-pd-consent{
  margin-top:14px;    /* опускає блок нижче після гріда */
  padding-top:12px;
  border-top:1px dashed rgba(14,65,116,0.18);
}

.eca-check{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:14px;
  line-height:1.5;
  cursor:pointer;
  margin-top:10px;   /* опускає кожен чекбокс нижче */
}

.eca-check input[type="checkbox"]{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;

  width:18px;
  height:18px;
  flex:0 0 18px;

  margin-top:3px;    /* вирівнювання по першому рядку */
  border:2px solid #9fb1c5;
  border-radius:4px;
  background:#fff;

  display:inline-grid;
  place-content:center;
  cursor:pointer;
}

.eca-check input[type="checkbox"]:checked{
  background:var(--eca-blue);
  border-color:var(--eca-blue);
}

.eca-check input[type="checkbox"]:checked::after{
  content:"";
  width:6px;
  height:10px;
  border:solid #fff;
  border-width:0 2px 2px 0;
  transform:rotate(45deg);
}

.eca-check span{
  display:block;
  padding-top:0;     /* прибрали “підняття/опускання” тексту */
}

/* панелі кроків (якщо у тебе класова логіка) */
.eca-step-panel{ display:none; }
.eca-step-panel.is-active{ display:block; }

.eca-subtitle{
  margin:16px 0 10px;
  color:var(--eca-blue);
  font-weight:800;
}

/* actions */
.eca-page__content .eca-actions{
  display:flex !important;
  justify-content:flex-end !important;
  align-items:center !important;
  gap:12px !important;
  max-width:720px !important;
  margin:20px auto 0 !important;
}

.eca-page__content .eca-actions .eca-btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  height:44px !important;
  min-width:120px !important;
  padding:0 20px !important;

  line-height:1 !important;
  white-space:nowrap !important;

  margin:0 !important;
  box-sizing:border-box !important;

  font:inherit !important;
  font-weight:700 !important;
  font-size:14px !important;

  border-radius:10px !important;
  cursor:pointer !important;
  text-decoration:none !important;
}

.eca-page__content .eca-actions button.eca-btn{
  -webkit-appearance:none;
  appearance:none;
}

.eca-page__content .eca-actions .eca-btn--ghost{
  background:#fff !important;
  border:1px solid var(--eca-border) !important;
  color:var(--eca-blue) !important;
}
.eca-page__content .eca-actions .eca-btn--ghost:hover{
  background:rgba(14,65,116,0.06) !important;
}

.eca-page__content .eca-actions .eca-btn--primary{
  background:var(--eca-blue) !important;
  border:1px solid var(--eca-blue) !important;
  color:#fff !important;
}
.eca-page__content .eca-actions .eca-btn--primary:hover{
  filter:brightness(0.95) !important;
}

/* мобайл */
@media (max-width: 720px){
  .eca-page__content{ padding:18px; }
  .eca-grid{ grid-template-columns:1fr; }
  .eca-form, .eca-step, .eca-wizard{ max-width:100%; }
  .eca-fieldset{ padding:14px; }
}

/* ALWAYS: "Далі" справа (перебиває margin:0 !important і order) */
#eca-wizard .eca-actions{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:12px !important;
}

/* "Далі" (primary) — завжди остання і справа */
#eca-wizard .eca-actions .eca-btn--primary{
  order:999 !important;
  margin:0 !important;
  margin-left:auto !important; /* ключове */
}

/* "Назад" / "На головну" — перед "Далі" */
#eca-wizard .eca-actions .eca-btn--ghost,
#eca-wizard .eca-actions .eca-btn--back{
  order:1 !important;
  margin:0 !important;
}

/* jQuery UI Autocomplete — стиль під ECA */
.eca-field{
  position: relative;
  overflow: visible;
}

/* меню автокомпліта */
.ui-autocomplete{
  z-index: 999999 !important;
  max-height: 260px;
  overflow-y: auto;
  overflow-x: hidden;

  background:#fff;
  border:1px solid var(--eca-border);
  border-radius:12px;
  box-shadow:0 12px 28px rgba(0,0,0,.14);
  padding:6px;

  box-sizing:border-box;
}

.ui-menu-item{ list-style:none; margin:0; }

.ui-menu-item-wrapper{
  padding:10px 12px;
  border-radius:10px;
  cursor:pointer;
  font-size:14px;
  line-height:1.25;
  color:var(--eca-text);
  white-space:normal;
}

.ui-menu-item-wrapper.ui-state-active{
  margin:0;
  border:0;
  background:rgba(14,65,116,.10);
  color:var(--eca-text);
}

/* jQuery UI: ховаємо службовий текст (a11y), щоб не з’являвся на сторінці */
.ui-helper-hidden-accessible{
  position:absolute !important;
  left:-9999px !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
  clip:rect(1px,1px,1px,1px) !important;
  white-space:nowrap !important;
}

/* Card container for each property */
.eca-property-card{
  background:#fff;
  border:1px solid var(--eca-border);
  border-radius:12px;
  padding:16px;
  margin-bottom:16px;
}

/* Make date inputs consistent */
.eca-input[type="date"]{
  width:100%;
  min-height:44px;
  padding:12px 14px;
}

/* Ensure fields stretch properly */
.eca-field{ min-width:0; }

/* ===== Step 12 helpers (no inline styles) ===== */

.eca-property-card__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}

.eca-property-title{
  margin:0;
}

.eca-field--span-all{
  grid-column:1 / -1;
}

.is-hidden{
  display:none !important;
}

.eca-input--mt8{
  margin-top:8px;
}

.eca-actions--start{
  justify-content:flex-start;
}

.eca-actions--tight{
  gap:12px;
}

.eca-hint--nomargin{
  margin:0;
}

/* Step-12: кнопка "Видалити" — danger ghost (ECA style) */
.eca-property-remove{
  appearance:none;
  -webkit-appearance:none;

  border:1px solid #f1b4b4;
  background:#fff;
  color:#b42318;

  border-radius:10px;
  padding:10px 14px;
  min-height:40px;

  font:inherit;
  font-weight:600;
  line-height:1;

  cursor:pointer;
  transition:
    background .15s ease,
    border-color .15s ease,
    color .15s ease,
    box-shadow .15s ease,
    transform .02s ease;
}

.eca-property-remove:hover{
  background:rgba(180,35,24,.06);
  border-color:#e05a5a;
  color:#8f1d13;
}

.eca-property-remove:active{
  transform:translateY(1px);
}

.eca-property-remove:focus{
  outline:none;
  box-shadow:0 0 0 3px rgba(180,35,24,.15);
}

/* якщо є is-hidden — гарантовано ховаємо */
.eca-property-remove.is-hidden{
  display:none !important;
}


/* =========================
   STEP-13 — FILE INPUT (акуратна кнопка + поле, без “наїзду”)
   Працює з: #step-13 .eca-doc-row .eca-input[type="file"]
========================= */

#step-13 .eca-docs-list{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:12px;
}

#step-13 .eca-doc-row{
  background:#fff;
  border:1px solid var(--eca-border);
  border-radius:12px;
  padding:14px;
  box-shadow:0 10px 22px rgba(14,65,116,.05);
}

/* STEP-13: назви полів як у всіх інших кроках */
#step-13 .eca-doc-row .eca-label{
  display:block;
  margin:0 0 6px;          /* як .eca-label */
  font-size:13px;          /* як .eca-label */
  font-weight:700;         /* як .eca-label */
  color:var(--eca-text);
  line-height:1.35;
}

/* Поле file: фіксована висота + overflow, щоб кнопка не “наїжджала” */
#step-13 .eca-doc-row .eca-input[type="file"]{
  width:100%;
  height:44px;
  padding:0 12px;                 /* без великих падінгів */
  border-radius:12px;
  border:1px solid rgba(14,65,116,0.14);
  background:rgba(14,65,116,0.02);
  color:var(--eca-muted);
  font-size:14px;
  cursor:pointer;
  overflow:hidden;                 /* ключове */
  box-sizing:border-box;
  transition:border-color .15s, box-shadow .15s, background .15s;
}

/* Hover/focus */
#step-13 .eca-doc-row .eca-input[type="file"]:hover{
  background:rgba(14,65,116,0.035);
  border-color:rgba(14,65,116,0.22);
}

#step-13 .eca-doc-row .eca-input[type="file"]:focus{
  outline:none;
  border-color:rgba(14,65,116,0.45);
  box-shadow:0 0 0 3px rgba(14,65,116,0.10);
}

/* ===== Кнопка "Вибрати файли" — компактна ghost, не кричить кольором ===== */
#step-13 .eca-doc-row .eca-input[type="file"]::file-selector-button{
  height:32px;
  margin:6px 10px 6px 0;          /* чітко влазить у 44px */
  padding:0 12px;
  border-radius:10px;

  background:#fff;
  border:1px solid rgba(14,65,116,0.20);
  color:var(--eca-blue);

  font:inherit;
  font-weight:700;
  font-size:13px;
  line-height:1;

  cursor:pointer;
  transition:background .15s ease, border-color .15s ease, transform .02s ease;
}

#step-13 .eca-doc-row .eca-input[type="file"]::file-selector-button:hover{
  background:rgba(14,65,116,0.06);
  border-color:rgba(14,65,116,0.28);
}

#step-13 .eca-doc-row .eca-input[type="file"]::file-selector-button:active{
  transform:translateY(1px);
}

/* Safari/старі Chromium */
#step-13 .eca-doc-row .eca-input[type="file"]::-webkit-file-upload-button{
  height:32px;
  margin:6px 10px 6px 0;
  padding:0 12px;
  border-radius:10px;

  background:#fff;
  border:1px solid rgba(14,65,116,0.20);
  color:var(--eca-blue);

  font:inherit;
  font-weight:700;
  font-size:13px;
  line-height:1;

  cursor:pointer;
  transition:background .15s ease, border-color .15s ease, transform .02s ease;
}

/* Підказки (badge) */
#step-13 .eca-doc-row .eca-hint{
  display:inline-block;
  margin-top:10px;
  padding:8px 10px;
  border-radius:10px;
  background:rgba(239,150,0,0.08);
  border:1px solid rgba(239,150,0,0.22);
  color:#6b7f93;
  font-size:12.5px;
  line-height:1.45;
}

/* required / error */
#step-13 .eca-doc-row.is-required{
  border-left:4px solid rgba(239,150,0,0.9);
  padding-left:12px;
}

#step-13 .eca-doc-row.has-error{
  border-color:rgba(180,35,24,0.35);
  box-shadow:0 10px 22px rgba(180,35,24,0.06);
}

#step-13 .eca-doc-row.has-error .eca-input[type="file"]{
  border-color:rgba(180,35,24,0.55);
  background:rgba(180,35,24,0.04);
}

#step-13 .eca-doc-row.has-error .eca-label{
  color:#8f1d13;
}

@media (max-width:720px){
  #step-13 .eca-doc-row{ padding:12px; }
  #step-13 .eca-doc-row .eca-input[type="file"]{
    height:44px;                  /* лишаємо */
    padding:0 10px;
  }
}

/* =========================
   STEP-13 — docs UI (list + delete) in ECA style
   HTML що генеруєш:
   .eca-doc-row -> .eca-doc-list -> .eca-doc-item (a + button.eca-doc-delete)
========================= */

#step-13 .eca-doc-row{
  background:#fff;
  border:1px solid var(--eca-border);
  border-radius:12px;
  padding:14px;
  box-shadow:0 10px 22px rgba(14,65,116,.05);
  margin-bottom:12px;
}

/* list container */
#step-13 .eca-doc-list{
  margin-top:10px;
  display:flex;
  flex-direction:column;
  gap:8px;
}

/* single uploaded file row */
#step-13 .eca-doc-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;

  padding:10px 12px;
  border:1px solid rgba(14,65,116,0.12);
  background:rgba(14,65,116,0.02);
  border-radius:12px;
}

/* file link */
#step-13 .eca-doc-item a{
  color:var(--eca-blue);
  text-decoration:none;
  font-size:14px;
  font-weight:600;
  line-height:1.3;

  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  min-width:0;
  flex:1 1 auto;
}

#step-13 .eca-doc-item a:hover{
  text-decoration:underline;
}

/* delete button — danger ghost (ECA style) */
#step-13 .eca-doc-delete{
  appearance:none;
  -webkit-appearance:none;

  border:1px solid #f1b4b4;
  background:#fff;
  color:#b42318;

  border-radius:10px;
  padding:10px 12px;
  min-height:40px;

  font:inherit;
  font-weight:700;
  font-size:13px;
  line-height:1;

  cursor:pointer;
  white-space:nowrap;

  transition:
    background .15s ease,
    border-color .15s ease,
    color .15s ease,
    box-shadow .15s ease,
    transform .02s ease;
}

#step-13 .eca-doc-delete:hover{
  background:rgba(180,35,24,.06);
  border-color:#e05a5a;
  color:#8f1d13;
}

#step-13 .eca-doc-delete:active{
  transform:translateY(1px);
}

#step-13 .eca-doc-delete:focus{
  outline:none;
  box-shadow:0 0 0 3px rgba(180,35,24,.15);
}

/* =========================
   STEP-13 — file input polish (як ти просив: акуратно, не “наїжджає”)
========================= */

#step-13 .eca-doc-row .eca-input[type="file"]{
  width:100%;
  height:44px;
  padding:0 12px;
  border-radius:12px;
  border:1px solid rgba(14,65,116,0.14);
  background:rgba(14,65,116,0.02);
  color:var(--eca-muted);
  font-size:14px;
  cursor:pointer;
  overflow:hidden;
  box-sizing:border-box;
  transition:border-color .15s, box-shadow .15s, background .15s;
}

#step-13 .eca-doc-row .eca-input[type="file"]:hover{
  background:rgba(14,65,116,0.035);
  border-color:rgba(14,65,116,0.22);
}

#step-13 .eca-doc-row .eca-input[type="file"]:focus{
  outline:none;
  border-color:rgba(14,65,116,0.45);
  box-shadow:0 0 0 3px rgba(14,65,116,0.10);
}

/* Chrome/Edge/Firefox */
#step-13 .eca-doc-row .eca-input[type="file"]::file-selector-button{
  height:32px;
  margin:6px 10px 6px 0;
  padding:0 12px;
  border-radius:10px;

  background:#fff;
  border:1px solid rgba(14,65,116,0.20);
  color:var(--eca-blue);

  font:inherit;
  font-weight:700;
  font-size:13px;
  line-height:1;

  cursor:pointer;
  transition:background .15s ease, border-color .15s ease, transform .02s ease;
}

#step-13 .eca-doc-row .eca-input[type="file"]::file-selector-button:hover{
  background:rgba(14,65,116,0.06);
  border-color:rgba(14,65,116,0.28);
}

#step-13 .eca-doc-row .eca-input[type="file"]::file-selector-button:active{
  transform:translateY(1px);
}

/* Safari/older webkit */
#step-13 .eca-doc-row .eca-input[type="file"]::-webkit-file-upload-button{
  height:32px;
  margin:6px 10px 6px 0;
  padding:0 12px;
  border-radius:10px;

  background:#fff;
  border:1px solid rgba(14,65,116,0.20);
  color:var(--eca-blue);

  font:inherit;
  font-weight:700;
  font-size:13px;
  line-height:1;

  cursor:pointer;
}

/* mobile */
@media (max-width:720px){
  #step-13 .eca-doc-row{ padding:12px; }
  #step-13 .eca-doc-item{
    align-items:flex-start;
    gap:10px;
  }
  #step-13 .eca-doc-item a{
    white-space:normal;
  }
}


.eca-loader.is-hidden{display:none}
.eca-loader{
  position:fixed; inset:0;
  background:rgba(11,27,43,.55);
  display:flex; align-items:center; justify-content:center;
  z-index:99999;
  padding:24px;
}
.eca-loader__box{
  width:min(520px, 100%);
  background:#fff;
  border:1px solid #D9E1EC;
  border-radius:14px;
  padding:18px 18px 14px;
  box-shadow:0 10px 30px rgba(0,0,0,.18);
}
.eca-loader__title{
  font-weight:600;
  color:#0E4174;
  margin-bottom:12px;
}
.eca-loader__bar{
  height:10px;
  border-radius:999px;
  background:#F1F4F8;
  overflow:hidden;
  border:1px solid #D9E1EC;
}
.eca-loader__barfill{
  height:100%;
  width:0%;
  background:#0E4174;
  transition:width .15s linear;
}
.eca-loader__meta{
  display:flex;
  justify-content:space-between;
  margin-top:10px;
  font-size:13px;
  color:#0B1B2B;
}
.eca-loader__hint{
  margin-top:8px;
  font-size:12px;
  color:#4b5b6b;
}


/* ==== STEP-13: стоп розпирание довгими іменами файлів ==== */

/* сам рядок файлу не може вилізти за контейнер */
#step-13 .eca-doc-item{
  width:100%;
  max-width:100%;
  overflow:hidden;          /* ключове */
  flex-wrap:nowrap;         /* щоб кнопка не з’їжджала вниз */
}

/* будь-який перший блок з назвою (a / span / div) — стискаємо */
#step-13 .eca-doc-item > :first-child{
  min-width:0 !important;
  flex:1 1 0% !important;   /* 0% дуже важливо для стискання */
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  display:block;            /* щоб ellipsis стабільно працював */
}

/* кнопка видалення завжди фіксована */
#step-13 .eca-doc-delete{
  flex:0 0 auto !important;
  margin-left:12px;
}

@media (max-width:720px){
  #step-13 .eca-doc-item a{ max-width: 52vw; }
}

/* =========================
   STEP-14 — CONFIRMATION UI (stable on iOS)
========================= */

.eca-confirm__box{
  width:100%;
  max-width:100%;
  overflow:hidden;
  background:#fff;
  border:1px solid rgba(14,65,116,0.12);
  border-radius:12px;
  padding:12px;
}

/* grid row instead of flex (fix misalignment) */
.eca-confirm__row{
  width:100%;
  max-width:100%;

  display:grid;
  grid-template-columns: 1fr minmax(0, 1.6fr);
  gap:12px;
  align-items:start;

  padding:8px 0;
  border-bottom:1px dashed rgba(14,65,116,0.12);
}

.eca-confirm__row:last-child{
  border-bottom:none;
}

.eca-confirm__k,
.eca-confirm__v{
  min-width:0; /* critical for grid + overflow */
}

.eca-confirm__k{
  text-align:left;
  color:#5f7288;
  font-size:13px;
  font-weight:600;
  line-height:1.35;
}

/* value: wraps long strings (IBAN/UUID) */
.eca-confirm__v{
  text-align:right;
  color:#0B1B2B;
  font-size:13.5px;
  font-weight:700;
  line-height:1.35;

  white-space:normal;
  overflow:visible;
  text-overflow:clip;

  overflow-wrap:anywhere;  /* breaks UA... / UUID */
  word-break:break-word;
}

/* list (property list) */
.eca-confirm__list{
  margin:0;
  padding-left:18px;
  color:#0B1B2B;
  font-size:13.5px;
  line-height:1.5;
}

.eca-confirm__list li{ margin:6px 0; }

.eca-confirm__badge{
  display:inline-block;
  padding:3px 8px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  background:rgba(14,65,116,0.08);
  border:1px solid rgba(14,65,116,0.12);
  color:var(--eca-blue);
}

/* "file name" rows in confirm step (optional, compact) */
.eca-confirm__file{
  display:block;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Mobile: make values a bit tighter */
@media (max-width:720px){
  .eca-confirm__row{
    grid-template-columns: 1fr minmax(0, 1.3fr);
    gap:10px;
  }
  .eca-confirm__k{ font-size:12.5px; }
  .eca-confirm__v{ font-size:13px; }
}

/* =========================
   Confirm – files styling (HINT STYLE)
========================= */

.eca-confirm__files{
  margin-top:8px;
  display:flex;
  flex-direction:column;
  gap:6px;
  align-items:flex-end; /* праве вирівнювання в колонці value */
}

/* один файл — як “підказка” */
.eca-confirm__file{
  display:inline-flex;
  align-items:center;
  gap:8px;

  max-width:100%;
  padding:6px 10px;

  border-radius:10px;
  background:rgba(239,150,0,0.08);
  border:1px solid rgba(239,150,0,0.22);

  font-size:12.5px;
  line-height:1.25;
  color:#6b7f93;
  opacity:1;
}

/* маркер (без емодзі) */
.eca-confirm__file::before{
  content:"•";
  flex:0 0 auto;
  opacity:.55;
}

/* текст файлу — не розпирає, обрізається */
.eca-confirm__file span{
  display:block;
  max-width:420px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* мобайл */
@media (max-width:720px){
  .eca-confirm__file span{
    max-width:58vw;
  }
}

/* =========================
   Confirm: edit button
========================= */

.eca-confirm__actions{
  display:flex;
  justify-content:flex-end;
  margin-top:10px;
}

.eca-confirm__edit{
  appearance:none;
  -webkit-appearance:none;

  height:38px;
  padding:0 14px;
  border-radius:10px;

  background:#fff;
  border:1px solid rgba(14,65,116,0.20);
  color:var(--eca-blue);

  font:inherit;
  font-weight:700;
  font-size:13px;
  line-height:1;

  cursor:pointer;
  transition:background .15s ease, border-color .15s ease, transform .02s ease;
}

.eca-confirm__edit:hover{
  background:rgba(14,65,116,0.06);
  border-color:rgba(14,65,116,0.28);
}

.eca-confirm__edit:active{
  transform:translateY(1px);
}

.eca-confirm__edit:focus{
  outline:none;
  box-shadow:0 0 0 3px rgba(14,65,116,0.10);
}

/* hide elements when wizard is in edit mode */
#eca-wizard[data-mode="edit"] [data-hide-on-edit="1"]{
  display:none !important;
}

/* STEP-14: кнопка "Назад" не показується ніколи */
#step-14 .eca-btn--back {
  display: none !important;
}


/* =========================
   STEP-15 — PREVIEW UI (updated, no Step-14 overrides)
========================= */

.eca-step15-preview{
  max-width:720px;
  margin:18px auto 0;
}

.eca-step15-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
  margin-top:10px;
}

.eca-step15-card{
  background:#fff;
  border:1px solid var(--eca-border);
  border-radius:12px;
  padding:14px;
  box-shadow:0 10px 22px rgba(14,65,116,.05);
  overflow:hidden;
}

.eca-step15-card__title{
  font-weight:800;
  color:var(--eca-blue);
  font-size:14px;
  margin:0 0 10px;
}

.eca-step15-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.eca-docprev-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;

  padding:10px 12px;
  border:1px solid rgba(14,65,116,0.12);
  background:rgba(14,65,116,0.02);
  border-radius:12px;

  overflow:hidden; /* щоб довгі назви не розпирали */
}

.eca-docprev-name{
  min-width:0;
  flex:1 1 0%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;

  /* ✅ м’який “той прикольний” тон (не синій лінк) */
  color:#49627a;
  font-size:13.5px;
  font-weight:700;
  line-height:1.25;
}

/* кнопка "Переглянути" — як ghost */
.eca-docprev-btn{
  appearance:none;
  -webkit-appearance:none;

  height:40px;
  padding:0 14px;
  border-radius:10px;

  background:#fff;
  border:1px solid rgba(14,65,116,0.20);
  color:var(--eca-blue);

  font:inherit;
  font-weight:800;
  font-size:13px;
  line-height:1;

  cursor:pointer;
  white-space:nowrap;

  transition:background .15s ease, border-color .15s ease, transform .02s ease, opacity .15s ease;
}

.eca-docprev-btn:hover{
  background:rgba(14,65,116,0.06);
  border-color:rgba(14,65,116,0.28);
}
.eca-docprev-btn:active{ transform:translateY(1px); }
.eca-docprev-btn:focus{
  outline:none;
  box-shadow:0 0 0 3px rgba(14,65,116,0.10);
}
.eca-docprev-btn:disabled{
  opacity:.55;
  cursor:not-allowed;
}

.eca-step15-hint{ margin-top:12px; }

/* mobile */
@media (max-width:720px){
  .eca-step15-grid{ grid-template-columns:1fr; }
  .eca-docprev-name{
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
  }
}

/* =========================
   PDF MODAL (eca-pdfmodal)
========================= */

.eca-pdfmodal{
  position:fixed;
  inset:0;
  z-index:999999;
  display:none;
}

.eca-pdfmodal[aria-hidden="false"]{ display:block; }

.eca-pdfmodal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(11,27,43,.62);
}

.eca-pdfmodal__dialog{
  position:relative;
  width:min(980px, calc(100% - 28px));
  height:min(84vh, 760px);
  margin: min(6vh, 34px) auto 0;
  background:#fff;
  border:1px solid rgba(14,65,116,0.18);
  border-radius:14px;
  box-shadow:0 18px 44px rgba(0,0,0,.22);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

.eca-pdfmodal__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 12px;
  background:#fff;
  border-bottom:1px solid var(--eca-border);
}

.eca-pdfmodal__title{
  font-weight:800;
  color:var(--eca-blue);
  font-size:14px;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.eca-pdfmodal__close{
  appearance:none;
  -webkit-appearance:none;

  width:40px;
  height:40px;
  border-radius:10px;
  border:1px solid rgba(14,65,116,0.20);
  background:#fff;
  color:var(--eca-blue);

  cursor:pointer;
  font-size:22px;
  line-height:1;

  display:grid;
  place-items:center;
  transition:background .15s ease, border-color .15s ease, transform .02s ease;
}

.eca-pdfmodal__close:hover{
  background:rgba(14,65,116,0.06);
  border-color:rgba(14,65,116,0.28);
}
.eca-pdfmodal__close:active{ transform:translateY(1px); }

.eca-pdfmodal__body{
  flex:1 1 auto;
  background:#f6f8fb;
}

.eca-pdfmodal__frame{
  width:100%;
  height:100%;
  border:0;
  display:block;
  background:#fff;
}

/* =========================
   ATTACHMENTS MODAL (eca-attmodal) — scroll fixed + nicer colors
========================= */

.eca-attmodal__dialog{
  width:min(1100px, calc(100% - 24px));
  background:#fff;
  border:1px solid var(--eca-border);
  border-radius:14px;
  box-shadow:0 18px 44px rgba(0,0,0,.22);
  overflow:hidden;
}

.eca-attmodal__tabs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  padding:10px 14px;
  border-bottom:1px solid var(--eca-border);
  background:#fff;
}

.eca-att-tab{
  border:1px solid rgba(14,65,116,0.20);
  background:#fff;
  padding:8px 10px;
  border-radius:10px;
  cursor:pointer;
  font-size:13px;
  font-weight:800;
  color:var(--eca-blue);
  transition:background .15s ease, border-color .15s ease, transform .02s ease;
}
.eca-att-tab:hover{
  background:rgba(14,65,116,0.06);
  border-color:rgba(14,65,116,0.28);
}
.eca-att-tab:active{ transform:translateY(1px); }
.eca-att-tab:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(14,65,116,0.10);
}
.eca-att-tab.is-active{
  background:rgba(14,65,116,0.08);
  border-color:rgba(14,65,116,0.35);
}

/* ✅ робимо flex + фіксована висота, щоб список скролився до кінця */
.eca-attmodal__body{
  display:flex;
  gap:12px;
  padding:12px 14px 14px;
  background:#fff;

  height:min(70vh, 640px);
  min-height:0;
}

.eca-attmodal__list{
  flex:0 0 360px;
  min-width:260px;

  display:flex;
  flex-direction:column;
  gap:8px;

  overflow-y:auto;
  min-height:0;
  padding:10px 10px 24px; /* ✅ щоб останній item не різало */

  -webkit-overflow-scrolling: touch;
  scroll-padding-bottom: 24px;
}

.eca-att-item{
  text-align:left;
  border:1px solid rgba(14,65,116,0.12);
  background:rgba(14,65,116,0.02);
  border-radius:12px;
  padding:10px;
  cursor:pointer;
  transition:background .15s ease, border-color .15s ease, transform .02s ease;

  overflow:hidden; /* ✅ довгі назви не розпирають */
}

.eca-att-item:hover{
  background:rgba(14,65,116,0.04);
  border-color:rgba(14,65,116,0.20);
}
.eca-att-item:active{ transform:translateY(1px); }
.eca-att-item:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(14,65,116,0.10);
}

.eca-att-item.is-active{
  border-color:rgba(14,65,116,0.35);
  background:rgba(14,65,116,0.06);
}

.eca-att-item__name{
  font-size:13.5px;
  font-weight:800;

  /* ✅ м’який колір (не “лінковий синій”) */
  color:#49627a;

  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.eca-att-item.is-active .eca-att-item__name{
  color:var(--eca-blue);
}

.eca-att-item__meta{
  font-size:12px;
  opacity:.75;
  margin-top:2px;
}

.eca-attmodal__viewer{
  flex:1 1 auto;
  min-width:0;
  min-height:0;
  background:#f6f8fb;
  border-radius:12px;
}

.eca-attmodal__viewer iframe{
  width:100%;
  height:100%;
  border:0;
  display:block;
  border-radius:12px;
  background:#fff;
}

@media (max-width:860px){
  .eca-attmodal__body{
    flex-direction:column;
    height:min(78vh, 720px);
  }
  .eca-attmodal__list{
    flex:0 0 auto;
    max-height:38vh;
  }
}

/* ===== STEP-15: VCHASNO chips + rows ===== */
.eca-chip{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  line-height:1;
  border:1px solid rgba(0,0,0,.12);
}
.eca-chip--muted{ opacity:.75; }
.eca-chip--ok{ border-color:#1f7a3a; }
.eca-chip--warn{ border-color:#b57a00; }
.eca-chip--bad{ border-color:#b00020; }

/* (опціонально, якщо десь ще використовуєш) */
.eca-vchasno-row{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.eca-vchasno-label{
  min-width:90px;
  font-weight:600;
}
.eca-btn--sm{ padding:8px 10px; font-size:13px; }

/* ✅ щоб "eca-btn eca-btn--ghost" гарно виглядав НЕ тільки в .eca-actions */
.eca-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:44px;
  min-width:120px;
  padding:0 20px;
  line-height:1;
  white-space:nowrap;
  border-radius:10px;
  cursor:pointer;
  text-decoration:none;
  font:inherit;
  font-weight:700;
  font-size:14px;
}

a.eca-btn--ghost{
  background:#fff;
  border:1px solid var(--eca-border);
  color:var(--eca-blue);
}
a.eca-btn--ghost:hover{
  background:rgba(14,65,116,0.06);
}

/* STEP-15: "Відкрити у Вчасно" = 1:1 як "Переглянути" */
#step-15 a.eca-docprev-btn{
  text-decoration:none;
}

/* =========================
   STEP-15 — STATUS ROW (FIXED)
   Рівно + не ріже кнопку + кнопка трохи лівіше від краю
========================= */
#step-15 .eca-status-item{
  display:grid !important;
  grid-template-columns: 80px max-content max-content; /* label | chip | button */
  align-items:center;
  gap:12px;

  overflow:visible !important; /* важливо: щоб не "з’їдало" кнопку */
}

/* якщо на рядку лишився overflow:hidden від .eca-docprev-item — перебиваємо */
#step-15 .eca-status-item.eca-docprev-item{
  overflow:visible !important;
}

/* "Статус" */
#step-15 .eca-status-item .eca-docprev-name{
  min-width:80px;
  white-space:nowrap;
  overflow:visible;
  text-overflow:clip;
}

/* chip */
#step-15 .eca-status-item .eca-vchasno-chips{
  justify-self:start;
}

/* кнопка */
#step-15 .eca-status-item .eca-docprev-btn{
  justify-self:end;
  display:inline-flex;
  align-items:center;
  justify-content:center;

  width:max-content;
  min-width:max-content;
  white-space:nowrap;
  line-height:1;

  margin-right:10px; /* зсув вліво від правого краю */
}

/* mobile: в стовпчик */
@media (max-width:720px){
  #step-15 .eca-status-item{
    grid-template-columns: 1fr;
    gap:10px;
  }
  #step-15 .eca-status-item .eca-docprev-btn{
    justify-self:start;
    margin-right:0;
  }
}

/* =========================
   STEP-15 — VCHASNO FIX (button not cut)
========================= */

/* 1) У блоці Вчасно карточки не мають різати контент */
#step-15 #vchasno-box .eca-step15-card{
  overflow: visible !important;
}

/* 2) На всяк випадок: і список теж */
#step-15 #vchasno-box .eca-step15-list{
  overflow: visible !important;
}

/* 3) Рядок статусу: робимо середню колонку гнучкою,
      щоб кнопка (особливо з "(1 з 3)") влазила */
#step-15 #vchasno-box .eca-status-item{
  display:grid !important;
  grid-template-columns: 80px 1fr max-content; /* label | chip (flex) | button */
  align-items:center;
  gap:12px;
  overflow: visible !important;
}

/* 4) Чіп може стискатися (він маленький, але так безпечніше) */
#step-15 #vchasno-box .eca-status-item .eca-vchasno-chips{
  min-width:0;
}

/* 5) Кнопка: не переносимо, і трохи лівіше від краю */
#step-15 #vchasno-box .eca-status-item .eca-docprev-btn{
  justify-self:end;
  white-space:nowrap;
  margin-right:10px;
}

/* Mobile: в стовпчик */
@media (max-width:720px){
  #step-15 #vchasno-box .eca-status-item{
    grid-template-columns: 1fr;
    gap:10px;
  }
  #step-15 #vchasno-box .eca-status-item .eca-docprev-btn{
    justify-self:start;
    margin-right:0;
  }
}

/* =========================
   STEP-15 — STATUS ROW FINAL FIX
   Кнопка справа, статус зліва, без наїзду
========================= */

/* Карточки Вчасно не ріжуть контент */
#step-15 #vchasno-box .eca-step15-card,
#step-15 #vchasno-box .eca-step15-list,
#step-15 #vchasno-box .eca-docprev-item{
  overflow: visible !important;
}

/* Рядок статусу = як preview, але з 3 зонами */
#step-15 #vchasno-box .eca-status-item{
  display:grid !important;
  grid-template-columns: 80px 1fr auto; /* Статус | чіп | кнопка */
  align-items:center;
  gap:12px;
}

/* Лейбл "Статус" */
#step-15 #vchasno-box .eca-status-item .eca-docprev-name{
  white-space:nowrap;
  min-width:80px;
}

/* Чіп — займає доступний простір, відсуває кнопку вправо */
#step-15 #vchasno-box .eca-status-item .eca-vchasno-chips{
  justify-self:start;
  min-width:0;
}

/* Кнопка — завжди по правому краю картки */
#step-15 #vchasno-box .eca-status-item .eca-docprev-btn{
  justify-self:end;
  white-space:nowrap;
  margin-right:0; /* рівно по правому краю */
}

/* Mobile: в стовпчик */
@media (max-width:720px){
  #step-15 #vchasno-box .eca-status-item{
    grid-template-columns: 1fr;
    gap:10px;
  }
  #step-15 #vchasno-box .eca-status-item .eca-docprev-btn{
    justify-self:start;
  }
}

/* =========================
   STEP-15 — HIDE "Статус" LABEL WHEN BUTTON IS SHOWN
========================= */

/* коли кнопка є — прибираємо слово "Статус" */
#step-15 #vchasno-box .eca-status-item:has(.eca-docprev-btn:not([style*="display:none"])) .eca-docprev-name{
  display:none;
}

/* і переносимо чіп статусу в ліву колонку */
#step-15 #vchasno-box .eca-status-item{
  grid-template-columns: 1fr auto; /* статус | кнопка */
}

/* чіп стає по лівому краю */
#step-15 #vchasno-box .eca-status-item .eca-vchasno-chips{
  justify-self:start;
}

/* =========================
   VCHASNO dropdown menu — FULL WIDTH OF CARD
========================= */

/* карточка є anchor для dropdown */
#step-15 .eca-step15-card{
  position: relative;
}

/* контейнер dropdown (створюється після кнопки) */
#step-15 .eca-dd{
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  margin-top: 8px;
  z-index: 9999;
}

/* сама панель меню — на всю ширину карточки */
#step-15 .eca-dd__panel{
  width: 100%;
  background: #fff;
  border: 1px solid var(--eca-border);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
  overflow: hidden;
}

/* пункт меню */
#step-15 .eca-dd__item{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  text-decoration: none;
  color: var(--eca-text);
  border-bottom: 1px solid rgba(0,0,0,.06);
}

#step-15 .eca-dd__item:last-child{
  border-bottom: none;
}

#step-15 .eca-dd__item:hover{
  background: rgba(14,65,116,0.06);
}

/* номер додатку */
#step-15 .eca-dd__num{
  width: 26px;
  font-weight: 700;
  color: var(--eca-blue);
  opacity: .7;
  text-align: right;
  flex-shrink: 0;
}

/* назва */
#step-15 .eca-dd__name{
  font-weight: 600;
  line-height: 1.25;
  word-break: break-word;
  flex: 1;
}

/* =========================
   STEP-15 — HIDE BACK BUTTON
========================= */
#step-15 .eca-btn--back{
  display: none !important;
}

/* =========================
   STEP-15 — HIDE "SIGN" BUTTON
   when VCHASNO links are shown
========================= */

/* якщо в блоці Вчасно є хоча б одна кнопка "Відкрити у Вчасно" */
#step-15:has(
  #vchasno-box .eca-docprev-btn:not([style*="display:none"])
) .eca-actions #btn-sign{
  display: none !important;
}