/* ============================================================
   components.css — хедер, футер, кнопки, блоки, cookie, FAB
   ============================================================ */

/* ====== ТОПБАР (моноширинна стрічка) ====== */
.topbar{
  background:var(--ink);
  color:var(--paper);
  font-family:"Space Mono",monospace;
  font-size:0.72rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  border-bottom:var(--line) solid var(--fire);
}
.topbar__row{
  display:flex;justify-content:space-between;align-items:center;
  gap:14px;padding-block:8px;flex-wrap:wrap;
}
.topbar a:hover{color:var(--yellow)}

/* ====== ХЕДЕР / НАВІГАЦІЯ ====== */
.header{
  position:sticky;top:0;z-index:60;
  background:var(--paper);
  border-bottom:var(--bord-2);
}
.header__row{
  display:flex;align-items:stretch;justify-content:space-between;
  min-height:74px;
}
.brand{
  display:flex;align-items:center;gap:10px;
  font-family:"Archivo",sans-serif;font-weight:900;
  text-transform:uppercase;letter-spacing:-0.02em;
  font-size:1.35rem;line-height:1;
  padding-right:18px;
}
.brand__mark{
  width:38px;height:38px;flex:0 0 auto;
  border:var(--bord);background:var(--fire);
  display:grid;place-items:center;
}
.brand__mark svg{width:24px;height:24px}
.brand small{
  display:block;font-family:"Space Mono",monospace;
  font-size:0.55rem;letter-spacing:0.18em;font-weight:400;margin-top:3px;
}

.nav{display:flex;align-items:center}
.nav__list{display:flex;align-items:stretch}
.nav__link{
  display:flex;align-items:center;padding:0 18px;
  font-family:"Space Mono",monospace;font-weight:700;
  font-size:0.82rem;text-transform:uppercase;letter-spacing:0.04em;
  border-left:var(--bord);
  transition:background .12s,color .12s;
}
.nav__link:hover,.nav__link[aria-current="page"]{
  background:var(--ink);color:var(--yellow);
}

.burger{
  display:none;width:74px;border:0;border-left:var(--bord);
  background:var(--ink);color:var(--yellow);cursor:pointer;
  font-family:"Space Mono",monospace;font-weight:700;font-size:0.72rem;
  text-transform:uppercase;letter-spacing:0.08em;
}

/* ====== КНОПКИ ====== */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:"Space Mono",monospace;font-weight:700;
  text-transform:uppercase;letter-spacing:0.06em;font-size:0.9rem;
  padding:16px 24px;border:var(--bord);background:var(--white);color:var(--ink);
  cursor:pointer;transition:transform .1s,box-shadow .1s;
  box-shadow:var(--shadow-hard);
}
.btn:hover{transform:translate(-3px,-3px);box-shadow:11px 11px 0 var(--ink)}
.btn:active{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--ink)}
.btn--fire{background:var(--fire);color:var(--ink)}
.btn--yellow{background:var(--yellow)}
.btn--ink{background:var(--ink);color:var(--yellow);box-shadow:var(--shadow-fire)}
.btn--ink:hover{box-shadow:11px 11px 0 var(--fire)}
.btn--lg{padding:20px 30px;font-size:1.05rem}

.btn-row{display:flex;flex-wrap:wrap;gap:16px}

/* ====== УНІВЕРСАЛЬНИЙ БЛОК У РАМЦІ ====== */
.box{border:var(--bord);background:var(--white);padding:24px}
.box--big{border:var(--bord-2)}
.box--hover{transition:transform .1s,box-shadow .1s}
.box--hover:hover{transform:translate(-4px,-4px);box-shadow:var(--shadow-hard)}

