/* Podstawowe resetowanie stylów */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: sans-serif;
    line-height: 1.6;
    color: #333; /* Ciemnoszary tekst dla czytelności */
}

/* Główny kontener dla ograniczenia szerokości */
.main-header, .content, .main-footer {
    max-width: 1200px;
    margin: 0 auto; /* Centrowanie na stronie */
    padding: 1em;
}

/* Nagłówek */
.main-header {
    background-color: #ffd700; /* Dominujący żółty kolor */
    color: #333; /* Ciemny tekst na żółtym tle */
    display: flex;
    justify-content: space-between; /* Logo po lewej, nawigacja po prawej */
    align-items: center;
    padding: 1rem 2rem; /* Trochę więcej paddingu w nagłówku */
    border-bottom: 3px solid #e6c200; /* Ciemniejszy żółty dla akcentu */
}

.logo h1 {
    margin: 0;
    font-size: 1.8rem; /* Rozmiar tytułu logo */
}

.main-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex; /* Elementy nawigacji w jednej linii */
}

.main-nav ul li {
    margin-left: 1.5rem; /* Odstęp między elementami nawigacji */
}

.main-nav ul li a {
    text-decoration: none;
    color: #333;
    font-weight: bold;
    padding: 0.5rem;
    transition: background-color 0.3s ease; /* Płynne przejście dla hover */
}

.main-nav ul li a:hover,
.main-nav ul li a:focus {
    background-color: #e6c200; /* Ciemniejszy żółty przy najechaniu */
    border-radius: 4px; /* Zaokrąglenie rogów */
}

/* Główna treść */
.content {
    padding: 2rem 1rem; /* Więcej przestrzeni wokół treści */
}

.welcome-section {
    text-align: center;
    margin-bottom: 2rem;
    background-color: #fffacd; /* Jasnożółte tło dla sekcji powitalnej */
    padding: 1.5rem;
    border-radius: 8px;
    border: 1px solid #eee;
}

.popular-products h2 {
    text-align: center;
    margin-bottom: 1.5rem;
    color: #b8860b; /* Ciemnożółty/brązowy dla nagłówka sekcji */
}

.product-grid {
    display: grid;
    /* Utworzenie siatki responsywnej */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem; /* Odstępy między produktami */
}

.product-placeholder {
    border: 1px solid #ddd;
    padding: 1rem;
    text-align: center;
    background-color: #fff;
    border-radius: 5px;
    min-height: 150px; /* Minimalna wysokość dla zastępczego produktu */
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    color: #666;
}

/* Stopka */
.main-footer {
    background-color: #f0f0f0; /* Jasnoszare tło stopki */
    color: #555;
    text-align: center;
    padding: 1.5rem 1rem;
    margin-top: 2rem; /* Odstęp od głównej treści */
    border-top: 1px solid #ddd;
}

/* Style dla karty produktu */
.product-card {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 1rem;
    background-color: #fff;
    text-align: center;
    transition: box-shadow 0.3s ease; /* Efekt cienia przy najechaniu */
    display: flex; /* Użyjemy flexboxa do ułożenia elementów w karcie */
    flex-direction: column; /* Elementy jeden pod drugim */
    justify-content: space-between; /* Rozciągnij zawartość */
}

.product-card:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Lekki cień */
}

.product-image {
    max-width: 100%; /* Obrazek nie będzie szerszy niż karta */
    height: 150px; /* Stała wysokość obrazka */
    object-fit: contain; /* Zachowaj proporcje, dopasuj wewnątrz ramki */
    margin-bottom: 1rem; /* Odstęp pod obrazkiem */
}

.product-name {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    color: #333;
    /* Możemy ograniczyć wysokość nazwy, jeśli jest długa */
    min-height: 2.4em; /* Miejsce na ok. 2 linie tekstu */
}

.product-price {
    font-size: 1.2rem;
    font-weight: bold;
    color: #b8860b; /* Ciemniejszy żółty/brązowy dla ceny */
    margin-bottom: 1rem; /* Odstęp przed przyciskiem */
}

.add-to-cart-btn {
    background-color: #ffd700; /* Żółty przycisk */
    color: #333;
    border: none;
    padding: 0.75rem 1rem;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s ease;
    border: 1px solid #e6c200; /* Lekka ramka dla lepszego wyglądu */
}

.add-to-cart-btn:hover,
.add-to-cart-btn:focus {
    background-color: #e6c200; /* Ciemniejszy żółty przy najechaniu */
    outline: none; /* Usunięcie domyślnego focusu */
}

