:root {
    --navy:#0f2528; --navy-2:#173a3e; --blue:#0c7b82; --blue-2:#5fd0c6; --blue-light:#e3f7f5; --gold:#e0a72e;
    --gray-50:#f5f7f7; --gray-100:#edf2f2; --gray-300:#d9e2e2; --gray-500:#647474; --gray-700:#3f5254;
    --green:#16a34a; --coral:#ff7a59; --indigo:#6d7bff; --radius:14px;
  }
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; overflow-x: hidden; }
  body { margin:0; font-family:"Inter", -apple-system, "Segoe UI", Roboto, Arial, sans-serif; background:var(--gray-50); color:#181d24; overflow-x: hidden; max-width:100vw; }
  h1,h2,h3,.logo-mark { font-family:"Montserrat", "Inter", sans-serif; }
  header.top { background:linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 55%, #1a2a52 100%); color:#fff; padding:26px 28px 30px; position:relative; overflow:hidden; }
  header.top::before { content:""; position:absolute; top:-60px; right:-60px; width:280px; height:280px; border-radius:50%; background:radial-gradient(circle, rgba(97,149,255,.35) 0%, rgba(97,149,255,0) 70%); }
  header.top::after { content:""; position:absolute; bottom:-90px; left:20%; width:220px; height:220px; border-radius:50%; background:radial-gradient(circle, rgba(97,149,255,.18) 0%, rgba(97,149,255,0) 70%); }
  .header-inner { max-width:1240px; margin:0 auto; position:relative; z-index:1; }
  /* column-gap/flex-shrink jawnie wyzerowane (nie tylko "brak deklaracji") -
     .logo-mark jest tez zdefiniowany globalnie w layouts/www.blade.php
     (uzywany w site-header i stopce pozostalych 3 stron, z gap:9px i
     flex-shrink:0) - bez tego wyciekalyby tu mimo scope'owania tamtej reguly,
     bo .logo-mark tam celowo zostaje globalny (patrz komentarz przy niej). */
  .logo-mark { display:inline-flex; align-items:center; flex-wrap:wrap; column-gap:0; row-gap:6px; flex-shrink:1; }
  .logo-mark .logo-img { display:block; height:56px; width:auto; filter:drop-shadow(0 2px 8px rgba(0,0,0,.3)); }
  /* <picture> jest teraz elementem flex — bez tego img leży na linii bazowej
     tekstu i dokłada kilka pikseli pustego miejsca pod logo */
  .logo-mark picture, .pdf-header picture { display:flex; align-items:center; }
  .logo-tagline { margin-top:4px; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#8fd8d0; font-weight:600; }
  .logo-tag { display:inline-block; margin-left:10px; padding:2px 9px; border:1px solid rgba(255,255,255,.25); border-radius:20px; font-family:"Inter",sans-serif; font-size:10.5px; font-weight:600; letter-spacing:.06em; color:#c7d2e0; text-transform:uppercase; vertical-align:middle; }
  .logo-tag.biz-badge { background:linear-gradient(135deg, #f0b429 0%, #e0a72e 100%); border-color:transparent; color:#2a1f00; font-weight:800; margin-left:6px; }
  .back-to-site { display:inline-flex; align-items:center; gap:6px; position:fixed; top:16px; right:16px; z-index:500; background:rgba(15,37,40,.88); backdrop-filter:blur(4px); border:1px solid rgba(255,255,255,.3); color:#fff; font-family:"Inter",sans-serif; font-size:12.5px; font-weight:600; padding:8px 15px; border-radius:99px; text-decoration:none; box-shadow:0 6px 18px rgba(0,0,0,.25); transition:background .15s ease, border-color .15s ease; }
  /* Przycisk unosi się nad jasną treścią strony, więc hover NIE może rozjaśniać tła —
     przezroczysta biel dawała biały tekst na jasnym tle. Używamy firmowego turkusu. */
  .back-to-site:hover, .back-to-site:focus-visible { background:var(--blue); border-color:rgba(255,255,255,.55); }
  header.top h1 { margin:14px 0 0; font-size:24px; font-weight:700; }
  header.top p { margin:6px 0 0; color:#c7d2e0; font-size:14.5px; max-width:640px; }
  .step-nav { display:flex; gap:8px; margin-top:20px; flex-wrap:wrap; }
  .step-nav a { display:flex; align-items:center; gap:7px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); color:#e7ecf5; text-decoration:none; font-size:12.5px; font-weight:600; padding:7px 14px 7px 8px; border-radius:20px; transition:background .15s ease, transform .15s ease; }
  .step-nav a:hover { background:rgba(255,255,255,.18); transform:translateY(-1px); }
  .step-nav a .n { display:inline-flex; align-items:center; justify-content:center; width:19px; height:19px; border-radius:50%; color:#10201f; font-size:11px; font-weight:800; }
  .step-nav a:nth-child(1) .n { background:#5fd0c6; }
  .step-nav a:nth-child(2) .n { background:#8b98ff; }
  .step-nav a:nth-child(3) .n { background:#f0b429; }
  .step-nav a:nth-child(4) .n { background:#ff8a65; }
  section.card:nth-of-type(1) > .card-head .step { background:linear-gradient(135deg, #0f9aa3 0%, #5fd0c6 100%); }
  section.card:nth-of-type(2) > .card-head .step { background:linear-gradient(135deg, #5a67d8 0%, #8b98ff 100%); }
  section.card:nth-of-type(3) > .card-head .step { background:linear-gradient(135deg, #d69511 0%, #f0b429 100%); }
  section.card:nth-of-type(4) > .card-head .step { background:linear-gradient(135deg, #e8632f 0%, #ff8a65 100%); }
  section.card:nth-of-type(5) > .card-head .step { background:linear-gradient(135deg, #334155 0%, #64748b 100%); }
  section.card:nth-of-type(1) { border-left:5px solid #5fd0c6; }
  section.card:nth-of-type(2) { border-left:5px solid #8b98ff; }
  section.card:nth-of-type(3) { border-left:5px solid #f0b429; }
  section.card:nth-of-type(4) { border-left:5px solid #ff8a65; }
  section.card:nth-of-type(5) { border-left:5px solid #64748b; }
  section.card:nth-of-type(1) > .card-head { background:linear-gradient(180deg, #eefbf9 0%, #ffffff 100%); }
  section.card:nth-of-type(2) > .card-head { background:linear-gradient(180deg, #eef0ff 0%, #ffffff 100%); }
  section.card:nth-of-type(3) > .card-head { background:linear-gradient(180deg, #fef8ea 0%, #ffffff 100%); }
  section.card:nth-of-type(4) > .card-head { background:linear-gradient(180deg, #fef1ec 0%, #ffffff 100%); }
  section.card:nth-of-type(5) > .card-head { background:linear-gradient(180deg, #f1f3f6 0%, #ffffff 100%); }
  .card-icon { width:22px; height:22px; margin-right:9px; flex:0 0 auto; }
  section.card:nth-of-type(1) .card-icon { color:#0f9aa3; }
  section.card:nth-of-type(2) .card-icon { color:#5a67d8; }
  section.card:nth-of-type(3) .card-icon { color:#d69511; }
  section.card:nth-of-type(4) .card-icon { color:#e8632f; }
  section.card:nth-of-type(5) .card-icon { color:#334155; }
  .card-head-title { display:flex; flex-direction:column; gap:3px; }
  .card-subtitle { margin:0; font-size:12.5px; color:var(--gray-500); font-weight:500; }
  .wrap { display:grid; grid-template-columns: minmax(0,1fr) 350px; gap:22px; max-width:1240px; margin:26px auto; padding:0 20px; align-items:start; }
  .wrap .left { min-width:0; }
  @media (max-width: 880px){ .wrap{ grid-template-columns:minmax(0,1fr); } .summary{ position:static !important; min-width:0; } }
  section.card { background:#fff; border:1px solid var(--gray-300); border-radius:var(--radius); margin-bottom:20px; overflow:hidden; box-shadow:0 1px 2px rgba(20,25,35,.04), 0 8px 24px -16px rgba(20,25,35,.12); scroll-margin-top:16px; }
  section.card > .card-head { padding:17px 20px; border-bottom:1px solid var(--gray-100); display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; background:linear-gradient(180deg, #fbfcfe 0%, #ffffff 100%); }
  section.card > .card-head h2 { margin:0; font-size:15.5px; font-weight:700; display:flex; align-items:center; letter-spacing:-.01em; } .card-head h2 .card-head-text { min-width:0; flex:1 1 auto; }
  section.card > .card-head .step { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:8px; background:linear-gradient(135deg, var(--blue) 0%, var(--blue-2) 100%); color:#fff; font-size:13px; font-weight:800; margin-right:11px; font-family:"Montserrat",sans-serif; flex:0 0 auto; }
  section.card > .card-body { padding:19px 20px 20px; }
  .tier-grid { display:flex; flex-wrap:wrap; gap:12px; align-items:flex-start; }
  .tier-option { flex:1 1 190px; max-width:380px; border:2px solid var(--gray-300); border-radius:14px; padding:16px 16px 15px; cursor:pointer; transition: all .15s ease; position:relative; background:#fff; box-shadow:0 1px 2px rgba(20,25,35,.03); display:flex; flex-direction:column; }
  @media (max-width: 520px){ .tier-option{ flex-basis:100%; max-width:none; } }
  @media (max-width: 640px){ .back-to-site { top:10px; right:10px; padding:7px 12px; font-size:11.5px; } }
  .tier-option:hover { border-color:var(--blue-2); transform:translateY(-2px); box-shadow:0 10px 22px -12px rgba(61,107,255,.4); }
  .tier-option.selected { border-color:var(--blue); background:linear-gradient(180deg,var(--blue-light) 0%, #fff 100%); box-shadow:0 10px 22px -12px rgba(15,154,163,.4); }
  .tier-option.selected::after, .addon.selected::after { content:"✓"; position:absolute; top:-9px; right:-9px; width:22px; height:22px; border-radius:50%; background:var(--green); color:#fff; font-size:13px; font-weight:800; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 6px rgba(0,0,0,.25); z-index:2; }
  .tier-option .tile-icon { width:34px; height:34px; border-radius:9px; background:var(--blue-light); color:var(--blue); display:flex; align-items:center; justify-content:center; margin-bottom:10px; flex:0 0 auto; }
  .tier-option .tile-icon svg { width:18px; height:18px; }
  .tier-option.selected .tile-icon { background:var(--blue); color:#fff; }
  .tier-option .name { font-weight:700; font-size:15px; margin-bottom:6px; margin-right:26px; font-family:"Montserrat",sans-serif; line-height:1.25; }
  .tier-option .meta { color:var(--gray-700); font-size:12.5px; line-height:1.5; }
  .tier-option .meta b { color:var(--navy); font-weight:800; }
  .tier-option .tile-price { margin-top:auto; padding-top:10px; font-size:21px; font-weight:800; color:var(--navy); }
  .tier-option .tile-unit { font-size:12.5px; font-weight:400; color:var(--gray-500); }
  .tier-option .old-price { display:block; text-decoration:line-through; color:var(--gray-500); font-weight:400; font-size:12px; }
  .tier-option .promo-note { font-size:10.5px; color:var(--gray-500); margin-top:1px; }
  .tier-option.tv-tile .tile-icon { background:#e9eafd; color:#6d7bff; }
  .tier-option.tv-tile.selected .tile-icon { background:#6d7bff; color:#fff; }
  .tier-option.mobile-tile .tile-icon { background:#ffe9e1; color:#ff7a59; }
  .tier-option.mobile-tile.selected .tile-icon { background:#ff7a59; color:#fff; }
  .tier-option.sla-tile .tile-icon { background:#eef1f5; color:#334155; }
  .tier-option.sla-tile.selected .tile-icon { background:#334155; color:#fff; }
  .mobile-2col { flex-wrap:wrap; }
  .mobile-2col .tier-option { flex:1 1 calc(50% - 6px); max-width:calc(50% - 6px); }
  @media (max-width: 520px){ .mobile-2col .tier-option{ flex-basis:100%; max-width:none; } }
  .tier-option.recommended { border-color:var(--gold); box-shadow:0 0 0 1px var(--gold); }
  .tier-option.recommended.selected { border-color:var(--gold); background:linear-gradient(180deg,#fdf6e6 0%, #fff 100%); }
  .recommended-badge { position:absolute; top:-10px; left:14px; background:var(--gold); color:var(--navy); font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.03em; padding:3px 9px; border-radius:6px; font-family:"Montserrat",sans-serif; box-shadow:0 2px 6px rgba(0,0,0,.2); }
  .tier-option input { position:absolute; top:14px; right:14px; width:16px; height:16px; accent-color:var(--blue); z-index:2; }
  .tier-option.none-tier { border-style:dashed; background:var(--gray-50); align-items:flex-start; justify-content:center; }
  .tier-option.none-tier .name { color:var(--gray-700); margin-right:26px; }
  .fiber-grid, .mobile-tile-grid { margin-bottom:16px; }
  .fiber-grid .tier-option .activation-note, .mobile-tile-grid .tier-option .activation-note { max-width:none; }
  .service-panel { border:1px solid var(--gray-100); background:var(--gray-50); border-radius:14px; padding:16px 16px 18px; margin-bottom:14px; }
  .service-panel:last-child { margin-bottom:0; }
  .service-panel .internet-subgroup-title, .service-panel .mobile-subgroup-title { margin-top:0; }
  .service-subsection-title { font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--gray-500); font-weight:800; margin:14px 0 8px; font-family:"Montserrat",sans-serif; }
  .service-subsection-title:first-child { margin-top:0; }
  .multiroom-box { display:flex; align-items:center; gap:16px; margin-top:14px; border:2px solid var(--gray-300); border-radius:14px; padding:14px 16px; background:#fff; flex-wrap:wrap; }
  .multiroom-box.disabled { opacity:.55; background:var(--gray-50); }
  .multiroom-box .multiroom-info { flex:1; min-width:220px; }
  .multiroom-box .name { font-weight:700; font-size:14.5px; font-family:"Montserrat",sans-serif; margin-bottom:3px; }
  .multiroom-box .desc { font-size:12.5px; color:var(--gray-700); }
  .multiroom-box .desc b { color:var(--navy); }
  .multiroom-box .stepper { display:flex; align-items:center; gap:10px; }
  .step-btn { width:32px; height:32px; border-radius:8px; border:1px solid var(--gray-300); background:var(--gray-50); font-size:17px; font-weight:700; cursor:pointer; color:var(--navy); display:flex; align-items:center; justify-content:center; transition:all .12s ease; }
  .step-btn:hover:not(:disabled) { border-color:var(--blue); color:var(--blue); }
  .step-btn:disabled { opacity:.4; cursor:not-allowed; }
  .step-value { min-width:20px; text-align:center; font-weight:800; font-size:15px; font-family:"Montserrat",sans-serif; }
  .multiroom-price { min-width:100px; text-align:right; font-weight:800; color:var(--navy); font-family:"Montserrat",sans-serif; font-size:14.5px; }
  .toggle-list-btn { background:none; border:none; color:var(--blue); font-size:12.5px; font-weight:600; cursor:pointer; padding:7px 0 0; }
  .toggle-list-btn:hover { color:var(--navy); }
  .channel-list { display:none; margin-top:4px; max-height:420px; overflow-y:auto; padding-top:2px; position:relative; z-index:3; background:#fff; }
  .channel-list.open { display:block; }
  .channel-list input.filter { display:block; width:85%; max-width:300px; text-align:center; padding:10px 12px; border:1px solid var(--gray-300); border-radius:8px; font-size:16px; margin:0 auto 16px; position:relative; z-index:1; background:var(--gray-50); }
  .channel-list input.filter:focus { outline:2px solid var(--blue-2); outline-offset:0; background:#fff; }
  .channel-grid { display:flex; flex-wrap:wrap; gap:10px; }
  .channel-icon-row { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
  .channel-icon-item { cursor:default; display:inline-flex; }
  .channel-icon-row .chip-icon { width:92px; height:92px; border-radius:14px; border:none; box-shadow:none; background:#fff; }
  .channel-icon-row .chip-icon img { padding:8px; image-rendering:auto; }
  .summary-warn { background:#fff8ec; border:1px solid var(--gold); border-radius:9px; padding:11px 13px;
    margin-bottom:10px; font-size:12.5px; line-height:1.55; color:#5c4408; }
  .copy.pdf:disabled { opacity:.45; cursor:not-allowed; filter:grayscale(.4); }
  .fee-required-note { background:#fff8ec; border:1px solid var(--gold); border-radius:10px; padding:13px 16px;
    margin:10px 0 12px; font-size:13.5px; line-height:1.6; color:#5c4408; }
  .fee-required-note strong { display:block; margin-bottom:3px; font-weight:800; color:#4a3606; }
  .fee-inactive-note { background:var(--gray-50); border:1px dashed var(--gray-300); border-radius:10px;
    padding:12px 16px; margin:10px 0 12px; font-size:13px; line-height:1.6; color:var(--gray-500); }
  .addon.addon-wymagany { border-color:var(--gold); box-shadow:0 0 0 3px rgba(224,167,46,.16); }
  .addons-blocked-note { background:#fff8ec; border:1px solid var(--gold); border-radius:10px; padding:14px 16px; margin-bottom:16px; font-size:13.5px; line-height:1.65; color:#5c4408; }
  .addons-blocked-note strong { display:block; margin-bottom:4px; font-weight:800; color:#4a3606; }
  .addon.addon-blocked { opacity:.5; cursor:not-allowed; background:var(--gray-50); }
  .addon.addon-blocked .addon-head { cursor:not-allowed; }
  .addon.addon-blocked input { cursor:not-allowed; }
  .addon.variant-hbo, .addon.variant-disney, .addon.variant-canal { border-left-width:4px; border-left-style:solid; }
  .addon.variant-hbo { border-left-color:var(--indigo); }
  .addon.variant-disney { border-left-color:var(--blue); }
  .addon.variant-canal { border-left-color:var(--coral); }
  .variant-badge { display:inline-block; font-size:10.5px; font-weight:700; padding:2px 8px; border-radius:20px; margin-left:8px; vertical-align:middle; text-transform:uppercase; letter-spacing:.03em; }
  .variant-badge-hbo { background:rgba(109,123,255,.15); color:var(--indigo); }
  .variant-badge-disney { background:rgba(15,154,163,.15); color:var(--blue); }
  .variant-badge-canal { background:rgba(255,122,89,.15); color:var(--coral); }
  .chip { display:inline-flex; align-items:center; gap:10px; font-size:14.5px; font-weight:600; background:#fff; border:1px solid var(--gray-300); border-radius:12px; padding:6px 16px 6px 6px; white-space:normal; max-width:100%; transition:border-color .12s ease, box-shadow .12s ease; }
  .chip:hover { border-color:var(--blue-2); box-shadow:0 4px 12px -4px rgba(61,107,255,.45); }
  .chip-icon { width:52px; height:52px; border-radius:10px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; overflow:hidden; background:#fff; border:1px solid var(--gray-300); box-shadow:inset 0 0 0 1px #fff; }
  .chip-icon img { width:100%; height:100%; object-fit:contain; display:block; padding:4px; image-rendering:auto; }
  .chip-icon.plain-icon { border:none; box-shadow:none; background:#fff; }
  .chip-icon .mono { display:none; width:100%; height:100%; align-items:center; justify-content:center; font-size:17px; font-weight:800; color:#fff; letter-spacing:.02em; font-family:"Montserrat",sans-serif; }
  .addon-group-title { font-size:12.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--blue); font-weight:800; margin:20px 0 9px; font-family:"Montserrat",sans-serif; }
  .addon-group-title:first-child { margin-top:0; }
  .addon { position:relative; border:1px solid var(--gray-300); border-radius:12px; padding:14px; margin-bottom:10px; transition:border-color .12s ease, box-shadow .12s ease; }
  .addon:hover { border-color:var(--blue-2); }
  .addon.selected { border-color:var(--green); background:#f1fbf4; box-shadow:0 6px 16px -10px rgba(22,163,74,.4); }
  .addon-head { display:flex; align-items:flex-start; gap:10px; cursor:pointer; flex-wrap:wrap; }
  .addon-head input { margin-top:3px; accent-color:var(--green); }
  .addon-head .info { flex:1; }
  .addon-head .name { font-weight:700; font-size:14.5px; font-family:"Montserrat",sans-serif; }
  .addon-head .desc { color:var(--gray-700); font-size:13px; margin-top:2px; }
  .addon-head .price { text-align:right; white-space:nowrap; margin-left:auto; flex-basis:100%; margin-top:6px; font-weight:800; color:var(--navy); font-family:"Montserrat",sans-serif; }
  .addon-head .price .old { text-decoration:line-through; color:var(--gray-500); font-weight:400; font-size:12px; display:block; font-family:"Inter",sans-serif; }
  .addon-head .price .promo-label { font-weight:400; color:var(--gray-500); font-size:11px; max-width:170px; display:block; margin-left:auto; white-space:normal; margin-top:2px; font-family:"Inter",sans-serif; }
  .radio-note { font-size:12px; color:#8a5a06; background:#fdf1de; border:1px solid #f3ddaf; border-radius:8px; padding:7px 11px; margin-bottom:10px; font-weight:600; }
  .none-option { display:block; width:100%; text-align:left; background:var(--gray-50); border:1px dashed var(--gray-300); border-radius:10px; padding:10px 14px; margin-bottom:10px; font-size:13px; color:var(--gray-500); font-weight:600; cursor:pointer; font-family:"Inter",sans-serif; transition:border-color .12s ease, color .12s ease, background .12s ease; }
  .none-option:hover { border-color:var(--gray-500); color:var(--gray-700); }
  .none-option.active { background:#eef2f8; border:1px solid var(--navy); color:var(--navy); }
  .activation-note { display:inline-block; font-weight:700; color:#8a5a06; background:#fdf1de; border:1px solid #f3ddaf; border-radius:6px; padding:2px 7px; font-size:11px; margin-top:6px; font-family:"Inter",sans-serif; white-space:normal; max-width:170px; }
  .included-note { display:block; font-weight:600; color:var(--green); background:#eafbf0; border:1px solid #cdf0da; border-radius:6px; padding:4px 8px; font-size:11px; margin-top:6px; font-family:"Inter",sans-serif; white-space:normal; }
  .activation-total { font-size:13px; color:var(--navy); background:#eef2f8; border:1px solid var(--gray-300); border-radius:8px; padding:9px 12px; margin-top:10px; font-weight:600; }
  .activation-total small { font-weight:400; color:var(--gray-500); }
  .activation-discount { margin-top:6px; padding-top:6px; border-top:1px dashed var(--gray-300); color:var(--green); font-weight:700; font-size:12.5px; }
  .spec-list { display:flex; flex-wrap:wrap; gap:7px 16px; margin-top:9px; padding-top:9px; border-top:1px dashed var(--gray-300); }
  .activation-note-row { text-align:right; margin-top:9px; }
  .spec-list .spec { font-size:12px; color:var(--gray-700); background:var(--gray-50); padding:3px 9px; border-radius:6px; }
  .spec-list .spec b { color:#181d24; }
  .mobile-subgroup-title { font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--blue); font-weight:800; margin:16px 0 9px; font-family:"Montserrat",sans-serif; }
  .mobile-subgroup-title:first-child { margin-top:0; }

  /* Wybór infrastruktury nadajników dla planów mobilnych. Zamiast logotypów
     (znaki towarowe operatorów) używamy nazwy sieci w barwach firmowych —
     kolor jest dodatkiem do tekstu, nigdy jedynym nośnikiem informacji. */
  .siec-wybor { margin-top:14px; padding:14px 15px; border:1px solid var(--gray-300); border-radius:12px; background:var(--gray-50); }
  .siec-tytul { font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--blue); font-weight:800; margin:0 0 4px; font-family:"Montserrat",sans-serif; }
  .siec-opis { font-size:12.5px; color:var(--gray-500); margin:0 0 11px; line-height:1.5; }
  .siec-opcje { display:flex; gap:10px; flex-wrap:wrap; }
  .siec-opcja { flex:1 1 150px; display:flex; align-items:center; gap:10px; border:1.5px solid var(--gray-300);
    border-radius:10px; padding:11px 13px; background:#fff; cursor:pointer; transition:border-color .15s ease, background .15s ease; }
  .siec-opcja:hover { border-color:var(--blue); }
  .siec-opcja.wybrana { border-color:var(--blue); background:var(--blue-light); }
  .siec-opcja input { margin:0; width:17px; height:17px; accent-color:var(--blue); flex:0 0 auto; }
  .siec-nazwa { font-weight:800; font-size:15px; color:var(--gray-700); font-family:"Montserrat",sans-serif; letter-spacing:.01em; }
  /* Barwy firmowe operatorów. Przyciemnione względem oryginałów, żeby tekst
     spełniał kontrast AA na białym tle i na tle zaznaczenia. */
  .siec-opcja.play.wybrana { border-color:#662d91; background:#f1e8f8; }
  .siec-opcja.plus.wybrana { border-color:#00a651; background:#e7f9ef; }
  .siec-opcja.play.wybrana .siec-nazwa { color:#662d91; }
  .siec-opcja.plus.wybrana .siec-nazwa { color:#008240; }
  .siec-opcja.play:hover { border-color:#662d91; }
  .siec-opcja.plus:hover { border-color:#00a651; }
  .siec-opcja.play input { accent-color:#662d91; }
  .siec-opcja.plus input { accent-color:#008240; }
  /* Nazwa operatora w podsumowaniu — ta sama barwa co na kafelku wyboru. */
  .siec-podsum { font-weight:700; }
  .siec-podsum.play { color:#662d91; }
  .siec-podsum.plus { color:#008240; }
  .siec-brak { font-size:12px; color:var(--gray-500); margin:10px 0 0; }
  @media (max-width: 520px){ .siec-opcja { flex:1 1 100%; } }

  .global-pricemode-wrap { background:#fff; border-bottom:1px solid var(--gray-300); }
  .global-pricemode { max-width:1240px; margin:0 auto; padding:11px 20px; display:flex; align-items:center; gap:10px; font-size:13px; color:var(--gray-700); flex-wrap:wrap; }
  .global-pricemode .lbl { font-weight:600; }
  .global-pricemode select { border:1px solid var(--gray-300); border-radius:8px; padding:6px 10px; font-size:13px; background:var(--gray-50); font-weight:500; }
  .brutto-badge { background:#eafbf0; color:var(--green); border:1px solid #cdf0da; border-radius:6px; padding:3px 9px; font-size:12px; font-weight:700; }
  .internet-subgroup-title { font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--blue); font-weight:800; margin:16px 0 9px; font-family:"Montserrat",sans-serif; }
  .internet-subgroup-title:first-child { margin-top:0; }

  .summary { position:sticky; top:20px; background:#fff; border:1px solid var(--gray-300); border-radius:var(--radius); padding:20px; box-shadow:0 1px 2px rgba(20,25,35,.04), 0 12px 28px -18px rgba(20,25,35,.18); border-top:3px solid var(--blue); }
  .summary h2 { margin:0 0 12px; font-size:15.5px; font-weight:700; }
  .summary .row { display:flex; justify-content:space-between; font-size:13.5px; padding:7px 0; border-bottom:1px dashed var(--gray-100); gap:10px; }
  .summary .row .lbl { color:var(--gray-700); }
  .summary .total { display:flex; justify-content:space-between; align-items:baseline; margin-top:14px; padding:14px; border-radius:10px; background:linear-gradient(135deg, var(--navy) 0%, #223056 100%); }
  .summary .total > div:first-child { color:#c7d2e0; font-size:13px; font-weight:600; }
  .summary .total .amount { font-size:24px; font-weight:800; color:#fff; font-family:"Montserrat",sans-serif; }
  .summary .total .amount small { font-size:12px; font-weight:400; color:#a9b6cc; }
  .total-gross { font-size:11.5px; color:var(--gray-500); margin-top:4px; text-align:right; }
  .company-fields { border:1px solid var(--gray-100); background:var(--gray-50); border-radius:10px; padding:12px 14px; margin-bottom:14px; }
  .company-fields-title { font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--gray-500); font-weight:700; margin-bottom:8px; }
  .company-input { width:100%; box-sizing:border-box; border:1px solid var(--gray-300); border-radius:8px; padding:10px 12px; font-size:16px; margin-bottom:8px; font-family:"Inter",sans-serif; background:#fff; }
  .company-input:last-child { margin-bottom:0; }
  .company-input:focus { outline:2px solid var(--blue-2); outline-offset:0; }
  .summary .channels-total { font-size:12.5px; color:var(--gray-500); margin-top:8px; }
  .summary textarea { width:100%; height:170px; margin-top:14px; font-family:"Inter",monospace; font-size:14px; border:1px solid var(--gray-300); border-radius:8px; padding:10px; resize:vertical; background:var(--gray-50); }
  .summary button.copy { width:100%; margin-top:8px; background:linear-gradient(135deg, var(--blue) 0%, var(--blue-2) 100%); color:#fff; border:none; border-radius:8px; padding:11px; font-size:13.5px; cursor:pointer; font-weight:700; box-shadow:0 6px 16px -8px rgba(61,107,255,.55); }
  .summary button.copy:hover { opacity:.92; }
  .summary button.copy.download { background:#fff; color:var(--navy); border:2px solid var(--gray-300); box-shadow:none; }
  .summary button.copy.download:hover { border-color:var(--blue); color:var(--blue); opacity:1; }
  .summary button.copy.pdf { background:linear-gradient(135deg, #e0473a 0%, #ff7a59 100%); box-shadow:0 6px 16px -8px rgba(224,71,58,.5); }
  .summary button.copy.pdf:disabled { opacity:.6; cursor:wait; }

  /* ---- PDF export template (offscreen) ---- */
  #pdfExportRoot { display:none; position:fixed; left:-9999px; top:0; width:780px; background:#fff; pointer-events:none; }
  .pdf-page { width:780px; background:#fff; padding:36px 40px 40px; font-family:"Inter",sans-serif; color:#181d24; box-sizing:border-box; }
  .pdf-header { display:flex; align-items:center; gap:18px; border-bottom:3px solid var(--navy); padding-bottom:18px; margin-bottom:22px; }
  .pdf-header .logo-mark { flex:0 0 auto; }
  .pdf-header .logo-img { height:52px; width:auto; }
  .pdf-header-text { flex:1; }
  .pdf-title { font-family:"Montserrat",sans-serif; font-weight:800; font-size:19px; color:var(--navy); }
  .pdf-date { font-size:12px; color:var(--gray-500); margin-top:3px; }
  .pdf-section { border-radius:12px; border:1px solid var(--gray-100); background:var(--gray-50); padding:14px 18px; margin-bottom:14px; border-left:5px solid var(--gray-300); }
  .pdf-section-internet { border-left-color:#5fd0c6; }
  .pdf-section-tv { border-left-color:#8b98ff; }
  .pdf-section-addons { border-left-color:#f0b429; }
  .pdf-section-mobile { border-left-color:#ff8a65; }
  .pdf-section-business { border-left-color:#64748b; }
  .pdf-section-title { font-family:"Montserrat",sans-serif; font-weight:800; font-size:13.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--navy); margin-bottom:8px; }
  .pdf-row { display:flex; justify-content:space-between; align-items:baseline; font-size:13.5px; padding:5px 0; border-bottom:1px dashed var(--gray-100); gap:14px; }
  .pdf-row:last-child { border-bottom:none; }
  .pdf-row .pdf-row-label { color:#181d24; font-weight:600; }
  .pdf-row .pdf-row-price { font-weight:800; color:var(--navy); white-space:nowrap; font-family:"Montserrat",sans-serif; }
  .pdf-empty-row { font-size:12.5px; color:var(--gray-500); font-style:italic; padding:4px 0; }
  .pdf-total-box { display:flex; justify-content:space-between; align-items:center; background:linear-gradient(135deg, var(--navy) 0%, #223056 100%); border-radius:12px; padding:16px 20px; margin:18px 0 10px; }
  .pdf-total-label { color:#c7d2e0; font-size:13.5px; font-weight:700; }
  .pdf-total-value { color:#fff; font-size:26px; font-weight:800; font-family:"Montserrat",sans-serif; }
  .pdf-total-gross-note { text-align:right; font-size:11.5px; color:var(--gray-500); margin:2px 0 10px; }
  .pdf-activation-box { background:#fdf1de; border:1px solid #f3ddaf; color:#8a5a06; font-size:13px; font-weight:700; border-radius:10px; padding:10px 16px; margin-bottom:18px; }
  .pdf-activation-discount { color:#16a34a; font-size:12px; margin-top:4px; }
  .pdf-footer-contact { border-top:2px solid var(--gray-100); margin-top:14px; padding-top:16px; font-size:12.5px; color:#181d24; }
  .pdf-footer-title { font-family:"Montserrat",sans-serif; font-weight:800; font-size:14px; color:var(--navy); margin-bottom:4px; }
  .pdf-footer-contact div { margin-bottom:2px; }
  .pdf-footer-contact-big { font-family:"Montserrat",sans-serif; font-weight:800; font-size:16px; color:var(--blue); margin-top:4px; }
  .pdf-footer-note { margin-top:12px; font-size:10.5px; color:var(--gray-500); }
  .empty-note { color:var(--gray-500); font-size:13px; font-style:italic; }
  footer.note { max-width:1240px; margin:8px auto 40px; padding:16px 20px 0; color:var(--gray-500); font-size:12px; line-height:1.6; border-top:1px solid var(--gray-300); }
  .company-info { margin-bottom:12px; padding-bottom:12px; border-bottom:1px dashed var(--gray-300); }
  .company-name { font-family:"Montserrat",sans-serif; font-weight:800; font-size:14px; color:var(--navy); }
  .company-address { font-size:12.5px; color:var(--gray-700); margin-top:2px; }
  .company-contact { margin-top:6px; }
  .company-contact .contact-item { font-family:"Montserrat",sans-serif; font-weight:800; font-size:17px; color:var(--blue); }
  .company-contact .contact-sep { color:var(--gray-300); font-weight:400; }

  /* ===== Pasek szybkich skrótów do kroków konfiguratora ===== */
  .quick-dock { position:fixed; right:20px; bottom:24px; z-index:150; display:flex; flex-direction:column;
    align-items:center; gap:9px; opacity:0; visibility:hidden; transform:translateY(10px);
    transition:opacity .2s ease, transform .2s ease; }
  .quick-dock.visible { opacity:1; visibility:visible; transform:translateY(0); }
  .quick-rail { position:relative; }
  .quick-items { display:flex; flex-direction:column; gap:9px; }

  /* tło każdej ikony w kolorze swojego kroku */
  .quick-btn { position:relative; width:44px; height:44px; border-radius:50%;
    border:1px solid rgba(255,255,255,.55); color:#fff;
    display:flex; align-items:center; justify-content:center; cursor:pointer;
    opacity:.45; box-shadow:0 2px 8px rgba(15,37,40,.12);
    transition:opacity .2s ease, transform .12s ease, box-shadow .2s ease,
               margin-bottom .35s cubic-bezier(.34,.01,.2,1); }
  .quick-btn svg { width:21px; height:21px; }
  .quick-btn:hover { opacity:1; transform:translateY(-2px); box-shadow:0 5px 16px rgba(15,37,40,.3); }
  .quick-btn.aktywna { opacity:1; margin-bottom:47px; box-shadow:0 5px 18px rgba(15,37,40,.34); }

  .quick-btn.krok-1 { background:linear-gradient(135deg, #0f9aa3 0%, #5fd0c6 100%); }
  .quick-btn.krok-2 { background:linear-gradient(135deg, #5a67d8 0%, #8b98ff 100%); }
  .quick-btn.krok-3 { background:linear-gradient(135deg, #d69511 0%, #f0b429 100%); }
  .quick-btn.krok-4 { background:linear-gradient(135deg, #e8632f 0%, #ff8a65 100%); }
  .quick-btn.krok-5 { background:linear-gradient(135deg, #334155 0%, #64748b 100%); }
  .quick-btn.krok-6 { background:linear-gradient(135deg, #0f2528 0%, #173a3e 100%); }

  .quick-btn::after { content:attr(data-podpis); position:absolute; right:54px; top:50%;
    transform:translateY(-50%) translateX(6px); background:var(--navy); color:#fff;
    font-family:"Inter",sans-serif; font-size:12.5px; font-weight:600;
    padding:7px 12px; border-radius:8px; white-space:nowrap; pointer-events:none;
    opacity:0; transition:opacity .15s ease, transform .15s ease;
    box-shadow:0 4px 14px rgba(15,37,40,.22); }
  .quick-btn:hover::after { opacity:1; transform:translateY(-50%) translateX(0); }

  /* strzałka powrotu wsuwa się w przerwę pod aktywnym krokiem */
  .quick-up { position:absolute; right:3px; top:0; width:38px; height:38px;
    border-radius:50%; background:var(--gold); color:var(--navy); border:2px solid #fff;
    display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0;
    box-shadow:0 4px 14px rgba(224,167,46,.5);
    transition:top .4s cubic-bezier(.34,.01,.2,1), background .15s ease, transform .12s ease; }
  .quick-up svg { width:17px; height:17px; }
  .quick-up:hover { background:#eab84a; transform:scale(1.1); }

  .quick-toggle { display:none; width:44px; height:44px; border-radius:50%; background:var(--navy);
    color:#fff; border:2px solid #fff; align-items:center; justify-content:center; cursor:pointer;
    box-shadow:0 4px 14px rgba(15,37,40,.28); order:2; }
  .quick-toggle svg { width:20px; height:20px; }

  @media (max-width: 720px){
    .quick-dock { right:16px; bottom:20px; gap:8px; }
    .quick-toggle { display:flex; }
    .quick-items { display:none; gap:8px; }
    .quick-dock.rozwinieta .quick-items { display:flex; }
    .quick-btn { width:40px; height:40px; opacity:.85; }
    .quick-btn svg { width:19px; height:19px; }
    .quick-btn::after { display:none; }
    .quick-btn.aktywna { margin-bottom:0; }
    .quick-up { position:static; margin:0 0 8px; width:40px; height:40px; }
  }

/* Dawne atrybuty style= (CSP bez unsafe-inline). !important zachowuje pierwszeństwo,
   jakie miał styl w atrybucie. */
/* Dawniej style="display:none" - JS pokazuje element przez element.style.display. */
#activationTotal { display:none; }

/* Kolory kategorii kanałów (dawne style= w HTML budowanym przez JS; kolejność jak CAT_COLORS
   w js/konfigurator.js, kat-inne = kolor domyślny). */
.kat-0-jasne { background:#1f6feb22 !important; border-color:#1f6feb55 !important; }
.kat-0-pelne { background:#1f6feb !important; border-color:#1f6feb !important; }
.kat-0-tlo { background:#1f6feb !important; }
.kat-1-jasne { background:#e0472e22 !important; border-color:#e0472e55 !important; }
.kat-1-pelne { background:#e0472e !important; border-color:#e0472e !important; }
.kat-1-tlo { background:#e0472e !important; }
.kat-2-jasne { background:#1f9d5522 !important; border-color:#1f9d5555 !important; }
.kat-2-pelne { background:#1f9d55 !important; border-color:#1f9d55 !important; }
.kat-2-tlo { background:#1f9d55 !important; }
.kat-3-jasne { background:#8e44ad22 !important; border-color:#8e44ad55 !important; }
.kat-3-pelne { background:#8e44ad !important; border-color:#8e44ad !important; }
.kat-3-tlo { background:#8e44ad !important; }
.kat-4-jasne { background:#d6338422 !important; border-color:#d6338455 !important; }
.kat-4-pelne { background:#d63384 !important; border-color:#d63384 !important; }
.kat-4-tlo { background:#d63384 !important; }
.kat-5-jasne { background:#e0a72e22 !important; border-color:#e0a72e55 !important; }
.kat-5-pelne { background:#e0a72e !important; border-color:#e0a72e !important; }
.kat-5-tlo { background:#e0a72e !important; }
.kat-6-jasne { background:#17a2b822 !important; border-color:#17a2b855 !important; }
.kat-6-pelne { background:#17a2b8 !important; border-color:#17a2b8 !important; }
.kat-6-tlo { background:#17a2b8 !important; }
.kat-7-jasne { background:#fd7e1422 !important; border-color:#fd7e1455 !important; }
.kat-7-pelne { background:#fd7e14 !important; border-color:#fd7e14 !important; }
.kat-7-tlo { background:#fd7e14 !important; }
.kat-8-jasne { background:#20c99722 !important; border-color:#20c99755 !important; }
.kat-8-pelne { background:#20c997 !important; border-color:#20c997 !important; }
.kat-8-tlo { background:#20c997 !important; }
.kat-9-jasne { background:#6f42c122 !important; border-color:#6f42c155 !important; }
.kat-9-pelne { background:#6f42c1 !important; border-color:#6f42c1 !important; }
.kat-9-tlo { background:#6f42c1 !important; }
.kat-10-jasne { background:#6c757d22 !important; border-color:#6c757d55 !important; }
.kat-10-pelne { background:#6c757d !important; border-color:#6c757d !important; }
.kat-10-tlo { background:#6c757d !important; }
.kat-11-jasne { background:#0d948822 !important; border-color:#0d948855 !important; }
.kat-11-pelne { background:#0d9488 !important; border-color:#0d9488 !important; }
.kat-11-tlo { background:#0d9488 !important; }
.kat-12-jasne { background:#343a4022 !important; border-color:#343a4055 !important; }
.kat-12-pelne { background:#343a40 !important; border-color:#343a40 !important; }
.kat-12-tlo { background:#343a40 !important; }
.kat-13-jasne { background:#c2185b22 !important; border-color:#c2185b55 !important; }
.kat-13-pelne { background:#c2185b !important; border-color:#c2185b !important; }
.kat-13-tlo { background:#c2185b !important; }
.kat-14-jasne { background:#b71c1c22 !important; border-color:#b71c1c55 !important; }
.kat-14-pelne { background:#b71c1c !important; border-color:#b71c1c !important; }
.kat-14-tlo { background:#b71c1c !important; }
.kat-15-jasne { background:#ad145722 !important; border-color:#ad145755 !important; }
.kat-15-pelne { background:#ad1457 !important; border-color:#ad1457 !important; }
.kat-15-tlo { background:#ad1457 !important; }
.kat-16-jasne { background:#0288d122 !important; border-color:#0288d155 !important; }
.kat-16-pelne { background:#0288d1 !important; border-color:#0288d1 !important; }
.kat-16-tlo { background:#0288d1 !important; }
.kat-inne-jasne { background:#8b95a122 !important; border-color:#8b95a155 !important; }
.kat-inne-pelne { background:#8b95a1 !important; border-color:#8b95a1 !important; }
.kat-inne-tlo { background:#8b95a1 !important; }
.mono-widoczny { display:flex !important; }
.cena-mocna { font-weight:700 !important; color:var(--navy) !important; }
.cena-jednostka { font-weight:400 !important; }
.wybor-wezla { margin-top:6px !important; max-width:280px !important; }

/* Brak albo złe dane taryf: komunikat zamiast kreatora (js/konfigurator.js, pokazBrakCennika). */
.konf-ukryty { display:none !important; }
.konf-niedostepny { max-width:760px; margin:32px auto; padding:22px 24px; background:#fff;
  border:2px solid var(--gray-300); border-radius:14px; }
.konf-niedostepny[hidden] { display:none; }
.konf-niedostepny h2 { font-family:"Montserrat",sans-serif; color:var(--navy); margin:0 0 8px; font-size:20px; }
.konf-niedostepny p { margin:0; color:var(--gray-700); line-height:1.6; }
.konf-niedostepny a { color:var(--blue); font-weight:700; }