/* ============================================================
   app.css — poistito.online
   Custom / override styles for the PHP template layer.
   Add project-specific rules here; do not edit the Vite bundle.
   ============================================================ */


/* ------------------------------------------------------------
   0. Global — scrollbar gutter fix
   ------------------------------------------------------------ */

/*
 * Always reserve space for the scrollbar so the layout width
 * stays identical on both scrollable and non-scrollable pages.
 * Without this the centered nav shifts ~15 px between pages.
 */
html {
    scrollbar-gutter: stable;
}


/* ------------------------------------------------------------
   0b. Design tokens — Sprint #3 design alignment
   Single source of truth for radii, borders, surfaces, shadows
   and spacing. Reference these variables in all custom classes
   instead of hardcoding raw values.
   ------------------------------------------------------------ */

:root {
    /* ── Border radius ─────────────────────────────────────── */
    --radius-sm: 0.5rem;     /* rounded-lg  — pagination, chips   */
    --radius-md: 0.75rem;    /* rounded-xl  — buttons, icons, inputs */
    --radius-lg: 1rem;       /* rounded-2xl — content cards        */
    --radius-xl: 1.5rem;     /* rounded-3xl — featured/hero panels */

    /* ── Border colours ────────────────────────────────────── */
    --border-card:  rgb(229, 231, 235);   /* gray-200 — card outlines  */
    --border-input: rgb(209, 213, 219);   /* gray-300 — form inputs    */

    /* ── Surface backgrounds ───────────────────────────────── */
    --bg-card:    rgb(249, 250, 251);     /* gray-50  — section cards  */
    --bg-surface: #ffffff;               /* white    — form/panel fill */

    /* ── Elevation — box shadows ───────────────────────────── */
    --shadow-card:  0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
    --shadow-hover: 0 4px 16px rgba(0,0,0,.08);
    --shadow-focus: 0 0 0 3px hsl(var(--primary) / .12);

    /* ── Spacing aliases (Tailwind rem steps) ──────────────── */
    --space-3: 0.75rem;    /* 12 px  gap-3   */
    --space-4: 1rem;       /* 16 px  p-4     */
    --space-5: 1.25rem;    /* 20 px  mt-5    */
    --space-6: 1.5rem;     /* 24 px  p-6     */
    --space-8: 2rem;       /* 32 px  p-8     */
    --space-12: 3rem;      /* 48 px  mb-12   */
}


/* ------------------------------------------------------------
   1. Layout utilities
   ------------------------------------------------------------ */

/*
 * Main content column — grows to fill vertical space, same max-width as the navbar.
 * Navbar: max-w-5xl (64 rem) centered inside px-4 outer header padding.
 */
.flex-1 {
    flex:          1 1 0%;
    width:         100%;
    /*max-width:     64rem;   /* max-w-5xl — matches navbar */
    margin-left:   auto;
    margin-right:  auto;
    padding-left:  1rem;    /* px-4 — matches outer header padding */
    padding-right: 1rem;
}

/*
 * Full-width main content column — same as flex-1 but no width constraint.
 * Used on the homepage (index.php) where hero and sections span the full viewport.
 */
.flex-landing {
    flex: 1 1 0%;
}

/*
 * Standard page content container.
 * Replaces: max-w-7xl mx-auto px-6 md:px-8
 * Used as the inner wrapper of every full-width section.
 */
.page-container {
    max-width:     80rem;    /* max-w-7xl  — 1280 px */
    margin-left:   auto;     /* mx-auto */
    margin-right:  auto;
    padding-left:  1.5rem;   /* px-6 */
    padding-right: 1.5rem;
}

@media (min-width: 768px) { /* md: */
    .page-container {
        padding-left:  2rem; /* md:px-8 */
        padding-right: 2rem;
    }
}

/* Hero section — relative min-h-screen flex items-center overflow-hidden */
.hero-section {
    position:    relative;
    min-height:  100vh;
    display:     flex;
    align-items: center;
    overflow:    hidden;
}

/*
 * Subtitle paragraph used under page headings.
 * Replaces: mt-4 text-muted-foreground text-lg leading-relaxed max-w-xl
 *   mt-4                → margin-top 1 rem
 *   text-muted-foreground → color hsl(var(--muted-foreground))
 *   text-lg             → font-size 1.125 rem
 *   leading-relaxed     → line-height 1.625  (overrides text-lg default 1.75 rem)
 *   max-w-xl            → max-width 36 rem
 */
.page-subtitle {
    margin-top:  1rem;                        /* mt-4 */
    color:       hsl(var(--muted-foreground)); /* text-muted-foreground */
    font-size:   1.125rem;                    /* text-lg */
    line-height: 1.625;                       /* leading-relaxed */
    max-width:   36rem;                       /* max-w-xl */
}

/*
 * Small muted body text — callout boxes and descriptive copy inside product cards.
 * Replaces: text-sm text-muted-foreground leading-relaxed  (12 occurrences in produkty.php)
 *   text-sm             → font-size 0.875 rem
 *   text-muted-foreground → color hsl(var(--muted-foreground))
 *   leading-relaxed     → line-height 1.625  (overrides text-sm default 1.25 rem)
 */
.body-sm {
    font-size:   0.875rem;                    /* text-sm */
    color:       hsl(var(--muted-foreground)); /* text-muted-foreground */
    line-height: 1.625;                       /* leading-relaxed */
}

/*
 * Page header section — white background, top padding clears the fixed nav, bottom spacing.
 * Replaces: bg-white pt-28 pb-12
 * Animates in from below with a small spring bounce on page load.
 */
.page-header-section {
    background-color: #ffffff;                                          /* bg-white */
    padding-top:      8rem;                                             /* pt-28 — 28 × 0.25 rem */
    padding-bottom:   10px;                                             /* pb-12 — 12 × 0.25 rem */
    animation: page-header-bounce-in 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes page-header-bounce-in {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0);    }
}

@media (prefers-reduced-motion: reduce) {
    .page-header-section { animation: none; }
}

/*
 * TOP section of each page, white background.
 * Padding matches the other content sections (product-section, blog-section).
 */
.top-section {
    background-color: var(--bg-surface);
    padding-top:      2rem;    /* 32 px — breathing room on mobile  */
    padding-bottom:   4rem;    /* 64 px */
}

@media (min-width: 768px) {
    .top-section {
        padding-top:    3rem;  /* 48 px — matches product-section   */
        padding-bottom: 5rem;  /* 80 px — matches product-section   */
    }
}


/* ------------------------------------------------------------
   2. Mobile navigation menu
   ------------------------------------------------------------ */

/* Hidden by default; toggled open via JS (.open class) */
.nav-mobile {
    display:          none;
    flex-direction:   column;
    gap:              0.25rem;
    width:            100%;
    max-width:        56rem;
    background:       rgba(3, 7, 18, 0.97);
    backdrop-filter:  blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border:           1px solid rgba(255, 255, 255, 0.1);
    border-radius:    1rem;
    padding:          0.75rem;
    margin-top:       0.5rem;
    box-shadow:       0 8px 32px rgba(0, 0, 0, 0.4);
}

.nav-mobile.open {
    display: flex;
}

/* Hide on desktop — never show the mobile panel above md breakpoint */
@media (min-width: 768px) {
    .nav-mobile           { display: none !important; }
    #nav-toggle           { display: none !important; }
}

/* Link styles inside mobile menu */
.nav-mobile a {
    padding:     0.75rem 1rem;
    font-size:   0.875rem;
    font-weight: 500;
    color:       rgb(209, 213, 219);
    border-radius: 0.5rem;
    transition:  color 0.15s, background-color 0.15s;
    text-decoration: none;
    display:     block;
}

.nav-mobile a:hover {
    color:       white;
    background:  rgba(255, 255, 255, 0.08);
}

/* Active link in mobile menu */
.nav-mobile a.text-primary {
    color:       hsl(var(--primary));
    background:  hsl(var(--primary) / 0.1);
}

/* CTA button at bottom of mobile menu */
.nav-mobile-cta {
    margin-top:    0.5rem !important;
    padding:       0.75rem 1.25rem !important;
    background:    hsl(var(--primary)) !important;
    color:         hsl(var(--primary-foreground)) !important;
    font-weight:   600 !important;
    border-radius: 0.75rem !important;
    text-align:    center;
    display:       block;
    text-decoration: none;
    transition:    opacity 0.15s;
}

.nav-mobile-cta:hover {
    opacity: 0.9;
}


/* ------------------------------------------------------------
   3. Stat card — glass tile used in hero grid
   ------------------------------------------------------------ */

/* Replaces: p-6 rounded-2xl bg-white/5 backdrop-blur-md border border-white/10 */
.stat-card {
    padding:         var(--space-6);              /* p-6  — 1.5 rem */
    border-radius:   var(--radius-lg);            /* rounded-2xl    */
    background:      rgba(255,255,255,.05);        /* bg-white/5     */
    backdrop-filter: blur(12px);                   /* backdrop-blur-md */
    -webkit-backdrop-filter: blur(12px);
    border:          1px solid rgba(255,255,255,.1);
}


/* ------------------------------------------------------------
   4. Page content wrapper
   ------------------------------------------------------------ */

/* Replaces: relative z-10 w-full max-w-7xl mx-auto px-6 md:px-8 pb-20 */
.hero-content {
    position:      relative;
    z-index:       10;
    width:         100%;
    max-width:     80rem;       /* max-w-7xl */
    margin-left:   auto;
    margin-right:  auto;
    padding-top:   100px;
    padding-bottom: 5rem;       /* pb-20 */
    padding-left:  1.5rem;      /* px-6 */
    padding-right: 1.5rem;
}

@media (min-width: 768px) {    /* md: breakpoint */
    .hero-content {
        padding-left:  2rem;    /* md:px-8 */
        padding-right: 2rem;
    }
}


/* ------------------------------------------------------------
   5. Cookie consent banner
   ------------------------------------------------------------ */

/*
 * Fixed bar at the bottom of the viewport.
 * Starts off-screen (translateY 100%) and slides up when JS adds .visible.
 * z-index 200 — above floating chat button (z-50) and Sonner (z-[100]).
 * JS in footer.php handles show/hide and pushes the chat button up while
 * the banner is visible so the two never overlap.
 */
#cookie-banner {
    position:              fixed;
    bottom:                0;
    left:                  0;
    right:                 0;
    z-index:               200;
    background:            rgba(3, 7, 18, 0.97);
    backdrop-filter:       blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top:            1px solid rgba(255, 255, 255, 0.1);
    box-shadow:            0 -8px 32px rgba(0, 0, 0, 0.4);
    transform:             translateY(100%);
    transition:            transform 0.35s cubic-bezier(.4, 0, .2, 1);
}

#cookie-banner.visible {
    transform: translateY(0);
}


/* ------------------------------------------------------------
   6. Partners logo carousel — infinite marquee
   ------------------------------------------------------------ */

.partners-section {
    padding-top:    4rem;          /* py-16 */
    padding-bottom: 4rem;
    border-top:     1px solid hsl(var(--border));   /* border-y */
    border-bottom:  1px solid hsl(var(--border));
    overflow:       hidden;        /* overflow-hidden */
    background-color: #fff;        /* bg-white */
}

