/*
  Stały znak serwisu PEREKO.
  Ten komponent jest wspólny dla strony logowania i wszystkich podstron.
  Nie należy nadpisywać jego wymiarów, kolorów ani odstępów lokalnie.
*/
.login-brand{
  width:min(1120px,100%);
  display:flex;
  align-items:center;
  gap:15px;
  flex:0 0 auto;
  margin:0 auto;
  color:#fff;
  font-family:Inter,"Segoe UI",Arial,sans-serif;
}

/* Stała belka aplikacji, nadrzędna wobec lokalnych stylów stron. */
.topbar,
.pcat-topbar{
  width:100%!important;
  height:104px!important;
  min-height:104px!important;
  max-height:104px!important;
  padding:0!important;
  margin:0!important;
  border-bottom:1px solid rgba(255,255,255,.09)!important;
  background:radial-gradient(circle at 82% 14%,rgba(255,200,0,.11) 0,transparent 28%),linear-gradient(135deg,#151b1e,#263035 58%,#303b40)!important;
}

.topbar>.topbar-inner,
.pcat-topbar>.pcat-topbar-inner{
  width:min(1120px,calc(100vw - 48px))!important;
  height:104px!important;
  min-height:104px!important;
  margin-left:max(24px,calc((100vw - 1120px)/2))!important;
  margin-right:0!important;
  padding:0!important;
  display:flex!important;
  align-items:center!important;
  position:relative!important;
}

.login-brand__mark{
  width:42px!important;
  height:42px!important;
  display:grid;
  place-items:center;
  flex:0 0 42px!important;
  padding:0;
  border:0;
  border-radius:12px!important;
  color:#141a1d!important;
  background:#ffc800!important;
  box-shadow:0 12px 30px rgba(0,0,0,.22);
  font-size:22px!important;
  font-weight:900!important;
  line-height:1!important;
  letter-spacing:-.055em!important;
}

.login-brand__copy{
  min-height:34px!important;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-left:15px!important;
  border-left:1px solid rgba(255,255,255,.2)!important;
}

.login-brand__copy b{
  color:#fff!important;
  font-size:14px!important;
  font-weight:700!important;
  line-height:normal!important;
  letter-spacing:-.01em!important;
}

.login-brand__copy small{
  display:block!important;
  margin-top:3px!important;
  color:#b9c2c6!important;
  font-size:10px!important;
  font-weight:400!important;
  line-height:normal!important;
}

/* Wspólna prawa część każdej belki aplikacji. */
.top-actions,
.pcat-actions{
  position:absolute!important;
  top:50%!important;
  right:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:9px!important;
  transform:translateY(-50%)!important;
  margin:0!important;
}

.header-pill,.page-label,.pcat-pill,.offer-topbar-pill,.calc-topbar-pill,.contact-topbar-pill,.order-topbar-pill,
.logout,.back-link,.pcat-back,.offer-topbar-back,.calc-topbar-back,.contact-topbar-back,.order-topbar-back{
  height:40px!important;
  min-height:40px!important;
  box-sizing:border-box!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  margin:0!important;
  padding:0 13px!important;
  border-radius:11px!important;
  font-family:Inter,"Segoe UI",Arial,sans-serif!important;
  font-size:11px!important;
  font-weight:800!important;
  line-height:1!important;
  letter-spacing:.025em!important;
  white-space:nowrap!important;
  text-decoration:none!important;
}

/* Spójne zachowanie wspólnej belki na tabletach i telefonach. */
@media(max-width:860px){
  .topbar,.pcat-topbar{
    height:88px!important;
    min-height:88px!important;
    max-height:88px!important;
  }
  .topbar>.topbar-inner,.pcat-topbar>.pcat-topbar-inner{
    width:calc(100vw - 32px)!important;
    height:88px!important;
    min-height:88px!important;
    margin-left:16px!important;
  }
  .login-brand{width:auto;min-width:0;margin:0!important;gap:12px}
  .top-actions,.pcat-actions{gap:6px!important}
  .header-pill,.page-label,.pcat-pill,.offer-topbar-pill,.calc-topbar-pill,.contact-topbar-pill,.order-topbar-pill{display:none!important}
}

@media(max-width:560px){
  .topbar,.pcat-topbar{
    height:78px!important;
    min-height:78px!important;
    max-height:78px!important;
  }
  .topbar>.topbar-inner,.pcat-topbar>.pcat-topbar-inner{
    width:calc(100vw - 24px)!important;
    height:78px!important;
    min-height:78px!important;
    margin-left:12px!important;
  }
  .login-brand{gap:9px}
  .login-brand__mark{width:38px!important;height:38px!important;flex-basis:38px!important;border-radius:11px!important;font-size:20px!important}
  .login-brand__copy{min-height:30px!important;padding-left:10px!important}
  .login-brand__copy b{font-size:12px!important}
  .login-brand__copy small{display:none!important}
  .top-actions .logout span,.top-actions .back-link span,.top-actions .pcat-back span,.top-actions .offer-topbar-back span,.top-actions .calc-topbar-back span,.top-actions .contact-topbar-back span,.top-actions .order-topbar-back span,
  .pcat-actions .logout span,.pcat-actions .back-link span,.pcat-actions .pcat-back span{display:none!important}
  .top-actions .logout,.top-actions .back-link,.top-actions .pcat-back,.top-actions .offer-topbar-back,.top-actions .calc-topbar-back,.top-actions .contact-topbar-back,.top-actions .order-topbar-back,
  .pcat-actions .logout,.pcat-actions .back-link,.pcat-actions .pcat-back{width:40px!important;min-width:40px!important;padding:0!important}
}