@media (max-width: 768px) {

    /* 1. Kontener menu - robimy go na cały ekran */

    .nav-links {

        display: flex !important;

        flex-direction: column !important;

        align-items: center;

        justify-content: center;

        

        position: fixed !important;

        top: 0 !important;

        right: 0 !important; /* Ustawiamy go na sztywno po prawej */

        

        width: 100% !important; /* Na mobile lepiej dać 100% szerokości */

        height: 100vh !important;

        background-color: #00467a !important; /* Granatowy jak w logo */

        

        /* KLUCZ: Domyślnie przesuwamy go o 100% w prawo, czyli poza ekran */

        transform: translateX(100%); 

        transition: transform 0.4s ease-in-out !important;

        

        z-index: 999 !important; /* Pod burgerem, ale nad resztą strony */

    }



    /* 2. Klasa aktywująca - cofa przesunięcie (pokazuje menu) */

    .nav-links.nav-active {

        transform: translateX(0) !important;

    }



    /* 3. Linki wewnątrz menu */

    .nav-links li {

        margin: 15px 0 !important;

        margin-left: 0 !important;

        opacity: 1 !important;

        visibility: visible !important;

    }



    .nav-links a {

        font-size: 1.5rem !important; /* Duże napisy dla wędkarzy */

        text-transform: uppercase;

        letter-spacing: 2px;

    }



    /* 4. Sam Burger - musi być zawsze widoczny nad menu */

    .burger {

        display: block !important;

        position: relative !important;

        z-index: 1000 !important; /* Musi być wyżej niż nav-links (999) */

        cursor: pointer;

        padding: 10px;

    }



    .burger span {

        display: block;

        width: 30px;

        height: 3px;

        background-color: white !important;

        margin: 6px 0;

        transition: 0.3s;

    }

    

    /* Animacja X (jeśli używasz klasy toggle w JS) */

    .burger.toggle span:nth-child(1) { transform: rotate(-45deg) translate(-5px, 6px); }

    .burger.toggle span:nth-child(2) { opacity: 0; }

    .burger.toggle span:nth-child(3) { transform: rotate(45deg) translate(-5px, -8px); }

}



/* --- ZMIENNE I KONFIGURACJA --- */

:root {

    /* Kolory wyciągnięte prosto z logo */

    --logo-navy: #00467a;       /* Ciemny granat */

    --logo-blue: #009ee3;       /* Jasny błękit */

    --logo-red: #e31e24;        /* Czerwień (akcent) */

    

    /* Pomocnicze */

    --bg-light: #f4f7fa;

    --text-dark: #1d1d1b;

    --white: #ffffff;

    --transition: all 0.3s ease-in-out;

}



* { margin: 0; padding: 0; box-sizing: border-box; }



body {

    font-family: 'Roboto', sans-serif;

    line-height: 1.7;

    color: var(--text-dark);

    background-color: var(--white);

    overflow-x: hidden;

}



h1, h2, h3, .logo { 

    font-family: 'Montserrat', sans-serif; 

    font-weight: 700; 

}



h1, h2, h3 {

    color: var(--logo-navy);

}



.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }



/* --- NAWIGACJA --- */

header {

    background: var(--logo-navy);

    border-bottom: 4px solid var(--logo-blue); /* Nawiązanie do fali w logo */

    padding: 15px 0;

    position: fixed;

    width: 100%;

    top: 0;

    z-index: 1000;

    box-shadow: 0 4px 15px rgba(0,0,0,0.2);

}



nav { display: flex; justify-content: space-between; align-items: center; }



.logo { color: var(--white); text-decoration: none; font-size: 1.5rem; letter-spacing: 1px; }

.logo span { color: var(--logo-blue); }



.nav-links { display: flex; list-style: none; align-items: center; }

.nav-links li { margin-left: 30px; }

.nav-links a { color: var(--white); text-decoration: none; font-weight: 500; transition: var(--transition); }

.nav-links a:hover { color: var(--logo-blue); }



.nav-btn {

    background: var(--logo-blue) !important;

    color: var(--white) !important;

    padding: 10px 22px;

    border-radius: 5px;

    font-weight: bold;

}



.nav-btn:hover {

    background: var(--logo-red) !important; /* Czerwony akcent jako "Call to action" */

}



/* --- HERO SECTION --- */

