/* ================================================================
   KONFIGURATOR POLISH — scoped to .konfigurator-page
   Dodaje premium feel bez łamania istniejącej logiki i JS.
   ================================================================ */

.konfigurator-page {
 --kp-brand: #1C3957;
 --kp-brand-600: #2461a3;
 --kp-accent: #3d82c7;
 --kp-ok: #22c55e;
 --kp-gold: #f5b400;
 --kp-sm: 0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
 --kp-md: 0 4px 12px rgba(15,23,42,.06), 0 12px 32px rgba(15,23,42,.08);
 --kp-lg: 0 8px 24px rgba(15,23,42,.1), 0 24px 56px rgba(15,23,42,.12);
}

/* ============ Breadcrumb ============ */
.konfigurator-page nav[aria-label="Breadcrumb"] {
 max-width: 1160px;
 margin: 0 auto;
 padding: 14px 24px;
 font-family: 'Saira', sans-serif;
 font-size: 13px;
 color: #6b7b92;
}
.konfigurator-page nav[aria-label="Breadcrumb"] a {
 color: #6b7b92;
 transition: color .2s ease;
}
.konfigurator-page nav[aria-label="Breadcrumb"] a:hover {
 color: var(--kp-brand-600);
}

/* ============ Wrapper ============ */
.konfigurator-page .konfig-wrapper {
 max-width: 1160px;
 padding: 20px 24px 100px;
}

