/**
Theme Name: Astra Child
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
Template: astra
*/






/* =========================================
   1. GLOBALNY RESET I ZMIENNE
   ========================================= */
:root {
    --color-primary: #008080;       /* Turkus */
    --color-primary-dark: #006666;
    --color-accent: #FF8C00;        /* Pomarańcz */
    --color-accent-light: #FFB347;
    --color-bg: #FFFFFF;
    --color-bg-alt: #F9FAFB;        /* Jasne szare tło */
    --color-text-main: #1F2937;
    --color-text-muted: #6B7280;
    --shadow-soft: 0 10px 40px -10px rgba(0,0,0,0.08);
    --font-main: 'Plus Jakarta Sans', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--font-main); background-color: var(--color-bg); color: var(--color-text-main); line-height: 1.6; overflow-x: hidden; }

/* =========================================
   2. FIX KONTENERA (1200px)
   ========================================= */
.kayak-container {
    width: 100% !important;
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    position: relative;
    z-index: 10;
}

/* Typografia */
.headline-lg { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 800; line-height: 1.1; margin-bottom: 24px; color: #111; }
.section-tag { display: inline-block; color: var(--color-accent); font-weight: 700; text-transform: uppercase; letter-spacing: 2px; font-size: 0.85rem; margin-bottom: 16px; }
.text-highlight { color: var(--color-primary); }
.text-center { text-align: center; }
.mb-large { margin-bottom: clamp(40px, 6vw, 80px) !important; }

/* =========================================
   3. NOWE STYLE PRZYCISKÓW (CTA)
   ========================================= */
.hero-actions {
    margin-top: 40px;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 28px;
    border-radius: 50px; /* Nowoczesne "pigułki" */
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    line-height: 1;
}

/* Przycisk Główny (Turkus) */
.btn-primary {
    background-color: var(--color-primary);
    color: #ffffff;
    border: 2px solid var(--color-primary);
    box-shadow: 0 10px 20px rgba(0, 128, 128, 0.2);
}

.btn-primary:hover {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 15px 30px rgba(0, 128, 128, 0.3);
}

/* Przycisk Drugorzędny (Outline) */
.btn-secondary {
    background-color: transparent;
    color: var(--color-text-main);
    border: 2px solid #E5E7EB; /* Jasnoszara ramka */
}

.btn-secondary:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background-color: #fff;
    transform: translateY(-2px);
}

.btn-arrow { margin-left: 8px; transition: transform 0.3s; }
.btn-primary:hover .btn-arrow { transform: translateX(5px); }
.btn-icon { margin-right: 8px; }
   4. SEKCJA O NAS (HERO) - UPDATE TŁA
   ========================================= */
/* Zmiana tła na lekko szare */
.about-split-section { 
    padding: clamp(60px, 8vh, 120px) 0; 
    background-color: var(--color-bg-alt); /* #F9FAFB */
    overflow: hidden; 
}

.split-wrapper { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }

@media (min-width: 1024px) {
    .split-wrapper { grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 100px); }
}