/*
 * Layout only — animation is driven by JS (requestAnimationFrame) in
 * index.php so it measures real pixel widths after layout and works
 * correctly at every viewport width.
 */
.partners-strip {
    display:     flex;
    gap:         2rem;      /* 32 px — matches Tailwind gap-8 */
    align-items: center;
    width:       max-content;
    will-change: transform; /* promote to GPU compositor layer */
}


/* ------------------------------------------------------------
   7. Iframe
   ------------------------------------------------------------ */

        #poistenieonline {
            width:   100%;
            height:  500px; /* Default; overridden dynamically by JS */
            border:  0;
            margin:  0;
            padding: 0;
        }
        #poistenieonline iframe {
            width:   100%;
            height:  100%;
            border:  0;
            margin:  0;
            padding: 0;
        }


/* ------------------------------------------------------------
   8. Product detail cards — produkty.php
   ------------------------------------------------------------ */

/*
 * Outer background section that wraps all product cards.
 * Replaces: bg-gray-50 py-12 pb-20
 *   bg-gray-50 → background-color rgb(249 250 251)
 *   py-12      → padding-top/bottom 3 rem
 *   pb-20      → padding-bottom 5 rem  (overrides py-12 bottom)
 */
.product-section {
    background-color: #fff;  /* bg-gray-50 */
    padding-top:      3rem;                /* py-12 */
    padding-bottom:   5rem;                /* pb-20 */
}


/*
 * Stack that holds all product cards vertically.
 * Replaces: flex flex-col gap-6
 *   flex      → display flex         (already in bundle)
 *   flex-col  → flex-direction column
 *   gap-6     → gap 1.5rem
 */
.product-cards-stack {
    display:        flex;
    flex-direction: column;
    /* gap:            1.5rem;  /* gap-6 */ */
    /* margin-top:       30px;              */ 
}


/*
 * Outer wrapper of each product detail card.
 * Replaces: bg-white rounded-2xl border border-gray-200 overflow-hidden
 *   bg-white        → background-color #fff
 *   rounded-2xl     → border-radius 1rem
 *   border          → border-width 1px  (border-style solid via Tailwind preflight)
 *   border-gray-200 → border-color rgb(229 231 235)  [NOT in compiled bundle]
 *   overflow-hidden → overflow hidden
 */
.product-card {
    scroll-margin-top: 100px; /* offset for fixed navbar when arriving via anchor link */
    background-color: var(--bg-card);
    border-radius:    var(--radius-lg);
    border-width:     1px;
    border-style:     solid;
    border-color:     var(--border-card);
    overflow:         hidden;
    margin-bottom:    var(--space-12); /* 3rem — consistent spacing-scale step */
}

