/* ============================================================
   extra.css — мои добавки поверх оригинального belastingdienst.css
   (полоса языка, страница оплаты, баннеры, кнопка pay, дропдауны)
   ============================================================ */

/* ---------- Language bar (полоса EN/NL под шапкой) ---------- */
.bld-language-bar {
  background-color: #eef7fb;
  border-bottom: 1px solid #8fcae7;
  color: #154273;
  cursor: pointer;
  font-size: .875rem;
  padding: .5rem 0;
}
.bld-language-bar .container { max-width: 724px; }
.bld-language-bar span { text-decoration: underline; }
.bld-language-bar:hover span,
.bld-language-bar:focus span { text-decoration-thickness: 2px; }
.bld-language-bar:focus { outline: 2px solid #01689b; outline-offset: -2px; }

/* ---------- Поиск в navbar на десктопе (>=576px) ----------
   На оригинале поле поиска видно в navbar всегда; кнопка-иконка
   (.bld-knop-zoek, d-sm-none) — только на мобильном. */
@media (min-width: 576px) {
  .header .navbar .nav-item.search > .dropdown-menu {
    background: transparent;
    border: 0;
    box-shadow: none;
    display: block;
    float: none;
    margin: 0;
    padding: 0;
    position: static;
  }
}

/* ---------- Дропдауны без bootstrap.js ---------- */
.navbar .dropdown-menu { z-index: 1100; }
.navbar .dropdown-menu .bld-load-menu ul { list-style: none; margin: 0; padding: 0; }
.navbar .dropdown-menu .bld-load-menu ul > li { margin-bottom: .25rem; }
.navbar .dropdown-menu .bld-load-menu a {
  color: #01689b;
  display: block;
  padding: .25rem .5rem;
  text-decoration: underline;
}
.navbar .dropdown-menu .bld-load-menu a:hover { color: #01354f; }
.navbar .dropdown-menu .bld-menu.bld-link-buttons { min-width: 260px; }

/* ---------- Страница оплаты (контент) ---------- */
.bld-pay-page { padding-bottom: 3rem; padding-top: 1.5rem; }

.bld-breadcrumb {
  color: #6c757d;
  font-size: .875rem;
  margin-bottom: 1rem;
}
.bld-breadcrumb .sep { margin: 0 .35rem; }
.bld-breadcrumb a { color: #01689b; }
.bld-breadcrumb a:hover { color: #01354f; }

.bld-pay-page h1 {
  color: #154273;
  font-family: RObold, 'Segoe UI', Helvetica Neue, sans-serif;
  font-size: 2rem;
  font-weight: normal;
  margin-bottom: 1rem;
}
.bld-pay-page .lead { font-size: 1.125rem; max-width: 65ch; }

.bld-section { border-top: 1px solid #cbd5e1; margin-top: 2rem; padding-top: 1.25rem; }
.bld-section h2 {
  color: #154273;
  font-family: RObold, 'Segoe UI', Helvetica Neue, sans-serif;
  font-size: 1.25rem;
  font-weight: normal;
  margin-bottom: .75rem;
}
.bld-why-text { font-style: italic; }

/* Таблица данных дела */
.kv {
  border: 1px solid #cbd5e1;
  margin: 1rem 0 1.5rem;
  max-width: 560px;
}
.kv-row {
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  gap: 1rem;
  padding: .5rem .75rem;
}
.kv-row:last-child { border-bottom: 0; }
.kv-row span:first-child { font-weight: 700; min-width: 14rem; }

/* ---------- Мобильная версия (<576px) ----------
   Таблица дела: метка и значение друг под другом (как dl на gov-сайтах),
   история платежей — компактнее. Заодно убираем горизонтальный скролл. */
@media (max-width: 575.98px) {
  .kv-row { flex-direction: column; gap: .1rem; }
  .kv-row span:first-child { min-width: 0; }

  .pay-history-table th,
  .pay-history-table td { font-size: .875rem; padding: .4rem .5rem; }

  /* как table-responsive у оригинала: широкая таблица скроллится внутри блока */
  #payHistory { -webkit-overflow-scrolling: touch; overflow-x: auto; }
  .pay-history-table { min-width: 520px; }

  .bld-pay-page h1 { font-size: 1.75rem; }
  .bld-pay-page .lead { font-size: 1rem; }
  .btn.bld-pay-btn { padding: .6rem 1.5rem; }
  .third-party-box { padding: .75rem; }
  .travel-ban { padding: .75rem; }
  .letter-meta { font-size: .8125rem; }
}

.amount-line {
  align-items: baseline;
  display: flex;
  gap: .75rem;
  margin: 1rem 0;
}
.amount-line .amount-value {
  color: #01689b;
  font-family: RObold, 'Segoe UI', Helvetica Neue, sans-serif;
  font-size: 1.75rem;
}
.due-line, .ref-line { font-weight: 700; }

/* ---------- Кнопка оплаты (в стиле их синих кнопок) ---------- */
.btn.bld-pay-btn {
  background-color: #01689b;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .15);
  color: #fff;
  cursor: pointer;
  font-family: RObold, 'Segoe UI', Helvetica Neue, sans-serif;
  font-size: 1.125rem;
  padding: .75rem 3rem;
}
.btn.bld-pay-btn:hover {
  background-color: #01689b;
  box-shadow: inset 0 -48px 0 rgba(0, 0, 0, .15);
  color: #fff;
  text-decoration: none;
  transition: box-shadow .15s;
}
.btn.bld-pay-btn:focus { box-shadow: 0 0 0 4px #007bc7; outline: 2px solid #fff; }
.btn.bld-pay-btn:disabled { opacity: .5; cursor: default; }

.spinner-note { color: #64748b; font-size: .875rem; margin-top: .5rem; }

/* ---------- Письменные детали (letter-meta) ---------- */
.letter-meta {
  color: #64748b;
  font-size: .875rem;
  margin: 0 0 .75rem;
  text-align: right;
}
.letter-meta p { margin: 0 0 .15rem; }
.letter-betreft {
  color: #154273;
  font-family: RObold, 'Segoe UI', Helvetica Neue, sans-serif;
  font-size: 1rem;
  margin-top: .5rem !important;
  text-align: left;
}
.letter-link-box { margin: .75rem 0 1rem; }

/* ---------- Разбивка суммы ---------- */
.breakdown-list {
  border: 1px solid #e2e8f0;
  list-style: none;
  margin: .5rem 0;
  max-width: 560px;
  padding: 0;
}
.breakdown-list li {
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  padding: .4rem .75rem;
}
.breakdown-list li:last-child { border-bottom: 0; }
.breakdown-list li span:last-child { font-weight: 700; }

/* ---------- Mijn Belastingdienst ---------- */
.mijn-login-link {
  color: #01689b;
  font-family: RObold, 'Segoe UI', Helvetica Neue, sans-serif;
  text-decoration: underline;
}
.mijn-login-link:hover { color: #01354f; }

.amount-line.amount-remaining { margin-top: .25rem; }
.amount-line .amount-muted {
  color: #64748b;
  font-size: 1.125rem;
}
.paid-so-far {
  color: #39870c;
  font-weight: 700;
  margin: 0;
}

/* ---------- Ввод суммы частичной оплаты ---------- */
.pay-amount-box { margin: .75rem 0 1rem; }
.pay-amount-box label { font-weight: 700; }
.pay-amount-box input {
  border: 1px solid #8fcae7;
  border-radius: 0;
  font-family: RObold, 'Segoe UI', Helvetica Neue, sans-serif;
  font-size: 1.125rem;
  padding: .5rem .75rem;
  width: 10rem;
}
.pay-amount-box input:focus { border-color: #01689b; outline: 2px solid #007bc7; }
.pay-amount-cur { font-weight: 700; margin-left: .35rem; }

/* ---------- Оплата третьим лицом (галочка) ---------- */
.third-party-box {
  background: #e1eff5;
  border-left: 6px solid #01689b;
  margin: 0 0 1rem;
  max-width: 560px;
  padding: .75rem 1rem;
}
.third-party-label {
  align-items: flex-start;
  cursor: pointer;
  display: flex;
  font-weight: 700;
  gap: .5rem;
}
.third-party-label input[type='checkbox'] {
  accent-color: #01689b;
  flex: none;
  height: 1.15rem;
  margin: .1rem 0 0;
  width: 1.15rem;
}
.third-party-label:hover span { text-decoration: underline; }
.third-party-details { margin-top: .75rem; }
.payer-name-label { display: block; font-size: .875rem; margin-bottom: .25rem; }
.payer-name-input {
  border: 1px solid #8fcae7;
  border-radius: 0;
  font-size: 1rem;
  max-width: 24rem;
  padding: .5rem .75rem;
  width: 100%;
}
.payer-name-input:focus { border-color: #01689b; outline: 2px solid #007bc7; }
.third-party-legal {
  color: #154273;
  font-size: .8125rem;
  line-height: 1.45;
  margin: .6rem 0 0;
}

/* ---------- Бланк для оплаты в банке (PDF) ---------- */
.bank-form-box { margin: 1rem 0 0; }
.bank-form-box span { font-weight: 700; }
.bank-form-link {
  color: #01689b;
  text-decoration: underline;
  white-space: nowrap;
}
.bank-form-link:hover { color: #01354f; }

/* ---------- История платежей ---------- */
.pay-history-table {
  border-collapse: collapse;
  margin: 1rem 0;
  max-width: 560px;
  width: 100%;
}
.pay-history-table th,
.pay-history-table td {
  border: 1px solid #cbd5e1;
  padding: .5rem .75rem;
  text-align: left;
  vertical-align: top;
}
.pay-history-table thead th {
  background: #eef7fb;
  font-family: RObold, 'Segoe UI', Helvetica Neue, sans-serif;
  font-weight: normal;
}
.pay-history-table td:nth-child(2) { white-space: nowrap; }
.hist-status.hist-paid {
  color: #39870c;
  font-weight: 700;
}
.no-payments { color: #64748b; font-style: italic; }

/* ---------- Статус-баннеры ---------- */
.banner {
  border: 1px solid;
  margin: 1rem 0;
  max-width: 560px;
  padding: .75rem 1rem;
}
.banner.paid { background: #eef7ea; border-color: #39870c; color: #39870c; }
.banner.partial { background: #e1eff5; border-color: #01689b; color: #01456b; }
.banner.pending { background: #fdf6e3; border-color: #ffb612; color: #94710a; }
.banner.canceled { background: #fbebe8; border-color: #d52b1e; color: #d52b1e; }

/* ---------- Просроченная задолженность: запрет выезда + санкции ---------- */
.travel-ban {
  align-items: flex-start;
  background: #fbebe8;
  border-left: 6px solid #d52b1e;
  display: flex;
  gap: .75rem;
  margin: 1.25rem 0 .75rem;
  max-width: 560px;
  padding: .875rem 1rem;
}
.travel-ban-icon { color: #d52b1e; font-size: 1.25rem; line-height: 1.3; }
.travel-ban-text { color: #8f1d13; }
.travel-ban-text strong { display: block; }
.travel-ban-text span { display: block; font-size: .9375rem; margin-top: .15rem; }
.travel-ban-lift {
  border-top: 1px solid #f3c9c4;
  color: #a0392e;
  font-size: .875rem;
  margin-top: .5rem;
  padding-top: .4rem;
}

.overdue-note {
  color: #d52b1e;
  font-weight: 700;
  margin: 0 0 .75rem;
}

.kv-row.overdue,
.kv-row.overdue span { color: #d52b1e; font-weight: 700; }

.sanctions {
  list-style: disc;
  max-width: 65ch;
  padding-left: 1.5rem;
}
.sanctions li { margin-bottom: .5rem; }

/* ---------- Мелочи ---------- */
.js-to-top { cursor: pointer; }
#topbar { user-select: none; }

/* Встроенная форма оплаты Stripe (embedded checkout) */
#checkoutContainer { max-width: 560px; margin: 1rem 0; }
#checkoutContainer iframe { width: 100%; }

/* Шаг 2 оплаты: сводка суммы + Payment Element в стиле сайта */
.pay-step-summary {
  background: #e1eff5;
  border-left: 6px solid #01689b;
  padding: .75rem 1rem;
  max-width: 560px;
  margin-bottom: 1.25rem;
}
.pay-step-summary .kv-row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; margin: 0;
}
.pay-step-summary .kv-row span { color: #4a6f88; }
.pay-step-summary .kv-row strong { font-size: 1.25rem; }
.pay-step-summary a { display: inline-block; margin-top: .35rem; font-size: .875rem; }
.pay-method-title {
  font-family: 'RObold', Rijksoverheidserif, Georgia, serif;
  font-size: 1.15rem; color: #154273; margin: 0 0 .75rem;
}
#payment-element { max-width: 560px; }
#payment-element iframe { width: 100%; }
#payErrorMsg { max-width: 560px; }