.image-column { position: relative; padding: 10px; }
.image-frame { position: relative; border-radius: 32px; overflow: hidden; box-shadow: 0 20px 60px -15px rgba(0, 128, 128, 0.25); aspect-ratio: 4/5; background: #fff; } /* Dodano tło white pod ramkę */
.image-frame img.main-photo { width: 100%; height: 100%; object-fit: cover; display: block; }

.floating-badge { position: absolute; bottom: 30px; right: 30px; background: #fff; padding: 20px 30px; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.15); display: flex; flex-direction: column; align-items: flex-start; z-index: 2; border-left: 5px solid var(--color-accent); }
.badge-number { font-size: 2.5rem; font-weight: 800; color: var(--color-primary); line-height: 1; }
.badge-text { font-size: 0.85rem; font-weight: 600; text-transform: uppercase; color: var(--color-text-muted); margin-top: 5px; }


.body-text { color: var(--color-text-muted); font-size: 1.05rem; margin-bottom: 30px; max-width: 95%; }

.features-list { display: flex; flex-direction: column; gap: 24px; margin-bottom: 0; }
.feature-item { display: flex; align-items: flex-start; gap: 20px; }
.feature-icon { flex-shrink: 0; width: 50px; height: 50px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; background-color: #fff; box-shadow: 0 4px 10px rgba(0,0,0,0.05); } /* Zmiana tła ikon na białe dla kontrastu z szarym tłem sekcji */
.feature-info h4 { font-size: 1.1rem; font-weight: 700; margin-bottom: 4px; color: #111; }
.feature-info p { font-size: 0.95rem; color: var(--color-text-muted); line-height: 1.4; margin: 0; }

@media (max-width: 768px) {
    .floating-badge { bottom: 20px; right: 20px; padding: 15px 20px; }
    .badge-number { font-size: 2rem; }
    .image-frame { aspect-ratio: 16/10; }
    .hero-actions { justify-content: center; } /* Centrowanie przycisków na mobile */
    .btn { width: 100%; } /* Przyciski na całą szerokość na telefonie */
}
/* =========================================
   4. SEKCJA TRASY (TIMELINE)
   ========================================= */
.routes-section { padding: 80px 0; background-color: var(--color-bg); }
.section-desc { max-width: 800px; font-size: 1.1rem; color: var(--color-text-muted); text-align: left; }
.text-left-align { text-align: left; max-width: 1000px; margin-left: auto; margin-right: auto; padding-left: 30px; }

.river-timeline { position: relative; max-width: 1000px; margin: 0 auto; padding-left: 30px; }
.river-timeline::before { content: ''; position: absolute; left: 0; top: 20px; bottom: 20px; width: 4px; background: linear-gradient(180deg, var(--color-primary) 0%, #4FD1C5 50%, var(--color-primary-dark) 100%); border-radius: 4px; opacity: 0.3; }

.route-card { position: relative; margin-bottom: 30px; transition: transform 0.3s ease; }
.route-card:hover { transform: translateX(10px); }
.route-marker { position: absolute; left: -38px; top: 25px; width: 20px; height: 20px; background-color: var(--color-bg); border: 4px solid var(--color-primary); border-radius: 50%; z-index: 2; transition: 0.3s; }
.route-card:hover .route-marker { background-color: var(--color-accent); border-color: var(--color-accent); transform: scale(1.3); }

.route-content { background: #fff; border: 1px solid #eee; border-radius: 16px; padding: 24px; box-shadow: 0 4px 20px rgba(0,0,0,0.04); display: flex; flex-direction: column; gap: 15px; }
@media (min-width: 600px) {
    .route-content { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
    .route-note { flex-basis: 100%; width: 100%; order: 3; margin-top: 12px; padding-top: 12px; border-top: 1px dashed #eee; color: var(--color-primary-dark); }
    .route-header { margin-right: auto; }
}

.route-header h3 { font-size: 1.25rem; font-weight: 700; color: var(--color-text-main); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.route-header .arrow { color: var(--color-accent); font-size: 1.1rem; }
.badge-popular, .badge-difficulty { display: inline-block; font-size: 0.75rem; padding: 4px 10px; border-radius: 20px; font-weight: 700; text-transform: uppercase; margin-left: 10px; vertical-align: middle; }
.badge-popular { background-color: #FFF4E5; color: #B96608; }
.badge-difficulty { background-color: #E8F7F8; color: var(--color-primary); }

.route-metrics { display: flex; gap: 20px; }
.metric { display: flex; align-items: center; gap: 8px; background-color: #f9fafb; padding: 8px 14px; border-radius: 10px; }
.metric .value { font-weight: 700; font-size: 0.95rem; white-space: nowrap; }
.metric .icon { font-size: 1.1rem; }

@media (max-width: 768px) {
    .text-left-align { padding-left: 20px; padding-right: 20px; }
    .river-timeline { padding-left: 20px; }
    .route-marker { left: -28px; width: 16px; height: 16px; top: 20px; }
}

/* =========================================
   5. SEKCJA GALERIA
   ========================================= */
.gallery-section-fixed { padding: 100px 0; background-color: var(--color-bg); }
.gallery-header { text-align: left; max-width: 800px; margin-bottom: 50px; }
.gallery-desc { font-size: 1.1rem; color: var(--color-text-muted); margin-top: 15px; line-height: 1.6; }

.perfect-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 280px; gap: 20px; }
.grid-box { position: relative; border-radius: 20px; overflow: hidden; cursor: pointer; box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
.span-2-col { grid-column: span 2; }
.grid-box img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; display: block; }
.grid-box:hover img { transform: scale(1.05); }

.overlay-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); width: 50px; height: 50px; background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(5px); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: white; transition: 0.3s; }
.grid-box:hover .overlay-icon { transform: translate(-50%, -50%) scale(1); }

@media (max-width: 1024px) {
    .perfect-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 250px; }
    .span-2-col { grid-column: span 1; }
}
@media (max-width: 600px) {
    .perfect-grid { grid-template-columns: 1fr; grid-auto-rows: 220px; gap: 15px; }
}

/* Lightbox */
.lightbox-modal { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; background-color: rgba(0, 0, 0, 0.9); align-items: center; justify-content: center; opacity: 0; animation: fadeIn 0.3s forwards; }
@keyframes fadeIn { to { opacity: 1; } }
.lightbox-content { max-width: 90%; max-height: 90%; border-radius: 8px; box-shadow: 0 0 50px rgba(0,0,0,0.5); }
.close-btn { position: absolute; top: 20px; right: 35px; color: #f1f1f1; font-size: 40px; font-weight: bold; cursor: pointer; z-index: 10001; }
.prev, .next { cursor: pointer; position: absolute; top: 50%; width: auto; padding: 16px; margin-top: -50px; color: white; font-weight: bold; font-size: 40px; transition: 0.3s ease; border-radius: 50%; user-select: none; z-index: 10000; }
.prev { left: 20px; } .next { right: 20px; }
.prev:hover, .next:hover { background-color: rgba(255, 255, 255, 0.2); color: var(--color-accent); transform: scale(1.1); }

/* =========================================
   6. SEKCJE CENNIK I KONTAKT
   ========================================= */
.pricing-section { padding: 100px 0; background: linear-gradient(to bottom, var(--color-bg) 0%, #f4fbfb 100%); }
.pricing-grid { display: grid; grid-template-columns: repeat(1, 1fr); gap: 30px; max-width: 1100px; margin: 0 auto; align-items: center; }
@media (min-width: 900px) { .pricing-grid { grid-template-columns: repeat(3, 1fr); } }

.pricing-card { background: #fff; padding: 40px 30px; border-radius: 24px; box-shadow: 0 10px 40px rgba(0,0,0,0.06); position: relative; border: 1px solid rgba(0,0,0,0.03); transition: transform 0.3s ease; display: flex; flex-direction: column; height: 100%; }
.pricing-card:hover { transform: translateY(-10px); }
.featured-card { border: 2px solid var(--color-primary); box-shadow: 0 20px 60px rgba(0, 128, 128, 0.15); z-index: 2; transform: scale(1.05); }
.featured-card:hover { transform: scale(1.08); }
.popular-badge { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); background-color: var(--color-accent); color: white; padding: 8px 20px; border-radius: 50px; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }

.price { font-size: 3.5rem; font-weight: 800; color: var(--color-text-main); line-height: 1; margin-bottom: 5px; }
.currency { font-size: 1.5rem; vertical-align: super; color: var(--color-text-muted); }
.price-sub { font-size: 0.95rem; color: var(--color-text-muted); margin-bottom: 30px; }
.card-features ul { list-style: none; padding: 0; margin: 0; text-align: left; }
.card-features li { margin-bottom: 15px; font-size: 0.95rem; color: #4B5563; display: flex; align-items: center; gap: 10px; }
.check { color: var(--color-primary); font-weight: bold; }
.cta-btn { margin-top: 30px; background-color: var(--color-primary); color: white; border: none; padding: 15px 20px; border-radius: 12px; font-weight: 600; cursor: pointer; transition: background 0.3s; }
.cta-btn:hover { background-color: var(--color-primary-dark); }
.addon-card { background-color: #FFFAF0; border: 1px dashed var(--color-accent); }
.card-icon { font-size: 3rem; margin-bottom: 15px; }

/* Kontakt */
.contact-section { position: relative; padding: 80px 0; min-height: 600px; display: flex; align-items: center; justify-content: center; color: white; }
.contact-bg-image { position: absolute; inset: 0; z-index: 0; }
.contact-bg-image img { width: 100%; height: 100%; object-fit: cover; }
.dark-overlay { position: absolute; inset: 0; background: rgba(0, 30, 30, 0.7); }
.relative-z { position: relative; z-index: 1; width: 100%; }

.glass-contact-card { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); border: 1px solid rgba(255, 255, 255, 0.2); padding: clamp(30px, 5vw, 60px); border-radius: 32px; max-width: 900px; margin: 0 auto; box-shadow: 0 20px 50px rgba(0,0,0,0.3); text-align: center; }
.contact-grid { display: grid; grid-template-columns: 1fr; gap: 40px; text-align: left; }
@media (min-width: 768px) { .contact-grid { grid-template-columns: 1fr 1fr; } }
.contact-item { display: flex; align-items: flex-start; gap: 20px; background: rgba(255,255,255,0.05); padding: 20px; border-radius: 16px; transition: background 0.3s; }
.contact-item:hover { background: rgba(255,255,255,0.15); }
.icon-circle { width: 50px; height: 50px; background: #fff; color: var(--color-primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; flex-shrink: 0; }
.info-text .label { font-size: 0.8rem; text-transform: uppercase; color: rgba(255,255,255,0.6); margin-bottom: 5px; }
.info-text .link, .info-text p { color: #fff; font-size: 1.1rem; font-weight: 600; text-decoration: none; margin: 0; line-height: 1.4; }
.fb-link { color: #4aa1f3 !important; transition: margin-left 0.3s; }
.fb-link:hover { margin-left: 5px; color: #fff !important; }
.footer-copyright { margin-top: 60px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.1); font-size: 0.85rem; color: rgba(255,255,255,0.5); }




/* --- SEKCJA KRAINA (BENTO GRID) --- */
.nature-bento-section {
    padding: 100px 0;
    background-color: #F9FAFB; /* Bardzo jasne tło dla odróżnienia od białego */
}

/* Główny Grid Layout */
.bento-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
}

/* Desktop: Podział na 2 kolumny (Lewa szersza, Prawa z obrazkiem) */
@media (min-width: 1024px) {
    .bento-wrapper {
        grid-template-columns: 1.2fr 1fr; /* Lewa kolumna zajmuje nieco więcej miejsca */
        gap: 60px;
        align-items: stretch; /* Rozciągnij do równej wysokości */
    }
}

/* --- LEWA KOLUMNA --- */
.left-content-col {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 40px;
}

.bento-header .headline-lg {
    margin-bottom: 20px;
}

/* Wiersz z małymi kartami */
.small-cards-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

@media (min-width: 768px) {
    .small-cards-row {
        grid-template-columns: 1fr 1fr; /* Dwie karty obok siebie */
    }
}

/* Stylizacja Małych Kart */
.info-card {
    background: #fff;
    padding: 30px;
    border-radius: 24px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    border: 1px solid rgba(0,0,0,0.02);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

.info-card h3 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--color-text-main);
}

.info-card p {
    font-size: 0.95rem;
    color: var(--color-text-muted);
    line-height: 1.5;
}

/* Ikony w kółeczkach */
.icon-box {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 20px;
}

.icon-teal { background-color: #E0F2F1; color: var(--color-primary); }
.icon-orange { background-color: #FFF3E0; color: var(--color-accent); }
.icon-white { background-color: rgba(255,255,255,0.2); color: #fff; backdrop-filter: blur(5px); }

/* --- PRAWA KOLUMNA (DUŻA KARTA Z OBRAZKIEM) --- */
.right-visual-col {
    position: relative;
    height: 100%;
    min-height: 500px; /* Minimalna wysokość na mobile */
}

.large-image-card {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 32px;
    overflow: hidden;
    /* To jest to "obramowanie" - biała ramka + cień */
    background-color: #fff;
    padding: 10px; 
    box-shadow: 0 20px 60px rgba(0, 128, 128, 0.15);
}

.image-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 24px; /* Wewnętrzne zaokrąglenie zdjęcia */
    overflow: hidden;
}

.image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
}

/* Zoom zdjęcia przy hoverze całej karty */
.large-image-card:hover img {
    transform: scale(1.05);
}

/* Gradient przyciemniający dół zdjęcia (żeby tekst był czytelny) */
.gradient-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,0.8) 100%);
    pointer-events: none;
}

/* Treść na zdjęciu */
.card-overlay-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 40px;
    color: #fff;
    z-index: 2;
}

.card-overlay-content h3 {
    font-size: 1.8rem;
    font-weight: 800;
    margin-bottom: 12px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.card-overlay-content p {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.5;
    max-width: 90%;
}

/* Responsywność dla mobile */
@media (max-width: 768px) {
    .nature-bento-section { padding: 60px 0; }
    .bento-wrapper { gap: 30px; }
    .right-visual-col { min-height: 400px; } /* Mniejsza wysokość zdjęcia na telefonie */
    .card-overlay-content { padding: 25px; }
    .card-overlay-content h3 { font-size: 1.5rem; color: #fff; }
	
}

/* --- FIX KOLORU NAGŁÓWKA LISWARTA --- */
.card-overlay-content h3 {
    color: #ffffff !important; /* Wymusza biały kolor */
}






/* --- FIX SEKCJI KONTAKT (CLEAN & PREMIUM LOOK) --- */

/* 1. Ulepszenie Szklanej Karty (Lepszy kontrast) */
#kontakt .glass-contact-card {
    /* Ciemniejsze, bardziej eleganckie szkło */
    background: rgba(15, 35, 35, 0.75) !important; 
    backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 25px 50px rgba(0,0,0,0.25) !important;
    padding: clamp(40px, 5vw, 60px) !important;
}

/* 2. Nagłówek i Opis (Hierarchia wizualna) */
#kontakt .contact-header h2 {
    color: #ffffff !important;
    font-weight: 800 !important;
    text-shadow: 0 2px 10px rgba(0,0,0,0.2); /* Lekki cień dla czytelności */
    margin-bottom: 12px !important;
}

#kontakt .contact-header p {
    /* Złamana biel (mniej rzucająca się w oczy) */
    color: rgba(255, 255, 255, 0.7) !important; 
    font-size: 1.1rem !important;
    font-weight: 400 !important;
    margin-bottom: 40px !important;
}

/* 3. Karty kontaktowe (Items) */
#kontakt .contact-item {
    background: rgba(255, 255, 255, 0.03) !important; /* Bardzo subtelne tło */
    border: 1px solid transparent;
    padding: 20px !important;
    border-radius: 16px;
    transition: all 0.3s ease;
    align-items: center !important; /* Pionowe wyśrodkowanie ikony i tekstu */
}

/* Efekt po najechaniu na kafelek */
#kontakt .contact-item:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px); /* Minimalny ruch w górę */
}

/* 4. Ikony (Spójność) */
#kontakt .icon-circle {
    background-color: #ffffff !important;
    color: var(--color-primary) !important; /* Turkus */
    width: 48px !important;
    height: 48px !important;
    font-size: 1.2rem !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* 5. Teksty wewnątrz kafelków */
#kontakt .info-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Wszystko wyrównane do lewej */
    gap: 4px; /* Odstęp między elementami */
}

#kontakt .info-text .label {
    font-size: 0.75rem !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.5) !important; /* Ciemniejszy label */
    margin-bottom: 2px !important;
    font-weight: 600;
}

/* 6. LINKI (Kluczowa poprawa: brak podkreśleń, biały kolor) */
#kontakt .info-text a, 
#kontakt .info-text p,
#kontakt .fb-link {
    color: #ffffff !important; /* Czysta biel */
    text-decoration: none !important; /* USUWA PODKREŚLENIA */
    font-weight: 600 !important;
    font-size: 1.05rem !important;
    transition: color 0.3s ease !important;
    border-bottom: none !important;
    box-shadow: none !important;
    display: block; /* Każdy numer w nowej linii */
    line-height: 1.4 !important;
}

/* Hover na linki (Zmiana na pomarańczowy) */
#kontakt .info-text a:hover,
#kontakt .fb-link:hover {
    color: var(--color-accent) !important; 
    margin-left: 0 !important; 
}

/* 7. Specjalne traktowanie Facebooka */
#kontakt .fb-link {
    /* Nadpisujemy kolor "Facebook Blue" na biały, żeby pasował do reszty */
    color: #ffffff !important; 
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
}



#kontakt .fb-link:hover::after {
    transform: translateX(5px); /* Tylko strzałka się przesuwa */
    color: var(--color-accent) !important;
}

/* 8. Stopka Copyright */
#kontakt .footer-copyright {
    margin-top: 50px !important;
    padding-top: 20px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.4) !important;
    font-size: 0.85rem !important;
}




