/* LastLonger shared components: buttons, home header, mobile CTA bar, sub-headers, footers A-D, blog CTA box,
   consent banner and cookie settings line.
   Values from frontend-spec 4.1, 4.3, 4.4, 4.8, 4.9, 4.10 and the .ll-btn-dark rules of 5.3.
   Width, centring and horizontal gutter of every inner wrapper come from .ll-container + .ll-container--{width}
   (layout.css); the spec's duplicated max-width / margin / horizontal padding lines are dropped here
   (theme-architecture 5.4 container mapping, override 5.6 #1). */

/* ------------------------------------------------------------------ 4.1 CTAButton */
.ll-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border-radius: 9999px; font-weight: 600; text-decoration: none; cursor: pointer;
  transition: all 200ms var(--ll-ease); }
.ll-btn:focus { outline: 2px solid transparent; outline-offset: 2px; }
.ll-btn--md { padding: .75rem 1.5rem; font-size: 1rem; line-height: 1.5rem; }        /* height 48px */
.ll-btn--lg { padding: 1rem 2rem; font-size: 1.125rem; line-height: 1.75rem; }        /* height 60px */
.ll-btn--block { width: 100%; }

.ll-btn--primary { background-color: var(--ll-accent); color: #fff; box-shadow: var(--ll-shadow-cta); }
.ll-btn--primary:hover { background-color: var(--ll-accent-hover); transform: translateY(-0.125rem); }
.ll-btn--primary:active { transform: translateY(0); }          /* must come after :hover */
.ll-btn--primary:focus-visible { box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(31,111,80,.5), var(--ll-shadow-cta); }

.ll-btn--ghost { border: 1px solid rgba(15,27,46,.15); color: var(--ll-ink); background-color: transparent; }
.ll-btn--ghost:hover { border-color: var(--ll-accent); color: var(--ll-accent); }
.ll-btn--ghost:focus-visible { box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(31,111,80,.5); }

.ll-btn--light { background-color: #fff; color: var(--ll-ink); box-shadow: var(--ll-shadow-soft); }
.ll-btn--light:hover { background-color: var(--ll-paper-2); transform: translateY(-0.125rem); }
.ll-btn--light:active { transform: translateY(0); }
.ll-btn--light:focus-visible { box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(31,111,80,.5), var(--ll-shadow-soft); }

/* ------------------------------------------------------------------ 5.3 dark button (thank-you views) */
.ll-btn-dark { display: inline-flex; align-items: center; gap: .5rem; padding: .75rem 1.5rem; background-color: var(--ll-ink);
  color: #fff; border-radius: 9999px; transition: color 150ms var(--ll-ease), background-color 150ms var(--ll-ease); }  /* error: transition-colors */
.ll-btn-dark:hover { background-color: var(--ll-ink-soft); }
.ll-btn-dark svg { width: 1.25rem; height: 1.25rem; }
.ll-btn-dark--lg { padding: 1rem 2rem; transition: all 200ms var(--ll-ease); }                                       /* success: transition-all 200 */

/* ------------------------------------------------------------------ 4.3 Header (home only)
   .ll-header__inner also carries "ll-container ll-container--wide" (80rem, home gutter 20/24/32). */
.ll-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background-color: rgba(255,255,255,0); border-bottom: 1px solid transparent;
  transition: all 300ms var(--ll-ease); }
/* Scrolled look (header.js adds .is-scrolled when scrollY > 24). Override 5.6 #4: without JS the header
   always has the scrolled look, so a transparent bar never sits over scrolled content. */
.ll-header.is-scrolled,
html:not(.js) .ll-header { background-color: rgba(255,255,255,.9);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom-color: rgba(15,27,46,.1); box-shadow: var(--ll-shadow-soft); }
.ll-header__inner { height: 4rem; display: flex; align-items: center; justify-content: space-between; }
.ll-header__logo { font-family: var(--ll-font-display); font-size: 1.25rem; line-height: 1.75rem;
  font-weight: 600; letter-spacing: -0.025em; color: var(--ll-ink); }
.ll-header__cta { display: inline-flex; align-items: center; gap: .5rem; border-radius: 9999px;
  background-color: var(--ll-accent); color: #fff; padding: .625rem 1.25rem;
  font-size: .875rem; line-height: 1.25rem; font-weight: 600; box-shadow: var(--ll-shadow-cta);
  transition: all 200ms var(--ll-ease); }                       /* height 40px */
.ll-header__cta:hover { background-color: var(--ll-accent-hover); transform: translateY(-0.125rem); }

/* ------------------------------------------------------------------ 4.4 MobileStickyCTA (home, phones only) */
.ll-mobile-cta { position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
  transform: translateY(100%); transition: transform 300ms var(--ll-ease); }
.ll-mobile-cta.is-visible { transform: translateY(0); }
@media (min-width: 640px) { .ll-mobile-cta { display: none; } }
.ll-mobile-cta__bar { background-color: rgba(255,255,255,.95);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-top: 1px solid rgba(15,27,46,.1); box-shadow: 0 -4px 24px rgba(15,27,46,.10);
  padding: .75rem 1rem; display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.ll-mobile-cta__info { line-height: 1.25; }
.ll-mobile-cta__row { display: flex; align-items: baseline; gap: .5rem; }
.ll-mobile-cta__price { font-size: 1.25rem; line-height: 1.75rem; font-weight: 700; color: var(--ll-ink); }
.ll-mobile-cta__once { font-size: 11px; color: var(--ll-ink-muted); }          /* line-height inherits 1.25 */
.ll-mobile-cta__note { display: flex; align-items: center; gap: .25rem; font-size: 11px; color: var(--ll-ink-muted); }
.ll-mobile-cta__note svg { width: .75rem; height: .75rem; color: var(--ll-accent); }
.ll-mobile-cta__btn { flex-shrink: 0; border-radius: 9999px; background-color: var(--ll-accent); color: #fff;
  padding: .75rem 1.5rem; font-weight: 600; box-shadow: var(--ll-shadow-cta);
  transition: transform 150ms var(--ll-ease); }         /* 16px/24px text -> 48px tall; no hover style */
.ll-mobile-cta__btn:active { transform: scale(.95); }

/* ------------------------------------------------------------------ 4.8 Footers
   Footer A (home): .ll-footer-home__inner also carries "ll-container ll-container--wide". */
.ll-footer-home { background-color: var(--ll-ink); color: #fff; padding-top: 3rem; padding-bottom: 3rem;
  border-top: 1px solid rgba(255,255,255,.1); }
.ll-footer-home__inner { text-align: center; }
.ll-footer-home__inner > * + * { margin-top: 1rem; }
.ll-footer-home h3 { font-family: var(--ll-font-display); letter-spacing: -0.02em; font-size: 1.5rem; line-height: 2rem; font-weight: 600; }
.ll-footer-home__tagline { color: var(--ll-paper-muted); }                       /* 16px / 24px */
.ll-footer-home__nav { display: flex; justify-content: center; gap: 2rem; padding-top: 1rem; }   /* + 1rem margin-top from the stack rule */
.ll-footer-home__nav a { color: var(--ll-paper-muted); transition: color 150ms var(--ll-ease); }
.ll-footer-home__nav a:hover { color: var(--ll-accent); }
.ll-footer-home__copy { font-size: .875rem; line-height: 1.25rem; color: rgba(148,163,184,.7); padding-top: 1rem; }

/* Footer B (blog list, blog post, 404, archives): the inner div also carries "ll-container ll-container--blog". */
.ll-footer-blog { margin-top: 4rem; padding-top: 2rem; padding-bottom: 2rem; border-top: 1px solid rgba(15,27,46,.1);
  background-color: var(--ll-ink); color: #fff; }        /* the ink/10 border is practically invisible on the ink background */
.ll-footer-blog > div { text-align: center; }
.ll-footer-blog p { color: var(--ll-paper-muted); font-size: .875rem; line-height: 1.25rem; }

/* Footer C/D (legal pages): the inner div also carries "ll-container ll-container--legal". */
.ll-footer-legal { padding-top: 2rem; padding-bottom: 2rem; background-color: var(--ll-ink); color: #fff;
  border-top: 1px solid rgba(15,27,46,.1); }     /* no margin-top: the content wrapper's py-12 provides the gap */
.ll-footer-legal > div { text-align: center; }
.ll-footer-legal > div > * + * { margin-top: .75rem; }
.ll-footer-legal p { color: var(--ll-paper-muted); font-size: .875rem; line-height: 1.25rem; }
.ll-footer-legal nav { display: flex; justify-content: center; gap: 1.5rem; }
.ll-footer-legal nav a { color: var(--ll-paper-muted); font-size: .875rem; line-height: 1.25rem; transition: color 150ms var(--ll-ease); }
.ll-footer-legal nav a:hover { color: var(--ll-accent); }

/* ------------------------------------------------------------------ 4.9 Sub-page sticky headers
   Blog: .ll-subheader__inner also carries "ll-container ll-container--blog" (72rem).
   Legal: .ll-subheader__inner also carries "ll-container ll-container--legal" (56rem). Sub gutter 16/24/32. */
.ll-subheader { position: sticky; top: 0; z-index: 10; background-color: rgba(255,255,255,.9);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(15,27,46,.1); }
.ll-subheader__inner { padding-top: 1rem; padding-bottom: 1rem; display: flex; align-items: center; gap: 1rem; }
.ll-subheader__link { display: flex; align-items: center; gap: .5rem; color: var(--ll-ink-muted);
  font-size: .875rem; line-height: 1.25rem; transition: color 150ms var(--ll-ease); }
.ll-subheader__link:hover, .ll-subheader__link2:hover { color: var(--ll-accent); }
.ll-subheader__link svg { width: 1rem; height: 1rem; }
.ll-subheader__sep { color: rgba(15,27,46,.2); }                          /* 16px / 24px -> bar is 57px tall incl. border */
.ll-subheader__current { color: var(--ll-ink); font-weight: 600; }
.ll-subheader__link2 { color: var(--ll-ink-muted); font-size: .875rem; line-height: 1.25rem; transition: color 150ms var(--ll-ease); }

.ll-subheader__back { display: flex; align-items: center; gap: .5rem; color: var(--ll-ink-muted);
  transition: color 150ms var(--ll-ease); }             /* 16px / 24px, NOT text-sm here */
.ll-subheader__back:hover { color: var(--ll-accent); }
.ll-subheader__back svg { width: 18px; height: 18px; }
.ll-subheader__title { display: flex; align-items: center; gap: .5rem; }
.ll-subheader__title svg { width: 20px; height: 20px; color: var(--ll-accent); }
.ll-subheader__title span { font-weight: 600; color: var(--ll-ink); }
/* Skip-link target (theme-architecture 4.2): following "Przejdź do treści" scrolls #ll-main to the top of the viewport,
   where the sticky bar (57px incl. border) would cover the start of the content. The scroll margin keeps the target
   below the bar. Nothing else scrolls to #ll-main, so the page looks and scrolls exactly as before. */
.ll-subheader + #ll-main { scroll-margin-top: calc(3.5rem + 1px); }

/* ------------------------------------------------------------------ 4.10 Blog CTA box */
.ll-blogcta { padding: 1.5rem; border-radius: 1rem; border: 1px solid rgba(31,111,80,.3); background-color: var(--ll-accent-soft); text-align: center; }
.ll-blogcta img { width: 8rem; margin: 0 auto 1rem; filter: drop-shadow(0 20px 13px rgba(0,0,0,.03)) drop-shadow(0 8px 5px rgba(0,0,0,.08)); }
.ll-blogcta h3 { font-family: var(--ll-font-display); letter-spacing: -0.02em; font-size: 1.125rem; line-height: 1.75rem;
  font-weight: 600; color: var(--ll-ink); margin-bottom: .5rem; }
.ll-blogcta__text { font-size: .875rem; line-height: 1.625; color: var(--ll-ink-muted); margin-bottom: 1.25rem; }
.ll-blogcta__btn { display: block; width: 100%; padding: .75rem 1.5rem; background-color: var(--ll-accent); color: #fff;
  border-radius: 9999px; font-weight: 600; box-shadow: var(--ll-shadow-cta); transition: all 200ms var(--ll-ease); }  /* 16/24 -> 48px */
.ll-blogcta__btn:hover { background-color: var(--ll-accent-hover); transform: translateY(-0.125rem); }
.ll-blogcta__note { font-size: .75rem; line-height: 1rem; color: var(--ll-ink-muted); margin-top: .75rem; }

/* ------------------------------------------------------------------ Consent banner and cookie settings line
   (theme-architecture 8.9; inc/tracking.php, consent.js). Fixed at the bottom, outside the flow, so showing it moves no
   content; while it shows, consent.js sets --ll-cookiebar-h and html.ll-has-cookiebar pads the end of the page by that
   height, so the order button and every other control can be scrolled above it. Navy bar, two identical buttons.
   Two layers (theme 1.2.1): the short text, the state line and the buttons form the compact first layer (about 190 px
   tall at 390 px, 208 px at 360 px); the full text under „Szczegóły” makes the bar grow up to 75vh and scrolls inside
   the text column. */
.ll-cookiebar { position: fixed; left: 0; right: 0; bottom: 0; z-index: calc(var(--ll-z-fixed) + 10); display: flex;
  max-height: 75vh; background-color: var(--ll-ink); color: var(--ll-paper-2); border-top: 1px solid rgba(255,255,255,.1);
  box-shadow: var(--ll-shadow-bar); }
.ll-cookiebar:focus { outline: none; }
/* .ll-cookiebar__inner also carries "ll-container ll-container--blog" (72rem, the gutter of the route's scope). */
.ll-cookiebar__inner { flex: 1 1 auto; min-height: 0; width: 100%; padding-top: .75rem; padding-bottom: .75rem;
  display: flex; flex-direction: column; gap: .5rem; }
/* The bottom padding keeps the enlarged tap area of „Szczegóły” inside the scroll box (no 4px of scroll when collapsed). */
.ll-cookiebar__text { min-height: 0; overflow-y: auto; padding-bottom: .25rem; font-size: .8125rem; line-height: 1.4; }
.ll-cookiebar__text > * + *, .ll-cookiebar__details > * + * { margin-top: .375rem; }
.ll-cookiebar__title { font-weight: 600; color: #fff; }
.ll-cookiebar__state { color: #fff; font-weight: 600; }
.ll-cookiebar a { color: #fff; text-decoration-line: underline; text-underline-offset: 2px; }
/* „Szczegóły” at the end of the short text: the vertical padding enlarges the tap area, the negative margin keeps the
   line height; the chevron turns while the details are open. */
.ll-cookiebar__more { display: inline-flex; align-items: center; gap: .125rem; padding: .25rem 0; margin: -.25rem 0;
  color: #fff; font-weight: 600; text-decoration-line: underline; text-underline-offset: 2px; }
.ll-cookiebar__more svg { width: .875rem; height: .875rem; transition: transform 150ms var(--ll-ease); }
.ll-cookiebar__more[aria-expanded="true"] svg { transform: rotate(180deg); }
.ll-cookiebar__actions { flex-shrink: 0; display: flex; gap: .75rem; }
.ll-cookiebar__btn { flex: 1 1 0%; min-height: 2.75rem; padding: .625rem 1.25rem; border-radius: 9999px; background-color: #fff;
  color: var(--ll-ink); font-weight: 600; font-size: .9375rem; line-height: 1.5rem; transition: background-color 150ms var(--ll-ease); }
.ll-cookiebar__btn:hover { background-color: var(--ll-paper-2); }
.ll-cookiebar__btn:focus-visible, .ll-cookiebar a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* „Szczegóły” usually ends the scroll box: the ring is drawn inside its enlarged tap area, so the box does not clip its
   bottom edge and its top edge stays off the line above. */
.ll-cookiebar__more:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
/* Below 390 px (360-375 px phones) the 1.2.2 first layer runs to 8 lines: slightly tighter, so the hero button stays above it. */
@media (max-width: 389.98px) {
  .ll-cookiebar__inner { padding-top: .5rem; }
  .ll-cookiebar__text { line-height: 1.35; }
}
@media (min-width: 768px) {
  .ll-cookiebar__inner { flex-direction: row; align-items: center; gap: 2rem; padding-top: 1rem; padding-bottom: 1rem; }
  /* Stretched to the bar's height, so on a short landscape screen the 75vh cap scrolls the text instead of cutting it. */
  .ll-cookiebar__text { flex: 1 1 auto; align-self: stretch; font-size: .875rem; line-height: 1.5; }
  .ll-cookiebar__btn { flex: 0 0 auto; min-width: 9.5rem; }
}
html.ll-has-cookiebar body { padding-bottom: var(--ll-cookiebar-h, 0px); }

/* Footer line (footers A, B, C/D): a button that looks like the footer links. */
.ll-cookie-settings__btn { color: var(--ll-paper-muted); font-size: .875rem; line-height: 1.25rem; transition: color 150ms var(--ll-ease); }
.ll-cookie-settings__btn:hover { color: var(--ll-accent); }
.ll-cookie-settings__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ll-footer-blog .ll-cookie-settings { margin-top: .5rem; }
/* The same line at the end of the order and thank-you pages (no visible footer), on white: ink-muted for contrast. */
.ll-order .ll-cookie-settings { margin-top: 1rem; }
.ll-thankyou > .ll-cookie-settings { padding: 0 1rem 2rem; text-align: center; }
.ll-order .ll-cookie-settings__btn, .ll-thankyou .ll-cookie-settings__btn { color: var(--ll-ink-muted); }
.ll-order .ll-cookie-settings__btn:hover, .ll-thankyou .ll-cookie-settings__btn:hover { color: var(--ll-accent); }
.ll-order .ll-cookie-settings__btn:focus-visible, .ll-thankyou .ll-cookie-settings__btn:focus-visible { outline-color: var(--ll-ink); }

@media print { .ll-cookiebar, .ll-cookie-settings { display: none !important; } }