body {
    font-family: 'Montserrat Variable', sans-serif; /* wcześniej był Arial*/
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: #fdfaf6; /* Delikatny kolor tła */
    background-image: linear-gradient(rgba(40, 30, 30, 0.1), rgba(40, 30, 30, 0.1)), url(backg2.jpg); /* wybór tła foto https://unsplash.com/photos/aerial-photography-of-mountains-k6GpdsPJSZw */
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% 100%;
    color: #333;
}


@font-face {
  font-family: 'Montserrat Variable'; /* Lub po prostu 'Montserrat' */
  src: url('Montserrat-VariableFont.ttf') format('truetype-variations');
  /* Określ zakres dostępnych grubości (sprawdź dokumentację czcionki) */
  /* Dla Montserrat to zazwyczaj od 100 do 900 */
  font-weight: 100 900;
  font-style: normal; /* Jeśli czcionka obsługuje też zmienną kursywę, zdefiniuj ją osobno lub dodaj zakres font-style */
  font-display: swap;
}

.container {
    max-width: 900px;
    margin: 20px auto;
    padding: 20px;
    background-color: #fff; /* kolor głównego segmentu */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

header {
    padding-bottom: 20px;
    /* border-bottom: 1px solid #eee; */
    margin-bottom: 20px;
    border-radius: 5px;
    border-width: 5px;
                            /* alt blue: rgba(60, 30, 30, 0.1), rgba(33, 40, 70, 0.5) */
                                     /* rgba(40, 30, 30, 0.5) | rgba(40, 30, 30, 0.5) */
    background-image: linear-gradient(rgba(40, 30, 30, 0.4), rgba(40, 30, 30, 0.6)), url('img1_min.jpg'); /* !! Replace with the actual path to your image !! */
    /* --- Optional Enhancements --- */
    background-color: ; /* propozycja: dfffe0 */
    background-size: contain;
    background-position: right 0px top 0px ; /* pierwsza wartość do przesuwania obrazu */
    background-repeat: no-repeat;
    padding: 30px 50px 50px 30px; /* ostatni padding do przesuwania tekstu headera */
    color: #ffffff;
    text-shadow: 0px 0px 0px rgba(0, 0, 0, 0.7);
}

header h1 {
    color: #ffffff; /* Kolor nagłówka - pasujący do tematyki weselnej */
    margin-bottom: 5px;
}


nav ul {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
    text-align: center;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

nav ul li {
    display: inline-block; /* Zakładki obok siebie */
    margin: 0 30px; /* druga wartość oznacza odległość zakładek od siebie*/
}

nav ul li a {
    /* font-size: 105%; -> nie działa na CF pages */
    text-decoration: none;
    color: #183047; /* kolor zakładek - poprzedni: #a0522d */
    padding: 8px 15px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

nav ul li a:hover,
nav ul li a.active { /* Styl aktywnej zakładki */
    background-color: #e5f0fa; /* kolor zakładki - poprzedni: #f0e6dd */
    font-weight: bold;
}

main section {
    /* font-size: 105%; wielkość czcionki na stronie -> nie działa na CF pages */
    padding: 15px;
    border: 1px solid #eee;
    border-radius: 5px;
    background-color: #fdfdfd; /* kolor głównej sekcji */
}

/* Ukrywanie nieaktywnych zakładek */
.tab-content {
    display: none;
    scroll-margin-top: 500px;
}

/* Pokazywanie aktywnej zakładki */
.tab-content.active {
    display: block;
}

h2 {
    color: #183047; /* kolor czcionki nagłówka stron - poprzedni: #a0522d */
    border-bottom: 2px solid #f0e6dd;
    padding-bottom: 5px;
    margin-top: 0;
}

h3 {
    color: #183047; /* kolor czcionki nagłówka stron - poprzedni: #a0522d  */ 
    border-bottom: 2px solid #f0e6dd;
    padding-bottom: 5px;
    margin-top: 0;
}

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

a {
    color: #b8860b; /* Ciemnozłoty dla linków */
}

a:hover {
    text-decoration: inherit;
}

.gallery {
  width: 100%;
  display: flex;
  flex-flow: row wrap;
}

.gallery img {
    max-width: 100%;
    height: auto;
    margin: 5px;
    border: 1px solid #ddd;
    padding: 2px;
    background-color: #fff;
    vertical-align: middle; /* Lepsze wyrównanie obrazków */
    transition: filter 0.7s ease; /* DODAJ TĘ LINIĘ - dla płynnego przejścia */
}

.gallery img:hover {
    filter: brightness(75%);
}

.box {
  flex-basis: 45%;
  width: 100%;
  padding: 10px;
  margin: 8px;
}


.button-container {
    display: flex;           /* Enable Flexbox */
    justify-content: center; /* Center item horizontally */
    /* align-items: center; */ /* Use this if you need vertical centering within the <p> */
}

.button1 {
    font-family: 'montserrat', sans-serif;
    width: 100%;
    height: 120%;
    font-size:30px;
    background-color:#53d04d; /* alternative colour aka spotify green: 1DB954 */
    color:white;
    border-color: grey;
    border-radius:5px;
    
    border-width: 1px;
    border-style: solid;
    cursor: pointer;

    transition: all 0.5s;
    
}


.button1 span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.button1 span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.button1:hover span {
  padding-right: 25px;
}

.button1:hover span:after {
  opacity: 1;
  right: 0;
}




.button2-container {
    display: flex;           /* Enable Flexbox */
    justify-content: space-evenly;
    /* align-items: center; */ /* Use this if you need vertical centering within the <p> */
}

.button2 {
    font-family: 'montserrat', sans-serif;
    width: 100%;
    height: 150%;
    font-size:17px;
    background-color:#b3dee3; 
    color:black;
    border-color: grey;
    border-radius:5px;
    
    border-width: 1px;
    border-style: solid;
    cursor: pointer;
    transition-duration: 0.5s;

    
}

.button2:hover {
background-color: #8fdae3;
}

.gift-list-container {
            margin: 20px auto;
            width: 100%; /* Dostosuj szerokość */
            max-width: 850px; /* Maksymalna szerokość */
        }
        /* Możesz dodać więcej stylów dla iframe, jeśli chcesz */
        
        iframe {
            border: 1px solid #ccc;
            border-radius: 8px;
        }



        /* ==============================================
   Style dla formularza rezerwacji prezentów
   ============================================== */

/* Wrapper dla całego bloku formularza - opcjonalny, ale pomaga w izolacji */
.gift-reservation-form-wrapper {
    background-color: #f9f9f9; /* Lekko inny odcień tła dla odróżnienia sekcji */
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.08);
    margin-top: 30px; /* Odstęp od poprzednich elementów */
    margin-bottom: 30px; /* Odstęp do następnych elementów */
    text-align: left; /* Domyślne wyrównanie dla elementów formularza */
}

/* Styl dla nagłówka w sekcji formularza, jeśli używasz H2 wewnątrz wrappera */
.gift-reservation-form-wrapper h2 {
    color: #a0522d; /* Używa koloru z Twoich istniejących H2 */
    border-bottom: 2px solid #f0e6dd; /* Używa stylu z Twoich istniejących H2 */
    padding-bottom: 10px;
    margin-top: 0; /* Usuwa domyślny górny margines H2 */
    margin-bottom: 15px;
    text-align: center; /* Wyśrodkowanie nagłówka sekcji */
}

.gift-reservation-form-wrapper p {
    margin-bottom: 20px;
    color: #555; /* Ciemniejszy szary dla lepszej czytelności */
    text-align: center; /* Wyśrodkowanie tekstu instrukcji */
    font-size: 0.95em;
}

/* Główny formularz */
.gift-form {
    display: flex;
    flex-direction: column; /* Elementy formularza jeden pod drugim */
    align-items: center; /* Wyśrodkowanie elementów formularza */
    gap: 15px; /* Odstęp między polem input a przyciskiem */
}

.gift-form__field {
    width: 100%;
    max-width: 350px; /* Ograniczenie szerokości pola formularza */
}

.gift-form__label {
    display: block;
    margin-bottom: 8px;
    color: #484848; /* Ciemniejszy kolor etykiety */
    font-weight: bold;
    font-size: 0.9em;
    text-align: left; /* Etykieta wyrównana do lewej */
}

.gift-form__input {
    width: 100%; /* Pełna szerokość w ramach .gift-form__field */
    padding: 12px 15px;
    border: 1px solid #ccc; /* Subtelna ramka */
    border-radius: 5px;
    box-sizing: border-box; /* Aby padding nie wpływał na całkowitą szerokość */
    font-family: 'montserrat', sans-serif; /* Dziedziczenie lub jawne ustawienie fontu */
    font-size: 1em;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.gift-form__input:focus {
    border-color: #a0522d; /* Kolor ramki przy focusie, pasujący do tematu */
    box-shadow: 0 0 5px rgba(160, 82, 45, 0.3); /* Delikatny cień przy focusie */
    outline: none; /* Usunięcie domyślnego outline przeglądarki */
}

.gift-form__button {
    background-color: #5cb85c; /* Zielony, podobny do oryginalnego przykładu, ale możesz zmienić */
    /* Możesz też użyć jednego z istniejących kolorów przycisków, np. #53d04d */
    /* background-color: #53d04d; */
    color: white;
    padding: 12px 25px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-family: 'montserrat', sans-serif;
    font-size: 1em;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: background-color 0.3s ease, transform 0.2s ease;
    min-width: 150px; /* Minimalna szerokość przycisku */
}

.gift-form__button:hover {
    background-color: #4cae4c; /* Ciemniejszy odcień zielonego przy najechaniu */
    /* background-color: #4aa746; */ /* Jeśli używasz #53d04d */
    transform: translateY(-1px); /* Lekkie uniesienie przycisku */
}

.gift-form__button:disabled {
    background-color: #b0b0b0; /* Szary dla nieaktywnego przycisku */
    cursor: not-allowed;
    transform: none;
}

/* Kontener na komunikaty (sukces/błąd) */
.gift-form__message-area {
    margin-top: 20px;
    padding: 12px 15px;
    border-radius: 5px;
    font-weight: 500; /* Nieco grubsza czcionka dla komunikatu */
    text-align: center;
    width: 100%;
    max-width: 350px; /* Dopasowanie do szerokości pola input */
    box-sizing: border-box;
    /* Domyślnie ukryty, jeśli nie ma treści */
    /* Poniższe style będą nadpisywane przez klasy .success lub .error */
    background-color: transparent;
    color: transparent;
    border: 1px solid transparent;
}

.gift-form__message-area.success {
    background-color: #dff0d8; /* Jasnozielone tło dla sukcesu */
    color: #3c763d;      /* Ciemnozielony tekst */
    border: 1px solid #d6e9c6; /* Zielona ramka */
}

.gift-form__message-area.error {
    background-color: #f2dede; /* Jasnoczerwone tło dla błędu */
    color: #a94442;      /* Ciemnoczerwony tekst */
    border: 1px solid #ebccd1; /* Czerwona ramka */
}



footer {
    text-align: center;
    margin-top: 30px;
    padding-top: 15px;
    border-top: 1px solid #eee;
    font-size: 0.9em;
    color: #lightgrey;
}



@media (max-width: 375px) {
    nav ul li {
        display: block; /* Zakładki jedna pod drugą */
        margin: 10px 0;
    }
    header {
        font-size: 1.1em; /* Zmniejsz bazowy rozmiar czcionki dla nagłówka na mobilkach */
        padding: 20px 15px; /* Zmniejsz paddingi, aby tekst miał więcej miejsca */
        /* Możesz chcieć zmienić pozycję tła lub nawet samo tło na mobilkach */
        background-size: 140%;
            }

    header h1 {
        font-size: 1.6em; /* Dostosuj rozmiar H1 */
        /* Alternatywnie, dla bardzo płynnego skalowania czcionki: */
        /* font-size: 7vw; */ /* vw = viewport width unit, 7% szerokości ekranu */
              }
    .gallery img {
    max-width: 180%;
                 }
}

@media (max-width: 425px) {
    nav ul li {
        display: block; /* Zakładki jedna pod drugą */
        margin: 10px 0;
    }
    header {
        font-size: 1.1em; /* Zmniejsz bazowy rozmiar czcionki dla nagłówka na mobilkach */
        padding: 20px 15px; /* Zmniejsz paddingi, aby tekst miał więcej miejsca */
        /* Możesz chcieć zmienić pozycję tła lub nawet samo tło na mobilkach */
        background-position: center 20%;

    }
    header h1 {
        font-size: 1.6em; /* Dostosuj rozmiar H1 */
        /* Alternatywnie, dla bardzo płynnego skalowania czcionki: */
        /* font-size: 7vw; */ /* vw = viewport width unit, 7% szerokości ekranu */
    }
    .gallery img {
    max-width: 180%;
    }
}

/* Prosta responsywność dla nawigacji na mniejszych ekranach */
@media (max-width: 800px) {
    nav ul li {
        display: block; /* Zakładki jedna pod drugą */
        margin: 15px 0;
    }
    header {
        font-size: 1.1em; /* Zmniejsz bazowy rozmiar czcionki dla nagłówka na mobilkach */
        padding: 20px 15px; /* Zmniejsz paddingi, aby tekst miał więcej miejsca */
        /* Możesz chcieć zmienić pozycję tła lub nawet samo tło na mobilkach */
        /* np. background-position: center 20%; */
    }
    header h1 {
        font-size: 1.6em; /* Dostosuj rozmiar H1 */
        /* Alternatywnie, dla bardzo płynnego skalowania czcionki: */
        /* font-size: 7vw; */ /* vw = viewport width unit, 7% szerokości ekranu */
    }
    .gallery img {
    max-width: 180%;
    }
}