/* ===== GLOBALNE RESET I BOX-SIZING ===== */
/* KRYTYCZNE: Globalne box-sizing zapobiega przekraczaniu viewport */
*, *::before, *::after {
    box-sizing: border-box;
}

/* ===== ZMIENNE KOLORYSTYCZNE ===== */
/* Definicje zmiennych CSS dla całej strony - centralne zarządzanie kolorami, cieniami, przejściami */
/* Ułatwia utrzymanie spójności designu i szybkie zmiany kolorów */
:root {
    --primary: #064F3D; /* Główny kolor (dokładny teal z logo) */
    --primary-dark: #0B1A17; /* Ciemniejsza wersja głównego koloru (dokładny ciemny z logo) */
    --primary-light: #3a9b85; /* Jaśniejsza wersja głównego koloru */
    --secondary: #ffffff; /* Kolor uzupełniający (biały) */
    --secondary-light: #f8f9fa; /* Jaśniejsza wersja drugiego koloru */
    --accent: #f8f9fa; /* Kolor akcentujący (jasny szary) */
    --accent-dark: #e9ecef; /* Ciemniejszy akcent */
    --text-dark: #0B1A17; /* Kolor tekstu ciemny (ciemny z logo) */
    --text-light: #ffffff; /* Kolor tekstu jasny */
    --text-muted: #4a5568; /* Przygaszony tekst - lepszy kontrast */
    --text-accent: #2d3748; /* Akcent tekstu - dodatkowy kontrast */
    --gray-light: #f8f9fa; /* Bardzo jasny szary */
    --gray: #e9ecef; /* Szary */
    --gray-dark: #495057; /* Ciemny szary */
    --success: #267764; /* Kolor sukcesu */
    --warning: #ffc107; /* Kolor ostrzeżenia */
    --danger: #dc3545; /* Kolor błędu */
    --info: #17a2b8; /* Kolor informacji */
    --shadow: rgba(0, 0, 0, 0.1); /* Cień */
    --shadow-hover: rgba(0, 0, 0, 0.15); /* Cień przy hover */
    --border-radius: 0.5rem; /* 8px - Promień zaokrąglenia */
    --border-radius-lg: 0.75rem; /* 12px - Duży promień zaokrąglenia */
    --transition: all 0.3s ease; /* Przejście */
    --gradient-primary: linear-gradient(135deg, #064F3D 0%, #1a3d35 100%);
    --gradient-secondary: linear-gradient(135deg, #1a3d35 0%, #2d4a42 100%);
    --gradient-black: linear-gradient(180deg, #0B1A17 0%, #1a2f2a 100%);
}

/* Utility classes */
.hidden {
    display: none !important;
}

/* ===== PODSTAWOWE STYLE ===== */
/* Główne style dla całej strony - czcionka, tło, podstawowe ustawienia */
body {
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', Arial, sans-serif;
    background: #fafbfc;
    color: var(--text-dark);
    line-height: 1.6;
    font-size: clamp(1rem, 2.5vw, 1.0625rem); /* 16px - 17px - minimum 16px aby uniknąć auto-zoom na iOS */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: hidden; /* Zapobiega poziomej przewijance - KRYTYCZNE */
    font-weight: 400;
    width: 100%;
    max-width: 100vw; /* ZAPOBIEGA WYJŚCIU POZA VIEWPORT */
    position: relative;
    box-sizing: border-box;
}

/* ===== RESPONSIVE IMAGES - Globalne style ===== */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Lazy loading - obrazy są widoczne od razu, animacja przy załadowaniu */
img[loading="lazy"] {
    opacity: 1; /* Widoczne od razu - jeśli skrypt nie działa, obrazy i tak będą widoczne */
    transition: opacity 0.3s ease;
}

img[loading="lazy"].loaded {
    opacity: 1;
}

/* Smooth scrolling - płynne przewijanie strony */
html {
    scroll-behavior: smooth;
    overflow-x: hidden; /* Zapobiega poziomemu scrollowaniu - KRYTYCZNE dla mobile */
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Skip link dla dostępności */
.skip-link {
    position: absolute;
    top: clamp(-2.5rem, -6vw, -2.5rem); /* -40px */
    left: clamp(0.375rem, 2vw, 0.375rem);
    background: var(--primary);
    color: white;
    padding: clamp(0.5rem, 2vw, 0.5rem);
    text-decoration: none;
    border-radius: clamp(0.25rem, 1vw, 0.25rem);
    z-index: 1000;
    transition: top var(--transition-base);
}

.skip-link:focus {
    top: clamp(0.375rem, 2vw, 0.375rem);
}

/* ===== ANIMACJE SCROLL REVEAL ===== */
/* Fade-in animacje - zoptymalizowane dla wydajności */
.fade-in {
    opacity: 0;
    transform: translateY(clamp(1.875rem, 4vw, 1.875rem)); /* 30px */
    transition: opacity 0.6s ease, transform 0.6s ease;
    will-change: opacity, transform;
    /* Zapewnia komponowanie animacji - lepsza wydajność */
    backface-visibility: hidden;
    perspective: 1000px;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Slide-in z lewej - zoptymalizowane */
.slide-in-left {
    opacity: 0;
    transform: translateX(clamp(-3.125rem, -8vw, -3.125rem)); /* -50px */
    transition: opacity 0.6s ease, transform 0.6s ease;
    will-change: opacity, transform;
}

.slide-in-left.visible {
    opacity: 1;
    transform: translateX(0);
}

/* Scale-in dla kart - zoptymalizowane */
.scale-in {
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.6s ease, transform 0.6s ease;
    will-change: opacity, transform;
}

.scale-in.visible {
    opacity: 1;
    transform: scale(1);
}

/* Optymalizacja animacji - wyłącz will-change po zakończeniu */
.fade-in.visible,
.slide-in-left.visible,
.scale-in.visible {
    will-change: auto;
}

/* ===== MODERNIZACJA NAVBAR ===== */
/* Efekt blur i animacje dla navbar */
.navbar {
    backdrop-filter: blur(20px);
    background: rgba(255, 255, 255, 0.95);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
}

.navbar.scrolled {
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.15);
}

/* Animacje dla linków navbar */
.navbar-menu a {
    position: relative;
    transition: all 0.3s ease;
}

.navbar-menu a::after {
    content: '';
    position: absolute;
    bottom: clamp(-0.3125rem, -1vw, -0.3125rem); /* -5px */
    left: 50%;
    width: 0;
    height: clamp(0.125rem, 0.3vw, 0.125rem); /* 2px */
    background: var(--primary);
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.navbar-menu a:hover::after {
    width: 100%;
}

.navbar-menu a:hover {
    transform: translateY(clamp(-0.125rem, -0.5vw, -0.125rem)); /* -2px */
    color: var(--primary);
}

/* Style dla dostępności - focus na elementach interaktywnych */
*:focus {
    outline: clamp(0.125rem, 0.3vw, 0.125rem) solid var(--primary);
    outline-offset: clamp(0.125rem, 0.3vw, 0.125rem);
}

/* ===== RESPONSIVE DESIGN ===== */
/* Cache busting: 2025-01-15 15:30 */
/* Adaptacja strony do różnych rozmiarów ekranów (mobile-first approach) */

/* ===== RESPONSIVE BREAKPOINTS - Ustandaryzowane ===== */

/* Very small phones (320px - 479px) */
@media (max-width: 29.9375em) { /* 479px */
    body {
        font-size: clamp(1rem, 3vw, 1.0625rem); /* Minimum 16px - WCAG best practice */
        line-height: 1.6;
        padding-top: 0; /* Usunięto padding - navbar sticky na samej górze */
    }
    
    h1 { 
        font-size: clamp(1.75rem, 8vw, 2rem); 
        line-height: 1.2; 
        margin-bottom: clamp(1rem, 3vw, 1.25rem);
    }
    h2 { 
        font-size: clamp(1.5rem, 7vw, 1.75rem); 
        line-height: 1.3;
        margin-bottom: clamp(0.75rem, 2.5vw, 1rem);
    }
    h3 { 
        font-size: clamp(1.25rem, 6vw, 1.5rem); 
        line-height: 1.4; 
        margin-bottom: clamp(0.75rem, 2vw, 1rem);
    }
    
    .container {
        padding: 0 clamp(1rem, 4vw, 1.25rem);
        max-width: 100%;
    }
    
    section {
        padding: clamp(2.5rem, 8vw, 3rem) 0;
    }
    
    /* Wszystkie touch targets minimum 44px - WCAG 2.1 */
    .btn, button, a[role="button"], input[type="submit"], input[type="button"], 
    .navbar-menu a, .mobile-menu-btn {
        min-height: 2.75rem; /* 44px - WCAG 2.1 */
        min-width: 2.75rem; /* 44px - WCAG 2.1 */
    }
    
    /* Większe odstępy między elementami na małych ekranach */
    .card, .service-card, .team-card {
        margin-bottom: clamp(1.5rem, 4vw, 2rem);
    }
}

/* Small phones (480px - 767px) */
@media (min-width: 30em) and (max-width: 47.9375em) { /* 480px - 767px */
    body {
        font-size: clamp(1rem, 2.5vw, 1.0625rem); /* Minimum 16px */
        line-height: 1.6;
        padding-top: 0; /* Usunięto padding - navbar sticky na samej górze */
    }
    
    h1 { font-size: clamp(2rem, 7vw, 2.25rem); line-height: 1.2; }
    h2 { font-size: clamp(1.75rem, 6vw, 2rem); line-height: 1.3; }
    h3 { font-size: clamp(1.5rem, 5vw, 1.75rem); line-height: 1.4; }
    
    .container {
        padding: 0 clamp(1.25rem, 4vw, 1.5rem);
        max-width: 100%;
    }
}

/* Mobile First Approach - Style bazowe dla telefonów (do 768px) */
@media (max-width: 48em) { /* 768px */
    /* KRYTYCZNE: ZAPOBIEGANIE POZIOMEMU SCROLLOWANIU NA MOBILE */
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100vw !important;
        position: relative !important;
        box-sizing: border-box !important;
    }
    
    /* Wszystkie główne kontenery nie mogą przekraczać viewport */
    main, header, footer, section, .container, nav, article, aside {
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
        position: relative !important;
    }
    
    /* Typography adjustments for mobile - WCAG 2.1 best practices */
    body {
        font-size: clamp(1rem, 2.5vw, 1.0625rem); /* Minimum 16px aby uniknąć auto-zoom na iOS */
        line-height: 1.6;
        padding-top: 0; /* Usunięto padding - navbar sticky na samej górze */
    }
    
    h1 {
        font-size: clamp(2rem, 8vw, 2.5rem);
        line-height: 1.2;
        margin-bottom: clamp(1rem, 3vw, 1.25rem);
    }
    
    h2 {
        font-size: clamp(1.75rem, 7vw, 2rem);
        line-height: 1.3;
        margin-bottom: clamp(0.75rem, 2.5vw, 1rem);
    }
    
    h3 {
        font-size: clamp(1.5rem, 6vw, 1.75rem);
        line-height: 1.4;
        margin-bottom: clamp(0.75rem, 2vw, 1rem);
    }
    
    /* Container adjustments */
    .container {
        padding: 0 clamp(0.9375rem, 3vw, 1.5rem) !important;
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* body::after - paski dekoracyjne - zmniejszenie na mobile */
    body::after {
        width: clamp(3.125rem, 15vw, 6.25rem) !important; /* 50px - 100px na mobile */
        max-width: 20vw !important; /* Maksymalnie 20% szerokości ekranu */
    }
    
    /* Navbar styles are handled by navbar-unified.css */
    
    /* Mobile menu button - styles handled by navbar-unified.css */
    /* Removed duplicate styles to prevent conflicts */
    
    /* Hero section mobile */
    .hero-section {
        padding: clamp(3rem, 10vw, 5rem) clamp(1rem, 4vw, 2rem);
        text-align: center;
    }
    
    .hero-section .container {
        flex-direction: column;
        gap: clamp(2rem, 6vw, 3rem);
    }
    
    .hero-content {
        flex: 1;
        max-width: 100%;
        width: 100%;
        text-align: center;
    }
    
    .hero-text {
        width: 100%;
        margin-bottom: clamp(1rem, 3vw, 1.5rem);
    }
    
    .hero-image {
        flex: 0 0 auto;
        width: 100%;
        max-width: min(400px, 90vw);
        margin: 0 auto;
    }
    
    
    /* Cards mobile */
    .card {
        margin-bottom: clamp(1rem, 3vw, 1.5rem);
        padding: clamp(1.25rem, 4vw, 1.5rem) clamp(0.9375rem, 3vw, 1.5rem);
    }
    
    .card-grid {
        grid-template-columns: 1fr;
        gap: clamp(1rem, 3vw, 1.5rem);
    }
    
    /* Team section mobile - naprawa przewijania - AGRESYWNE ROZWIĄZANIE */
    .team-section {
        touch-action: pan-y !important;
        overscroll-behavior: none !important;
        /* Usunięto -webkit-overflow-scrolling - może powodować osobny scroll */
        overflow: visible !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        /* Usunięcie isolation które może powodować problemy */
        isolation: auto !important;
        /* Usunięcie właściwości które mogą powodować stacking context */
        transform: none !important;
        will-change: auto !important;
        contain: none !important;
        /* Wymuszenie że sekcja nie może mieć scrolla */
        -webkit-overflow-scrolling: auto !important;
        /* Upewniamy się że sekcja nie przechwytuje touch events */
        pointer-events: auto !important;
        /* Position: relative jest potrzebne dla pseudo-elementów ::after (paski) */
        position: relative !important;
        /* z-index: 2 jest potrzebny dla pasków - nie zmieniamy na auto */
        z-index: 2 !important;
    }
    
    .team-section .container {
        overflow: visible !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
        height: auto !important;
        max-height: none !important;
        /* Upewniamy się że kontener nie tworzy scrolla */
        position: relative !important;
    }
    
    /* Wszystkie elementy wewnątrz team-section - skalowalne - AGRESYWNE */
    .team-section * {
        max-height: none !important;
        height: auto !important;
        /* Usunięcie właściwości które mogą powodować stacking context */
        transform: none !important;
        will-change: auto !important;
        contain: none !important;
    }
    
    .team-section *:not(.card-image) {
        overflow-y: visible !important;
        overflow: visible !important;
        min-height: auto !important;
        /* Wymuszenie że elementy nie mogą mieć scrolla */
        -webkit-overflow-scrolling: auto !important;
    }
    
    /* Pseudo-elementy też skalowalne - ale paski muszą być widoczne */
    .team-section::before {
        overflow: hidden !important;
        pointer-events: none !important;
        transform: none !important;
        will-change: auto !important;
    }
    
    /* Pasek ::after musi być widoczny - nie usuwamy transform dla niego */
    .team-section::after {
        overflow: hidden !important;
        pointer-events: none !important;
        /* transform: translateX(-50%) jest potrzebny dla pozycjonowania paska */
        /* Nie usuwamy transform - pasek musi być widoczny */
        will-change: auto !important;
        display: block !important;
        content: '' !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 1px !important;
        background: linear-gradient(90deg, transparent 0%, var(--primary) 50%, transparent 100%) !important;
        z-index: 2 !important;
    }
    
    /* Usuwamy focus states które mogą powodować problemy */
    .team-section:focus,
    .team-section:focus-within,
    .team-section:active {
        overflow: visible !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
        height: auto !important;
        max-height: none !important;
        outline: none !important;
    }
    
    /* Zapobieganie outline po kliknięciu */
    .team-section:focus-visible {
        outline: none !important;
    }
    
    .team-grid {
        grid-template-columns: 1fr;
        gap: clamp(1.5rem, 4vw, 2rem);
        touch-action: pan-y !important;
        overscroll-behavior: none !important;
        overflow: visible !important;
        height: auto !important;
        max-height: none !important;
    }
    
    .team-card {
        touch-action: pan-y !important;
        overscroll-behavior: none !important;
        overflow: hidden !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
        height: auto !important;
        max-height: none !important;
    }
    
    .card-image {
        touch-action: pan-y !important;
        overscroll-behavior: none !important;
    }
    
    .team-member {
        margin-bottom: clamp(1.5rem, 4vw, 2rem);
    }
    
    /* Services mobile */
    .services-grid {
        grid-template-columns: 1fr; /* 1 kolumna na mobile */
        gap: clamp(1rem, 3vw, 1.5rem);
    }
    
    .service-card {
        margin-bottom: clamp(1rem, 3vw, 1.5rem);
    }
    
    /* Contact mobile */
    .contact-content {
        flex-direction: column;
        gap: clamp(1.5rem, 4vw, 2rem);
    }
    
    .contact-info {
        width: 100%;
    }
    
    .contact-form {
        width: 100%;
    }
    
    /* Footer mobile */
    .footer-content {
        flex-direction: column;
        gap: clamp(1.5rem, 4vw, 2rem);
        text-align: center;
    }
    
    .footer-section {
        width: 100%;
    }
    
    /* Buttons mobile */
    .btn {
        padding: clamp(0.75rem, 3vw, 1rem) clamp(1.25rem, 5vw, 1.5rem);
        font-size: clamp(0.875rem, 3vw, 0.9375rem);
        min-height: clamp(40px, 9vw, 44px);
    }
    
    .btn-small, .btn-primary-small, .btn-outline-small {
        padding: clamp(0.5rem, 2vw, 0.625rem) clamp(0.875rem, 3vw, 1rem);
        font-size: clamp(0.75rem, 2.5vw, 0.875rem);
        min-height: clamp(2rem, 8vw, 2.25rem); /* 32px - 36px */
    }
    
    .btn-large {
        padding: clamp(1rem, 4vw, 1.25rem) clamp(1.5rem, 6vw, 2rem);
        font-size: clamp(0.9375rem, 3vw, 1rem);
        min-height: clamp(3rem, 10vw, 3.25rem); /* 48px - 52px */
    }
    
    .hero-buttons .btn,
    .cta-buttons .btn,
    .contact-actions-centered .btn {
        width: 100%;
        max-width: min(300px, 90vw);
    }
    
    /* Form elements mobile */
    .form-group {
        margin-bottom: clamp(1rem, 3vw, 1.5rem);
    }
    
    .form-control {
        padding: clamp(0.75rem, 3vw, 1rem) clamp(0.9375rem, 3vw, 1.25rem);
        font-size: clamp(0.875rem, 2.5vw, 1rem);
    }
    
    /* Table responsive */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Wyższa specyficzność dla przycisków - nadpisuje globalne style linków */
a.btn, a.btn-primary, a.btn-outline {
    color: inherit !important;
}

a.btn-primary {
    color: #ffffff !important;
}

a.btn-outline {
    color: #ffffff !important;
}

a.btn-primary:hover, a.btn-outline:hover {
    color: #ffffff !important;
}

a.btn-small, a.btn-primary-small, a.btn-outline-small {
    color: #ffffff !important;
}

a.btn-small:hover, a.btn-primary-small:hover, a.btn-outline-small:hover {
    color: #ffffff !important;
}

/* Tablet styles (769px - 1024px) */
@media (min-width: 48.0625em) and (max-width: 64em) { /* 769px - 1024px */
    .container {
        max-width: min(95%, 1200px);
        padding: 0 clamp(1.5rem, 4vw, 2rem);
    }
    
    .hero-content {
        flex-direction: row;
        gap: clamp(2rem, 5vw, 2.5rem);
    }
    
    .card-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: clamp(1.5rem, 4vw, 2rem);
    }
    
    .team-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: clamp(1.5rem, 4vw, 2rem);
    }
    
    .services-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 kolumny na tabletach */
        gap: clamp(1.5rem, 4vw, 2rem);
    }
    
    .contact-content {
        flex-direction: row;
        gap: clamp(2rem, 5vw, 2.5rem);
    }
    
}

/* Laptops / Desktop styles (1025px - 1279px) */
@media (min-width: 64.0625em) and (max-width: 79.9375em) { /* 1025px - 1279px */
    .mobile-menu-btn {
        display: none;
    }
    
    .container {
        max-width: min(1200px, 95%);
    }
    
    /* Navbar styles are handled by navbar-unified.css */
}

/* Large screens (1280px - 1439px) */
@media (min-width: 80em) and (max-width: 89.9375em) { /* 1280px - 1439px */
    .container {
        max-width: min(1320px, 98%);
    }
}

/* Extra large screens (1440px - 1919px) */
@media (min-width: 90em) and (max-width: 119.9375em) { /* 1440px - 1919px */
    .container {
        max-width: min(1320px, 100%);
    }
}

/* 4K / Ultrawide (1920px+) */
@media (min-width: 120em) { /* 1920px+ */
    .container {
        max-width: min(1600px, 100%);
        padding: 0 clamp(2rem, 5vw, 4rem);
    }
}

/* ===== MICROINTERAKCJE I ANIMACJE ===== */
/* Płynne animacje dla wszystkich elementów */
* {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Smooth scrolling dla całej strony */
html {
    scroll-behavior: smooth;
}

/* Focus states dla dostępności */
*:focus {
    outline: clamp(0.125rem, 0.3vw, 0.125rem) solid var(--primary);
    outline-offset: clamp(0.125rem, 0.3vw, 0.125rem);
}

/* Hover effects dla interaktywnych elementów */
.btn:hover,
.target-group-card:hover,
.review-card:hover,
.contact-map:hover {
    cursor: pointer;
}

/* Loading states */
.loading {
    opacity: 0.7;
    pointer-events: none;
}

/* Success states */
.success {
    color: #28a745;
    background-color: rgba(40, 167, 69, 0.1);
    border-color: #28a745;
}

/* Animacja fade-in dla sekcji */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(clamp(1.875rem, 4vw, 1.875rem)); /* 30px */
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(clamp(-1.875rem, -4vw, -1.875rem)); /* -30px */
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(clamp(1.875rem, 4vw, 1.875rem)); /* 30px */
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Animacje dla sekcji */
.target-groups-section,
.google-reviews-section,
.contact-section {
    animation: fadeInUp 0.8s ease-out;
}

/* Animacje dla kart */
.target-group-card,
.review-card {
    animation: scaleIn 0.6s ease-out;
}

.target-group-card:nth-child(1) { animation-delay: 0.1s; }
.target-group-card:nth-child(2) { animation-delay: 0.2s; }
.target-group-card:nth-child(3) { animation-delay: 0.3s; }
.target-group-card:nth-child(4) { animation-delay: 0.4s; }
.target-group-card:nth-child(5) { animation-delay: 0.5s; }
.target-group-card:nth-child(6) { animation-delay: 0.6s; }
.target-group-card:nth-child(7) { animation-delay: 0.7s; }
.target-group-card:nth-child(8) { animation-delay: 0.8s; }

.review-card:nth-child(1) { animation-delay: 0.1s; }
.review-card:nth-child(2) { animation-delay: 0.2s; }
.review-card:nth-child(3) { animation-delay: 0.3s; }

/* ===== DOSTĘPNOŚĆ ===== */
/* Link do pominięcia nawigacji - dla użytkowników klawiatury */
.skip-link {
    position: absolute;
    top: -40px;
    left: 6px;
    background: var(--primary);
    color: white;
    padding: 8px;
    text-decoration: none;
    z-index: 1000;
    border-radius: var(--border-radius);
}

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

/* ===== LAYOUT ===== */
/* Kontener treści - centrowanie i maksymalna szerokość - responsywny */
.container {
    max-width: min(1320px, 100%);
    margin: 0 auto;
    padding: 0 clamp(1rem, 4vw, 2rem);
    width: 100%;
    box-sizing: border-box; /* ZAPOBIEGA PRZEKRACZANIU VIEWPORT */
    position: relative;
}

/* Podstawowe style dla sekcji - padding i odstępy - responsywny */
section {
    padding: clamp(3rem, 8vw, 5rem) 0;
    width: 100%;
    max-width: 100vw; /* ZAPOBIEGA WYJŚCIU POZA EKRAN */
    box-sizing: border-box;
    position: relative;
    overflow-x: hidden; /* Dodatkowe zabezpieczenie */
}

/* Główne elementy strukturalne - zapobieganie przekraczaniu viewport */
main, header, footer, article, aside {
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
    overflow-x: hidden;
    position: relative;
    /* Naprawa CLS - zapobiega nieoczekiwanym zmianom wysokości */
    min-height: 0;
    contain: layout style;
}

/* ===== SEKCJE GŁÓWNE ===== */
/* Sekcja CTA - "Gotowy umówić wizytę" - zachęta do działania */
.cta-section {
    background: linear-gradient(135deg, rgba(6, 79, 61, 0.92) 0%, rgba(26, 61, 53, 0.92) 100%); /* Tło przezroczyste - pozwala paskom być widoczne */
    padding: clamp(3rem, 8vw, 5rem) 0;
    position: relative;
    overflow: visible; /* Zmieniono z hidden - pozwala paskom być widoczne */
    text-align: center;
    color: var(--text-light);
}

.cta-section h2 {
    color: var(--text-light) !important;
}

.cta-section .container {
    position: relative;
    z-index: 2;
    max-width: min(800px, 90vw);
    margin: 0 auto;
    padding: 0 clamp(1rem, 3vw, 1.5rem);
}

.cta-section h2 {
    font-size: clamp(1.75rem, 6vw, 2.5rem);
    margin-bottom: clamp(1rem, 3vw, 1.25rem);
    font-weight: 700;
}

.cta-section h2:after { content: none !important; display: none !important; }

.cta-section p {
    font-size: clamp(1rem, 3vw, 1.2rem);
    margin-bottom: clamp(1.5rem, 4vw, 1.875rem);
    opacity: 0.9;
    line-height: 1.6;
    padding: 0 clamp(1rem, 3vw, 1.5rem);
}

.cta-buttons {
    display: flex;
    gap: clamp(1rem, 3vw, 1.25rem);
    justify-content: center;
    flex-wrap: wrap;
}

.cta-buttons .btn {
    min-width: min(200px, 90vw);
    width: 100%;
    max-width: min(300px, 90vw);
    padding: clamp(0.9375rem, 3vw, 1rem) clamp(1.5rem, 4vw, 1.875rem);
    font-size: clamp(0.9375rem, 2.5vw, 1.1rem);
}

.cta-section .btn-primary {
    background: var(--gradient-primary) !important;
    color: #ffffff !important;
    border: clamp(0.125rem, 0.3vw, 0.125rem) !important;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: clamp(11.25rem, 30vw, 12.5rem); /* 180px - 200px responsywny */
    padding: clamp(0.9375rem, 3vw, 0.9375rem) clamp(1.875rem, 4vw, 1.875rem);
    font-size: clamp(1rem, 2.5vw, 1.1rem);
    border-radius: clamp(0.5rem, 2vw, 0.5rem);
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(6, 79, 61, 0.2);
    letter-spacing: 0.5px;
    position: relative;
    overflow: hidden;
    animation: pulse 2s infinite;
}

.cta-section .btn-primary::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
    z-index: 1;
}

.cta-section .btn-primary:hover::before {
    width: clamp(18.75rem, 50vw, 18.75rem); /* 300px - responsywny */
    height: clamp(18.75rem, 50vw, 18.75rem); /* 300px - responsywny */
}

.cta-section .btn-primary:hover {
    background: var(--gradient-secondary) !important;
    color: #ffffff !important;
    transform: translateY(clamp(-0.125rem, -0.5vw, -0.125rem)) scale(1.02) !important; /* -2px + lekkie powiększenie */
    box-shadow: 0 12px 35px rgba(6, 79, 61, 0.4);
    border-color: rgba(58, 155, 133, 0.8) !important; /* Jaśniejsza zielona ramka przy hover */
}

.cta-section .btn-primary i {
    color: inherit !important;
}

.cta-section .btn-outline {
    background: var(--gradient-primary) !important;
    color: #ffffff !important;
    border: clamp(0.125rem, 0.3vw, 0.125rem) !important;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: clamp(11.25rem, 30vw, 12.5rem); /* 180px - 200px responsywny */
    padding: clamp(0.9375rem, 3vw, 0.9375rem) clamp(1.875rem, 4vw, 1.875rem);
    font-size: clamp(1rem, 2.5vw, 1.1rem);
    border-radius: clamp(0.5rem, 2vw, 0.5rem);
    transition: all 0.3s ease;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px rgba(6, 79, 61, 0.2);
    position: relative;
    overflow: hidden;
}

.cta-section .btn-outline::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
    z-index: 1;
}

.cta-section .btn-outline:hover::before {
    width: clamp(18.75rem, 50vw, 18.75rem); /* 300px - responsywny */
    height: clamp(18.75rem, 50vw, 18.75rem); /* 300px - responsywny */
}

.cta-section .btn-outline:hover {
    background: var(--gradient-primary) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    transform: translateY(clamp(-0.125rem, -0.5vw, -0.125rem)); /* -2px */
    box-shadow: 0 8px 25px rgba(6, 79, 61, 0.3);
}

@media (max-width: 48em) { /* 768px */
    .cta-section {
        padding: clamp(2rem, 6vw, 2.5rem) clamp(1rem, 4vw, 1.25rem);
    }
    
    .cta-buttons {
        flex-direction: column;
        align-items: center;
        gap: clamp(0.75rem, 2vw, 1rem);
    }
    
    .cta-buttons .btn {
        width: 100%;
        max-width: min(300px, 90vw);
        min-width: auto;
    }
}

/* ===== TYPOGRAFIA ===== */
/* Style dla nagłówków - hierarchia tekstu */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', Arial, sans-serif;
    color: var(--primary-light);
    margin-bottom: 20px;
    font-weight: 700;
}

h1 {
    font-size: clamp(1.75rem, 8vw, 3.5rem);
    line-height: clamp(1.2, 0.5vw, 1.1);
    margin-bottom: clamp(1rem, 3vw, 1.5rem);
    font-weight: 700;
    letter-spacing: -0.02em;
}

h2 {
    font-size: clamp(1.5rem, 6vw, 2.8rem);
    line-height: clamp(1.3, 0.5vw, 1.2);
    margin-bottom: clamp(0.75rem, 3vw, 1.25rem);
    position: relative;
    text-align: center;
    font-weight: 700;
    letter-spacing: -0.01em;
}

h3 {
    font-size: clamp(1.25rem, 4vw, 1.8rem);
    line-height: clamp(1.4, 0.5vw, 1.3);
    margin-bottom: clamp(0.75rem, 2vw, 1rem);
    font-weight: 600;
}

/* Wyróżnienie ważnych informacji */
.highlight {
    background: linear-gradient(120deg, rgba(6, 79, 61, 0.1) 0%, rgba(6, 79, 61, 0.05) 100%);
    padding: 0.5rem 1rem;
    border-radius: 8px;
    border-left: 4px solid var(--primary);
}

h2::after { content: none !important; display: none !important; }

/* Opis sekcji - podtytuły pod nagłówkami */
.section-description {
    text-align: center;
    max-width: min(800px, 90vw);
    margin: 0 auto clamp(2rem, 5vw, 3.75rem);
    color: #666;
    font-size: clamp(0.9375rem, 2.5vw, 1.2rem);
    line-height: 1.6;
    font-weight: 400;
    position: relative;
    z-index: 25;
    padding: 0 clamp(1rem, 3vw, 1.5rem);
}

/* ===== KOMPONENTY UI ===== */
/* Ujednolicone style przycisków - wszystkie przyciski mają spójny wygląd */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: clamp(0.5rem, 2vw, 0.625rem);
    padding: clamp(0.875rem, 3vw, 0.875rem) clamp(1.25rem, 4vw, 1.75rem);
    border-radius: clamp(0.625rem, 2vw, 0.625rem);
    text-decoration: none;
    font-weight: 600;
    font-size: clamp(0.9375rem, 2.5vw, 1rem);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    text-align: center;
    border: clamp(0.125rem, 0.3vw, 0.125rem) solid transparent;
    position: relative;
    overflow: hidden;
    min-height: clamp(2.75rem, 8vw, 3rem); /* 44px - 48px - WCAG 2.1 touch targets */
    min-width: clamp(7.5rem, 25vw, 10rem); /* 120px - 160px - minimum szerokość */
    box-shadow: 0 4px 15px rgba(6, 79, 61, 0.15);
    font-family: 'Montserrat', Arial, sans-serif;
    letter-spacing: 0.3px;
    touch-action: manipulation; /* Optymalizacja dla touch devices */
    -webkit-tap-highlight-color: rgba(6, 79, 61, 0.2);
}