/* Style dla strony koszyka */
.cart-page h2 {
    text-align: center;
    margin-bottom: 1.5rem;
    color: #b8860b;
}

.cart-table {
    width: 100%;
    border-collapse: collapse; /* Łączenie ramek komórek */
    margin-bottom: 2rem;
}

.cart-table th,
.cart-table td {
    border: 1px solid #ddd;
    padding: 0.8rem 1rem; /* Więcej paddingu w komórkach */
    text-align: left;
    vertical-align: middle; /* Wyrównanie w pionie do środka */
}

.cart-table th {
    background-color: #f2f2f2; /* Jasnoszare tło nagłówków tabeli */
    font-weight: bold;
}

.cart-item-image {
    max-width: 80px; /* Mniejszy obrazek w koszyku */
    height: auto;
    display: block; /* Aby marginesy działały poprawnie */
    margin-right: 1rem; /* Odstęp od nazwy */
}

/* Wiersze na przemian dla lepszej czytelności (opcjonalne) */
.cart-table tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}

.remove-item-btn {
    background-color: #dc3545; /* Czerwony dla usunięcia */
    color: white;
    border: none;
    padding: 0.4rem 0.8rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background-color 0.3s ease;
}

.remove-item-btn:hover {
    background-color: #c82333; /* Ciemniejszy czerwony */
}

/* Podsumowanie koszyka */
.cart-summary {
    background-color: #fffacd; /* Jasnożółte tło jak sekcja powitalna */
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 1.5rem;
    margin-top: 1rem;
    text-align: right; /* Wyrównanie do prawej */
}

.cart-summary h3 {
    margin-bottom: 1rem;
    text-align: left; /* Nagłówek podsumowania do lewej */
    color: #333;
}

.cart-summary p {
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
}

.checkout-btn {
    background-color: #28a745; /* Zielony dla przejścia dalej */
    color: white;
    border: none;
    padding: 0.8rem 1.5rem;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.checkout-btn:hover {
    background-color: #218838; /* Ciemniejszy zielony */
}

/* Wiadomość o pustym koszyku */
#empty-cart-message {
    text-align: center;
    padding: 2rem;
    background-color: #f8f8f8;
    border: 1px dashed #ccc;
    border-radius: 5px;
}

.btn-link { /* Styl dla linku "Wróć do sklepu" */
    display: inline-block;
    margin-top: 1rem;
    padding: 0.6rem 1.2rem;
    background-color: #ffd700;
    color: #333;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    border: 1px solid #e6c200;
    transition: background-color 0.3s ease;
}

.btn-link:hover {
    background-color: #e6c200;
}

/* Dodatkowy styl dla linku logo w nagłówku */
.logo-link {
    text-decoration: none;
    color: inherit; /* Dziedziczy kolor z rodzica (nagłówka) */
}

/* Style dla strony podziękowania */
.thankyou-page .thankyou-message-box {
    background-color: #e9f7ef; /* Jasnozielone tło dla potwierdzenia */
    border: 1px solid #98f3ac; /* Zielona ramka */
    color: #155724; /* Ciemnozielony tekst */
    padding: 2rem;
    border-radius: 8px;
    text-align: center;
    margin: 2rem auto; /* Wycentrowanie i marginesy */
    max-width: 600px; /* Ograniczenie szerokości */
}

.thankyou-message-box h2 {
    color: #155724; /* Ciemnozielony nagłówek */
    margin-bottom: 1rem;
}

.thankyou-message-box p {
    margin-bottom: 0.8rem;
    line-height: 1.5;
}

.thankyou-message-box hr {
    border: 0;
    height: 1px;
    background-color: #c3e6cb; /* Jaśniejsza zielona linia */
    margin: 1.5rem 0;
}

/* Używamy tej samej klasy co na stronie koszyka dla spójności */
/* .thankyou-message-box .btn-link { ... } */

/* Styl dla linku na karcie produktu */
.product-link {
    text-decoration: none;
    color: inherit; /* Dziedziczy kolor tekstu */
    display: block; /* Link zajmuje całą dostępną przestrzeń nad ceną */
    margin-bottom: 0.5rem; /* Odstęp przed ceną */
}

.product-link:hover .product-name {
    color: #b8860b; /* Zmiana koloru nazwy po najechaniu na link */
}

/* Styl dla krótkiego opisu na karcie produktu */
.product-description-short {
    font-size: 0.9rem;
    color: #666;
    min-height: 3em; /* Miejsce na ok 2-3 linie */
    margin-bottom: 1rem;
}