.hero {

    height: 100vh;

    background: url('../images/background.jpg') center/cover no-repeat fixed; 

    display: flex;

    align-items: center;

    position: relative;

    color: var(--white);

}



.hero-overlay {

    position: absolute;

    top: 0; left: 0; width: 100%; height: 100%;

    background: linear-gradient(to right, rgba(0,70,122,0.85), transparent);

}
.hero-overlay-belona {

    position: absolute;

    top: 0; left: 0; width: 100%; height: 90%;

    background: linear-gradient(to right, rgba(0,70,122,0.85), transparent);

}



.hero-content { position: relative; z-index: 10; max-width: 750px; }

.hero-content h1 { font-size: clamp(2.5rem, 6vw, 4rem); line-height: 1.1; margin-bottom: 20px; color: var(--white); }

.hero-content h1 span { color: var(--logo-blue); }

.hero-content p { font-size: 1.3rem; margin-bottom: 30px; opacity: 0.95; }



/* --- PRZYCISKI --- */

.btn {

    padding: 16px 35px;

    text-decoration: none;

    border-radius: 50px;

    font-weight: bold;

    display: inline-block;

    transition: var(--transition);

    margin-right: 15px;

    border: none;

    cursor: pointer;

}



.btn-primary { 

    background-color: var(--logo-blue);

    border: 2px solid var(--logo-blue);

    color: var(--white); 

}



.btn-primary:hover {

    background-color: var(--logo-navy);

    border-color: var(--logo-navy);

    transform: translateY(-3px);

}



.btn-outline { 

    border: 2px solid var(--white);

    color: var(--white);

}



.btn-outline:hover {

    background: var(--logo-blue);

    border-color: var(--logo-blue);

    transform: translateY(-3px);

}



/* --- SEKCJE OGÓLNE --- */

section { padding: 90px 0; }

.bg-light { background: var(--bg-light); }



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



.about-img { position: relative; }

.about-img img { 

    width: 100%; 

    border-radius: 10px; 

    box-shadow: 20px 20px 0 var(--logo-blue); /* Cień w kolorze fali */

}



.exp-badge {

    position: absolute;

    bottom: -20px; left: -20px;

    background: var(--logo-red); /* Czerwony wyróżnik */

    color: var(--white);

    padding: 20px;

    font-weight: bold;

    border-radius: 5px;

    box-shadow: 0 5px 15px rgba(0,0,0,0.2);

}



.subtitle { color: var(--logo-red); text-transform: uppercase; font-weight: bold; letter-spacing: 2px; }

h2 { font-size: 2.5rem; margin: 10px 0 25px; color: var(--logo-navy); position: relative; }

h2::after {

    content: '';

    display: block;

    width: 60px;

    height: 4px;

    background: var(--logo-blue);

    margin-top: 10px;

}



.features-list { list-style: none; margin-top: 30px; }

.features-list li { margin-bottom: 15px; padding-left: 35px; position: relative; }

.features-list li::before { 

    content: '✔'; 

    position: absolute; 

    left: 0; 

    color: var(--logo-blue); 

    font-weight: bold; 

    font-size: 1.2rem; 

}



/* --- TEKST GŁÓWNY --- */

.lead-text {

    font-size: 1.15rem;

    line-height: 1.8;

    color: var(--text-dark);

}



/* --- SEKCJA HISTORII (CIEMNA) --- */

.bg-dark-blue {

    background-color: var(--logo-navy);

    color: var(--white);

    padding: 100px 0;

    background-image: linear-gradient(rgba(0,70,122,0.92), rgba(0,70,122,0.92)), url('../images/pattern-wave.png');

}



.experience-content p {

    font-size: 1.1rem;

    column-count: 2;

    column-gap: 50px;

    text-align: justify;

}



/* --- SEKCJA DLA GOŚCI --- */

.for-guests { padding: 80px 0; background: var(--bg-light); }

.guests-box {

    max-width: 900px;

    margin: 0 auto;

    background: var(--white);

    padding: 50px;

    border-left: 6px solid var(--logo-blue);

    box-shadow: 0 10px 30px rgba(0,0,0,0.08);

}



.signature {

    margin-top: 30px;

    font-size: 1.6rem;

    color: var(--logo-navy);

    font-style: italic;

    font-weight: bold;

}



/* --- OFERTA (KARTY) --- */

