/* CENNIK PEREKO V8 — geometria logowania 1:1 z Centrum Partnera V13 */
/*
   Zasada: referencyjny arkusz styles.css z Centrum Partnera pozostaje bez zmian.
   Ten plik zawiera wyłącznie różnice wymagane przez dwujęzyczny cennik.
*/
.brand{
  position:relative;
  justify-content:flex-start;
}
/* Przełącznik języka nie uczestniczy w flexie brandu — nie może zmieniać jego wysokości ani osi. */
.login-language{
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:4px;
  border:1px solid rgba(255,255,255,.17);
  border-radius:11px;
  background:rgba(255,255,255,.055);
  z-index:2;
}
.login-language button{
  min-width:38px;
  height:32px;
  padding:0 10px;
  border:1px solid transparent;
  border-radius:8px;
  color:#dce3e6;
  background:transparent;
  cursor:pointer;
  font:800 9.5px/1 Montserrat,"Segoe UI",Arial,sans-serif;
  transition:.18s;
}
.login-language button:hover{color:#fff;background:rgba(255,255,255,.08)}
.login-language button.active{color:#171c1e;background:#ffdd00;border-color:#ffdd00}

/*
   W referencyjnym Centrum Partnera panel informacyjny ma na desktopie 78 px.
   Tekst cennika jest krótszy i wcześniej zmniejszał ten tor siatki o ok. 13–14 px,
   przez co H1 i karta logowania przesuwały się w dół. Utrzymujemy tę samą geometrię.
*/
@media(min-width:901px){
  .internal-strip{min-height:78px}
  .login-footer{min-height:21px;align-items:center}
}

/* Nazwa cennika pozostaje jednym wierszem na standardowym widoku desktopowym. */
#loginTitle{white-space:nowrap}
#loginTitle span{white-space:normal}

@media(max-width:900px){
  #loginTitle{white-space:normal}
}
@media(max-width:640px){
  .brand-copy small{display:none}
  .login-language button{min-width:34px;height:30px;padding:0 8px}
}
@media(max-width:520px){
  .brand-logo-wrap{width:124px;height:32px}
  .brand-logo{width:118px;max-height:27px}
  .brand-copy{padding-left:11px}
  .brand-copy b{font-size:11px}
  .login-language{right:0}
}


/* V10 — PL/EN: identyczna geometria niezależnie od długości tłumaczenia */
@media (min-width:901px){
  /* Każdy język korzysta z tych samych torów siatki. Zmiana tekstu nie może
     ponownie wycentrować całego bloku i przesunąć go w pionie. */
  .login-layout{
    grid-template-rows:
      18px
      auto
      48px
      78px
      190px;
  }

  /* H1 ma zawsze dokładnie trzy linie: tytuł + dwie linie akcentu. */
  #loginTitle{
    height:3.03em;
    min-height:3.03em;
    margin-top:6px;
    overflow:visible;
  }

  /* Opis ma zarezerwowane dwie linie w obu językach. */
  .login-intro>p{
    height:48px;
    min-height:48px;
    overflow:hidden;
  }

  /* Stała geometria panelu i kafelków. */
  .internal-strip{
    height:78px;
    min-height:78px;
  }
  .features{
    height:190px;
    grid-template-rows:repeat(2,90px);
  }
  .feature{
    height:90px;
    min-height:90px;
    overflow:hidden;
  }

  /* Karta nie centruje już treści na podstawie liczby wierszy tłumaczenia. */
  .login-card{
    justify-content:flex-start;
  }
  .partner-card-top,
  .partner-card-bottom{
    flex:0 0 auto;
  }
  .login-card-head{
    min-height:116px;
  }
  .partner-support{
    min-height:78px;
  }

  /* Te same kotwice tekstowe w PL i EN. */
  .login-card h2{
    min-height:69px;
  }
  .login-card-head>p{
    min-height:36px;
  }
  .partner-support p{
    min-height:27px;
  }
}

/* =========================================================
   V11 — RESPONSYWNE LOGOWANIE CENNIKA
   Dotyczy wyłącznie index.html (ekranu logowania).
   Widok po zalogowaniu pozostaje bez zmian.
   ========================================================= */

/* Tablet / węższy laptop: przejście z dwóch kolumn do jednego, czytelnego toku. */
@media (max-width:900px){
  .login-screen{
    min-height:100vh;
    min-height:100dvh;
    height:auto;
    overflow-x:hidden;
    overflow-y:auto;
    padding:22px clamp(18px,4vw,34px) 18px;
  }
  .login-screen:before{
    width:520px;
    right:-310px;
    top:-150px;
    opacity:.72;
  }
  .login-screen:after{
    left:-260px;
    bottom:-280px;
    opacity:.7;
  }

  .brand{
    width:100%;
    min-height:42px;
    gap:13px;
  }
  .login-language{
    right:0;
  }

  .login-layout{
    width:100%;
    flex:0 0 auto;
    display:flex;
    flex-direction:column;
    gap:18px;
    align-content:initial;
    padding:30px 0 20px;
  }
  .login-intro{
    display:block;
  }
  .login-intro>.eyebrow,
  .login-intro>h1,
  .login-intro>p,
  .login-intro>.internal-strip,
  .login-intro>.features{
    display:revert;
  }

  .eyebrow{
    font-size:9px;
    line-height:1.45;
  }
  #loginTitle{
    width:100%;
    max-width:720px;
    height:auto;
    min-height:0;
    margin:11px 0 0;
    white-space:normal;
    overflow:visible;
    font-size:clamp(34px,7vw,49px);
    line-height:1.02;
  }
  #loginTitle span{
    margin-top:7px;
  }
  .login-intro>p{
    width:100%;
    max-width:720px;
    height:auto;
    min-height:0;
    margin-top:16px;
    overflow:visible;
    font-size:12px;
    line-height:1.65;
  }
  .internal-strip{
    width:100%;
    height:auto;
    min-height:0;
    margin-top:18px;
    padding:13px 14px;
  }
  .features{
    width:100%;
    height:auto;
    margin-top:10px;
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:none;
  }
  .feature{
    height:auto;
    min-height:88px;
    overflow:visible;
  }

  .login-card{
    width:100%;
    max-width:680px;
    height:auto;
    min-height:0;
    align-self:center;
    margin:4px auto 0;
    padding:28px;
    border-radius:22px;
    justify-content:flex-start;
  }
  .login-card-head{
    min-height:0;
  }
  .login-card h2{
    min-height:0;
    font-size:28px;
  }
  .login-card-head>p,
  .partner-support p{
    min-height:0;
  }
  .login-field input{
    height:52px;
    font-size:16px; /* zapobiega automatycznemu zoomowi formularza w iOS */
  }
  .submit{
    min-height:50px;
    font-size:11px;
  }
  .partner-support-contact{
    gap:5px 12px;
  }
  .login-footer{
    width:100%;
    min-height:0;
    padding-top:2px;
  }
}

