/*--------------------------------------------------------------
  New components authored for the PHP/vanilla-JS rebuild.
  These replace behaviour that used to come from jQuery plugins
  (slick, magnific-popup, wow.js, isotope) which were removed.
----------------------------------------------------------------*/

/*----------------------------------------------------------------
  0. Header theme: "solid" variant for pages with no dark hero image
     (legal pages, 404). The default (no modifier) header is transparent
     and relies on the dark hero photo behind it on the homepage, with
     white text/icons — unreadable on a plain light page background.
     .header--solid forces a readable, always-on light header instead.
----------------------------------------------------------------*/
.header--solid {
    background-color: var(--white-color, #f9fbf3);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .08);
}

/* Beat .cs_site_header.cs_style_1.cs_sticky_active's blue background
   (3 class selectors) so scrolling an internal page doesn't flip the
   header back to the transparent/dark-hero color scheme. */
.cs_site_header.cs_style_1.header--solid.cs_sticky_active {
    background-color: var(--white-color, #f9fbf3);
}

.header--solid .cs_nav_list a,
.header--solid .link-thin span,
.header--solid .link-thin--geo,
.header--solid .dropdown-toggle,
.header--solid .cs_menu_toggle {
    color: var(--heading-color);
}

.header--solid svg {
    filter: brightness(0) opacity(.85);
}

/* The lang dropdown menu keeps its own blue pill background, so its
   (white) text/icon must stay white even inside a solid-themed header. */
.header--solid .dropdown-menu,
.header--solid .dropdown-menu svg {
    filter: none;
}

.header--solid .dropdown-menu .dropdown-item {
    color: white;
}

.header--solid .dropdown-toggle,
.header--solid .btn-phone {
    border-color: var(--heading-color);
}

/*----------------------------------------------------------------
  0a2. Hero heading vs. the floating FIP fact box: .cs_hero_funfact_wrap
  is position:absolute; top:166px; right:0 (main.css) with no reserved
  space in the flow, while .cs_hero_title's container only narrows below
  1400px — between 1400 and ~1600px the title runs at its widest and its
  wrapped last line can run under the box. Cap the title's width in that
  gap so it wraps clear of the box instead of matching pixel offsets.
----------------------------------------------------------------*/
@media screen and (min-width: 1200px) and (max-width: 1600px) {
    .cs_hero.cs_style_1 .cs_hero_text {
        max-width: 720px;
    }
}

/*----------------------------------------------------------------
  0b. Desktop header: the nav was viewport-absolute-centered
  (main.css: .cs_main_header_center { position: absolute; left: 50% }),
  independent of how wide the logo/address block and phone/lang
  block actually are. With this site's longer Polish nav labels and the
  phone number, that collides with the right-hand content around
  1200–1450px wide ("...OdBONAMENTY", "FAQ+380...") — text overlapping
  text. Fix: let flexbox allocate the center column's real available
  space instead of blind viewport centering, which cannot overlap by
  construction.
----------------------------------------------------------------*/
@media screen and (min-width: 1200px) {
    .cs_site_header.cs_style_1 .cs_main_header_center {
        position: static;
        left: auto;
        top: auto;
        transform: none;
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        justify-content: center;
        padding: 0 24px;
    }
}

/*----------------------------------------------------------------
  1. Accessibility utilities
----------------------------------------------------------------*/
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    top: -48px;
    left: 8px;
    z-index: 10000;
    background: var(--heading-color);
    color: var(--white-color);
    padding: 12px 20px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    transition: top .2s ease;
}

.skip-link:focus {
    top: 8px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--gray-color, #FFFF15);
    outline-offset: 3px;
    border-radius: 4px;
}

/* .cs_arrow_btn sets outline:none at rest (main.css) for its circular-button
   look; restated here at higher specificity so the shared focus-visible
   ring above still wins on every .cs_arrow_btn instance (hero CTA, service
   cards, pricing cards, etc.) instead of losing to that reset. */
.cs_arrow_btn:focus-visible {
    outline: 3px solid var(--gray-color, #FFFF15);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/*----------------------------------------------------------------
  2. Custom scrollbar
----------------------------------------------------------------*/
html {
    scrollbar-width: thin;
    scrollbar-color: var(--heading-color) var(--white-color);
}

::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: var(--white-color);
}

::-webkit-scrollbar-thumb {
    background-color: var(--heading-color);
    border-radius: 10px;
    border: 3px solid var(--white-color);
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-primary-hover, #1B2C6B);
}

/*----------------------------------------------------------------
  3. Scroll-reveal (replaces wow.js + animate.css)
----------------------------------------------------------------*/
[data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .6s ease, transform .6s ease;
}

[data-reveal="left"] {
    transform: translateX(-32px);
}

[data-reveal="right"] {
    transform: translateX(32px);
}

[data-reveal="zoom"] {
    transform: scale(.92);
}

[data-reveal].is-visible {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    [data-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/*----------------------------------------------------------------
  4. Accordion (replaces jQuery slideUp/slideDown)
----------------------------------------------------------------*/
.cs_accordian_body {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    transition: grid-template-rows .3s ease;
}

.cs_accordian_body > * {
    min-height: 0;
}

.cs_accordian_body__inner {
    overflow: hidden;
}

.cs_accordian.active .cs_accordian_body {
    grid-template-rows: 1fr;
}

.cs_accordian_head_wrap {
    margin: 0;
    font: inherit;
}

.cs_accordian_head {
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.cs_accordian_toggle {
    transition: transform .3s ease;
    flex-shrink: 0;
}

/*----------------------------------------------------------------
  5. Carousel (replaces Slick) — native horizontal scroll-snap.

  Root cause of the compressed/overlapping cards bug: main.css's own
  .cs_card.cs_style_4 rule already gives the CARD an explicit,
  breakpoint-tuned width (1063px down to calc(100vw - 24px) on small
  phones) — that was written for Slick's "variableWidth" mode, where the
  slide's box is exactly as wide as its content. This file used to ALSO
  force a competing width (min(85vw, 420px)) onto the wrapping .cs_slide,
  which fought the card's own width at every breakpoint above ~575px,
  squashing/overlapping cards. Fix: don't size .cs_slide at all — let it
  shrink-to-fit the card's own (already-correct) width, and let the
  wrapper's own overflow-x scroll it. The section's intentional
  right-bleed (.cs_full_width_slider_section) and body's overflow-x:clip
  are original theme layout, not a band-aid for this bug.
----------------------------------------------------------------*/
.cs_slider_container {
    max-width: 100%;
}

.cs_slider_wrapper {
    display: flex;
    gap: 24px;
    max-width: 100%;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
}

.cs_slider_wrapper .cs_slide {
    scroll-snap-align: start;
    flex: 0 0 auto;
}

.cs_slider_arrows.cs_style_3 {
    user-select: none;
}

.cs_slider_arrows.cs_style_3 .cs_right_arrow {
    cursor: pointer;
    border: none;
    padding: 0;
    background-color: rgba(255, 255, 255, 0.75);
    font: inherit;
    /* .wrap-img's own children use z-index: 1/2 (see main.css) for
       in-card layering; without an explicit z-index here those rules
       leak into this shared stacking context and paint the card's
       image over this overlay, hiding the NEXT button entirely. */
    z-index: 5;
}

.cs_slider_arrows.cs_style_3 .cs_right_arrow:focus-visible {
    outline: 3px solid var(--gray-color, #FFFF15);
    outline-offset: -3px;
}

/*----------------------------------------------------------------
  6. Language switcher (native <details>/<summary> — see main.css for
     the themed look; the browser handles open/closed with no JS/CSS
     visibility toggling required).
----------------------------------------------------------------*/
.dropdown-lang .dropdown-menu {
    position: absolute;
    inset-inline-end: 0;
}

.cs_mobile_header_actions {
    align-items: center;
    gap: 12px;
}

/*----------------------------------------------------------------
  6b. Mobile menu button — hover/active/focus states
----------------------------------------------------------------*/
.cs_menu_toggle {
    border-radius: 50%;
    transition: background-color .2s ease;
}

.cs_menu_toggle:hover,
.cs_menu_toggle:active {
    background-color: color-mix(in srgb, currentColor 15%, transparent);
}

.cs_mobile_header_actions .btn-phone {
    margin-right: 0;
}

/*----------------------------------------------------------------
  6c. Mobile header collision fix.
  .cs_menu_toggle is intentionally position:absolute; right:0 (main.css)
  so it stays fixed in the bar while the nav panel opens. Below 1199px its
  siblings (logo, language switcher, phone button) are still normal in-flow
  flex children of the same row, unaware that the toggle's 44px hit target
  is reserved on the right — without a reservation, the in-flow content
  runs the full row width and renders underneath the toggle instead of
  beside it. Padding the row keeps every control in its own space by
  construction, instead of chasing pixel offsets per breakpoint.
----------------------------------------------------------------*/
@media screen and (max-width: 1199px) {
    .cs_site_header.cs_style_1 .cs_main_header_in {
        padding-right: 56px;
    }
}

/* Below ~400px (320/360/390 test widths) there isn't reliably enough row
   width for logo + language switcher + phone button + menu toggle without
   crowding. Drop the phone button from the compact header only — a phone
   link is still reachable and visible inside the mobile nav panel itself
   (includes/navigation.php), so calling remains one tap away. */
@media screen and (max-width: 400px) {
    .cs_mobile_header_actions .btn-phone {
        display: none;
    }
}

/*----------------------------------------------------------------
  7. Forms: honeypot, validation, status message
----------------------------------------------------------------*/
.form-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.form-control[aria-invalid="true"] {
    border-color: #d0342c;
    box-shadow: 0 0 0 1px #d0342c;
}

/* Per-field messages exist for screen readers only (wired via
   aria-describedby) — the visible summary is the toast popup. Kept
   visually hidden rather than an in-flow paragraph so a field turning
   invalid never shifts surrounding layout. */
.form-field-error {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.btn-arrow[aria-busy="true"],
.btn-arrow:disabled {
    opacity: .7;
    pointer-events: none;
}

.btn-arrow:active {
    transform: scale(.97);
}

/*----------------------------------------------------------------
  9. Cookie consent banner
----------------------------------------------------------------*/
.cookie-consent {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 9999;
    display: flex;
    justify-content: center;
    padding: 16px;
    pointer-events: none;
}

.cookie-consent[data-open] {
    pointer-events: auto;
}

.cookie-consent__panel {
    background: var(--white-color, #f9fbf3);
    color: var(--body-color, #1E1E1E);
    border: 1px solid var(--border-color, #d9d9d9);
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
    max-width: 720px;
    width: 100%;
    padding: 28px;
    transform: translateY(24px);
    opacity: 0;
    transition: transform .3s ease, opacity .3s ease;
}

.cookie-consent[data-open] .cookie-consent__panel {
    transform: translateY(0);
    opacity: 1;
}

.cookie-consent__title {
    font-family: var(--heading-font);
    font-size: 20px;
    margin-bottom: 12px;
}

.cookie-consent__text {
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 20px;
}

.cookie-consent__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.cookie-consent__categories {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cookie-consent__category {
    border: 1px solid var(--border-color, #d9d9d9);
    border-radius: 12px;
    padding: 14px 16px;
}

.cookie-consent__category-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font-weight: 700;
    margin-bottom: 6px;
}

/* The head row is a single <label for="..."> wrapping the title text and
   the switch, so clicking anywhere in the row — title, switch, or the
   empty space between — toggles the checkbox exactly once, natively. */
.switch-row {
    cursor: pointer;
}

.switch-row:has(input:disabled) {
    cursor: not-allowed;
}

.switch-row input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    flex-shrink: 0;
    width: 44px;
    height: 24px;
    margin: 0;
    position: relative;
    border-radius: 999px;
    background: var(--border-color, #d9d9d9);
    cursor: pointer;
    transition: background-color .2s ease;
}

.switch-row input[type="checkbox"]::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
    transition: transform .2s ease;
}

.switch-row input[type="checkbox"]:checked {
    background: var(--heading-color);
}

.switch-row input[type="checkbox"]:checked::before {
    transform: translateX(20px);
}

.switch-row input[type="checkbox"]:disabled {
    opacity: .6;
    cursor: not-allowed;
}

.switch-row input[type="checkbox"]:focus-visible {
    outline: 3px solid var(--gray-color, #FFFF15);
    outline-offset: 3px;
}

.btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    border-radius: 9999px;
    border: 1.5px solid var(--heading-color);
    color: var(--heading-color);
    background: transparent;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}

.btn-outline:hover {
    background: var(--heading-color);
    color: var(--white-color);
}

.cookie-reopen-fab {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 9998;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    background: var(--heading-color);
    color: var(--white-color);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .25);
}

.footer-link-button {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    text-decoration: underline;
}

/*----------------------------------------------------------------
  10. Legal pages typography (privacy/cookies/terms/404)
----------------------------------------------------------------*/
.legal-content {
    /* .cs_site_header is position: absolute (it's meant to overlay a hero
       image), so page content must clear its own height (~100px) itself —
       otherwise, on pages with no hero, the <h1> renders underneath it. */
    padding: 140px 0 100px;
}

.legal-content h1 {
    font-family: var(--heading-font);
    font-size: clamp(32px, 5vw, 56px);
    margin-bottom: 24px;
}

.legal-content h2 {
    font-family: var(--heading-font);
    font-size: 24px;
    margin: 40px 0 16px;
}

.legal-content p,
.legal-content li {
    font-size: 17px;
    line-height: 1.7;
}

.legal-content ul {
    padding-left: 20px;
}

.legal-content a {
    color: var(--heading-color);
    text-decoration: underline;
}

.error-404 {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* Same header-clearance reasoning as .legal-content above. */
    padding: 140px 20px 80px;
}

.error-404__code {
    font-family: var(--heading-font);
    font-size: clamp(80px, 15vw, 160px);
    color: var(--heading-color);
    line-height: 1;
}