/* /account/loyalty, uklad v2 (resources/views/loyalty/v2). Ladowany tylko na tej stronie.
   Czesc 1: loyalty.css z paczki projektu 1:1, bez regul ukrywania starego widoku (stary widok przy v2 nie jest renderowany).
   Czesc 2: dzielenie dlugich slow w tytulach i naglowkach kart, naglowek h2 odporny na style sklepu. Czesc 3: baner dla gosci (blok desc-loyaltyv2-1-baner). */
.ll{container-type:inline-size;font-family:inherit;color:#111;margin:0 0 32px;width:100%}
.ll *{box-sizing:border-box}
.ll h2{margin:0 0 12px;font-size:22px;line-height:1.2;font-weight:800;color:#111}

/* hero */
.ll .ll-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center;background:#000;color:#fff;border-radius:8px;padding:24px 28px;margin:0 0 28px}
.ll .ll-k{font-size:15px;font-weight:500;color:#bdbdbd}
.ll .ll-big{margin:2px 0 18px;font-size:46px;line-height:1.1;font-weight:800;color:#fcc715}
.ll .ll-nt{margin:2px 0 12px;font-size:20px;line-height:1.25;font-weight:800;color:#fff}
.ll .ll-bar{height:8px;border-radius:4px;background:#dcdcdc;overflow:hidden}
.ll .ll-bar i{display:block;height:100%;border-radius:4px;background:#fcc715}
.ll .ll-hero .ll-bar{background:#3a3a3a}
.ll .ll-wait{margin-top:6px;font-size:14px;line-height:1.3;color:#555}
.ll .ll-wait b{color:#111}
.ll .ll-hero .ll-wait{color:#d0d0d0}
.ll .ll-hero .ll-wait b{color:#fff}
.ll .ll-hero-img{display:block;width:150px;aspect-ratio:5/6;padding:0;border-radius:8px;background:#efefef;overflow:hidden}
.ll .ll-hero-img img{display:block;width:100%;height:100%;object-fit:contain}

/* bonus stepper */
.ll .ll-bonus{margin:0 0 32px}
.ll .ll-bhead{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;margin:0 0 16px}
.ll .ll-bhead h2{margin:0}
.ll .ll-total{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;padding:8px 16px;border-radius:999px;background:#000;color:#fff;font-size:15px;font-weight:500}
.ll .ll-total b{color:#fcc715;font-size:19px;font-weight:800}
.ll .ll-steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin:0;padding:0;list-style:none}
.ll .ll-steps li{position:relative;padding:38px 8px 0;text-align:center}
.ll .ll-steps li::before{content:"";position:absolute;top:11px;left:0;right:0;height:4px;background:#d5d5d5}
.ll .ll-steps li:first-child::before{left:50%}
.ll .ll-steps li:last-child::before{right:50%}
.ll .ll-steps li.is-done::before{background:#fcc715}
.ll .ll-steps li::after{content:"";position:absolute;top:0;left:50%;width:26px;height:26px;margin-left:-13px;border-radius:50%;border:4px solid #d5d5d5;background:#fff}
.ll .ll-steps li.is-done::after{border-color:#fcc715;background:#fcc715}
.ll .ll-steps li.is-next::after{border-color:#000}
.ll .ll-pct{font-size:34px;line-height:1;font-weight:800}
.ll .ll-pw{margin-top:2px;font-size:14px;line-height:1.25;color:#555}
.ll .ll-sthr{margin-top:8px;font-size:15px;font-weight:700}
.ll .ll-sst{margin:6px auto 0;max-width:150px;font-size:13px;line-height:1.3;color:#555}
.ll .ll-sst .ll-bar{margin:0 0 6px}

/* filters */
.ll .ll-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.ll .ll-tab{appearance:none;display:inline-flex;align-items:center;min-height:42px;padding:0 18px;border:2px solid #000;border-radius:999px;background:#fff;color:#000;font-family:inherit;font-size:15px;font-weight:800;cursor:pointer}
.ll .ll-tab[aria-pressed="true"]{background:#000;color:#fff}
.ll .ll-tab b{min-width:22px;margin-left:8px;padding:0 6px;border-radius:999px;background:#fcc715;color:#000;font-size:13px;line-height:20px;text-align:center}
.ll .ll-tab:focus-visible,.ll .ll-btn:focus-visible{outline:3px solid #000;outline-offset:2px}

/* reward cards */
.ll .ll-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(204px,1fr));gap:16px;margin:0;padding:0;list-style:none}
.ll .ll-card{display:flex;flex-direction:column;overflow:hidden;border:2px solid #dcdcdc;border-radius:8px;background:#fff}
.ll .ll-ch{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:0 8px;padding:9px 12px;background:#efefef;color:#111}
.ll .ll-lvl{font-size:17px;font-weight:800;text-transform:capitalize;white-space:nowrap}
.ll .ll-thr{font-size:13px;font-weight:700;color:#555;white-space:nowrap}
.ll .ll-card.is-claim{border-color:#fcc715}
.ll .ll-card.is-claim .ll-ch{background:#fcc715}
.ll .ll-card.is-claim .ll-thr{color:#111}
.ll .ll-card.is-next{border-color:#000}
.ll .ll-card.is-next .ll-ch{background:#000;color:#fff}
.ll .ll-card.is-next .ll-thr{color:#fcc715}
.ll .ll-pic{appearance:none;display:grid;place-items:center;width:calc(100% - 24px);aspect-ratio:5/6;margin:12px 12px 8px;padding:0;border:0;border-radius:6px;background:#efefef;overflow:hidden;cursor:zoom-in}
.ll .ll-pic img{display:block;width:100%;height:100%;object-fit:contain}
.ll .ll-pic-icon{cursor:default}
.ll .ll-pic-icon .ll-ic{width:64px;height:64px}
.ll .ll-pic-icon .ll-ic svg{width:34px;height:34px}
.ll .ll-pic:focus-visible{outline:3px solid #000;outline-offset:2px}
.ll .ll-ic{flex:none;display:grid;place-items:center;border-radius:50%;background:#fcc715}
.ll .ll-ic svg{fill:none;stroke:#000;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ll .ll-tt{flex:1;padding:0 12px 10px;font-size:15px;line-height:1.25;font-weight:700;text-align:center}
.ll .ll-st{display:flex;flex-direction:column;justify-content:flex-end;min-height:72px;padding:0 12px 12px}
.ll .ll-btn{display:flex;align-items:center;justify-content:center;min-height:44px;padding:0 12px;border-radius:4px;background:#fcc715;color:#000;font-size:16px;font-weight:800;text-align:center;text-decoration:none}
.ll .ll-btn:hover{background:#ffd94a;color:#000}
.ll .ll-done{display:flex;align-items:center;justify-content:center;min-height:44px;font-size:14px;line-height:1.25;font-weight:800;color:#555;text-align:center}
.ll .ll-wv{white-space:nowrap}
.ll .ll-st .ll-bar{height:6px;margin:0 0 8px}
.ll .ll-st .ll-wait{margin:0;text-align:center}
.ll .ll-st .ll-wl,.ll .ll-st .ll-wv{display:block}
.ll .ll-st .ll-wl{font-size:13px;line-height:1.25;color:#555}
.ll .ll-st .ll-wv{font-size:17px;line-height:1.3;color:#111}

/* filtered views */
.ll[data-f="claim"] .ll-card:not(.is-claim),.ll[data-f="next"] .ll-card.is-reached{display:none}

/* enlarged picture */
.ll-box{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(0,0,0,.82);cursor:zoom-out}
.ll-box[hidden]{display:none}
.ll-box img{display:block;width:min(92vw,420px);height:auto;border-radius:8px;background:#efefef}

@container (max-width:760px){
  .ll .ll-hero{grid-template-columns:minmax(0,1fr);padding:20px 18px}
  .ll .ll-hero-img{display:none}
  .ll .ll-big{font-size:36px}
  .ll .ll-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
  .ll .ll-lvl{font-size:16px}
  .ll .ll-ch{flex-direction:column;align-items:flex-start;gap:0;padding:8px 10px}
  .ll .ll-thr{font-size:13px}
  .ll .ll-btn{font-size:15px;padding:0 8px}
  .ll .ll-tab{min-height:40px;padding:0 14px}
}
@container (max-width:640px){
  .ll .ll-steps{grid-template-columns:minmax(0,1fr)}
  .ll .ll-steps li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 14px;align-items:baseline;padding:10px 0 10px 40px;text-align:left}
  .ll .ll-steps li::before,.ll .ll-steps li:first-child::before,.ll .ll-steps li:last-child::before{top:0;bottom:0;left:11px;right:auto;width:4px;height:auto}
  .ll .ll-steps li:first-child::before{top:50%}
  .ll .ll-steps li:last-child::before{bottom:50%}
  .ll .ll-steps li::after{top:50%;left:0;margin:-13px 0 0}
  .ll .ll-pct{grid-row:1/3;font-size:28px}
  .ll .ll-pw{margin:0}
  .ll .ll-sthr{grid-column:2;margin:0}
  .ll .ll-sst{grid-column:1/-1;max-width:none;margin:4px 0 0}
}

/* dlugie slowa (np. UBERRASCHUNGSPREIS na 320-375 px): dzielenie wg atrybutu lang widgetu, lamanie jako zabezpieczenie */
.ll .ll-tt,.ll .ll-nt,.ll .ll-ch,.ll h2{-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word;word-wrap:break-word}
/* izolacja od stylow strefy konta (Open Sans 12 px, odstep li, wersaliki h2): kroj i rozmiar jak w projekcie.
   Barlow laduje naglowek sklepu (layouts/shop/htmlheader.blade.php). */
.ll,.scl-wrap{font-family:Barlow,Arial,sans-serif;font-size:16px;line-height:normal}
.ll ul.ll-grid>li.ll-card{margin:0;padding:0;line-height:normal}
.ll b{font-weight:bolder}
.ll-box:focus{outline:none}
.ll h2{text-transform:none;letter-spacing:normal}

/* baner dla gosci: markup w bloku panelu desc-loyaltyv2-1-baner, style tutaj (karta 1 briefu) */
.scl-wrap{container-type:inline-size;margin:0 0 24px}
.scl-banner{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px;background:#000;color:#fff;border-radius:6px;padding:20px 32px}
.scl-banner .scl-icon{display:block;width:88px;height:auto}
.scl-banner .scl-text h2{margin:0 0 6px;font-size:22px;line-height:1.2;font-weight:800;text-transform:uppercase;color:#fff}
.scl-banner .scl-text p{margin:0;font-size:15px;line-height:1.45;font-weight:500;color:#d6d6d6}
.scl-banner .scl-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 36px;background:#fdc916;color:#000;font-size:15px;font-weight:800;text-transform:uppercase;text-decoration:none;white-space:nowrap;border-radius:4px}
.scl-banner .scl-btn:hover{background:#ffd94a}
.scl-banner .scl-btn:focus-visible{outline:3px solid #fff;outline-offset:3px}
@container (max-width:640px){
  .scl-banner{grid-template-columns:auto 1fr;gap:14px 16px;padding:18px 16px}
  .scl-banner .scl-icon{width:64px}
  .scl-banner .scl-text h2{font-size:18px}
  .scl-banner .scl-text p{font-size:14px}
  .scl-banner .scl-btn{grid-column:1/-1;width:100%}
}
@container (max-width:360px){
  .scl-banner .scl-icon{width:52px}
  .scl-banner .scl-text h2{font-size:16px}
}
@supports not (container-type:inline-size){
  @media (max-width:640px){
    .scl-banner{grid-template-columns:auto 1fr;gap:14px 16px;padding:18px 16px}
    .scl-banner .scl-icon{width:64px}
    .scl-banner .scl-text h2{font-size:18px}
    .scl-banner .scl-btn{grid-column:1/-1;width:100%}
  }
}