/* ====== ФУТЕР ====== */
.footer{background:var(--ink);color:var(--paper);border-top:var(--bord-2)}
.footer__grid{
  display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:0;
  border-bottom:var(--line) solid #2a2a2a;
}
.footer__cell{
  padding:34px 24px;border-left:var(--line) solid #2a2a2a;
}
.footer__cell:first-child{border-left:0}
.footer h4{color:var(--yellow);font-size:1rem;letter-spacing:0.04em;margin-bottom:14px}
.footer a:hover{color:var(--fire)}
.footer__links li{margin-bottom:8px;font-family:"Space Mono",monospace;font-size:0.85rem}
.footer__bottom{
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:18px 24px;font-family:"Space Mono",monospace;
  font-size:0.72rem;letter-spacing:0.08em;text-transform:uppercase;color:#9a9a9a;
}
.footer__bottom a:hover{color:var(--yellow)}
.footer__big{
  font-family:"Archivo",sans-serif;font-weight:900;text-transform:uppercase;
  font-size:clamp(1.5rem,4vw,2.4rem);line-height:0.95;letter-spacing:-0.02em;
  color:var(--paper);
}
.footer__phone{
  display:inline-block;margin-top:10px;color:var(--fire);
  font-family:"Space Mono",monospace;font-weight:700;font-size:1.5rem;
}

/* ====== МЕСЕНДЖЕР-РЯД ====== */
.msg-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.msg-chip{
  display:inline-flex;align-items:center;gap:8px;
  border:var(--line) solid var(--paper);padding:8px 14px;
  font-family:"Space Mono",monospace;font-size:0.8rem;font-weight:700;
  text-transform:uppercase;letter-spacing:0.04em;
}
.msg-chip:hover{background:var(--fire);border-color:var(--fire);color:var(--ink)}

/* ====== COOKIE-ПЛАШКА ====== */
.cookie{
  position:fixed;left:14px;right:14px;bottom:14px;z-index:90;
  background:var(--ink);color:var(--paper);
  border:var(--line) solid var(--yellow);box-shadow:var(--shadow-fire);
  padding:18px 20px;
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  max-width:880px;margin-inline:auto;
}
.cookie p{font-size:0.9rem;flex:1 1 320px}
.cookie a{color:var(--yellow);text-decoration:underline}
.cookie__btns{display:flex;gap:10px;flex-wrap:wrap}
.cookie .btn{box-shadow:none;padding:12px 18px;font-size:0.78rem}
.cookie .btn:hover{transform:none;box-shadow:none;background:var(--yellow)}
.cookie .btn--ghost{background:transparent;color:var(--paper);border-color:var(--paper)}
.cookie .btn--ghost:hover{background:var(--paper);color:var(--ink)}

/* ====== МОБ. ЛИПКИЙ НИЖНІЙ БАР (дзвінок) ====== */
.callbar{
  position:fixed;left:0;right:0;bottom:0;z-index:80;
  display:none;grid-template-columns:1fr 1fr 1fr;
  border-top:var(--bord-2);
}
.callbar a{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  padding:11px 4px;font-family:"Space Mono",monospace;font-weight:700;
  font-size:0.66rem;text-transform:uppercase;letter-spacing:0.04em;
  border-left:var(--line) solid var(--ink);
}
.callbar a:first-child{border-left:0}
.callbar .c-tel{background:var(--fire);color:var(--ink)}
.callbar .c-vib{background:var(--ink);color:#7c5cff}
.callbar .c-tg{background:var(--ink);color:#2ea6ff}
.callbar svg{width:20px;height:20px}

/* ====== ДОДАТКИ ====== */
.note-strip{
  background:var(--yellow);border-block:var(--bord);
  font-family:"Space Mono",monospace;font-weight:700;
  text-transform:uppercase;letter-spacing:0.06em;font-size:0.84rem;
  overflow:hidden;white-space:nowrap;
}
.note-strip__inner{display:flex;gap:40px;padding:11px 0;animation:marq 22s linear infinite}
.note-strip span{flex:0 0 auto}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

@media (prefers-reduced-motion:reduce){
  .note-strip__inner{animation:none}
}