/* Usunięto .btn::before - każdy wariant przycisku (primary, outline) ma własny ::before */
/* To zapobiega nakładaniu się efektów i artefaktom wizualnym */

.btn-primary {
    background: var(--gradient-primary);
    color: #ffffff;
    border: clamp(0.125rem, 0.3vw, 0.125rem) solid rgb(6, 79, 61);
    box-shadow: 0 6px 20px rgba(6, 79, 61, 0.3);
    position: relative;
    overflow: hidden;
}

.btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 0;
    height: 100%;
    background: rgba(255, 255, 255, 0.2);
    transition: width 0.6s ease, opacity 0.3s ease;
    transform: translateX(-50%);
    z-index: 1;
    pointer-events: none;
    opacity: 0; /* Całkowicie niewidoczny w stanie początkowym */
}

.btn-primary:hover::before {
    width: 100%;
    left: 50%;
    opacity: 1; /* Widoczny przy hover */
}

.btn-primary:hover {
    background: var(--gradient-secondary);
    color: #ffffff;
    transform: translateY(clamp(-0.125rem, -0.5vw, -0.125rem)) scale(1.02); /* -2px + lekkie powiększenie */
    box-shadow: 0 12px 35px rgba(6, 79, 61, 0.4);
    border-color: rgba(58, 155, 133, 0.8); /* Jaśniejsza zielona ramka przy hover */
}

/* Wykluczenie ramek dla przycisków w navbarze */
.navbar .btn,
.navbar .btn-primary,
.navbar .btn-outline,
.navbar a.btn,
.navbar a.btn-primary,
.consult-btn {
    border: none !important;
}

/* Pulsowanie dla głównego CTA */
.btn-pulse {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { 
        transform: scale(1);
        opacity: 1;
    }
    50% { 
        transform: scale(1.05);
        opacity: 0.9;
    }
    100% { 
        transform: scale(1);
        opacity: 1;
    }
}

.btn-primary:active {
    transform: translateY(-1px);
}

.btn-outline {
    background: var(--gradient-primary);
    color: #ffffff;
    border: clamp(0.125rem, 0.3vw, 0.125rem) solid rgba(6, 79, 61, 0.3);
    box-shadow: 0 4px 15px rgba(6, 79, 61, 0.2);
    position: relative;
    overflow: hidden;
}

.btn-outline::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 0;
    height: 100%;
    background: rgba(255, 255, 255, 0.2);
    transition: width 0.6s ease, opacity 0.3s ease;
    transform: translateX(-50%);
    z-index: 1;
    pointer-events: none;
    opacity: 0; /* Całkowicie niewidoczny w stanie początkowym */
}

.btn-outline:hover::before {
    width: 100%;
    left: 50%;
    opacity: 1; /* Widoczny przy hover */
}

.btn-outline:hover {
    background: var(--gradient-secondary);
    color: #ffffff;
    transform: translateY(clamp(-0.125rem, -0.5vw, -0.125rem)) scale(1.02); /* -2px + lekkie powiększenie */
    box-shadow: 0 12px 35px rgba(6, 79, 61, 0.4);
    border-color: rgba(58, 155, 133, 0.8); /* Jaśniejsza zielona ramka przy hover */
}

.btn-outline:active {
    transform: translateY(-1px);
}

/* Rozmiary przycisków */
.btn-small, .btn-primary-small, .btn-outline-small {
    padding: 10px 20px;
    font-size: 0.9rem;
    min-height: 40px;
    border-radius: 8px;
    background: var(--gradient-primary);
    color: #ffffff;
    border: clamp(0.125rem, 0.3vw, 0.125rem);
    box-shadow: 0 4px 15px rgb(16, 145, 113);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-small:hover, .btn-primary-small:hover, .btn-outline-small:hover {
    background: var(--gradient-secondary);
    color: #ffffff;
    transform: translateY(clamp(-0.125rem, -0.5vw, -0.125rem)); /* -2px */
    box-shadow: 0 8px 25px rgba(6, 79, 61, 0.3);
}

.btn-small:active, .btn-primary-small:active, .btn-outline-small:active {
    transform: translateY(-1px);
}

.btn-large {
    padding: 18px 36px;
    font-size: 1.1rem;
    min-height: 56px;
    border-radius: clamp(0.75rem, 3vw, 0.75rem); /* 12px */
}

/* Specjalne style dla przycisków w różnych sekcjach */
.hero-buttons .btn {
    min-width: clamp(11.25rem, 28vw, 11.25rem); /* 180px - responsywny */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

.hero-cta {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

.cta-buttons .btn {
    min-width: clamp(11.25rem, 30vw, 12.5rem); /* 180px - 200px responsywny */
}

/* Usunięto - używamy bardziej szczegółowych selektorów poniżej */

/* Pulsowanie dla głównego CTA - zoptymalizowane dla lepszej wydajności */
.btn-pulse {
    animation: pulse 2s infinite;
    will-change: transform, opacity;
    /* Zapewnia komponowanie animacji - lepsza wydajność */
    backface-visibility: hidden;
    perspective: 1000px;
}

/* ===== SEKCJA HERO ===== */
/* Główna sekcja na stronie startowej z CTA */
.hero-section {
    padding: clamp(4rem, 12vw, 7.5rem) clamp(1rem, 4vw, 2rem);
    background: linear-gradient(135deg, rgba(6, 79, 61, 0.92) 0%, rgba(26, 61, 53, 0.92) 100%); /* Tło przezroczyste - pozwala paskom być widoczne */
    color: #ffffff !important;
    position: relative;
    overflow-x: hidden; /* ZAPOBIEGA POZIOMEMU SCROLLOWANIU */
    overflow-y: visible; /* Pozwala paskom być widoczne */
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
    margin-bottom: clamp(3rem, 8vw, 5rem);
    width: 100%;
    max-width: 100vw; /* ZAPOBIEGA WYJŚCIU POZA EKRAN */
    box-sizing: border-box;
    /* Zapobiega CLS - upewniamy się że sekcja ma stabilne wymiary */
    min-height: 0;
    contain: layout style;
}

/* Subtelne tło z wzorem - naprawa CLS */
.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
    z-index: 1;
    /* Zapobiega CLS - element nie wpływa na layout */
    pointer-events: none;
    will-change: auto;
}

/* Nowy wzór tła dla hero */
.hero-background-pattern {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 20%),
        radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.05) 0%, transparent 10%);
    z-index: 1;
}