/* ── Scroll-reveal animation (added/removed by IntersectionObserver in produkty.php) ── */
@media (prefers-reduced-motion: no-preference) {
    .product-card {
        transition: opacity 0.55s ease,
                    transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .product-card.scroll-hidden {
        opacity:   0;
        transform: translateY(36px);
    }
}


/*
 * Footer area of each product detail card.
 * Contains the primary CTA button ("Vypočítaj cenu").
 * Replaces: px-8 pb-8  →  padding: 0 2rem 2rem
 *   px-8 = padding-left/right 2 rem  (Tailwind spacing-8)
 *   pb-8 = padding-bottom     2 rem
 */
.product-card-cta {
    padding-left:   var(--space-8);  /* px-8 — 2rem */
    padding-right:  var(--space-8);
    padding-bottom: var(--space-8);
    margin-top:     var(--space-3);  /* 0.75rem — tidy gap above button */
    margin-bottom:  var(--space-3);
}

/*
 * Icon + title header row inside each product card.
 * Background is one shade darker than --bg-card to create a visible header band.
 * Replaces: px-8 py-6 flex items-center gap-4
 */
.product-card-header {
    padding-left:    var(--space-8);   /* px-8 — 2 rem */
    padding-right:   var(--space-8);
    padding-top:     var(--space-6);   /* py-6 — 1.5 rem */
    padding-bottom:  var(--space-6);
    display:         flex;
    align-items:     center;
    gap:             var(--space-4);   /* gap-4 — 1 rem */
    background-color: rgb(237, 238, 239); /* intentionally darker than --bg-card for header band */
}

/*
 * Content body grid inside each product card.
 * Replaces: px-8 py-7 grid md:grid-cols-2 gap-8 lg:gap-16
 */
.product-card-body {
    padding-left:  var(--space-8);   /* px-8 — 2rem */
    padding-right: var(--space-8);
    padding-top:   1.75rem;          /* py-7 */
    padding-bottom: 1.75rem;
    display:       grid;
    gap:           var(--space-8);   /* gap-8 — 2rem */
}

@media (min-width: 768px) {  /* md: */
    .product-card-body {
        grid-template-columns: repeat(2, minmax(0, 1fr)); /* grid-cols-2 */
    }
}

@media (min-width: 1024px) { /* lg: */
    .product-card-body {
        gap: 4rem; /* lg:gap-16 */
    }
}

/*
 * Primary CTA button used inside each product card.
 * Replaces: inline-flex items-center gap-2 px-6 py-3
 *           bg-primary text-primary-foreground rounded-xl
 *           font-semibold text-sm hover:bg-primary/90 transition-all
 */
.btn-primary {
    display:          inline-flex;
    align-items:      center;
    gap:              0.5rem;
    padding:          0.75rem 1.5rem;    /* py-3 px-6 */
    background-color: hsl(var(--primary));
    color:            hsl(var(--primary-foreground));
    border-radius:    var(--radius-md);  /* rounded-xl — unified with inputs and icons */
    font-weight:      600;
    font-size:        0.875rem;
    line-height:      1.25rem;
    text-decoration:  none;
    transition-property: all;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s;
}

.btn-primary:hover {
    opacity: 0.9; /* matches hover:bg-primary/90 intent — reliable across all themes */
}

/*
 * Small uppercase label used above "O produkte" / "Čo je kryté" columns.
 * Replaces: text-xs font-semibold text-primary uppercase tracking-wider mb-4
 *   text-xs          → font-size 0.75 rem; line-height 1 rem
 *   font-semibold    → font-weight 600
 *   text-primary     → color hsl(var(--primary))
 *   uppercase        → text-transform uppercase
 *   tracking-wider   → letter-spacing 0.05 em
 *   mb-4             → margin-bottom 1 rem
 */
.product-label {
    font-size:      0.75rem;              /* text-xs */
    line-height:    1rem;
    font-weight:    600;                  /* font-semibold */
    color:          hsl(var(--primary));  /* text-primary */
    text-transform: uppercase;            /* uppercase */
    letter-spacing: 0.05em;              /* tracking-wider */
    margin-bottom:  1rem;                 /* mb-4 */
}

/*
 * Info callout box inside each product card body.
 * Replaces: mt-5 p-4 rounded-xl bg-primary/5 border border-primary/10 flex items-start gap-3
 *   mt-5             → margin-top 1.25 rem
 *   p-4              → padding 1 rem
 *   rounded-xl       → border-radius 0.75 rem
 *   bg-primary/5     → background-color hsl(var(--primary) / 0.05)
 *   border           → border-width 1px; border-style solid
 *   border-primary/10 → border-color hsl(var(--primary) / 0.1)
 *   flex             → display flex
 *   items-start      → align-items flex-start
 *   gap-3            → gap 0.75 rem
 */
.info-callout {
    margin-top:       var(--space-5);                /* mt-5 — 1.25 rem */
    padding:          var(--space-4);                /* p-4  — 1 rem    */
    border-radius:    var(--radius-md);              /* rounded-xl      */
    background-color: hsl(var(--primary) / 0.05);
    border-width:     1px;
    border-style:     solid;
    border-color:     hsl(var(--primary) / 0.1);
    display:          flex;
    align-items:      flex-start;
    gap:              var(--space-3);                /* gap-3 — 0.75 rem */
}


/* ------------------------------------------------------------
   9. O nás page — company intro section
   ------------------------------------------------------------ */

/* Section outer — white page background */
.about-intro-section {
    background-color: #fff;
    padding-top:      0.1rem;
    padding-bottom:   3rem;
}

/*
 * Card wrapper — gray background, rounded corners, solid green border.
 * Intentionally uses --radius-xl (1.5rem) as a featured/hero-level card.
 */
.about-intro-card {
    /*
    background-color: var(--bg-card);
    border-radius:    var(--radius-xl);
    border:           1px solid hsl(var(--border));
    */
    padding:          2.5rem 2rem;
}

@media (min-width: 768px) {
    .about-intro-card {
        padding: 0rem 0rem;
    }
}

/*
 * Two-column intro layout: text left, shield illustration right.
 * Single column on mobile, side-by-side on md+.
 */
.about-intro-grid {
    display:     grid;
    gap:         3rem;       /* gap-12 */
    align-items: center;
}

@media (min-width: 768px) {
    .about-intro-grid {
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
    }
}

@media (min-width: 1024px) {
    .about-intro-grid {
        gap: 5rem;           /* lg:gap-20 */
    }
}

/* Body text column — stacked paragraphs with muted colour */
.about-body {
    display:        flex;
    font-size:      1.2rem;
    flex-direction: column;
    gap:            1rem;    /* gap-4 */
    color:          hsl(var(--muted-foreground));
    line-height:    1.625;   /* leading-relaxed */
    margin-top:     1.5rem;  /* mt-6 */
    margin-bottom:  0;
}

.about-body strong {
    font-weight: 600;
    color:       hsl(var(--foreground));
}

/* Stats row — 2 cols on mobile, 4 cols on sm+ */
.about-stats {
    display:               grid;
    grid-template-columns: repeat(2, 1fr);
    gap:                   0.75rem;
    margin-top:            2rem;   /* mt-8 */
}

@media (min-width: 640px) {
    .about-stats {
        grid-template-columns: repeat(4, 1fr);
    }
}

.about-stat {
    display:          flex;
    flex-direction:   column;
    align-items:      center;
    text-align:       center;
    padding:          var(--space-4);
    border-radius:    var(--radius-md);              /* rounded-xl */
    background-color: hsl(var(--primary) / 0.05);
    border:           1px solid hsl(var(--primary) / 0.1);
    gap:              0.2rem;
}

.about-stat-value {
    font-size:   1.25rem;          /* text-xl */
    font-weight: 700;              /* font-bold */
    color:       hsl(var(--primary));
    line-height: 1.2;
}

.about-stat-label {
    font-size:   0.75rem;          /* text-xs */
    color:       hsl(var(--muted-foreground));
    line-height: 1.4;
}

/* Shield illustration wrapper */
.about-shield-wrap {
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         2rem;
}

.about-shield-svg {
    width:     100%;
    max-width: 220px;
    height:    auto;
}

.about-brand-svg {
    width:      100%;
    max-width:  272px;   /* 340 × 0.8 — 20 % smaller */
    height:     auto;
    display:    block;
    margin:     auto;    /* centres inside the flex wrapper */
}


/* ------------------------------------------------------------
   10. o-nas.php — page heading + feature cards
   ------------------------------------------------------------ */

/*
 * Page <h1> on the O nás page.
 * Replaces: text-4xl md:text-5xl font-bold tracking-tight text-foreground leading-tight
 * clamp() gives fluid scaling: 40px floor on small phones → reaches 64px at ~800px+
 */
.onas-page-heading {
    font-size:      clamp(2.5rem, 8vw, 4rem); /* fluid: 40px → 64px */
    font-weight:    700;                       /* font-bold */
    letter-spacing: -0.025em;                 /* tracking-tight */
    color:          hsl(var(--foreground));    /* text-foreground */
    line-height:    1.2;                       /* leading-tight, slightly tighter for large sizes */
}

/* Section wrapper */
.products-overview-section {
    /*background-color: rgb(249, 250, 251);*/
    background-color: #fff;
    padding-top:      3rem;
    padding-bottom:   5rem;
}

/* Vertical stack of cards */
.product-feature-stack {
    display:        flex;
    flex-direction: column;
    gap:            1rem;
    margin-top:     2rem;
}

/*
 * Individual card — single column on mobile, row on md+.
 * Left col (icon/title/desc) separated from right col (2×2 items)
 * by a 1px divider on md+.
 */
.product-feature-card {
    display:          flex;
    flex-direction:   column;
    gap:              1.25rem;
    padding:          var(--space-6);
    background-color: var(--bg-card);
    border:           1px solid var(--border-card);
    border-radius:    var(--radius-lg);
}

@media (min-width: 768px) {
    .product-feature-card {
        flex-direction: row;
        gap:            0;
        align-items:    center;
    }
}

/* Left column: icon + title + description */
.product-feature-left {
    display:        flex;
    flex-direction: column;
}

@media (min-width: 768px) {
    .product-feature-left {
        flex:          0 0 27%;
        padding-right: 1.75rem;
        border-right:  1px solid rgb(229, 231, 235);
    }
}

.product-feature-icon {
    width:            2.5rem;
    height:           2.5rem;
    border-radius:    var(--radius-md);          /* rounded-xl — matches product-card icons */
    background-color: hsl(var(--primary) / 0.08);
    display:          flex;
    align-items:      center;
    justify-content:  center;
    margin-bottom:    var(--space-3);
    flex-shrink:      0;
}

.product-feature-title {
    font-size:     1rem;
    font-weight:   700;
    color:         hsl(var(--foreground));
    margin-bottom: 0.375rem;
    line-height:   1.3;
}

.product-feature-desc {
    font-size:   0.8125rem;
    color:       hsl(var(--muted-foreground));
    line-height: 1.6;
}

/* Right column: 2×2 grid of items */
.product-feature-items {
    display:               grid;
    grid-template-columns: 1fr;
    gap:                   0.5rem;
}

@media (min-width: 480px) {
    .product-feature-items {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 768px) {
    .product-feature-items {
        flex:         1;
        padding-left: 1.75rem;
    }
}

/* Single feature item tile */
.product-feature-item {
    display:          flex;
    align-items:      center;           /* vertically centred */
    gap:              0.5rem;
    padding:          0.625rem 0.875rem;
    border-radius:    0.625rem;         /* slightly larger corners */
    background-color: rgb(229, 231, 235); /* gray-200 — visible contrast */
    font-size:        0.8125rem;
    line-height:      1.45;
}

.product-feature-arrow {
    color:       hsl(var(--primary));
    font-weight: 700;
    font-size:   0.9375rem;
    flex-shrink: 0;
}

.product-feature-text {
    color: #000;
}


/* ------------------------------------------------------------
   11. Product feature card — scroll-reveal bounce animation
   ------------------------------------------------------------ */

/*
 * Cards start hidden + shifted down when JS marks them with
 * .will-animate. IntersectionObserver then adds .is-visible
 * which fires the keyframe and makes them bounce into place.
 * Cascade delay is set inline via style="animation-delay:Nms".
 */
.product-feature-card.will-animate {
    opacity:   0;
    transform: translateY(48px);
}

.product-feature-card.is-visible {
    animation: card-bounce-in 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes card-bounce-in {
    from { opacity: 0; transform: translateY(48px); }
    to   { opacity: 1; transform: translateY(0);    }
}

/* Respect user's reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
    .product-feature-card.will-animate { opacity: 1; transform: none; }
    .product-feature-card.is-visible   { animation: none; }
}


/* ------------------------------------------------------------
   12. CTA banner — o-nas.php "Vypočítať poistné"
   ------------------------------------------------------------ */

/* Full-width green gradient banner */
.cta-banner {
    background: linear-gradient(135deg, hsl(142, 65%, 36%) 0%, hsl(142, 72%, 24%) 100%);
    padding-top:    5rem;
    padding-bottom: 5rem;
    text-align:     center;
}

/* Inner centred column — constrained width */
.cta-banner-inner {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            1.25rem;
    max-width:      40rem;
    margin-left:    auto;
    margin-right:   auto;
}

/* Small pill above the heading */
.cta-banner-badge {
    display:       inline-flex;
    align-items:   center;
    gap:           0.5rem;
    padding:       0.375rem 1rem;
    border-radius: 9999px;
    background:    rgba(255, 255, 255, 0.15);
    border:        1px solid rgba(255, 255, 255, 0.25);
    color:         white;
    font-size:     0.875rem;
    font-weight:   500;
}

/* Main heading */
.cta-banner-heading {
    font-size:      2.25rem;
    font-weight:    700;
    color:          white;
    line-height:    1.15;
    letter-spacing: -0.025em;
    margin:         0;
}

@media (min-width: 768px) {
    .cta-banner-heading { font-size: 2.75rem; }
}

/* Supporting copy below heading */
.cta-banner-text {
    color:       rgba(255, 255, 255, 0.82);
    font-size:   1.0625rem;
    line-height: 1.625;
    max-width:   34rem;
    margin:      0;
}

/* White button used on coloured backgrounds */
.btn-white {
    display:          inline-flex;
    align-items:      center;
    gap:              0.5rem;
    padding:          0.875rem 2rem;
    background-color: var(--bg-surface);
    color:            hsl(var(--primary));
    border-radius:    var(--radius-md);  /* rounded-xl — matches btn-primary */
    font-weight:      600;
    font-size:        0.9375rem;
    line-height:      1.25rem;
    text-decoration:  none;
    margin-top:       0.5rem;
    box-shadow:       0 4px 14px rgba(0, 0, 0, 0.13);
    transition:       all 0.18s cubic-bezier(.4, 0, .2, 1);
}

.btn-white:hover {
    background-color: rgba(255, 255, 255, 0.91);
    transform:        translateY(-1px);
    box-shadow:       0 6px 22px rgba(0, 0, 0, 0.18);
}


/* ------------------------------------------------------------
   Legal pages — ochrana-osobnych-udajov.php / obchodne-podmienky.php
   ------------------------------------------------------------ */

/* Section wrapper */
.legal-section {
    background-color: rgb(249, 250, 251);
    padding-top:      3rem;
    padding-bottom:   5rem;
}

/* Centred, constrained prose column */
.legal-body {
    max-width:    52rem;
    margin-left:  auto;
    margin-right: auto;
    display:      flex;
    flex-direction: column;
    gap:          2.5rem;
}

/* Individual numbered section block */
.legal-block {
    display:        flex;
    flex-direction: column;
    gap:            0.75rem;
    font-size:      0.9375rem;
    line-height:    1.75;
    color:          hsl(var(--muted-foreground));
}

/* Section heading */
.legal-h2 {
    font-size:   1.125rem;
    font-weight: 700;
    color:       hsl(var(--foreground));
    padding-bottom: 0.5rem;
    border-bottom:  2px solid hsl(var(--primary) / 0.15);
    margin-bottom:  0.25rem;
}

/* Bullet list */
.legal-list {
    padding-left: 1.25rem;
    display:      flex;
    flex-direction: column;
    gap:          0.5rem;
    list-style:   disc;
}

.legal-list li {
    padding-left: 0.25rem;
}

/* Highlighted info card (company details, authority details) */
.legal-card {
    background-color: hsl(var(--primary) / 0.04);
    border:           1px solid hsl(var(--primary) / 0.15);
    border-left:      3px solid hsl(var(--primary));
    border-radius:    0.75rem;
    padding:          1rem 1.25rem;
    display:          flex;
    flex-direction:   column;
    gap:              0.25rem;
    font-size:        0.875rem;
    line-height:      1.6;
}

.legal-card strong {
    color:       hsl(var(--foreground));
    font-weight: 600;
}

/* Inline links */
.legal-link {
    color:           hsl(var(--primary));
    text-decoration: underline;
    text-underline-offset: 3px;
}

.legal-link:hover {
    opacity: 0.8;
}

/* Comparison table (used on privacy policy) */
.legal-table {
    width:           100%;
    border-collapse: collapse;
    font-size:       0.875rem;
    line-height:     1.5;
    overflow:        hidden;
    border-radius:   0.75rem;
    border:          1px solid rgb(229, 231, 235);
}

.legal-table thead tr {
    background-color: hsl(var(--primary));
    color:            white;
}

.legal-table th {
    padding:    0.75rem 1rem;
    text-align: left;
    font-weight: 600;
    font-size:   0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.legal-table td {
    padding:      0.75rem 1rem;
    border-top:   1px solid rgb(243, 244, 246);
    vertical-align: top;
    color:        hsl(var(--muted-foreground));
}

.legal-table tbody tr:nth-child(odd) {
    background-color: white;
}

.legal-table tbody tr:nth-child(even) {
    background-color: rgb(249, 250, 251);
}

@media (max-width: 640px) {
    .legal-table,
    .legal-table thead,
    .legal-table tbody,
    .legal-table th,
    .legal-table td,
    .legal-table tr { display: block; }

    .legal-table thead tr { display: none; }

    .legal-table td {
        border-top: none;
        border-bottom: 1px solid rgb(243, 244, 246);
        padding: 0.5rem 1rem;
    }

    .legal-table td::before {
        content:     attr(data-label);
        font-weight: 600;
        color:       hsl(var(--foreground));
        display:     block;
        font-size:   0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        margin-bottom: 0.2rem;
    }
}


/* ------------------------------------------------------------
   15. Google Reviews carousel
   ------------------------------------------------------------ */

.reviews-section {
    background-color: #f9fafb;
    padding-top:      5rem;
    padding-bottom:   5rem;
}

/* Header row — left (badge + heading + rating) / right (controls) */
.reviews-header {
    display:         flex;
    justify-content: space-between;
    align-items:     flex-end;
    flex-wrap:       wrap;
    gap:             1.5rem;
    margin-bottom:   2.5rem;
}

.reviews-google-badge {
    display:        inline-flex;
    align-items:    center;
    gap:            0.5rem;
    font-size:      0.75rem;
    font-weight:    700;
    letter-spacing: 0.08em;
    color:          #6b7280;
    margin-bottom:  0.75rem;
}

.reviews-heading {
    font-size:     2.25rem;
    font-weight:   700;
    line-height:   1.2;
    color:         hsl(var(--foreground));
    margin-bottom: 0.75rem;
}

.reviews-summary {
    display:     flex;
    align-items: center;
    gap:         0.625rem;
}

.reviews-stars {
    color:          #f59e0b;
    font-size:      1.125rem;
    letter-spacing: -0.04em;
}

.reviews-score {
    font-size:   1.375rem;
    font-weight: 700;
    color:       hsl(var(--foreground));
}

.reviews-count {
    font-size: 0.875rem;
    color:     hsl(var(--muted-foreground));
}

/* Prev / Next + link row */
.reviews-controls {
    display:     flex;
    align-items: center;
    gap:         0.625rem;
}

.reviews-btn {
    width:           2.5rem;
    height:          2.5rem;
    border-radius:   50%;
    border:          1px solid rgb(229, 231, 235);
    background:      #ffffff;
    display:         flex;
    align-items:     center;
    justify-content: center;
    cursor:          pointer;
    color:           hsl(var(--foreground));
    transition:      background 0.15s, border-color 0.15s;
    flex-shrink:     0;
}

.reviews-btn:hover:not(:disabled) {
    background:   hsl(var(--primary) / 0.08);
    border-color: hsl(var(--primary));
}

.reviews-btn:disabled {
    opacity: 0.4;
    cursor:  default;
}

.reviews-all-link {
    font-size:       0.875rem;
    font-weight:     600;
    color:           hsl(var(--primary));
    text-decoration: none;
    white-space:     nowrap;
    transition:      opacity 0.15s;
}

.reviews-all-link:hover { opacity: 0.75; }

/* Carousel track */
/* Matches .fbs-track exactly — native scroll, no JS transform, no wrapper needed */
.reviews-track {
    display:                    flex;
    gap:                        1.5rem;
    overflow-x:                 auto;
    scroll-snap-type:           x mandatory;
    scroll-behavior:            smooth;
    -webkit-overflow-scrolling: touch;
    touch-action:               pan-x;
    padding:                    .5rem 0 1.25rem;
    scrollbar-width:            none;
}
.reviews-track::-webkit-scrollbar { display: none; }

/* Review card — same width progression as .fbs-card */
.review-card {
    flex-shrink:       0;
    width:             290px;
    scroll-snap-align: start;
    box-sizing:        border-box;
    background:        var(--bg-surface);
    border-radius:     var(--radius-lg);
    border:            1px solid var(--border-card);
    padding:           var(--space-6);
    transition:        box-shadow .2s, transform .2s;
}
.review-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,.09); transform: translateY(-2px); }
@media (min-width: 768px)  { .review-card { width: 300px; } }
@media (min-width: 1024px) { .review-card { width: 320px; } }

/* Hide img avatars that have no src or fail to load — shows initial fallback */
.review-avatar img:not([src]),
.review-avatar img[src=""] { display: none; }

.review-card-header {
    display:       flex;
    align-items:   center;
    gap:           0.75rem;
    margin-bottom: 0.625rem;
}

.review-avatar {
    width:           3rem;
    height:          3rem;
    border-radius:   50%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-weight:     700;
    font-size:       1.125rem;
    color:           #ffffff;
    flex-shrink:     0;
    position:        relative;
    overflow:        hidden;
}

/* Photo — absolutely fills the circle; onerror hides it, revealing the initial beneath */
.review-avatar img {
    position:      absolute;
    inset:         0;
    width:         100%;
    height:        100%;
    object-fit:    cover;
    border-radius: 50%;
}

.review-name {
    font-weight: 600;
    font-size:   0.9375rem;
    color:       hsl(var(--foreground));
    line-height: 1.3;
}

.review-time {
    font-size: 0.8125rem;
    color:     hsl(var(--muted-foreground));
}

.review-card-stars {
    color:          #f59e0b;
    font-size:      1rem;
    letter-spacing: -0.03em;
    margin-bottom:  0.625rem;
}

.review-text {
    font-size:   0.875rem;
    color:       hsl(var(--muted-foreground));
    line-height: 1.65;
}

/* ─── Mobile: Google Reviews — all classes ───────────────────────
   Breakpoint 767px: tablets and phones
   Breakpoint 479px: small phones (SE, older Android)
   ---------------------------------------------------------------- */

@media (max-width: 767px) {

    /* ── Section ────────────────────────────────────────────────── */
    .reviews-section {
        padding-top:    2.5rem;
        padding-bottom: 2.5rem;
    }

    /* ── Header block: stack left column above controls ─────────── */
    .reviews-header {
        flex-direction: column;
        align-items:    flex-start;
        gap:            1.25rem;
        margin-bottom:  1.5rem;
    }

    /* ── Google badge ───────────────────────────────────────────── */
    .reviews-google-badge {
        font-size:     0.6875rem;
        margin-bottom: 0.5rem;
    }

    /* ── Heading ────────────────────────────────────────────────── */
    .reviews-heading {
        font-size:     1.625rem;
        margin-bottom: 0.5rem;
    }

    /* ── Summary row (stars + score + count) ────────────────────── */
    .reviews-summary { gap: 0.5rem; }

    .reviews-stars {
        font-size:      1rem;
        letter-spacing: -0.03em;
    }

    .reviews-score {
        font-size:   1.125rem;
        font-weight: 700;
    }

    .reviews-count { font-size: 0.8125rem; }

    /* ── Controls: span full width; buttons left, link right ─────── */
    .reviews-controls {
        width:           100%;
        justify-content: space-between;
        gap:             0.75rem;
    }

    /* ── Prev / Next buttons: slightly smaller ──────────────────── */
    .reviews-btn {
        width:  2.25rem;
        height: 2.25rem;
    }

    /* ── "Zobraziť" link ────────────────────────────────────────── */
    .reviews-all-link {
        font-size:  0.8125rem;
        white-space: normal;
    }

    /* ── Carousel track: tighter gap ────────────────────────────── */
    .reviews-track { gap: 0.875rem; }

    /* ── Review card ────────────────────────────────────────────── */
    .review-card {
        padding:       1.25rem;
        border-radius: 0.875rem;
    }

    /* ── Card header row ────────────────────────────────────────── */
    .review-card-header {
        gap:           0.625rem;
        margin-bottom: 0.5rem;
    }

    /* ── Avatar circle ──────────────────────────────────────────── */
    .review-avatar {
        width:     2.5rem;
        height:    2.5rem;
        font-size: 0.9375rem;
    }

    /* ── Name & time ────────────────────────────────────────────── */
    .review-name { font-size: 0.875rem; }
    .review-time { font-size: 0.75rem; }

    /* ── Card stars ─────────────────────────────────────────────── */
    .review-card-stars {
        font-size:     0.9375rem;
        margin-bottom: 0.5rem;
    }

    /* ── Review text ────────────────────────────────────────────── */
    .review-text {
        font-size:   0.8125rem;
        line-height: 1.6;
    }
}

@media (max-width: 479px) {

    /* ── Section: even tighter on tiny phones ───────────────────── */
    .reviews-section {
        padding-top:    2rem;
        padding-bottom: 2rem;
    }

    /* ── Heading: fit on one line on smallest screens ───────────── */
    .reviews-heading { font-size: 1.375rem; }

    /* ── Controls: "Zobraziť" link wraps to its own row ─────────── */
    .reviews-controls {
        flex-wrap:       wrap;
        justify-content: flex-start;
        gap:             0.5rem;
    }

    .reviews-all-link {
        width:      100%;
        margin-top: 0.125rem;
        font-size:  0.8125rem;
    }

    /* ── Card: tightest padding ─────────────────────────────────── */
    .review-card { padding: 1rem; }

    /* ── Track: tightest gap ────────────────────────────────────── */
    .reviews-track { gap: 0.75rem; }
}


/* §16 ── Blog ──────────────────────────────────────────────────────────────
   Public blog listing (blog.php) and single post (blog-post.php)
   ------------------------------------------------------------ */

.blog-section {
    padding-top:    3.5rem;
    padding-bottom: 5rem;
    background:     #ffffff;
}

.blog-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap:                   1.5rem;
    margin-bottom:         2.5rem;
}

.blog-card {
    background:    var(--bg-surface);
    border:        1px solid var(--border-card);
    border-radius: var(--radius-lg);
    padding:       var(--space-6);
    display:       flex;
    flex-direction: column;
    gap:           .75rem;
    transition:    box-shadow .2s, border-color .2s;
}

.blog-card:hover {
    box-shadow:   var(--shadow-hover);
    border-color: var(--border-input);  /* slightly darker border on hover */
}

.blog-card-meta {
    display:        flex;
    flex-direction: column;
    gap:            .4375rem;
    font-size:      .8125rem;
    color:          hsl(var(--muted-foreground));
}

/* Horizontal row inside the meta block (badge row / date+author row) */
.blog-meta-row {
    display:     flex;
    align-items: center;
    gap:         .4375rem;
    flex-wrap:   wrap;
}

/* Icon + label pair (calendar + date, person + author) */
.blog-meta-item {
    display:     inline-flex;
    align-items: center;
    gap:         .3125rem;
}
.blog-meta-item svg { flex-shrink: 0; opacity: .5; }

.blog-card-sep { color: rgb(209,213,219); }

.blog-card-title {
    font-size:   1.0625rem;
    font-weight: 700;
    line-height: 1.35;
    margin:      0;
    color:       hsl(var(--foreground));
}

.blog-card-title a {
    color:           inherit;
    text-decoration: none;
    transition:      color .15s;
}

.blog-card-title a:hover { color: hsl(var(--primary)); }

.blog-card-excerpt {
    font-size:   .875rem;
    color:       hsl(var(--muted-foreground));
    line-height: 1.6;
    flex:        1;
    margin:      0;
    display:             -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp:         3;
    -webkit-box-orient: vertical;
    overflow:           hidden;
}

.blog-card-link {
    display:         inline-flex;
    align-items:     center;
    gap:             .375rem;
    font-size:       .875rem;
    font-weight:     600;
    color:           hsl(var(--primary));
    text-decoration: none;
    margin-top:      auto;
    transition:      gap .15s;
}

.blog-card-link:hover { gap: .625rem; }

/* ── Pagination ─────────────────────────────────────── */
.blog-pagination {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             .375rem;
    flex-wrap:       wrap;
    margin-top:      2rem;
}

.blog-pag-btn {
    display:         inline-flex;
    align-items:     center;
    padding:         .4rem .875rem;
    border:          1px solid var(--border-card);
    border-radius:   var(--radius-sm);            /* rounded-lg */
    font-size:       .875rem;
    color:           hsl(var(--foreground));
    text-decoration: none;
    transition:      background .15s, border-color .15s;
    background:      var(--bg-surface);
}

.blog-pag-btn:hover       { background: rgb(249,250,251); border-color: rgb(209,213,219); }
.blog-pag-current         { background: hsl(var(--primary)); border-color: hsl(var(--primary)); color: #ffffff !important; }
.blog-pag-current:hover   { background: hsl(var(--primary)); }
.blog-pag-ellipsis        { border-color: transparent; cursor: default; }

/* ── Single post ────────────────────────────────────── */

.blog-post-section {
    padding-top:    2.5rem;
    padding-bottom: 5rem;
    background:     hsl(var(--background));
}

.blog-post-views {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    font-size: .8125rem;
    color: hsl(var(--muted-foreground));
    margin: .375rem 0 0;
}

/* § 16b. Blog post body — full prose typography
   Tailwind preflight resets list-style, font-weight, text-decoration, etc.
   All prose semantics must be restored explicitly here.
   font-family is set explicitly (not inherited) to survive any TinyMCE
   inline-style override and ensure Plus Jakarta Sans is always used.       */
.blog-post-body {
    font-family: var(--font-jakarta), "Plus Jakarta Sans", sans-serif;
    font-size:   1rem;
    line-height: 1.75;
    color:       hsl(var(--foreground));
}

/* ── First / last child margin reset ── */
.blog-post-body > *:first-child { margin-top:    0; }
.blog-post-body > *:last-child  { margin-bottom: 0; }

/* ── Headings ── */
.blog-post-body h2,
.blog-post-body h3,
.blog-post-body h4 {
    color:       hsl(var(--foreground));
    font-weight: 700;
    line-height: 1.3;
}
.blog-post-body h2 {
    font-size:      1.5rem;
    letter-spacing: -0.015em;
    margin:         2rem 0 .75rem;
}
.blog-post-body h3 {
    font-size:      1.25rem;
    letter-spacing: -0.01em;
    margin:         1.75rem 0 .625rem;
}
.blog-post-body h4 {
    font-size:   1.0625rem;
    font-weight: 600;
    margin:      1.5rem 0 .5rem;
}

/* ── Paragraph ── */
.blog-post-body p { margin: 0 0 1.25rem; }

/* ── Inline emphasis (Tailwind preflight strips these) ── */
.blog-post-body strong,
.blog-post-body b {
    font-weight: 700;
    color:       hsl(var(--foreground));
}
.blog-post-body em,
.blog-post-body i { font-style: italic; }

/* ── Links ── */
.blog-post-body a {
    color:                 hsl(var(--primary));
    text-decoration:       underline;
    text-underline-offset: 3px;
    text-decoration-color: hsl(var(--primary) / .4);
    transition:            text-decoration-color 150ms;
}
.blog-post-body a:hover { text-decoration-color: hsl(var(--primary)); }

/* ── Lists (Tailwind preflight removes list-style-type) ── */
.blog-post-body ul,
.blog-post-body ol {
    margin:       0 0 1.25rem;
    padding-left: 1.5rem;
}
.blog-post-body ul { list-style-type: disc; }
.blog-post-body ol { list-style-type: decimal; }
.blog-post-body li {
    display:       list-item;
    margin-bottom: .375rem;
}
/* Nested lists — tighter indent, alternate markers */
.blog-post-body li > ul {
    list-style-type: circle;
    margin:          .375rem 0 .375rem 1rem;
}
.blog-post-body li > ol {
    list-style-type: lower-alpha;
    margin:          .375rem 0 .375rem 1rem;
}

/* ── Blockquote ── */
.blog-post-body blockquote {
    border-left:   3px solid hsl(var(--primary));
    margin:        1.5rem 0;
    padding:       .75rem 1.25rem;
    background:    hsl(var(--primary) / 0.05);
    border-radius: 0 .5rem .5rem 0;
    font-style:    italic;
    color:         hsl(var(--muted-foreground));
}

/* ── Inline code & code blocks ── */
.blog-post-body code {
    font-family:      ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size:        .875em;
    background:       rgb(243,244,246);
    color:            hsl(var(--foreground));
    padding:          .125em .35em;
    border-radius:    .25rem;
    border:           1px solid rgb(229,231,235);
}
.blog-post-body pre {
    background:    rgb(243,244,246);
    border:        1px solid rgb(229,231,235);
    border-radius: .5rem;
    padding:       1rem 1.25rem;
    margin:        1.5rem 0;
    overflow-x:    auto;
    font-size:     .875rem;
    line-height:   1.6;
}
.blog-post-body pre code {
    background: none;
    border:     none;
    padding:    0;
    font-size:  inherit;
}

/* ── Horizontal rule ── */
.blog-post-body hr {
    border:        none;
    border-top:    1px solid rgb(229,231,235);
    margin:        2rem 0;
}

/* ── Images ── */
.blog-post-body img {
    display:       block;
    height:        auto;
    max-width:     100%;
    border-radius: .75rem;
    margin:        1.5rem 0;
}

/* ── Tables ── */
.blog-post-body table {
    width:           100%;
    border-collapse: collapse;
    margin:          1.5rem 0;
    font-size:       .9rem;
    text-align:      left;
}
.blog-post-body th,
.blog-post-body td {
    padding: .5rem .875rem;
    border:  1px solid rgb(229,231,235);
}
.blog-post-body th { background: rgb(249,250,251); font-weight: 600; }

.blog-post-footer {
    margin-top:   3rem;
    padding-top:  1.5rem;
    border-top:   1px solid rgb(229,231,235);
}

.blog-post-back {
    display:         inline-flex;
    align-items:     center;
    gap:             .5rem;
    font-size:       .875rem;
    font-weight:     600;
    color:           hsl(var(--muted-foreground));
    text-decoration: none;
    transition:      color .15s, gap .15s;
}

.blog-post-back:hover { color: hsl(var(--foreground)); gap: .75rem; }


/* §16b ── Blog — search, filter pills, cover image, category badge ─────────
   Extensions to §16 above — keep in sync with blog-section styles
   ──────────────────────────────────────────────────────────────────────── */

/* ── Toolbar: search + pills row ──────────────────────────────── */
.blog-toolbar {
    margin-bottom: 2rem;
    display:       flex;
    flex-direction: column;
    gap:           1rem;
}

/* ── Search form ───────────────────────────────────────────────── */
.blog-search-form {
    display:     flex;
    align-items: center;
    gap:         .5rem;
}

.blog-search-wrap {
    position:  relative;
    flex:      1;
    max-width: 26rem;
}

.blog-search-icon {
    position:       absolute;
    left:           .875rem;
    top:            50%;
    transform:      translateY(-50%);
    color:          hsl(var(--muted-foreground));
    pointer-events: none;
    display:        flex;
}

.blog-search {
    width:            100%;
    padding:          .6875rem 1rem .6875rem 2.625rem;
    border:           1px solid rgb(209, 213, 219);
    border-radius:    .75rem;
    background:       white;
    font-size:        .875rem;
    color:            hsl(var(--foreground));
    outline:          none;
    transition:       border-color .15s, box-shadow .15s;
    -webkit-appearance: none;
    appearance:       none;
    box-sizing:       border-box;
}

.blog-search:focus {
    border-color: hsl(var(--primary));
    box-shadow:   0 0 0 3px hsl(var(--primary) / .12);
}

.blog-search::placeholder {
    color: hsl(var(--muted-foreground));
}

/* ✕ clear button */
.blog-search-clear {
    display:          inline-flex;
    align-items:      center;
    justify-content:  center;
    width:            1.875rem;
    height:           1.875rem;
    border-radius:    50%;
    background:       rgb(229, 231, 235);
    color:            hsl(var(--muted-foreground));
    font-size:        .75rem;
    line-height:      1;
    text-decoration:  none;
    transition:       background .15s, color .15s;
    flex-shrink:      0;
}

.blog-search-clear:hover {
    background: rgb(209, 213, 219);
    color:      hsl(var(--foreground));
}

/* ── Category filter pills ─────────────────────────────────────── */
.blog-filters {
    display:   flex;
    flex-wrap: wrap;
    gap:       .375rem;
}

.blog-filter {
    display:          inline-flex;
    align-items:      center;
    padding:          .3125rem .875rem;
    border-radius:    9999px;
    border:           1px solid rgb(209, 213, 219);
    background:       white;
    color:            hsl(var(--muted-foreground));
    font-size:        .8125rem;
    font-weight:      500;
    text-decoration:  none;
    white-space:      nowrap;
    transition:       all .15s;
    line-height:      1.5;
}

.blog-filter:hover {
    border-color: hsl(var(--primary));
    color:        hsl(var(--primary));
    background:   hsl(var(--primary) / .04);
    text-decoration: none;
}

.blog-filter.active {
    background:   hsl(var(--primary));
    border-color: hsl(var(--primary));
    color:        white;
}

.blog-filter.active:hover {
    background: hsl(var(--primary) / .9);
}

/* ── Category badge (inline, on cards and post pages) ─────────── */
.blog-cat-badge {
    display:          inline-flex;
    align-items:      center;
    padding:          .15em .6em;
    border-radius:    9999px;
    background:       hsl(var(--primary) / .1);
    color:            hsl(var(--primary));
    font-size:        .75rem;
    font-weight:      600;
    line-height:      1.5;
    text-decoration:  none;
    transition:       background .15s;
    white-space:      nowrap;
}

.blog-cat-badge:hover {
    background: hsl(var(--primary) / .18);
    text-decoration: none;
}

/* Larger variant for post page header */
.blog-cat-badge--lg {
    padding:   .3125rem .875rem;
    font-size: .8125rem;
}

/* ── Cover image on blog cards ─────────────────────────────────── */

/* Cards with cover image need overflow:hidden for border-radius */
.blog-card {
    overflow: hidden; /* allows cover image to fill top flush */
}

.blog-card-cover {
    display:     block;
    margin:      -1.5rem -1.5rem 1rem; /* bleed to card edges */
    aspect-ratio: 16 / 9;
    overflow:    hidden;
    flex-shrink: 0;
    background:  rgb(243, 244, 246);
    text-decoration: none;
}

.blog-card-cover img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
    transition: transform .35s cubic-bezier(.4, 0, .2, 1);
}

.blog-card:hover .blog-card-cover img {
    transform: scale(1.04);
}

/* ── Cover image on blog post page ────────────────────────────── */
.blog-post-cover-wrap {
    background: white;
    padding-top: 1.5rem;
}

.blog-post-cover {
    aspect-ratio: 16 / 7;
    border-radius: .875rem;
    overflow: hidden;
    background: rgb(243, 244, 246);
}

.blog-post-cover img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
}

