/* ---------------------------------- */

        /* 1. Zmienne i Podstawy (Variables & Base) */

        /* ---------------------------------- */

        :root {

            --color-primary: #0a0a0a;

            --color-secondary: #d4af37;

            --color-secondary-light: #e0c16a;

            --color-white: #ffffff;

            --color-grey-light: #f0f0f0;

            --color-grey-dark: #222222;

            --color-grey-darker: #1a1a1a;

            --color-text: var(--color-grey-light);

            --color-text-muted: #aaaaaa;



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

            --font-family-heading: 'Playfair Display', serif;



            /* Płynna typografia */

            --font-size-small: clamp(0.8rem, 0.17vw + 0.76rem, 0.94rem);

            --font-size-base: clamp(1rem, 0.34vw + 0.91rem, 1.25rem);

            --font-size-h3: clamp(1.3rem, 0.61vw + 1.1rem, 1.8rem);

            --font-size-h2: clamp(1.8rem, 1vw + 1.5rem, 2.8rem);

            --font-size-h1: clamp(2.5rem, 2.5vw + 1.8rem, 4.5rem);



            /* Płynne odległości */

            --space-xs: clamp(0.5rem, 1vw, 0.75rem);

            --space-sm: clamp(1rem, 2vw, 1.5rem);

            --space-md: clamp(2rem, 4vw, 3rem);

            --space-lg: clamp(4rem, 8vw, 6rem);

            --space-xl: clamp(6rem, 12vw, 9rem);



            --border-radius: 8px;

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

            --container-width: 1200px;

            --container-padding: 1.5rem;

            --nav-height: 70px; /* Dodana zmienna dla wysokości nawigacji */

        }



        *, *::before, *::after {

            box-sizing: border-box;

            margin: 0;

            padding: 0;

        }



        html {

            scroll-behavior: smooth;

        }



        body {

            font-family: var(--font-family-base);

            font-size: var(--font-size-base);

            line-height: 1.7;

            color: var(--color-text);

            background-color: var(--color-primary);

            overflow-x: hidden;

        }



        @media (prefers-reduced-motion: reduce) {

            html { scroll-behavior: auto; }

            *, *::before, *::after {

                animation-duration: 0.01ms !important;

                animation-iteration-count: 1 !important;

                transition-duration: 0.01ms !important;

                scroll-behavior: auto !important;

            }

        }



        img, picture, svg, video {

            display: block;

            max-width: 100%;

            height: auto;

        }



        h1, h2, h3, h4, h5, h6 {

            font-family: var(--font-family-heading);

            color: var(--color-secondary);

            line-height: 1.2;

            font-weight: 700;

        }



        h1 { font-size: var(--font-size-h1); }

        h2 { font-size: var(--font-size-h2); }

        h3 { font-size: var(--font-size-h3); }



        p { margin-block-end: var(--space-sm); }

        p:last-child { margin-block-end: 0; }



        a {

            color: var(--color-secondary);

            text-decoration: none;

            transition: color var(--transition-base);

        }

        a:hover { color: var(--color-secondary-light); }



        ul { list-style: none; }



        .visually-hidden {

            position: absolute;

            width: 1px;

            height: 1px;

            padding: 0;

            margin: -1px;

            overflow: hidden;

            clip: rect(0, 0, 0, 0);

            white-space: nowrap;

            border: 0;

        }



        /* ---------------------------------- */

        /* 2. Układ i Komponenty (Layout & Components) */

        /* ---------------------------------- */



        /* --- Kontener --- */

        .container {

            max-width: var(--container-width);

            margin-inline: auto;

            padding-inline: var(--container-padding);

        }



        /* --- Sekcja --- */

        .section {

            padding-block: var(--space-lg);

            position: relative;

        }

        .section--dark-bg { background-color: var(--color-grey-darker); }

        .section__header {

            text-align: center;

            margin-block-end: var(--space-md);

            max-width: 800px;

            margin-inline: auto;

        }

        .section__header--left { text-align: left; margin-inline: 0; }

        .section__title { margin-block-end: var(--space-xs); }

        .section__subtitle { color: var(--color-text-muted); font-size: var(--font-size-small); }



        /* --- Siatka (Grid) --- */

        .grid {

            display: grid;

            gap: var(--space-sm);

        }

        .grid--2-cols-balanced { grid-template-columns: repeat(auto-fit, minmax(min(100%, 350px), 1fr)); align-items: center; }

        .grid--2-cols-balanced-reverse > :first-child { order: 2; }

        .grid--2-cols-balanced-reverse > :last-child { order: 1; }

        @media (max-width: 768px) {

            .grid--2-cols-balanced-reverse > :first-child,

            .grid--2-cols-balanced-reverse > :last-child { order: initial; }

        }

        .grid--3-cols { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }



        /* --- Przyciski (Buttons) --- */

        .btn {

            display: inline-block;

            padding: 0.8em 1.8em;

            font-weight: 700;

            text-transform: uppercase;

            letter-spacing: 0.5px;

            border-radius: 50px;

            transition: all var(--transition-base);

            border: 2px solid transparent;

            cursor: pointer;

            font-size: 0.9rem;

            text-align: center;

        }

        .btn--primary { background-color: var(--color-secondary); color: var(--color-primary); }

     

        .btn--primary:hover {

            background-color: var(--color-secondary-light);

            transform: translateY(-5px);

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

            color: var(--color-primary);

        }

     

        .btn--secondary { background-color: transparent; color: var(--color-secondary); border-color: var(--color-secondary); }

        .btn--secondary:hover { background-color: var(--color-secondary); color: var(--color-primary); }

        .btn--large { padding: 1em 2.5em; font-size: 1.1rem; }

        .btn--full-width { width: 100%; }



 



        /* --- Formularz (Forms) --- */

        .form-group { margin-block-end: var(--space-sm); }

        .form-control {

            width: 100%;

            background-color: var(--color-grey-darker);

            color: var(--color-text);

            border: 1px solid var(--color-grey-dark);

            padding: 15px;

            border-radius: var(--border-radius);

            transition: border-color var(--transition-base), box-shadow var(--transition-base);

            font-family: inherit;

            font-size: inherit;

        }

        .form-control:focus {

            border-color: var(--color-secondary);

            box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.25);

            outline: none;

        }

        .form-control::placeholder { color: var(--color-text-muted); opacity: 1; }

        textarea.form-control { resize: vertical; min-height: 120px; }





        /* ---------------------------------- */

        /* 3. Specyficzne Komponenty (Specific Components) */

        /* ---------------------------------- */



        /* --- Hero Section --- */

        .hero {

            min-height: 100vh;

            display: flex;

            flex-direction: column;

            justify-content: center;

            align-items: center;

            position: relative;

            color: var(--color-white);

            text-align: center;

            padding-top: var(--nav-height);

            overflow: hidden;

        }



        .hero__video-background {

            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: -2;

        }



        .hero::after {

            content: '';

            position: absolute;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;

            background: linear-gradient(rgba(10, 10, 10, 0.9), rgba(10, 10, 10, 0.8));

            z-index: -1;

        }



        .hero__content {

            z-index: 2;

        }



        .hero__title {

            margin-block-end: var(--space-sm);

        }



        .hero__subtitle {

            max-width: 750px;

            margin-inline: auto;

            margin-block-end: var(--space-md);

            color: var(--color-grey-light);

        }



        .hero__scroll-indicator {

            position: absolute;

            bottom: 30px;

            left: 50%;

            transform: translateX(-50%);

            z-index: 2;

            color: var(--color-secondary);

            font-size: 2rem;

            animation: bounce 2s infinite;

        }



        @keyframes bounce {

            0%, 20%, 50%, 80%, 100% {

                transform: translate(-50%, 0);

            }

            40% {

                transform: translate(-50%, -10px);

            }

            60% {

                transform: translate(-50%, -5px);

            }

        }

        .section--parallax {

            background-image: linear-gradient(rgba(10, 10, 10, 0.85), rgba(10, 10, 10, 0.85));

            background-position: center center;

            background-repeat: no-repeat;

            background-size: cover;

            background-attachment: fixed;

        }



        /* --- Główna Nawigacja (Main Navigation) --- */

        .main-nav {

            position: fixed;

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

            z-index: 1000;

            padding-block: var(--space-xs);

            background-color: transparent;

            border-bottom: 1px solid transparent;

            transition: background-color var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);

            min-height: var(--nav-height);

            display: flex;

            align-items: center;

        }

        .main-nav.scrolled {

            background-color: rgba(10, 10, 10, 0.9);

            border-color: rgba(212, 175, 55, 0.2);

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

        }

        .main-nav__container { width: 100%; display: flex; justify-content: space-between; align-items: center; }

        .main-nav__logo-img { height: 40px; }

        .main-nav__menu { display: flex; align-items: center; gap: var(--space-sm); }

        .main-nav__list { display: flex; align-items: center; gap: var(--space-sm); }

        .main-nav__link {

            color: var(--color-white);

            font-weight: 500;

            font-size: 0.9rem;

            padding-block: 8px;

            position: relative;

            text-transform: uppercase;

        }

        .main-nav__link::after {

            content: '';

            position: absolute;

            bottom: 0; left: 0;

            width: 0%; height: 2px;

            background-color: var(--color-secondary);

            transition: width var(--transition-base);

        }

        .main-nav__link:hover::after, .main-nav__link.active::after { width: 100%; }

        .main-nav__link.active, .main-nav__link:hover { color: var(--color-secondary-light); }

        .main-nav__actions { display: flex; align-items: center; gap: var(--space-sm); }



        /* --- Przełącznik Języka --- */

        .language-switcher { display: flex; gap: 0.5rem; }

        .language-switcher__btn {

            background: none; border: none; color: var(--color-white); cursor: pointer;

            font-weight: 700; font-size: 0.9rem; opacity: 0.7; transition: opacity var(--transition-base);

            padding: 5px;

        }

        .language-switcher__btn:hover { opacity: 1; color: var(--color-secondary); }

        .language-switcher__btn.active { opacity: 1; color: var(--color-secondary); }



        /* --- Nawigacja Mobilna (Mobile Navigation) --- */
