/* =========================================================
   LP PRODUCTS – UI v1.0 (clean list)
   - tło: #f5f8fd
   - brak kart/box-shadow
   - tylko dolne separatory
   - prawa strefa: BONUSY + AKCJE (stałe szerokości)
   - desktop: nazwy produktów zawsze w tej samej kolumnie (bez kropek)
   - tablet/mobile: układ "stack" + czytelne filtry
   ========================================================= */

.lp-ui{
    --lp-bg:#f5f8fd;
    --lp-text:#424242;
    --lp-muted:#747474;

    --lp-blue:#0019AC;
    --lp-blue2:#005BFF;

    --lp-green:#6BF498;
    --lp-green2:#2dc35e;

    --lp-divider: rgba(66,66,66,.18);
    --btn-r:5px;

    /* LOGO: prostokątne, szerokie */
    --lp-logo-w: 120px;
    --lp-logo-h: 56px;

    /* stałe szerokości prawej strefy (żeby nie pływało) */
    --lp-actions-w: 220px;
    --lp-bonus-w:   380px;
    --lp-right-gap: 14px;
    --lp-right-w: calc(var(--lp-bonus-w) + var(--lp-actions-w) + var(--lp-right-gap));

    color: var(--lp-text);
}

/* (opcjonalnie) ogranicz szerokość całego bloku, bez ellipsis */
.lp-products.lp-ui{
    max-width: 950px;
    margin-left:auto;
    margin-right:auto;
}

.lp-products{ background: var(--lp-bg); }

/* ======================
   BAR (filtry)
   ====================== */
.lp-products__bar{
    display:flex;
    gap:14px;
    flex-wrap:wrap;
    justify-content:space-between;
    align-items:flex-end;

    margin:0 0 16px;
    padding:10px 10px;

    background:transparent;
}

.lp-products__search{ flex: 1 1 380px; min-width: 260px; }
.lp-products__filters{ display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; width:auto; }

/* ======================
   INPUTS / SELECTS
   ====================== */
.lp-input,
.lp-select{
    height:42px;
    padding:0 12px;
    border-radius: var(--btn-r) !important;
    border:1px solid rgba(0,25,172,.18);
    background:#fff;
    outline:none;
    transition: outline-color .15s ease, border-color .15s ease;
    color: var(--lp-text);
}

.lp-input{ width:100%; }
.lp-input::placeholder{ color:#9F9F9F; }

.lp-input:focus,
.lp-select:focus{
    border-color: rgba(0,91,255,.55);
    outline: 3px solid rgba(0,91,255,.12);
    outline-offset: 0;
}

/* ======================
   BUTTONS
   - bez ramek/zmian koloru na hover
   ====================== */
.lp-btn{
    height:42px;
    padding:0 16px;
    border-radius: var(--btn-r);

    font-weight:900;
    letter-spacing:.02em;

    border:none;
    cursor:pointer;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    text-decoration:none;
    white-space:nowrap;

    transition: transform .08s ease, text-decoration-color .15s ease;
}

.lp-btn:active{ transform: translateY(1px); }

.lp-btn--primary{ background: var(--lp-blue2); color:#fff; }
.lp-btn--primary:hover{ text-decoration:none; }

.lp-btn--ghost{ background:#fff; color: var(--lp-blue); }
.lp-btn--ghost:hover{ text-decoration:none; }

.lp-btn--success{
    background: var(--lp-green);
    color: var(--lp-blue) !important;
}

/* Reset jako ikonka (button z <i class="fas fa-undo">) */
#lp-filter-reset.lp-btn{
    width:42px;
    min-width:42px;
    padding:0;
    background:transparent;
    color: var(--lp-blue);
}
#lp-filter-reset.lp-btn:hover{ text-decoration:none; }
#lp-filter-reset.lp-btn i{
    font-size:18px;
    line-height:1;
}

/* ======================
   LOADER
   ====================== */
.lp-products__loading{ position:relative; }

.lp-products__overlay{
    position:absolute;
    inset:0;
    background:rgba(245,248,253,.72);
    border-radius: 0;
    display:none;
    align-items:center;
    justify-content:center;
    z-index:5;
}
.lp-products__loading.is-loading .lp-products__overlay{ display:flex; }

.lp-spinner{
    width:42px;
    height:42px;
    border-radius:50%;
    border:3px solid rgba(0,25,172,.15);
    border-top-color: var(--lp-blue2);
    animation: lpSpin .8s linear infinite;
}
@keyframes lpSpin{ to{ transform: rotate(360deg); } }

/* ======================
   LISTA
   ====================== */
.lp-products__list{
    display:flex;
    flex-direction:column;
    gap:0;
    background:transparent;
}

/* ======================
   WIERSZ OFERTY (desktop)
   - 3 kolumny: logo | main | prawa strefa (stała)
   ====================== */
.lp-offer{
    position:relative;
    display:grid;
    grid-template-columns: var(--lp-logo-w) 1fr var(--lp-right-w);
    gap:16px;
    align-items:center;

    padding:16px 0;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--lp-divider);
}