/* --- FIX BUTTONÓW (NAPRAWA UCIĘTEGO DOŁU) --- */

.hero-actions {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    margin-top: 40px;
}

/* Baza przycisku */
.hero-actions a.btn {
    text-decoration: none !important; /* Usuwa podkreślenie tekstu */
    box-shadow: none !important;      /* Usuwa dziwne cienie motywu */
    /* USUNIĘTO: border-bottom: none !important; - to psuło ramkę */
    
    position: relative;
    overflow: hidden;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 30px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1rem;
    transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    line-height: 1;
    min-width: 160px;
    margin-bottom: 5px; /* Margines bezpieczeństwa na dole */
}

/* Efekt SMUGI (Shine) */
.hero-actions a.btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transform: skewX(-20deg);
    transition: none;
    pointer-events: none;
    z-index: -1;
}

.hero-actions a.btn:hover::after {
    left: 150%;
    transition: all 0.6s ease;
}

/* Przycisk Główny (Turkus) */
.hero-actions .btn-primary {
    background-color: var(--color-primary);
    border: 2px solid var(--color-primary) !important; /* Wymuszamy pełną ramkę */
    color: #ffffff !important;
}

.hero-actions .btn-primary:hover {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark) !important;
    transform: translateY(-3px);
    color: #ffffff !important;
}

