/* Загальні стилі */
body {
  background-color: #121212;
  color: #f0f0f0;
  font-family: 'Arial', sans-serif;
  padding: 40px 20px;
}

h1 {
  margin-top: 30px !important;
  margin-bottom: 30px !important;
}

h2 {
  text-align: center;
  color: #ffffff;
  margin-bottom: 30px;
}

/* Вирівнювання блоку калькулятора одразу за h1 */
body h1 + #zedCalculator,
body h1 + .form-container {
  margin-top: 30px !important;
}

/* Прибираємо стандартні відступи WP */
.entry-content,
.page-content,
.container {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Блок форми */
.form-container {
  max-width: 500px;
  margin: 0 auto;
  background-color: #1e1e1e;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

/* Стилі label */
.form-container label {
  display: block;
  margin-bottom: 2px;
  color: #e0e0e0;
  font-size: 15px;
}

.form-container label + select,
.form-container label + input {
  margin-top: 2px !important;
  margin-bottom: 8px !important;
}

.form-container select:last-of-type,
.form-container input:last-of-type {
  margin-bottom: 15px !important;
}

/* Поля форми */
select, input {
  width: 100%;
  padding: 8px 10px;
  background-color: #2c2c2c;
  color: #f0f0f0;
  border: 1px solid #444;
  border-radius: 4px;
  font-size: 14px;
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.05);
  box-sizing: border-box;
}

input:focus,
select:focus {
  border-color: #4caf50;
  box-shadow: 0 0 5px rgba(76, 175, 80, 0.5);
  outline: none;
}

/* Кнопка */
button {
  background-color: #4caf50;
  color: white;
  padding: 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  width: 100%;
  transition: background-color 0.3s ease;
  margin-top: 10px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

button:hover {
  background-color: #45a049;
}

/* Блок результату */
.result {
  margin-top: 8px;
  padding: 10px;
  background-color: #2c2c2c;
  border-left: 4px solid #4caf50;
  border-radius: 4px;
  font-weight: bold;
  color: #a1e4a1;
  transition: all 0.3s ease;
}

/* Приховані елементи */
.hidden {
  display: none;
}

.input-error {
  border: 1px solid #f44336 !important;
  box-shadow: 0 0 5px rgba(244, 67, 54, 0.8);
}

select.input-error, input.input-error {
  border: 1px solid #f44336 !important;
  box-shadow: 0 0 3px #f44336;
}

.tooltip-trigger {
  margin-left: 6px;
  background: #444;
  color: #fff;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  font-size: 12px;
  text-align: center;
  line-height: 16px;
  cursor: pointer;
  font-weight: bold;
  position: relative;
}

.tooltip-box {
  position: absolute;
  background-color: #e0f2f1; /* світло-бірюзовий */
  color: #1b1b1b; /* темний текст */
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 13px;
  max-width: 280px;
  line-height: 1.4;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  bottom: 100%;
  left: 0;
  margin-bottom: 8px;
  border: 1px solid #4caf50; /* зелена рамка */
}

.tooltip-box::before {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 12px;
  border-width: 6px;
  border-style: solid;
  border-color: #e0f2f1 transparent transparent transparent;
}

.label-inline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 15px;
  color: #e0e0e0;
  margin-bottom: 4px;
}

.tooltip-wrapper {
  position: relative;
}

#calculate {
  margin-top: 0px; /* менше або більше, залежно від потрібної висоти */
  margin-bottom: 12px; /* додає простір між кнопкою і блоком результату */
}

select.input-error,
select.input-error:focus {
  background-color: #2c2c2c !important;
  color: #f0f0f0 !important;
  border: 1px solid #f44336 !important;
  box-shadow: 0 0 3px #f44336 !important;
}

/* Стилізація іконки календаря в полі дати */
input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1); /* робить іконку білою */
  width: 22px;
  height: 22px;
  cursor: pointer;
}

