/* Komentarz: Globalne style i paleta kolorów w stylu cukierni */

/* --- Zmienne Kolorów (Pastelowa Paleta) --- */
:root {
    /* Kolory tła bloków */
    --pastel-rozowy: #F8E7F0;     /* Bardzo jasny róż */
    --pastel-mietowy: #E7F8F0;    /* Bardzo jasny miętowy */
    --pastel-zolty: #FFF9E7;      /* Bardzo jasny kremowy/żółty */
    --pastel-niebieski: #E7F0F8;  /* Bardzo jasny niebieski */
    --pastel-lawenda: #F0E7F8;    /* Bardzo jasna lawenda */

    /* Kolory akcentów i tekstu (kontrastowe, ale wciąż miękkie) */
    --akcent-ciemny: #A44A8C;     /* Ciemny fiolet/jagoda (dla tekstu/głównych nagłówków) */
    --akcent-sredni: #C692B4;     /* Średni róż (dla przycisków/akcentów) */
    --akcent-jasny: #FBEFF4;      /* Jaśniejszy akcent */
    --tekst-glowny: #333333;      /* Prawie czarny dla czytelności */
    --cien-delikatny: rgba(0, 0, 0, 0.05);
}

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

/* Użycie systemowych, bezpiecznych czcionek z polskimi znakami */
body {
    font-family: 'Verdana', 'Arial', sans-serif;
    line-height: 1.6;
    color: var(--tekst-glowny);
    max-width: 1090px; /* Maksymalna szerokość body */
    margin: 0 auto; /* Centrowanie body */
    background-color: #ffffff; /* Białe tło poza głównym kontenerem */
    box-shadow: 0 0 30px var(--cien-delikatny); /* Delikatny cień na krawędziach */
}

h1, h2, h3 {
    font-family: 'Georgia', 'Times New Roman', serif;
    color: var(--akcent-ciemny);
    margin-bottom: 0.5em;
    line-height: 1.2;
}

section {
    padding: 40px 20px;
    margin-bottom: 0;
    /* Dodajemy lekkie zaokrąglenie dla 'słodkiego' stylu */
    border-radius: 8px;
    overflow: hidden; /* Aby zaokrąglenia działały poprawnie */
}

/* --- Kontrastowe Style Bloków (Mieszanie Pasteli) --- */
#oferta {
    background-color: var(--pastel-rozowy);
    min-height: 470px; /* Minimalna wysokość pierwszego bloku */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 60px 20px;
    border-radius: 0; /* Bez zaokrągleń dla pełnej szerokości górnej części */
}

/* Losowe kolory tła dla przetasowanych bloków dla kontrastu */
#opinie { background-color: var(--pastel-zolty); }
#specjalisci { background-color: var(--pastel-mietowy); }
#dzialalnosc-medialna { background-color: var(--pastel-niebieski); }
#produkty-artykul { background-color: var(--pastel-lawenda); }
#zostaw-opinie { background-color: var(--pastel-rozowy); }
#formularz-zapisu { background-color: var(--pastel-zolty); } /* Powtarzamy kolory dla większej liczby bloków */

#kontakt-mapa {
    background-color: var(--pastel-mietowy);
    padding-bottom: 0; /* Mapka ma być na dole sekcji */
}


/* --- Stylizacja Przycisków i Linku-Przycisku (Słodki Wygląd) --- */

.przycisk-zaproszenie,
button[type="submit"] {
    display: inline-block;
    padding: 15px 30px;
    margin-top: 20px;
    background-color: var(--akcent-sredni);
    color: white;
    text-decoration: none;
    font-weight: bold;
    border: 2px solid var(--akcent-ciemny);
    border-radius: 50px; /* Mocno zaokrąglone - jak cukierki */
    transition: background-color 0.3s, transform 0.1s;
    box-shadow: 0 4px 6px var(--cien-delikatny);
    cursor: pointer;
}

.przycisk-zaproszenie:hover,
button[type="submit"]:hover {
    background-color: var(--akcent-ciemny);
    transform: translateY(-2px);
    box-shadow: 0 6px 8px var(--cien-delikatny);
}