/* LOGO */
.lp-offer__logo{
    width: var(--lp-logo-w);
    height: var(--lp-logo-h);
    display:flex;
    align-items:center;
    justify-content:flex-start;
    padding-left: 5px;
}

.lp-offer__logo img{
    width: 100%;
    max-width: var(--lp-logo-w);
    max-height: var(--lp-logo-h);
    height: auto;
    object-fit: contain;
}

/* TAG: lewy górny róg, ale z bezpiecznym marginesem */
.lp-tag{
    position:absolute;
    top:12px;
    left:12px;

    padding:0;
    border:none;
    background:transparent;

    font-size:12px;
    font-weight:900;
    letter-spacing:.14em;
    text-transform:uppercase;
    line-height:1;
    white-space:nowrap;
}

.lp-tag::after{
    content:"";
    display:block;
    height:2px;
    margin-top:4px;
    width:100%;
    background:currentColor;
    opacity:.35;
}

.lp-tag--nowosc{ color: var(--lp-blue2); }
.lp-tag--hit{ color: var(--lp-green2); }
.lp-tag--okazja{ color:#d33; }

/* MAIN */
.lp-offer__main{
    min-width:0;
}

/* ✅ bez kropek – ma się zawijać */
.lp-offer__title{
    font-weight:900;
    color: var(--lp-blue);
    font-size:16px;
    line-height:1.2;

    white-space:normal;
    overflow:visible;
    text-overflow:clip;
    word-break: break-word;
}

.lp-offer__meta{
    font-size:13px;
    color: var(--lp-muted);
    margin-top:4px;

    white-space:normal;
    overflow:visible;
    text-overflow:clip;
    word-break: break-word;
}

/* ======================
   PRAWA STREFA (desktop)
   bonusy + akcje
   ====================== */
.lp-offer__right{
    display:grid;
    grid-template-columns: var(--lp-bonus-w) var(--lp-actions-w);
    gap: var(--lp-right-gap);
    align-items:center;
    justify-items: stretch;
}

/* BONUSY: (offer nad shark) + (razem po prawej) */
.lp-bonus-grid{
    width: var(--lp-bonus-w);
    max-width: var(--lp-bonus-w);

    display:grid;
    grid-template-columns: 1fr 150px;
    grid-template-rows: auto auto;
    gap:10px;
    align-items:stretch;
}

/* staty: centrowanie */
.lp-stat{
    background: transparent;
    border: none;
    padding:0;

    display:flex;
    flex-direction:column;
    gap:2px;

    text-align:center;
    align-items:center;
}

.lp-stat__label{
    font-size:11px;
    font-weight:900;
    letter-spacing:.14em;
    text-transform:uppercase;
    color: var(--lp-muted);
    line-height:1.15;
}

.lp-stat__value{
    font-size:18px;
    font-weight:900;
    line-height:1.1;
    color: var(--lp-blue);
}

.lp-stat__unit{
    font-size:12px;
    font-weight:900;
    margin-left:4px;
    color: var(--lp-muted);
}

/* RAZEM: wyróżnione typografią + heartbeat, bez pudełka */
.lp-stat--total{
    grid-column: 2;
    grid-row: 1 / span 2;

    min-width:150px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
}

.lp-stat--total .lp-stat__label,
.lp-stat--total .lp-stat__value{
    width:100%;
    margin:0;
    padding:0;
    display:block;
    line-height:1.15; /* ✅ jak bonusy */
}

.lp-stat--total { color: var(--lp-blue); }

.lp-stat--total .lp-stat__value{
    font-size:22px;
    will-change: transform;
    animation: lpTotalHeartbeat 9s ease-in-out infinite;
}

/* 2 krótkie heartbeat co kilka sekund */
@keyframes lpTotalHeartbeat{
    0%   { transform:scale(1); }
    70%  { transform:scale(1); }
    73%  { transform:scale(1.06); }
    76%  { transform:scale(1); }
    80%  { transform:scale(1); }
    83%  { transform:scale(1.045); }
    86%  { transform:scale(1); }
    100% { transform:scale(1); }
}

/* ======================
   AKCJE: stała szerokość, środek
   - Do końca (1 linia)
   - Odbierz
   - Warunki (tekst)
   ====================== */
.lp-offer__actions{
    width: var(--lp-actions-w);
    max-width: var(--lp-actions-w);

    display:flex;
    flex-direction:column;
    gap:8px;

    align-items:center;
    justify-content:center;
    text-align:center;
}

/* DO KOŃCA: w jednej linii, centrowane */
.lp-time{
    width:100%;
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:center;
    gap:8px;
    text-align:center;
}

/* head też w jednej linii */
.lp-time__head{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
}

/* label jak bonus label */
.lp-time__label{
    font-size:11px;
    font-weight:900;
    letter-spacing:.14em;
    text-transform:uppercase;
    color: var(--lp-muted);
    line-height:1.15;
}

/* Font Awesome 5 */
.lp-time__fa{
    font-size:20px;
    line-height:1;
    color: var(--lp-muted);
}

/* wartość w tej samej linii */
.lp-time__value{
    font-size:13px;
    font-weight:900;
    color: var(--lp-blue);
    line-height:1.15;

    max-width:100%;
    text-align:center;
    word-break: break-word;
    white-space:nowrap;
}

/* stany koloru */
.lp-time.is-soon .lp-time__fa,
.lp-time.is-soon .lp-time__value{ color:#6a4a00; }

.lp-time.is-last .lp-time__fa,
.lp-time.is-last .lp-time__value{ color:#8a1111; }

/* ended: znika "Do końca", zostaje ikona + "Oferta zakończona" */
.lp-time.is-ended .lp-time__label{ display:none !important; }
.lp-time.is-ended .lp-time__fa,
.lp-time.is-ended .lp-time__value{ color:#8a1111; }
.lp-time.is-ended .lp-time__value{
    display:inline-block !important; /* ✅ żeby nie znikało */
    white-space:normal;              /* może się złamać w actions width */
}

/* WARUNKI – stabilny hover bez "skakania" */
.lp-terms-link{
    display:inline-block;
    font-weight:900;
    color: var(--lp-blue);
    border:0;
    padding:0;
    position:relative;
    text-decoration:none;      /* ważne */
    line-height:1.15;          /* stała wysokość boxa */
}

/* animowane podkreślenie – tylko pseudo-element */
.lp-terms-link::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:-1px;               /* stałe, bez -0px */
    height:2px;
    background: var(--lp-blue);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .22s ease;
}

/* hover/focus – animujemy tylko ::after */
.lp-terms-link:hover::after,
.lp-terms-link:focus-visible::after{
    transform: scaleX(1);
    transform-origin: left;
}

/* bez zmian layoutu na hover */
.lp-terms-link:hover{
    color: var(--lp-blue);
    text-decoration:none !important;
}

/* ======================
   TABLET = stack, ale BONUSY w 1 linii
   ====================== */
@media (max-width: 1100px){

    .lp-offer{
        grid-template-columns: var(--lp-logo-w) 1fr;
        grid-template-areas:
      "logo main"
      "right right";
        gap:12px;
        padding:14px 0 16px;
        padding-top: 22px; /* miejsce na tag */
    }

    .lp-offer__logo{ grid-area: logo; }

    .lp-offer__main{
        grid-area: main;
        padding-right:2px;
    }

    .lp-offer__right{
        grid-area: right;
        grid-template-columns: 1fr; /* prawa strefa nadal stack */
        gap:12px;
    }

    /* ✅ BONUSY: jedna linia (3 kolumny) */
    .lp-bonus-grid{
        width:100%;
        max-width:100%;

        display:grid;
        grid-template-columns: 1fr 1fr 1fr; /* Offer | Shark | Razem */
        grid-template-rows: auto;
        gap:14px;
        align-items:stretch;
    }

    /* ✅ "Razem" przestaje być 2-rzędowe */
    .lp-stat--total{
        grid-column: 3;
        grid-row: auto;
        min-width: 0; /* żeby nie rozwalało siatki */
    }

    /* akcje pod spodem, centrowane */
    .lp-offer__actions{
        width:100%;
        max-width:520px;
        margin-left:auto;
        margin-right:auto;
    }

    /* tag nie nachodzi na logo */
    .lp-tag{
        top: 3px;
        left: 10px;
    }
}


/* ======================
   MOBILE: filtry + CTA
   ====================== */
@media (max-width: 720px){

    /* BAR: układ grid z przypisanymi polami (reset+filtruj 1 rząd) */
    .lp-products__filters{
        width:100%;
        display:grid;
        grid-template-columns: 1fr 42px;
        grid-template-areas:
      "cat cat"
      "inst inst"
      "sort sort"
      "apply reset";
        gap:10px;
        align-items:end;
    }

    #lp-filter-cat{ grid-area: cat; width:100%; }
    #lp-filter-inst{ grid-area: inst; width:100%; }
    #lp-sort{ grid-area: sort; width:100%; }

    #lp-filter-apply{ grid-area: apply; width:100%; }
    #lp-filter-reset{
        grid-area: reset;
        width:42px;
        min-width:42px;
        justify-content:center;
    }

    /* bonusy: jak trzeba – czytelnie */
    .lp-bonus-grid{
        grid-template-columns: 1fr 140px;
    }
}

@media (max-width: 520px){
    .lp-products__filters{
        grid-template-columns: 1fr 42px; /* reset dalej obok */
    }

    /* bonusy: razem pod spodem */
    .lp-bonus-grid{
        grid-template-columns: 1fr;
    }
    .lp-stat--total{
        grid-column:auto;
        grid-row:auto;
        padding-top:6px;
    }

    /* tytuły mogą łamać się na 2+ linie */
    .lp-offer__title,
    .lp-offer__meta{
        white-space:normal;
    }

    /* Do końca + value: nadal 1 linia, ale może się złamać jeśli długie */
    .lp-time{
        flex-wrap:wrap;
        row-gap:6px;
    }
    .lp-time__value{
        white-space:normal;
    }
}

/* ======================
   MODAL (tylko wymuszenie display – reszta w modal.css)
   ====================== */
#lp-terms-modal.modal-wrapper.show{
    display:flex !important;
    align-items:center;
    justify-content:center;
}
#lp-terms-modal.modal-wrapper{
    display:none;
}
.lp-offer__title-link{
    color: var(--lp-blue)!important;
    text-decoration: none !important;
    display: inline-block;
    position: relative;
}