/* Przycisk Drugorzędny (Outline) */
.hero-actions .btn-secondary {
    background: transparent;
    border: 2px solid #D1D5DB !important; /* Wymuszamy pełną ramkę (szarą) */
    color: var(--color-text-main) !important;
}

.hero-actions .btn-secondary:hover {
    border-color: var(--color-primary) !important; /* Pełna ramka (turkus) */
    color: var(--color-primary) !important;
    background: #fff;
    transform: translateY(-3px);
}

/* Responsywność na telefonie */
@media (max-width: 768px) {
    .hero-actions a.btn {
        width: 100%;
    }
}


/* --- FIX SEKCJI O NAS (ODSTĘP I TŁO) --- */
.about-split-section {
    padding-top: 80px !important;  /* Odstęp treści od góry (od headera) */
    padding-bottom: 80px !important; /* Symetryczny odstęp na dole */
    background-color: #f9fafb !important; /* Jasnoszare tło */
    margin-top: 0 !important; /* Upewniamy się, że nie ma zewnętrznych marginesów */
}



/* --- SEKCJA TRASY V2 (REMAKE) --- */

.routes-section-v2 {
    padding: 80px 0;
    background-color: #fff;
    overflow: visible; /* Ważne dla popupów */
}

/* Linia czasowa (Timeline) */
.timeline-wrapper {
    position: relative;
    max-width: 900px;
    margin: 40px auto 0 auto;
    padding-left: 40px;
}

/* Pionowa linia */
.timeline-wrapper::before {
    content: '';
    position: absolute;
    left: 8px; /* Pozycjonowanie linii */
    top: 0;
    bottom: 0;
    width: 2px;
    background: #E5E7EB; /* Jasnoszara linia */
    border-radius: 2px;
}

/* Kontener Pojedynczej Trasy */
.route-item {
    position: relative;
    margin-bottom: 25px;
}

/* MARKER (Kropka po lewej z animacją) */
.timeline-marker {
    position: absolute;
    left: -41px; /* Wycentrowane względem linii */
    top: 25px;   /* Wycentrowane względem karty */
    width: 18px;
    height: 18px;
    background-color: #fff;
    border: 3px solid var(--color-primary); /* Turkus */
    border-radius: 50%;
    z-index: 2;
    transition: all 0.3s ease;
}

/* Wariant dla Warty (można zmienić kolor, jeśli chcesz) */
.marker-warta {
    border-color: #006064; /* Ciemniejszy turkus dla Warty */
}

/* Animacja i efekt po najechaniu na kartę */
.route-item:hover .timeline-marker {
    background-color: var(--color-primary);
    transform: scale(1.2);
    box-shadow: 0 0 0 6px rgba(0, 128, 128, 0.2); /* Efekt Pulse */
}

/* KARTA TRASY */
.route-card-modern {
    background: #fff;
    border: 1px solid #F3F4F6;
    border-radius: 16px;
    padding: 20px 24px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
}

.route-item:hover .route-card-modern {
    transform: translateX(5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.06);
    border-color: rgba(0, 128, 128, 0.2);
}

.card-main-content {
    flex-grow: 1;
}

/* CHIPS (Tagi) */
.badges-row {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
}

.chip {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 50px;
    letter-spacing: 0.5px;
}

/* Kolory Chipów */
.chip-river.liswarta {
    background-color: #E0F2F1;
    color: var(--color-primary);
}

.chip-river.warta {
    background-color: #E3F2FD;
    color: #0277BD;
}

.chip-status {
    background-color: #FFF3E0;
    color: var(--color-accent);
}

.chip-status.star {
    border: 1px solid rgba(255, 140, 0, 0.2);
}

/* Nazwy Trasy */
.route-names h3 {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--color-text-main);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.route-names .arrow {
    color: var(--color-accent);
    font-size: 1rem;
}

/* Metryki (KM, Czas) */
.route-meta {
    display: flex;
    gap: 20px;
}

.meta-box {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    color: var(--color-text-muted);
    font-weight: 600;
    background: #F9FAFB;
    padding: 6px 12px;
    border-radius: 8px;
}

/* PRZYCISK INFO (i) */
.info-trigger {
    position: relative; /* Ważne dla pozycjonowania popupu */
    margin-left: 20px;
    cursor: pointer;
}

.i-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid #E5E7EB;
    color: #9CA3AF;
    font-weight: 700;
    font-family: serif; /* Dla ładnego szeryfowego "i" */
    font-style: italic;
    transition: all 0.3s ease;
}

.info-trigger:hover .i-icon {
    border-color: var(--color-primary);
    color: #fff;
    background-color: var(--color-primary);
}

