/* Page-specific styles for cennik.html */
/* Variables moved to common.css */

/* Apply green background to the whole page while content (.container) stays centered */
body.cennik-page, .cennik-page { background: var(--kc-green); }

/* Page-specific hero height: shorter on cennik page */
/* Override shared hero sizing for pricing page (shorter hero) */
body.cennik-page .hero { min-height:550px; }
body.cennik-page .hero .container { min-height:550px; }
.cennik-hero h1{color:var(--kc-green);font-size:38px;margin:0 0 8px;font-weight:700}
.cennik-hero p{color:#455a4f;margin:0 0 18px}
.cennik-hero .btn-gold{background:var(--kc-gold);color:#fff;padding:12px 22px;border-radius:12px}

/* hero scroll-down replacement for CTA */
.scroll-down{display:inline-flex;align-items:center;gap:12px;margin-top:12px;text-decoration:none;color:var(--kc-gold)}
.scroll-down .arrow-circle{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;background:rgba(188,164,104,0.15);color:var(--kc-gold);box-shadow:0 2px 8px rgba(0,0,0,0.08)}
.scroll-down svg{transform:translateY(0);transition:transform .25s ease}
.scroll-down .scroll-text{color:var(--kc-gold);font-weight:700;font-size: clamp(16px, 1.8vw, 20px); position:relative; line-height:1.2}
.scroll-down .scroll-text::after{
  content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px; background: currentColor;
  transform: scaleX(0); transform-origin: left; transition: transform .28s ease;
}
.scroll-down:hover .scroll-text::after{ transform: scaleX(1); }
.scroll-down:hover .scroll-text{ transform: translateX(2px); transition: transform .28s ease; }
.scroll-down:hover svg{transform:translateY(3px)}
.scroll-down:hover .arrow-circle{background:rgba(188,164,104,0.22)}

/* subtle bob animation to draw attention */
@keyframes bob {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}
.scroll-down .arrow-circle { animation: bob 2s ease-in-out infinite; }

/* enable smooth scrolling for in-page anchors */
html { scroll-behavior: smooth; }

/* Align calculator content with the hero text and add internal padding */
.calc-bleed .container{
  /* match hero .container horizontal padding so text lines up */
  padding-left: clamp(40px, 5vw, 160px);
  padding-right: clamp(40px, 5vw, 160px);
  /* give some vertical spacing around the calc area */
  padding-top: 30px;
  padding-bottom: 30px;
  box-sizing: border-box;
}

.calc-card{
  /* breathing room inside the white calc card */
  padding: clamp(18px, 3vw, 36px);
  box-sizing: border-box;
  border-radius: 16px;
  background: #fff;
}

.cennik-wrap{ width: 100%; margin: 0; padding: 0; }
.cennik-wrap.fullwidth{ width: 100%; }

/* ---- moved inline styles / utilities ---- */
.header .logo img {
  height: 30px;
}

/* spacing helpers used in the form */
.form-row { margin-bottom: 12px; }

.form-row .block {
    font-weight: 700;
  font-size: 24px;
    color: #0D4029;
}

.calc-actions { display:flex; gap:8px; align-items:center; margin-top:8px; }

.full-input { width:100%; padding:8px; box-sizing: border-box; }

/* hide honeypot input */
#contact-form input[name="hp"] { display:none; }

#contact-status { margin-top: 10px; }

/* small helper used near sidebar */
.small { margin-top: 8px; }

/* end moved inline styles */
.cennik-grid{
  background: #fff;
  margin: 36px auto 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
  /* remove the small 20px offset so inner .container controls alignment */
  padding: 0;
  box-sizing: border-box;
  border-radius: 0 44px 44px 44px;
}



/* generic page-section to reuse across sections: full-width BG + centered inner content */
.page-section { width:100%; padding: clamp(24px, 4vw, 56px) 0; box-sizing: border-box; }
.page-section .container { max-width: 1300px; margin: 0 auto; padding-left: clamp(20px, 4vw, 60px); padding-right: clamp(20px, 4vw, 60px); box-sizing: border-box; }


.section-title{font-size:42px;color:var(--kc-green);font-weight:700;margin-bottom:24px}
.option-list label{display:flex;align-items:center;gap:10px;color:#113e32}
.option-list input{width:18px;height:18px}

/* label shown next to the price box */
.price-label{font-family:'Poppins',sans-serif;font-size:24px;font-weight:900;color:#0D4029}

.price-box{font-size:30px;color:var(--kc-gold);font-weight:800;padding:14px 18px;border-radius:12px;text-align:center;margin-left:6px}
.price-row{display:flex;align-items:center;gap:12px;margin-top:18px}

/* small note under the calculator title */
.price-note{font-size:14px;color:#516256;margin-top:8px;margin-bottom:6px}

/* inline per-option price badge */
.option-price{font-family:'Poppins',sans-serif;font-size:13px;color:#6b7a72;margin-left:8px;background:#f3f3f3;padding:4px 8px;border-radius:8px}

.option-list label{font-size:16px}
.option-price{font-size:14px}
.breakdown{margin-top:10px;font-size:16px}
.breakdown{
  margin-top:10px;
  background:#f6f6f6; /* very light gray */
  padding:12px 14px;
  border-radius:10px;
  color:#7b8b82;
  font-size:15px;
}
.breakdown strong{display:block;color:#4b5d53;margin-bottom:8px;font-weight:600}
.breakdown ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.breakdown li{display:flex;justify-content:space-between;align-items:center;padding:6px 8px;border-radius:6px;color:#6b7a72}
.breakdown .item-name{color:#7b8b82}
.breakdown .item-price{color:#6b7a72;font-weight:600}

/* Contact card shared styles removed (in common.css) */

/* Responsive: ensure wide inputs collapse to container width on small screens */
/* Responsive rules for contact card removed (shared). */

.newsletter-card{background:#fff;padding:18px;border-radius:16px;display:flex;align-items:center;gap:12px}
.newsletter-card input{padding:10px;border-radius:8px;border:1px solid #eee}
.newsletter-card .btn-primary{background:var(--kc-green);color:#fff;padding:8px 12px;border-radius:8px}

.footer-small{margin-top:28px;color:#dfe6dd;font-size:14px;text-align:center}

@media (max-width:1000px){
  .cennik-grid{grid-template-columns:1fr}
  .cennik-hero{flex-direction:column;align-items:flex-start}
  .price-box{font-size:22px}
  .form-row .block { font-size:22px }
  .price-label { font-size:20px }
  .option-list label{font-size:15px}
  .breakdown{font-size:14px}
}

/* brief highlight when calculator is focused after scroll */
.calc-card.flash-highlight {
  box-shadow: 0 0 0 0 rgba(188,164,104,0.45);
  animation: flashRing 1500ms ease-in-out 1;
}
@keyframes flashRing {
  0% { box-shadow: 0 0 0 0 rgba(188,164,104,0.45); }
  60% { box-shadow: 0 0 0 18px rgba(188,164,104,0.00); }
  100% { box-shadow: 0 0 0 0 rgba(188,164,104,0.00); }
}

/* helper to hide dependent rows when not needed */
.hidden-row{display:none !important}