/* Reset & Podstawy */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth; /* Włącza płynne przewijanie dla linków kotwic (#) */
}

body {
    font-family: 'Montserrat', sans-serif;
    line-height: 1.6;
    background-color: #fdfaf6; /* Ciepły biały / kremowy */
    color: #555;
    overflow-x: hidden; /* Zapobiega poziomemu scrollbarowi */
    background-image: linear-gradient(to bottom, #fdfaf6, #f8f0e3);
}

br {
   display: block;
   margin: 6px 0;
}

/* Czcionki */
h1, h2, h3, .btn {
    font-family: 'Dancing Script', cursive;
}

/* Kontener */
.main-header, .gallery-container, .upload-section, .main-footer, .upload-messages-container {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
}
.upload-messages-container {
    margin-bottom: 20px;
}


/* Nagłówek */
.main-header { text-align: center; padding: 40px 20px; border-bottom: 1px solid #e0dcd1; margin-bottom: 30px; position: relative; overflow: hidden; }
.main-header::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 200%; height: 100%; background-image: radial-gradient(circle, rgba(230, 220, 200, 0.2) 0%, rgba(253, 250, 246, 0) 70%); z-index: -1; opacity: 0.6; }
.main-header h1 { font-size: 3.5em; color: #8d7b68; margin-bottom: 10px; animation: fadeInDown 1s ease-out; }
.main-header .subtitle { font-size: 1.2em; color: #a89580; font-style: italic; font-family: 'Montserrat', sans-serif; animation: fadeInUp 1s ease-out 0.3s; animation-fill-mode: backwards; }
.main-nav { margin-top: 25px; }

/* Przyciski */
.btn { display: inline-block; background-color: #c8bdae; color: #fff; padding: 12px 25px; border: none; border-radius: 25px; text-decoration: none; font-size: 1.3em; cursor: pointer; transition: all 0.3s ease; margin: 5px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); letter-spacing: 1px; }
.btn:hover { background-color: #a89580; transform: translateY(-2px); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); }
.btn-add { background-color: #a0d2db; }
.btn-add:hover { background-color: #74c3d0; }
.btn-cancel { background-color: #aaa; }
.btn-cancel:hover { background-color: #888; }
.btn-delete { display: inline-block; background-color: #e8a0a0; font-size: 1.1em; padding: 10px 20px; }
.btn-download { display: inline-block; background-color: #80cd5f; font-size: 1.0em; padding: 8px 20px; }
.btn-delete:hover { background-color: #d88080; }


/* Sekcja Upload */
.upload-section { background-color: #fff; padding: 30px; border-radius: 10px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); margin-bottom: 30px; text-align: center; animation: slideInUp 0.7s ease-out; }
.upload-section h2 { color: #8d7b68; margin-bottom: 20px; font-size: 2em; }
.upload-section input[type="file"] { margin-bottom: 15px; padding: 10px; border: 1px solid #e0dcd1; border-radius: 5px; width: 100%; max-width: 400px; }

/* Style dla komunikatów */
.message { margin-top: 15px; padding: 15px; border-radius: 5px; font-weight: bold; border: 1px solid transparent; opacity: 1; }
.message ul { margin-top: 10px; margin-left: 20px; font-weight: normal; text-align: left; }
.message li { margin-bottom: 5px; }
.message.success { background-color: #d4edda; color: #155724; border-color: #c3e6cb; }
.message.error { background-color: #f8d7da; color: #721c24; border-color: #f5c6cb; }
.message.warning { background-color: #fff3cd; color: #856404; border-color: #ffeeba; }
.message.info { background-color: #d1ecf1; color: #0c5460; border-color: #bee5eb; }


/* Galeria */
.gallery-container { padding-top: 0; }
.no-images { text-align: center; font-size: 1.2em; color: #888; padding: 50px 20px; }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px; animation: fadeIn 1.5s ease-in-out; }
.photo-item { overflow: hidden; border-radius: 8px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; cursor: pointer; background-color: #fff; }
.photo-item:hover { transform: scale(1.05); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15); }
.photo-item img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; transition: opacity 0.5s ease-in-out; opacity: 0; }
.photo-item img[src] { opacity: 1; }


/* Lightbox (Modal) */
.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(40, 30, 20, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    padding: 20px;
    animation: fadeIn 0.5s ease;
}

.lightbox-content {
    position: relative;
    background-color: #fff;
    padding: 15px; /* Wewnętrzny padding kontenera treści */
    border-radius: 5px;
    /* --- ZMIANY --- */
    width: auto;      /* Szerokość dopasuje się do zawartości */
    height: auto;     /* Wysokość dopasuje się do zawartości */
    /* Opcjonalnie można zostawić max-width/max-height jako dodatkowy limit */
    max-width: calc(100vw - 40px); /* Szerokość viewportu minus padding .lightbox */
    max-height: calc(100vh - 40px);/* Wysokość viewportu minus padding .lightbox */
    display: flex;
    flex-direction: column;
    align-items: stretch; /* !! Zmieniono z center na stretch !! */
    /* Usunięto overflow: auto; */
    /* --- KONIEC ZMIAN --- */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    margin: auto; /* Upewnia wyśrodkowanie przez rodzica flex */
}

.lightbox img#lightbox-img {
    display: block;
    /* --- ZMIANY - Kluczowe ograniczenia obrazka --- */
    /* Max szerokość: viewport - padding .lightbox - padding .content - miejsce na strzałki (oszacowane) */
    max-width: calc(100vw - 40px - 30px - 80px); /* ok. 100vw - 150px */
    /* Max wysokość: viewport - padding .lightbox - padding .content - wys. opcji - margines pod obrazkiem */
    max-height: calc(100vh - 40px - 30px - 65px); /* ok. 100vh - 135px (65 = min-height 50 + padding 10 + margines 5) */
    width: auto;      /* Pozwól szerokości dopasować się proporcjonalnie */
    height: auto;     /* Pozwól wysokości dopasować się proporcjonalnie */
    /* Usunięto flex-grow, flex-shrink, min-height */
    /* --- KONIEC ZMIAN --- */
    object-fit: contain; /* Gwarantuje widoczność całego obrazka */
    margin: 0 auto 10px auto; /* Dolny margines i centrowanie w poziomie */
    border-radius: 4px;
}

/* Opcje w Lightboxie - sekcja pod obrazkiem */
.lightbox-options {
    padding: 8px 15px; /* Wewnętrzny padding sekcji opcji */
    text-align: center; /* Wyrównanie tekstu */
    background-color: #f9f9f9;
    border-top: 1px solid #eee;
    flex-shrink: 0; /* Nie pozwalaj tej sekcji się kurczyć pionowo */
    min-height: 50px; /* Gwarantowana minimalna wysokość na przycisk */
    /* --- ZMIANY --- */
    /* Usunięto width: max-content; - teraz domyślnie zajmie szerokość rodzica */
    /* Przywrócono display:flex do centrowania przycisku wewnątrz */
    display: flex;
    justify-content: center;
    align-items: center;
    /* max-width: 100%; // Jest już domyślne dla bloku */
    /* --- KONIEC ZMIAN --- */
}


/* Przyciski nawigacji i zamykania w Lightboxie */
.close-lightbox, .nav-arrow {
    position: fixed;
    cursor: pointer;
    color: #fff;
    transition: all 0.3s ease;
    z-index: 1001;
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: 5px;
}
.close-lightbox { top: 20px; right: 20px; font-size: 25px; font-weight: bold; padding: 5px 10px; }
.nav-arrow { top: 50%; transform: translateY(-50%); font-size: 30px; padding: 10px 15px; }
.nav-arrow.prev { left: 20px; }
.nav-arrow.next { right: 20px; }
.close-lightbox:hover, .nav-arrow:hover { color: #fff; background-color: rgba(0, 0, 0, 0.7); }

.btn-download:hover {
    background-color: #76bc58;
}

/* Przycisk Pobierz Wszystko */
.download-all-btn { position: fixed; bottom: 20px; right: 20px; z-index: 999; padding: 15px 20px; font-size: 1em; font-family: 'Montserrat', sans-serif; background-color: #8d7b68; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); }
.download-all-btn:hover { background-color: #7a6a58; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);}

/* === NOWE STYLE - Scroll to Top === */
.scroll-top-btn {
    position: fixed;
    bottom: 85px; /* Wyżej niż download-all-btn (20px + wys. download + margines) */
    right: 20px;
    z-index: 998; /* Może być ten sam lub niższy niż download */
    padding: 8px 8px; /* Mniejszy padding */
    font-size: 1.2em; /* Większa strzałka */
    line-height: 1; /* Dopasowanie linii dla strzałki */
    font-family: 'Montserrat', sans-serif; /* Ewentualnie systemowa dla strzałki */
    background-color: #a89580; /* Inny odcień dla odróżnienia */
    border-radius: 50%; /* Okrągły przycisk */
    width: 45px; /* Stała szerokość dla okręgu */
    height: 45px; /* Stała wysokość dla okręgu */
    text-align: center; /* Wyśrodkowanie strzałki */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    opacity: 0; /* Ukryty domyślnie */
    visibility: hidden; /* Ukryty domyślnie */
    transition: opacity 0.3s ease, visibility 0.3s ease, background-color 0.3s ease, transform 0.3s ease; /* Płynne przejście */
}

.scroll-top-btn:hover {
    background-color: #8d7b68; /* Ciemniejszy przy najechaniu */
    transform: translateY(-2px); /* Lekkie uniesienie */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

.scroll-top-btn.visible {
    opacity: 1;
    visibility: visible;
}
/* === KONIEC NOWYCH STYLI === */

/* Stopka */
.main-footer { text-align: center; margin-top: 50px; padding: 20px; border-top: 1px solid #e0dcd1; font-size: 0.9em; color: #888; }

/* Responsywność */
@media (max-width: 768px) {
    .main-header h1 { font-size: 2.5em; }
    .main-header .subtitle { font-size: 1em; }
    .btn { padding: 10px 10px; font-size: 1.1em; }
    .photo-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }

    .lightbox { padding: 10px; }
    .lightbox-content { padding: 10px; max-width: calc(100vw - 20px); max-height: calc(100vh - 20px);}
    .lightbox img#lightbox-img {
        /* Dostosuj obliczenia calc dla mniejszych ekranów/paddingów */
        max-width: calc(100vw - 20px - 20px - 60px); /* ok. 100vw - 100px */
        max-height: calc(100vh - 20px - 20px - 60px); /* ok. 100vh - 100px */
    }
    .lightbox-options { padding: 8px 10px; min-height: 45px; }
    .btn-delete { font-size: 1em; padding: 8px 16px; }
    .btn-download { font-size: 1em; padding: 5px 14px; }

    .close-lightbox { top: 15px; right: 15px; font-size: 20px; padding: 4px 8px; }
    .nav-arrow { font-size: 24px; padding: 8px 10px; }
    .nav-arrow.prev { left: 15px; }
    .nav-arrow.next { right: 15px; }
    .download-all-btn { padding: 10px 15px; font-size: 0.9em; }
    .message { padding: 10px; }
}

@media (max-width: 480px) {
    .main-header h1 { font-size: 2em; }
    .main-nav { display: flex; flex-direction: column; gap: 10px; }
    .photo-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }

    .lightbox { padding: 5px; }
    .lightbox-content { padding: 8px; max-width: calc(100vw - 10px); max-height: calc(100vh - 10px); }
    .lightbox img#lightbox-img {
        /* Dostosuj obliczenia calc dla najmniejszych ekranów/paddingów */
        max-width: calc(100vw - 10px - 16px - 50px); /* ok. 100vw - 76px */
        max-height: calc(100vh - 10px - 16px - 55px); /* ok. 100vh - 81px */
    }
    .lightbox-options { padding: 6px 8px; min-height: 40px; }
    .btn-delete { font-size: 0.9em; padding: 6px 12px; }
    .btn-download { font-size: 0.8em; padding: 6px 12px; }

    .close-lightbox { top: 10px; right: 10px; font-size: 18px; padding: 3px 6px; }
    .nav-arrow { font-size: 20px; padding: 6px 8px; }
    .nav-arrow.prev { left: 10px; }
    .nav-arrow.next { right: 10px; }
    .download-all-btn { right: 10px; bottom: 10px; }
    .message { padding: 8px; font-size: 0.9em; }
}

/* Animacje */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeInDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideInUp { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: translateY(0); } }

/* Dodatkowe efekty wizualne */
body::after { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; box-shadow: inset 0 0 150px rgba(40, 30, 20, 0.15); pointer-events: none; z-index: 998; }