.section-title { text-align: center; margin-bottom: 60px; }

.offer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }

.card {

    background: var(--white);

    padding: 40px;

    border-radius: 12px;

    text-align: center;

    transition: var(--transition);

    box-shadow: 0 5px 25px rgba(0,0,0,0.05);

    border-bottom: 4px solid transparent;

}

.card:hover { 

    transform: translateY(-10px); 

    border-bottom: 4px solid var(--logo-blue);

}

.card-icon { font-size: 3rem; margin-bottom: 20px; display: block; color: var(--logo-blue); }



/* --- KONTAKT --- */

.contact-hero {

    background: linear-gradient(rgba(0,70,122,0.9), rgba(0,70,122,0.9)), url('../images/contact-bg.jpg');

    padding: 140px 0 80px;

    color: var(--white);

    text-align: center;

}



.info-card, .form-card {

    background: var(--white);

    padding: 40px;

    border-radius: 12px;

    box-shadow: 0 10px 40px rgba(0,0,0,0.1);

}



.info-item .icon {

    font-size: 1.5rem;

    background: var(--bg-light);

    color: var(--logo-navy);

    width: 55px;

    height: 55px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    margin-right: 20px;

    border: 1px solid var(--logo-blue);

}



.phone-link {

    font-size: 1.3rem;

    font-weight: bold;

    color: var(--logo-navy);

    text-decoration: none;

    transition: var(--transition);

}

.phone-link:hover { color: var(--logo-blue); }



.whatsapp-alert {

    background: #eef9ef;

    border-left: 4px solid #25d366;

    padding: 20px;

    margin-top: 30px;

}



.btn-submit {

    width: 100%;

    background: var(--logo-navy);

    color: var(--white);

    padding: 18px;

    font-size: 1.1rem;

    border: none;

    cursor: pointer;

    font-weight: bold;

    border-radius: 8px;

    transition: var(--transition);

}



.btn-submit:hover { background: var(--logo-blue); }



.form-group input:focus, .form-group textarea:focus {

    border-color: var(--logo-blue);

    outline: none;

    box-shadow: 0 0 0 3px rgba(0, 158, 227, 0.1);

}



/* --- STOPKA --- */

footer { 

    background: var(--logo-navy); 

    color: var(--white); 

    padding: 80px 0 30px; 

    border-top: 5px solid var(--logo-blue);

}

.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; }

.footer-grid h4 { margin-bottom: 25px; color: var(--logo-blue); font-size: 1.3rem; }

.footer-grid a { color: var(--white); text-decoration: none; transition: var(--transition); }

.footer-grid a:hover { color: var(--logo-blue); }

.copyright { text-align: center; margin-top: 60px; padding-top: 25px; border-top: 1px solid rgba(255,255,255,0.1); font-size: 0.9rem; opacity: 0.8; }



/* --- MOBILE CTA BAR --- */

.mobile-cta {

    position: fixed;

    bottom: 0; width: 100%;

    background: var(--logo-red); /* Czerwony dla maksymalnej widoczności */

    color: var(--white);

    text-align: center;

    padding: 18px;

    font-weight: bold;

    text-decoration: none;

    z-index: 1001;

    display: none;

    font-size: 1.1rem;

    box-shadow: 0 -4px 10px rgba(0,0,0,0.2);

}



/* --- RESPONSYWNOŚĆ --- */

@media (max-width: 992px) {

    .grid, .contact-grid, .footer-grid { grid-template-columns: 1fr; }

    .experience-content p { column-count: 1; }

    .about-text { order: 2; }

    .about-img { order: 1; margin-bottom: 30px; }

}