/* Telefon: ekran logowania jest priorytetem, elementy informacyjne redukujemy. */
@media (max-width:600px){
  .login-screen{
    padding:16px 16px max(18px,env(safe-area-inset-bottom));
  }
  .brand{
    min-height:38px;
    padding-right:92px;
  }
  .brand-logo-wrap{
    width:126px;
    height:34px;
  }
  .brand-logo{
    width:122px;
    max-height:29px;
  }
  .brand-copy{
    display:none;
  }
  .login-language{
    top:50%;
    right:0;
    transform:translateY(-50%);
    padding:3px;
    border-radius:10px;
  }
  .login-language button{
    min-width:36px;
    height:31px;
    padding:0 8px;
    font-size:9px;
  }

  .login-layout{
    gap:15px;
    padding:26px 0 14px;
  }
  .eyebrow{
    gap:8px;
    font-size:8px;
    letter-spacing:.06em;
  }
  .eyebrow i{
    width:7px;
    height:7px;
  }
  #loginTitle{
    margin-top:10px;
    font-size:clamp(31px,10.3vw,40px);
    line-height:1.01;
    letter-spacing:-.05em;
  }
  #loginTitle span{
    margin-top:7px;
  }
  .login-intro>p{
    margin-top:14px;
    font-size:11px;
    line-height:1.6;
  }

  /* Na telefonie informacje są drugorzędne wobec formularza. */
  .internal-strip,
  .features{
    display:none!important;
  }

  .login-card{
    margin-top:3px;
    padding:22px 18px 19px;
    border-radius:19px;
    box-shadow:0 22px 58px rgba(4,10,12,.40);
  }
  .login-card-head>label{
    margin-bottom:7px;
    font-size:8.5px;
  }
  .login-card h2{
    margin-bottom:8px;
    font-size:24px;
    line-height:1.1;
  }
  .login-card-head>p{
    margin-bottom:17px;
    font-size:10px;
    line-height:1.5;
  }
  .login-field{
    margin-bottom:12px;
  }
  .login-field>span:first-child{
    margin-bottom:6px;
    font-size:8.5px;
  }
  .login-field input{
    height:50px;
    padding-left:13px;
    border-radius:10px;
  }
  .toggle-password{
    right:6px;
    width:36px;
    height:36px;
  }
  .submit{
    min-height:49px;
    margin-top:5px;
    border-radius:10px;
    font-size:10.5px;
  }
  .login-error{
    min-height:12px;
    margin-top:5px;
  }
  .partner-card-bottom{
    gap:9px;
  }
  .partner-support{
    min-height:0;
    margin-top:3px;
    padding:12px 13px;
    border-radius:12px;
  }
  .partner-support-title{
    font-size:8px;
  }
  .partner-support p{
    margin:4px 0 8px;
    font-size:8.8px;
    line-height:1.45;
  }
  .partner-support-contact{
    display:grid;
    grid-template-columns:1fr;
    gap:4px;
    font-size:9px;
  }
  .partner-support-contact strong{
    font-size:9.5px;
  }
  .partner-support-contact a{
    overflow-wrap:anywhere;
  }
  .security{
    gap:7px;
    margin-top:0;
    padding-top:9px;
    font-size:7.7px;
    line-height:1.45;
  }
  .login-footer{
    flex-direction:column;
    align-items:flex-start;
    gap:4px;
    padding-top:8px;
    font-size:7.5px;
  }
}

/* Bardzo małe telefony. */
@media (max-width:380px){
  .login-screen{padding-left:13px;padding-right:13px}
  .brand{padding-right:82px}
  .brand-logo-wrap{width:112px}
  .brand-logo{width:108px}
  .login-language button{min-width:32px;padding:0 6px}
  #loginTitle{font-size:29px}
  .login-card{padding:20px 15px 17px}
  .login-card h2{font-size:22px}
}

/* Telefon w poziomie: nie blokujemy wysokości i pozwalamy na naturalne przewijanie. */
@media (max-height:540px) and (max-width:900px){
  .login-screen{height:auto;min-height:100dvh;overflow-y:auto}
  .login-layout{padding-top:20px}
  .login-intro>p{margin-top:10px}
  .internal-strip,.features{display:none!important}
}