.product-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 1 lub 2 kolumny */
    gap: 2rem; /* Odstęp między kolumnami */
    align-items: start; /* Wyrównaj elementy do góry kolumn */
    margin-top: 1.5rem;
}

.product-image-column {
    text-align: center; /* Wycentruj obrazek w kolumnie */
}

.product-page-image {
    max-width: 100%;
    height: auto;
    border: 1px solid #eee;
    border-radius: 5px;
    background-color: #fff; /* Białe tło na wypadek przezroczystości */
}

.product-info-column h2 { /* Nazwa produktu */
    font-size: 2rem;
    margin-bottom: 1rem;
    color: #333;
}

.product-info-column #product-description { /* Opis */
    font-size: 1rem;
    line-height: 1.7;
    color: #555;
    margin-bottom: 1.5rem;
}

.product-page-price { /* Cena */
    font-size: 1.8rem;
    font-weight: bold;
    color: #b8860b;
    margin-bottom: 1.5rem;
}

.product-page-btn { /* Przycisk Dodaj do koszyka */
    padding: 0.8rem 1.8rem; /* Większy przycisk */
    font-size: 1.1rem;
}
/* Style dla strony produktów i filtrów kategorii */
.products-page h2 {
    text-align: center;
    margin-bottom: 1.5rem;
    color: #b8860b;
}

.category-filters {
    margin-bottom: 2rem;
    padding: 1rem;
    background-color: #f8f8f8;
    border-radius: 5px;
    border: 1px solid #eee;
}

.category-filters h3 {
    margin-bottom: 1rem;
    font-size: 1.1rem;
    color: #555;
}

.filter-buttons {
    display: flex; /* Przyciski obok siebie */
    flex-wrap: wrap; /* Zwijanie na mniejszych ekranach */
    gap: 0.8rem; /* Odstęp między przyciskami */
}