@media (max-width: 768px) {

    .nav-links { display: none; } 

    .hero-content h1 { font-size: 2.3rem; }

    .hero { text-align: center; }

  

    .mobile-cta { display: block; }

    section { padding: 60px 0; }

    .btn { width: 100%; margin: 10px 0; }

    body { padding-bottom: 60px; } /* Miejsce na pasek mobile */

	        .burger {

        display: block !important;

        position: relative;

        z-index: 1001; /* Burger musi być NAD wysuniętym menu */

        cursor: pointer;

    }



    /* Rysujemy 3 paski menu */

   .burger span {

        display: block;

        width: 30px;

        height: 3px;

        background-color: white; /* Upewnij się, że kolor kontrastuje z tłem */

        margin: 6px 0;

        transition: 0.3s;

    }



    /* Styl dla rozwijanego menu na mobile */

   .nav-links {

        display: flex !important; /* Musi być flex, żeby linki były w kolumnie */

        flex-direction: column;

        position: fixed;

        right: -100%; /* Schowane poza ekranem */

        top: 0;

        height: 100vh;

        width: 70%; /* Szerokość menu */

        background-color: var(--logo-navy);

        padding-top: 100px;

        transition: 0.3s ease-in-out;

        z-index: 999;

        box-shadow: -10px 0 20px rgba(0,0,0,0.5);

    }



    /* Klasa aktywowana przez JavaScript, która wysuwa menu */

    .nav-links.nav-active {

        right: 0 !important; /* Wymuszamy pokazanie */

    }



    .nav-links li {

        margin: 20px 0;

        margin-left: 0;

    }

}



.about-image img {

    width: 100%;

    height: auto;

    display: block;

    border-radius: 12px; /* Subtelne zaokrąglenie */

    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); /* Delikatny, miękki cień */

    transition: transform 0.3s ease;

}



/* Opcjonalnie: bardzo delikatny efekt po najechaniu myszką */

.about-image img:hover {

    transform: translateY(-5px);

}

/* --- Style Podstrony Oferta --- */



.offer-hero {

    background: linear-gradient(rgba(0,70,122,0.9), rgba(0,70,122,0.9)), url('../images/ocean-bg.jpg');

    padding: 140px 0 70px;

    color: white;

    text-align: center;

}



.offer-row {

    display: flex;

    align-items: center;

    gap: 60px;

    padding: 60px 0;

    border-bottom: 1px solid #eee;

}



.offer-row.reverse {

    flex-direction: row-reverse;

}



.offer-text { flex: 1; }

.offer-image { flex: 1; }



.offer-image img {

    width: 100%;

    border-radius: 12px;

    box-shadow: 0 10px 25px rgba(0,0,0,0.1);

}



.offer-badge {

    background: var(--logo-blue);

    color: white;

    padding: 5px 15px;

    border-radius: 50px;

    font-size: 0.85rem;

    font-weight: bold;

    text-transform: uppercase;

    display: inline-block;

    margin-bottom: 15px;

}



.offer-text h2 {

    font-size: 2.2rem;

    margin-bottom: 20px;

}



.offer-info-box {

    margin-top: 25px;

    display: flex;

    gap: 20px;

}



.offer-info-box span {

    background: var(--bg-light);

    padding: 10px 20px;

    border-radius: 8px;

    font-weight: bold;

    color: var(--logo-navy);

}



.price-tag {

    margin-top: 20px;

    padding: 20px;

    background: #fff9e6; /* Subtelny kolor tła dla ceny */

    border-left: 4px solid var(--logo-red);

    border-radius: 4px;

}



/* Banner Rezerwacji */

.reservation-banner {

    background: var(--logo-navy);

    color: white;

    text-align: center;

    padding: 80px 20px;

}



.reservation-banner h2 {

    color: white;

    margin-bottom: 30px;

}



.btn-reservation {

    display: inline-block;

    background: var(--logo-red);

    color: white;

    text-decoration: none;

    padding: 20px 40px;

    font-size: 1.4rem;

    font-weight: bold;

    border-radius: 8px;

    transition: var(--transition);

}



.btn-reservation:hover {

    background: var(--white);

    color: var(--logo-red);

    transform: scale(1.05);

}



/* Responsywność */

@media (max-width: 992px) {

    .offer-row, .offer-row.reverse {

        flex-direction: column;

        text-align: center;

        gap: 30px;

    }

    .offer-text h2::after { left: 50%; transform: translateX(-50%); }

    .btn-reservation { font-size: 1rem; width: 100%; }

}

/* --- Style Podstrony Kontakt --- */



.contact-hero {

    background: linear-gradient(rgba(0,45,91,0.9), rgba(0,45,91,0.9)), url('../images/contact-bg.jpg');

    padding: 120px 0 60px;

    color: white;

    text-align: center;

}



.contact-page {

    margin-top: -40px; /* Lekkie najechanie na hero dla lepszego efektu */

    padding-bottom: 80px;

}



