/* ============ Токени ============ */
:root{
  --blue: #0a33ff;
  --blue-600:#0b2fe0;
  --text: #0f172a;
  --muted:#64748b;
  --line:#e5e7eb;

  --card-w: 448px;
  --card-px: 28px;
  --card-py: 26px;
  --card-r: 12px;
  --shadow: 0 18px 40px rgba(0,0,0,.14);
}

html, body {
  height: 100%;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1 0 auto; /* основний контент займає весь простір */
}

/* ============ Шапка gov.ua (у потоці) ============ */
.govua{
  position: relative !important;
  z-index: 2 !important;     
  display: flex;
  justify-content: flex-end;
  padding: 16px 28px 0;
  background: transparent;
  padding: 16px 16px 0 16px;
}
.govua-link{
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0px;
  padding: 10px 14px;

  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(15,23,42,.08);

  color: var(--text);
  text-decoration: none;
  max-width: min(520px, calc(100vw - 32px)); /* не вилазить на вузьких */
}
.gov-line {
  display: flex;
  align-items: center;
  gap: 6px;              
}
.gov-text{ font-weight:700; font-size:22px; line-height:1.2; }
.agency-text{ font-size:14px; color:#6b7280; line-height:1.2; }
.bar {
  width: 6px;
  height: 28px;
  border-radius: 0;
  margin-left: 4px;
}
.blue{ background:#2d69e3; }
.yellow{ background:#fbe358; }

/* ============ Футер-плашка (у потоці, скролиться разом) ============ */
.pf-rail-footer {
  position: relative;
  z-index: 1;
  width: max-content;
  max-width: min(760px, calc(100vw - 32px));
  margin: 0 0 16px 16px;   /* зліва внизу */
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .08);
  margin-top: auto; /* штовхає вниз без фіксованих пікселів */
}
.pf-rail__emblem{width:48px;height:48px;opacity:.9;flex:0 0 auto}
.pf-rail__col{display:flex;align-items:center;min-width:0}
.pf-rail__col p{margin:0;font-size:13px;line-height:1.4;color:#6b7280;white-space:normal}

/* ============ Адаптив ============ */
@media (max-width:1200px){
  .group{width:min(94vw,520px)}
  .text-wrapper-15{font-size:clamp(20px,1.9vw,24px)}
  .fon img{width:72vmin;height:72vmin}
  .fon .vector{left:-24vmin;top:-14vmin}
  .fon .img{right:-24vmin;top:44vmin}
}

@media (max-width:992px){
  .group{width:min(96vw,500px);padding:24px 22px}
  .rectangle-5,.rectangle-4{height:42px;font-size:15px}
  .passthrouh{height:44px}
  .fon img{width:64vmin;height:64vmin}
  .fon .img{top:48vmin}
}

@media (max-width:768px){
  .govua{padding:12px 12px 0}
  main.container{
    flex: 1 0 auto;          /* тягнеться, щоб футер опинився внизу */
    display: grid;
    place-items: center;
    padding: 24px 16px;
    box-sizing: border-box;
}
  .group{width:100%;max-width:460px;padding:22px 18px;border-radius:10px}
  .remember-me{flex-wrap:wrap;gap:10px 12px}
  .pf-rail-footer{
    margin: 0 auto 36px;          /* центр + піднятий трохи вище */
    max-width: calc(100vw - 24px);
    gap:10px;padding:10px 12px;display:flex;justify-content:center
  }
  .pf-rail__emblem{width:42px;height:42px}
  .pf-rail__col p{font-size:12px}
  .fon img{width:84vmin;height:84vmin}
  .fon .vector{left:-34vmin;top:-30vmin}
  .fon .img{right:-34vmin;top:56vmin}
}

@media (max-width:576px){
  .group{max-width:420px;padding:20px 14px;box-shadow:0 12px 28px rgba(0,0,0,.10)}
  .rectangle-5,.rectangle-4{height:42px;font-size:14px}
  .passthrouh{height:44px;font-size:15px}
}

@media (max-width:400px){
  .group{padding:18px 12px}
  .rectangle-5,.rectangle-4{height:40px}
  .passthrouh{height:42px}
  .gov-text{font-size:20px}
  .agency-text{font-size:12px}
  .bar{height:26px}
}

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