button[type="submit"] {
    width: 100%;
    border: none;
    padding: 12px 20px;
}

/* --- Stylizacja Formularzy (Formularz Zapisu i Opinii) --- */
.formularz-newsletter, .formularz-opinia {
    max-width: 500px;
    margin: 20px auto;
    padding: 20px;
    background-color: var(--akcent-jasny);
    border-radius: 12px;
    box-shadow: 0 4px 10px var(--cien-delikatny);
}

label {
    display: block;
    margin-top: 15px;
    margin-bottom: 5px;
    font-weight: bold;
    color: var(--akcent-ciemny);
}

input[type="email"],
input[type="text"],
textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid var(--akcent-sredni);
    border-radius: 8px;
    font-size: 16px;
    transition: border-color 0.3s;
}

input[type="email"]:focus,
input[type="text"]:focus,
textarea:focus {
    border-color: var(--akcent-ciemny);
    outline: none;
    box-shadow: 0 0 5px rgba(164, 74, 140, 0.5);
}

/* --- Stylizacja Artykułu (Wyróżnienie) --- */
article {
    border-top: 3px dashed var(--akcent-sredni); /* Linia jako ozdoba */
    padding-top: 30px;
    margin-top: 30px;
    background-color: white; /* Jasne tło artykułu dla lepszej czytelności */
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 2px 5px var(--cien-delikatny);
}

article h2 {
    color: var(--akcent-sredni);
    text-align: center;
    margin-bottom: 20px;
}

/* --- Stylizacja List Produktów i Specjalistów --- */
.produkty-lista, .specjalista-lista, #opinie {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.produkt, .specjalista, .opinia {
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    border: 1px solid var(--akcent-jasny);
    box-shadow: 0 2px 4px var(--cien-delikatny);
}

.produkt h3, .specjalista h3 {
    color: var(--akcent-ciemny);
    font-size: 1.1em;
}

.cena {
    font-weight: bold;
    color: var(--akcent-sredni);
    margin-top: 10px;
}

/* --- Stylizacja Stopki i Mapy --- */
#kontakt-mapa address {
    text-align: center;
    font-style: normal;
    margin-bottom: 20px;
    color: var(--akcent-ciemny);
    font-weight: bold;
}

.mapa-kontener {
    width: 100%;
    height: 450px;
    overflow: hidden;
    border-radius: 0;
}

.mapa-kontener iframe {
    display: block;
    border-radius: 0;
}

footer {
    text-align: center;
    padding: 20px;
    background-color: var(--akcent-ciemny);
    color: white;
    font-size: 0.9em;
}

/* Utrzymanie wymaganej klasy, jak w szkielecie HTML */
.domainName {
    font-style: italic;
    font-weight: normal;
}

/* --- Sekcja Opinie --- */
.opinia {
    text-align: left;
    border-left: 5px solid var(--akcent-sredni);
}

.opinia p {
    font-style: italic;
    margin-bottom: 10px;
}

.opinia footer {
    text-align: right;
    font-weight: bold;
    color: var(--akcent-sredni);
    background-color: transparent;
    padding: 0;
}

/* --- Responsywność (Mobilna Wersja) --- */
@media (max-width: 768px) {
    /* Mniejsze marginesy i paddingi na urządzeniach mobilnych */
    body {
        max-width: 100%;
    }

    section {
        padding: 30px 15px;
    }

    h1 {
        font-size: 1.8em;
    }

    h2 {
        font-size: 1.5em;
    }

    /* Ułożenie w jednej kolumnie dla mobilności */
    .produkty-lista, .specjalista-lista, #opinie {
        grid-template-columns: 1fr;
    }

    .przycisk-zaproszenie,
    button[type="submit"] {
        padding: 12px 25px;
        font-size: 1em;
        width: 100%; /* Przyciski zajmują pełną szerokość */
    }

    .formularz-newsletter, .formularz-opinia {
        padding: 15px;
    }
}