.hero-subtitle {
    font-size: clamp(1rem, 3vw, 1.2rem); /* Responsywny */
    line-height: 1.6;
    margin-bottom: clamp(1.5rem, 4vw, 2rem);
    color: rgba(255, 255, 255, 0.9);
}

.hero-buttons {
    display: flex;
    gap: clamp(0.75rem, 2vw, 1rem);
    flex-wrap: wrap;
}

/* ===== HERO FEATURES ===== */
/* Wyróżnienia w hero section */
.hero-features {
    display: flex;
    flex-direction: column;
    gap: clamp(0.75rem, 2vw, 1rem);
    margin: clamp(1.5rem, 4vw, 2rem) 0;
    animation: fadeInUp 0.8s ease-out 0.3s both;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: clamp(0.75rem, 2vw, 1rem);
    padding: clamp(0.75rem, 2vw, 1rem);
    background: rgba(255, 255, 255, 0.1);
    border-radius: clamp(0.625rem, 2vw, 0.75rem);
    backdrop-filter: blur(10px);
    border: clamp(0.0625rem, 0.2vw, 0.0625rem) solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.feature-item:hover {
    transform: translateX(5px);
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.feature-icon {
    width: clamp(40px, 8vw, 50px);
    height: clamp(40px, 8vw, 50px);
    background: var(--gradient-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: clamp(1rem, 3vw, 1.2rem);
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.feature-item:hover .feature-icon {
    transform: scale(1.1);
    box-shadow: 0 5px 15px rgba(6, 79, 61, 0.3);
}

.feature-item span {
    color: white;
    font-weight: 500;
    font-size: clamp(0.875rem, 2.5vw, 1rem);
    line-height: 1.4;
}

/* Animowane elementy dekoracyjne */
.hero-decorative {
    position: absolute;
    width: clamp(6.25rem, 15vw, 6.25rem); /* 100px - responsywny */
    height: clamp(6.25rem, 15vw, 6.25rem); /* 100px - responsywny */
    border: clamp(0.125rem, 0.3vw, 0.125rem) solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    animation: float 6s ease-in-out infinite;
    z-index: 1;
}

.hero-decorative:nth-child(1) {
    top: 20%;
    left: 10%;
    animation-delay: 0s;
}

.hero-decorative:nth-child(2) {
    top: 60%;
    right: 15%;
    animation-delay: 2s;
}

@keyframes float {
    0%, 100% { 
        transform: translateY(0px) rotate(0deg); 
        opacity: 0.3;
    }
    50% { 
        transform: translateY(-20px) rotate(180deg); 
        opacity: 0.6;
    }
}



.hero-section .hero-background-elements {
    display: none;
}

.hero-section .geometric-shape {
    display: none;
}

.hero-section .shape-1,
.hero-section .shape-2,
.hero-section .shape-3 {
    display: none;
}

.hero-section .medical-icon {
    display: none;
}

.hero-section .medical-icon:nth-child(4),
.hero-section .medical-icon:nth-child(5),
.hero-section .medical-icon:nth-child(6),
.hero-section .medical-icon:nth-child(7),
.hero-section .medical-icon:nth-child(8) {
    display: none;
}

body {
    position: relative;
    isolation: isolate;
}

body::after {
    content: '';
    position: fixed;
    top: 50%;
    right: 0;
    width: clamp(6.25rem, 20vw, 15.625rem); /* 100px - 250px responsywny */
    max-width: 100vw; /* ZAPOBIEGA WYJŚCIU POZA EKRAN - KRYTYCZNE */
    height: clamp(12.5rem, 40vh, 21.875rem); /* 200px - 350px responsywny */
    pointer-events: none !important;
    z-index: 1 !important; /* WARSTWA 1: Paski dekoracyjne - widoczne na tle body i przez przezroczyste tła sekcji */
    background-image: url('../images/pasy w tle.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center right; /* Zmieniono z center na center right */
    opacity: 0.4 !important; /* Widoczne na wszystkich tłach */
    transform: translateY(-50%);
    /* Usunięto mix-blend-mode - powodował problemy z widocznością */
}

/* WARSTWA 2: Sekcje z tłem - dla hero-section, team-section, target-groups-section, reviews-section i contact-section (przezroczyste tło) bez isolation, dla innych z isolation */
.hero-section,
.page-banner,
.team-section,
.target-groups-section,
.reviews-section,
.google-reviews-section,
.contact-section {
    position: relative;
    z-index: 2;
    /* Bez isolation: isolate - pozwala paskom być widoczne przez przezroczyste tło */
    /* Naprawa przewijania - upewniamy się że nie ma overflow auto */
    overflow: visible;
    overflow-x: hidden;
    overflow-y: visible;
}

.about-section,
.service-section,
.specialists-services-section,
.cta-section,
.pricing-section,
.faq-section,
.voucher-info-section,
.vouchers-section,
.contact-main-section,
.map-section,
.appointment-section,
.cart-section,
.voucher-selection-section,
.payment-section,
.success-section,
.privacy-policy-section {
    position: relative;
    z-index: 2;
    isolation: isolate; /* Tworzy nowy stacking context - tło sekcji zakrywa paski */
}

.team-card,
.target-group-card,
.review-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border: clamp(0.0625rem, 0.2vw, 0.0625rem) solid rgba(255, 255, 255, 0.2);
}

@media (max-width: 48em) { /* 768px */
    body::after {
        /* Na telefonach całkowicie usuwamy dekoracyjne paski */
        content: none !important;
        display: none !important;
        opacity: 0 !important;
        background: none !important;
    }

    /* Tworzymy niezależny stacking context dla sekcji kontakt, aby nic nie
       przenikało nad przyciski – nawet jeśli inne reguły je przywrócą */
    .contact-section {
        isolation: isolate !important;
        position: relative !important;
        z-index: 2 !important;
    }
}

/* Dodatkowa gwarancja – również na tabletach (<=1024px) usuwamy paski */
@media (max-width: 64em) { /* 1024px */
    body::after {
        content: none !important;
        display: none !important;
        opacity: 0 !important;
        background: none !important;
    }
}

@media (max-width: 30em) { /* 480px */
    /* Na bardzo małych ekranach zmniejszamy lub ukrywamy paski */
    body::after {
        width: clamp(3.125rem, 15vw, 6.25rem) !important; /* 50px - 100px na małych ekranach */
        max-width: 25vw !important; /* Maksymalnie 25% szerokości ekranu */
        background: 
            radial-gradient(circle at 50% 50%, rgba(6, 79, 61, 0.05) 0%, transparent 30%);
    }
    
    /* Dodatkowe zabezpieczenie dla bardzo małych ekranów */
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100vw !important;
    }
    
    .container, section {
        width: 100% !important;
        max-width: 100vw !important;
        padding-left: clamp(0.75rem, 3vw, 1rem) !important;
        padding-right: clamp(0.75rem, 3vw, 1rem) !important;
    }
    
    /* Hero features mobile optimization */
    .hero-features {
        margin: 0.8rem 0;
        gap: 0.6rem;
    }
    
    .feature-item {
        padding: 0.6rem;
        gap: 0.6rem;
        flex-direction: column;
        text-align: center;
    }
    
    .feature-icon {
        width: 35px;
        height: 35px;
        font-size: 0.9rem;
    }
    
    .feature-item span {
        font-size: clamp(0.875rem, 2.5vw, 0.9375rem);
        line-height: 1.4;
    }
    
    .hero-buttons {
        flex-direction: column;
        align-items: stretch;
        gap: clamp(0.75rem, 2vw, 0.875rem);
    }
    
    .hero-buttons .btn {
        width: 100%;
        text-align: center;
        padding: clamp(0.875rem, 3vw, 0.875rem) clamp(1.25rem, 4vw, 1.25rem);
        font-size: clamp(0.9375rem, 2.5vw, 1rem);
        min-height: 2.75rem; /* 44px - WCAG 2.1 touch target */
    }
    
    /* Mobile optimizations for redesigned sections */
    .target-groups-grid {
        gap: clamp(1rem, 3vw, 1.25rem);
        margin-top: clamp(2rem, 5vw, 2.5rem);
    }
    
    .target-group-card {
        padding: clamp(1.25rem, 4vw, 1.5625rem) clamp(1rem, 3vw, 1.25rem);
        min-height: clamp(250px, 35vw, 280px);
    }
    
    .group-icon {
        width: clamp(3.75rem, 12vw, 4.5rem) !important; /* 60px - 72px - większe dla mobile */
        height: clamp(3.75rem, 12vw, 4.5rem) !important; /* 60px - 72px */
        min-width: clamp(3.75rem, 12vw, 4.5rem) !important;
        min-height: clamp(3.75rem, 12vw, 4.5rem) !important;
        font-size: clamp(1.5rem, 5vw, 1.875rem) !important; /* 24px - 30px - większe ikony */
        margin-bottom: clamp(1rem, 3vw, 1.25rem) !important;
        /* Upewniamy się że zielone kółko jest dobrze widoczne */
        box-shadow: 0 clamp(0.25rem, 1vw, 0.375rem) clamp(0.625rem, 2vw, 0.9375rem) rgba(6, 79, 61, 0.25) !important;
        /* Zachowujemy gradient i border-radius */
        background: var(--gradient-primary) !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
    }
    
    /* Ikony wewnątrz zielonych kółek - większe i lepiej widoczne */
    .group-icon i {
        font-size: clamp(1.5rem, 5vw, 1.875rem) !important; /* 24px - 30px */
        color: white !important;
        z-index: 2 !important;
    }
    
    .target-group-card h3 {
        font-size: clamp(1.125rem, 3.5vw, 1.25rem);
        margin-bottom: clamp(0.75rem, 2vw, 0.75rem);
    }
    
    .target-group-card p {
        font-size: clamp(0.9375rem, 2.5vw, 1rem);
        line-height: 1.6;
    }
    
    .reviews-grid {
        gap: clamp(1rem, 3vw, 1.25rem);
    }
    
    .review-card {
        padding: clamp(1.25rem, 4vw, 1.25rem) clamp(0.9375rem, 3vw, 0.9375rem);
        min-height: clamp(200px, 30vw, 220px);
    }
    
    .contact-container {
        gap: clamp(1.5rem, 4vw, 2rem);
        margin-top: clamp(1.5rem, 4vw, 2rem);
    }
    
    .cta-box {
        padding: clamp(1.25rem, 4vw, 1.5625rem) clamp(1rem, 3vw, 1.25rem);
        margin-bottom: clamp(1rem, 3vw, 1.25rem);
    }
    
    .cta-box h3 {
        font-size: clamp(1.125rem, 3.5vw, 1.4rem);
        margin-bottom: clamp(0.625rem, 2vw, 0.625rem);
    }
    
    .cta-box p {
        font-size: clamp(0.875rem, 2.5vw, 0.9375rem);
        margin-bottom: clamp(0.9375rem, 3vw, 0.9375rem);
    }
    
    .contact-map {
        height: clamp(250px, 50vw, 300px);
        margin-top: clamp(1rem, 3vw, 1.25rem);
    }
    
    .footer-content {
        gap: clamp(1.5rem, 4vw, 2rem);
    }
    
    .footer-logo img {
        height: clamp(100px, 15vw, 120px); /* Responsywny */
        max-width: min(300px, 90vw);
    }
    
    .footer-links h4, .footer-social h4 {
        font-size: 1.2rem;
        margin-bottom: 20px;
    }
    
    .footer-links a {
        font-size: 1rem;
        padding: 6px 0;
    }
    
    .social-icons {
        gap: 20px;
    }
    
    .social-icons a {
        width: 50px;
        height: 50px;
        font-size: 1.2rem;
    }
}

/* Usunięto duplikat animacji pulse - używamy box-shadow pulse z linii ~1031 */

.hero-section .container {
    display: flex;
    align-items: center;
    gap: clamp(2rem, 6vw, 3.75rem);
    max-width: min(1320px, 100%);
    margin: 0 auto;
    padding: 0 clamp(1rem, 4vw, 2rem);
    position: relative;
    z-index: 3; /* Nad paskami (z-index: 1) - kontent hero jest nad paskami */
}

.hero-section h1,
.hero-section h2,
.hero-section p {
    color: #ffffff !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.hero-section .btn {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* Główny CTA - bardziej widoczny */
.hero-cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    vertical-align: middle;
}

/* Usunięto ::after hover effect - używamy tylko efektów z .btn-primary:hover */

.hero-content {
    flex: 1;
    max-width: min(600px, 100%);
}

.hero-content h1 {
    font-size: clamp(1.75rem, 8vw, 3.5rem); /* Responsywny rozmiar */
    font-weight: 700;
    margin-bottom: clamp(1rem, 3vw, 1.5625rem);
    line-height: 1.2;
}

.hero-content p,
.hero-subtitle {
    font-size: clamp(1rem, 3vw, 1.2rem); /* Responsywny rozmiar */
    margin-bottom: clamp(1rem, 3vw, 1.25rem);
    line-height: 1.6;
    opacity: 0.95;
}

.hero-buttons {
    margin-top: clamp(1.5rem, 4vw, 1.875rem);
    display: flex;
    gap: clamp(1rem, 3vw, 1.25rem);
    flex-wrap: wrap;
}

/* Przycisk na pełną szerokość w hero */
.hero-btn-fullwidth {
    width: 100%;
    max-width: 100%;
}

.hero-content h1 {
    font-size: clamp(1.75rem, 8vw, 3.5rem); /* Responsywny - już zdefiniowany wyżej, ale to nadpisuje */
    font-weight: 700;
    margin-bottom: clamp(1rem, 3vw, 1.5625rem);
    line-height: 1.2;
}

.hero-content p {
    font-size: clamp(1rem, 3vw, 1.2rem); /* Responsywny */
    margin-bottom: clamp(1rem, 3vw, 1.25rem);
    line-height: 1.6;
    opacity: 0.95;
}

.hero-image {
    flex: 0 0 clamp(280px, 40vw, 550px); /* Responsywny rozmiar - mniejszy min dla mobile */
    text-align: center;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
}

.hero-image img {
    max-width: 100%;
    width: 100%;
    height: auto;
    border-radius: clamp(0.875rem, 2vw, 0.9375rem);
    box-shadow: 0 clamp(1.25rem, 4vw, 1.25rem) clamp(3.125rem, 8vw, 3.125rem) rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease;
    object-fit: contain;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.hero-image img:hover {
    transform: scale(1.02);
}

/* ===== CUSTOM SVG IKONY ===== */
.custom-icon {
    width: 100%;
    height: 100%;
    transition: all 0.3s ease;
}

.custom-icon:hover {
    transform: scale(1.1) rotate(5deg);
    filter: brightness(1.2);
}

.feature-icon:hover .custom-icon,
.service-icon:hover .custom-icon,
.group-icon:hover .custom-icon {
    animation: iconPulse 0.6s ease-in-out;
}

@keyframes iconPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.15); }
    100% { transform: scale(1.1); }
}

/* ===== SEKCJA USŁUG ===== */
/* Nowa sekcja usług */
.services-section {
    padding: clamp(3rem, 8vw, 5rem) 0;
    background: #ffffff;
    position: relative;
    /* z-index i isolation: isolate są już zdefiniowane w grupie sekcji */
}

/* Zielony pasek nad sekcją */
.services-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--primary) 50%, transparent 100%);
    z-index: 1;
}

.services-grid {
    display: grid;
    grid-template-columns: 1fr; /* Mobile first - 1 kolumna */
    gap: clamp(1.5rem, 4vw, 2rem);
    margin-top: clamp(2rem, 5vw, 3rem);
}

/* Tablet - 2 kolumny */
@media (min-width: 48em) and (max-width: 63.9375em) { /* 768px - 1023px */
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Desktop - 3 kolumny */
@media (min-width: 64em) { /* 1024px+ */
    .services-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 kolumny - 3 na górze, 3 na dole */
    }
}

.service-card {
    background: #ffffff;
    padding: clamp(1.5rem, 4vw, 2rem);
    border-radius: clamp(0.875rem, 2vw, 0.9375rem);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    text-align: center;
    transition: all 0.3s ease;
    border: clamp(0.0625rem, 0.2vw, 0.0625rem) solid #f0f0f0;
    position: relative;
    z-index: 3; /* Nad paskami (z-index: 1) i tłem sekcji - w kontekście sekcji */
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.service-icon {
    width: clamp(60px, 10vw, 80px);
    height: clamp(60px, 10vw, 80px);
    background: var(--gradient-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto clamp(1rem, 3vw, 1.5rem);
    color: white;
    font-size: clamp(1.5rem, 4vw, 2rem);
    transition: background 0.3s ease, transform 0.3s ease;
}

/* Animacja zmiany koloru ikony po najechaniu na kartę */
.service-card:hover .service-icon {
    background: linear-gradient(135deg, #3a9b85 0%, #267764 100%); /* Zmieniony kolor przy hover */
    transform: scale(1.1); /* Delikatne powiększenie ikony */
}

.service-card h3 {
    font-size: clamp(1.125rem, 3vw, 1.3rem);
    margin-bottom: clamp(0.75rem, 2vw, 1rem);
    color: var(--primary-dark);
}

.service-card p {
    color: var(--text-muted);
    margin-bottom: clamp(1rem, 3vw, 1.5rem);
    line-height: 1.6;
    font-size: clamp(0.875rem, 2vw, 1rem);
}

/* ===== SEKCJA ZESPOŁU ===== */
/* Prezentacja zespołu fizjoterapeutów */
.team-section {
    padding: clamp(4rem, 10vw, 6.25rem) 0;
    background: transparent;
    /* Tło przezroczyste - pozwala paskom być w pełni widoczne */
    /* Usunięto animation - może powodować problemy z scroll na mobile */
    color: var(--primary-dark);
    margin: clamp(2rem, 6vw, 3.75rem) 0;
    position: relative;
    overflow: visible;
    /* z-index jest już zdefiniowany w grupie sekcji powyżej */
    /* Naprawa przewijania na mobile - pozwala na normalne przewijanie strony */
    touch-action: pan-y;
    overscroll-behavior: none;
    /* Usunięto -webkit-overflow-scrolling: touch - może powodować osobny scroll */
    /* Skalowalne właściwości - wszystko auto, brak stałych wysokości */
    height: auto;
    min-height: auto;
    max-height: none;
    /* Usunięcie właściwości które mogą powodować stacking context i blokować scroll */
    transform: none;
    will-change: auto;
    contain: none;
}

/* Subtelne tło z wzorem dla zespołu */
.team-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 20%, rgba(6, 79, 61, 0.03) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(6, 79, 61, 0.02) 0%, transparent 50%);
    z-index: 0; /* Za kontentem sekcji, ale paski (z-index: 1) są nad tym tłem */
    /* Upewniamy się że pseudo-element nie powoduje overflow */
    pointer-events: none;
    overflow: hidden;
}

/* Zielony pasek nad sekcją - używamy ::after zamiast drugiego ::before */
.team-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--primary) 50%, transparent 100%);
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
}

