/* --- 1. IMPORT CZCIONEK --- */
/* Pobieramy Playfair Display (Nagłówki - jak na bonie) i Lato (Tekst - czytelny) */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Playfair+Display:ital,wght@0,400;0,700;1,400&display=swap');

/* --- 2. ZMIENNE KOLORYSTYCZNE (Paleta z Bonu) --- */
:root {
    --bg-color: #FFFFF4;      /* Kość słoniowa (tło bonu) */
    --primary-color: #8B5A2B; /* Złoty brąz (tekst bonu/ramki) */
    --accent-color: #A07855;  /* Jaśniejszy brąz */
    --text-color: #333333;    /* Ciemny szary (treść) */
    --white: #ffffff;
    --light-gold: #F9F5F0;    /* Bardzo jasny beż pod sekcje */
}

/* --- 3. RESET I BAZA --- */
body {
    font-family: 'Lato', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    margin: 0;
    padding: 0;
    line-height: 1.6;
}

h1, h2, h3 {
    font-family: 'Playfair Display', serif; /* Elegancka czcionka */
    color: var(--primary-color);
    margin-top: 0;
    font-weight: 700;
}

a { text-decoration: none; color: inherit; transition: 0.3s; }

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

/* --- 4. HERO HEADER (Góra z Twoim zdjęciem) --- */
.hero {
    /* Używamy Twojego zdjęcia hero.jpg */
    background: url('hero.jpg') center/cover no-repeat;
    min-height: 450px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
}

/* Półprzezroczysta nakładka (żeby tekst był czytelny na zdjęciu) */
.hero-overlay {
    background: rgba(255, 255, 244, 0.9); /* Kremowy, 90% krycia */
    padding: 40px;
    border-radius: 4px;
    border: 1px solid var(--primary-color); /* Cienka ramka */
    box-shadow: 0 10px 30px rgba(0,0,0,0.15); /* Cień pod pudełkiem */
    max-width: 600px;
    width: 90%;
}

.hero h1 { 
    font-size: 3.5em; 
    margin-bottom: 5px; 
    letter-spacing: 1px;
}

.tagline { 
    font-size: 1.1em; 
    text-transform: uppercase; 
    letter-spacing: 2px; 
    color: #555; 
    margin-bottom: 15px;
}

.hero-divider { 
    font-size: 1.5em; 
    color: var(--primary-color); 
    margin: 10px 0; 
}

.sub-tagline { 
    font-style: italic; 
    font-family: 'Playfair Display', serif; 
    color: #666; 
    margin-bottom: 30px; 
    font-size: 1.2em;
}

.btn-hero {
    background-color: var(--primary-color);
    color: var(--white);
    padding: 15px 35px;
    border-radius: 2px; /* Kanciaste = eleganckie */
    font-size: 1.1em;
    font-weight: bold;
    letter-spacing: 1px;
    border: 1px solid var(--primary-color);
    display: inline-block;
}

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

/* --- 5. SEKCJE I RAMKI --- */
section { padding: 60px 0; }

/* Ramka ozdobna wokół sekcji O MNIE (Efekt z Bonu) */
.frame-container {
    border: 2px solid var(--primary-color); /* Grubsza ramka zewnętrzna */
    padding: 40px;
    position: relative;
    background: var(--white);
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    margin-top: 20px;
    margin-bottom: 20px;
}
/* Wewnętrzna cienka ramka (sztuczka CSS) */
.frame-container::before {
    content: "";
    position: absolute;
    top: 6px; left: 6px; right: 6px; bottom: 6px;
    border: 1px solid var(--primary-color); /* Cienka ramka wewnętrzna */
    pointer-events: none;
}

/* --- 6. TREŚĆ: O MNIE & OFERTA --- */
.section-content { background-color: var(--bg-color); }

.lead-text { 
    font-size: 1.3em; 
    text-align: center; 
    margin-bottom: 30px; 
    font-family: 'Playfair Display', serif; 
}

.philosophy {
    background-color: var(--light-gold);
    padding: 25px;
    border-left: 4px solid var(--primary-color);
    margin: 30px 0;
    font-style: italic;
    position: relative;
    z-index: 2; /* Żeby było nad ramką */
}

.offer-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin-top: 40px;
    position: relative;
    z-index: 2;
}

.offer-item { flex: 1 1 300px; }
.offer-item h3 { 
    border-bottom: 1px solid #ddd; 
    padding-bottom: 10px; 
    margin-bottom: 15px; 
    font-size: 1.3em; 
}
.offer-item ul { list-style: none; padding: 0; }
.offer-item li { 
    margin-bottom: 10px; 
    padding-left: 20px; 
    position: relative; 
}
/* Złota kropka (romb) przy liście */
.offer-item li::before { 
    content: "♦"; 
    color: var(--primary-color); 
    font-weight: bold; 
    position: absolute; left: 0; top: 2px; font-size: 0.8em;
}
.full-width { flex: 1 1 100%; background: #fff; padding: 20px; border: 1px solid #eee; }

/* --- 7. PREZENTY (Złota Sekcja) --- */
.section-gold {
    background-color: var(--primary-color);
    color: var(--white);
    text-align: center;
    /* Delikatny wzorek w tle */
    background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.05) 0px, rgba(255,255,255,0.05) 2px, transparent 2px, transparent 10px);
}
.section-gold h2 { 
    color: var(--white); 
    border-bottom: 1px solid rgba(255,255,255,0.3); 
    display: inline-block; 
    padding-bottom: 10px; 
}