/* ── Empty state ───────────────────────────────────────────────── */
.blog-empty {
    text-align:  center;
    padding:     4rem 1rem;
    color:       hsl(var(--muted-foreground));
}

.blog-empty p {
    margin-bottom: 1rem;
}

/* ── Mobile adjustments ────────────────────────────────────────── */
@media (max-width: 640px) {
    .blog-search-wrap { max-width: none; }
    .blog-post-cover { aspect-ratio: 16 / 9; }
}

/* §16c ── Featured Blog Section — homepage carousel ─────────────────────────
   Snap-scroll carousel of the latest published blog posts, positioned above
   the Google reviews section on the homepage (index.php).
   Only rendered when ≥1 published post exists.
   ────────────────────────────────────────────────────────────────────────── */

.featured-blog-section {
    padding:    5rem 0 4.5rem;
    background: #ffffff;
    /* No overflow:hidden here — the track is a self-contained scroll container
       (overflow-x:auto) so nothing escapes the viewport; adding overflow:hidden
       interacted badly with the negative-margin approach and clipped the left
       card padding, making the first card flush with the screen edge on mobile. */
}

/* ── Header row: badge + heading (left) · nav arrows + all-link (right) ── */
.fbs-header {
    display:         flex;
    align-items:     flex-end;
    justify-content: space-between;
    flex-wrap:       wrap;
    gap:             1rem;
    margin-bottom:   2.5rem;
}
.fbs-header-left {
    display:        flex;
    flex-direction: column;
    gap:            .75rem;
}
.fbs-badge {
    display:        inline-flex;
    align-items:    center;
    gap:            .4rem;
    font-size:      .7rem;
    font-weight:    700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color:          hsl(var(--primary));
    background:     hsl(var(--primary) / .08);
    border:         1px solid hsl(var(--primary) / .22);
    border-radius:  9999px;
    padding:        .28rem .875rem;
    width:          fit-content;
}
.fbs-badge svg { width: 14px; height: 14px; flex-shrink: 0; }