.team-section h2 {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.team-section .section-description {
    text-align: center;
        max-width: clamp(37.5rem, 90vw, 37.5rem); /* 600px - responsywny */
    margin: 0 auto 50px;
    color: #666;
    font-size: 1.1rem;
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(clamp(280px, 30vw, 300px), 1fr));
    gap: clamp(2rem, 5vw, 2.5rem);
    margin-top: clamp(2rem, 6vw, 3.125rem);
    /* Naprawa przewijania na mobile */
    touch-action: pan-y;
    overscroll-behavior: none;
    /* Skalowalne właściwości - wszystko auto */
    height: auto;
    min-height: auto;
    max-height: none;
    overflow: visible;
}

.team-card {
    background: rgba(255, 255, 255, 0.95);
    border-radius: clamp(1rem, 3vw, 1.25rem);
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(15px);
    border: clamp(0.0625rem, 0.2vw, 0.0625rem) solid rgba(255, 255, 255, 0.3);
    margin-bottom: clamp(1.5rem, 4vw, 1.875rem);
    position: relative;
    z-index: 3; /* Nad paskami (z-index: 1) i tłem sekcji (z-index: 0) - w kontekście sekcji */
    /* Naprawa przewijania na mobile - nie blokuje przewijania strony */
    touch-action: pan-y;
    overscroll-behavior: none;
    /* Skalowalne właściwości - wszystko auto */
    height: auto;
    min-height: auto;
    max-height: none;
    overflow-x: hidden;
    overflow-y: visible;
}

.team-card:hover {
    transform: translateY(-15px) scale(1.02);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25);
}

.card-image {
    position: relative;
    overflow: hidden;
    height: clamp(250px, 35vw, 300px);
    width: 100%;
}

.card-image img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.4s ease;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.team-card:hover .card-image img {
    transform: scale(1.05);
}

.card-content {
    padding: clamp(1.5rem, 4vw, 1.875rem);
}

.card-content h3 {
    font-size: clamp(1.25rem, 3vw, 1.5rem);
    margin-bottom: clamp(0.75rem, 2vw, 0.9375rem);
    color: var(--primary-dark);
}

.card-description {
    color: #666;
    line-height: 1.6;
    margin-bottom: clamp(1.25rem, 3vw, 1.5625rem);
    font-size: clamp(0.9375rem, 2.5vw, 1rem);
}

.card-buttons {
    display: flex;
    gap: clamp(0.625rem, 2vw, 0.625rem);
    flex-wrap: wrap;
}

.card-buttons .btn {
    flex: 1 1 auto;
    min-width: min(120px, 45%);
    text-align: center;
}

/* ===== SEKCJA KONTAKTOWA ===== */
/* Informacje kontaktowe i formularz */
.contact-section {
    padding: clamp(3rem, 8vw, 6.25rem) 0;
    background: #ffffff; /* pełne tło – nic nie przebija przez sekcję */
    color: var(--primary-dark);
    position: relative;
    overflow: visible; /* Zmieniono z hidden na visible - pozwala na animacje przycisków */
    /* z-index jest już zdefiniowany w grupie sekcji powyżej */
}

/* Subtelne tło z wzorem dla kontaktu */
.contact-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 30% 30%, rgba(6, 79, 61, 0.02) 0%, transparent 50%),
        radial-gradient(circle at 70% 70%, rgba(6, 79, 61, 0.03) 0%, transparent 50%);
    z-index: 0; /* Za kontentem sekcji, ale paski (z-index: 1) są nad tym tłem */
    pointer-events: none;
}

.contact-section h2 {
    text-align: center;
    font-size: clamp(1.75rem, 6vw, 2.5rem);
    margin-bottom: clamp(1rem, 3vw, 1.25rem);
}

.contact-section .section-description {
    text-align: center;
    max-width: min(600px, 90vw);
    margin: 0 auto clamp(2rem, 5vw, 3.125rem);
    color: #666;
    font-size: clamp(0.9375rem, 2.5vw, 1.1rem);
    padding: 0 clamp(1rem, 3vw, 1.5rem);
}

.contact-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: stretch; /* obie kolumny równej wysokości */
    margin-top: clamp(2rem, 5vw, 4rem);
    max-width: min(1400px, 100%);
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 1200px) {
    .contact-container {
        gap: clamp(2rem, 4vw, 3rem);
    }
}

@media (max-width: 992px) {
    .contact-container {
        grid-template-columns: 1fr;
        gap: clamp(2rem, 4vw, 3rem);
    }
}

@media (max-width: 48em) { /* 768px */
    .contact-container {
        gap: clamp(1.5rem, 4vw, 2.5rem);
        margin-top: clamp(2rem, 4vw, 3rem);
    }
    
    .contact-card {
        padding: clamp(1.25rem, 4vw, 1.5625rem) clamp(1rem, 3vw, 1.25rem);
        margin-bottom: clamp(1rem, 3vw, 1.25rem);
    }
    
    .contact-card-header {
        gap: clamp(0.75rem, 2vw, 0.75rem);
        margin-bottom: clamp(1rem, 3vw, 1.25rem);
    }
    
    .contact-icon {
        width: clamp(40px, 8vw, 45px);
        height: clamp(40px, 8vw, 45px);
        font-size: clamp(1rem, 3vw, 1.2rem);
    }
    
    .contact-card-header h3 {
        font-size: clamp(1.125rem, 3vw, 1.2rem);
    }
    
    .contact-item {
        padding: clamp(0.75rem, 2vw, 0.75rem);
        margin-bottom: clamp(0.75rem, 2vw, 0.9375rem);
    }
    
    .contact-item-icon {
        width: clamp(30px, 7vw, 35px);
        height: clamp(30px, 7vw, 35px);
        font-size: clamp(0.875rem, 2.5vw, 1rem);
    }
    
    .contact-label {
        font-size: clamp(0.75rem, 2.5vw, 0.8rem);
    }
    
    .contact-value {
        font-size: clamp(0.9375rem, 2.5vw, 1rem);
    }
    
    .opening-hours-item {
        padding: 10px 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }
    
    .contact-actions {
        flex-direction: column;
        gap: clamp(0.75rem, 2vw, 0.75rem);
    }
    
    .contact-btn {
        min-width: auto;
        width: 100%;
        max-width: 100%;
    }
    
    /* Usunięto duplikaty .map-actions - używamy głównej definicji z flex-direction: row dla większych ekranów */
    .map-header h3 {
        font-size: 1.2rem;
    }
    
    .map-container iframe {
        height: clamp(250px, 50vw, 350px);
        width: 100% !important;
        max-width: 100%;
        min-height: clamp(15.625rem, 35vw, 15.625rem); /* 250px - responsywny */
    }
    
    .map-card {
        padding: clamp(1.25rem, 4vw, 1.5625rem) clamp(1rem, 3vw, 1.25rem);
    }
    
    .map-description {
        padding: clamp(0.9375rem, 2.5vw, 0.9375rem);
        margin-bottom: clamp(1rem, 3vw, 1.25rem);
    }
    
    .map-description p {
        font-size: 0.9rem;
    }
    
    .contact-info {
        height: auto;
    }
    
    .contact-actions-centered {
        margin-top: clamp(3.5rem, 9vw, 4.5rem) !important; /* Zwiększony odstęp na tabletach/mobile */
        gap: clamp(0.75rem, 2vw, 0.9375rem);
    }
    
    .contact-actions-centered .contact-btn {
        min-width: auto;
        width: 100%;
        max-width: min(300px, 90vw);
    }
    
    .cta-box {
        padding: clamp(1.5rem, 4vw, 2.1875rem) clamp(1.25rem, 3vw, 1.5625rem);
        margin-bottom: clamp(1.25rem, 3vw, 1.5625rem);
    }
    
    .cta-box h3 {
        font-size: clamp(1.25rem, 4vw, 1.6rem);
        margin-bottom: clamp(0.75rem, 2vw, 0.9375rem);
    }
    
    .cta-box p {
        font-size: clamp(0.9375rem, 2.5vw, 1rem);
        margin-bottom: clamp(1.25rem, 3vw, 1.5625rem);
    }
}

.cta-box {
    background: var(--gradient-primary);
    color: white;
    padding: 45px 40px;
    border-radius: 24px;
    text-align: center;
    margin-bottom: 35px;
    box-shadow: 0 15px 40px rgba(6, 79, 61, 0.25);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.cta-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
}

.cta-box:hover::before {
    transform: translateX(100%);
}

.cta-box:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 50px rgba(6, 79, 61, 0.3);
}

.cta-box h3 {
    font-size: 2rem;
    margin-bottom: 20px;
    font-weight: 700;
    position: relative;
    z-index: 2;
}

.cta-box p {
    margin-bottom: 30px;
    opacity: 0.95;
    font-size: 1.1rem;
    line-height: 1.6;
    position: relative;
    z-index: 2;
}

.cta-box .btn {
    min-width: 220px;
    position: relative;
    z-index: 2;
    font-weight: 600;
    padding: 15px 30px;
    font-size: 1.1rem;
}

.contact-details h3 {
    font-size: 2rem;
    margin-bottom: 30px;
    color: var(--primary-dark);
    font-weight: 700;
}

.contact-details p {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 1.1rem;
    line-height: 1.6;
    color: #555;
}