.filter-btn {
    padding: 0.6rem 1.2rem;
    border: 1px solid #ccc;
    background-color: #fff;
    color: #333;
    border-radius: 20px; /* Zaokrąglone przyciski (pigułki) */
    cursor: pointer;
    font-size: 0.9rem;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.filter-btn:hover {
    background-color: #eee;
    border-color: #bbb;
}

/* Styl dla aktywnego filtra */
.filter-btn.active {
    background-color: #ffd700; /* Nasz żółty */
    color: #333;
    border-color: #e6c200; /* Ciemniejszy żółty */
    font-weight: bold;
}

/* Styl dla przycisku "Dodaj do koszyka" po kliknięciu */
.add-to-cart-btn.added {
    background-color: #28a745; /* Zielony */
    color: white;
    border-color: #218838;
}

/* Siatka produktów na stronie products.html */
.product-listing {
    margin-top: 2rem;
}
/* Klasa .product-grid i .product-card jest już zdefiniowana wcześniej */

/* Style dla komórki ilości i przycisków +/- w koszyku */
.quantity-cell {
    text-align: center; /* Wycentruj zawartość komórki */
    white-space: nowrap; /* Zapobiegaj zawijaniu przycisków */
}

.item-quantity {
    display: inline-block; /* Umożliwia ustawienie marginesów */
    min-width: 30px; /* Minimalna szerokość dla liczby */
    padding: 0 0.5rem; /* Odstępy po bokach liczby */
    font-weight: bold;
    font-size: 1rem;
    vertical-align: middle; /* Wyrównanie w pionie z przyciskami */
}

.decrease-qty-btn,
.increase-qty-btn {
    background-color: #eee;
    border: 1px solid #ccc;
    color: #333;
    padding: 0.2rem 0.6rem; /* Mniejszy padding dla małych przycisków */
    font-size: 1rem;
    line-height: 1; /* Dopasuj wysokość linii */
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    vertical-align: middle; /* Wyrównanie w pionie */
}

.decrease-qty-btn:hover,
.increase-qty-btn:hover {
    background-color: #ddd;
}

.decrease-qty-btn:active,
.increase-qty-btn:active {
    background-color: #ccc;
}

/* Opcjonalnie: dodaj niewielki margines między przyciskami a liczbą */
.decrease-qty-btn {
    margin-right: 0.3rem;
}

.increase-qty-btn {
    margin-left: 0.3rem;
}

/* Styl dla przycisku wylogowania w nawigacji */
.logout-btn {
    background: none; /* Usuń domyślne tło */
    border: none; /* Usuń domyślną ramkę */
    color: #333; /* Kolor tekstu jak dla linków */
    text-decoration: underline; /* Podkreślenie jak dla linków */
    cursor: pointer; /* Kursor wskazujący */
    font: inherit; /* Dziedziczy czcionkę, rozmiar itp. z elementu nadrzędnego (nawigacji) */
    margin-left: 0.5rem; /* Niewielki margines z lewej strony */
    padding: 0; /* Usuń domyślny padding */
    vertical-align: baseline; /* Wyrównanie z tekstem "Witaj..." */
}

.logout-btn:hover {
    color: #b8860b; /* Zmiana koloru przy najechaniu (jak linki w nawigacji) */
}

/* Styl dla całego elementu li z powitaniem, żeby przycisk był w linii */
.nav-welcome {
    display: flex;
    align-items: center;
}

/* Style dla Modala */

/* Przyciemniające tło */
.modal-overlay {
    position: fixed; /* Pozycja stała względem okna przeglądarki */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Półprzezroczyste czarne tło */
    display: flex; /* Użyj flexboxa do wyśrodkowania zawartości */
    justify-content: center;
    align-items: center;
    z-index: 1000; /* Upewnij się, że jest na wierzchu */
    opacity: 0; /* Początkowo niewidoczny (dla animacji) */
    visibility: hidden; /* Początkowo ukryty (dla dostępności) */
    transition: opacity 0.3s ease, visibility 0.3s ease; /* Płynne przejście */
}

/* Kontener z treścią modala */
.modal-content {
    background-color: #fff;
    padding: 2rem 2.5rem;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    max-width: 500px; /* Maksymalna szerokość modala */
    width: 90%; /* Szerokość na mniejszych ekranach */
    position: relative; /* Potrzebne do pozycjonowania przycisku zamknięcia */
    text-align: center;
    transform: translateY(-20px); /* Początkowe przesunięcie (dla animacji) */
    transition: transform 0.3s ease;
}

/* Styl dla modala, gdy jest otwarty */
.modal-overlay.modal-open {
    opacity: 1;
    visibility: visible;
}

.modal-overlay.modal-open .modal-content {
    transform: translateY(0); /* Przywróć pozycję */
}


/* Tytuł modala */
.modal-content h2 {
    margin-top: 0;
    margin-bottom: 1rem;
    color: #333;
}

/* Tekst w modalu */
.modal-content p {
    margin-bottom: 1.5rem;
    color: #555;
    line-height: 1.6;
}

/* Kontener na przyciski akcji */
.modal-actions {
    display: flex;
    justify-content: center;
    gap: 1rem; /* Odstęp między przyciskami */
    flex-wrap: wrap; /* Zawijanie na mniejszych ekranach */
}

/* Przycisk/link w modalu (używa istniejącej klasy .btn-link) */
.modal-btn {
    /* Można dostosować padding lub inne style specjalnie dla modala */
    padding: 0.7rem 1.5rem;
}
/* Opcjonalny dodatkowy styl dla przycisku rejestracji */
.modal-btn.register-btn {
    background-color: #f0f0f0;
    border-color: #ccc;
}
.modal-btn.register-btn:hover {
    background-color: #e0e0e0;
}


/* Przycisk zamknięcia (X) */
.modal-close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    font-size: 1.8rem;
    line-height: 1;
    color: #aaa;
    cursor: pointer;
    padding: 0;
}

.modal-close-btn:hover {
    color: #333;
}

/* Style dla wyrównania w sekcji danych na checkout */
.detail-row {
    display: flex;
    align-items: baseline; /* Wyrównaj do linii bazowej tekstu */
    margin-bottom: 0.8rem; /* Odstęp między wierszami */
}

.detail-label {
    flex-basis: 140px; /* Stała szerokość dla etykiet */
    flex-shrink: 0; /* Nie zmniejszaj etykiety */
    font-weight: bold;
    text-align: right; /* Wyrównaj tekst etykiety do prawej */
    margin-right: 10px; /* Odstęp między etykietą a wartością/polem */
}

.detail-value {
    flex-grow: 1; /* Wartość zajmuje resztę miejsca */
    text-align: left;
}

.detail-input {
    flex-grow: 1; /* Pole input zajmuje resztę miejsca */
    /* Odziedziczy style z .form-group input, ale można dodać specyficzne */
    padding: 0.6rem; /* Mniejszy padding dla lepszego wyrównania */
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    width: auto; /* Usunięcie width: 100%, bo flex-grow zarządza szerokością */
}

/* Poprawka dla readonly inputów, jeśli były używane wcześniej i miały specjalne style */
input[readonly] {
    background-color: #eee; /* Przykład */
    cursor: not-allowed;
}

/* Usunięcie marginesu dolnego dla grupy formularza, bo mamy margines na .detail-row */
.form-group {
     margin-bottom: 0;
}