/* Прибрати стрілки в Chrome, Safari, Edge */
#invoiceAmount::-webkit-outer-spin-button,
#invoiceAmount::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Прибрати стрілки в Firefox */
#invoiceAmount {
  -moz-appearance: textfield;
}

/* Прибрати стрілки в Chrome, Safari, Edge */
#prepaymentAmount::-webkit-outer-spin-button,
#prepaymentAmount::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Прибрати стрілки в Firefox */
#prepaymentAmount {
  -moz-appearance: textfield;
}

.proposal-title-wrap{
  display:flex;
  align-items:center;
  gap:6px;
}
.proposal-info-icon{
  cursor:pointer;
  color:#7fb4ff;
  font-size:16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px;
  height:20px;
  transform: translateY(1px);
}
.proposal-info-icon:hover{
  color:#b8d0ff;
}

.proposal-info-tooltip{
  position:absolute;
  top:100%;
  left:0;
  margin-top:8px;
  background:#2a2a2a;
  color:#e9e9e9;
  border:1px solid #3a3a3a;
  border-radius:10px;
  padding:14px 16px;
  width:min(520px, 86vw);
  box-shadow:0 10px 30px rgba(0,0,0,.5);
  font-size:14px;
  line-height:1.6;
  opacity:0;
  transform:translateY(-4px);
  transition:opacity .15s, transform .15s;
  pointer-events:none;
  z-index:10001;
  text-align:left;   /* ✅ вирівнювання тексту по лівому краю */
}
.proposal-info-tooltip.show{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
.proposal-info-tooltip strong{
  display:block;
  margin-bottom:8px;
  font-size:15px;
  color:#fff;
}
.proposal-info-tooltip ul{
  margin:6px 0 0;
  padding-left:10px; /* ✅ трішки відступу */
  list-style:none;
}
.proposal-info-tooltip li{
  position:relative;
  padding-left:16px;
  margin:6px 0;
  line-height:1.55;
}
.proposal-info-tooltip li::before{
  content:"•";
  position:absolute;
  left:0;
  top:0;
  transform: translateY(3px);
  color:#7fb4ff;
  font-weight:700;
}

.proposal-modal .zed-modal-content { overflow: visible; }

.proposal-info-tooltip { word-wrap: break-word; overflow-wrap: anywhere; }

@media (max-width: 400px){
  .proposal-info-tooltip { left: 0; right: 0; width: auto; }
}

/* стрілочка фону */
.proposal-info-tooltip::after{
  content:"";
  position:absolute;
  top:-8px;
  left:20px;               /* підженеш за смаком */
  border:8px solid transparent;
  border-bottom-color:#2a2a2a;
}
/* тонкий кант під стрілочку, щоб збігався з рамкою */
.proposal-info-tooltip::before{
  content:"";
  position:absolute;
  top:-9px;
  left:20px;
  border:9px solid transparent;
  border-bottom-color:#3a3a3a;
}

#p-uktzed{
  padding-left: 0 !important;
  list-style: none;
  margin: 6px 0 0;
  text-align: center;
}

#p-uktzed .ukt-li{
  line-height: 1.5;
  font-size: 15px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

#resultText .uktzed-codes {
  margin-top: 10px;   /* відступ зверху */
  display: inline-block;
  text-align: center;
  line-height: 1.6;
}

/* Контейнер поля як і був */
#contractModal .ctr-field{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  position:relative; /* для позиціювання тултіпа та кнопки */
}

/* ОДНА ВИСОТА для інпутів */
#contractModal .ctr-field input{
  height:42px;
  line-height:42px;
  box-sizing:border-box;
}

/* ЛЕЙБЛ — НЕ flex! даємо місце під кнопку праворуч */
#contractModal .ctr-field label,
#contractModal .ctr-label-with-info{   /* перекриває попередній flex-стиль */
  display:block !important;
  position:relative;
  margin:0 0 6px;
  color:#cfd6de;
  min-height:20px;
  line-height:20px;
  padding-right:26px; /* місце під кнопку "i" */
}