.contact-details i {
    color: var(--primary);
    width: 24px;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.opening-hours {
    margin-top: 30px;
}

.opening-hours h4 {
    font-size: 1.3rem;
    margin-bottom: 15px;
    color: var(--primary-dark);
}

.opening-hours p {
    margin-bottom: 8px;
}

.contact-buttons {
    margin-top: 30px;
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

/* Style dla kontenera informacji kontaktowych */
.contact-info {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Style dla wyśrodkowanych przycisków CTA */
.contact-actions-centered {
    display: flex !important;
    flex-direction: row !important; /* Przyciski obok siebie na większych ekranach */
    justify-content: center !important;
    align-items: center !important;
    gap: clamp(1rem, 3vw, 1.25rem) !important; /* Zwiększony gap dla wyraźnego oddzielenia */
    margin-top: clamp(2rem, 5vw, 3.125rem) !important;
    flex-wrap: nowrap !important; /* Przyciski nie powinny się zawijać */
    position: relative !important;
    z-index: 5 !important; /* WARSTWA 5: Przyciski i akcje */
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    padding: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.contact-actions-centered .contact-btn {
    flex: 1 1 0% !important; /* Równy podział przestrzeni */
    min-width: 0 !important;
    width: auto !important;
    max-width: 48% !important; /* Maksymalnie 48% - zostaje miejsce na gap */
    padding: clamp(0.9375rem, 3vw, 1rem) clamp(1.5rem, 4vw, 1.875rem) !important;
    font-size: clamp(0.9375rem, 2.5vw, 1.1rem) !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(0.5rem, 1.5vw, 0.625rem) !important;
    text-decoration: none !important;
    border-radius: clamp(0.75rem, 2.5vw, 0.875rem) !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    z-index: 1 !important; /* Niższy niż container */
    cursor: pointer !important;
    min-height: clamp(48px, 10vw, 52px) !important;
    box-sizing: border-box !important;
    margin: 0 !important; /* Usuń wszystkie marginesy - gap zarządza spacingiem */
    overflow: visible !important; /* Nadpisuje globalne overflow: hidden z .btn */
    white-space: normal !important;
    word-wrap: break-word !important;
    isolation: isolate !important; /* Tworzy nowy stacking context - zapobiega nakładaniu się */
}

.contact-actions-centered .contact-btn i {
    font-size: 1.1rem;
}

/* Style dla przycisków kontaktowych - wyłączamy ::before z globalnych stylów */
/* Zobacz kompletną definicję w linii 2667-2681 */

/* Style dla przycisków kontaktowych - takie same jak główne przyciski na stronie */
.contact-actions-centered .contact-btn.btn-primary {
    background: var(--gradient-primary) !important;
    color: #ffffff !important;
    border: clamp(0.125rem, 0.3vw, 0.125rem) solid rgba(6, 79, 61, 0.3) !important;
    box-shadow: 0 6px 20px rgba(6, 79, 61, 0.3) !important;
    position: relative;
    overflow: hidden;
}

.contact-actions-centered .contact-btn.btn-primary:hover {
    background: var(--gradient-secondary) !important;
    color: #ffffff !important;
    transform: translateY(clamp(-0.125rem, -0.5vw, -0.125rem)) scale(1.02) !important; /* -2px + lekkie powiększenie */
    box-shadow: 0 12px 35px rgba(6, 79, 61, 0.4) !important;
    border-color: rgba(58, 155, 133, 0.8) !important; /* Jaśniejsza zielona ramka przy hover */
}

.contact-actions-centered .contact-btn.btn-outline {
    background: var(--gradient-primary) !important;
    color: #ffffff !important;
    border: clamp(0.125rem, 0.3vw, 0.125rem) solid rgba(6, 79, 61, 0.3) !important;
    box-shadow: 0 4px 15px rgba(6, 79, 61, 0.2) !important;
    position: relative;
    overflow: hidden;
}

.contact-actions-centered .contact-btn.btn-outline:hover {
    background: var(--gradient-secondary) !important;
    color: #ffffff !important;
    transform: translateY(clamp(-0.125rem, -0.5vw, -0.125rem)) scale(1.02) !important; /* -2px + lekkie powiększenie */
    box-shadow: 0 12px 35px rgba(6, 79, 61, 0.4) !important;
    border-color: rgba(58, 155, 133, 0.8) !important; /* Jaśniejsza zielona ramka przy hover */
}

/* Ikony w przyciskach kontaktowych - nad efektem ::before */
.contact-actions-centered .contact-btn i {
    position: relative;
    z-index: 2;
    color: inherit;
}

/* Tekst w przyciskach kontaktowych - nad efektem ::before */
.contact-actions-centered .contact-btn {
    position: relative;
}

.contact-actions-centered .contact-btn > * {
    position: relative;
    z-index: 2;
}

/* Nowe style dla kart kontaktowych */
.contact-card {
    background: rgba(255, 255, 255, 0.95);
    border-radius: clamp(1rem, 3vw, 1.25rem);
    padding: clamp(1.5rem, 4vw, 1.875rem);
    margin-bottom: clamp(1.25rem, 3vw, 1.5625rem);
    box-shadow: 0 10px 30px rgba(6, 79, 61, 0.08);
    backdrop-filter: blur(15px);
    border: clamp(0.0625rem, 0.2vw, 0.0625rem) solid rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.contact-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(6, 79, 61, 0.12);
}

.contact-card-header {
    display: flex;
    align-items: center;
    gap: clamp(0.75rem, 2vw, 0.9375rem);
    margin-bottom: clamp(1.25rem, 3vw, 1.5625rem);
    padding-bottom: clamp(0.9375rem, 2.5vw, 1rem);
    border-bottom: clamp(0.0625rem, 0.2vw, 0.125rem) solid rgba(6, 79, 61, 0.1);
}

/* Specjalne style dla nagłówka w map-card */
.map-card .contact-card-header {
    padding: clamp(1.5rem, 4vw, 2rem) clamp(1.5rem, 4vw, 2rem) clamp(1rem, 3vw, 1.25rem) clamp(1.5rem, 4vw, 2rem) !important; /* Górny padding większy, dolny mniejszy */
    margin: 0 !important;
    border-bottom: clamp(0.0625rem, 0.2vw, 0.125rem) solid rgba(6, 79, 61, 0.08) !important; /* Linia oddzielająca nagłówek */
    width: 100% !important;
    box-sizing: border-box !important;
}

.contact-icon {
    width: clamp(45px, 8vw, 55px);
    height: clamp(45px, 8vw, 55px);
    background: var(--gradient-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: clamp(1.2rem, 3vw, 1.4rem);
    flex-shrink: 0;
    box-shadow: 0 6px 20px rgba(6, 79, 61, 0.2);
}

.contact-card-header h3 {
    font-size: clamp(1.25rem, 3vw, 1.5rem);
    margin: 0;
    color: var(--primary-dark);
    font-weight: 700;
}

.contact-item {
    display: flex;
    align-items: flex-start;
    gap: clamp(0.75rem, 2vw, 0.9375rem);
    margin-bottom: clamp(1rem, 3vw, 1.25rem);
    padding: clamp(0.9375rem, 2.5vw, 0.9375rem);
    border-radius: clamp(0.625rem, 2vw, 0.75rem);
    transition: all 0.3s ease;
}

.contact-item:hover {
    background: rgba(6, 79, 61, 0.05);
    transform: translateX(5px);
}

.contact-item-icon {
    width: clamp(35px, 7vw, 40px);
    height: clamp(35px, 7vw, 40px);
    background: rgba(6, 79, 61, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: clamp(1rem, 2.5vw, 1.1rem);
    flex-shrink: 0;
}

.contact-item-content {
    display: flex;
    flex-direction: column;
    gap: clamp(0.25rem, 1vw, 0.3125rem);
    flex: 1;
}

.contact-label {
    font-size: clamp(0.75rem, 2.5vw, 0.9rem);
    color: #666;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.contact-value {
    font-size: 1.1rem;
    color: var(--primary-dark);
    font-weight: 500;
}

.contact-link {
    color: var(--primary);
    text-decoration: none;
    transition: all 0.3s ease;
}

.contact-link:hover {
    color: var(--primary-dark);
    text-decoration: underline;
}

/* Style dla godzin otwarcia */
.opening-hours-card {
    background: linear-gradient(135deg, rgba(6, 79, 61, 0.05) 0%, rgba(6, 79, 61, 0.02) 100%);
}

.opening-hours-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid rgba(6, 79, 61, 0.1);
}

.opening-hours-item:last-child {
    border-bottom: none;
}

.day {
    font-weight: 600;
    color: var(--primary-dark);
}

.time {
    font-weight: 500;
    color: var(--primary);
}

.time.closed {
    color: #999;
    font-style: italic;
}

/* Usunięto style dla status-indicator */

/* Usunięto duplikat definicji .map-actions - używamy właściwej definicji poniżej */

.contact-btn {
    flex: 1;
    min-width: clamp(11.25rem, 30vw, 12.5rem); /* 180px - 200px responsywny */
    padding: 15px 25px;
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-decoration: none;
    border-radius: clamp(0.75rem, 3vw, 0.75rem); /* 12px */
    transition: all 0.3s ease;
    position: relative;
    z-index: 5; /* WARSTWA 5: Przyciski i akcje */
    cursor: pointer;
}

.contact-btn i {
    font-size: 1.1rem;
}

/* Style dla mapy */
.map-header {
    margin-bottom: 25px;
    text-align: center;
    padding: 25px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(6, 79, 61, 0.08);
    backdrop-filter: blur(15px);
    border: clamp(0.0625rem, 0.2vw, 0.0625rem) solid rgba(255, 255, 255, 0.3);
}

/* Dodatkowe zabezpieczenia dla mapy */
.contact-map {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible;
    display: flex;
    align-items: stretch;
    box-sizing: border-box;
    height: auto !important; /* Automatyczna wysokość - dopasowuje się do zawartości */
    min-height: 0 !important; /* Usuwa minimalne ograniczenia wysokości */
}

.map-card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

.contact-map * {
    max-width: 100% !important;
    box-sizing: border-box;
}

.map-header h3 {
    font-size: 1.4rem;
    margin-bottom: 10px;
    color: var(--primary-dark);
    font-weight: 700;
}

.map-header p {
    color: #666;
    font-size: 1rem;
    margin-bottom: 20px;
}

/* MOBILE-FIRST: Sekcja "Znajdź nas" - podstawowe style dla małych ekranów */
.map-container {
    display: block; /* Pokaż mapę na wszystkich urządzeniach */
    position: relative;
    width: 100%;
    max-width: 100%;
    height: auto; /* Auto na mobile */
    overflow: visible; /* Visible na mobile - zapobiega przycinaniu */
    border-radius: 0.5rem;
    margin: 0; /* Bez marginesów - wyrównanie z resztą karty */
    padding: 0 1.25rem; /* Padding zamiast marginesów dla wyrównania z tekstem */
    box-sizing: border-box;
}

/* Na mobile iframe ma stałą wysokość */
@media (max-width: 767px) {
    .map-container iframe {
        position: relative !important; /* Nie absolute na mobile */
        width: 100% !important;
        height: 300px !important; /* Stała wysokość na mobile */
        border: none;
        border-radius: 0.5rem;
        display: block;
        box-sizing: border-box;
    }
    
    .map-container {
        padding: 0 1.25rem 1rem 1.25rem !important; /* Padding wyrównany z opisem */
    }
}

@media (min-width: 768px) {
    .map-container {
        display: block; /* Pokaż mapę na tabletach i większych */
        position: relative;
        width: 100%;
        max-width: 100%;
        padding-bottom: 50%; /* Mniejszy aspect ratio na tabletach */
        height: 0;
        overflow: hidden;
        border-radius: 1rem;
        box-shadow: 0 4px 12px rgba(6, 79, 61, 0.12);
        background: #f8f9fa;
        border: 1px solid rgba(6, 79, 61, 0.08);
        margin: 0 1.5rem 1.25rem 1.5rem; /* Marginesy dla wyrównania z resztą */
        box-sizing: border-box;
    }
    
    .map-description {
        margin: 0 1.5rem 1.25rem 1.5rem; /* Wyrównanie z mapą na desktop */
        padding: 1.25rem 1.5rem;
    }
    
    .map-actions {
        padding: 1.5rem 1.5rem; /* Wyrównanie z resztą karty */
    }
}

.map-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* Desktop - większa mapa dla lepszej czytelności */
@media (min-width: 1024px) {
    .map-container {
        padding-bottom: 45%;
        min-height: 639px;
        margin: 0 2rem 1.5rem 0rem; /* Większe marginesy na dużych ekranach */
    }
    
    .map-container iframe {
        min-height: 639px;
    }
    
    .map-description {
        margin: 0 2rem 1.5rem 2rem; /* Wyrównanie z mapą */
        padding: 1.5rem 2rem;
    }
    
    .map-description p {
        font-size: 1rem;
        line-height: 1.7;
    }
    
    .map-actions {
        padding: 1.75rem 2rem; /* Większy padding na desktopach */
    }
    
    .map-btn {
        padding: 1.125rem 1.75rem;
        font-size: 1.0625rem;
        min-height: 56px;
        border-radius: 0.875rem;
    }
}

.map-footer {
    text-align: center;
}

.map-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
    padding: 12px 20px;
    border-radius: 10px;
    background: rgba(6, 79, 61, 0.05);
    transition: all 0.3s ease;
    border: clamp(0.125rem, 0.3vw, 0.125rem) solid transparent;
}

.map-link:hover {
    background: var(--gradient-primary);
    color: #ffffff;
    transform: translateY(clamp(-0.125rem, -0.5vw, -0.125rem)); /* -2px */
    box-shadow: 0 8px 25px rgba(6, 79, 61, 0.3);
}

/* MOBILE-FIRST: Karta mapy - podstawowe style */
.map-card {
    background: #ffffff;
    border-radius: 0.75rem;
    padding: 0;
    box-shadow: 0 4px 16px rgba(6, 79, 61, 0.1);
    border: 1px solid rgba(6, 79, 61, 0.1);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    z-index: 1; /* Niższy z-index niż przyciski kontaktowe (z-index: 5) - zapobiega nakładaniu się */
}

@media (min-width: 768px) {
    .map-card {
        border-radius: 1rem;
        box-shadow: 0 6px 20px rgba(6, 79, 61, 0.1);
    }
}

.map-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(6, 79, 61, 0.12);
}

/* MOBILE-FIRST: Opis mapy - proste paddingi bez overflow */
.map-description {
    margin: 0 1.25rem; /* Marginesy boczne dla wyrównania z mapą */
    padding: 1rem; /* Padding wewnętrzny */
    width: calc(100% - 2.5rem); /* Szerokość minus marginesy */
    max-width: 100%;
    box-sizing: border-box;
    background: rgba(6, 79, 61, 0.04);
    border-radius: 0.5rem;
    border-left: 4px solid var(--primary);
    overflow-wrap: break-word;
    word-wrap: break-word;
    overflow: hidden;
}

.map-description p {
    color: #555;
    font-size: 0.875rem;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 100%;
    font-weight: 400;
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
}

/* Tablet i większe */
@media (min-width: 768px) {
    .map-description {
        padding: 1.25rem 1.5rem;
        border-left-width: 5px;
    }
    
    .map-description p {
        font-size: 0.9375rem;
    }
}

/* Desktop */
/* Duplikat usunięty - style dla 1024px+ są już zdefiniowane wyżej */

/* MOBILE-FIRST: Przyciski mapy - kolumnowy układ na małych ekranach */
.map-actions {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    padding: 1.5rem 1.25rem; /* Wyrównanie paddingu z resztą karty */
    box-sizing: border-box;
    border-top: 1px solid rgba(6, 79, 61, 0.08);
    background: rgba(248, 249, 250, 0.3);
}

/* MOBILE-FIRST: Przycisk mapy - pełna szerokość na małych ekranach */
.map-btn {
    width: 100%;
    padding: clamp(0.875rem, 3vw, 1rem) clamp(1.25rem, 4vw, 1.5rem);
    font-size: clamp(0.9375rem, 2.5vw, 1rem);
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(0.5rem, 2vw, 0.75rem);
    text-decoration: none;
    border-radius: clamp(0.625rem, 2vw, 0.875rem);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
    min-height: clamp(2.75rem, 8vw, 3rem); /* 44px - 48px */
    cursor: pointer;
    position: relative;
    overflow: hidden; /* Potrzebne dla efektu ::before */
    letter-spacing: 0.3px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(6, 79, 61, 0.2);
}

/* Włączamy ::before efekty dla przycisków mapy i kontaktowych - spójne z głównymi przyciskami */
.map-btn::before,
.map-btn.btn-primary::before,
.map-btn.btn-outline::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 0;
    height: 100%;
    background: rgba(255, 255, 255, 0.2);
    transition: width 0.6s ease, opacity 0.3s ease;
    transform: translateX(-50%);
    z-index: 1;
    pointer-events: none;
    opacity: 0; /* Całkowicie niewidoczny w stanie początkowym */
}

.map-btn:hover::before,
.map-btn.btn-primary:hover::before,
.map-btn.btn-outline:hover::before {
    width: 100%;
    opacity: 1; /* Widoczny przy hover */
}

/* Efekt ::before dla przycisków kontaktowych */
.contact-actions-centered .contact-btn::before,
.contact-actions-centered .contact-btn.btn-primary::before,
.contact-actions-centered .contact-btn.btn-outline::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 0;
    height: 100%;
    background: rgba(255, 255, 255, 0.2);
    transition: width 0.6s ease, opacity 0.3s ease;
    transform: translateX(-50%);
    z-index: 0;
    pointer-events: none;
    opacity: 0; /* Całkowicie niewidoczny w stanie początkowym */
}

.contact-actions-centered .contact-btn:hover::before,
.contact-actions-centered .contact-btn.btn-primary:hover::before,
.contact-actions-centered .contact-btn.btn-outline:hover::before {
    width: 100%;
    opacity: 1; /* Widoczny przy hover */
}

/* Style dla przycisków mapy - takie same jak główne przyciski na stronie */
.map-btn.btn-primary {
    background: var(--gradient-primary);
    color: #ffffff !important;
    border: clamp(0.125rem, 0.3vw, 0.125rem) solid rgba(6, 79, 61, 0.3);
    box-shadow: 0 6px 20px rgba(6, 79, 61, 0.3);
    font-weight: 600;
    position: relative;
    overflow: hidden;
}

.map-btn.btn-primary:hover {
    background: var(--gradient-secondary);
    color: #ffffff;
    transform: translateY(clamp(-0.125rem, -0.5vw, -0.125rem)) scale(1.02); /* -2px + lekkie powiększenie */
    box-shadow: 0 12px 35px rgba(6, 79, 61, 0.4);
    border-color: rgba(58, 155, 133, 0.8); /* Jaśniejsza zielona ramka przy hover */
}

.map-btn.btn-outline {
    background: var(--gradient-primary);
    color: #ffffff !important;
    border: clamp(0.125rem, 0.3vw, 0.125rem) solid rgba(6, 79, 61, 0.3);
    box-shadow: 0 4px 15px rgba(6, 79, 61, 0.2);
    font-weight: 600;
    position: relative;
    overflow: hidden;
}

.map-btn.btn-outline:hover {
    background: var(--gradient-secondary);
    color: #ffffff;
    transform: translateY(clamp(-0.125rem, -0.5vw, -0.125rem)) scale(1.02); /* -2px + lekkie powiększenie */
    box-shadow: 0 12px 35px rgba(6, 79, 61, 0.4);
    border-color: rgba(58, 155, 133, 0.8); /* Jaśniejsza zielona ramka przy hover */
}

/* Ikony i tekst w przyciskach mapy - nad efektem ::before */
.map-btn i {
    position: relative;
    z-index: 2;
    color: inherit;
}

.map-btn > * {
    position: relative;
    z-index: 2;
}

/* Usunięto konfliktujące style - używamy ujednoliconych stylów .btn */

/* Usunięto konfliktujący styl - używamy .map-container iframe */

/* Tablet i większe - przyciski obok siebie */
@media (min-width: 768px) {
    .map-actions {
        flex-direction: row;
        gap: 1rem;
        padding: 1.5rem 1.5rem; /* Wyrównanie z resztą karty */
    }
    
    .map-btn {
        flex: 1;
        width: auto;
        min-height: 56px;
        font-weight: 600;
    }
    
    .contact-actions-centered {
        flex-direction: row;
        justify-content: center;
        gap: 1rem;
    }
    
    .contact-actions-centered .contact-btn {
        flex: 1;
        max-width: 300px;
    }
}

/* ===== STOPKA ===== */
/* Stopka strony z linkami i informacjami */
.footer {
    background: linear-gradient(135deg, rgba(6, 79, 61, 0.92) 0%, rgba(11, 26, 23, 0.92) 100%);
    color: #fff;
    padding: 40px 0 20px;
    position: relative;
    overflow: visible;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    min-height: 400px;
}

.footer::before {
    display: none;
}

.footer-content {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2rem;
    margin-bottom: 2rem;
    align-items: start;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 clamp(1.25rem, 4vw, 1.25rem); /* 20px - responsywny */
    min-height: clamp(18.75rem, 40vw, 18.75rem); /* 300px - responsywny */
}

@media (max-width: 1200px) {
    .footer-content {
        gap: 2.5rem;
    }
}

@media (max-width: 48em) { /* 768px */
    .footer-content {
        grid-template-columns: 1fr;
        gap: 2.5rem;
        text-align: center;
    }
}

.footer-logo {
    text-align: center;
}

.footer-logo img {
    margin-bottom: clamp(1rem, 3vw, 1.25rem);
    height: clamp(150px, 15vw, 210px); /* Responsywny rozmiar */
    width: auto;
    max-width: min(480px, 90vw); /* Responsywny max-width */
    transition: all 0.3s ease;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.footer-logo img:hover {
    transform: scale(1.05);
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.3));
}

.footer-logo p {
    color: rgba(255, 255, 255, 0.95);
    font-size: 1.15rem;
    line-height: 1.7;
    font-weight: 500;
}

.footer-links, .footer-social {
    text-align: center;
}

.footer-links h4, .footer-social h4 {
    font-size: 1.3rem;
    margin-bottom: 20px;
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.footer-links h4::after, .footer-social h4::after {
    content: '';
    display: block;
    width: 40px;
    height: clamp(0.125rem, 0.3vw, 0.125rem); /* 2px */
    background: rgba(255, 255, 255, 0.5);
    margin: 12px auto;
    border-radius: 1px;
}

.footer-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 12px;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 1rem;
    display: block;
    padding: 6px 0;
    font-weight: 400;
    position: relative;
}

.footer-links a::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.7);
    transition: width 0.3s ease;
}

.footer-links a:hover {
    color: #fff;
}

.footer-links a:hover::before {
    width: 20px;
}

.footer-social {
    text-align: center;
}

.social-icons {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 20px;
}

.social-icons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-radius: 50%;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 1.2rem;
    border: clamp(0.0625rem, 0.2vw, 0.0625rem) solid rgba(255, 255, 255, 0.2);
}

.social-icons a:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(clamp(-0.125rem, -0.5vw, -0.125rem)); /* -2px */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.footer-bottom {
    text-align: center;
    padding-top: 25px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    margin-top: 2rem;
}

.footer-bottom p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
    margin: 8px 0;
}

.footer-bottom a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    transition: all 0.3s ease;
    font-weight: 400;
}

.footer-bottom a:hover {
    color: #fff;
    text-decoration: underline;
}

/* Usunięto sekcję opinii */

/* Usunięto style opinii */

/* Usunięto style kart opinii */

/* Usunięto wszystkie style opinii */

/* ===== SEKCJA OPINII ===== */
.reviews-section {
    padding: clamp(3rem, 8vw, 5rem) 0;
    background: transparent;
    /* Tło przezroczyste - pozwala paskom być w pełni widoczne */
    position: relative;
}

/* Zielony pasek nad sekcją opinii */
.reviews-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--primary) 50%, transparent 100%);
    z-index: 2; /* Nad paskami dekoracyjnymi */
}

/* ===== RESPONSYWNOŚĆ SEKCJI OPINII ===== */
@media (max-width: 1200px) {
    .reviews-grid {
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
        gap: 4.5rem 4rem; /* Maksymalnie zwiększone odstępy na tabletach */
        max-width: 1000px;
    }
}

@media (max-width: 48em) { /* 768px */
    .reviews-section {
        padding: 4rem 0;
    }
    
    .reviews-header {
        margin-bottom: 3rem;
    }
    
    .reviews-section h2 {
        font-size: 2.25rem;
    }
    
    .reviews-subtitle {
        font-size: 1.1rem;
    }
    
    .reviews-grid {
        grid-template-columns: 1fr;
        gap: 4rem; /* Maksymalnie zwiększone odstępy na mobile */
        padding: 4rem 0; /* Maksymalnie zwiększony padding na mobile */
        min-height: auto; /* Usuń minimalną wysokość na mobile */
    }
    
    .review-card {
        padding: 1.5rem;
        min-height: 280px;
    }
    
    .review-text {
        -webkit-line-clamp: 6;
        line-clamp: 6;
    }
    
    .google-reviews-btn {
        padding: 0.875rem 1.5rem;
        font-size: 1rem;
        gap: 0.5rem;
    }
    
    .review-card__header {
        margin-bottom: 1rem;
    }
    
    .review-card__content {
        margin-bottom: 1rem;
    }
}

@media (max-width: 30em) { /* 480px */
    .reviews-section {
        padding: 3rem 0;
    }
    
    .reviews-header {
        margin-bottom: 2rem;
    }
    
    .reviews-section h2 {
        font-size: 1.875rem;
    }
    
    .reviews-subtitle {
        font-size: 1rem;
    }
    
    .reviews-grid {
        gap: 3.5rem; /* Maksymalnie zwiększone odstępy na małych ekranach */
        min-height: auto; /* Usuń minimalną wysokość na małych ekranach */
    }
    
    .review-card {
        padding: 1.25rem;
        min-height: 260px;
    }
    
    .review-text {
        -webkit-line-clamp: 5;
        line-clamp: 5;
        font-size: 1rem;
        line-height: 1.6;
    }
    
    .google-reviews-btn {
        padding: 0.75rem 1.25rem;
        font-size: 0.9rem;
        gap: 0.4rem;
    }
    
    .author-avatar {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
    
    .author-name {
        font-size: 1rem;
    }
    
    .review-date {
        font-size: 0.85rem;
    }
    
    .reviews-widget {
        margin: 2rem 0;
        padding: 1.5rem 1rem;
    }
    
    .reviews-cta {
        margin-top: 2rem;
        padding: 1rem 0;
    }
}

/* ===== ANIMACJE I MIKROINTERAKCJE ===== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(clamp(1.875rem, 4vw, 1.875rem)); /* 30px */
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInFromLeft {
    from {
        opacity: 0;
        transform: translateX(clamp(-1.875rem, -4vw, -1.875rem)); /* -30px */
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInFromRight {
    from {
        opacity: 0;
        transform: translateX(clamp(1.875rem, 4vw, 1.875rem)); /* 30px */
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes shimmer {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

/* Animacje dla kart opinii */
.review-card {
    animation: fadeInUp 0.6s ease-out;
}

.review-card:nth-child(1) { animation-delay: 0.1s; }
.review-card:nth-child(2) { animation-delay: 0.2s; }
.review-card:nth-child(3) { animation-delay: 0.3s; }
.review-card:nth-child(4) { animation-delay: 0.4s; }
.review-card:nth-child(5) { animation-delay: 0.5s; }

/* Animacja dla przycisku Google */
.google-reviews-btn {
    animation: scaleIn 0.8s ease-out 0.6s both;
}

/* Hover effects dla kart */
.review-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 50px rgba(6, 79, 61, 0.15);
    border-color: rgba(6, 79, 61, 0.1);
}

.review-card:hover .author-avatar {
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(6, 79, 61, 0.3);
}

/* Focus states dla dostępności */
.google-reviews-btn:focus {
    outline: clamp(0.125rem, 0.3vw, 0.125rem) solid var(--primary);
    outline-offset: clamp(0.125rem, 0.3vw, 0.125rem);
}

.review-card:focus {
    outline: clamp(0.125rem, 0.3vw, 0.125rem) solid var(--primary);
    outline-offset: clamp(0.125rem, 0.3vw, 0.125rem);
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .review-card,
    .google-reviews-btn,
    .author-avatar {
        transition: none;
        animation: none;
    }
    
    .review-card:hover {
        transform: none;
    }
    
    .google-reviews-btn:hover {
        transform: none;
    }
}

/* High contrast mode support */
@media (prefers-contrast: more) {
    .review-card {
        border: 2px solid var(--primary-dark);
    }
    
    .google-reviews-btn {
        border: 2px solid white;
    }
}

/* ===== SEKCJA GRUP DOCELOWYCH ===== */
/* Grupy pacjentów - sportowcy, seniorzy, itp. */
.target-groups-section {
    padding: clamp(4rem, 10vw, 6.25rem) 0;
    background: transparent;
    /* Tło przezroczyste - pozwala paskom być w pełni widoczne */
    position: relative;
    overflow: visible;
    margin: clamp(2rem, 6vw, 3.75rem) 0;
    /* z-index jest już zdefiniowany w grupie sekcji powyżej */
    /* Naprawa przewijania na mobile - pozwala na normalne przewijanie strony */
    touch-action: pan-y;
    overscroll-behavior: none;
    /* Usunięto -webkit-overflow-scrolling: touch - może powodować osobny scroll */
    /* Skalowalne właściwości - wszystko auto, brak stałych wysokości */
    height: auto;
    min-height: auto;
    max-height: none;
    /* Usunięcie właściwości które mogą powodować stacking context i blokować scroll */
    transform: none;
    will-change: auto;
    contain: none;
}

/* Subtelne tło z wzorem dla grup docelowych */
.target-groups-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 80% 20%, rgba(6, 79, 61, 0.03) 0%, transparent 50%),
        radial-gradient(circle at 20% 80%, rgba(6, 79, 61, 0.02) 0%, transparent 50%);
    z-index: 0; /* Za kontentem sekcji, ale paski (z-index: 1) są nad tym tłem */
    /* Upewniamy się że pseudo-element nie powoduje overflow */
    pointer-events: none;
    overflow: hidden;
}

/* Zielony pasek nad sekcją */
.target-groups-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--primary) 50%, transparent 100%);
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
}