.contact-grid {

    display: grid;

    grid-template-columns: 1fr 1.5fr;

    gap: 40px;

}



/* Karty informacyjne */

.info-card, .form-card {

    background: white;

    padding: 40px;

    border-radius: 12px;

    box-shadow: 0 10px 30px rgba(0,0,0,0.1);

}



.info-item {

    display: flex;

    align-items: flex-start;

    margin-bottom: 25px;

}



.info-item .icon {

    font-size: 1.5rem;

    background: var(--bg-light);

    width: 50px;

    height: 50px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    margin-right: 20px;

}



.phone-link {

    font-size: 1.3rem;

    font-weight: bold;

    color: var(--primary);

    text-decoration: none;

}



/* WhatsApp Alert Box */

.whatsapp-alert {

    background: #e8f5e9;

    border-left: 4px solid #4caf50;

    padding: 20px;

    margin-top: 30px;

    border-radius: 4px;

}



/* Formularz */

.form-group {

    margin-bottom: 20px;

}



.form-group label {

    display: block;

    margin-bottom: 8px;

    font-weight: 600;

    color: #333;

}



.form-group input, .form-group textarea {

    width: 100%;

    padding: 15px;

    border: 1px solid #ddd;

    border-radius: 8px;

    font-family: inherit;

    font-size: 1rem;

}



.form-group input:focus, .form-group textarea:focus {

    border-color: var(--accent);

    outline: none;

    box-shadow: 0 0 0 3px rgba(243, 156, 18, 0.1);

}



.btn-submit {

    width: 100%;

    background: var(--primary);

    color: white;

    padding: 18px;

    font-size: 1.1rem;

    border: none;

    cursor: pointer;

}



.btn-submit:hover {

    background: var(--accent);

}



.alert-success {

    background: #d4edda;

    color: #155724;

    padding: 15px;

    border-radius: 8px;

    margin-bottom: 25px;

}



/* Responsywność */

@media (max-width: 992px) {

    .contact-grid {

        grid-template-columns: 1fr;

    }

    .contact-page { margin-top: 20px; }

}

/* --- Style Podstrony Przed Rejsem --- */



.guide-hero {

    background: linear-gradient(rgba(0,70,122,0.85), rgba(0,70,122,0.85)), url('../images/boat-deck.jpg');

    padding: 150px 0 80px;

    color: white;

    text-align: center;

}



.intro-author {

    font-size: 1.2rem;

    font-style: italic;

    opacity: 0.9;

    margin-top: 10px;

}



.guide-wrapper {

    max-width: 900px;

    margin: -50px auto 0; /* Wyciągnięcie treści nad hero */

    position: relative;

    z-index: 10;

}



.guide-intro-box {

    background: var(--white);

    padding: 40px;

    border-radius: 12px;

    box-shadow: 0 10px 30px rgba(0,0,0,0.1);

    margin-bottom: 40px;

    border-top: 5px solid var(--logo-red);

    font-size: 1.1rem;

    line-height: 1.8;

}



.guide-card {

    background: var(--white);

    padding: 50px;

    border-radius: 12px;

    box-shadow: 0 5px 20px rgba(0,0,0,0.05);

    margin-bottom: 30px;

}



.guide-card h2 {

    color: var(--logo-navy);

    margin-bottom: 25px;

    font-size: 1.8rem;

    display: flex;

    align-items: center;

}



.guide-card h2::before {

    content: '⚓';

    margin-right: 15px;

    color: var(--logo-blue);

    font-size: 1.4rem;

}



.guide-card p {

    margin-bottom: 20px;

    text-align: justify;

}



/* Wyróżnienie sekcji "Nie dotykać gwiazdki" */

.highlight-border {

    border: 2px solid var(--logo-red);

    background-color: #fff9f9;

}



.card-icon {

    font-size: 3rem;

    margin-bottom: 20px;

    display: block;

}



.guide-footer-box {

    background: var(--logo-navy);

    color: white;

    padding: 50px;

    border-radius: 12px;

    margin-top: 50px;

    text-align: center;

}



.guide-footer-box p { font-size: 1.2rem; }



.permit-alert {

    margin-top: 30px;

    padding-top: 20px;

    border-top: 1px solid rgba(255,255,255,0.2);

    font-weight: bold;

}



.permit-alert a {

    color: var(--logo-blue);

    text-decoration: underline;

}



