/* ==========================================================================
   Публічні сторінки — mobile-first, за макетом «Вишгород — цифровий благоустрій»
   ========================================================================== */

:root {
  --green:        #1E8E3E;
  --green-dark:   #14682C;
  --green-hover:  #17752F;
  --green-soft:   #E9F5EC;
  --green-line:   #BFE0C8;

  --text:         #16211A;
  --text-muted:   #6B7A70;
  --text-faint:   #93A099;

  --bg:           #F1F4F2;
  --surface:      #FFFFFF;
  --border:       #E1E7E3;
  --border-strong:#CBD5CE;

  --danger:       #C62828;
  --danger-soft:  #FDECEC;
  --warning:      #B26A00;
  --warning-soft: #FFF6E5;

  --radius:       12px;
  --radius-sm:    9px;
  --shadow:       0 1px 2px rgba(22, 33, 26, .06), 0 1px 3px rgba(22, 33, 26, .04);
  --shadow-lg:    0 4px 20px rgba(22, 33, 26, .08);

  --container:    720px;
  --nav-h:        62px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;

  /* сторінка на всю висоту екрана — щоб підвал не висів посеред порожнечі */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

a { color: var(--green-dark); }

/* ---------------------------------------------------------------- Шапка -- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.site-header__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  min-width: 0;
}

.brand__mark {
  flex: none;
  height: 40px;
  display: grid;
  place-items: center;
  color: var(--green-dark);
}

.brand__logo {
  height: 40px;
  width: auto;
  max-width: 52px;
  object-fit: contain;
  display: block;
}

.brand__text {
  font-weight: 700;
  font-size: 14px;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.brand__text span {
  display: block;
  font-weight: 600;
  color: var(--text-muted);
}

/* меню акаунта і перемикач мови — праворуч у шапці */
.account {
  margin-left: auto;
  position: relative;
}

.lang {
  position: relative;
}

.lang > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 8px;
  border-radius: 8px;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  user-select: none;
}

.lang > summary::-webkit-details-marker { display: none; }
.lang > summary:hover { background: var(--bg); color: var(--text); }

.lang__menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 120px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  padding: 4px;
  overflow: hidden;
}

.lang__menu a {
  display: block;
  padding: 8px 12px;
  border-radius: 6px;
  text-decoration: none;
  color: var(--text);
  font-size: 14px;
}

.lang__menu a:hover { background: var(--bg); }
.lang__menu a[aria-current="true"] { color: var(--green-dark); font-weight: 700; }

/* верхня навігація (тільки десктоп) */
.top-nav { display: none; }

/* -------------------------------------------------------------- Контент -- */
.page {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 16px 16px calc(var(--nav-h) + 20px);

  flex: 1;
  display: flex;
  flex-direction: column;
}

.page > * { flex: 0 0 auto; }
.page > .site-footer { margin-top: auto; }

.page__title {
  margin: 4px 0 2px;
  font-size: 22px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.page__subtitle {
  margin: 0 0 16px;
  color: var(--text-muted);
  font-size: 14px;
}

/* картка обʼєкта */
.object-card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: var(--shadow);
  margin-bottom: 22px;
}

.object-card__icon {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--green-soft);
  display: grid;
  place-items: center;
  font-size: 24px;
  color: var(--green-dark);
}

.object-card__body { min-width: 0; }

.object-card__name {
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 2px;
}

.object-card__meta {
  color: var(--text-muted);
  font-size: 14px;
}

.object-card__loc {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  color: var(--green-dark);
  font-size: 13.5px;
}

.object-card__photo {
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  margin-bottom: 18px;
  display: block;
}

/* ------------------------------------------------------------- Секції -- */
.field-group { margin-bottom: 22px; }

.field-group__label {
  display: block;
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 10px;
}

.req  { color: var(--danger); }
.hint { color: var(--text-muted); font-weight: 400; font-size: 13.5px; }

/* сітка чекбоксів */
.check-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
}

.check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  line-height: 1.35;
  cursor: pointer;
  color: var(--text);
}