/* Nowy profesjonalny układ dla grup docelowych */
.target-groups-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(1.5rem, 4vw, 2rem);
    margin-top: clamp(2rem, 6vw, 4rem);
    max-width: min(1600px, 100%);
    margin-left: auto;
    margin-right: auto;
    /* Naprawa przewijania na mobile */
    touch-action: pan-y;
    overscroll-behavior: none;
    /* Skalowalne właściwości - wszystko auto */
    height: auto;
    min-height: auto;
    max-height: none;
    overflow: visible;
}

@media (max-width: 1200px) {
    .target-groups-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: clamp(1.5rem, 4vw, 2rem);
    }
}

@media (max-width: 992px) {
    .target-groups-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: clamp(1.25rem, 3.5vw, 1.8rem);
    }
}

@media (max-width: 48em) { /* 768px */
    /* Target groups section mobile - naprawa przewijania - AGRESYWNE ROZWIĄZANIE */
    .target-groups-section {
        touch-action: pan-y !important;
        overscroll-behavior: none !important;
        /* Usunięto -webkit-overflow-scrolling - może powodować osobny scroll */
        overflow: visible !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        /* Usunięcie isolation które może powodować problemy */
        isolation: auto !important;
        /* Usunięcie właściwości które mogą powodować stacking context */
        transform: none !important;
        will-change: auto !important;
        contain: none !important;
        /* Wymuszenie że sekcja nie może mieć scrolla */
        -webkit-overflow-scrolling: auto !important;
        /* Upewniamy się że sekcja nie przechwytuje touch events */
        pointer-events: auto !important;
        /* Position: relative jest potrzebne dla pseudo-elementów ::after (paski) */
        position: relative !important;
        /* z-index: 2 jest potrzebny dla pasków - nie zmieniamy na auto */
        z-index: 2 !important;
    }
    
    .target-groups-section .container {
        overflow: visible !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
        height: auto !important;
        max-height: none !important;
        /* Upewniamy się że kontener nie tworzy scrolla */
        position: relative !important;
    }
    
    /* Wszystkie elementy wewnątrz target-groups-section - skalowalne - AGRESYWNE */
    .target-groups-section * {
        max-height: none !important;
        height: auto !important;
        /* Usunięcie właściwości które mogą powodować stacking context */
        transform: none !important;
        will-change: auto !important;
        contain: none !important;
    }
    
    .target-groups-section *:not(.group-icon) {
        overflow-y: visible !important;
        overflow: visible !important;
        min-height: auto !important;
        /* Wymuszenie że elementy nie mogą mieć scrolla */
        -webkit-overflow-scrolling: auto !important;
    }
    
    /* Pseudo-elementy też skalowalne - ale paski muszą być widoczne */
    .target-groups-section::before {
        overflow: hidden !important;
        pointer-events: none !important;
        transform: none !important;
        will-change: auto !important;
    }
    
    /* Pasek ::after musi być widoczny - nie usuwamy transform dla niego */
    .target-groups-section::after {
        overflow: hidden !important;
        pointer-events: none !important;
        /* transform: translateX(-50%) jest potrzebny dla pozycjonowania paska */
        /* Nie usuwamy transform - pasek musi być widoczny */
        will-change: auto !important;
        display: block !important;
        content: '' !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 1px !important;
        background: linear-gradient(90deg, transparent 0%, var(--primary) 50%, transparent 100%) !important;
        z-index: 2 !important;
    }
    
    /* Usuwamy focus states które mogą powodować problemy */
    .target-groups-section:focus,
    .target-groups-section:focus-within,
    .target-groups-section:active {
        overflow: visible !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
        height: auto !important;
        max-height: none !important;
        outline: none !important;
    }
    
    /* Zapobieganie outline po kliknięciu */
    .target-groups-section:focus-visible {
        outline: none !important;
    }
    
    .target-groups-grid {
        grid-template-columns: 1fr;
        gap: clamp(1.25rem, 4vw, 1.5rem);
        margin-top: clamp(2rem, 5vw, 3rem);
        touch-action: pan-y !important;
        overscroll-behavior: none !important;
        overflow: visible !important;
        height: auto !important;
        max-height: none !important;
    }
    
    .target-group-card {
        padding: clamp(1.5rem, 4vw, 1.5625rem) clamp(1.25rem, 3vw, 1.25rem);
        margin-bottom: 0;
        text-align: left;
        min-height: auto !important;
        height: auto !important;
        touch-action: pan-y !important;
        overscroll-behavior: none !important;
        overflow: hidden !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
        max-height: none !important;
        /* Upewniamy się że karta dopasowuje się do zawartości */
        flex-shrink: 0 !important;
        flex-grow: 0 !important;
    }
    
    .group-icon {
        width: clamp(3.75rem, 12vw, 4.5rem) !important; /* 60px - 72px - większe dla mobile */
        height: clamp(3.75rem, 12vw, 4.5rem) !important; /* 60px - 72px */
        min-width: clamp(3.75rem, 12vw, 4.5rem) !important;
        min-height: clamp(3.75rem, 12vw, 4.5rem) !important;
        font-size: clamp(1.5rem, 5vw, 1.875rem) !important; /* 24px - 30px - większe ikony */
        margin: 0 0 clamp(1rem, 3vw, 1.25rem) 0 !important;
        /* Upewniamy się że zielone kółko jest dobrze widoczne */
        box-shadow: 0 clamp(0.25rem, 1vw, 0.375rem) clamp(0.625rem, 2vw, 0.9375rem) rgba(6, 79, 61, 0.25) !important;
        /* Zachowujemy gradient i border-radius */
        background: var(--gradient-primary) !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
    }
    
    /* Ikony wewnątrz zielonych kółek - większe i lepiej widoczne */
    .group-icon i {
        font-size: clamp(1.5rem, 5vw, 1.875rem) !important; /* 24px - 30px */
        color: white !important;
        z-index: 2 !important;
    }
    
    .target-group-card h3 {
        font-size: clamp(1.125rem, 3vw, 1.2rem);
        margin-bottom: clamp(0.75rem, 2vw, 0.75rem);
        text-align: left;
    }
    
    .target-group-card p {
        font-size: clamp(0.875rem, 2.5vw, 0.9375rem);
        line-height: 1.5;
        text-align: left;
    }
}

/* Duplikat usunięty - używamy głównego stylu powyżej */


.target-groups-section .container {
    position: relative;
    z-index: 4; /* WARSTWA 4: Kontenery */
}

.target-groups-section h2 {
    text-align: center;
    font-size: clamp(1.75rem, 6vw, 2.5rem);
    margin-bottom: clamp(1rem, 3vw, 1.25rem);
    position: relative;
}

.target-groups-section h2::after { content: none !important; display: none !important; }

.section-description {
    text-align: center;
    max-width: min(800px, 90vw);
    margin: 0 auto clamp(2rem, 5vw, 3.125rem);
    color: #666;
    font-size: clamp(0.9375rem, 2.5vw, 1.1rem);
    line-height: 1.6;
    padding: 0 clamp(1rem, 3vw, 1.5rem);
}

/* Duplikat usunięty - używamy głównego stylu powyżej */

.target-group-card {
    background: rgba(255, 255, 255, 0.98);
    padding: clamp(1.5rem, 4vw, 2.1875rem) clamp(1.25rem, 3vw, 1.5625rem);
    border-radius: clamp(1rem, 3vw, 1.5rem);
    text-align: left;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 8px 32px rgba(6, 79, 61, 0.08);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    position: relative;
    z-index: 3; /* Nad paskami (z-index: 1) i tłem sekcji - w kontekście sekcji */
    overflow: hidden;
    margin-bottom: 0;
    /* Usunięto min-height - może powodować problemy z overflow na mobile */
    height: auto;
    min-height: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    /* Naprawa przewijania na mobile - nie blokuje przewijania strony */
    touch-action: pan-y;
    overscroll-behavior: none;
    overflow-x: hidden;
    overflow-y: visible;
}

.target-group-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--gradient-primary);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.target-group-card:hover::before {
    transform: scaleX(1);
}

.target-group-card:hover {
    transform: translateY(-8px) scale(1.01);
    box-shadow: 0 20px 50px rgba(6, 79, 61, 0.15);
    border-color: rgba(6, 79, 61, 0.1);
}

.group-icon {
    width: clamp(55px, 10vw, 70px);
    height: clamp(55px, 10vw, 70px);
    margin: 0 0 clamp(1rem, 3vw, 1.25rem) 0;
    background: var(--gradient-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: clamp(1.5rem, 4vw, 1.8rem);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(6, 79, 61, 0.2);
    flex-shrink: 0;
}

.group-icon::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
}

.group-icon i {
    position: relative;
    z-index: 2;
    transition: transform 0.3s ease;
}

.target-group-card:hover .group-icon {
    transform: scale(1.15) rotate(10deg); /* Bardziej dynamiczna animacja - większe powiększenie i obrót */
    box-shadow: 0 12px 30px rgba(6, 79, 61, 0.25);
    animation: iconBounce 0.6s ease-in-out; /* Dodanie animacji bounce */
}

.target-group-card:hover .group-icon i {
    transform: scale(1.2) rotate(-10deg); /* Kontr-rotacja dla większego efektu */
}

/* Animacja bounce dla ikony */
@keyframes iconBounce {
    0%, 100% { 
        transform: scale(1.15) rotate(10deg) translateY(0);
    }
    50% { 
        transform: scale(1.2) rotate(10deg) translateY(-5px);
    }
}

.target-group-card h3 {
    font-size: 1.4rem;
    margin-bottom: 15px;
    color: var(--primary-dark);
    font-weight: 700;
    line-height: 1.3;
    text-align: left;
}

.target-group-card p {
    color: #555;
    line-height: 1.6;
    font-size: 1rem;
    flex-grow: 1;
    text-align: left;
    margin: 0;
}

/* ===== SEKCJA OPINII GOOGLE ===== */
/* Opinie z Google Reviews */
.google-reviews-section {
    padding: 80px 0;
    background: transparent;
    position: relative;
}

/* Zielony pasek nad sekcją */
.google-reviews-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--primary) 50%, transparent 100%);
    z-index: 1;
}


.google-reviews-section .container {
    position: relative;
    z-index: 4; /* WARSTWA 4: Kontenery */
}

.reviews-header {
    text-align: center;
    margin-bottom: 50px;
}

