/* --- Reset i body --- */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
    font-family: 'Orbitron', sans-serif;
    background: #f5f5f5;
    color: #121212;
    font-size: 16px;
    padding: 20px;  /* <-- margines od krawędzi */
}

/* --- Header --- */
header {
    background: #0D0D0D;
    padding: 12px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 12px; /* lekko zaokrąglony header */
    margin-bottom: 20px; /* odstęp od reszty strony */
    border-bottom: 2px solid #00C3CC;
}
header h1 { font-size: 1.8em; color: #00C3CC; }
header nav button {
    margin-left: 10px;
    padding: 8px 16px;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    background: #00C3CC;
    color: #fff;
    font-weight: bold;
    transition: 0.2s;
}
header nav button:hover { background: #00E0FF; }

/* --- Main / Tabs --- */
main {
    padding: 10px;
    max-width: 1200px; /* ograniczenie szerokości */
    margin: 0 auto;    /* wyśrodkowanie */
}
.tab { display: none; }
.tab.active { display: block; }

/* --- Zakupy --- */
#zakupy .shop { margin-bottom: 20px; }
#zakupy .category h4 { color: #007B8A; margin-bottom: 8px; }

#lista-zakupy li {
    list-style: none;
    margin-bottom: 15px;
    padding: 16px;
    border-radius: 12px;
    background: #FFFFFF;
    box-shadow: 0 3px 8px rgba(0,0,0,0.15);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.1em;
}

/* --- Koszyk --- */
ul.sortable { list-style: none; padding-left: 0; margin-top: 5px; }
ul.sortable li {
    padding: 14px 16px;
    margin-bottom: 12px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 1.05em;
    box-shadow: 0 3px 8px rgba(0,0,0,0.2);
    transition: 0.2s;
}
ul.sortable li.not-bought { background: #4CD97B; }   /* KUP */
ul.sortable li.bought { background: #FFA64D; }       /* NIE KUPUJ */

/* Przycisk statusu po lewej */
ul.sortable li .status-btn {
    margin-right: 12px;
    padding: 6px 14px;
    border: none;
    border-radius: 10px;
    font-weight: bold;
    cursor: pointer;
    color: #fff;
}
ul.sortable li.not-bought .status-btn { background: #2F9E4A; }   /* KUP */
ul.sortable li.bought .status-btn { background: #CC7A3D; }       /* NIE KUPUJ */

/* Przycisk usuń po prawej */
ul.sortable li .delete-btn {
    margin-left: auto;
    padding: 6px 12px;
    border: none;
    border-radius: 10px;
    font-weight: bold;
    background: #FF3D3D;
    color: #fff;
    cursor: pointer;
}

/* --- Przyciski CRUD --- */
button { background: #00C3CC; color: #fff; border-radius: 12px; padding: 8px 16px; font-weight: bold; cursor: pointer; }
button:hover { background: #00E0FF; }

/* --- Ustawienia --- */
#ustawienia label { display: block; margin: 10px 0; }
#ustawienia select { padding: 4px 8px; border-radius: 6px; border: 1px solid #ccc; }

/* --- Responsywność --- */
@media (max-width: 768px) {
    body { padding: 15px; }
    #zakupy li, ul.sortable li { font-size: 1em; padding: 12px; }
    ul.sortable li { flex-direction: column; align-items: flex-start; }
    ul.sortable li .status-btn, ul.sortable li .delete-btn { margin: 5px 0; }
}
@media (max-width: 480px) {
    body { padding: 10px; }
    header { flex-direction: column; align-items: flex-start; }
    header nav button { margin: 5px 0; }
}