/* =========================================================
   HOVER UNDERLINE (animowane) – title link + CTA Odbierz
   Wspólny pattern jak .lp-terms-link
   ========================================================= */

/* 1) TITLE LINK – podkreślenie animowane (zamiast zwykłego underline) */

/* animowana kreska */
.lp-offer__title-link::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:-1px;
    height:2px;
    background: var(--lp-blue);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .22s ease;
}

/* hover/focus */
.lp-offer__title-link:hover::after,
.lp-offer__title-link:focus-visible::after{
    transform: scaleX(1);
    transform-origin: left;
}

/* 2) CTA ODBIERZ / ZALOGUJ – animowane podkreślenie na tekście */
.lp-btn--success{
    position: relative;
    text-decoration: none; /* wyłącz klasyczne underline z poprzednich reguł */
}

/* kreska dopasowana do szerokości tekstu */
.lp-btn--success::after{
    content:"";
    position:absolute;

    /* podkreślamy „tekst”, a nie cały button */
    left:14px;
    right:14px;

    bottom:10px;           /* wygląda jak underline w buttonie */
    height:2px;
    background: var(--lp-blue);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .22s ease;
    pointer-events:none;
}

/* hover/focus: tylko animacja, bez zmian kolorów */
.lp-btn--success:hover::after,
.lp-btn--success:focus-visible::after{
    transform: scaleX(1);
    transform-origin: left;
}

