/* ==========================================================================
   Strona skladki.html. Korzysta z tokenow i komponentow z style.css,
   dokladajac tylko to, co wystepuje wylacznie tutaj.
   ========================================================================== */

.pay-page{background:var(--ink)}
.pay{position:relative;padding-top:clamp(140px,12vw,190px)}
.pay > .shell{position:relative;z-index:1}
.pay .section__brand img{left:auto;right:-8%;top:8%;width:min(38vw,520px);opacity:.06}
.pay .section__brand::before{left:auto;right:-16%;top:0}

/* --- Naglowek ------------------------------------------------------------ */
.pay__head{max-width:900px;margin-bottom:clamp(56px,6vw,86px)}
.pay__head h1{font-size:clamp(44px,4.4vw,74px);font-weight:900;margin:26px 0 30px}

/* --- Dwie karty obok siebie ---------------------------------------------- */
.pay__grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border:1px solid var(--line)}
.pay__card{background:var(--ink-2);padding:clamp(34px,3.2vw,50px);display:flex;flex-direction:column}
.pay__card--accent{background:var(--ink-3)}
.pay__card-label{color:var(--orange);margin-bottom:34px}

/* --- Wiersze z danymi rachunku ------------------------------------------- */
.pay__row{padding-bottom:26px;margin-bottom:26px;border-bottom:1px solid var(--line)}
.pay__row dt{font-family:var(--font-display);font-size:10.5px;font-weight:700;
  letter-spacing:.24em;text-transform:uppercase;color:var(--steel-dark);margin-bottom:14px}
.pay__row dd{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.pay__value{font-family:var(--font-display);font-weight:800;font-stretch:100%;
  font-size:clamp(19px,1.5vw,23px);letter-spacing:-.01em;color:var(--bone)}

.pay__row--iban dd{flex-direction:column;align-items:flex-start;gap:20px}
/* Numer rachunku ma byc czytelny do przepisania z ekranu, stad duze swiatlo
   miedzy grupami cyfr i cyfry o rownej szerokosci.                          */
.pay__iban{font-family:var(--font-display);font-weight:800;font-stretch:100%;
  font-size:clamp(21px,1.85vw,29px);letter-spacing:.02em;line-height:1.35;
  color:var(--bone);font-variant-numeric:tabular-nums}

.pay__hint{margin-top:auto;padding-top:26px;font-size:14px;line-height:1.65;color:var(--steel)}

/* --- Przycisk kopiowania -------------------------------------------------- */
.copy{display:inline-flex;align-items:center;gap:10px;height:42px;padding:0 18px;
  border:1px solid var(--line-hard);border-radius:999px;
  font-family:var(--font-display);font-size:10.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--bone-dim);white-space:nowrap;
  transition:color .35s var(--ease),border-color .35s var(--ease),background-color .35s var(--ease)}
.copy svg{width:14px;height:14px;flex:none}
.copy:hover{color:var(--ink);background:var(--bone);border-color:var(--bone)}
.copy.is-done{color:var(--ink);background:var(--orange);border-color:var(--orange)}
.copy--wide{height:46px;padding:0 22px}

/* --- Zasada i przyklad ---------------------------------------------------- */
.pay__rule{font-size:15.5px;line-height:1.7;color:var(--bone-dim)}
.pay__rule b{color:var(--bone);font-weight:600}
.pay__example{margin-top:20px;padding:16px 20px;background:rgba(228,96,26,.09);
  border-left:2px solid var(--orange);font-size:15px;color:var(--bone);
  font-variant-numeric:tabular-nums}
.pay__example span{display:block;font-family:var(--font-display);font-size:10px;font-weight:700;
  letter-spacing:.24em;text-transform:uppercase;color:var(--orange);margin-bottom:6px}

/* --- Generator ------------------------------------------------------------ */
.pay__form{margin-top:34px}
.pay__out{margin-top:12px;padding:22px 24px;border:1px dashed var(--line-hard);
  background:rgba(244,241,236,.03)}
.pay__out-label{display:block;font-family:var(--font-display);font-size:10px;font-weight:700;
  letter-spacing:.24em;text-transform:uppercase;color:var(--steel);margin-bottom:10px}
.pay__out-value{display:block;font-family:var(--font-display);font-weight:800;font-stretch:100%;
  font-size:clamp(17px,1.4vw,21px);letter-spacing:-.005em;color:var(--bone);line-height:1.35;
  font-variant-numeric:tabular-nums}
.pay__copy-title{width:100%;justify-content:center;margin-top:20px}

/* --- Kontakt -------------------------------------------------------------- */
.pay__contact{margin-top:clamp(56px,6vw,90px);padding:clamp(38px,3.6vw,56px);
  border:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;
  gap:40px;flex-wrap:wrap}
.pay__contact h2{font-size:clamp(28px,2.6vw,42px)}

.pay__footer{margin-top:clamp(80px,7vw,120px)}

/* --- Tablet i telefon ----------------------------------------------------- */
@media (max-width:1100px){
  .pay{padding-top:clamp(112px,13vw,160px)}
  .pay__grid{grid-template-columns:1fr}
  .pay .section__brand{display:none}
}

@media (max-width:760px){
  .pay{padding-top:104px}
  .pay__head{margin-bottom:38px}
  .pay__head h1{font-size:clamp(31px,8.4vw,40px);margin:20px 0 24px}

  /* Na skladkach nawigacja zostawia tylko herb (link do strony klubu)
     i burgera, przycisk tekstowy nie miesci sie obok nich.                  */
  .pay-page .nav .btn--ghost{display:none}

  .pay__card{padding:26px 22px 30px}
  .pay__card-label{margin-bottom:24px}
  .pay__row{padding-bottom:22px;margin-bottom:22px}
  .pay__row dd{flex-direction:column;align-items:flex-start;gap:16px}
  .pay__value{font-size:19px}
  /* Numer lamie sie na dwie linie miedzy czterocyfrowymi grupami */
  .pay__iban{font-size:23px;line-height:1.45}
  .copy,.copy--wide{height:46px}
  .pay__hint{padding-top:22px;font-size:13.5px}

  .pay__rule{font-size:15px}
  .pay__example{font-size:14px;padding:14px 16px}
  .pay__form{margin-top:26px}
  .pay__out{padding:18px}
  .pay__out-value{font-size:17px}
  .pay__copy-title{margin-top:16px}

  .pay__contact{flex-direction:column;align-items:stretch;gap:24px;padding:30px 22px}
  .pay__contact h2{font-size:26px}
  .pay__contact .btn{justify-content:center}
  .pay__footer{margin-top:56px}
}