/* ============ HERO polish ============ */
.konfigurator-page .konfig-hero {
 position: relative;
 padding: 56px 36px 48px;
 background: linear-gradient(135deg, #f7fafd 0%, #eef3f9 100%);
 border-radius: 20px;
 overflow: hidden;
 margin-bottom: 28px;
 box-shadow: var(--kp-sm);
 border: 1px solid rgba(28,57,87,.06);
}
.konfigurator-page .konfig-hero::before {
 content: "";
 position: absolute;
 inset: 0;
 background:
   radial-gradient(55% 50% at 88% 12%, rgba(61,130,199,.18) 0%, transparent 70%),
   radial-gradient(45% 40% at 8% 95%, rgba(28,57,87,.1) 0%, transparent 70%);
 pointer-events: none;
}
.konfigurator-page .konfig-hero > * { position: relative; z-index: 1; }

.kp-hero-eyebrow {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 font-family: 'Saira', sans-serif;
 font-size: 12px;
 font-weight: 600;
 letter-spacing: .18em;
 text-transform: uppercase;
 color: var(--kp-brand-600);
 background: rgba(36,97,163,.08);
 border: 1px solid rgba(36,97,163,.2);
 padding: 7px 14px;
 border-radius: 999px;
 margin-bottom: 18px;
}
.kp-hero-eyebrow-dot {
 width: 8px;
 height: 8px;
 border-radius: 50%;
 background: var(--kp-ok);
 box-shadow: 0 0 0 3px rgba(34,197,94,.22);
 animation: kpPulse 2s ease-in-out infinite;
}
@keyframes kpPulse {
 0%, 100% { box-shadow: 0 0 0 3px rgba(34,197,94,.22); }
 50%      { box-shadow: 0 0 0 6px rgba(34,197,94,0); }
}

.konfigurator-page .konfig-hero h1 {
 font-family: 'Saira', sans-serif;
 font-size: clamp(30px, 4.2vw, 46px);
 font-weight: 700;
 color: var(--kp-brand);
 line-height: 1.12;
 letter-spacing: -.015em;
 margin: 0 0 16px;
 text-align: left;
}
.kp-hero-accent {
 background: linear-gradient(100deg, var(--kp-brand-600) 0%, var(--kp-accent) 60%, var(--kp-brand) 100%);
 -webkit-background-clip: text;
 background-clip: text;
 -webkit-text-fill-color: transparent;
 color: transparent;
 font-weight: 800;
}

.konfigurator-page .konfig-hero > p {
 font-family: 'Saira', sans-serif;
 font-size: 16px;
 line-height: 1.65;
 color: #4a5768;
 max-width: 780px;
 margin: 0 0 24px;
 text-align: left;
}

/* Trust chips row */
.kp-hero-chips {
 display: flex;
 flex-wrap: wrap;
 gap: 10px;
 margin: 0 0 24px;
 list-style: none;
 padding: 0;
}
.kp-hero-chips li {
 display: inline-flex;
 align-items: center;
 font-family: 'Saira', sans-serif;
 font-size: 13px;
 font-weight: 500;
 color: var(--kp-brand);
 background: rgba(255,255,255,.75);
 border: 1px solid rgba(28,57,87,.12);
 backdrop-filter: blur(8px);
 padding: 8px 16px;
 border-radius: 999px;
 transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.kp-hero-chips li:hover {
 transform: translateY(-1px);
 box-shadow: var(--kp-sm);
 border-color: rgba(36,97,163,.3);
}

/* Sonder-callout refresh */
.konfigurator-page .konfig-sonder {
 position: relative;
 padding: 18px 22px;
 background: #fff;
 border: 1px solid rgba(36,97,163,.18);
 border-left: 4px solid var(--kp-brand-600);
 border-radius: 12px;
 box-shadow: var(--kp-sm);
 margin-top: 6px;
}
.konfigurator-page .konfig-sonder span {
 font-family: 'Saira', sans-serif;
 font-size: 14.5px;
 line-height: 1.55;
 color: #3d4a5f;
}
.konfigurator-page .konfig-sonder strong { color: var(--kp-brand); }

/* ============ Progress bar polish ============ */
.konfigurator-page .konfig-progress {
 border-radius: 14px;
 border: 1px solid rgba(28,57,87,.08);
 box-shadow: var(--kp-sm);
 margin: 0 0 28px;
 padding: 16px 20px;
 top: 84px;
}
.konfigurator-page .konfig-progress__bar {
 height: 6px;
 background: #e4ebf3;
}
.konfigurator-page .konfig-progress__fill {
 background: linear-gradient(90deg, var(--kp-brand-600) 0%, var(--kp-accent) 100%);
 box-shadow: 0 1px 3px rgba(61,130,199,.3);
 position: relative;
}
.konfigurator-page .konfig-progress__fill::after {
 content: "";
 position: absolute;
 right: 0;
 top: -3px;
 width: 12px;
 height: 12px;
 border-radius: 50%;
 background: #fff;
 border: 3px solid var(--kp-accent);
 box-shadow: 0 2px 6px rgba(61,130,199,.35);
}
.konfigurator-page .konfig-progress__label {
 font-family: 'Saira', sans-serif;
 font-size: 13px;
 color: #4a5768;
 padding-top: 2px;
}
.konfigurator-page .konfig-progress__label strong {
 color: var(--kp-brand);
 font-weight: 700;
}
.konfigurator-page .konfig-progress__reset {
 color: #8090a8;
 font-family: 'Saira', sans-serif;
 font-size: 12.5px;
 background: transparent;
 border: none;
 padding: 4px 8px;
 cursor: pointer;
 border-radius: 6px;
 transition: color .2s ease, background .2s ease;
}
.konfigurator-page .konfig-progress__reset:hover {
 color: var(--kp-brand-600);
 background: rgba(36,97,163,.06);
}

/* ============ Step header polish ============ */
.konfigurator-page .konfig-step__header {
 text-align: center;
 max-width: 720px;
 margin: 0 auto 32px;
}
.konfigurator-page .konfig-step__eyebrow {
 display: inline-block;
 font-family: 'Saira', sans-serif;
 font-size: 11.5px;
 font-weight: 600;
 letter-spacing: .2em;
 text-transform: uppercase;
 color: var(--kp-brand-600);
 background: rgba(36,97,163,.08);
 padding: 5px 12px;
 border-radius: 999px;
 margin: 0 0 12px;
}
.konfigurator-page .konfig-step__title {
 font-family: 'Saira', sans-serif;
 font-size: clamp(22px, 3vw, 30px);
 font-weight: 700;
 color: var(--kp-brand);
 letter-spacing: -.01em;
 line-height: 1.2;
 margin: 0 0 10px;
}
.konfigurator-page .konfig-step__desc {
 font-family: 'Saira', sans-serif;
 font-size: 14.5px;
 line-height: 1.6;
 color: #566377;
 margin: 0;
}

/* ============ Cards polish ============ */
.konfigurator-page .konfig-card {
 position: relative;
 border-radius: 14px;
 border: 1px solid rgba(28,57,87,.1);
 background: #fff;
 box-shadow: var(--kp-sm);
 overflow: hidden;
 transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.konfigurator-page .konfig-card::before {
 content: "";
 position: absolute;
 inset-inline: 0;
 top: 0;
 height: 3px;
 background: linear-gradient(90deg, var(--kp-brand-600) 0%, var(--kp-accent) 100%);
 transform: scaleX(0);
 transform-origin: left center;
 transition: transform .4s ease;
 z-index: 3;
}
.konfigurator-page .konfig-card:hover {
 transform: translateY(-4px);
 box-shadow: var(--kp-md);
 border-color: rgba(36,97,163,.28);
}
.konfigurator-page .konfig-card:hover::before {
 transform: scaleX(1);
}
.konfigurator-page .konfig-card:has(input:checked) {
 border-color: var(--kp-brand-600);
 box-shadow: 0 0 0 2px rgba(36,97,163,.25), var(--kp-md);
}
.konfigurator-page .konfig-card:has(input:checked)::before {
 transform: scaleX(1);
}

.konfigurator-page .konfig-card__img {
 transition: transform .5s ease;
}
.konfigurator-page .konfig-card:hover .konfig-card__img {
 transform: scale(1.04);
}

.konfigurator-page .konfig-card__body {
 padding: 14px 16px 16px;
}
.konfigurator-page .konfig-card__title {
 font-family: 'Saira', sans-serif;
 font-size: 15px;
 font-weight: 700;
 color: var(--kp-brand);
 margin: 0 0 3px;
 line-height: 1.3;
}
.konfigurator-page .konfig-card__desc {
 font-family: 'Saira', sans-serif;
 font-size: 12.5px;
 color: #6b7b92;
 margin: 0;
 line-height: 1.4;
}

/* Check badge on selected card */
.konfigurator-page .konfig-card__check {
 position: absolute;
 top: 10px;
 right: 10px;
 width: 26px;
 height: 26px;
 border-radius: 50%;
 background: #fff;
 border: 2px solid rgba(28,57,87,.2);
 transition: all .28s ease;
 z-index: 2;
}
.konfigurator-page .konfig-card:has(input:checked) .konfig-card__check {
 background: linear-gradient(135deg, var(--kp-brand-600) 0%, var(--kp-brand) 100%);
 border-color: var(--kp-brand-600);
 box-shadow: 0 4px 10px rgba(36,97,163,.35);
}
.konfigurator-page .konfig-card:has(input:checked) .konfig-card__check::after {
 content: "";
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -60%) rotate(-45deg);
 width: 11px;
 height: 6px;
 border-left: 2px solid #fff;
 border-bottom: 2px solid #fff;
}

/* Badge "Beliebt" for popular category */
.kp-badge-popular {
 position: absolute;
 top: 12px;
 left: 12px;
 z-index: 3;
 font-family: 'Saira', sans-serif;
 font-size: 10.5px;
 font-weight: 700;
 letter-spacing: .08em;
 text-transform: uppercase;
 color: #fff;
 background: linear-gradient(135deg, #f5b400 0%, #f59e0b 100%);
 padding: 5px 11px;
 border-radius: 999px;
 box-shadow: 0 4px 12px rgba(245,158,11,.35);
}

.kp-badge-new {
 position: absolute;
 top: 12px;
 left: 12px;
 z-index: 3;
 font-family: 'Saira', sans-serif;
 font-size: 10.5px;
 font-weight: 700;
 letter-spacing: .08em;
 text-transform: uppercase;
 color: #fff;
 background: linear-gradient(135deg, var(--kp-ok) 0%, #16a34a 100%);
 padding: 5px 10px;
 border-radius: 999px;
 box-shadow: 0 4px 12px rgba(34,197,94,.35);
}

/* ============ Navigation buttons polish ============ */
.konfigurator-page .konfig-nav {
 margin-top: 32px;
 padding-top: 24px;
 border-top: 1px solid rgba(28,57,87,.08);
 display: flex;
 justify-content: space-between;
 gap: 14px;
 flex-wrap: wrap;
}
.konfigurator-page .konfig-btn {
 font-family: 'Saira', sans-serif;
 font-size: 14.5px;
 font-weight: 600;
 letter-spacing: .01em;
 padding: 13px 26px;
 border-radius: 10px;
 transition: transform .22s ease, box-shadow .22s ease, background .22s ease, color .22s ease;
 position: relative;
 overflow: hidden;
}
.konfigurator-page .konfig-btn--primary {
 background: linear-gradient(135deg, var(--kp-brand-600) 0%, var(--kp-brand) 100%);
 color: #fff;
 border: none;
 box-shadow: 0 6px 16px rgba(36,97,163,.35);
}
.konfigurator-page .konfig-btn--primary:hover:not(:disabled) {
 transform: translateY(-2px);
 box-shadow: 0 10px 24px rgba(36,97,163,.45);
}
.konfigurator-page .konfig-btn--primary::before {
 content: "";
 position: absolute;
 top: 0;
 left: -100%;
 width: 100%;
 height: 100%;
 background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
 transition: left .6s ease;
}
.konfigurator-page .konfig-btn--primary:hover::before { left: 100%; }
.konfigurator-page .konfig-btn--primary:disabled {
 opacity: .5;
 cursor: not-allowed;
 box-shadow: none;
}
.konfigurator-page .konfig-btn--ghost {
 background: #fff;
 color: var(--kp-brand);
 border: 1px solid rgba(28,57,87,.15);
}
.konfigurator-page .konfig-btn--ghost:hover {
 background: #f4f8fc;
 border-color: rgba(36,97,163,.35);
 transform: translateY(-1px);
}

/* ============ Social proof strip between steps ============ */
.kp-socialproof {
 margin: 28px 0;
 padding: 20px 28px;
 background: linear-gradient(135deg, #fff 0%, #f7fafd 100%);
 border: 1px solid rgba(28,57,87,.08);
 border-radius: 14px;
 box-shadow: var(--kp-sm);
 display: flex;
 align-items: center;
 gap: 20px;
 flex-wrap: wrap;
}
.kp-socialproof-avatars {
 display: flex;
 flex: 0 0 auto;
}
.kp-socialproof-avatars span {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 36px;
 height: 36px;
 border-radius: 50%;
 background: linear-gradient(135deg, var(--kp-brand-600), var(--kp-brand));
 color: #fff;
 font-family: 'Saira', sans-serif;
 font-size: 13px;
 font-weight: 700;
 border: 2px solid #fff;
 margin-left: -8px;
 box-shadow: 0 2px 4px rgba(0,0,0,.1);
}
.kp-socialproof-avatars span:nth-child(1) { margin-left: 0; background: linear-gradient(135deg, #3d82c7, #2461a3); }
.kp-socialproof-avatars span:nth-child(2) { background: linear-gradient(135deg, #2461a3, #1C3957); }
.kp-socialproof-avatars span:nth-child(3) { background: linear-gradient(135deg, #5a9cd8, #3d82c7); }
.kp-socialproof-avatars span:nth-child(4) { background: linear-gradient(135deg, #0f1e30, #1C3957); color:#c8d8e8; }

.kp-socialproof-text {
 font-family: 'Saira', sans-serif;
 font-size: 13.5px;
 color: #4a5768;
 line-height: 1.5;
 flex: 1;
 min-width: 220px;
}
.kp-socialproof-text strong { color: var(--kp-brand); font-weight: 700; }
.kp-socialproof-stars {
 color: #f5b400;
 letter-spacing: 2px;
 font-size: 15px;
 margin-right: 4px;
}

/* ============ Help card (floating) on desktop ============ */
.kp-help-card {
 position: fixed;
 bottom: 24px;
 left: 24px;
 z-index: 550;
 background: #fff;
 border-radius: 14px;
 box-shadow: var(--kp-lg);
 padding: 14px 18px 14px 14px;
 display: flex;
 align-items: center;
 gap: 12px;
 max-width: 340px;
 border: 1px solid rgba(28,57,87,.1);
 transform: translateY(120%);
 opacity: 0;
 transition: transform .4s ease, opacity .4s ease;
}
.kp-help-card.is-visible {
 transform: translateY(0);
 opacity: 1;
}
.kp-help-avatar {
 width: 44px;
 height: 44px;
 border-radius: 50%;
 background: linear-gradient(135deg, var(--kp-brand-600) 0%, var(--kp-brand) 100%);
 color: #fff;
 display: flex;
 align-items: center;
 justify-content: center;
 font-family: 'Saira', sans-serif;
 font-weight: 700;
 font-size: 14px;
 flex: 0 0 auto;
 box-shadow: 0 4px 10px rgba(28,57,87,.2);
 position: relative;
}
.kp-help-avatar::after {
 content: "";
 position: absolute;
 bottom: 2px;
 right: 2px;
 width: 10px;
 height: 10px;
 border-radius: 50%;
 background: var(--kp-ok);
 border: 2px solid #fff;
}
.kp-help-body {
 flex: 1;
 min-width: 0;
}
.kp-help-title {
 font-family: 'Saira', sans-serif;
 font-size: 12px;
 color: #8090a8;
 margin: 0 0 2px;
 letter-spacing: .04em;
}
.kp-help-text {
 font-family: 'Saira', sans-serif;
 font-size: 13.5px;
 color: var(--kp-brand);
 font-weight: 600;
 margin: 0;
 line-height: 1.3;
}
.kp-help-close {
 background: transparent;
 border: none;
 color: #8090a8;
 font-size: 16px;
 cursor: pointer;
 padding: 4px 8px;
 line-height: 1;
 align-self: flex-start;
 transition: color .2s ease;
}
.kp-help-close:hover { color: var(--kp-brand); }

@media (max-width: 900px) {
 .kp-help-card { display: none; }
}

/* ============ Mobile adjustments ============ */
@media (max-width: 767px) {
 .konfigurator-page .konfig-hero {
  padding: 36px 20px 32px;
  border-radius: 16px;
  margin-bottom: 20px;
 }
 .konfigurator-page .konfig-hero h1 {
  font-size: 26px;
 }
 .konfigurator-page .konfig-hero > p {
  font-size: 14.5px;
 }
 .kp-hero-chips {
  gap: 8px;
 }
 .kp-hero-chips li {
  font-size: 12px;
  padding: 6px 11px;
 }
 .konfigurator-page .konfig-sonder {
  padding: 14px 16px;
  gap: 10px;
 }
 .konfigurator-page .konfig-sonder span {
  font-size: 13.5px;
 }
 .konfigurator-page .konfig-progress {
  padding: 14px 16px;
 }
 .konfigurator-page .konfig-btn {
  padding: 12px 20px;
  font-size: 13.5px;
 }
 .kp-socialproof {
  padding: 16px 20px;
  gap: 14px;
 }
}