.main-nav__mobile-controls {
    display: none; /* Ukryte na desktopie */
}

@media (max-width: 992px) {
    /* Ukrywamy elementy desktopowe i przycisk rezerwacji w menu */
    #language-switcher-desktop {
        display: none;
    }

    /* GŁÓWNA ZMIANA: Stylizacja menu na pełny ekran */
    .main-nav__menu {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw; /* Pełna szerokość ekranu */
        height: 100vh; /* Pełna wysokość ekranu */
        background-color: rgba(10, 10, 10, 0.98); /* Półprzezroczyste tło */
        backdrop-filter: blur(10px); /* Efekt rozmycia tła pod spodem */
        
        /* Pozycjonowanie elementów wewnątrz */
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: var(--space-md);
        
        /* Animacja pojawiania się i znikania */
        opacity: 0;
        visibility: hidden;
        transform: translateY(-20px); /* Delikatny efekt ruchu z góry */
        transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s ease;
        padding: var(--space-md);
    }

    .main-nav__menu.active {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    /* Lista linków w menu pełnoekranowym */
    .main-nav__list {
        flex-direction: column;
        align-items: center;
        gap: var(--space-md);
        padding: 0; /* Resetujemy padding */
    }
    
    .main-nav__link {
        font-size: var(--font-size-h3); /* Powiększamy czcionkę dla czytelności */
        font-family: var(--font-family-heading); /* Używamy czcionki nagłówkowej dla efektu */
    }

    /* Kontrolki mobilne (przycisk hamburgera i języki) */
    .main-nav__mobile-controls {
        display: flex;
        align-items: center;
        gap: var(--space-sm);
        /* Ważne: Przycisk musi być nad menu, gdy jest ono ukryte,
           i nad tłem, gdy jest widoczne */
        z-index: 1002; 
    }
    
    /* Pokazujemy przełącznik języków w menu mobilnym */
    #language-switcher-mobile {
        display: flex;
    }
    
    /* Akcje w menu mobilnym (jeśli chcesz dodać przycisk Zarezerwuj) */
    /* Akcje w menu mobilnym (przycisk i języki) */