/* Responsywność */

@media (max-width: 768px) {

    .guide-hero { padding: 120px 0 60px; }

    .guide-card { padding: 30px; }

    .guide-wrapper { margin-top: 20px; }

    .guide-card h2 { font-size: 1.4rem; }

}

/* --- Styl kafelków na stronie głównej --- */



.quick-nav {

    padding: 60px 0;

    background-color: var(--white);

}



.quick-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

    gap: 25px;

    margin-top: 40px;

}



.quick-card {

    text-decoration: none;

    background: var(--white);

    border-radius: 12px;

    overflow: hidden;

    box-shadow: 0 8px 20px rgba(0,0,0,0.08);

    transition: var(--transition);

    border: 1px solid #eee;

    display: flex;

    flex-direction: column;

}



.quick-card:hover {

    transform: translateY(-10px);

    box-shadow: 0 15px 35px rgba(0,70,122,0.15);

    border-color: var(--logo-blue);

}



.quick-card-img {

    height: 180px;

    background-size: cover;

    background-position: center;

    transition: transform 0.5s ease;

}



.quick-card:hover .quick-card-img {

    transform: scale(1.05);

}



.quick-card-content {

    padding: 20px;

    text-align: center;

}



.quick-card-content h3 {

    margin-bottom: 5px;

    color: var(--logo-navy);

    font-size: 1.4rem;

}



.quick-card-content p {

    font-size: 0.9rem;

    color: #666;

    margin-bottom: 15px;

}



.quick-link {

    display: inline-block;

    color: var(--logo-blue);

    font-weight: bold;

    font-size: 0.9rem;

    text-transform: uppercase;

}



/* Responsywność */

@media (max-width: 768px) {

    .quick-grid {

        grid-template-columns: 1fr 1fr; /* 2 kolumny na tabletach */

        gap: 15px;

    }

    .quick-card-content h3 { font-size: 1.1rem; }

}



@media (max-width: 480px) {

    .quick-grid {

        grid-template-columns: 1fr; /* 1 kolumna na małych telefonach */

    }

}

/* --- Sekcja Sklepu (Wersja: Książka + Voucher) --- */



.shop-promo {

    background: var(--logo-navy);

    color: var(--white);

    padding: 100px 0;

    position: relative;

}



.shop-wrapper {

    display: grid;

    grid-template-columns: 1.2fr 1fr;

    gap: 70px;

    align-items: center;

}



.shop-content h2 {

    color: var(--white);

    font-size: 2.8rem;

    margin-bottom: 25px;

}



.shop-items-mini {

    margin: 30px 0 45px;

}



.shop-item-box {

    display: flex;

    align-items: center;

    gap: 20px;

    background: rgba(255, 255, 255, 0.05);

    padding: 20px;

    border-radius: 10px;

    margin-bottom: 15px;

    border-left: 3px solid var(--logo-blue);

    transition: var(--transition);

}



.shop-item-box:hover {

    background: rgba(255, 255, 255, 0.1);

}



.item-icon {

    font-size: 2.5rem;

}



.shop-item-box h4 {

    color: var(--logo-blue);

    margin-bottom: 5px;

    font-size: 1.2rem;

}



.shop-item-box p {

    font-size: 0.95rem;

    margin: 0;

    opacity: 0.8;

}



.btn-shop {

    background-color: var(--logo-red);

    color: var(--white);

    padding: 18px 45px;

    font-size: 1.2rem;

    font-weight: bold;

    box-shadow: 0 10px 25px rgba(227, 30, 36, 0.3);

}



.shop-image-premium img {

    width: 100%;

    max-width: 500px;

    border-radius: 15px;

    /* Delikatny efekt poświaty, aby zdjęcie "świeciło" na ciemnym tle */

    box-shadow: 0 0 50px rgba(0, 158, 227, 0.2);

}



/* Responsywność */

@media (max-width: 992px) {

    .shop-wrapper {

        grid-template-columns: 1fr;

        text-align: center;

    }

    .shop-item-box { text-align: left; }

       .shop-image-premium {

        padding: 0; /* Usuwamy zbędne marginesy na małych ekranach */

        margin-bottom: 30px;

    }



    .shop-image-premium img {

        max-width: 90%; /* Dajemy 5% marginesu z każdej strony, wygląda to profesjonalniej */

        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); /* Zmniejszamy cień na mobile, by nie "rozpychał" szerokości strony */

    }



    /* Zapewniamy, że cała sekcja nie generuje poziomego paska */

    .shop-promo {

        overflow: hidden;

    }

}