.reviews-header h2 {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.reviews-header h2::after { content: none !important; display: none !important; }

.google-reviews-widget {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    border: clamp(0.0625rem, 0.2vw, 0.0625rem) solid rgba(255, 255, 255, 0.2);
}

/* Usunięto niepotrzebne style slidera - używamy prostego grid */

/* Responsywność dla nowego układu grid */
@media (max-width: 1200px) {
    .reviews-grid {
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
        gap: 1.5rem;
        max-width: 1000px;
    }
}

/* Usunięto duplikat stylów - używamy głównego stylu powyżej */

/* Usunięto duplikaty stylów - używamy głównych stylów powyżej */

/* Widget Google Reviews */
.reviews-widget {
    margin: 4rem 0;
    padding: 2rem 0;
    text-align: center;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.reviews-widget .elfsight-app-751eb383-b86b-4e0e-89ec-95d909934ff7 {
    max-width: 100%;
    margin: 0 auto;
}

/* CTA dla opinii - wyśrodkowany przycisk */
.reviews-cta {
    text-align: center;
    margin-top: 3rem;
    padding: 2rem 0;
}

.google-reviews-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background: linear-gradient(135deg, #4285F4 0%, #34A853 50%, #FBBC05 100%);
    color: white;
    padding: 1rem 2rem;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 20px rgba(66, 133, 244, 0.3);
    border: none;
    outline: none;
    position: relative;
    overflow: hidden;
}

.google-reviews-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    max-width: 100vw; /* ZAPOBIEGA WYJŚCIU POZA EKRAN */
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.google-reviews-btn:hover::before {
    left: 100%;
}

.google-reviews-btn:hover {
    transform: translateY(clamp(-0.125rem, -0.5vw, -0.125rem)); /* -2px */
    box-shadow: 0 8px 30px rgba(66, 133, 244, 0.4);
}

.google-reviews-btn:active {
    transform: translateY(0);
}

.google-reviews-btn .google-icon {
    flex-shrink: 0;
}

.google-reviews-btn .external-link-icon {
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.google-reviews-btn:hover .external-link-icon {
    transform: translateX(2px);
}

/* ===== NAWIGACJA ===== */
/* Navbar styles are handled by navbar-unified.css */

.cart-icon {
    color: var(--text-dark);
    font-size: 1.2rem;
    transition: color 0.3s ease;
}

.cart-icon:hover {
    color: #1999a1;
}

@media (max-width: 900px) {
    /* Navbar styles are handled by navbar-unified.css */
}

/* Responsive styles for mobile */
@media (max-width: 48em) { /* 768px */
    /* Navbar styles are handled by navbar-unified.css */
    
    .hero-content h1 {
        font-size: 2rem;
    }
    
    .hero-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .hero-buttons .btn {
        width: 100%;
        max-width: clamp(18.75rem, 50vw, 18.75rem); /* 300px - responsywny */
    }
    
    /* Hero features tablet optimization */
    .hero-features {
        margin: 1rem 0;
        gap: 0.8rem;
    }
    
    .feature-item {
        padding: 0.7rem;
        gap: 0.8rem;
    }
    
    .feature-icon {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
    
    .feature-item span {
        font-size: 0.9rem;
    }
    
    .services-grid, .benefits-grid {
        grid-template-columns: 1fr;
    }
    
    .testimonials-grid {
        grid-template-columns: 1fr;
    }
    
    .contact-container,
    .contact-content {
        flex-direction: column;
    }
    
    .banner-content {
        flex-direction: column;
    }
    
    .banner-image {
        margin-top: 30px;
    }
    
    .contact-map {
        height: clamp(18.75rem, 40vw, 18.75rem); /* 300px - responsywny */
    }
    
    .specialization-list {
        grid-template-columns: 1fr;
    }
    
    .about-image {
        margin-top: 30px;
    }
    
    .footer-column {
        margin-bottom: 30px;
    }
    
    .cta-section .btn {
        margin: 10px 5px;
    }
    
    .team-card {
        flex-direction: column;
    }
    
    .card-image {
        height: clamp(15.625rem, 35vw, 15.625rem); /* 250px - responsywny */
    }
}

@media (max-width: 30em) { /* 480px */
    /* Podstawowe ustawienia */
    body {
        font-size: 14px;
        line-height: 1.5;
        padding-top: 0; /* Usunięto padding - navbar sticky na samej górze */
    }
    
    .container {
        padding: 0 15px;
        max-width: 100%;
    }
    
    section {
        padding: 60px 0;
    }
    
    h1 {
        font-size: 1.8rem;
        line-height: 1.3;
    }
    
    h2 {
        font-size: 1.5rem;
        line-height: 1.3;
    }
    
    h3 {
        font-size: 1.3rem;
        line-height: 1.3;
    }
    
    p {
        font-size: 0.95rem;
        line-height: 1.5;
    }
    
    /* Navbar styles are handled by navbar-unified.css */
    
    .hero-section {
        padding: 40px 15px;
        text-align: left;
    }
    
    .hero-content {
        flex-direction: column;
        gap: 25px;
    }
    
    .hero-text {
        width: 100%;
        margin-bottom: 15px;
    }
    
    .hero-content h1 {
        font-size: 1.8rem;
        line-height: 1.2;
    }
    
    .hero-content p {
        font-size: 1rem;
        line-height: 1.5;
    }
    
    .hero-image img {
        max-width: 100%;
        height: auto;
        width: 100%;
        max-width: 400px;
    }
    
    .btn {
        padding: 10px 20px;
        font-size: 14px;
        border-radius: 6px;
    }
    
    .btn-secondary {
        padding: 8px 16px;
        font-size: 13px;
    }
    
    .hero-buttons {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }
    
    .card {
        margin-bottom: 20px;
        padding: 20px 15px;
    }
    
    .card-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .card h3 {
        font-size: 1.2rem;
        margin-bottom: 10px;
    }
    
    .card p {
        font-size: 0.9rem;
        line-height: 1.4;
    }
    
    .team-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }
    
    .team-member {
        margin-bottom: 25px;
    }
    
    .team-member img {
        width: 100%;
        height: 200px;
        object-fit: cover;
        border-radius: 10px;
    }
    
    .team-member h3 {
        font-size: 1.2rem;
        margin-bottom: 8px;
    }
    
    .team-member p {
        font-size: 0.9rem;
        line-height: 1.4;
    }
    
    .services-grid {
        grid-template-columns: 1fr; /* 1 kolumna na bardzo małych ekranach */
        gap: clamp(1rem, 3vw, 1.5rem);
    }
    
    .service-card {
        margin-bottom: clamp(1rem, 3vw, 1.5rem);
        padding: clamp(1.25rem, 4vw, 1.5rem) clamp(0.9375rem, 3vw, 1.5rem);
    }
    
    .service-card h3 {
        font-size: clamp(1.125rem, 3vw, 1.3rem);
        margin-bottom: clamp(0.75rem, 2vw, 1rem);
    }
    
    .service-card p {
        font-size: clamp(0.875rem, 2vw, 1rem);
        line-height: 1.4;
    }
    
    .contact-content {
        flex-direction: column;
        gap: 25px;
    }
    
    .contact-info {
        width: 100%;
    }
    
    .contact-form {
        width: 100%;
    }
    
    .form-group {
        margin-bottom: 20px;
    }
    
    .form-control {
        padding: 12px 15px;
        font-size: 14px;
    }
    
    textarea.form-control {
        min-height: 120px;
        resize: vertical;
    }
    
    .footer-content {
        flex-direction: column;
        gap: 25px;
        text-align: center;
    }
    
    .footer-section {
        width: 100%;
    }
    
    .footer-section h3 {
        font-size: 1.2rem;
        margin-bottom: 15px;
    }
    
    .footer-section p,
    .footer-section li {
        font-size: 0.9rem;
        line-height: 1.4;
    }
    
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    table {
        font-size: 0.8rem;
    }
    
    th, td {
        padding: 8px 6px;
        font-size: 0.8rem;
    }
    
    .page-banner {
        padding: 60px 0;
    }
    
    .page-banner .container {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }
    
    .page-banner .hero-content {
        order: 1;
        max-width: 100%;
    }
    
    .page-banner .hero-image {
        order: 2;
        margin-top: 20px;
    }
    
    .page-banner .hero-image img {
        max-width: 100%;
        height: auto;
    }
    
    .page-banner h1 {
        font-size: 1.8rem;
        line-height: 1.2;
    }
    
    .page-banner p {
        font-size: 1rem;
        line-height: 1.5;
    }
    
    .voucher-card {
        margin-bottom: 20px;
        padding: 20px 15px;
    }
    
    .voucher-card h3 {
        font-size: 1.2rem;
        margin-bottom: 10px;
    }
    
    .voucher-card .price {
        font-size: 1.5rem;
        margin-bottom: 10px;
    }
    
    .voucher-card p {
        font-size: 0.9rem;
        line-height: 1.4;
    }
    
    .faq-item {
        margin-bottom: 15px;
    }
    
    .faq-question {
        padding: 15px;
        font-size: 0.9rem;
    }
    
    .faq-answer {
        padding: 15px;
        font-size: 0.85rem;
    }
    
    .cart-item {
        flex-direction: column;
        gap: 15px;
    }
    
    .cart-item-info {
        width: 100%;
    }
    
    .cart-item-actions {
        width: 100%;
        justify-content: center;
    }
    
    .quantity-controls {
        justify-content: center;
    }
    
    .quantity-btn {
        padding: 8px 12px;
    }
    
    .quantity-input {
        width: 60px;
        text-align: center;
    }
    
    .pricing-table {
        font-size: 14px;
    }
    
    .pricing-table th {
        padding: 10px 8px;
        font-size: 0.9rem;
    }
    
    .pricing-table td {
        padding: 8px 6px;
        font-size: 0.8rem;
    }
    
    .contact-map {
        height: clamp(15.625rem, 35vw, 15.625rem); /* 250px - responsywny */
    }
    
    .specialization-list {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .specialization-item {
        padding: 20px 15px;
    }
    
    .specialization-item h3 {
        font-size: 1.1rem;
        margin-bottom: 10px;
    }
    
    .specialization-item p {
        font-size: 0.9rem;
        line-height: 1.4;
    }
    
    .form-group {
        margin-bottom: 20px;
    }
    
    .form-control {
        padding: 12px 15px;
        font-size: 14px;
        border-radius: 6px;
        border: 1px solid #ddd;
        width: 100%;
        transition: border-color 0.3s ease;
    }
    
    .form-control:focus {
        outline: none;
        border-color: var(--primary);
        box-shadow: 0 0 0 2px rgba(6, 79, 61, 0.1);
    }
    
    .form-control::placeholder {
        color: #999;
        font-size: 14px;
    }
    
    textarea.form-control {
        min-height: 120px;
        resize: vertical;
    }
    
    select.form-control {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
        background-position: right 12px center;
        background-repeat: no-repeat;
        background-size: 16px;
        padding-right: clamp(1.25rem, 4vw, 2.5rem); /* 20px - 40px responsywny */
        box-sizing: border-box;
        max-width: 100%;
    }
    
    label {
        display: block;
        margin-bottom: 8px;
        font-weight: 600;
        color: var(--text-dark);
        font-size: 14px;
    }
    
    .required {
        color: var(--danger);
    }
    
    .form-control.error {
        border-color: var(--danger);
    }
    
    .form-control.success {
        border-color: var(--success);
    }
    
    .error-message {
        color: var(--danger);
        font-size: 12px;
        margin-top: 5px;
    }
    
    .success-message {
        color: var(--success);
        font-size: 12px;
        margin-top: 5px;
    }
    
    .btn-submit {
        background: var(--gradient-primary);
        color: white;
        padding: 15px 30px;
        border: none;
        border-radius: 8px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        width: 100%;
        font-size: 16px;
    }
    
    .btn-submit:hover {
        background: var(--gradient-secondary);
        transform: translateY(clamp(-0.125rem, -0.5vw, -0.125rem)); /* -2px */
        box-shadow: 0 5px 15px rgba(6, 79, 61, 0.3);
    }
    
    .btn-submit:active {
        transform: translateY(0);
    }
    
    .btn-submit:disabled {
        background: #ccc;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }
    
    .checkbox-group,
    .radio-group {
        margin-bottom: 20px;
    }
    
    .checkbox-item,
    .radio-item {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
    }
    
    .checkbox-item input[type="checkbox"],
    .radio-item input[type="radio"] {
        margin-right: 10px;
        width: 16px;
        height: 16px;
    }
    
    .checkbox-item label,
    .radio-item label {
        font-size: 14px;
        margin-bottom: 0;
        cursor: pointer;
    }
    
    .file-upload {
        margin-bottom: 20px;
    }
    
    .file-upload input[type="file"] {
        width: 100%;
        padding: 12px;
        border: 1px solid #ddd;
        border-radius: 6px;
        font-size: 14px;
    }
    
    .file-upload-label {
        display: block;
        padding: 12px 15px;
        background: var(--accent);
        border: 2px dashed var(--primary);
        border-radius: 6px;
        text-align: center;
        cursor: pointer;
        transition: all 0.3s ease;
        font-size: 14px;
    }
    
    .file-upload-label:hover {
        background: rgba(6, 79, 61, 0.1);
    }
    
    .file-upload-label.has-file {
        background: var(--success);
        color: white;
        border-color: var(--success);
    }
    
    .form-section {
        background: white;
        padding: 25px;
        border-radius: 10px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        margin-bottom: 30px;
    }
    
    .form-section h3 {
        font-size: 1.3rem;
        margin-bottom: 20px;
        color: var(--primary-dark);
    }
    
    .contact-form {
        background: white;
        padding: 30px;
        border-radius: 15px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    }
    
    .contact-form h3 {
        font-size: 1.5rem;
        margin-bottom: 25px;
        color: var(--primary-dark);
    }
    
    .appointment-form {
        background: white;
        padding: 30px;
        border-radius: 15px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    }
    
    .appointment-form h3 {
        font-size: 1.5rem;
        margin-bottom: 25px;
        color: var(--primary-dark);
    }
    
    .form-row {
        display: flex;
        gap: 15px;
        margin-bottom: 20px;
    }
    
    .form-col {
        flex: 1;
    }
    
    .form-success {
        background: var(--success);
        color: white;
        padding: 15px;
        border-radius: 6px;
        margin-bottom: 20px;
        text-align: center;
    }
    
    .form-error {
        background: var(--danger);
        color: white;
        padding: 15px;
        border-radius: 6px;
        margin-bottom: 20px;
        text-align: center;
    }
    
    .form-loading {
        position: relative;
        pointer-events: none;
        opacity: 0.7;
    }
    
    .form-loading::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 20px;
        height: 20px;
        border: 2px solid var(--primary);
        border-top: 2px solid transparent;
        border-radius: 50%;
        animation: spin 1s linear infinite;
    }
    
    .form-loading::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(255, 255, 255, 0.8);
        z-index: 1;
    }
    
    .hero-content p {
        font-size: 1rem;
        line-height: 1.5;
    }
    
    img {
        max-width: 100%;
        height: auto;
        border-radius: clamp(0.5rem, 1.5vw, 0.625rem);
        display: block;
    }
    
    .hero-image img,
    .team-member img,
    .card-image img,
    .voucher-card img {
        border-radius: clamp(0.625rem, 2vw, 0.75rem);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    }
    
    .team-member img {
        width: 100%;
        height: clamp(180px, 30vw, 200px);
        object-fit: cover;
        object-position: center;
    }
    
    .card-image img {
        width: 100%;
        height: clamp(180px, 25vw, 200px);
        object-fit: cover;
        object-position: center;
    }
    
    .voucher-card img {
        width: 100%;
        height: clamp(130px, 20vw, 150px);
        object-fit: cover;
        object-position: center;
    }
    
    img[loading="lazy"] {
        opacity: 1 !important; /* Widoczne od razu - zgodne z responsywnością */
        transition: opacity 0.3s ease;
    }
    
    img[loading="lazy"].loaded {
        opacity: 1 !important;
    }
    
    /* Wszystkie obrazy mają być widoczne */
    .hero-image img,
    .card-image img,
    .team-member img,
    .navbar-logo img,
    .footer-logo img {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    .image-placeholder {
        background: var(--accent);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--text-muted);
        font-size: 0.9rem;
        border-radius: 8px;
        min-height: 200px;
    }
    
    picture {
        display: block;
        width: 100%;
    }
    
    picture img {
        width: 100%;
        height: auto;
    }
    
    /* Navbar styles are handled by navbar-unified.css */
    
    .footer-logo img {
        height: 105px; /* Powiększone o 50% z 70px */
        max-width: 330px;
    }
    
    .hero-section,
    .page-banner {
        padding: 60px 0;
    }
    
    .gallery {
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .gallery-item {
        position: relative;
        overflow: hidden;
        border-radius: 10px;
    }
    
    .gallery-item img {
        width: 100%;
        height: 200px;
        object-fit: cover;
        transition: transform 0.3s ease;
    }
    
    .gallery-item:hover img {
        transform: scale(1.05);
    }
    
    .image-caption {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
        color: white;
        padding: 20px 15px 15px;
        font-size: 0.9rem;
    }
    
    .image-loading {
        background: var(--accent);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--text-muted);
        min-height: 200px;
        border-radius: 8px;
    }
    
    @keyframes loading {
        0% {
            opacity: 0.5;
        }
        50% {
            opacity: 1;
        }
        100% {
            opacity: 0.5;
        }
    }
    
    .image-error {
        background: var(--danger);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 200px;
        border-radius: 8px;
        text-align: center;
        padding: 20px;
    }
    
    .webp .hero-image img,
    .webp .team-member img,
    .webp .card-image img {
        content: url('images/hero.webp');
    }
    
    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
        .hero-image img,
        .team-member img,
        .card-image img {
            image-rendering: -webkit-optimize-contrast;
        }
    }
    
    h2 {
        font-size: 1.5rem;
        line-height: 1.3;
        margin-bottom: 20px;
    }
    
    .btn,
    .btn-primary,
    .btn-outline {
        padding: 10px 20px;
        font-size: 14px;
        border-radius: 6px;
        text-decoration: none;
        display: inline-block;
        transition: all 0.3s ease;
    }
    
    .container,
    .hero-content,
    .team-grid,
    .contact-container {
        padding: 0 15px;
    }
    
    ::selection {
        background: var(--primary);
        color: white;
    }
    
    *:focus {
        outline: 2px solid var(--primary);
        outline-offset: 2px;
    }
    
    html {
        scroll-behavior: smooth;
    }
    
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    textarea,
    select {
        width: 100%;
        padding: 12px 15px;
        border: 1px solid #ddd;
        border-radius: 6px;
        font-size: 14px;
        transition: border-color 0.3s ease;
    }
    
    .btn:active {
        transform: scale(0.98);
    }
    
    .mobile-menu-btn:active {
        transform: scale(0.95);
    }
    
    .section {
        margin-bottom: 40px;
    }
    
    .section:last-child {
        margin-bottom: 0;
    }
    
    .card,
    .team-card,
    .target-group-card,
    .review-card {
        background: white;
        border-radius: 10px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    }
    
    .card:hover,
    .team-card:hover,
    .target-group-card:hover,
    .review-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    }
    
    .text-content {
        padding: 20px;
    }
    
    .text-content h1,
    .text-content h2,
    .text-content h3 {
        color: var(--primary-dark);
        margin-bottom: 15px;
    }
    
    .text-content h1:first-child,
    .text-content h2:first-child,
    .text-content h3:first-child {
        margin-top: 0;
    }
    
    ul, ol {
        padding-left: clamp(1.25rem, 4vw, 1.25rem); /* 20px - responsywny */
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
    }
    
    li {
        margin-bottom: 8px;
        line-height: 1.5;
    }
    
    a {
        color: var(--primary);
        text-decoration: none;
        transition: color 0.3s ease;
    }
    
    a:hover {
        color: var(--primary-dark);
        text-decoration: underline;
    }
    
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    table {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 20px;
    }
    
    th {
        background: var(--primary);
        color: white;
        padding: 12px 8px;
        text-align: left;
        font-weight: 600;
    }
    
    td {
        border-bottom: 1px solid #eee;
        padding: 10px 8px;
    }
    
    tr:hover {
        background: var(--accent);
    }
    
    .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;
    }
    
    .skip-link {
        position: absolute;
        top: -40px;
        left: 6px;
        background: var(--primary);
        color: white;
        padding: 8px;
        text-decoration: none;
        z-index: 1000;
        border-radius: var(--border-radius);
    }
    
    .skip-link:focus {
        top: 6px;
    }
    
    .loading {
        opacity: 0.7;
    }
    
    .loading::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 20px;
        height: 20px;
        border: 2px solid var(--primary);
        border-top: 2px solid transparent;
        border-radius: 50%;
        animation: spin 1s linear infinite;
    }
    
    .error {
        color: var(--danger);
        background: rgba(220, 53, 69, 0.1);
        padding: 10px;
        border-radius: 4px;
        margin: 10px 0;
    }
    
    .success {
        color: var(--success);
        background: rgba(38, 119, 100, 0.1);
        padding: 10px;
        border-radius: 4px;
        margin: 10px 0;
    }
    
    .warning {
        color: var(--warning);
        background: rgba(255, 193, 7, 0.1);
        padding: 10px;
        border-radius: 4px;
        margin: 10px 0;
    }
    
    .info {
        color: var(--info);
        background: rgba(23, 162, 184, 0.1);
        padding: 10px;
        border-radius: 4px;
        margin: 10px 0;
    }
    
    @media print {
        .navbar,
        .footer,
        .btn {
            display: none;
        }
        
        body {
            font-size: 12pt;
            line-height: 1.4;
        }
        
        h1, h2, h3 {
            page-break-after: avoid;
        }
        
        .card,
        .team-card,
        .target-group-card,
        .review-card {
            page-break-inside: avoid;
        }
    }
    
    .section-description {
        font-size: 0.95rem;
    }
    
    /* Navbar styles are handled by navbar-unified.css */
    
    .consult-btn {
        padding: 8px 15px;
    }
    
    .card-image {
        height: 200px;
    }
    
    .cta-section h3 {
        font-size: 1.5rem;
    }
    
    .cta-section .btn {
        margin: 10px 5px;
    }
    
    .footer-bottom {
        flex-direction: column;
        gap: 10px;
    }
    
    .footer-bottom .social-icons {
        margin-top: 15px;
    }
    
    .cookie-banner {
        flex-direction: column;
    }
    
    .cookie-banner .cookie-buttons {
        margin-top: 15px;
    }
}

/* ===== PROFESJONALNA SEKCJA KONTAKTOWA ===== */
.contact-section {
    padding: 100px 0;
    background: transparent;
    /* Tło przezroczyste - pozwala paskom być w pełni widoczne */
}

.contact-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2rem;
    margin-top: 3rem;
    align-items: start;
}

/* Karty kontaktowe - jednolita wysokość */
.contact-card {
    background: white;
    border-radius: 20px;
    padding: 2.5rem;
    box-shadow: 0 15px 40px rgba(0,0,0,0.08);
    border: 1px solid rgba(6, 79, 61, 0.1);
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.contact-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary), var(--primary-light));
}

.contact-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 50px rgba(0,0,0,0.15);
}

.contact-card-header {
    display: flex;
    align-items: center;
    margin-bottom: 2rem;
}

.contact-icon {
    width: 60px;
    height: 60px;
    background: var(--gradient-primary);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    box-shadow: 0 8px 25px rgba(6, 79, 61, 0.2);
}

.contact-icon i {
    font-size: 1.5rem;
    color: white;
}

.contact-card h3 {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--primary);
    margin: 0;
}

/* Informacje kontaktowe */
.contact-details {
    flex: 1;
}

.contact-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: clamp(0.75rem, 3vw, 0.75rem); /* 12px */
    transition: all 0.3s ease;
}

.contact-item:hover {
    background: #e9ecef;
    transform: translateX(5px);
}

.contact-item-icon {
    width: 40px;
    height: 40px;
    background: var(--gradient-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    flex-shrink: 0;
}

.contact-item-icon i {
    font-size: 1rem;
    color: white;
}

.contact-item-content {
    flex: 1;
}

.contact-label {
    display: block;
    font-weight: 600;
    color: var(--primary);
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
}

.contact-value {
    color: var(--text-dark);
    font-size: 1rem;
}

.contact-link {
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.contact-link:hover {
    color: var(--primary-light);
}

/* Godziny otwarcia */
.opening-hours {
    flex: 1;
}

.opening-hours-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    margin-bottom: 0.75rem;
    background: #f8f9fa;
    border-radius: clamp(0.75rem, 3vw, 0.75rem); /* 12px */
    transition: all 0.3s ease;
}

.opening-hours-item:hover {
    background: #e9ecef;
    transform: translateX(5px);
}

.opening-hours-item:last-child {
    margin-bottom: 0;
}

.day {
    font-weight: 600;
    color: var(--primary);
    font-size: 0.95rem;
}

.time {
    color: var(--text-dark);
    font-weight: 500;
}

.time.closed {
    color: var(--danger);
    font-weight: 600;
}

/* Formularz kontaktowy */
.contact-form-container {
    height: 100%;
}

.form-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.contact-form {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.form-group {
    margin-bottom: 1.25rem;
}

.form-group:last-of-type {
    margin-bottom: 0;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--primary);
    font-size: 0.95rem;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 14px 18px;
    border: 2px solid #e9ecef;
    border-radius: clamp(0.75rem, 3vw, 0.75rem); /* 12px */
    font-size: 16px;
    font-family: 'Montserrat', Arial, sans-serif;
    transition: all 0.3s ease;
    background: white;
    color: var(--text-dark);
    box-sizing: border-box;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(6, 79, 61, 0.1);
    transform: translateY(-1px);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #adb5bd;
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
    max-height: 200px;
}

.checkbox-group {
    margin-bottom: 1rem;
}

.checkbox-label {
    display: flex;
    align-items: flex-start;
    cursor: pointer;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text-muted);
    padding: 0.75rem;
    background: #f8f9fa;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.checkbox-label:hover {
    background: #e9ecef;
}

.checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-right: 0.75rem;
    margin-top: 0.1rem;
    cursor: pointer;
    accent-color: var(--primary);
}

.checkbox-label a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
}

.checkbox-label a:hover {
    text-decoration: underline;
}

.form-submit-btn {
    width: 100%;
    margin-top: auto;
    padding: 16px 24px;
    font-size: 1.1rem;
    font-weight: 700;
    border-radius: clamp(0.75rem, 3vw, 0.75rem); /* 12px */
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: var(--gradient-primary);
    border: none;
    color: white;
    cursor: pointer;
}