.check input[type="checkbox"],
.check input[type="radio"] {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--green);
  cursor: pointer;
}

.check--other { grid-column: 1 / -1; }

/* поля вводу */
.input,
.textarea,
.select {
  width: 100%;
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 11px 12px;
  outline: none;
  transition: border-color .12s ease, box-shadow .12s ease;
}

.input::placeholder,
.textarea::placeholder { color: var(--text-faint); }

.input:focus,
.textarea:focus,
.select:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(30, 142, 62, .13);
}

.textarea { min-height: 104px; resize: vertical; }

.textarea-wrap { position: relative; }

.counter {
  position: absolute;
  right: 10px;
  bottom: 8px;
  font-size: 12px;
  color: var(--text-faint);
  pointer-events: none;
  background: var(--surface);
  padding-left: 4px;
}

/* поле з іконкою */
.input-icon {
  position: relative;
  display: block;
}

.input-icon svg {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-faint);
  pointer-events: none;
}

.input-icon .input { padding-left: 36px; }

.input-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

/* зона фото */
.dropzone {
  display: block;          /* це <label> — без block рамка ламає потік */
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 26px 16px;
  text-align: center;
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}

.dropzone:hover,
.dropzone.is-over {
  border-color: var(--green);
  background: var(--green-soft);
}

.dropzone__icon { color: var(--green); margin-bottom: 8px; }

.dropzone__text {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.4;
}

.dropzone input[type="file"] { display: none; }

.dropzone-hint {
  text-align: center;
  font-size: 12.5px;
  color: var(--text-faint);
  margin-top: 8px;
}

.thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.thumbs img {
  width: 68px;
  height: 68px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--border);
}

/* типи звернення */
.choice {
  display: block;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 12px 14px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}

.choice:has(input:checked) {
  border-color: var(--green);
  background: var(--green-soft);
}

.choice__head {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 600;
  font-size: 14.5px;
}

.choice__hint {
  display: block;          /* span усередині label — без цього margin не працює */
  margin: 5px 0 0 27px;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.4;
}

.choice__extra {
  margin: 12px 0 0 27px;
  display: none;
}

.choice:has(input:checked) .choice__extra { display: block; }

/* згода */
.consent {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  font-size: 12.8px;
  line-height: 1.45;
  color: var(--text-muted);
  margin: 18px 0 14px;
}

.consent svg { flex: none; color: var(--green); margin-top: 1px; }

/* кнопки */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 15px 20px;
  border: none;
  border-radius: var(--radius);
  background: var(--green);
  color: #fff;
  font: inherit;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background .12s ease, transform .06s ease;
}

.btn:hover  { background: var(--green-hover); }
.btn:active { transform: translateY(1px); }

.btn--ghost {
  background: var(--surface);
  color: var(--green-dark);
  border: 1px solid var(--green-line);
  text-transform: none;
  letter-spacing: 0;
}

.btn--ghost:hover { background: var(--green-soft); }

.btn--inline { width: auto; }

.link-row {
  text-align: center;
  margin-top: 16px;
  font-size: 14px;
}

.link-row a { color: var(--green-dark); text-decoration: none; font-weight: 600; }
.link-row a:hover { text-decoration: underline; }

/* honeypot */
.hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  opacity: 0;
}

/* повідомлення */
.alert {
  border-radius: var(--radius);
  padding: 12px 14px;
  font-size: 14px;
  margin-bottom: 18px;
  border: 1px solid transparent;
}

.alert--error   { background: var(--danger-soft);  border-color: #F4C7C7; color: #8E1F1F; }
.alert--warning { background: var(--warning-soft); border-color: #F0DCB4; color: #7A4A00; }
.alert--info    { background: var(--green-soft);   border-color: var(--green-line); color: var(--green-dark); }

.alert ul { margin: 0; padding-left: 18px; }

/* таблиця специфікації */
.specs {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  font-size: 14px;
}

.specs tr + tr { border-top: 1px solid var(--border); }

.specs th {
  text-align: left;
  font-weight: 600;
  color: var(--text-muted);
  padding: 11px 14px;
  width: 42%;
  vertical-align: top;
}

.specs td { padding: 11px 14px; vertical-align: top; }

/* бейджі */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--bg);
  color: var(--text-muted);
  border: 1px solid var(--border);
}