/* --- Przycisk Rezerwacji w Ofercie --- */



.offer-actions {

    margin-top: 25px; /* Odstęp od tekstu powyżej */

}



.btn-book {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    background-color: var(--logo-blue); /* Twój błękit z logo */

    color: var(--white) !important;

    text-decoration: none;

    padding: 15px 35px;

    font-size: 1.1rem;

    font-weight: bold;

    border-radius: 8px;

    border-bottom: 4px solid var(--logo-navy); /* Ciemniejszy dół dla efektu 3D */

    transition: all 0.2s ease-in-out;

    box-shadow: 0 5px 15px rgba(0, 158, 227, 0.2);

}



.btn-book .icon {

    margin-right: 12px;

    font-size: 1.3rem;

}



.btn-book:hover {

    background-color: var(--logo-navy);

    border-bottom-color: var(--logo-blue);

    transform: translateY(-3px);

    box-shadow: 0 8px 20px rgba(0, 70, 122, 0.3);

}



.btn-book:active {

    transform: translateY(1px);

    border-bottom-width: 2px; /* Efekt wciśnięcia przycisku */

}



/* Dostosowanie na mobile - przycisk na całą szerokość */

@media (max-width: 768px) {

    .offer-actions {

        width: 100%;

    }

    .btn-book {

        width: 100%;

        padding: 18px 20px;

        font-size: 1.2rem;

    }

}

/* --- Styl nagłówka artykułu (wpis.php) --- */



.post-hero {

    background-color: var(--logo-navy);

    padding: 160px 0 60px; /* Duży górny margines, żeby nie chowało się pod menu */

    text-align: center;

    color: var(--white);

    border-bottom: 5px solid var(--logo-blue); /* Linia jak w logo */

}



.post-meta-top {

    margin-bottom: 20px;

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 15px;

}



.post-category {

    background: var(--logo-red); /* Czerwony tag z logo */

    color: white;

    padding: 5px 15px;

    border-radius: 4px;

    font-weight: bold;

    font-size: 0.85rem;

    text-transform: uppercase;

    letter-spacing: 1px;

}



.post-date-top {

    opacity: 0.8;

    font-size: 0.95rem;

}



.post-hero h1 {

    color: var(--white);

    font-size: clamp(2rem, 5vw, 3.5rem); /* Skaluje się płynnie */

    max-width: 900px;

    margin: 0 auto;

    line-height: 1.2;

}



/* --- Styl treści artykułu --- */



.post-wrapper {

    margin-top: -40px; /* Zdjęcie lekko nachodzi na granatowe tło */

    padding-bottom: 100px;

}



.post-main-img-container {

    max-width: 1000px;

    margin: 0 auto 40px;

    padding: 0 10px;

}



.post-main-img {

    width: 100%;

    height: auto;

    border-radius: 15px;

    box-shadow: 0 15px 40px rgba(0,0,0,0.2);

    border: 5px solid white; /* Ramka dla efektu zdjęcia */

}



.post-body {

    max-width: 850px;

    margin: 0 auto;

    background: white;

    padding: 20px;

}



/* Responsywność */

@media (max-width: 768px) {

    .post-hero { padding: 120px 0 40px; }

    .post-meta-top { flex-direction: column; gap: 5px; }

    .post-wrapper { margin-top: 20px; } /* Na mobile nie robimy nachodzenia */

}

/* --- Stylizacja Paginacji --- */



.pagination {

    margin-top: 60px;

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 10px;

    flex-wrap: wrap;

}



.pag-btn, .pag-num {

    text-decoration: none;

    padding: 12px 20px;

    border: 2px solid var(--logo-blue);

    color: var(--logo-navy);

    font-weight: bold;

    border-radius: 8px;

    transition: var(--transition);

    background: var(--white);

}



.pag-num {

    min-width: 45px;

    text-align: center;

}



.pag-num.active {

    background-color: var(--logo-blue);

    color: var(--white);

    border-color: var(--logo-blue);

}



.pag-btn:hover, .pag-num:hover:not(.active) {

    background-color: var(--logo-navy);

    color: var(--white);

    border-color: var(--logo-navy);

}