/* POPUP Z OPISEM (Tooltip) */
.info-popup {
    position: absolute;
    top: 40px; /* Poniżej ikonki */
    right: 0;
    width: 300px; /* Szerokość dymku */
    background: #fff;
    border: 1px solid #E5E7EB;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
    padding: 20px;
    border-radius: 12px;
    z-index: 100;
    
    /* Stan początkowy: ukryty */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* Wyświetlanie po najechaniu na kontener .info-trigger */
.info-trigger:hover .info-popup {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.info-popup h4 {
    font-size: 0.95rem;
    color: var(--color-primary);
    margin-bottom: 8px;
    font-weight: 700;
}

.info-popup p {
    font-size: 0.85rem;
    color: var(--color-text-main);
    line-height: 1.5;
    margin: 0;
}

/* RESPANSYWNOŚĆ */
@media (max-width: 768px) {
    .timeline-wrapper { padding-left: 30px; }
    .timeline-marker { left: -39px; width: 14px; height: 14px; top: 22px; }
    .route-card-modern { flex-direction: column; padding: 16px; }
    .info-trigger { position: absolute; top: 16px; right: 16px; margin: 0; }
    
    /* Na mobile tooltip musi być inteligentniejszy, 
       ale CSS-only hover działa jako tap na większości telefonów */
    .info-popup {
        width: 260px;
        right: -10px; /* Lekka korekta */
    }
}




/* --- FIX Z-INDEX (Dymek nad innymi kafelkami) --- */

/* Gdy najeżdżamy na konkretną trasę (cały wiersz), 
   nadajemy jej bardzo wysoki priorytet wyświetlania */
.route-item:hover {
    z-index: 50; 
    position: relative; /* Upewniamy się, że z-index zadziała */
}







/* --- SEKCJA CENNIK V2 (MODERN CLEAN) --- */

.pricing-section-modern {
    padding: 100px 0;
    /* Delikatny gradient tła */
    background: linear-gradient(180deg, #FFFFFF 0%, #F3F8F8 100%);
}

.pricing-grid-modern {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    align-items: stretch; /* Ważne: rozciąga karty do tej samej wysokości */
    max-width: 1100px;
    margin: 0 auto;
    padding-top: 20px; /* Miejsce na badge wystający w górę */
}

@media (min-width: 900px) {
    .pricing-grid-modern {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* --- KARTA BAZOWA --- */
.pricing-card-modern {
    background: #fff;
    border-radius: 24px;
    padding: 40px 30px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.05);
    border: 1px solid rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column; /* Układ pionowy */
    justify-content: space-between; /* Rozpycha górę i dół */
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pricing-card-modern:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(0, 128, 128, 0.1);
}

/* Wyróżniona karta (Środek) */
.pricing-card-modern.featured {
    border: 2px solid var(--color-primary);
    box-shadow: 0 15px 50px rgba(0, 128, 128, 0.15);
    z-index: 2;
}

/* Karta Dodatków (Prawa) */
.pricing-card-modern.addon-theme {
    background-color: #FFFBF5; /* Bardzo jasny kremowy */
    border: 1px dashed var(--color-accent);
}

/* --- BADGE (Najczęściej Wybierane) --- */
.best-choice-badge {
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, var(--color-accent), #FF6B00);
    color: white;
    padding: 8px 24px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap; /* Zapobiega łamaniu tekstu */
    box-shadow: 0 5px 15px rgba(255, 140, 0, 0.3);
}

/* --- TREŚĆ KARTY --- */
.period-badge {
    display: inline-block;
    background-color: #F3F4F6;
    color: var(--color-text-muted);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.period-badge.highlight-color {
    background-color: #E0F2F1;
    color: var(--color-primary);
}

.period-badge.orange-color {
    background-color: #FFF3E0;
    color: var(--color-accent);
}

/* Cena */
.price-wrapper {
    margin-bottom: 25px;
    color: var(--color-text-main);
}

.price-val {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -1px;
}

.price-currency {
    font-size: 1.2rem;
    font-weight: 600;
    vertical-align: top;
    margin-left: 2px;
}

.price-sub {
    display: block;
    font-size: 0.9rem;
    color: var(--color-text-muted);
    margin-top: 5px;
}

/* Linia oddzielająca */
.divider {
    height: 1px;
    background-color: #eee;
    width: 100%;
    margin-bottom: 25px;
}

/* --- LISTA FEATUREÓW --- */
.modern-list {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}

.modern-list li {
    margin-bottom: 14px;
    font-size: 0.95rem;
    color: #4B5563;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Kółeczko z ptaszkiem */
.check-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background-color: #E0F2F1; /* Jasny turkus */
    color: var(--color-primary);
    border-radius: 50%;
    font-size: 0.7rem;
    font-weight: bold;
    flex-shrink: 0;
}

.check-circle.highlight {
    background-color: var(--color-primary);
    color: white;
}

.check-circle.orange {
    background-color: #FFF3E0;
    color: var(--color-accent);
}

/* --- SEKCJA DOLNA (PRZYCISKI) --- */
.card-bottom {
    margin-top: 30px; /* Odpycha przycisk od listy */
}

.btn-price {
    width: 100%;
    padding: 14px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: 0.3s;
    text-align: center;
}

/* Outline Button */
.btn-outline {
    background: transparent;
    border: 2px solid #E5E7EB;
    color: var(--color-text-main);
}

.btn-outline:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: #fff;
}

/* Filled Button */
.btn-filled {
    background: var(--color-primary);
    border: 2px solid var(--color-primary);
    color: white;
    box-shadow: 0 5px 15px rgba(0, 128, 128, 0.2);
}

.btn-filled:hover {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    transform: translateY(-2px);
}

.addon-note {
    text-align: center;
    font-size: 0.9rem;
    color: var(--color-accent);
    font-weight: 600;
    font-style: italic;
}

/* Responsywność na mobile */
@media (max-width: 768px) {
    .pricing-card-modern.featured {
        transform: scale(1); /* Reset powiększenia na mobile */
        margin: 20px 0; /* Odstęp od innych kart */
    }
}








/* --- FIX: EFEKT BŁYSKU (SHINE) - IDENTYCZNY JAK W HERO --- */

/* 1. Ustawienie bazy dla przycisku */
.pricing-card-modern.featured .btn-filled {
    position: relative;
    overflow: hidden; /* Ukrywa smugę, gdy jest poza przyciskiem */
    z-index: 1;
}

/* 2. Tworzymy smugę światła (Parametry 1:1 z Hero) */
.pricing-card-modern.featured .btn-filled::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%; /* Start poza przyciskiem */
    width: 100%;
    height: 100%;
    /* Ten sam gradient co w Hero (90deg, 0.4 opacity) */
    background: linear-gradient(
        90deg, 
        transparent, 
        rgba(255, 255, 255, 0.4), 
        transparent
    );
    transform: skewX(-20deg); /* To samo pochylenie */
    transition: none;
    pointer-events: none;
    z-index: 2; /* Na wierzchu, żeby było widać na tle koloru */
}

/* 3. Animacja po najechaniu (Ten sam czas: 0.6s) */
.pricing-card-modern.featured .btn-filled:hover::after {
    left: 150%; /* Przejazd na drugą stronę */
    transition: all 0.6s ease;
}




/* --- STICKY PHONE BUTTON (SHINY EFFECT) --- */

.sticky-phone-btn {
    position: fixed;
    bottom: 30px; /* Odstęp od dołu */
    right: 30px;  /* Odstęp od prawej */
    width: 64px;
    height: 64px;
    background-color: #008080; /* Twój turkus */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(0, 128, 128, 0.4);
    z-index: 9990; /* Wysoko, żeby był nad treścią */
    cursor: pointer;
    transition: transform 0.3s ease;
    overflow: hidden; /* Kluczowe dla efektu shine */
    border: 2px solid rgba(255,255,255,0.1);
}

/* Hover - lekkie powiększenie */
.sticky-phone-btn:hover {
    transform: scale(1.1) translateY(-5px);
    background-color: #006666; /* Ciemniejszy turkus po najechaniu */
}

/* --- ANIMACJA SHINE (SMUGA) CO 5 SEKUND --- */
.sticky-phone-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 100%;
    height: 100%;
    /* Biała smuga pod kątem */
    background: linear-gradient(
        120deg, 
        transparent, 
        rgba(255, 255, 255, 0.6), 
        transparent
    );
    transform: skewX(-20deg);
    
    /* TU JEST MAGIA: Animacja trwa 5s i pętli się w nieskończoność */
    animation: shinyLoop 5s infinite;
}

@keyframes shinyLoop {
    0% { left: -150%; }   /* Start poza przyciskiem */
    10% { left: 150%; }   /* Przelot przez przycisk (szybki błysk - 0.5s) */
    100% { left: 150%; }  /* Czekaj resztę czasu (4.5s) w ukryciu */
}

/* --- DODATEK: PULSUJĄCY PIERŚCIEŃ (Dla lepszej widoczności) --- */
.pulse-ring {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid #008080;
    animation: pulseRing 2s infinite;
    z-index: -1; /* Pod spodem */
}

@keyframes pulseRing {
    0% { transform: scale(1); opacity: 0.7; }
    100% { transform: scale(1.5); opacity: 0; }
}

/* Responsywność na mobile */
@media (max-width: 768px) {
    .sticky-phone-btn {
        bottom: 20px;
        right: 20px;
        width: 56px;
        height: 56px;
    }
}














/* --- STYLIZACJA STRZAŁKI ASTRA (MNIEJSZA WERSJA) --- */

#ast-scroll-top {
    /* 1. Pozycjonowanie: Lewy Dolny Róg */
    right: auto !important;
    left: 20px !important;    /* Mniejszy odstęp od krawędzi */
    bottom: 20px !important;

    /* 2. Wygląd */
    background-color: #ffffff !important;
    border: 2px solid #008080 !important;
    border-radius: 50% !important;
    
    /* 3. NOWE MNIEJSZE WYMIARY */
    width: 40px !important;   /* Było 50px */
    height: 40px !important;  /* Było 50px */
    padding: 0 !important;
    
    /* 4. Centrowanie */
    display: flex !important;
    align-items: center;
    justify-content: center;
    
    /* 5. Dodatki */
    box-shadow: 0 4px 10px rgba(0, 128, 128, 0.15) !important;
    transition: all 0.3s ease !important;
    opacity: 1 !important;
    z-index: 999;
}

/* Mniejsza strzałka w środku */
#ast-scroll-top .ast-icon svg {
    fill: #008080 !important;
    width: 11px !important;   /* Zmniejszona z 14px */
    height: auto !important;
    transition: fill 0.3s ease !important;
}