.main-nav__menu .main-nav__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    margin-top: var(--space-md); /* Odstęp od listy linków */
}

.main-nav__menu .main-nav__actions .btn {
    display: inline-block; /* Przywracamy widoczność */
    padding-left: 2.5em;
    padding-right: 2.5em;
    text-align: center;
    box-sizing: border-box; 
}

    /* Przycisk hamburgera - bez większych zmian */
    .main-nav__toggler {
        display: block;
        background: none;
        border: none;
        font-size: 1.8rem;
        color: var(--color-white);
        cursor: pointer;
        z-index: 1001; /* Upewniamy się, że jest na wierzchu */
        padding: 0;
    }

    .main-nav__toggler-icon {
        display: block;
        width: 25px;
        height: 3px;
        background-color: var(--color-secondary);
        position: relative;
        transition: background-color 0s 0.2s;
    }

    .main-nav__toggler-icon::before,
    .main-nav__toggler-icon::after {
        content: '';
        position: absolute;
        width: 25px;
        height: 3px;
        background-color: var(--color-secondary);
        transition: transform 0.3s ease, top 0.3s ease;
    }

    .main-nav__toggler-icon::before { top: -8px; }
    .main-nav__toggler-icon::after { top: 8px; }

    /* Animacja hamburgera do "X" */
    .main-nav__toggler[aria-expanded="true"] .main-nav__toggler-icon {
        background-color: transparent;
    }

    .main-nav__toggler[aria-expanded="true"] .main-nav__toggler-icon::before {
        transform: rotate(45deg);
        top: 0;
    }

    .main-nav__toggler[aria-expanded="true"] .main-nav__toggler-icon::after {
        transform: rotate(-45deg);
        top: 0;
    }
}