.badge--active   { background: var(--green-soft);   color: var(--green-dark); border-color: var(--green-line); }
.badge--repair   { background: var(--warning-soft); color: var(--warning);    border-color: #F0DCB4; }
.badge--written  { background: var(--danger-soft);  color: var(--danger);     border-color: #F4C7C7; }

/* стан / результат */
.state {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 30px 22px;
  text-align: center;
  box-shadow: var(--shadow);
}

.state__icon {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin: 0 auto 14px;
  background: var(--green-soft);
  color: var(--green);
}

.state__icon--warn   { background: var(--warning-soft); color: var(--warning); }
.state__icon--danger { background: var(--danger-soft);  color: var(--danger); }

.state__title { font-size: 19px; font-weight: 700; margin: 0 0 8px; }

.state__text {
  color: var(--text-muted);
  font-size: 14.5px;
  margin: 0 auto;
  max-width: 42ch;
  line-height: 1.5;
}

.state .btn { margin-top: 22px; }

/* список моїх заявок */
.report-item {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 13px 14px;
  margin-bottom: 10px;
  text-decoration: none;
  color: inherit;
}

.report-item__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

.report-item__num { font-weight: 700; font-size: 14px; }
.report-item__date { font-size: 12.5px; color: var(--text-faint); }
.report-item__text { font-size: 13.5px; color: var(--text-muted); }

/* довільний текстовий блок */
.prose h2 { font-size: 16px; margin: 22px 0 8px; }
.prose p  { margin: 0 0 10px; color: var(--text-muted); font-size: 14.5px; }
.prose ul { margin: 0 0 10px; padding-left: 20px; color: var(--text-muted); font-size: 14.5px; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
}

/* -------------------------------------------------------------- Підвал -- */
.site-footer {
  margin-top: 26px;
  padding: 18px 4px 4px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  text-align: center;
}

.site-footer__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 13px;
  line-height: 1.4;
}

.site-footer__seg {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.site-footer__mark {
  display: inline-flex;
  color: var(--green);
}

.site-footer__muted { color: var(--text-muted); }

.site-footer__name {
  font-weight: 700;
  color: var(--green-dark);
  text-decoration: none;
}

.site-footer__name:hover { text-decoration: underline; }

.site-footer__sep {
  color: var(--border-strong);
  user-select: none;
}

.site-footer__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--green-soft);
  color: var(--green-dark);
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
  transition: background .12s ease;
}

.site-footer__cta:hover { background: var(--green-line); }

/* на вузьких екранах рядок переноситься — роздільники лише заважають */
@media (max-width: 520px) {
  .site-footer__sep { display: none; }
  .site-footer__row { gap: 5px 10px; }
}

/* ------------------------------------------------------- Нижня навігація -- */
.bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  height: var(--nav-h);
  background: var(--surface);
  border-top: 1px solid var(--border);
  display: flex;
  padding-bottom: env(safe-area-inset-bottom);
}

.bottom-nav a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  text-decoration: none;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  transition: color .15s ease, background .15s ease;
}

/* 11 px — дрібний текст, тож кольори тут беремо контрастні:
   світло-сірий давав лише 2.7:1 і майже зливався з білим тлом */
.bottom-nav a[aria-current="page"] {
  color: var(--green-dark);
  background: var(--green-soft);
}

.bottom-nav a:active {
  color: var(--green-dark);
  background: var(--green-line);
}