/* КНОПКА "i" — абсолютна, не впливає на вирівнювання */
#contractModal .ctr-info-btn{
  position:absolute !important;
  top:0;
  right:0;
  width:18px;
  height:18px;
  border-radius:50%;
  border:1px solid #5a8dee;
  background:transparent;
  color:#cfe0ff;
  font-size:12px;
  font-weight:700;
  line-height:18px;
  padding:0;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* (опціонально) ховер */
#contractModal .ctr-info-btn:hover{ background:#1a2d55; }

/* === KVED autocomplete (темний стиль як у перевірки УКТЗЕД) === */
.kved-autocomplete-items {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 100000;
  max-height: 260px;
  overflow-y: auto;
  border-radius: 6px;
  background: #2b2b2b;               /* темний фон */
  border: 1px solid rgba(255,255,255,.15);
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
  color: #f0f0f0;                    /* світлий текст */
  font-size: 14px;
  text-align: left;                  /* вирівнювання списку зліва */
}

.kved-autocomplete-item {
  padding: 8px 12px;
  cursor: pointer;
  line-height: 1.4;
  text-align: left;                  /* щоб точно не підтягувався центр */
}

.kved-autocomplete-item:hover,
.kved-autocomplete-item.active {
  background: rgba(255,255,255,.08); /* підсвітка при наведенні */
}

.kved-autocomplete-item .highlight {
  font-weight: 600;
  color: #4caf50;                    /* зелена підсвітка збігів */
}


/* === Вирівнювання полів у модалці "Інформація про заявника" === */
#applicantModal .grid2{
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  column-gap: 12px;
  row-gap: 12px;
  align-items: start;
}

/* базова клітинка */
#applicantModal .grid2 > div{
  position: relative;
  display: flex;
  flex-direction: column;
  /* висота під 2 рядки лейбла + відступ + control */
  min-height: calc(44px + 4px + 2.4em);
}

/* повноширинні блоки не обмежуємо */
#applicantModal .grid2 > div[style*="grid-column:1 / span 2"]{
  min-height: auto;
}

/* лейбл: максимум 2 рядки, менший відступ до поля */
#applicantModal .grid2 label{
  margin: 0 0 4px;             /* було 6px → робимо 4px */
  line-height: 1.2;
  font-weight: 500;
  display: -webkit-box;
  -webkit-line-clamp: 2;       /* максимум 2 рядки */
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
  min-height: calc(1.2em * 2); /* висота під 2 рядки */
}

/* уніфікована висота полів */
#applicantModal .grid2 input[type="text"],
#applicantModal .grid2 input[type="email"],
#applicantModal .grid2 input[type="tel"],
#applicantModal .grid2 select{
  height: 44px;
  line-height: 44px;
  padding: 0 12px;
  box-sizing: border-box;
  width: 100%;
}

/* select у різних браузерах */
#applicantModal .grid2 select{
  line-height: normal;
  padding-right: 36px;
}

/* стабільні бордери */
#applicantModal .grid2 input,
#applicantModal .grid2 select{
  border-width: 1px;
}

/* === MFO autocomplete (темний стиль уніфіковано з KVED) === */
.mfo-autocomplete-items{
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 100000;
  max-height: 260px;
  overflow-y: auto;
  border-radius: 6px;
  background: #2b2b2b;               /* темний фон */
  border: 1px solid rgba(255,255,255,.15);
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
  color: #f0f0f0;                    /* світлий текст */
  font-size: 14px;
}

.mfo-autocomplete-item{
  padding: 8px 12px;
  cursor: pointer;
  line-height: 1.4;
  display: grid;
  grid-template-columns: 88px 1fr;   /* колонки: код + назва */
  column-gap: 10px;
  align-items: center;
  text-align: left;                  /* явно зліва */
}