/* Ukrywamy kontrolki mobilne, gdy ekran jest wystarczająco duży */
@media (min-width: 992.02px) {
    #language-switcher-mobile { display: none; }
    .main-nav__toggler { display: none; }
}





        /* ---------------------------------- */

        /* 3.5 Sekcja Popularne Trasy (Wariant 1) */

        /* ---------------------------------- */

        .popular-routes__grid {

            list-style: none;

            padding: 0;

            margin-top: var(--space-md);

            display: grid;

            gap: var(--space-xs) var(--space-md);

        }



        .popular-routes__item {

            display: flex;

            align-items: center;

            gap: 15px;

            font-size: var(--font-size-base);

            color: var(--color-text-muted);

            padding-bottom: var(--space-xs);

            border-bottom: 1px solid var(--color-grey-dark);

            transition: color var(--transition-base), border-color var(--transition-base);

        }



        .popular-routes__item:hover {

            color: var(--color-white);

            border-color: var(--color-secondary-light);

        }



        .popular-routes__item i {

            color: var(--color-secondary);

            font-size: 1.2em;

            transition: transform var(--transition-base);

        }



        .popular-routes__item:hover i {

            transform: translateX(5px);

        }



        @media (min-width: 768px) {

            .popular-routes__grid {

                grid-template-columns: repeat(2, 1fr);

            }

        }



        /* --- Karty Usług i Wycieczek (Service & Tour Cards) --- */

        .service-card, .tour-card {

            background-color: var(--color-grey-darker);

            border-radius: var(--border-radius);

            overflow: hidden;

            display: flex; flex-direction: column;

            transition: transform var(--transition-base), box-shadow var(--transition-base);

        }

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

        .service-card__image, .tour-card__image {

            width: 100%; height: 250px; object-fit: cover;

            transition: transform 0.5s var(--transition-base);

        }

        .service-card:hover .service-card__image, .tour-card:hover .tour-card__image { transform: scale(1.05); }

        .service-card__content, .tour-card__body, .tour-card__footer { padding: var(--space-sm); }

        .service-card__content { display: flex; flex-direction: column; flex-grow: 1; }

        .service-card__title, .tour-card__title { margin-block-end: var(--space-xs); }

        .service-card__text, .tour-card__text { color: var(--color-text-muted); font-size: var(--font-size-small); flex-grow: 1; }

        .service-card__content .btn { margin-top: auto; align-self: flex-start; }

        .tour-card__body { flex-grow: 1; }



        /* --- STYLE: Sekcja Więcej Wycieczek --- */

        .show-more-container {

            text-align: center;

            margin-top: var(--space-md);

        }



        #show-more-tours-btn i {

            margin-left: 8px;

            transition: transform 0.4s ease-in-out;

        }

     

        #more-tours-wrapper {

            max-height: 0;

            overflow: hidden;

            transition: max-height 0.8s ease-in-out;

            display: grid;

            gap: var(--space-sm);

            grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));

            margin-top: 0;

        }



        #more-tours-wrapper.expanded {

            max-height: 2000px;

            margin-top: var(--space-md);

        }

        /* --- KONIEC STYLI --- */





        /* --- Sekcja "O Nas" (About Section) --- */

        .about-content { display: flex; flex-direction: column; justify-content: center; }

        .about-image img { border-radius: var(--border-radius); object-fit: cover; height: 100%; width: 100%; }



        /* --- Opinie (Reviews) --- */

        .opinion-card {

            background-color: var(--color-grey-dark);

            border-radius: var(--border-radius);

            padding: var(--space-md);

            display: flex;

            flex-direction: column;

            border-left: 4px solid var(--color-secondary);

            transition: transform var(--transition-base), box-shadow var(--transition-base);

        }

        .opinion-card:hover {

            transform: translateY(-10px);

            box-shadow: 0 20px 40px rgba(0,0,0,0.4);

        }

        .opinion-card__header {

            display: flex;

            justify-content: space-between;

            align-items: flex-start;

            gap: var(--space-xs);

            margin-block-end: var(--space-sm);

        }

        .opinion-card__author {

            font-weight: 700;

            color: var(--color-white);

            line-height: 1.3;

        }

        .opinion-card__rating {

            color: var(--color-secondary);

            display: flex;

            gap: 4px;

            font-size: 0.9rem;

            flex-shrink: 0;

        }

        .opinion-card__text {

            color: var(--color-text-muted);

            font-size: var(--font-size-small);

            font-style: italic;

            line-height: 1.8;

            border-top: 1px solid var(--color-grey-darker);

            padding-top: var(--space-sm);

            margin-top: auto;

        }





        /* ---------------------------------- */

        /* 3.6 Sekcja "Więcej niż standard"    */

        /* ---------------------------------- */



        .custom-offering {

            max-width: 800px;

            margin-inline: auto;

            text-align: center;

        }



        .custom-offering__text {

            color: var(--color-text-muted);

            font-size: var(--font-size-base);

            line-height: 1.8;

            margin-bottom: var(--space-md);

        }



        .custom-offering__options {

            border-top: 1px solid var(--color-grey-dark);

            border-bottom: 1px solid var(--color-grey-dark);

            padding-block: var(--space-md);

        }



        .custom-offering__options-title {

            margin-bottom: var(--space-sm);

            color: var(--color-text);

            font-size: var(--font-size-small);

        }



        .vehicle-options__list {

            list-style: none;

            padding: 0;

            margin: 0;

            display: flex;

            justify-content: center;

            align-items: center;

            gap: var(--space-lg);

        }



        .vehicle-options__item {

            display: flex;

            align-items: center;

            gap: 12px;

            font-size: var(--font-size-base);

            color: var(--color-text);

            font-weight: 500;

        }



        .vehicle-options__item i {

            color: var(--color-secondary);

            font-size: 1.8em;

        }



        @media (max-width: 576px) {

            .vehicle-options__list {

                flex-direction: column;

                gap: var(--space-md);

            }

        }



        /* --- Kontakt i Formularz Rezerwacji --- */

        .contact-info__list { display: flex; flex-direction: column; gap: var(--space-sm); margin-block-start: var(--space-md); }

        .contact-info__item { display: flex; align-items: flex-start; gap: var(--space-sm); }

        .contact-info__item i { font-size: 1.5rem; color: var(--color-secondary); margin-top: 5px; }

        .contact-info__item h4 { color: var(--color-white); margin: 0; }

        .contact-info__item p { color: var(--color-text-muted); }

        .contact-info__item p small { font-size: 0.8em; }



        .contact-info__item p, .footer__contact p {

            margin-block-end: 0.25rem;

        }

        .contact-info__item p:last-child, .footer__contact p:last-child {

            margin-block-end: 0;

        }



        .contact-info__social { margin-block-start: var(--space-md); display: flex; gap: var(--space-sm); }

        .contact-info__social a { font-size: 1.5rem; color: var(--color-text-muted); }

        .booking-form-wrapper { background-color: var(--color-grey-darker); padding: var(--space-md); border-radius: var(--border-radius); }



        /* --- Stopka (Footer) --- */

        .footer { background-color: var(--color-grey-darker); padding-block-start: var(--space-lg); padding-block-end: var(--space-sm); font-size: var(--font-size-small); }

        .footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--space-md); }

        .footer__logo { height: 40px; margin-block-end: var(--space-sm); }

        .footer__title { color: var(--color-white); margin-block-end: var(--space-sm); font-size: 1.2rem; }

        .footer__links ul, .footer__contact ul { display: flex; flex-direction: column; gap: var(--space-xs); }

        .footer__links a, .footer__contact a { color: var(--color-text-muted); }

        .footer__contact i { color: var(--color-secondary); margin-inline-end: 10px; }

        .footer__bottom { border-top: 1px solid var(--color-grey-dark); padding-block-start: var(--space-sm); margin-block-start: var(--space-md); text-align: center; color: var(--color-text-muted); }



        /* --- Modal --- */

        .modal {

            position: fixed; inset: 0;

            z-index: 2000;

            display: flex;

            align-items: center; justify-content: center;

            visibility: hidden; opacity: 0;

            transition: visibility 0s 0.3s, opacity var(--transition-base);

        }

        .modal[hidden] { display: none; }

        .modal:not([hidden]) { visibility: visible; opacity: 1; transition: visibility 0s, opacity var(--transition-base); }

        .modal__overlay { position: fixed; inset: 0; background-color: rgba(0,0,0,0.8); backdrop-filter: blur(5px); }

        .modal__content {

            position: relative; z-index: 1;

            background-color: var(--color-grey-darker);

            border-radius: var(--border-radius);

            padding: var(--space-md);

            width: 90%; max-width: 900px;

            max-height: 90vh;

            overflow-y: auto;

            transform: scale(0.95);

            transition: transform var(--transition-base);

        }

        .modal:not([hidden]) .modal__content { transform: scale(1); }

        .modal__close-btn {

            position: absolute; top: 1rem; right: 1rem;

            background: none; border: none; font-size: 2.5rem; color: var(--color-text-muted);

            cursor: pointer; line-height: 1;

        }

        .modal__body { display: grid; grid-template-columns: 1fr; gap: var(--space-md); }

        @media (min-width: 768px) {

            .modal__body { grid-template-columns: 1fr 1fr; }

        }

        .modal__image-main { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--border-radius); }

        .modal__title { font-size: var(--font-size-h2); }

        .modal__description { font-size: var(--font-size-small); color: var(--color-text-muted); }

        .modal__gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-block: var(--space-sm); }

        .modal__gallery-img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 4px; cursor: pointer; border: 2px solid transparent; transition: border-color var(--transition-base); }

        .modal__gallery-img:hover, .modal__gallery-img.active { border-color: var(--color-secondary); }

        .modal__booking-btn { margin-block-start: var(--space-sm); }