.fbs-heading {
    font-size:      clamp(1.75rem, 3vw, 2.5rem);
    font-weight:    800;
    letter-spacing: -.035em;
    line-height:    1.15;
    color:          hsl(var(--foreground));
    margin:         0;
}
.fbs-heading span { color: hsl(var(--primary)); }

.fbs-controls {
    display:       flex;
    align-items:   center;
    gap:           .75rem;
    flex-shrink:   0;
    padding-bottom: .25rem; /* visual alignment with heading baseline */
}
.fbs-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:  2.25rem;
    height: 2.25rem;
    border:        1px solid hsl(var(--border));
    border-radius: 50%;
    background:    #fff;
    color:         hsl(var(--foreground));
    cursor:        pointer;
    transition:    background .15s, border-color .15s, color .15s;
    flex-shrink:   0;
}
.fbs-btn:hover          { background: hsl(var(--primary)); border-color: hsl(var(--primary)); color: #fff; }
.fbs-btn:disabled       { opacity: .4; cursor: not-allowed; }
.fbs-btn:disabled:hover { background: #fff; border-color: hsl(var(--border)); color: hsl(var(--foreground)); }

.fbs-all-link {
    display:         inline-flex;
    align-items:     center;
    gap:             .3rem;
    font-size:       .875rem;
    font-weight:     600;
    color:           hsl(var(--primary));
    text-decoration: none;
    white-space:     nowrap;
    transition:      gap .15s;
}
.fbs-all-link:hover { gap: .625rem; }

/* ── Snap-scroll track ─────────────────────────────────────────────────── */
/* Lives inside .page-container which already supplies the left/right padding
   (1.5 rem mobile → 2 rem desktop).  No negative margin needed — cards
   overflow to the right naturally (peek effect), and the track's own
   overflow-x:auto keeps everything within the viewport.                   */
.fbs-track {
    display:                  flex;
    gap:                      1.5rem;
    overflow-x:               auto;
    scroll-snap-type:         x mandatory;
    scroll-behavior:          smooth;
    -webkit-overflow-scrolling: touch;
    touch-action:    pan-x; /* horizontal drags scroll carousel; vertical drags scroll page */
    /* top/bottom padding only — horizontal spacing comes from .page-container */
    padding:         .5rem 0 1.25rem;
    scrollbar-width: none; /* Firefox */
}
.fbs-track::-webkit-scrollbar { display: none; }

/* ── Card ──────────────────────────────────────────────────────────────── */
.fbs-card {
    flex-shrink:     0;
    width:           290px;
    border:          1px solid var(--border-card, rgb(229,231,235));
    border-radius:   1rem;
    overflow:        hidden;
    background:      #fff;
    scroll-snap-align: start;
    display:         flex;
    flex-direction:  column;
    text-decoration: none;
    color:           inherit;
    transition:      box-shadow .2s, transform .2s;
}
.fbs-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,.09); transform: translateY(-2px); }