.mfo-autocomplete-item .mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  opacity: .9;
}

.mfo-autocomplete-item:hover,
.mfo-autocomplete-item.active{
  background: rgba(255,255,255,.08);
}

/* === Tooltip-popup (центр екрана, без fullscreen фону) === */
.appl-label-with-info{
  display:block;
  position:relative;
  padding-right:22px;
  line-height:1.35;
  color:#cfd6de;
}
.appl-info-btn{
  position:absolute;
  right:0; top:0;
  width:18px; height:18px; line-height:16px;
  border-radius:50%;
  border:1px solid #5a8dee;
  background:transparent;
  color:#cfe0ff;
  font-size:12px; font-weight:700;
  padding:0; cursor:pointer;
}
.appl-info-btn:hover{ background:#1a2d55; }

/* Сам попап (без оверлею) */
.appl-tip{
  position:fixed;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  z-index:11000;
  display:none;
}
.appl-tip.show{ display:block; }
.appl-tip .appl-tip-body{
  background:#2a2a2a;
  color:#e9e9e9;
  border:1px solid #3a3a3a;
  border-radius:12px;
  padding:18px 22px;
  box-shadow:0 10px 30px rgba(0,0,0,.6);
  max-width:680px;
  max-height:80vh;
  overflow-y:auto;
  font-size:14px;
  line-height:1.5;
  text-align:left; /* текст зліва */
}

#applWarningModal .zed-modal-content {
  background:#fff3cd;
  border:1px solid #ffeeba;
  color:#856404;
  border-radius:8px;
  padding:20px;
}
#applWarningModal h3 {
  font-size:18px;
  font-weight:700;
}