/* ---------------------------------- */
        /* 3.9 Pływający Przycisk WhatsApp    */
        /* ---------------------------------- */
        .whatsapp-float {
            position: fixed;
            width: 60px;
            height: 60px;
            bottom: 40px;
            right: 40px;
            background-color: #25d366; /* Oficjalny kolor WhatsApp */
            color: #FFF;
            border-radius: 50px;
            text-align: center;
            font-size: 30px;
            box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
            z-index: 100;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.3s ease;
        }

        .whatsapp-float:hover {
            transform: scale(1.1);
            color: #FFF; /* Upewniamy się, że kolor ikony się nie zmienia */
        }

        @media (max-width: 768px) {
            .whatsapp-float {
                width: 50px;
                height: 50px;
                right: 20px;
                bottom: 20px;
                font-size: 24px;
            }
        }


        /* ---------------------------------- */

        /* 4. Animacje (Animations)           */

        /* ---------------------------------- */

        [data-animate] {

            opacity: 0;

            transition: opacity 0.8s cubic-bezier(0.25, 0.1, 0.25, 1), transform 0.8s cubic-bezier(0.25, 0.1, 0.25, 1);

        }

        [data-animate="fade-in-up"] { transform: translateY(30px); }

        [data-animate="fade-in-down"] { transform: translateY(-30px); }

        [data-animate="fade-in-left"] { transform: translateX(-30px); }

        [data-animate="fade-in-right"] { transform: translateX(30px); }

        [data-animate="scale-up"] { transform: scale(0.95); }

        [data-animate].is-visible {

            opacity: 1;

            transform: translate(0, 0) scale(1);

        }