/* jeśli gdzieś zostawiła się stara reguła underline – kasujemy */
.lp-btn--success:hover{
    text-decoration: none !important;
}
/* estetyczne maskowanie kwot */
.lp-money-mask{
    display:inline-block;
    min-width: 3ch;
    letter-spacing: .18em;
    transform: translateY(-0.02em);
    color: var(--lp-blue);
    opacity: .65;
}
.lp-products__more {text-align: center;
padding: 35px;
border-bottom: solid #d4d7db 1px;}
/* ======================
   SEARCH: clear (X)
   ====================== */
.lp-search{ position:relative; }

.lp-search .lp-input{
    padding-right: 44px; /* miejsce na X */
}

.lp-search__clear{
    position:absolute;
    right:8px;
    top:50%;
    transform:translateY(-50%);

    width:30px;
    height:30px;

    display:none;                 /* JS pokaże gdy jest tekst */
    align-items:center;
    justify-content:center;

    border:0;
    background:transparent;
    border-radius:999px;

    color: var(--lp-muted);
    cursor:pointer;
}

.lp-search__clear:hover{
    color: var(--lp-blue);
}

.lp-search__clear.is-visible{
    display:flex;
}
/* =========================================================
   “Brakuje produktu?” – callout pod LP products
   ========================================================= */

.br-missing{
  margin-top: 14px;
  background: rgba(255,255,255,.55);
  border-radius: 18px;
  padding: 14px 14px;
  display:flex;
  align-items:center;
  gap: 12px;
}

.br-missing__icon{
  width: 38px;
  height: 38px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(circle at 30% 25%, rgba(0,91,255,.10), transparent 55%),
    radial-gradient(circle at 70% 80%, rgba(107,244,152,.10), transparent 60%),
    rgba(255,255,255,.65);
  flex: 0 0 auto;
}

.br-missing__icon i{
  font-size: 16px;
  color: rgba(0,25,172,.70);
}

.br-missing__text{
  min-width: 0;
  flex: 1 1 auto;
}

.br-missing__title{
  font-weight: 1000;
  color: var(--lp-blue);
  line-height: 1.15;
  margin-bottom: 2px;
}

.br-missing__desc{
  font-weight: 850;
  color: rgba(66,66,66,.70);
  font-size: 13px;
  line-height: 1.35;
}

.br-missing__link{
  flex: 0 0 auto;
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  text-decoration: none;
  font-weight: 1000;
  color: var(--lp-blue);
  background: rgba(255,255,255,.70);
  transition: transform .08s ease;
  white-space: nowrap;
}

.br-missing__link:active{ transform: translateY(1px); }
.br-missing__link i{ font-size: 12px; opacity: .8; }

/* Mobile */
@media (max-width: 720px){
  .br-missing{
    flex-direction: column;
    align-items:flex-start;
  }
  .br-missing__link{
    width: 100%;
    justify-content: center;
  }
}