/* компактні "пігулки" файлів */
.file-list{ gap:4px; }
.file-pill{
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid #3a3a3a; border-radius:999px;
  padding:3px 10px; font-size:12px; background:#0f0f0f;
}
.file-pill .name{
  /* показуємо більше назви на широких екранах, але не ламаємо верстку */
  max-width: clamp(200px, 60vw, 680px);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.file-pill .remove{ cursor:pointer; border:none; background:transparent; color:#ff9c9c; font-weight:700; line-height:1 }

/* ===== Оверлей завантаження в модалці "Додатки" ===== */
#docsUploadOverlay{
  position:fixed; inset:0; z-index:10000;
  background:rgba(0,0,0,.65);
  display:none;                 /* сховано за замовчуванням */
  align-items:center;           /* центрування по вертикалі */
  justify-content:center;       /* центрування по горизонталі */
  backdrop-filter: blur(2px);
}
.docs-upload-box{
  width:min(460px, 92vw); background:#1d1d1d; color:#eaeaea;
  border:1px solid #3a3a3a; border-radius:16px; padding:20px 18px;
  box-shadow:0 10px 30px rgba(0,0,0,.35); text-align:center;
}
.docs-upload-title{ font-size:16px; font-weight:700; margin:0 0 8px 0; }
.docs-upload-sub{ font-size:13px; color:#aeb6bf; margin:0 0 14px 0; }

/* прогрес-бар */
.docs-progress{
  height:12px; border-radius:999px; background:#0e0e0e; border:1px solid #2c2c2c;
  overflow:hidden; position:relative;
}
.docs-progress > .bar{
  height:100%; width:0%;
  background: linear-gradient(90deg, #5aa9ff, #78ffd6);
  background-size: 200% 100%;
  animation: docs-stripes 1.4s linear infinite;
}
@keyframes docs-stripes{
  0%{ background-position:0% 0; }
  100%{ background-position:200% 0; }
}
.docs-progress-row{
  display:flex; align-items:center; justify-content:space-between; margin-top:8px;
  font-size:12px; color:#cfd6de;
}
.docs-spinner{
  display:inline-block; width:18px; height:18px; border-radius:50%;
  border:3px solid rgba(255,255,255,.25); border-top-color:#79d2ff; margin-right:8px;
  animation: docs-spin 0.9s linear infinite; vertical-align:-4px;
}
@keyframes docs-spin{ to{ transform: rotate(360deg); } }


.proposal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.proposal-head h2 {
  margin: 0;
}

.docs-btn-row {
  margin-top: 14px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.doc-row.loading,
.doc-row.error {
  text-align: center;
  color: #cfd6de;   /* loading */
}

.doc-row.error {
  color: #ffb3b3;   /* error */
}

.db-hint {
  margin-top: 4px;
  font-size: 12px;
  color: #aeb6bf;
}

/* показати тултіп, коли JS додає клас .show */
.appl-tip.show { display: block; }


/* прибираємо вплив глобальних стилів на .saved */
.file-list .file-pill.saved{
  background:#0f0f0f !important;
  border:1px solid #3a3a3a !important;
  color:inherit !important;
}
.file-list .file-pill.saved .name{ color:inherit !important; }
.file-list .file-pill.saved .remove-saved{ color:#ff9c9c !important; }

/* дрібний ховер для посилання-імені */
.file-list .file-pill a.name:hover{ text-decoration:underline; }

/* універсальний клас для ховання блоків */
.is-hidden { display: none !important; }

/* універсальний клас для ховання блоків */
.is-hidden{ display:none !important; }

/* ---- Пігулки: жорстко відрубаємо чужі "зелені" стилі ---- */
.file-list .file-pill,
.file-list .file-pill.saved{
  background:#0f0f0f !important;
  border:1px solid #3a3a3a !important;
  color:inherit !important;
  box-shadow:none !important;
}

/* посилання-ім'я всередині пігулки — звичайний текст, без фону */
.file-list .file-pill .name,
.file-list .file-pill .name:link,
.file-list .file-pill .name:visited{
  color:inherit !important;
  background:transparent !important;
  text-decoration:none;
}

/* кнопки Х — без фону/рамок, червоні */
.file-list .file-pill .remove,
.file-list .file-pill .remove-saved{
  background:transparent !important;
  border:none !important;
  color:#4caf50 !important;
  font-weight:700;
  line-height:1;
  cursor:pointer;
}

/* дрібний ховер для посилання-імені */
.file-list .file-pill a.name:hover{ text-decoration:underline; }

/* (опціонально) більш м’який текст під "Раніше збережено файлів: N" */
.db-hint{ margin-top:4px;font-size:12px;color:#aeb6bf; }

/* разово в <head> */
.doc-row.doc-error{
  outline: 2px solid #d32f2f;
  background:#fff3f3;
  border-radius:6px;
}

/* Текст у модалці білий */
#signedCongratsModal .zed-modal-content {
  color: #fff;
}

/* Фон самої модалки трохи затемнений */
#signedCongratsModal {
  background: rgba(0, 0, 0, 0.85);
}

/* Кнопка залишаємо як є, щоб зелена виглядала контрастно */
#signedCongratsModal .btn-apply {
  color: #fff;
}


#diiaOpenLink {
  color: #ffffff;                /* білий текст */
  text-decoration: underline;    /* щоб було як гіперпосилання */
  font-weight: 500;
  transition: color 0.3s ease;
}

#diiaOpenLink:hover {
  color: #ff7b00;                /* помаранчевий при наведенні */
}

.eka-header {
  position: fixed;
  top: 20px;
  left: 40px;
  z-index: 1000;
}

.eka-logo {
  height: 100px; /* збільшено з 70px до 100px */
  width: auto;
  display: block;
}

body {
  padding-top: 120px; /* збільшений відступ, щоб контент не заходив під лого */
}

@media (max-width: 768px) {
  .eka-logo {
    height: 60px;
  }
  .eka-header {
    top: 10px;
    left: 20px;
  }
  body {
    padding-top: 80px;
  }
}