.form-submit-btn:hover {
    transform: translateY(clamp(-0.125rem, -0.5vw, -0.125rem)); /* -2px */
    box-shadow: 0 8px 25px rgba(6, 79, 61, 0.3);
}

.form-submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.form-submit-btn:disabled:hover {
    transform: none;
    box-shadow: none;
}

/* Mapa */
.map-description {
    margin-bottom: 1.5rem;
}

.map-description p {
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0;
}

.map-container {
    margin-bottom: 1.5rem;
    border-radius: clamp(0.75rem, 3vw, 0.75rem); /* 12px */
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

.map-container iframe {
    width: 100%;
    height: 250px;
    border: none;
}

/* Usunięto starą definicję .map-actions - używamy głównej definicji z flex-direction: row !important na linii 2621 */
/* Usunięto starą definicję .map-btn - używamy głównej definicji na linii 2638 */

.map-btn:hover {
    transform: translateY(clamp(-0.125rem, -0.5vw, -0.125rem)); /* -2px */
}

/* Usunięto starą definicję .contact-actions-centered - używamy głównej definicji z flex-direction: row !important na linii 2202 */

.contact-btn {
    padding: 16px 32px;
    font-size: 1.1rem;
    font-weight: 700;
    border-radius: clamp(0.75rem, 3vw, 0.75rem); /* 12px */
    text-decoration: none;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.contact-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(6, 79, 61, 0.3);
}

/* Komunikaty formularza */
.form-message {
    padding: 1rem 1.5rem;
    border-radius: var(--border-radius);
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 600;
    animation: slideIn 0.3s ease;
}

.form-message-success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.form-message-error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.form-message i {
    font-size: 1.2rem;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsywność sekcji kontaktowej */
@media (max-width: 1200px) {
    .contact-container {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }
    
    .contact-map {
        grid-column: 1 / -1;
        margin-top: 2rem;
    }
}

/* Większa szerokość kontenera z mapą na komputerach */
@media (min-width: 64em) { /* 1024px+ */
    .contact-container {
        grid-template-columns: 0.9fr 1.1fr; /* Lewa kolumna węższa (info), prawa szersza (mapa) */
        gap: 1.5rem; /* 24px - odstęp między kontenerami */
    }
}

@media (min-width: 80em) { /* 1280px+ */
    .contact-container {
        grid-template-columns: 0.85fr 1.15fr; /* Jeszcze szersza mapa na dużych ekranach */
        gap: 1.5rem; /* 24px - odstęp między kontenerami */
    }
}

@media (max-width: 48em) { /* 768px */
    .contact-section {
        padding: clamp(2.5rem, 8vw, 3.125rem) clamp(1rem, 4vw, 1.5rem) !important;
        overflow-x: hidden !important;
    }
    
    .contact-section .container {
        padding: 0 clamp(1rem, 4vw, 1.25rem) !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    
    .contact-container {
        grid-template-columns: 1fr !important;
        gap: clamp(1.5rem, 4vw, 2rem) !important;
        margin-top: clamp(1.5rem, 4vw, 2rem) !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }
    
    .contact-info,
    .contact-map {
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }
    
    .contact-card {
        padding: clamp(1.25rem, 4vw, 1.5625rem) clamp(1rem, 3vw, 1.25rem) !important;
        margin-bottom: clamp(1.25rem, 3vw, 1.5625rem) !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .contact-card-header {
        gap: clamp(0.75rem, 2vw, 0.9375rem) !important;
        margin-bottom: clamp(1rem, 3vw, 1.25rem) !important;
        flex-wrap: wrap !important;
    }
    
    .contact-icon {
        width: clamp(40px, 8vw, 50px) !important;
        height: clamp(40px, 8vw, 50px) !important;
        font-size: clamp(1rem, 3vw, 1.3rem) !important;
        flex-shrink: 0 !important;
    }
    
    .contact-icon i {
        font-size: clamp(1rem, 3vw, 1.3rem) !important;
    }
    
    .contact-card h3,
    .contact-card-header h3 {
        font-size: clamp(1.125rem, 3vw, 1.3rem) !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
    
    .contact-details {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .contact-item {
        padding: clamp(0.75rem, 2vw, 0.9375rem) !important;
        margin-bottom: clamp(0.875rem, 2.5vw, 1rem) !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        flex-wrap: wrap !important;
        gap: clamp(0.75rem, 2vw, 0.9375rem) !important;
    }
    
    .contact-item-icon {
        width: clamp(32px, 7vw, 40px) !important;
        height: clamp(32px, 7vw, 40px) !important;
        font-size: clamp(0.875rem, 2.5vw, 1rem) !important;
        flex-shrink: 0 !important;
        margin-right: clamp(0.75rem, 2vw, 0.9375rem) !important;
    }
    
    .contact-item-icon i {
        font-size: clamp(0.875rem, 2.5vw, 1rem) !important;
    }
    
    .contact-item-content {
        flex: 1 !important;
        min-width: 0 !important;
        width: 100% !important;
    }
    
    .contact-label {
        font-size: clamp(0.75rem, 2.5vw, 0.875rem) !important;
        display: block !important;
        margin-bottom: clamp(0.25rem, 1vw, 0.375rem) !important;
    }
    
    .contact-value {
        font-size: clamp(0.9375rem, 2.5vw, 1rem) !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        display: block !important;
        width: 100% !important;
    }
    
    .contact-link {
        color: var(--primary) !important;
        text-decoration: underline !important;
    }
    
    .opening-hours {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .opening-hours-item {
        padding: clamp(0.75rem, 2vw, 0.9375rem) clamp(0.5rem, 1.5vw, 0.75rem) !important;
        margin-bottom: clamp(0.625rem, 2vw, 0.75rem) !important;
        display: flex !important;
        flex-direction: column !important;
        gap: clamp(0.375rem, 1vw, 0.5rem) !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .opening-hours-item .day {
        font-size: clamp(0.875rem, 2.5vw, 1rem) !important;
        font-weight: 600 !important;
    }
    
    .opening-hours-item .time {
        font-size: clamp(0.9375rem, 2.5vw, 1.0625rem) !important;
    }
    
    .contact-map,
    .map-card {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: visible !important; /* Zmieniono na visible - pozwala elementom nie nakładać się */
        height: auto !important; /* Automatyczna wysokość - dostosowuje się do zawartości */
    }
    
    .map-card {
        padding: 0 !important; /* Reset - padding tylko na wewnętrznych elementach */
        margin-bottom: clamp(2.5rem, 8vw, 3.5rem) !important; /* DUŻY odstęp pod kartą mapy - zapobiega nakładaniu */
        gap: 0 !important; /* Reset - każy element ma własne marginesy */
        overflow: visible !important; /* Pozwala treści być widoczną */
        position: relative !important;
        z-index: 1 !important; /* Niższy z-index niż przyciski - zapobiega nakładaniu się */
        box-shadow: 0 4px 16px rgba(6, 79, 61, 0.1) !important;
        border: 1px solid rgba(6, 79, 61, 0.1) !important;
        border-radius: 0.75rem !important;
    }
    
    /* Usuwamy transform na hover na mobile aby zapobiec nakładaniu się */
    .map-card:hover {
        transform: none !important;
        box-shadow: 0 4px 16px rgba(6, 79, 61, 0.1) !important; /* Bez animacji shadow */
    }
    
    .map-card .contact-card-header {
        padding: 1.5rem 1.25rem 1rem 1.25rem;
        margin: 0;
        border-bottom: 1px solid rgba(6, 79, 61, 0.08);
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    
    .map-card .contact-card-header h3 {
        font-size: clamp(1.25rem, 3.5vw, 1.5rem) !important;
        font-weight: 700 !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        width: 100% !important;
        max-width: 100% !important;
        color: var(--primary) !important;
        margin: 0 !important;
        line-height: 1.3 !important;
    }
    
    .map-description {
        margin: 0 1.25rem 1.25rem 1.25rem; /* Wyrównanie z mapą */
        padding: 1rem;
    }
    
    .map-description p {
        font-size: 0.875rem;
    }
    
    .map-container {
        margin: 0;
        padding: 0 1.25rem 1rem 1.25rem; /* Wyrównanie z paddingiem karty */
    }
    
    .map-actions {
        padding: 1.25rem 1.5rem;
        gap: 1.25rem;
    }
    
    /* Separator między przyciskami w map-actions */
    .map-actions > .map-btn:not(:last-child)::after {
        content: '';
        position: absolute;
        bottom: clamp(-1rem, -3vw, -1.25rem);
        left: 50%;
        transform: translateX(-50%);
        width: clamp(80px, 25vw, 120px);
        height: clamp(0.125rem, 0.3vw, 0.1875rem);
        background: linear-gradient(90deg, transparent, rgba(6, 79, 61, 0.15), transparent);
        pointer-events: none;
    }
    
    .map-btn {
        padding: 1.25rem 1.75rem;
        font-size: 1.0625rem;
        min-height: 56px;
        gap: 0.875rem;
        border-radius: 1rem;
    }
    
    /* Style przycisków na mobile - bardziej wyraźne */
    .map-btn.btn-primary:active {
        transform: scale(0.97);
    }
    
    .map-btn.btn-outline:active {
        transform: scale(0.97);
        background: rgba(6, 79, 61, 0.08);
    }
    
    .map-btn i {
        font-size: 1.125rem;
        flex-shrink: 0;
    }
    
    .contact-actions-centered {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: clamp(0.75rem, 3.5vw, 1rem) !important; /* kompaktowy odstęp na mobile */
        margin-top: clamp(3rem, 10vw, 4rem) !important; /* BARDZO DUŻY odstęp pod sekcją mapy - zapewnia separację */
        margin-bottom: clamp(1rem, 3vw, 1.5rem) !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: clamp(1rem, 3vw, 1.5rem) 0 0 0 !important; /* Dodatkowy padding górny */
        box-sizing: border-box !important;
        overflow: visible !important;
        position: relative !important;
        z-index: 10 !important; /* Wyższy z-index niż mapa - zapobiega nakładaniu się */
        background: transparent !important; /* bez tła na mobile */
        border-radius: 0 !important;
        border: none !important; /* bez obramowania */
        box-shadow: none !important;
        clear: both !important; /* Wymusza pozycję poniżej wszystkich elementów */
    }
    
    /* Na telefonach ukrywamy dekoracyjne separatory */
    .contact-actions-centered::before {
        content: none !important;
        display: none !important;
    }
    
    /* Na telefonach brak dodatkowych separatorów między przyciskami */
    .contact-actions-centered > .contact-btn:not(:last-child)::after {
        content: none !important;
        display: none !important;
    }
    
    .contact-actions-centered .contact-btn {
        padding: clamp(0.875rem, 4vw, 1rem) clamp(1.25rem, 5vw, 1.5rem) !important;
        font-size: clamp(0.9375rem, 3vw, 1.0625rem) !important;
        font-weight: 600 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        min-height: clamp(48px, 12vw, 52px) !important;
        box-sizing: border-box !important;
        text-align: center !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: clamp(0.625rem, 3vw, 0.75rem) !important;
        margin: 0 !important;
        flex: 0 0 auto !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        overflow: visible !important;
        border-radius: clamp(0.875rem, 3vw, 1rem) !important;
        transition: all 0.2s ease !important;
        letter-spacing: 0.01em !important;
        line-height: 1.45 !important;
        position: relative !important;
        z-index: 11 !important; /* Jeszcze wyższy z-index dla przycisków - gwarantuje widoczność */
        isolation: isolate !important;
    }
    
    /* Wyraźne style dla przycisków kontaktowych z większym kontrastem */
    .contact-actions-centered .contact-btn.btn-primary {
        background: var(--gradient-primary) !important;
        color: #ffffff !important;
        border: clamp(0.1875rem, 0.5vw, 0.25rem) solid var(--primary-dark) !important;
        box-shadow: 
            0 clamp(0.375rem, 1.5vw, 0.5rem) clamp(1rem, 3vw, 1.5rem) rgba(6, 79, 61, 0.3),
            inset 0 clamp(0.0625rem, 0.2vw, 0.125rem) clamp(0.25rem, 0.5vw, 0.375rem) rgba(255, 255, 255, 0.1) !important;
    }
    
    .contact-actions-centered .contact-btn.btn-primary:active {
        transform: scale(0.97) !important;
        box-shadow: 0 clamp(0.1875rem, 0.8vw, 0.25rem) clamp(0.625rem, 2.5vw, 0.875rem) rgba(6, 79, 61, 0.35) !important;
    }
    
    .contact-actions-centered .contact-btn.btn-outline {
        background: #ffffff !important; /* Białe tło dla większego kontrastu */
        color: var(--primary) !important;
        border: clamp(0.1875rem, 0.5vw, 0.25rem) solid var(--primary) !important;
        box-shadow: 
            0 clamp(0.25rem, 1vw, 0.375rem) clamp(0.75rem, 2.5vw, 1.125rem) rgba(6, 79, 61, 0.2),
            inset 0 clamp(0.0625rem, 0.2vw, 0.125rem) clamp(0.25rem, 0.5vw, 0.375rem) rgba(6, 79, 61, 0.05) !important;
    }
    
    .contact-actions-centered .contact-btn.btn-outline:active {
        transform: scale(0.97) !important;
        background: rgba(6, 79, 61, 0.08) !important;
        box-shadow: 0 clamp(0.125rem, 0.5vw, 0.1875rem) clamp(0.5rem, 2vw, 0.75rem) rgba(6, 79, 61, 0.25) !important;
    }
    
    .contact-actions-centered .contact-btn i {
        font-size: clamp(1.125rem, 4vw, 1.25rem) !important; /* Większa ikona */
        flex-shrink: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .form-message {
        padding: 0.875rem 1.25rem;
        font-size: 0.9rem;
    }
}

@media (max-width: 30em) { /* 480px */
    /* SEKCJA KONTAKT - bardzo małe telefony */
    .contact-section {
        padding: clamp(2rem, 6vw, 2.5rem) clamp(0.75rem, 3vw, 1rem) !important;
    }
    
    .contact-section .container {
        padding: 0 clamp(0.75rem, 3vw, 1rem) !important;
    }
    
    .contact-container {
        gap: clamp(1.25rem, 3vw, 1.5rem) !important;
        margin-top: clamp(1.25rem, 3vw, 1.5rem) !important;
    }
    
    .contact-card {
        padding: clamp(1rem, 3vw, 1.25rem) clamp(0.875rem, 2.5vw, 1rem) !important;
    }
    
    .contact-card-header {
        flex-direction: row !important;
        align-items: center !important;
        gap: clamp(0.75rem, 2vw, 0.9375rem) !important;
        margin-bottom: clamp(0.875rem, 2.5vw, 1rem) !important;
    }
    
    .contact-icon {
        width: clamp(35px, 7vw, 45px) !important;
        height: clamp(35px, 7vw, 45px) !important;
        font-size: clamp(0.9375rem, 2.5vw, 1.2rem) !important;
        margin-right: clamp(0.75rem, 2vw, 0.9375rem) !important;
        margin-bottom: 0 !important;
    }
    
    .contact-card-header h3 {
        font-size: clamp(1rem, 2.5vw, 1.125rem) !important;
    }
    
    .contact-item {
        flex-direction: row !important;
        align-items: flex-start !important;
        text-align: left !important;
        padding: clamp(0.625rem, 2vw, 0.75rem) !important;
    }
    
    .contact-item-icon {
        width: clamp(28px, 6vw, 35px) !important;
        height: clamp(28px, 6vw, 35px) !important;
        font-size: clamp(0.8125rem, 2vw, 0.9375rem) !important;
        margin-right: clamp(0.625rem, 1.5vw, 0.75rem) !important;
        margin-bottom: 0 !important;
        flex-shrink: 0 !important;
    }
    
    .contact-item-content {
        flex: 1 !important;
        min-width: 0 !important;
    }
    
    .contact-label {
        font-size: clamp(0.6875rem, 2vw, 0.8125rem) !important;
    }
    
    .contact-value {
        font-size: clamp(0.8125rem, 2.5vw, 0.9375rem) !important;
    }
    
    .opening-hours-item {
        flex-direction: column !important;
        align-items: flex-start !important;
        text-align: left !important;
        gap: clamp(0.25rem, 1vw, 0.375rem) !important;
        padding: clamp(0.625rem, 2vw, 0.75rem) clamp(0.5rem, 1.5vw, 0.625rem) !important;
    }
    
    .opening-hours-item .day {
        font-size: clamp(0.8125rem, 2.5vw, 0.9375rem) !important;
    }
    
    .opening-hours-item .time {
        font-size: clamp(0.875rem, 2.5vw, 1rem) !important;
    }
    
    /* Usunięto duplikat .map-card - używamy głównej definicji z padding: 0 */
    
    .map-btn {
        overflow: visible !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: clamp(1rem, 3.5vw, 1.25rem) clamp(1.25rem, 4.5vw, 1.75rem) !important;
        font-size: clamp(0.9375rem, 2.5vw, 1.0625rem) !important;
        font-weight: 600 !important;
        min-height: clamp(50px, 11vw, 54px) !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        margin: 0 !important;
        border-radius: clamp(0.875rem, 3vw, 1rem) !important;
        flex: 0 0 auto !important;
        box-sizing: border-box !important;
        gap: clamp(0.625rem, 2.5vw, 0.75rem) !important;
    }
    
    .map-btn i {
        font-size: clamp(1rem, 3.5vw, 1.125rem) !important;
    }
    
    .map-container {
        margin: 0;
        padding: 0 1rem 0.75rem 1rem; /* Wyrównanie z paddingiem karty */
    }
    
    .map-actions {
        padding: 1rem 1.25rem;
        gap: 1rem;
    }
    
    .map-btn {
        padding: 1rem 1.25rem;
        font-size: 0.9375rem;
        min-height: 50px;
        border-radius: 0.875rem;
        gap: 0.625rem;
    }
    
    
    /* Style mobile dla przycisków mapy są dziedziczone z głównych stylów */
    
    .contact-actions-centered {
        margin-top: clamp(3.5rem, 12vw, 5rem) !important; /* BARDZO DUŻY odstęp na najmniejszych ekranach */
        gap: clamp(0.75rem, 4vw, 1rem) !important;
        padding: clamp(1.5rem, 4vw, 2rem) 0 0 0 !important; /* Dodatkowy padding górny */
        background: transparent !important;
        border-radius: 0 !important;
        border: none !important;
        z-index: 10 !important; /* Wyższy z-index niż mapa - zapobiega nakładaniu się */
        clear: both !important; /* Wymusza pozycję poniżej wszystkich elementów */
    }
    
    .contact-actions-centered .contact-btn {
        padding: clamp(0.875rem, 4vw, 1rem) clamp(1.25rem, 5vw, 1.5rem) !important;
        font-size: clamp(0.9375rem, 3vw, 1.0625rem) !important;
        font-weight: 600 !important;
        min-height: clamp(48px, 12vw, 52px) !important;
        gap: clamp(0.625rem, 3vw, 0.75rem) !important;
        border-radius: clamp(0.875rem, 3vw, 1rem) !important;
    }
    
    .contact-actions-centered .contact-btn i {
        font-size: clamp(1rem, 3.5vw, 1.125rem) !important;
    }
}