/* ==========================================================================
   Strona produktu SBC - nowa góra (product/sbc-v2, paczka sbc-v2-produkt-panel).
   Podsumowanie, licznik, pasek i opinie z packet-v2.css (klasy pv2-*), tu tylko to, czego tam nie ma: prefiks sbcp-.
   Karta zawodnika: klasy sbc2-karta / sbc2-zestaw / sbc2-tarcza z sbc-v2/_karta.blade.php (bazowe reguły jak w sbc-v2.css).
   Telefon: jedna kolumna (< 1024 px), jak packet-v2.
   ========================================================================== */
.sbcp {
  --sbcp-panel: #0d131c;
  --sbcp-zloty: #f5a623;
  --sbcp-fiolet: #8b5cf6;
  --sbcp-fiolet-jasny: #c4b5fd;
}

/* ---------- Lewa karta ---------- */
.sbcp-karta {
  position: relative; overflow: hidden; isolation: isolate; border-radius: 20px; background: var(--sbcp-panel);
  color: #c9d0da; padding: 26px 28px 18px; display: flex; flex-direction: column; gap: 18px; min-width: 0;
  box-shadow: 0 16px 34px rgba(13, 16, 23, 0.22);
}
.sbcp-tlo {
  position: absolute; inset: 0; z-index: -2; background-color: #0a0612; background-repeat: no-repeat;
  background-size: cover; background-position: left bottom;
}
/* ciemny gradient od prawej - czytelność tekstu na tle */
.sbcp-karta::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(270deg, rgba(13, 19, 28, 0.97) 0%, rgba(13, 19, 28, 0.9) 40%, rgba(13, 19, 28, 0.45) 66%, rgba(13, 19, 28, 0) 84%);
}
.sbcp-gora {
  display: grid; grid-template-columns: 190px minmax(0, 1fr); grid-template-areas: "podium info" "podium zdanie";
  column-gap: 26px; row-gap: 10px; align-items: end; min-height: 250px;
}
.sbcp-podium { grid-area: podium; align-self: end; display: flex; justify-content: center; padding-bottom: 6px; }
.sbcp-info { grid-area: info; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pv2 .sbcp-zdanie { grid-area: zdanie; align-self: start; }

/* karta zawodnika (sbc-v2/_karta.blade.php) */
.sbcp .sbc2-karta { position: relative; display: block; overflow: hidden; aspect-ratio: 270 / 347; flex: none; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.45)); }
.sbcp .sbc2-karta img { position: absolute; width: 111.111%; left: -3.704%; top: -11.239%; height: auto; max-width: none; display: block; }
.sbcp .sbc2-zestaw, .sbcp .sbc2-tarcza {
  display: flex; align-items: center; justify-content: center; overflow: hidden; flex: none; border-radius: 14px;
  background: radial-gradient(circle at 50% 35%, var(--sbc2-glow, #c3a83766), #0b121b 72%);
}
.sbcp .sbc2-zestaw img, .sbcp .sbc2-tarcza img { display: block; max-width: 86%; max-height: 86%; width: auto; height: auto; object-fit: contain; }
.sbcp-podium .sbc2-karta--duza { width: 170px; filter: drop-shadow(0 0 22px rgba(139, 92, 246, 0.55)) drop-shadow(0 14px 18px rgba(0, 0, 0, 0.6)); }
.sbcp-podium .sbc2-zestaw--duza, .sbcp-podium .sbc2-tarcza--duza { width: 170px; height: 212px; border-radius: 18px; box-shadow: 0 0 26px rgba(139, 92, 246, 0.45); }
.sbcp-otrz .sbc2-karta--mini { width: 54px; }
.sbcp-otrz .sbc2-zestaw--mini, .sbcp-otrz .sbc2-tarcza--mini { width: 56px; height: 70px; border-radius: 10px; }

/* chipy */
.sbcp-chipy { display: flex; flex-wrap: wrap; gap: 6px; }
.sbcp-chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700;
  line-height: 1.3; color: #e9edf2; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.14); white-space: nowrap;
}
.sbcp-chip svg { color: var(--sbcp-zloty); flex: none; }
.sbcp-chip--kat { color: var(--sbcp-fiolet-jasny); background: rgba(139, 92, 246, 0.16); border-color: rgba(139, 92, 246, 0.45); }
.sbcp-chip--czas { font-variant-numeric: tabular-nums; }
.sbcp-chip--soon { color: #ffd9a8; background: rgba(245, 166, 35, 0.14); border-color: rgba(245, 166, 35, 0.5); }
.sbcp-chip--last { color: #ffc2c2; background: rgba(239, 68, 68, 0.16); border-color: rgba(239, 68, 68, 0.55); }
.sbcp-chip--last svg { color: #f87171; }

.sbcp-ea { font-size: 12.5px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: var(--sbcp-zloty); margin-top: 4px; }
.pv2 .sbcp-h1 {
  margin: 0; font-family: var(--pv2-cond); font-weight: 800; font-size: 50px; line-height: 0.98; color: #fff;
  text-transform: none; letter-spacing: 0; text-align: left; overflow-wrap: anywhere;
}
.sbcp-podpis { font-size: 14px; font-weight: 600; color: #c9d0da; }
.pv2 .sbcp-zdanie { margin: 0 0 6px; font-size: 15px; line-height: 1.5; color: #aeb6c3; max-width: 520px; }

/* przełącznik platformy */
.sbcp-platformy { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sbcp-plat {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; min-width: 0;
  background: rgba(255, 255, 255, 0.05); border: 1.5px solid rgba(255, 255, 255, 0.14); color: #e9edf2; text-decoration: none;
  transition: border-color 0.15s, background 0.15s;
}
.pv2 a.sbcp-plat { color: #e9edf2; text-decoration: none; }
.pv2 a.sbcp-plat:hover { border-color: rgba(255, 255, 255, 0.45); background: rgba(255, 255, 255, 0.09); color: #fff; }
.sbcp-plat-ikona { width: 40px; height: 40px; flex: none; border-radius: 11px; background: rgba(255, 255, 255, 0.08); display: flex; align-items: center; justify-content: center; }
.sbcp-plat-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sbcp-plat-txt b { font-family: var(--pv2-cond); font-weight: 800; font-size: 20px; line-height: 1.05; color: #fff; }
.sbcp-plat-txt span { font-family: var(--pv2-cond); font-weight: 700; font-size: 16px; color: var(--pv2-zloty-jasny); white-space: nowrap; }
.sbcp-plat.is-on { border-color: var(--sbcp-zloty); background: rgba(245, 166, 35, 0.1); box-shadow: 0 0 0 1px var(--sbcp-zloty) inset; }
.sbcp-plat.is-on .sbcp-plat-ikona { background: rgba(245, 166, 35, 0.18); color: var(--pv2-zloty-jasny); }
.sbcp-plat.is-on .pv2-ptaszek { display: flex; top: 50%; right: 12px; transform: translateY(-50%); width: 22px; height: 22px; }
.sbcp-plat.is-off { opacity: 0.5; cursor: not-allowed; }
.sbcp-plat.is-off .sbcp-plat-txt span { color: #9aa3b2; font-family: inherit; font-weight: 600; font-size: 12.5px; }

/* kafelki */
.sbcp-kafle { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sbcp-kafel { background: rgba(10, 14, 22, 0.78); border: 1px solid #263042; border-radius: 14px; padding: 10px 13px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sbcp-kafel strong { font-family: var(--pv2-cond); font-weight: 800; font-size: 25px; line-height: 1.05; color: var(--sbcp-zloty); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sbcp-kafel span { font-size: 12.5px; font-weight: 600; color: #9aa3b2; line-height: 1.3; }

.sbcp .pv2-sprzedawca { margin-top: 2px; }

/* ---------- Podsumowanie ---------- */
.sbcp .pv2-bilet { background: var(--sbcp-panel); }
.sbcp .pv2-bilet-gora { background: radial-gradient(120% 120% at 100% 0%, #241a3a 0%, var(--sbcp-panel) 62%); }
.sbcp-otrz { display: flex; align-items: center; gap: 12px; min-width: 0; }
.sbcp-otrz-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sbcp-otrz-txt b { font-family: var(--pv2-cond); font-weight: 800; font-size: 26px; line-height: 1.05; color: #fff; overflow-wrap: anywhere; }
.sbcp-otrz-txt span { font-size: 12.5px; color: #9aa3b2; }
.sbcp-ilosc { margin: 14px 22px 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sbcp .sbcp-ilosc-lbl { margin: 0; font-size: 13.5px; font-weight: 600; color: #c9d0da; }
.sbcp .sbcp-licznik { width: 168px; height: 46px; border-color: #2a3140; background: #151b25; }
.sbcp .sbcp-licznik .pv2-licznik-btn { width: 46px; height: 46px; background: #1b2230; color: #e9edf2; }
.sbcp .sbcp-licznik .pv2-licznik-btn:first-child { border-right-color: #2a3140; }
.sbcp .sbcp-licznik .pv2-licznik-btn:last-child { border-left-color: #2a3140; }
.sbcp .sbcp-licznik .pv2-licznik-btn:hover { background: #242c3c; }
.sbcp .sbcp-licznik .pv2-licznik-btn:disabled { color: #4b5466; background: #1b2230; }
.sbcp .pv2-licznik input.pv2-licznik-pole { text-align: center; color: #fff; font-size: 23px; }
.sbcp .pv2-zaplata-lbl { padding-bottom: 36px; }
.sbcp-przygotuj { margin: 0 22px 14px; text-align: center; font-size: 12.5px; }
.pv2 .sbcp-przygotuj a { color: var(--pv2-zloty-jasny); font-weight: 700; }

/* ---------- Telefon i tablet ---------- */
@media (max-width: 1023px) {
  .sbcp-karta { padding: 16px 16px 14px; gap: 14px; border-radius: 18px; }
  /* tło przycięte do lewej części (reflektor i podium) */
  .sbcp-tlo { background-position: 12% bottom; }
  .sbcp-karta::before { background: linear-gradient(270deg, rgba(13, 19, 28, 0.95) 0%, rgba(13, 19, 28, 0.82) 45%, rgba(13, 19, 28, 0.35) 75%, rgba(13, 19, 28, 0.15) 100%); }
  .sbcp-gora { grid-template-columns: 104px minmax(0, 1fr); grid-template-areas: "podium info" "zdanie zdanie"; column-gap: 14px; row-gap: 12px; align-items: center; min-height: 0; }
  .sbcp-podium { align-self: center; padding-bottom: 0; }
  .pv2 .sbcp-zdanie { margin: 0; }
  .sbcp-podium .sbc2-karta--duza { width: 104px; }
  .sbcp-podium .sbc2-zestaw--duza, .sbcp-podium .sbc2-tarcza--duza { width: 104px; height: 132px; border-radius: 14px; }
  .sbcp-info { gap: 5px; padding-bottom: 0; }
  .sbcp-chip { font-size: 11px; padding: 3px 8px; }
  .sbcp-ea { font-size: 11px; margin-top: 2px; }
  .pv2 .sbcp-h1 { font-size: 32px; }
  .sbcp-podpis { font-size: 12.5px; }
  .pv2 .sbcp-zdanie { font-size: 13.5px; }
  .sbcp-plat { padding: 10px 11px; gap: 9px; }
  .sbcp-plat-ikona { width: 34px; height: 34px; border-radius: 10px; }
  .sbcp-plat-txt b { font-size: 18px; }
  .sbcp-plat-txt span { font-size: 15px; }
  .sbcp-plat.is-on .pv2-ptaszek { top: 8px; right: 8px; transform: none; width: 18px; height: 18px; }
  .sbcp-kafle { gap: 8px; }
  .sbcp-kafel { padding: 9px 10px; }
  .sbcp-kafel strong { font-size: 20px; }
  .sbcp-kafel span { font-size: 11.5px; }
}
@media (max-width: 420px) {
  .pv2 .sbcp-h1 { font-size: 28px; }
}
@media (max-width: 360px) {
  .sbcp-gora { grid-template-columns: 88px minmax(0, 1fr); }
  .sbcp-podium .sbc2-karta--duza { width: 88px; }
  .sbcp-kafel strong { font-size: 18px; }
}