@media (min-width: 768px)  { .fbs-card { width: 300px; } }
@media (min-width: 1024px) { .fbs-card { width: 320px; } }

.fbs-card-img-wrap {
    width:      100%;
    height:     200px;
    overflow:   hidden;
    flex-shrink: 0;
}
.fbs-card-img {
    width:            100%;
    height:           100%;
    object-fit:       cover;
    object-position:  center;
    display:          block;
    transition:       transform .35s cubic-bezier(.25,.46,.45,.94);
}
.fbs-card:hover .fbs-card-img { transform: scale(1.05); }

/* Gradient placeholder for posts without a cover image */
.fbs-card-noimg {
    width:       100%;
    height:      100%;
    background:  linear-gradient(135deg,
                     hsl(var(--primary) / .1) 0%,
                     hsl(var(--primary) / .04) 100%);
    display:     flex;
    align-items: center;
    justify-content: center;
    color:       hsl(var(--primary) / .3);
}
.fbs-card-noimg svg { width: 2.5rem; height: 2.5rem; }

.fbs-card-body {
    padding:        1.125rem 1.25rem 1.375rem;
    display:        flex;
    flex-direction: column;
    flex:           1;
}
.fbs-card-meta {
    display:        flex;
    align-items:    center;
    gap:            .5rem;
    flex-wrap:      wrap;
    margin-bottom:  .75rem;
}
.fbs-card-cat {
    font-size:      .68rem;
    font-weight:    700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color:          hsl(var(--primary));
    background:     hsl(var(--primary) / .1);
    border-radius:  9999px;
    padding:        .2rem .6rem;
    white-space:    nowrap;
}
.fbs-card-date {
    font-size:   .8rem;
    color:       hsl(var(--muted-foreground));
    display:     inline-flex;
    align-items: center;
    gap:         .3rem;
    flex-shrink: 0;
}
.fbs-card-title {
    font-size:   1rem;
    font-weight: 700;
    line-height: 1.4;
    color:       hsl(var(--foreground));
    margin-bottom: .5rem;
    display:           -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp:         2;
    overflow:           hidden;
}
.fbs-card-excerpt {
    font-size:   .875rem;
    line-height: 1.6;
    color:       hsl(var(--muted-foreground));
    flex:        1;
    display:           -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp:         3;
    overflow:           hidden;
    margin-bottom: 1rem;
}
.fbs-card-readmore {
    display:         inline-flex;
    align-items:     center;
    gap:             .375rem;
    font-size:       .875rem;
    font-weight:     600;
    color:           hsl(var(--primary));
    text-decoration: none;
    margin-top:      auto;
    transition:      gap .15s;
}
.fbs-card-readmore:hover { gap: .625rem; }

/* §17 ── Kontakt ────────────────────────────────────────────────────────────
 * Replaces: grid md:grid-cols-2 gap-12 lg:gap-20 items-start
 * ────────────────────────────────────────────────────────────────────────── */

.contact-grid {
    display:     grid;
    gap:         2rem;    /* gap-12 */
    align-items: start;   /* items-start */
}

@media (min-width: 768px) {  /* md: */
    .contact-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)); /* grid-cols-2 */
    }
}

@media (min-width: 1024px) { /* lg: */
    .contact-grid {
        gap: 5rem; /* lg:gap-20 */
    }
}

/*
 * Stacked list of contact info tiles (email, phone, address, hours).
 * Pure layout wrapper — tiles carry their own background/border.
 * Replaces: flex flex-col gap-3
 */
.contact-tiles {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-3);   /* gap-3 — 0.75 rem */
}


/*
 * Icon wrapper inside each contact info tile.
 * Replaces: w-12 h-12 rounded-xl bg-primary/10 flex items-center
 *           justify-center shrink-0 group-hover:bg-primary/15 transition-colors
 */
.contact-tile-icon {
    width:            3rem;                          /* w-12 */
    height:           3rem;                          /* h-12 */
    border-radius:    var(--radius-md);              /* rounded-xl */
    background-color: hsl(var(--primary) / 0.10);
    display:          flex;
    align-items:      center;
    justify-content:  center;
    flex-shrink:      0;
    transition:       background-color 0.15s;
}

/* group-hover:bg-primary/15 — fires when the parent <a> tile is hovered */
a:hover .contact-tile-icon {
    background-color: hsl(var(--primary) / 0.15);
}

/*
 * Individual contact info tile (email, phone, address, hours).
 * Replaces: flex items-center gap-4 p-5 rounded-2xl bg-white border
 *           border-gray-100 hover:border-primary/30 hover:shadow-sm transition-all group
 */
.contact-tile {
    display:          flex;
    align-items:      center;
    gap:              var(--space-4);             /* gap-4 — 1 rem          */
    padding:          1.25rem;                    /* p-5                    */
    border-radius:    var(--radius-lg);           /* rounded-2xl — 1 rem    */
    background-color: var(--bg-card);                /* gray-50 — theme token  */
    border:           1px solid var(--border-card); /* unified gray-200     */
    transition:       all 0.15s;
    text-decoration:  none;
    color:            inherit;
}

.contact-tile:hover {
    border-color: hsl(var(--primary) / 0.30);
    box-shadow:   var(--shadow-card);             /* subtle elevation on hover */
}

/*
 * Generic white card used for form containers and info panels.
 * Replaces: bg-white rounded-2xl border border-gray-200 p-8 shadow-sm
 * Apply to the right-column contact form card and similar containers.
 */
.form-card {
    background-color: var(--bg-card);
    border-radius:    var(--radius-lg);
    border:           1px solid var(--border-card);
    padding:          var(--space-8);
    box-shadow:       var(--shadow-card);
}

/* ------------------------------------------------------------
   13. FAQ page — search · filter pills · accordion
   ------------------------------------------------------------ */

/* Section background */
.faq-section {
    background-color: #fff;
    padding-top:      3rem;
    padding-bottom:   5rem;
}

/* ── Search bar ─────────────────────────────────────────────── */

.faq-search-wrap {
    position:      relative;
    max-width:     28rem;
    margin-bottom: 1.5rem;
}

.faq-search-icon {
    position:       absolute;
    left:           0.875rem;
    top:            50%;
    transform:      translateY(-50%);
    color:          hsl(var(--muted-foreground));
    pointer-events: none;
}

.faq-search {
    width:            100%;
    padding:          0.75rem 1rem 0.75rem 2.75rem;
    border:           1px solid rgb(209, 213, 219); /* gray-300 */
    border-radius:    0.75rem;
    background-color: white;
    font-size:        0.875rem;
    color:            hsl(var(--foreground));
    outline:          none;
    transition:       border-color 0.15s, box-shadow 0.15s;
    -webkit-appearance: none;
    appearance:       none;
    box-sizing:       border-box;
}

.faq-search:focus {
    border-color: hsl(var(--primary));
    box-shadow:   0 0 0 3px hsl(var(--primary) / 0.12);
}

.faq-search::placeholder {
    color: hsl(var(--muted-foreground));
}

/* ── Filter pills ───────────────────────────────────────────── */

.faq-filters {
    display:       flex;
    flex-wrap:     wrap;
    gap:           0.5rem;
    margin-bottom: 2rem;
}

.faq-filter {
    padding:          0.375rem 1rem;
    border-radius:    9999px;
    border:           1px solid rgb(209, 213, 219);
    background-color: white;
    color:            hsl(var(--muted-foreground));
    font-size:        0.8125rem;
    font-weight:      500;
    cursor:           pointer;
    transition:       all 0.15s;
    line-height:      1.5;
}

.faq-filter:hover {
    border-color: hsl(var(--primary));
    color:        hsl(var(--primary));
    background:   hsl(var(--primary) / 0.04);
}

.faq-filter.active {
    background-color: hsl(var(--primary));
    border-color:     hsl(var(--primary));
    color:            white;
}

/* ── Accordion list ─────────────────────────────────────────── */

.faq-list {
    display:        flex;
    flex-direction: column;
    gap:            0.5rem;
}

/* Individual item card */
.faq-item {
    background-color: var(--bg-card);
    border:           1px solid var(--border-card);
    border-radius:    var(--radius-lg);             /* unified with blog-card, product-card */
    overflow:         hidden;
    transition:       box-shadow 0.15s, border-color 0.15s;
}

.faq-item:hover {
    box-shadow: var(--shadow-hover);
}