/* Poprawka meta-danych w kafelkach aktualności */

.post-meta-small {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 10px;

    font-size: 0.85rem;

}



.tag-mini {

    color: var(--logo-red);

    font-weight: bold;

    text-transform: uppercase;

}



.date-mini {

    color: #888;

}



@media (max-width: 600px) {

    .pag-btn {

        width: 100%; /* Na małych telefonach przyciski Następna/Poprzednia są na całą szerokość */

        text-align: center;

        order: 2;

    }

    .pagination {

        gap: 15px;

    }

}
/* --- LANDING PAGE: BELONY --- */

.belona-hero {
    height: 90vh;
    background: linear-gradient(rgba(0,45,91,0.6), rgba(0,45,91,0.6)), url('../images/belona-hero-bg.jpg') center/cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    text-align: center;
    margin-top:50px;
}

.belona-urgency {
    padding: 60px 0;
}

.urgency-box {
    max-width: 800px;
    margin: 0 auto;
    background: #fff3e0; /* Delikatny pomarańczowo-żółty ostrzegawczy */
    padding: 40px;
    border-radius: 12px;
    border-left: 5px solid var(--logo-red);
}

.urgency-box h2 {
    color: var(--logo-red);
    font-size: 2.2rem;
    margin-bottom: 15px;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.f-card {
    background: var(--white);
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    text-align: center;
    transition: var(--transition);
}

.f-card:hover {
    transform: translateY(-5px);
}

.f-icon {
    font-size: 3rem;
    display: block;
    margin-bottom: 15px;
}

.belona-list {
    list-style: none;
    margin-top: 25px;
}

.belona-list li {
    margin-bottom: 15px;
    padding-left: 30px;
    position: relative;
}

.belona-list li::before {
    content: '⚓';
    position: absolute;
    left: 0;
    color: var(--logo-blue);
}

/* Wielkie CTA na dole strony */
.belona-cta {
    background: var(--logo-navy);
    color: var(--white);
    padding: 100px 20px;
}

.belona-cta h2 {
    color: var(--white);
    font-size: 2.8rem;
    margin-bottom: 15px;
}

.belona-cta p {
    font-size: 1.3rem;
    opacity: 0.9;
    margin-bottom: 40px;
}

.btn-mega-cta {
    display: inline-block;
    background: var(--logo-red);
    color: var(--white);
    text-decoration: none;
    padding: 22px 50px;
    font-size: 1.6rem;
    font-weight: bold;
    border-radius: 50px;
    box-shadow: 0 10px 30px rgba(227, 30, 36, 0.4);
    transition: var(--transition);
}

.btn-mega-cta:hover {
    background: var(--white);
    color: var(--logo-red);
    transform: scale(1.05);
}

.cta-note {
    margin-top: 20px;
    font-size: 0.9rem !important;
    opacity: 0.7;
}

/* Responsywność */
@media (max-width: 768px) {
    .belona-hero h1 { font-size: 2rem; }
    .belona-cta h2 { font-size: 2rem; }
    .btn-mega-cta { font-size: 1.2rem; padding: 15px 30px; width: 100%; }
}

/* --- Stylizacja zdjęcia w sekcji szczegółów (belony.php) --- */

.details-img {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.details-img img {
    width: 100%;
    max-width: 600px; /* Ograniczamy szerokość, żeby zdjęcie nie było zbyt wielkie na dużych ekranach */
    height: auto;
    border-radius: 15px; /* Eleganckie zaokrąglenie rogów */
    box-shadow: 0 15px 35px rgba(0, 45, 91, 0.15); /* Miękki, morski cień */
    transition: transform 0.4s ease;
    border: 4px solid var(--white); /* Biała obwódka jak w ramce zdjęcia */
}

/* Subtelny efekt po najechaniu myszką */
.details-img img:hover {
    transform: scale(1.02);
    box-shadow: 0 20px 45px rgba(0, 45, 91, 0.2);
}

/* Dostosowanie na mobile */
@media (max-width: 992px) {
    .details-img {
        padding: 0;
        margin-top: 30px; /* Odstęp od tekstu, który na mobile będzie nad zdjęciem */
    }
    
    .details-img img {
        max-width: 100%; /* Na telefonie zajmuje całą dostępną szerokość */
    }
}