/* --------------------------------------------------------------- Десктоп -- */
@media (min-width: 640px) {
  .check-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .check--other { grid-column: auto; }
  .input-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .input-row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  body { background: var(--bg); }

  /* Ширший контейнер: пункти меню з довгими назвами («Створити звернення»)
     інакше переносяться на два рядки й ламають шапку. */
  .site-header__inner { max-width: 1120px; padding: 12px 24px; }
  .brand__text { font-size: 15px; }
  .brand__text span { white-space: nowrap; }

  .top-nav {
    display: flex;
    gap: 3px;
    margin-left: 20px;
  }

  .top-nav a {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 11px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--text-muted);
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;      /* назва завжди в один рядок */
  }

  .top-nav a svg { flex: none; }

  .top-nav a:hover { background: var(--bg); color: var(--text); }

  .top-nav a[aria-current="page"] {
    background: var(--green-soft);
    color: var(--green-dark);
  }

  .bottom-nav { display: none; }

  .page {
    max-width: 760px;
    /* нижня навігація тут прихована, тож місце під неї не резервуємо */
    padding: 28px 24px 18px;
  }

  .page__title { font-size: 26px; }

  .page-shell {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
    padding: 28px 30px 32px;
  }

  .page-shell .object-card { background: #FBFDFC; }

  .btn { width: auto; min-width: 280px; padding: 15px 34px; }
  .btn--full { width: 100%; }
  /* компактні кнопки не мають розтягуватись на десктопі */
  .btn--inline { min-width: 0; padding: 9px 18px; }
  .submit-row { display: flex; justify-content: flex-end; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* поле коду підтвердження — великі цифри по центру */
.code-input {
  font-size: 26px;
  letter-spacing: .35em;
  text-align: center;
  font-variant-numeric: tabular-nums;
  padding: 14px 12px;
}

.code-input::placeholder { letter-spacing: .35em; }

/* ------------------------------------------------------- Меню акаунта -- */
.account > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 7px 8px;
  border-radius: 8px;
  color: var(--text-muted);
  user-select: none;
  position: relative;
}

.account > summary::-webkit-details-marker { display: none; }
.account > summary:hover { background: var(--bg); color: var(--text); }
.account[open] > summary { background: var(--green-soft); color: var(--green-dark); }

/* зелена крапка — ознака, що людина увійшла */
.account__dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  border: 2px solid var(--surface);
}

.account__menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  width: 268px;
  max-width: calc(100vw - 24px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 6px;
  z-index: 40;
}

.account__head {
  padding: 8px 10px 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}

.account__name { font-weight: 700; font-size: 14px; }
.account__muted { font-size: 12.5px; color: var(--text-muted); }

.account__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--text);
  font-size: 14px;
}

.account__item:hover { background: var(--bg); }

.account__form { padding: 6px 8px 4px; }

.account__label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  margin: 6px 0 4px;
}

.account__form .input { padding: 9px 11px; font-size: 14px; }

/* На десктопі .btn має min-width: 280px — усередині панелі 268px кнопка
   через це вилазила за край. Тут ширину задає сама панель. */
.account__form .btn {
  width: 100%;
  min-width: 0;
  margin-top: 12px;
  padding: 11px;
  font-size: 14px;
  letter-spacing: .02em;
}

.account__sep {
  height: 1px;
  background: var(--border);
  margin: 6px 4px;
}

/* На вузьких екранах меню акаунта прив'язуємо до шапки, а не до самої
   іконки: інакше панель шириною 268px не влазить і зрізається зліва. */
@media (max-width: 560px) {
  .site-header__inner { position: relative; }
  .account { position: static; }

  .account__menu {
    left: 16px;
    right: 16px;
    width: auto;
    max-width: none;
    top: calc(100% + 6px);
  }
}

/* згода — тепер галочка, яку треба поставити свідомо */
.consent--check {
  cursor: pointer;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  transition: border-color .12s ease, background .12s ease;
}

.consent--check:hover { border-color: var(--green-line); }

.consent--check:has(input:checked) {
  border-color: var(--green-line);
  background: var(--green-soft);
}

.consent--check input[type="checkbox"] {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--green);
  cursor: pointer;
}

/* блок зміни пароля в кабінеті — згорнутий, щоб не заважати заявкам */
.password-box {
  margin-top: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.password-box > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 15px;
  font-weight: 600;
  font-size: 14.5px;
  color: var(--text);
  user-select: none;
}