.faq-item.open {
    border-color: hsl(var(--primary) / 0.35);
    box-shadow:   0 2px 14px hsl(var(--primary) / 0.09);
}

/* Question button row */
.faq-question {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    width:           100%;
    padding:         1.125rem 1.5rem;
    background:      none;
    border:          none;
    cursor:          pointer;
    text-align:      left;
    gap:             1rem;
    color:           hsl(var(--foreground));
    font-size:       0.875rem;
    font-weight:     500;
    line-height:     1.4;
    transition:      color 0.15s;
}

.faq-item.open .faq-question {
    color: hsl(var(--primary));
}

/* Rotating chevron */
.faq-chevron {
    flex-shrink: 0;
    width:       1.125rem;
    height:      1.125rem;
    color:       hsl(var(--muted-foreground));
    transition:  transform 0.25s cubic-bezier(.4, 0, .2, 1), color 0.15s;
}

.faq-item.open .faq-chevron {
    transform: rotate(180deg);
    color:     hsl(var(--primary));
}

/* Collapsible answer panel */
.faq-answer {
    max-height: 0;
    overflow:   hidden;
    transition: max-height 0.32s cubic-bezier(.4, 0, .2, 1);
}

.faq-item.open .faq-answer {
    max-height: 600px;
}

.faq-answer-inner {
    padding:     0 1.5rem 1.25rem;
    color:       hsl(var(--muted-foreground));
    font-size:   0.8125rem;
    line-height: 1.65;
    border-top:  1px solid rgb(243, 244, 246);
    padding-top: 1rem;
}

.faq-answer-inner strong {
    font-weight: 600;
    color:       hsl(var(--foreground));
}

/* Empty state */
.faq-empty {
    text-align:  center;
    padding:     3rem 1rem;
    color:       hsl(var(--muted-foreground));
    font-size:   0.875rem;
    line-height: 1.6;
}


/* §18 ── Chatbot widget ─────────────────────────────────────────────────────
   Floating navigation assistant — bottom-right corner, rule-based responses.
   HTML lives in footer.php; JS is inline in footer.php.
   ─────────────────────────────────────────────────────────────────────────── */

/* ── Toggle button ─────────────────────────────────────────────── */
#chat-btn {
    position:        fixed;
    bottom:          1.5rem;
    right:           1.5rem;
    z-index:         195;
    width:           3.5rem;
    height:          3.5rem;
    border-radius:   50%;
    background:      hsl(var(--primary));
    color:           white;
    border:          none;
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    box-shadow:      0 4px 20px hsl(var(--primary) / 0.42);
    transition:      transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
                     box-shadow 0.2s;
    -webkit-tap-highlight-color: transparent;
}

#chat-btn:hover {
    transform:  scale(1.1);
    box-shadow: 0 6px 28px hsl(var(--primary) / 0.52);
}

/* ── Chat panel ────────────────────────────────────────────────── */
#chat-window {
    position:       fixed;
    bottom:         calc(3.5rem + 1.5rem + 0.875rem); /* above button + gap */
    right:          1.5rem;
    z-index:        195;
    width:          22rem;          /* 352 px */
    max-height:     34rem;
    border-radius:  1rem;
    background:     white;
    border:         1px solid rgb(229, 231, 235);
    box-shadow:     0 8px 40px rgba(0, 0, 0, 0.14),
                    0 2px 8px rgba(0, 0, 0, 0.06);
    display:        flex;
    flex-direction: column;
    overflow:       hidden;
    /* Slide-up + scale spring animation */
    transform-origin: bottom right;
    transform:      scale(0.9) translateY(12px);
    opacity:        0;
    pointer-events: none;
    transition:     transform 0.26s cubic-bezier(0.34, 1.56, 0.64, 1),
                    opacity   0.18s;
}

#chat-window.open {
    transform:      scale(1) translateY(0);
    opacity:        1;
    pointer-events: auto;
}

/* ── Panel header ──────────────────────────────────────────────── */
#chat-header {
    background:      hsl(var(--primary));
    color:           white;
    padding:         0.875rem 1rem;
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    flex-shrink:     0;
    gap:             0.75rem;
}

.chat-hdr-info {
    display:     flex;
    align-items: center;
    gap:         0.625rem;
}

.chat-hdr-avatar {
    width:           2.125rem;
    height:          2.125rem;
    border-radius:   50%;
    background:      rgba(255, 255, 255, 0.2);
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
}

.chat-hdr-name {
    font-weight: 700;
    font-size:   0.9375rem;
    line-height: 1.2;
}

.chat-hdr-sub {
    font-size:  0.6875rem;
    opacity:    0.78;
    margin-top: 0.1em;
}

.chat-hdr-actions {
    display:     flex;
    align-items: center;
    gap:         0.375rem;
    flex-shrink: 0;
}

.chat-hdr-btn {
    width:           1.875rem;
    height:          1.875rem;
    border-radius:   50%;
    background:      rgba(255, 255, 255, 0.18);
    color:           white;
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    text-decoration: none;
    transition:      background 0.15s;
    flex-shrink:     0;
}

.chat-hdr-btn:hover { background: rgba(255, 255, 255, 0.32); }

/* ── Messages area ─────────────────────────────────────────────── */
#chat-messages {
    flex:             1;
    overflow-y:       auto;
    padding:          1rem;
    display:          flex;
    flex-direction:   column;
    gap:              0.625rem;
    scroll-behavior:  smooth;
    overscroll-behavior: contain;
}

/* Message bubble */
.chat-msg {
    max-width:    85%;
    padding:      0.5625rem 0.875rem;
    border-radius: 1rem;
    font-size:    0.875rem;
    line-height:  1.55;
    word-break:   break-word;
}

.chat-msg-bot {
    align-self:              flex-start;
    background:              rgb(243, 244, 246);
    color:                   hsl(var(--foreground));
    border-bottom-left-radius: 0.25rem;
}

.chat-msg-user {
    align-self:               flex-end;
    background:               hsl(var(--primary));
    color:                    white;
    border-bottom-right-radius: 0.25rem;
}

/* Link buttons inside bot messages */
.chat-links {
    display:       flex;
    flex-direction: column;
    gap:           0.375rem;
    margin-top:    0.625rem;
}

.chat-link {
    display:         inline-flex;
    align-items:     center;
    padding:         0.375rem 0.875rem;
    background:      white;
    border:          1px solid hsl(var(--primary) / 0.3);
    border-radius:   0.5rem;
    color:           hsl(var(--primary));
    font-size:       0.8125rem;
    font-weight:     600;
    text-decoration: none;
    transition:      background 0.15s, border-color 0.15s;
    line-height:     1.4;
}

.chat-link:hover {
    background:      hsl(var(--primary) / 0.07);
    border-color:    hsl(var(--primary));
    text-decoration: none;
}

/* ── Typing indicator ──────────────────────────────────────────── */
.chat-typing {
    display:     flex;
    align-items: center;
    gap:         0.3125rem;
    padding:     0.75rem 1rem !important;
    min-width:   3.5rem;
}

.chat-typing span {
    display:       block;
    width:         0.375rem;
    height:        0.375rem;
    border-radius: 50%;
    background:    hsl(var(--muted-foreground));
    animation:     chat-dot 1.2s ease-in-out infinite;
    opacity:       0.5;
}

.chat-typing span:nth-child(2) { animation-delay: 0.18s; }
.chat-typing span:nth-child(3) { animation-delay: 0.36s; }

@keyframes chat-dot {
    0%, 60%, 100% { transform: translateY(0);     opacity: 0.4; }
    30%           { transform: translateY(-5px);   opacity: 1; }
}

/* ── Quick chips ───────────────────────────────────────────────── */
#chat-chips {
    padding:        0.5rem 0.75rem 0.625rem;
    display:        flex;
    flex-wrap:      wrap;
    gap:            0.375rem;
    border-top:     1px solid rgb(243, 244, 246);
    flex-shrink:    0;
    background:     rgb(250, 250, 250);
}

#chat-chips:empty { display: none; }

.chat-chip {
    padding:       0.3rem 0.75rem;
    border-radius: 9999px;
    border:        1px solid rgb(209, 213, 219);
    background:    white;
    font-size:     0.8rem;
    font-weight:   500;
    color:         hsl(var(--foreground));
    cursor:        pointer;
    transition:    all 0.15s;
    white-space:   nowrap;
    font-family:   inherit;
    line-height:   1.5;
}

.chat-chip:hover {
    border-color: hsl(var(--primary));
    color:        hsl(var(--primary));
    background:   hsl(var(--primary) / 0.05);
}

/* ── Input row ─────────────────────────────────────────────────── */
#chat-input-row {
    display:     flex;
    gap:         0.5rem;
    padding:     0.625rem 0.75rem;
    border-top:  1px solid rgb(229, 231, 235);
    flex-shrink: 0;
    background:  white;
}

#chat-input {
    flex:        1;
    padding:     0.5rem 0.875rem;
    border:      1px solid rgb(209, 213, 219);
    border-radius: 0.625rem;
    font-size:   0.875rem;
    color:       hsl(var(--foreground));
    outline:     none;
    transition:  border-color 0.15s, box-shadow 0.15s;
    font-family: inherit;
    -webkit-appearance: none;
    appearance:  none;
    background:  white;
}

#chat-input:focus {
    border-color: hsl(var(--primary));
    box-shadow:   0 0 0 3px hsl(var(--primary) / 0.1);
}

#chat-input::placeholder { color: hsl(var(--muted-foreground)); }

#chat-send {
    width:           2.25rem;
    height:          2.25rem;
    border-radius:   0.625rem;
    background:      hsl(var(--primary));
    color:           white;
    border:          none;
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
    transition:      background 0.15s, transform 0.1s;
}

#chat-send:hover  { background: hsl(var(--primary) / 0.88); }
#chat-send:active { transform: scale(0.92); }

/* ── Mobile adjustments ────────────────────────────────────────── */
@media (max-width: 480px) {
    #chat-btn    { right: 1rem; bottom: 1rem; }
    #chat-window {
        width:  calc(100vw - 2rem);
        right:  1rem;
        bottom: calc(3.5rem + 1rem + 0.875rem);
        max-height: 75dvh;
    }
}

/* ── Tablet / small-desktop: raise button 20 px higher ────────── */
@media (min-width: 640px) and (max-width: 1279px) {
    #chat-btn { bottom: calc(1.5rem + 20px); }
}


/* ------------------------------------------------------------
   19. Accessibility utilities
   ------------------------------------------------------------ */

/* Screen-reader-only text — visually hidden but accessible */
.sr-only {
    position:   absolute;
    width:      1px;
    height:     1px;
    padding:    0;
    margin:     -1px;
    overflow:   hidden;
    clip:       rect(0, 0, 0, 0);
    white-space: nowrap;
    border:     0;
}


/* ------------------------------------------------------------
   20. Sonner toast notification styles (moved from inline <style>)
   ------------------------------------------------------------ */