/* ---------------------------------- */
/* 5. Pop-up Statusu Formularza       */
/* ---------------------------------- */
.status-popup {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--container-padding);
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s 0.3s, opacity var(--transition-base);
}

.status-popup:not([hidden]) {
    visibility: visible;
    opacity: 1;
    transition: visibility 0s, opacity var(--transition-base);
}

.status-popup__overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    cursor: pointer;
}

.status-popup__content {
    position: relative;
    z-index: 1;
    background-color: var(--color-grey-darker);
    border-radius: var(--border-radius);
    padding: var(--space-md);
    width: 100%;
    max-width: 450px;
    text-align: center;
    border-top: 4px solid var(--color-secondary);
    transform: scale(0.95) translateY(20px);
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.status-popup:not([hidden]) .status-popup__content {
    transform: scale(1) translateY(0);
}

.status-popup__icon-wrapper {
    margin-bottom: var(--space-sm);
}

.status-popup__icon-wrapper .fas {
    font-size: 4rem;
    line-height: 1;
}

/* Kolor dla ikony sukcesu */
.status-popup--success .status-popup__icon-wrapper .fas {
    color: #28a745; 
}

/* Kolor dla ikony błędu */
.status-popup--error .status-popup__icon-wrapper .fas {
    color: #dc3545;
}


.status-popup__title {
    font-size: var(--font-size-h3);
    color: var(--color-white);
    margin-bottom: var(--space-xs);
}

.status-popup__text {
    color: var(--color-text-muted);
    font-size: var(--font-size-base);
    margin-bottom: var(--space-md);
}

/* --- Stopka "Powered By" --- */
.powered-by-footer {
    background-color: var(--color-grey-darker); /* Tło takie jak w stopce */
    padding: 25px 0;
    text-align: center;
    border-top: 1px solid var(--color-grey-dark); /* Linia oddzielająca w stylu strony */
}

.powered-by-footer p {
    margin: 0;
    font-size: var(--font-size-small); /* Użycie zmiennej czcionki dla spójności */
    color: var(--color-text-muted);
}

.powered-by-footer a {
    color: var(--color-secondary); /* Użycie złotego koloru akcentu */
    font-weight: 600;
    text-decoration: none;
    transition: color var(--transition-base); /* Użycie spójnej animacji */
}

.powered-by-footer a:hover {
    color: var(--color-secondary-light); /* Jaśniejszy złoty kolor przy najechaniu */
}