.password-box > summary::-webkit-details-marker { display: none; }
.password-box > summary:hover { color: var(--green-dark); }
.password-box[open] > summary { border-bottom: 1px solid var(--border); }
.password-box__body { padding: 15px 15px 4px; }
.password-box__body .field-group { margin-bottom: 16px; }

/* ── Сторінка «Контакти» ──────────────────────────────────────────────── */
.contact-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.contact-list {
  display: flex;
  flex-direction: column;
}

.contact-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}

.contact-item:last-child { border-bottom: 0; padding-bottom: 2px; }

.contact-item__icon {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--green-soft);
  display: grid;
  place-items: center;
  font-size: 18px;
  line-height: 1;
}

.contact-item__body { min-width: 0; flex: 1; }

.contact-item__title {
  font-weight: 700;
  font-size: 14.5px;
  margin-bottom: 2px;
}

/* значення може бути багаторядковим — адреса, графік роботи */
.contact-item__value {
  display: block;
  font-size: 15px;
  color: var(--text);
  white-space: pre-line;
  overflow-wrap: anywhere;
}

a.contact-item__value {
  color: var(--green-dark);
  font-weight: 600;
  text-decoration: none;
}

a.contact-item__value:hover { text-decoration: underline; }

.contact-item__note {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 3px;
}

/* іконка в заголовку розділу «Інформація» */
.prose__icon {
  font-size: .95em;
  margin-right: 2px;
}

/* ── Дані для входу в формі реєстрації ────────────────────────────────── */
.creds {
  padding: 15px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.creds__label {
  display: block;
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 7px;
}

.creds__tools {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.creds__show { font-size: 13.5px; margin: 0; }

.creds__note {
  margin: 10px 0 0;
  padding: 9px 11px;
  border-radius: var(--radius-sm);
  background: var(--green-soft);
  border: 1px solid var(--green-line);
  color: var(--green-dark);
  font-size: 13px;
}

/* «Створити заявку» в шапці — головна дія, тому суцільна зелена кнопка.

   Два підводні камені, через які кнопка ламалась:
   1) `.top-nav a[aria-current="page"]` світлий і специфічніший за просто
      `.top-nav__cta` — білий текст лишався на світлому тлі й ставав нечитним.
      Тому всі селектори тут довші: `.top-nav a.top-nav__cta…`.
   2) У `:hover` і в `[aria-current="page"]` однакова специфічність, тож
      вирішує порядок: стани наведення й натискання мають іти НИЖЧЕ за
      стан поточної сторінки, інакше на власній сторінці кнопка не реагує.

   Відтінки лише темні: білий на світло-зеленому дає 4.2:1 і не дотягує. */
@media (min-width: 900px) {
  .top-nav a.top-nav__cta {
    background: var(--green-hover);
    color: #fff;
    box-shadow: 0 1px 2px rgba(20, 104, 44, .25);
    transition: background .15s ease, box-shadow .15s ease, transform .08s ease;
  }

  /* сторінка вже відкрита — світле кільце навколо */
  .top-nav a.top-nav__cta[aria-current="page"] {
    background: var(--green-dark);
    color: #fff;
    box-shadow: 0 0 0 3px var(--green-soft);
  }

  /* наведення — помітно темніший фон і кнопка трохи піднімається.
     Ідуть після [aria-current], щоб працювати й на поточній сторінці. */
  .top-nav a.top-nav__cta:hover,
  .top-nav a.top-nav__cta[aria-current="page"]:hover {
    background: #0F5222;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(15, 82, 34, .35);
  }

  /* мить натискання — кнопка втискається */
  .top-nav a.top-nav__cta:active,
  .top-nav a.top-nav__cta[aria-current="page"]:active {
    background: #0A3D19;
    color: #fff;
    transform: translateY(1px);
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, .28);
  }

  .top-nav a.top-nav__cta:focus-visible {
    outline: 2px solid var(--green-dark);
    outline-offset: 3px;
  }
}