.cards-wrapper { 
    display: flex; 
    justify-content: center; 
    gap: 30px; 
    flex-wrap: wrap; 
    margin-top: 30px; 
}
.card {
    background: rgba(255,255,255,0.95);
    border: 2px solid #C5A07D;
    padding: 25px;
    width: 300px;
    color: var(--text-color);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
.card h3 { color: var(--primary-color); margin-top: 0; }

/* --- 8. REZERWACJA & SCROLL BOX --- */
.section-booking { background-color: var(--bg-color); }

/* To jest ramka z paskiem przewijania */
.scroll-wrapper {
    max-height: 550px; /* Wysokość okienka */
    overflow-y: auto;  /* Włącz przewijanie pionowe */
    border: 2px solid var(--primary-color);
    padding: 15px;
    background: var(--white);
    border-radius: 4px;
    /* Wygląd paska przewijania (Firefox) */
    scrollbar-width: thin;
    scrollbar-color: var(--primary-color) #f0f0f0;
}
/* Wygląd paska przewijania (Chrome/Safari) */
.scroll-wrapper::-webkit-scrollbar { width: 8px; }
.scroll-wrapper::-webkit-scrollbar-track { background: #f0f0f0; }
.scroll-wrapper::-webkit-scrollbar-thumb { background-color: var(--primary-color); border-radius: 4px; }

.slots-container { display: flex; flex-direction: column; gap: 15px; }

.slot {
    background: #fdfdfd;
    border: 1px solid #ddd;
    padding: 15px;
    border-left: 5px solid var(--primary-color); /* Kolorowy pasek z lewej */
}

.slot-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

/* Kafelkowa data */
.date-badge {
    background: var(--primary-color);
    color: white;
    padding: 8px 15px;
    text-align: center;
    border-radius: 2px;
    font-weight: bold;
    font-size: 1.3em;
    line-height: 1;
    font-family: 'Playfair Display', serif;
    min-width: 50px;
}
.date-badge small { 
    display: block; 
    font-size: 0.4em; 
    text-transform: uppercase; 
    font-family: 'Lato', sans-serif; 
    margin-top: 3px; 
}

.date-details { text-align: right; font-size: 1.1em; }
.date-details strong { display: block; margin-bottom: 2px; }
.date-details .highlight { 
    font-size: 1.4em; 
    font-weight: bold; 
    color: var(--primary-color); 
    font-family: 'Playfair Display', serif; 
}

/* Przyciski w rezerwacji */
.btn-reveal { 
    background: transparent; 
    color: var(--primary-color); 
    border: 2px solid var(--primary-color); 
    padding: 10px; 
    width: 100%; 
    font-weight: bold; 
    cursor: pointer; 
    transition: 0.3s; 
    font-size: 1em;
}
.btn-reveal:hover { background: var(--primary-color); color: white; }

.booking-form { 
    background: #f4f4f4; 
    padding: 15px; 
    margin-top: 10px; 
    border-top: 1px solid #ddd; 
}

input { 
    width: 100%; 
    padding: 10px; 
    margin: 5px 0 15px 0; 
    border: 1px solid #ccc; 
    font-family: 'Lato', sans-serif;
}

.btn-confirm { 
    background: #28a745; /* Zielony dla akcji "Potwierdź" - wyróżnia się */
    color: white; 
    padding: 15px; 
    width: 100%; 
    border: none; 
    font-weight: bold; 
    font-size: 1.1em; 
    cursor: pointer; 
    border-radius: 4px;
}
.btn-confirm:hover { background: #218838; }

/* Ukryte elementy */
.btn-toggle { background: #ddd; border: none; padding: 10px 20px; color: #333; cursor: pointer; }
.honey-container { opacity: 0; position: absolute; left: -9999px; } 
.math { background: #eee; padding: 10px; border-radius: 5px; margin-top: 10px; display: block; }
.rodo { font-size: 0.9em; font-weight: normal; margin-bottom: 10px; display: block; }

/* --- 9. STOPKA --- */
footer { 
    background: #2d1b15; /* Bardzo ciemny brąz */
    color: #ccc; 
    text-align: center; 
    padding: 50px 0; 
    font-size: 0.9em; 
    border-top: 5px solid var(--primary-color);
}
footer h2 { color: var(--accent-color); }
.big-phone a { 
    color: var(--white); 
    font-size: 1.5em; 
    font-weight: bold; 
    font-family: 'Playfair Display', serif; 
}
.legal-info { font-size: 0.8em; color: #777; margin-top: 30px; }

/* Komunikaty błędów */
.msg { padding: 15px; text-align: center; margin-bottom: 20px; font-weight: bold; border-radius: 4px; }
.msg.success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.msg.error { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
.empty { text-align: center; padding: 40px; color: #777; font-style: italic; }