body{ background: linear-gradient(to bottom, #E8F1FF 0%, #FFF 600px); }

.mca-heading-accent{
    background: linear-gradient(100deg, #4C8BF1 0%, #100D18 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;  
}

.text-mca{ color: #4B89ED; }

/* ***************** */
/* COUNTER           */
/* ***************** */
.mca-counter {
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 0.5rem;
}

/* pojedynczy bloczek z cyfrą */
.mca-counter__digit {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(16px, 6vw, 36px);
  width: 40px;
  height: 60px;
  background: #ffffff;
  border-radius: 5px;

  box-shadow: inset 0 2px 4px 0 rgba(75, 137, 237, 0.33);
}

.mca-counter__sep {
  width: 12px;
}

/* bloczek z sufiksem „PLN" */
.mca-counter__suffix {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 32px;
  background: #ffffff;
  border-radius: 5px;
  color: #0d0e15;
  font-variant-numeric: tabular-nums;

  box-shadow: inset 0 2px 4px 0 rgba(75, 137, 237, 0.33);
}

@media (max-width: 575.98px){
    .mca-counter__digit {
        width: 25px;
        height: 40px;
    }

    .mca-counter__sep{ width: 0px; }
}

/* ***************** */
/* KALKULATOR        */
/* ***************** */
.mca-calc{
  --mca-blue:#2f6df0;
  --mca-navy:#16203a;
  --mca-line:#e6eaf2;
  max-width:1120px;
  border-radius:24px;
  overflow:hidden;
}
 
.mca-calc__eyebrow{
    color:var(--mca-blue);
}
 
/* Prawy panel */
.mca-calc__result{ background:linear-gradient(160deg,#4884E5 0%,#3663AB 100%); }
.mca-calc__result .mca-calc__eyebrow{ color:rgba(255,255,255,.65); }
.mca-calc__row{ border-bottom:1px solid rgba(255,255,255,.16); }
.mca-calc__row:last-of-type{ border-bottom:0; }
 
/* Input obroty */
.mca-input .form-control,
.mca-input .input-group-text{
    border: 1px solid #DFE5EC;
}

.mca-input .form-control{
    border-radius: 50px 0 0 50px;
    box-shadow: none !important;
    border-right: 0px;
    width: 100px !important;
}

.mca-input .input-group-text{
    background:#F3F7FC;
    color:#626A75;
    border-radius: 0 50px 50px 0;
    border-left: 0px;
}

 
/* Toogle */
.mca-segmented{
    background:#F3F7FC;
    border-radius: 50px;
    border: 1px solid #DFE5EC;
}

.mca-segmented .btn{
    border-radius: 50px;
    border: 0;
}

.mca-segmented .btn-check:checked + .btn{
    background: #FFFFFF;
    box-shadow: 0 2px 10px rgba(20,32,58,.12);
}
 
/* Slider */
.mca-range{
    --mca-fill: 4%;
    width: 100%;
    height: 22px;
    -webkit-appearance: none;
    appearance: none;
}
.mca-range:focus{ outline: none; }
 
.mca-range::-webkit-slider-runnable-track{
    height: 6px;
    border-radius: 6px;
    background:linear-gradient(to right, var(--mca-blue) var(--mca-fill), var(--mca-line) var(--mca-fill));
}

.mca-range::-webkit-slider-thumb{
    -webkit-appearance: none;
    appearance: none;
    margin-top: -8px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background:#fff;
    border: 3px solid var(--mca-blue);
    box-shadow:0 2px 6px rgba(20,32,58,.25);
    cursor:pointer;
}

.mca-range::-moz-range-track{
    height:6px;
    border-radius:6px;
    background:var(--mca-line);
}

.mca-range::-moz-range-progress{
    height:6px;
    border-radius:6px;
    background:var(--mca-blue);
}

.mca-range::-moz-range-thumb{
    width:22px;
    height:22px;
    border-radius:50%;
    background:#fff;
    border:4px solid var(--mca-blue);
    box-shadow:0 2px 6px rgba(20,32,58,.25);
    cursor:pointer;
}


/* ***************** */
/* STEPS             */
/* ***************** */
.mca-steps{
  display: grid;
  /* mobile-first: jedna kolumna, obrazek na końcu */
  grid-template-columns: 1fr;
  grid-template-areas:
    "s1"
    "s2"
    "s3"
    "s4"
    "s5"
    "img";
}

/* od breakpointu lg (992px) — układ "wężyk" jak na screenie */
@media (min-width: 992px){
  .mca-steps{
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas:
      "s1  s2  s3"
      "img img s4"
      "img img s5";
    align-items: start;          /* kroki trzymają się góry swojej komórki */
  }
}

.mca-steps__s1    { grid-area: s1; }
.mca-steps__s2    { grid-area: s2; }
.mca-steps__s3    { grid-area: s3; }
.mca-steps__s4    { grid-area: s4; }
.mca-steps__s5    { grid-area: s5; }
.mca-steps__media { grid-area: img; align-self: stretch; }  /* baner wypełnia 2×2 */

.mca-steps > div { position: relative; }

@media (min-width: 992px){
  /* poziome: prawo */
  .mca-steps__s1::after,
  .mca-steps__s2::after{
    content:"";
    position:absolute;
    top: 28px;                  /* do wysokości numerka, dostroisz */
    left: calc(100% + 30px);    /* połowa gapu 60px */
    width:24px; height:24px;
    transform: translateX(-50%) rotate(-90deg);
    background: url("/themes/przelewy24/assets/v2/img/mca/how-it-works-icon-arrow.svg") center/contain no-repeat;
  }
  /* pionowe: dół (ten sam asset obrócony) */
  .mca-steps__s3::after,
  .mca-steps__s4::after{
    content:"";
    position:absolute;
    left:50%;
    top: calc(100% + 30px);     /* połowa gapu 60px */
    width:24px; height:24px;
    transform: translate(-50%, -50%) rotate(0deg);
    background: url("/themes/przelewy24/assets/v2/img/mca/how-it-works-icon-arrow.svg") center/contain no-repeat;
  }
}

/* ***************** */
/* CARD MCA STEPS    */
/* ***************** */
.card-mca-steps{ background: url('/themes/przelewy24/assets/v2/img/mca/card-mca-steps-bg-dark.webp') center bottom / cover no-repeat; }
.card-mca{ background: url('/themes/przelewy24/assets/v2/img/mca/card-mca-bg-dark.webp?01072026') center / cover no-repeat; }

/* ***************** */
/* TABELA            */
/* ***************** */
 
/* Table */
.mca-compare__scroll{
    border: 1px solid #E8E6DF;
    border-radius: 20px;
}
 
.mca-compare__table{
    margin-bottom: 0;
    scroll-snap-type: x proximity;
}

.mca-compare__table :where(th,td){
    padding: 16px 20px !important;
    vertical-align: middle;
    border-bottom: 1px solid #E8E6DF;
}

.mca-compare__table thead :where(th,td){ border-bottom-width: 1px; }
.mca-compare__table tbody tr:last-child :where(th,td){ border-bottom: 0; }
 
/* Kolumny porównawcze */
.mca-compare__table :is(th,td):not(.mca-compare__label){
    min-width: 190px;
    scroll-snap-align: start;
}

/* Przypięta pierwsza kolumna */
.mca-compare__label{
    position: sticky;
    left: 0;
    z-index: 2;
    min-width: 100px;
    background: #FFFFFF;
    text-align: left;
}
 
/* Wyróżniona kolumna */
.mca-compare__table tbody td.mca-compare__own{
    background-color:rgba(75, 137, 237, 0.1);
}

.mca-compare__table tbody td.mca-compare__own > span{
    display: flex;
    align-items: center;
}

.mca-compare__table tbody td.mca-compare__own > span::before{
    content: '';
    background-image: url('/themes/przelewy24/assets/v2/img/mca/how-it-works-icon-arrow.svg');
    background-size: cover;
    width: 12px;
    height: 12px;
    display: block;
    transform: rotate(-90deg);
    margin-right: 4px;
}
 
@media (max-width:991.98px){
    .mca-compare__label{ box-shadow:6px 0 10px -8px rgba(20,32,58,.25); }
}

/* ***************** */
/* TESTIMONIALS      */
/* ***************** */
.review-toggle{
    display: inline;
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    font-weight: 700;
    color: inherit;
    cursor: pointer;
}