/* Mobile 1:1 based on screenshots */
:root{
  --ink:#0e0e0e;
  --muted:#5a5a5a;
  --bg-hero:#0f1f2c;
  --blue:#0079c2;
  --blue-d:#0079c2;
  --teal:#00b7c7;
  --green:#a6ce39;
  --green-d:#a6ce39;
  --purple:#6a40bf;
  --magenta:#ff2f86;
  --white:#fff;
  --panel:#f1f2f4;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;background:var(--panel);color:var(--ink);font-family:'Source Sans Pro',system-ui,Arial}
.wrap{max-width:420px;margin:0 auto;padding-bottom:36px}

/* HERO */
.hero{background:var(--bg-hero) url('grfk.jpg') center/cover no-repeat;color:#fff;padding:24px 16px 28px}
.hero h1{margin:0;font-weight:900;line-height:1.15;font-size:32px;letter-spacing:.2px}
.hero p{margin:16px 0 0;font-size:18px;opacity:.95}

/* Headings */
.section-title{font-size:32px;line-height:1.1;margin:24px 16px 10px;font-weight:900}

/* OFFER CARD BASE */
.offers{padding:12px 16px}
.offer-card{border-radius:28px;border-width:8px;border-style:solid;background:#fff;overflow:hidden;margin:18px 0;box-shadow:0 2px 0 rgba(0,0,0,.02)}
.offer-card header{padding:14px 16px 10px;font-size:30px;font-weight:900;text-align:center;border-bottom:12px solid transparent}
.offer-card ul{list-style:none;margin:0;padding:16px 24px 12px;font-size:18px;line-height:1.55}
.offer-card ul li{padding:5px 0;position:relative}
.offer-card ul li:before{content:'@';font-weight:900;margin-right:8px}

/* pill inside cards */
.pill{margin:6px auto 14px;border-radius:10px;border:3px solid #fff;padding:10px 12px;text-align:center;font-size:18px;width:86%;}
.pill.light{border-color:#fff}

/* price line */
.offer-card footer{display:flex;justify-content:center;align-items:baseline;gap:6px;background:#fff;padding:14px 16px 18px}
.offer-card .price{font-size:36px;font-weight:900}
.offer-card .unit{font-size:26px}

/* BLUE VARIANT */
.offer-card.blue{border-color:var(--blue); background:var(--blue-d)}
.offer-card.blue header{background:#fff;color:var(--blue);border-color:var(--blue-d)}
.offer-card.blue ul, .offer-card.blue .pill, .offer-card.blue footer{color:#fff}
.offer-card.blue footer{background:#fff0;}

/* GREEN VARIANT */
.offer-card.green{border-color:var(--green); background:var(--green-d)}
.offer-card.green header{background:#fff;color:var(--green-d);border-color:var(--green-d)}
.offer-card.green ul, .offer-card.green .pill, .offer-card.green footer{color:#fff}


/* TEAL VARIANT */
.offer-card.teal{border-color:var(--teal); background:var(--teal)}
.offer-card.teal header{background:#fff;color:var(--teal);border-color:var(--teal)}
.offer-card.teal ul, .offer-card.teal .pill, .offer-card.teal footer{color:#fff}
.offer-card.teal footer{background:#fff0;}
.offer-card.green footer{background:#fff0;}

/* UPSELL CARDS */
.upsell{border:6px solid var(--teal); border-radius:28px; padding:18px 16px;margin:16px 0;background:#fff}
.upsell .content{border:3px solid var(--teal); border-radius:14px; padding:12px 14px;text-align:center}
.upsell p{margin:0 0 10px;font-size:20px;color:#0a7f8a}
.delta{font-size:36px;font-weight:900;color:var(--teal);}


/* UPSELL BLUE OVERRIDES */
.upsell.blue{border-color:var(--blue);}
.upsell.blue .content{border-color:var(--blue);}
.upsell.blue p{color:var(--blue);}
.upsell.blue .delta{color:var(--blue);}
/* fineprint */
.fineprint{font-size:12px;line-height:1.45;color:#666;margin:14px 0}

/* CONTACT CARDS */
.contacts{padding:6px 16px}
.contact-card{display:grid;grid-template-columns:88px 1fr;gap:12px;align-items:center;background:#fff;border-radius:24px;padding:14px;margin:16px 0;border:6px solid transparent}
.contact-card img{width:88px;height:88px;object-fit:cover;border-radius:14px}
.contact-card h3{margin:0 0 4px;font-weight:900;font-size:22px}
.contact-card p{margin:0 0 8px;color:#555;font-size:16px;line-height:1.35}
.contact-card .phone{font-size:28px;font-weight:900;margin-bottom:2px}
.contact-card .hours{font-size:14px;color:#666}
.contact-card.purple{border-image:linear-gradient(45deg,var(--purple),#b064ff) 1}
.contact-card.magenta{border-image:linear-gradient(45deg,#ff579a,var(--magenta)) 1}

/* === PATCH 2025-09-04 === */
/* 1) HERO full-bleed bez lewego marginesu */
.hero{
  width:100vw !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
}

/* 2) Ceny w kolorze kafelka */
.offer-card footer .price,
.offer-card footer .unit{ color: inherit; }
.offer-card.blue{ color:#0079c2; }
.offer-card.green{ color:#a6ce39; }

/* 3) Unifikacja kolorów podstawowych */
:root{
  --blue:#0079c2;
  --green:#a6ce39;
  --teal:#00b7c7;
  --purple:#75499d;
  --magenta:#ec1163;
}

/* 4) Kafelki „Powiększenie pakietu” – styl wg zrzutu */
.upsell{ border:3px solid var(--teal); border-radius:26px; padding:16px; background:#fff; }
.upsell .content{ border:3px solid var(--teal); border-radius:18px; padding:14px; text-align:center; }
.upsell p{ margin:0 0 12px; font-size:22px; color:var(--teal); }
.upsell p b{ display:inline-block; margin-top:6px; padding:6px 12px; border:3px solid var(--teal); border-radius:12px; font-size:20px; color:var(--teal); background:#fff; }
.delta{ font-size:36px; font-weight:900; color:var(--teal); }
.delta .suffix{ font-weight:400; opacity:.95; }

/* 6) Wizytówki kontaktowe – takie samo zaokrąglenie jak ofertowe */
.contact-card{ border-radius:28px !important; }
.contact-card img{ border-radius:16px !important; }


/* Price color only in card footer (theme-colored) */
.offer-card.blue footer{ color:#0079c2 !important; }
.offer-card.green footer{ color:#a6ce39 !important; }

.wrap{overflow:visible}

.hero{border-radius:0 !important}

/* === PATCH 2025-09-04-b === */
/* 1) Biały dół w KAŻDEJ karcie ofertowej + wyśrodkowanie tekstu ceny */
.offer-card footer{ background:#fff !important; text-align:center; }
.offer-card.blue > footer{ color:#0079c2 !important; }
.offer-card.green > footer{ color:#a6ce39 !important; }

/* 2) Upsell – usuń podwójną ramkę (zostaje tylko zewnętrzna) */
.upsell .content{ border:none !important; padding:8px 0 0 !important; }

/* 3) Wyśrodkowane h2 „Zadzwoń i zamów:” */
.section-title{ text-align:center; }

/* 4) Zaokrąglone ramki w sekcji kontaktowej */
.contacts{ border-radius:28px; }
.contact-card{ border-radius:28px !important; overflow:hidden; }

/* === CONTACT SECTION REWORK === */
.contact-card{
  text-decoration:none;
  color:inherit;
  display:grid;
  grid-template-columns:96px 1fr;
  gap:16px;
  align-items:center;
  background:#fff;
  border-radius:32px !important;
  padding:18px 20px;
  border-width:8px !important;
  border-style:solid !important;
  border-image:none !important;
  cursor:pointer;
  box-shadow:0 2px 0 rgba(0,0,0,.02);
}
.contact-card img{
  width:96px;
  height:96px;
  object-fit:cover;
  border-radius:16px !important;
}
.contact-card.purple{ border-color: var(--purple) !important; }
.contact-card.magenta{ border-color: var(--magenta) !important; }
.contact-card:hover{ transform:translateY(-1px); box-shadow:0 6px 18px rgba(0,0,0,.06); }


/* === PATCH 2025-09-04-c (upsell weights) === */
.upsell p{ font-weight:400; }
.upsell p b{ font-weight:900; }           /* tylko część w nawiasie */
.delta{ font-size:36px; font-weight:400; } /* baza bez pogrubienia */
.delta .amount{ font-weight:900; }         /* +10zł / +40zł pogrubione */
.delta .suffix{ font-weight:400; }         /* '/mies.' odchudzone + kropka w HTML */


/* === PATCH 2025-09-04-e (upsell pill full phrase) === */
.upsell p{ margin:0 0 12px; font-size:20px; color: var(--teal); font-weight:400; text-align:center; }
.upsell .addon-pill{
  display:inline-block;
  padding:6px 12px;
  border:3px solid var(--teal);
  border-radius:12px;
  background:#fff;
  color:var(--teal);
}
.upsell .addon-pill b{ font-weight:900; } /* tylko część w nawiasie */


/* === PATCH 2025-09-04-e (upsell pill entire phrase) === */
.upsell p{ color: var(--teal); }
.upsell p b{ font-weight:900; border:none !important; padding:0 !important; background:none !important; }
.upsell .addon-pill{
  display:inline-block;
  margin-top:8px;
  padding:6px 12px;
  border:3px solid var(--teal);
  border-radius:12px;
  color:var(--teal);
  background:#fff;
}


/* === PATCH 2025-09-04-f (upsell pill width match) === */
/* Dopasowanie kapsuły w upsell do wymiarów .pill z ofert */
.upsell .addon-pill{
  display:block !important;
  width:86% !important;
  margin:6px auto 14px !important;
  padding:10px 12px !important;
  border:3px solid var(--teal) !important;
  border-radius:10px !important;   /* jak .pill */
  text-align:center !important;
  font-size:18px !important;       /* jak .pill */
}


/* === PATCH 2025-09-04-g (addon-pill reuse .pill) === */
.upsell .addon-pill{ 
  display:block;                 /* span -> block, aby zadziałała szerokość z .pill */
  border-color: var(--teal) !important;
  color: var(--teal) !important;
  background:#fff !important;
}
.upsell .addon-pill b{ font-weight:900; }


/* === PATCH 2025-09-04-h (exact pill sizing) === */
.upsell .addon-pill.pill{
  display:block !important;
  width:86% !important;
  margin:6px auto 14px !important;
  padding:10px 12px !important;
  border-radius:10px !important;
  font-size:18px !important;
  line-height:1.2 !important;
  border:3px solid var(--teal) !important; /* w upsell morski obrys */
  color:var(--teal) !important;
  background:#fff !important;
}
/* Parent paragraph can stay 20px; span ustawia własny rozmiar */


/* === PATCH 2025-09-04-i (upsell pill fine-tune) === */
.upsell .addon-pill.pill{
  width: calc(86% + 8px) !important;   /* odrobina szersza, by zrównać się z ofertową kapsułą */
  padding: 8px 12px !important;        /* mniejsza wysokość (jak w ofercie wizualnie) */
}


/* === PATCH 2025-09-04-j (fineprint disclosure) === */
.fineprint{ margin:14px 0; }
.fineprint summary{
  list-style:none;
  cursor:pointer;
  font-size:14px;
  font-weight:700;
  color: var(--blue);
  text-decoration: underline;
  outline:none;
}
.fineprint summary::-webkit-details-marker{ display:none; }
.fineprint[open] summary{ margin-bottom:8px; }
.fineprint__content{
  font-size:12px;
  line-height:1.45;
  color:#666;
  background:#fff0;
  margin:0;
}


/* === PATCH 2025-09-04-k (fineprint summary grey) === */
.fineprint summary{ color:#666 !important; }
.fineprint summary:hover{ color:#666 !important; text-decoration: underline; }


/* === PATCH 2025-09-04-l (collapsible TV S channel list) === */
.pill[data-pack]{ cursor:pointer; }
.channel-list{ display:block; padding:0 16px 14px; border-top:1px solid rgba(0,0,0,.08); }
.channel-list[hidden]{ display:none; }
.channel-list .channels{ columns:1; column-gap:16px; padding:10px 0 0; margin:0; list-style:none; font-size:16px; line-height:1.45; }
.channel-list .channels li{ break-inside:avoid; padding:2px 0; }
@media (min-width: 420px){
  .channel-list .channels{ columns:2; }
}


/* === PATCH 2025-09-04-m2 (toggle arrows inside pills) === */
.pill[data-pack]{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
}
.upsell .addon-pill.pill[data-pack]{ display:flex !important; } /* nadpisuje wcześniejsze display:block !important */
.pill[data-pack]::after{
  content:"▼";
  font-weight:900;
  font-size:0.9em;
  line-height:1;
  margin-left:2px;
  transition:transform .2s ease;
}
.pill[data-pack][aria-expanded="true"]::after{
  content:"▲";
  transform:translateY(-1px);
}


/* === PATCH 2025-09-04-p (upsell channel lists: left align + teal + '@') === */
.upsell .channel-list{ text-align:left !important; }
.upsell .channel-list .channels{
  text-align:left !important;
  color: var(--teal) !important;
  padding:16px 24px 12px;      /* spójnie z listami w kartach ofertowych */
  font-size:18px; line-height:1.55;
}
.upsell .channel-list .channels li{ padding:5px 0; }
.upsell .channel-list .channels li::before{
  content:'@';
  font-weight:900;
  margin-right:8px;
}
@media (min-width: 420px){
  .upsell .channel-list .channels{ columns:2; }
}


/* === PATCH 2025-09-04-r (final unify upsell lists to 'Internet' style) === */
/* Kontener listy w upsell bez własnych odstępów/obramowania */
.upsell .channel-list{
  padding: 0 !important;
  border-top: none !important;
  text-align: left !important;
}
/* <ul> w upsell: identycznie jak .offer-card ul */
.upsell .channel-list .channels{
  padding: 16px 24px 12px !important;
  margin: 0 !important;
  list-style: none !important;
  font-size: 18px !important;
  line-height: 1.55 !important;
  color: inherit !important;     /* bez wymuszania morskiego */
  text-align: left !important;
  column-count: 1 !important;
  columns: auto !important;
}
.upsell .channel-list .channels li{
  padding: 5px 0 !important;
}
.upsell .channel-list .channels li::before{
  content: '@' !important;
  font-weight: 900 !important;
  margin-right: 8px !important;
}


/* === PATCH 2025-09-04-s (upsell lists: force 2 columns) === */
.upsell .channel-list .channels{
  column-count: 2 !important;
  columns: 2 !important;
  column-gap: 16px !important;
}


/* === PATCH 2025-09-04-t (smaller font for upsell channel lists) === */
.upsell .channel-list .channels{
  font-size: 16px !important;
  line-height: 1.45 !important;
}


/* === PATCH 2025-09-04-u (upsell: tighter inner padding for channel lists) === */
/* Zmniejszamy odstęp od krawędzi kafelka – wyrównanie do stylu kart "Internet" */
.upsell{
  padding: 8px 0 12px !important;    /* brak bocznych paddingów; pion minimalny */
}
/* UL już ma padding: 16px 24px 12px – zostaje, aby dać 24px od krawędzi jak w ofertach */


/* === PATCH 2025-09-04-v (upsell channel list color to #00B7C7) === */
.upsell .channel-list .channels{ color:#00B7C7 !important; }


/* === PATCH 2025-09-04-w (upsell price sizes to match Internet) === */
.upsell .delta{
  display:flex;
  justify-content:center;
  align-items:baseline;
  gap:6px;
  font-size:36px !important;   /* jak .offer-card .price */
  font-weight:400 !important;
  color: var(--teal);
}
.upsell .delta .amount{ font-weight:900 !important; }   /* +10zł / +40zł */
.upsell .delta .suffix{
  font-size:26px !important;   /* jak .offer-card .unit */
  font-weight:400 !important;
  opacity:.95;
}


/* === STICKY CTA BAR === */
html { scroll-behavior: smooth; }
.sticky-cta{
  position: fixed;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: min(100vw, 420px);
  background: #fff;
  color: var(--ink);
  border: 2px solid #e6e6e6;
  border-radius: 999px;
  box-shadow: 0 10px 28px rgba(0,0,0,.12);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-decoration: none;
  z-index: 1000;
}
.sticky-cta img{ height: 28px; width: auto; display:block; }
.sticky-cta .sticky-text{ font-weight: 900; font-size: 16px; }
.wrap{ padding-bottom: 96px !important; } /* place for sticky bar */


/* === PATCH 2025-09-04-sticky-mojanetia (full-width sticky bar) === */
.sticky-cta{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  width: 100%;
  background:#fff;
  border-top:1px solid #e6e6e6;
  box-shadow: 0 -4px 18px rgba(0,0,0,.08);
  padding: 10px 12px;
  display:block;
  text-decoration:none;
  z-index: 1000;
  color: inherit;
  border: 0;
  border-radius: 0;
}
.sticky-cta .sticky-inner{
  max-width: 420px;
  margin: 0 auto;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
}
.sticky-cta img{ height: 24px; width:auto; display:block; }
.sticky-cta .sticky-text{ font-weight:900; font-size:16px; }
.wrap{ padding-bottom: 64px !important; } /* space so content doesn't hide */


/* === STICKY TOP BAR === */
.sticky-top{
  position: fixed;
  top: 0; left: 0; right: 0;
  width: 100%;
  background:#fff;
  border-bottom:1px solid #e6e6e6;
  box-shadow: 0 4px 18px rgba(0,0,0,.06);
  z-index: 1001;
}
.sticky-inner-top{
  max-width: 420px;
  margin: 0 auto;
  padding: 8px 12px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
}
.sticky-top img{ height: 44px; width:auto; display:block; }
.sticky-link{
  font-weight:900;
  font-size:16px;
  text-decoration:none;
  color: var(--blue);
}
.sticky-link:active, .sticky-link:hover{ text-decoration:underline; }
.wrap{ padding-top: 56px; } /* room for sticky top */


/* === SITE FOOTER WITH POLICY === */
.site-footer{
  background:#fff;
  border-top:1px solid #e6e6e6;
  padding:16px;
  margin-top:24px;
}
.site-footer .fineprint summary{ color:#666; text-decoration: underline; font-weight:700; cursor:pointer; }
.site-footer .fineprint[open] summary{ margin-bottom:8px; }
.site-footer .fineprint__content{ font-size:12px; line-height:1.45; color:#666; }


/* === ADDONS (Wybrane pakiety dodatkowe) === */
.addons{ padding: 8px 16px 0; }
.addon-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px;
}
.addon-card{
  position:relative;
  display:block;
  aspect-ratio:1/1;
  border-radius:24px;
  overflow:hidden;
  background:#000;
  box-shadow:0 4px 18px rgba(0,0,0,.12);
  text-decoration:none;
}
.addon-card .bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.addon-price{
  position:absolute;
  left:16px;
  bottom:12px;
  color:#fff;
  font-weight:900;
  font-size:22px;
  text-shadow:0 2px 10px rgba(0,0,0,.5);
}

/* === CONTACTS SPACING FIX (jak w addons) === */
.contacts{ padding-top: 0 !important; }                     /* było 6px */
.contacts > .contact-card:first-child{ margin-top: 0 !important; } /* było 16px */

/* Większy odstęp między dodatkami a sekcją kontaktową */
.addons + .section-title{ margin-top: 50px !important; } /* było 24px */

/* ADDONS: wyśrodkuj ceny na kafelkach */
.addon-card .addon-price{
  left: 50% !important;
  transform: translateX(-50%);
  right: auto !important;
  text-align: center;
  white-space: nowrap; /* żeby nie zawijało "zł/mies." */
}



/* === FINAL OVERRIDES (force intended colors) === */

/* 1) Upsell “Powiększenie pakietu” should be BLUE like 1Gb/2Gb */
.upsell.blue{ border-color: var(--blue) !important; }
.upsell.blue .content{ border-color: var(--blue) !important; }
.upsell.blue p{ color: var(--blue) !important; }
.upsell.blue .delta{ color: var(--blue) !important; }
.upsell.blue .addon-pill{ border-color: var(--blue) !important; color: var(--blue) !important; }

/* 2) Internet 300/600 should be TEAL (morski) */
.offer-card.teal,
.offer-card.green{ color: var(--teal) !important; } /* cover both class names */
.offer-card.teal header,
.offer-card.green header{ color: var(--teal) !important; border-color: var(--teal) !important; }
.offer-card.teal{ border-color: var(--teal) !important; }
.offer-card.green{ border-color: var(--teal) !important; }

/* keep white backgrounds for cards – do not tint backgrounds here */


/* === PRICE VISIBILITY FIX for 300/600 === */
.offer-card.teal > footer,
.offer-card.green > footer{
  color: var(--teal) !important;   /* prices text */
  background: #fff !important;     /* keep white bar */
}

/* === PATCH 2025-09-09-a (upsell program lists in blue) ===
   Zmiana koloru list kanałów w "Powiększenie pakietu" na niebieski,
   spójnie z kafelkiem upsell.blue. Nadpisuje wcześniejsze reguły. */
.upsell.blue .channel-list .channels{ color: var(--blue) !important; }
.upsell.blue .channel-list .channels li::before{ color: var(--blue) !important; }