[data-sonner-toast]:focus-visible {
    box-shadow: 0 4px 12px rgba(0,0,0,.1), 0 0 0 2px rgba(0,0,0,.2);
}
[data-sonner-toast][data-styled=true] [data-button]:focus-visible {
    box-shadow: 0 0 0 2px rgba(0,0,0,.4);
}
[data-sonner-toast][data-styled=true] [data-close-button]:focus-visible {
    box-shadow: 0 4px 12px rgba(0,0,0,.1), 0 0 0 2px rgba(0,0,0,.2);
}
[data-sonner-toast][data-styled=true]:hover [data-close-button]:hover {
    background: var(--gray2);
    border-color: var(--gray5);
}
[data-sonner-toast][data-swiping=true]::before {
    content: "";
    position: absolute;
    left: -100%;
    right: -100%;
    height: 100%;
    z-index: -1;
}
[data-sonner-toast][data-y-position=top][data-swiping=true]::before {
    bottom: 50%;
    transform: scaleY(3) translateY(50%);
}
[data-sonner-toast][data-y-position=bottom][data-swiping=true]::before {
    top: 50%;
    transform: scaleY(3) translateY(-50%);
}
[data-sonner-toast][data-swiping=false][data-removed=true]::before {
    content: "";
    position: absolute;
    inset: 0;
    transform: scaleY(2);
}
[data-sonner-toast][data-expanded=true]::after {
    content: "";
    position: absolute;
    left: 0;
    height: calc(var(--gap) + 1px);
    bottom: 100%;
    width: 100%;
}
[data-sonner-toast][data-removed=true][data-front=false]::before {
    height: calc(var(--initial-height) + 20%);
}
[data-sonner-toaster][data-sonner-theme=dark] [data-sonner-toast] [data-close-button]:hover {
    background: var(--normal-bg-hover);
    border-color: var(--normal-border-hover);
}

@keyframes swipe-out-left {
    from { transform: var(--y) translateX(var(--swipe-amount-x)); opacity: 1; }
    to   { transform: var(--y) translateX(calc(var(--swipe-amount-x) - 100%)); opacity: 0; }
}
@keyframes swipe-out-right {
    from { transform: var(--y) translateX(var(--swipe-amount-x)); opacity: 1; }
    to   { transform: var(--y) translateX(calc(var(--swipe-amount-x) + 100%)); opacity: 0; }
}
@keyframes swipe-out-up {
    from { transform: var(--y) translateY(var(--swipe-amount-y)); opacity: 1; }
    to   { transform: var(--y) translateY(calc(var(--swipe-amount-y) - 100%)); opacity: 0; }
}
@keyframes swipe-out-down {
    from { transform: var(--y) translateY(var(--swipe-amount-y)); opacity: 1; }
    to   { transform: var(--y) translateY(calc(var(--swipe-amount-y) + 100%)); opacity: 0; }
}
@keyframes sonner-fade-in {
    0%   { opacity: 0; transform: scale(.8); }
    100% { opacity: 1; transform: scale(1); }
}
@keyframes sonner-fade-out {
    0%   { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(.8); }
}
@keyframes sonner-spin {
    0%   { opacity: 1; }
    100% { opacity: .15; }
}

/* sf-hidden utility (moved from inline <style>) */
.sf-hidden { display: none !important; }


/* ============================================================
   §21 — Sprint #1: Micro-interactions
   micro-interactions.js drives the JS side; CSS lives here.
   All animation blocks are paired with a
   @media (prefers-reduced-motion: reduce) disable rule.
   ============================================================ */


/* ── 1. FLOATING LABELS ──────────────────────────────────────────────
   .pi-float-group wraps <label> + <input|textarea>.
   Label is absolute-positioned and animates from inside the field
   (default) to above the top border (focused / has-value state).
   ──────────────────────────────────────────────────────────────────── */

.pi-float-group {
    position: relative;
    /* spacing provided by the outer .mb-5 / .mb-6 wrapper */
}

/* Label — sits inside the field by default */
.pi-float-group label {
    position:       absolute;
    left:           1rem;
    top:            50%;
    transform:      translateY(-50%);
    font-size:      0.875rem;
    font-weight:    500;
    color:          hsl(var(--muted-foreground));
    pointer-events: none;
    background:     #ffffff;
    padding:        0 0.25rem;
    line-height:    1.2;
    margin:         0;
    z-index:        1;
    white-space:    nowrap;
    max-width:      calc(100% - 3.5rem);
    overflow:       hidden;
    text-overflow:  ellipsis;
    /* Transition: 200ms, exact cubic-bezier as specified */
    transition:     top      200ms cubic-bezier(0.4, 0, 0.2, 1),
                    transform 200ms cubic-bezier(0.4, 0, 0.2, 1),
                    font-size 200ms cubic-bezier(0.4, 0, 0.2, 1),
                    color     200ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Textarea: label anchored to top, not vertically centred */
.pi-float-group.is-textarea label {
    top:       0.9375rem;
    transform: none;
}

/* ── Floated state: focused OR has a value ── */
.pi-float-group.fl-active label,
.pi-float-group.fl-filled label {
    top:       0;
    transform: translateY(-50%) scale(0.85);
    color:     hsl(var(--primary));
    font-weight: 600;
}

.pi-float-group.is-textarea.fl-active label,
.pi-float-group.is-textarea.fl-filled label {
    top:       0;
    transform: translateY(-50%);
    font-size: 0.75rem;
    color:     hsl(var(--primary));
    font-weight: 600;
}

/* ── Input / textarea padding adjustment ── */
/* Adds top room for the floating label; total vertical padding unchanged */
.pi-float-group input,
.pi-float-group textarea {
    padding-top:    1.25rem !important;
    padding-bottom: 0.25rem !important;
    padding-right:  2.5rem  !important; /* room for the valid-icon */
}

/* ── Hide placeholder until field is focused (label acts as placeholder) ── */
.pi-float-group input::placeholder,
.pi-float-group textarea::placeholder {
    opacity:    0;
    transition: opacity 150ms ease;
}
.pi-float-group.fl-active input::placeholder,
.pi-float-group.fl-active textarea::placeholder {
    opacity: 0.55;
}

/* ── Validation colour overrides for the label ── */
.pi-float-group.field-invalid.fl-active label,
.pi-float-group.field-invalid.fl-filled label {
    color: #ef4444;
}
.pi-float-group.field-valid.fl-active label,
.pi-float-group.field-valid.fl-filled label {
    color: #22c55e;
}

/* Reduced motion: instant label position (no animation) */
@media (prefers-reduced-motion: reduce) {
    .pi-float-group label {
        transition: none;
    }
    .pi-float-group input::placeholder,
    .pi-float-group textarea::placeholder {
        transition: none;
    }
}


/* ── 2. INLINE VALIDATION ────────────────────────────────────────────
   Green checkmark icon and red error message injected by JS.
   ──────────────────────────────────────────────────────────────────── */

/* Checkmark icon — hidden by default, spring-scales in on valid */
.pi-valid-icon {
    position:       absolute;
    right:          0.75rem;
    top:            50%;
    transform:      translateY(-50%) scale(0);
    opacity:        0;
    color:          #22c55e;
    pointer-events: none;
    display:        flex;
    align-items:    center;
    transition:     transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1),
                    opacity   150ms ease;
}

/* Textarea: pin to top instead of vertically centred */
.pi-float-group.is-textarea .pi-valid-icon {
    top:       1.375rem;
    transform: translateY(0) scale(0);
}

/* Visible state */
.pi-float-group.field-valid .pi-valid-icon {
    transform: translateY(-50%) scale(1);
    opacity:   1;
}
.pi-float-group.is-textarea.field-valid .pi-valid-icon {
    transform: translateY(0) scale(1);
    opacity:   1;
}

/* Error message paragraph */
.pi-field-error {
    font-size:   0.75rem;
    color:       #ef4444;
    margin-top:  0.3125rem;
    line-height: 1.4;
    /* display:none set inline by JS; listed here for documentation */
}

/* Shake animation — fired by JS adding .pi-shake for 320ms */
@keyframes pi-shake {
    0%,100% { transform: translateX(0);    }
    20%     { transform: translateX(-6px); }
    40%     { transform: translateX( 6px); }
    60%     { transform: translateX(-4px); }
    80%     { transform: translateX( 4px); }
}
.pi-shake {
    animation: pi-shake 300ms cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

@media (prefers-reduced-motion: reduce) {
    .pi-valid-icon { transition: none; }
    .pi-shake      { animation:  none; }
}


/* ── 3. INSURANCE CARD HOVER LIFT + CTA BUTTON PRESS ────────────────
   .pi-product-card — lift + deeper shadow on hover (300ms)
   .pi-cta-btn      — scale(0.97) on active/press (100ms)
   ──────────────────────────────────────────────────────────────────── */

.pi-product-card {
    transition: transform   300ms cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow  300ms cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

.pi-product-card:hover {
    transform:  translateY(-4px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .12),
                0  4px 12px rgba(0, 0, 0, .07);
}

/* CTA button press */
.pi-cta-btn:active,
.pi-cta-btn.pi-btn-pressing {
    transform:  scale(0.97);
    transition: transform 100ms ease;
}

@media (prefers-reduced-motion: reduce) {
    .pi-product-card           { transition: none; will-change: auto; }
    .pi-product-card:hover     { transform: none; box-shadow: none; }
    .pi-cta-btn:active,
    .pi-cta-btn.pi-btn-pressing { transform: none; }
}


/* ── 4. SKELETON SCREEN ──────────────────────────────────────────────
   Overlay on #poistenieonline during calculator tab switches.
   Shimmer moves left → right continuously.
   ──────────────────────────────────────────────────────────────────── */

@keyframes pi-shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position:  200% 0; }
}

.pi-skel-overlay {
    position:        absolute;
    inset:           0;
    z-index:         5;
    background:      rgb(20, 27, 38); /* matches surrounding bg-gray-900 */
    display:         flex;
    align-items:     center;
    justify-content: center;
    /* Hidden by default */
    opacity:         0;
    pointer-events:  none;
    transition:      opacity 180ms ease;
}

.pi-skel-overlay.pi-skel-visible {
    opacity:        1;
    pointer-events: auto;
}

.pi-skel-content {
    display:        flex;
    flex-direction: column;
    gap:            0.875rem;
    width:          72%;
    max-width:      520px;
}

.pi-skel-line {
    border-radius: 0.375rem;
    background:    linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.07)  0%,
        rgba(255, 255, 255, 0.16) 50%,
        rgba(255, 255, 255, 0.07) 100%
    );
    background-size: 200% 100%;
    animation: pi-shimmer 1.5s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .pi-skel-line {
        animation:  none;
        background: rgba(255, 255, 255, 0.09);
    }
    .pi-skel-overlay { transition: none; }
}


/* ── 5. PROGRESS BAR — calculator tab indicator ─────────────────────
   Thin 3px bar below the tab strip; width animates (400ms ease-out)
   from the first tab (1/6 ≈ 17%) to the last (6/6 = 100%).
   ──────────────────────────────────────────────────────────────────── */

.pi-progress-wrap {
    height:        3px;
    background:    rgba(255, 255, 255, 0.08);
    border-radius: 9999px;
    overflow:      hidden;
    margin-bottom: 0;
}

.pi-progress-bar {
    height:        100%;
    background:    hsl(var(--primary));
    border-radius: 9999px;
    transition:    width 400ms cubic-bezier(0.33, 1, 0.68, 1);
    width:         0%;
}

@media (prefers-reduced-motion: reduce) {
    .pi-progress-bar { transition: none; }
}