/* Hover */
#ast-scroll-top:hover {
    background-color: #008080 !important;
    transform: translateY(-3px) !important;
}

#ast-scroll-top:hover .ast-icon svg {
    fill: #ffffff !important; 
}

/* Mobile - jeszcze mniejsze */
@media (max-width: 768px) {
    #ast-scroll-top {
        left: 15px !important;
        bottom: 15px !important;
        width: 35px !important;
        height: 35px !important;
    }
}














/* =========================================
   HEADER & MENU (FIXED & CLEAN)
   ========================================= */

/* 1. GŁÓWNY KONTENER (STICKY + SZKŁO) */
#masthead {
    position: sticky !important;
    top: 0 !important;
    z-index: 9999 !important;
    width: 100% !important;
    background-color: rgba(255, 255, 255, 0.95) !important; /* Prawie białe */
    backdrop-filter: blur(12px) !important; /* Rozmycie tła */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
    border-bottom: 1px solid rgba(0,0,0,0.03) !important;
}

/* Wymuszamy, żeby elementy w headerze były na środku w pionie */
.ast-primary-header-bar .site-primary-header-wrap {
    min-height: 80px !important; /* Stała, bezpieczna wysokość */
    align-items: center !important;
}

.ast-builder-grid-row {
    align-items: center !important;
    height: 100% !important;
}

/* 2. LOGO */
.site-logo-img img {
    max-height: 40px !important; /* Zgrabne logo */
    width: auto !important;
    display: block !important;
}

/* 3. MENU GŁÓWNE (Reset i Styl) */
.main-header-menu {
    align-items: center !important; /* Kluczowe: centruje przycisk w pionie */
    height: 100% !important;
}

/* Zwykłe linki */
.main-header-menu .menu-item .menu-link {
    color: var(--color-text-main) !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    padding: 0 15px !important; /* Tylko odstępy boczne */
    background: transparent !important;
    height: auto !important; /* Reset wysokości */
    line-height: 1 !important; /* Reset wysokości linii - to psuło przycisk */
    display: inline-block !important;
}

.main-header-menu .menu-item .menu-link:hover {
    color: var(--color-primary) !important;
}

/* 4. NAPRAWA PRZYCISKU "KONTAKT" (Ostatni element) */
.main-header-menu .menu-item:last-child {
    display: flex !important;
    align-items: center !important;
    margin-left: 20px !important; /* Odstęp od reszty menu */
}

.main-header-menu .menu-item:last-child .menu-link {
    /* Wygląd Pigułki */
    background-color: var(--color-primary) !important; /* Turkus */
    color: #ffffff !important;
    
    /* Resetujemy style Astry, które rozciągają przycisk */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 45px !important; /* Sztywna wysokość przycisku */
    line-height: 1 !important;
    padding: 0 30px !important; /* Szerokość przycisku */
    border-radius: 50px !important;
    border: none !important;
    margin: 0 !important;
    
    /* Cień i przejścia */
    box-shadow: 0 4px 15px rgba(0, 128, 128, 0.25) !important;
    transition: all 0.3s ease !important;
}

/* Hover na przycisku Kontakt */
.main-header-menu .menu-item:last-child .menu-link:hover {
    background-color: var(--color-primary-dark) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(0, 128, 128, 0.35) !important;
    color: #ffffff !important;
}

/* 5. MENU MOBILNE (Hamburger) */
.ast-mobile-menu-trigger-minimal {
    background: transparent !important;
}
.ast-mobile-svg {
    width: 24px !important;
    height: 24px !important;
    fill: #333 !important;
}

/* Ostatni element w menu mobilnym też jako przycisk, ale dopasowany */
.ast-mobile-header-content .menu-item:last-child .menu-link {
    background-color: var(--color-primary) !important;
    color: white !important;
    text-align: center !important;
    margin: 15px 20px !important;
    border-radius: 8px !important;
    display: block !important;
    padding: 12px !important;
    height: auto !important;
}




/* --- FIX MOBILE: KOLEJNOŚĆ I WYRÓWNANIE (Tekst -> Foto -> Cechy) --- */

@media (max-width: 900px) {
    /* 1. Ustawiamy kontener jako kolumnę, ale WYRÓWNUJEMY DO LEWEJ */
    .about-split-section .split-wrapper {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important; /* To naprawia centrowanie - dociąga wszystko do lewej */
    }

    /* 2. Rozbijamy kolumny */
    .about-split-section .image-column, 
    .about-split-section .content-column {
        display: contents !important;
    }

    /* --- USTAWIANIE KOLEJNOŚCI I KOREKTA WYGLĄDU --- */

    /* GRUPA 1: Teksty (Na górę + Wyrównanie do lewej) */
    .about-split-section .section-tag,
    .about-split-section .headline-lg,
    .about-split-section .body-text {
        order: 1 !important;
        text-align: left !important; /* Wymuszenie lewej strony */
        width: 100% !important;
     
    }
    
    /* Korekta nagłówka, żeby nie był gigantyczny na mobile */
    .about-split-section .headline-lg {
        margin-bottom: 15px !important;
    }

    /* GRUPA 2: Zdjęcie (W środek + Mniejsze marginesy) */
    .about-split-section .image-frame {
        order: 2 !important;
        width: 100% !important;

    }

    /* GRUPA 3: Cechy (Pod zdjęcie) */
    .about-split-section .features-list {
        order: 3 !important;
        width: 100% !important;
    }

    /* GRUPA 4: Przyciski */
    .about-split-section .hero-actions {
        order: 4 !important;
  
        justify-content: flex-start !important; /* Przyciski też do lewej */
    }
}








/* --- FIX MOBILE: ZMNIEJSZENIE ODSTĘPÓW (COMPACT LOOK) --- */

@media (max-width: 900px) {
    
    /* 1. Tag "O NASZEJ WYPOŻYCZALNI" */
    .about-split-section .section-tag {
        margin-bottom: 24px !important; /* Minimalny odstęp od nagłówka */
        margin-top: 0 !important;
        line-height: 1.2 !important;
        display: block !important;
    }

    /* 2. Nagłówek H2 "Witaj w królestwie..." */
    .about-split-section .headline-lg {
        margin-top: 0 !important;
        margin-bottom: 24px !important; /* Zmniejszono odstęp od tekstu poniżej */
        font-size: 2rem !important; /* Opcjonalnie: lekko mniejsza czcionka na mobile */
        line-height: 1.1 !important;
    }

    /* 3. Tekst główny (opis) */
    .about-split-section .body-text {
        margin-top: 0 !important;
        margin-bottom: 30px !important; /* Odstęp między tekstem a zdjęciem */
    }

    /* 4. Zdjęcie (Image Frame) */
    .about-split-section .image-frame {
        /* Usuwamy górny margines, bo tekst wyżej już ma swój odstęp */
        margin-top: 0 !important; 
        margin-bottom: 25px !important; /* Odstęp od ikonek pod zdjęciem */
        width: 100% !important;
    }
    
    /* Dodatkowe zabezpieczenie dla kontenera, żeby nie dodawał pustej przestrzeni */
    .about-split-section .split-wrapper {
        gap: 0 !important; 
    }
}




/* --- FIX MOBILE BUTTONS (Centrowanie i Pełna Szerokość) --- */

@media (max-width: 900px) {
    /* 1. Kontener przycisków */
    .about-split-section .hero-actions {
        width: 100% !important;      /* Zajmij całą szerokość rodzica */
        display: flex !important;    /* Flexbox */
        flex-direction: column !important; /* Jeden pod drugim */
        align-items: center !important;    /* Wyśrodkuj w poziomie */
        justify-content: center !important; 
        margin-top: 25px !important;
        gap: 12px !important; /* Równy odstęp między przyciskami */
    }

    /* 2. Same przyciski */
    .hero-actions a.btn {
        width: 100% !important;      /* Rozciągnij na max szerokość kontenera */
        max-width: 100% !important;  /* Zabezpieczenie */
        margin-left: 0 !important;   /* Usuń przypadkowe marginesy */
        margin-right: 0 !important;
        margin-bottom: 0 !important; /* Marginesy załatwia 'gap' wyżej */
        box-sizing: border-box !important; /* Padding wliczony w szerokość */
        text-align: center !important; /* Tekst na środku */
    }
}






















/* --- FIX SEKCJA TRASY (BALANS I WYPEŁNIENIE) --- */

/* 1. WYŚRODKOWANIE NAGŁÓWKA SEKCJI */
/* To zakotwiczy wzrok na środku i usunie wrażenie, że wszystko "ucieka" w lewo */
.routes-section-v2 .section-header {
    text-align: center !important;
    max-width: 800px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important; /* Reset paddingu, który był dla lewej strony */
}

/* 2. ZWĘŻENIE KONTENERA LISTY */
/* Żeby karty były bardziej "zwarte" i nie rozciągały się w nieskończoność */
.timeline-wrapper {
    max-width: 850px !important; /* Było 1000px */
}

/* 3. PRZEMEBLOWANIE KARTY NA DESKTOPIE (Fill the Void) */
@media (min-width: 768px) {
    
    /* Używamy Grid, żeby rozłożyć elementy: Lewa (Tekst) - Prawa (Dane) */
    .route-card-modern .card-main-content {
        display: grid !important;
        grid-template-columns: 1fr auto !important; /* Tekst zajmuje resztę, dane tyle ile trzeba */
        grid-template-areas: 
            "badges meta"
            "names meta" !important;
        align-items: center !important;
        gap: 0 30px !important; /* Odstęp między tekstem a danymi */
    }

    /* Przypisanie pól do siatki */
    .route-card-modern .badges-row {
        grid-area: badges !important;
        margin-bottom: 8px !important;
    }

    .route-card-modern .route-names {
        grid-area: names !important;
        margin-bottom: 0 !important; /* Usuwamy dolny margines, bo jest wycentrowane */
    }

    /* Przeniesienie metryk (KM/Czas) na PRAWO */
    .route-card-modern .route-meta {
        grid-area: meta !important;
        flex-direction: column !important; /* Metryki jedna pod drugą dla estetyki */
        align-items: flex-end !important; /* Wyrównaj do prawej */
        gap: 8px !important;
        margin-top: 0 !important;
        padding-right: 10px !important; /* Lekki odstęp od ikonki "i" */
        border-left: 1px solid #f0f0f0 !important; /* Elegancka linia oddzielająca */
        padding-left: 20px !important;
    }
    
    /* Zmiana wyglądu metryk, żeby pasowały do prawej strony */
    .route-card-modern .meta-box {
        background: transparent !important; /* Usuwamy szare tło */
        padding: 0 !important;
        font-size: 0.95rem !important;
        color: var(--color-text-main) !important;
    }
    
    .route-card-modern .meta-box .icon {
        color: var(--color-primary) !important; /* Ikony w kolorze turkusowym */
    }
}



/* --- FIX MOBILE: WYRÓWNANIE I ODSTĘPY (FINAL POLISH) --- */

@media (max-width: 900px) {
    
    /* 1. Sekcja TRASY: Nagłówek wraca do lewej */
    .routes-section-v2 .section-header {
        text-align: left !important;
        margin-left: 0 !important;  /* Usuwa centrowanie bloku */
        margin-right: 0 !important;
        max-width: 100% !important;
        padding-left: 0 !important;
    }

    /* 2. Zmniejszenie odstępów od góry do 20px (Galeria, Kraina, Cennik) */
    
    /* Galeria */
    .gallery-section-fixed {
        padding-top: 1px !important;
    }

    /* Kraina (Bento) */
    .nature-bento-section {
        padding-top: 1px !important;
    }

    /* Cennik */
    .pricing-section-modern {
        padding-top: 1px !important;
    }
}








/* --- FIX SEKCJI KONTAKTOWEJ (ICONS & RESPONSIVE) --- */

.contact-section {
    position: relative;
    padding: 80px 0;
    overflow: hidden;
}

/* Tło ze zdjęciem */
.contact-bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.contact-bg-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dark-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(14, 25, 25, 0.85); /* Ciemny turkusowy odcień */
}

/* Karta Kontaktowa (Glass) */
.glass-contact-card {
    position: relative;
    background: rgba(255, 255, 255, 0.05); /* Bardzo delikatne szkło */
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 50px;
    color: #ffffff;
    max-width: 900px;
    margin: 0 auto;
}

.contact-header {
    text-align: center;
    margin-bottom: 40px;
}

.contact-header h2 {
    font-size: 2.2rem;
    color: #ffffff;
    margin-bottom: 10px;
}

.contact-header p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1rem;
}

/* SIATKA (GRID) */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Dwie kolumny na desktopie */
    gap: 30px;
    margin-bottom: 40px;
}

.contact-item {
    background: rgba(255, 255, 255, 0.03);
    padding: 20px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: transform 0.3s ease, background 0.3s ease;
}

.contact-item:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-3px);
}

/* IKONA W KÓŁKU */
.icon-circle {
    width: 50px;
    height: 50px;
    background-color: #ffffff; /* Białe tło kółka */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

/* Kolor i rozmiar SVG w środku */
.icon-circle svg {
    width: 24px;
    height: 24px;
    /* Fill jest ustawiony inline w HTML (#008080), 
       ale tutaj możemy dodać pewność */
    fill: #008080; 
}

/* Teksty */
.info-text {
    display: flex;
    flex-direction: column;
}

.info-text .label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 4px;
    font-weight: 700;
}

.info-text .link, 
.info-text p,
.info-text .fb-link {
    color: #ffffff;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    line-height: 1.4;
    margin: 0;
    transition: color 0.3s ease;
}

.info-text .link:hover,
.info-text .fb-link:hover {
    color: #4DB6AC; /* Jaśniejszy turkus po najechaniu */
}

/* Footer Copyright */
.footer-copyright {
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 20px;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
}

.footer-copyright a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
}
.footer-copyright a:hover {
    text-decoration: underline;
}

/* --- RESPONSYWNOŚĆ (MOBILE) --- */
@media (max-width: 768px) {
    .glass-contact-card {
        padding: 30px 20px; /* Mniejszy padding wewnątrz */
    }

    .contact-grid {
        grid-template-columns: 1fr; /* Jedna kolumna */
        gap: 15px;
    }

    .contact-item {
        padding: 15px;
    }

    .contact-header h2 {
        font-size: 1.8rem;
    }
}







/* --- FIX MOBILE KONTAKT (NAPRAWA WYCHODZENIA POZA EKRAN) --- */

@media (max-width: 768px) {
    
    /* 1. Karta Główna (Szkło) */
    .glass-contact-card {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        /* Zmniejszamy padding, żeby dać więcej miejsca treści */
        padding: 30px 15px !important; 
        box-sizing: border-box !important; /* Kluczowe: padding wliczony w szerokość */
    }

    /* 2. Pojedynczy kafelek kontaktu */
    .contact-item {
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 15px 12px !important; /* Mniejsze odstępy wewnątrz */
        display: flex !important;
        align-items: center !important; /* Wyrównanie ikony i tekstu */
        gap: 15px !important;
    }

    /* 3. Trik naprawiający rozpychanie przez E-mail */
    .info-text {
        flex: 1 !important;        /* Zajmij resztę miejsca */
        min-width: 0 !important;   /* POZWÓL SIĘ KURCZYĆ (To naprawia błąd!) */
        width: 100% !important;
    }

    /* 4. Stylizacja linków (E-mail i Telefon) */
    .info-text .link,
    .info-text .fb-link,
    .info-text p {
        white-space: normal !important;       /* Pozwól na zawijanie */
        overflow-wrap: break-word !important; /* Łam długie słowa (e-mail) */
        word-break: break-word !important;    /* Łam długie słowa */
        font-size: 0.95rem !important;        /* Odrobinę mniejsza czcionka, żeby weszło */
        line-height: 1.3 !important;
        display: block !important;
    }

    /* Opcjonalnie: Zmniejszamy też ikonę, żeby nie zabierała miejsca */
    .icon-circle {
        width: 40px !important;
        height: 40px !important;
    }
    .icon-circle svg {
        width: 20px !important;
        height: 20px !important;
    }
}



/* --- FIX GALERIA (LIGHTBOX CLEANUP) --- */

/* Usuwa kropki (podkreślenia) i kółka (obrys focusa) ze strzałek i krzyżyka */
.lightbox-modal .prev,
.lightbox-modal .next,
.lightbox-modal .close-btn {
    text-decoration: none !important;      /* Usuwa "kropkę" (podkreślenie) */
    border: none !important;               /* Usuwa ewentualne ramki */
    outline: none !important;              /* Usuwa obrys po kliknięciu (desktop) */
    user-select: none !important;          /* Blokuje zaznaczanie tekstu */
    -webkit-tap-highlight-color: transparent !important; /* Usuwa błysk/kółko przy dotknięciu na mobile */
    background-color: transparent !important; /* Pewność, że nie ma tła */
    box-shadow: none !important;           /* Usuwa ewentualne cienie */
}

/* Dodatkowe zabezpieczenie dla stanu aktywnego/focus */
.lightbox-modal .prev:focus,
.lightbox-modal .prev:active,
.lightbox-modal .next:focus,
.lightbox-modal .next:active,
.lightbox-modal .close-btn:focus,
.lightbox-modal .close-btn:active {
    outline: none !important;
    background: transparent !important;
    box-shadow: none !important;
}








/* --- FIX MENU MOBILNE (PREMIUM LOOK) --- */

@media (max-width: 900px) {

    /* 1. Kontener menu - reset i wyśrodkowanie */
    .ast-mobile-header-content .main-header-bar-navigation {
        text-align: center !important;
        padding-top: 20px !important;
        padding-bottom: 30px !important;
    }

    /* 2. Zwykłe linki (O nas, Trasy, Zdjęcia, Cennik) */
    .ast-mobile-header-content .menu-item .menu-link {
        font-size: 1.1rem !important;      /* Większa, czytelna czcionka */
        font-weight: 600 !important;
        color: var(--color-text-main) !important;
        padding: 15px 0 !important;        /* Dużo miejsca na kliknięcie */
        border-bottom: 1px solid rgba(0,0,0,0.05) !important; /* Delikatna linia oddzielająca */
        display: block !important;         /* Rozciągnij na szerokość */
        background: transparent !important;
        text-transform: uppercase !important;
        letter-spacing: 1px !important;
    }

    /* Usuwamy obramowanie z ostatniego elementu przed przyciskiem */
    .ast-mobile-header-content .menu-item:nth-last-child(2) .menu-link {
        border-bottom: none !important;
    }

    /* 3. Przycisk "KONTAKT" (Totalna przebudowa) */
    .ast-mobile-header-content .menu-item:last-child {
        margin-top: 20px !important; /* Odstęp od reszty menu */
        display: block !important;
        width: 100% !important;
    }

    .ast-mobile-header-content .menu-item:last-child .menu-link {
        /* Wygląd przycisku */
        background-color: var(--color-primary) !important; /* Turkus */
        color: #ffffff !important;
        
        /* Wymiary i kształt */
        border-radius: 50px !important;
        width: 80% !important;       /* Szerokość przycisku (nie dotyka krawędzi) */
        margin: 0 auto !important;   /* KLUCZOWE: Wyśrodkowanie przycisku */
        padding: 14px 20px !important;
        
        /* Tekst */
        text-align: center !important;
        border: none !important;
        box-shadow: 0 4px 15px rgba(0, 128, 128, 0.3) !important;
        display: block !important; /* Wymuszenie bloku, żeby margin: auto zadziałał */
        line-height: 1 !important;
    }

    /* Efekt kliknięcia na mobile */
    .ast-mobile-header-content .menu-item:last-child .menu-link:active {
        transform: scale(0.98) !important;
        background-color: var(--color-primary-dark) !important;
    }
}


/* --- FIX MOBILE MENU (ODSTĘP Z LEWEJ) --- */

@media (max-width: 900px) {

    /* 1. Zwykłe linki (O nas, Trasy, Zdjęcia, Cennik) */
    /* Dodajemy oddech z lewej strony */
    .ast-mobile-header-content .menu-item .menu-link {
        padding-left: 40px !important;  /* Wyraźny odstęp od lewej krawędzi */
        padding-right: 20px !important;
        text-align: left !important;    /* Tekst wyrównany do lewej (wygląda lepiej z paddingiem) */
        justify-content: flex-start !important; /* Pewność dla flexboxa */
    }

    /* 2. Wyjątek dla Przycisku "KONTAKT" (Ostatni element) */
    /* Musimy zresetować powyższe ustawienia, żeby tekst w przycisku był na środku */
    .ast-mobile-header-content .menu-item:last-child .menu-link {
        padding-left: 0 !important;     /* Reset paddingu, żeby tekst był na środku pigułki */
        padding-right: 0 !important;
        text-align: center !important;  /* Tekst w przycisku na środku */
        justify-content: center !important;
        
        /* Upewniamy się, że przycisk jest na środku ekranu */
        margin-left: auto !important;
        margin-right: auto !important;
        width: 80% !important;
    }
}



@media (max-width: 900px) {
    .about-split-section {
        padding-top: 30px !important; 
    }
}