*, *::before, *::after {
    box-sizing: border-box; /* Global box-sizing for easier layout */
}

body {
    font-family: 'Inter', sans-serif;
    margin: 0;
    padding: 20px;
    background: #0f0f0f;
    color: #f0f0f0;
    line-height: 1.6;
    min-height: 100vh; /* Ensure body takes at least full viewport height */
    display: flex; /* Use flexbox for main page content flow */
    flex-direction: column; /* Stack children vertically */
    align-items: center; /* Center children horizontally in the flex container */
}

/* Navigation Styles */
nav {
    width: 100%;
    max-width: 1200px; /* Match container widths */
    margin-bottom: 20px;
    text-align: center;
    padding: 0 10px; /* Add padding */
}

nav a {
    color: #ccc;
    text-decoration: none;
    font-weight: 500;
    margin: 0 15px;
    font-size: 1.1rem;
    transition: color 0.3s ease;
}

nav a:hover {
    color: #fff;
}


h1 {
    text-align: center;
    font-size: 2.75rem;
    margin-bottom: 30px;
    color: #ffffff;
    width: 100%; /* Take full width to respect centering */
}

.admin-controls {
    text-align: center; /* Center content horizontally within the block */
    margin-bottom: 24px;
    width: 100%; /* Take full width to respect centering */
    max-width: 1200px; /* Align with cards container max-width */
    padding: 15px 20px; /* Add padding inside the admin controls area */
    background: #1a1a1a; /* Slightly darker background than body */
    border-radius: 12px; /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Subtle shadow */

    display: flex; /* Use flexbox for layout of internal forms */
    flex-wrap: wrap; /* Allow forms to wrap on smaller screens */
    justify-content: center; /* Center forms when they wrap */
    gap: 15px; /* Space between flex items (forms) */
    align-items: center; /* Vertically align forms */
}

.login-link {
    color: #888;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}
.login-link:hover {
    color: #fff;
}

/* Style for individual forms within admin controls */
.admin-controls form {
    display: flex;
    gap: 10px;
    align-items: center; /* Align items vertically within the form */
    flex-wrap: wrap; /* Allow elements within forms to wrap */
    justify-content: center; /* Center form elements if they wrap */
}

/* Style specifically for the Add Drink form if it has many inputs */
.admin-controls .add-drink-form {
    /* Potentially adjust layout for more inputs, e.g., align-items: flex-start; */
    /* Or add max-width to inputs if they get too wide */
}

/* Specific style for the logout form button */
.admin-controls form[action="/logout"] button {
    padding: 10px 16px; /* Match admin form button padding */
    background: #d32f2f; /* Reddish background for logout */
    border: none;
    border-radius: 6px;
    cursor: pointer;
    color: #fff;
    transition: background 0.3s ease, transform 0.2s ease;
    font-size: 1rem; /* Standard font size */
    font-weight: 500;
}

.admin-controls form[action="/logout"] button:hover {
    background: #c62828; /* Darker red on hover */
    transform: scale(1.05);
}


.cards-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); /* Slightly wider cards */
    gap: 20px;
    width: 100%;
    max-width: 90%; /* Limit max width */
    margin-top: 20px;
    padding: 0 10px; /* Add some horizontal padding */
}

.card {
    background: linear-gradient(145deg, #1a1a1a, #2a2a2a);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.8);
}

.rank {
    font-size: 1.5rem; /* Slightly larger */
    font-weight: 700;
    text-align: center;
    color: #ffffff;
    margin-bottom: 10px; /* Add space below rank */
}

.info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-grow: 1; /* Allow info to take available space */
}
.name {
    font-size: 1.2rem;
    font-weight: 600;
    color: #fff;
}
.shots {
    font-size: 0.95rem;
    color: #ccc;
}

.actions {
    margin-top: auto; /* Push actions to the bottom */
    display: flex;
    justify-content: center;
    gap: 8px; /* Slightly smaller gap */
}
.actions form { /* Ensure form within actions doesn't interfere with flex */
    display: contents; /* Make the form itself not a flex item */
}
.actions button {
    width: 40px; /* Slightly larger buttons */
    height: 40px;
    background: #292929;
    border: none;
    border-radius: 8px;
    font-size: 1.3rem; /* Slightly larger icon/text */
    font-weight: bold;
    color: #fff;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s ease;
    display: flex; /* Use flex to center content */
    justify-content: center;
    align-items: center;
}
.actions button:hover {
    background: #3a3a3a;
    transform: scale(1.15);
}

/* Style for the new record drink button */
.actions button.record-drink-button {
    background: #007bff; /* A different color, e.g., blue */
    font-size: 1.1rem; /* Adjust size for icon/text */
    padding: 0; /* Remove padding if icon fills button */
}
.actions button.record-drink-button:hover {
    background: #0056b3;
}


/* Admin form input and button styles (apply to both text and file inputs/associated buttons) */
.admin-controls input[type="text"],
.admin-controls input[type="number"], /* Added number type */
.admin-controls input[type="file"] {
    padding: 10px;
    background: #151515;
    border: 1px solid #333;
    border-radius: 6px;
    color: #f0f0f0;
    font-size: 1rem; /* Consistent font size */
    box-sizing: border-box;
    /* flex-grow: 1; /* Removed flex-grow to prevent inputs from stretching too much */
    width: auto; /* Allow width to be determined by content/min-width */
    min-width: 120px; /* Adjusted min-width */
    /* Specific width for number input */
    flex-basis: 80px; /* Suggest a base width for quantity */
    flex-grow: 0; /* Prevent number input from growing too much */
    width: auto;
}

/* Style for the file selector button */
.admin-controls input[type="file"]::file-selector-button {
    padding: 8px 12px; /* Adjust padding */
    background: #292929; /* Dark background */
    border: none;
    border-radius: 4px; /* Slightly smaller border-radius */
    color: #fff; /* White text */
    cursor: pointer;
    transition: background 0.3s ease;
    margin-right: 10px; /* Space between button and file name */
    font-size: 0.9rem; /* Slightly smaller font than input text */
    font-weight: 500;
}

.admin-controls input[type="file"]::file-selector-button:hover {
    background: #3b3b3b; /* Darker background on hover */
}


.admin-controls button {
    padding: 10px 16px;
    background: #292929;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    color: #fff;
    transition: background 0.3s ease;
    flex-shrink: 0;
}
.admin-controls button:hover {
    background: #3b3b3b;
}

/* Specific style for the Add Drink button */
.admin-controls .add-drink-form button {
    background: #28a745; /* Green color */
}
.admin-controls .add-drink-form button:hover {
    background: #218838; /* Darker green */
}


/* Top 3 kolorowe miejsca */
.card:nth-child(1) .rank {
    color: #ffd700; /* złoto */
}
.card:nth-child(2) .rank {
    color: #c0c0c0; /* srebro */
}
.card:nth-child(3) .rank {
    color: #cd7f32; /* brąz */
}

/* --- Login Page Specific Styles --- */

/* Centering container for the login form */
.login-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 40px); /* Adjust height considering body padding */
    width: 100%; /* Ensure wrapper takes full width */
}

.login-container {
    background: linear-gradient(145deg, #1a1a1a, #2a2a2a);
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    max-width: 400px;
    margin: auto;
    text-align: center;
}

.login-container h1 {
    margin-bottom: 20px;
    font-size: 2rem;
}

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

.login-container input[type="text"],
.login-container input[type="password"] {
    padding: 12px;
    background: #151515;
    border: 1px solid #333;
    border-radius: 6px;
    color: #f0f0f0;
    font-size: 1rem;
    box-sizing: border-box;
    width: 100%;
}

.login-container input[type="text"]::placeholder,
.login-container input[type="password"]::placeholder {
    color: #888;
}

.login-container button[type="submit"] {
    padding: 12px 20px;
    background: #292929;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    color: #fff;
    font-size: 1.1rem;
    font-weight: 600;
    transition: background 0.3s ease, transform 0.2s ease;
    width: 100%;
}

.login-container button[type="submit"]:hover {
    background: #3b3b3b;
    transform: scale(1.02);
}

/* Specific body style for login page (if you still use the class, though login-wrapper is preferred) */
body.login-page {
    display: block;
    min-height: auto;
    padding: 0;
}

/* Add styles for the ingredient stock list section */
.ingredient-stock-list {
    background: #212121; /* Darker background */
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px; /* Space below the list */
    width: 100%; /* Take full width in admin controls */
    max-width: 400px; /* Limit max width or adjust as needed */
    text-align: left; /* Align text left */
}

.ingredient-stock-list h2 {
    font-size: 1.2rem;
    color: #fff;
    margin-top: 0;
    margin-bottom: 10px;
    border-bottom: 1px solid #444;
    padding-bottom: 5px;
}

.ingredient-stock-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ingredient-stock-list li {
    font-size: 0.95rem;
    color: #ccc;
    margin-bottom: 5px;
    display: flex; /* Use flex for name and stock alignment */
    justify-content: space-between; /* Push name and stock apart */
}

.ingredient-stock-list li .ingredient-name {
    font-weight: 500;
    color: #eee;
}

.ingredient-stock-list li .ingredient-stock {
    font-weight: bold;
    color: #00ff00; /* Example color for stock */
}

/* Style for the smaller list on the main page if you added it */
.ingredient-stock-list.mini-list {
    max-width: 300px; /* Make it smaller */
    padding: 10px;
}
.ingredient-stock-list.mini-list h2 {
    font-size: 1.1rem;
}
.ingredient-stock-list.mini-list li {
    font-size: 0.9rem;
}


/* Style for the ingredient input groups in the Add Drink form */
.add-drink-form .ingredient-input-group {
    display: flex; /* Arrange select and input side-by-side */
    gap: 10px; /* Space between select and input */
    align-items: center;
    flex-wrap: wrap; /* Allow wrapping on small screens */
    width: 100%; /* Take full width */
    justify-content: center; /* Center group if it wraps */
}

.add-drink-form .ingredient-input-group select,
.add-drink-form .ingredient-input-group input[type="number"] {
    padding: 10px;
    background: #151515;
    border: 1px solid #333;
    border-radius: 6px;
    color: #f0f0f0;
    font-size: 1rem;
    box-sizing: border-box;
    flex-grow: 1; /* Allow them to grow */
    min-width: 120px; /* Minimum width */
    /* Specific width for number input */
    flex-basis: 80px; /* Suggest a base width for quantity */
    flex-grow: 0; /* Prevent number input from growing too much */
    width: auto;
}

.add-drink-form .ingredient-input-group select option {
    background: #151515; /* Style options background */
    color: #f0f0f0;
}


/* Adjustments for the add-drink-form itself if needed */
.admin-controls .add-drink-form {
    flex-direction: column; /* Stack form elements vertically */
    align-items: center;
}

.admin-controls .add-drink-form > h2 {
    width: 100%; /* Ensure heading takes full width */
    text-align: center;
    color: #fff;
    margin-bottom: 20px;
    font-size: 1.5rem;
}

.admin-controls .add-drink-form input[type="text"] {
    width: 100%; /* Make drink name input full width */
    max-width: 400px; /* Limit max width for name */
    margin-bottom: 10px; /* Space below name input */
}

.admin-controls .add-drink-form button {
    margin-top: 10px; /* Space above the submit button */
    width: auto; /* Button size based on content */
}

/* --- Drinks Menu Page Specific Styles --- */
.drinks-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* Drinks might need more space */
    gap: 20px;
    width: 100%;
    max-width: 90%;
    margin-top: 20px;
    padding: 0 10px;
}

.drink-card {
    background: linear-gradient(145deg, #1a1a1a, #2a2a2a);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.drink-name {
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 5px;
    text-align: center;
}

.drink-ingredients h3 {
    font-size: 1.1rem;
    color: #ccc;
    margin-bottom: 8px;
    border-bottom: 1px solid #333;
    padding-bottom: 4px;
}

.drink-ingredients ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.drink-ingredients li {
    font-size: 0.95rem;
    color: #bbb;
    margin-bottom: 4px;
    padding-left: 15px;
    position: relative;
}
.drink-ingredients li::before {
    content: '•'; /* Bullet point */
    color: #007bff; /* Bullet color */
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
    position: absolute;
    left: 0;
}

.drink-description {
    font-size: 0.9rem;
    color: #888;
    margin-top: 10px;
    font-style: italic;
}

/* Admin link style */
.admin-link {
    display: inline-block;
    margin-top: 15px;
    color: #007bff;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.admin-link:hover {
    color: #0056b3;
    text-decoration: underline;
}

/* --- Media Page Specific Styles --- */

/* Adjusted upload form styles */
.admin-controls.media-upload-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    margin-bottom: 30px;
    padding: 20px; /* Slightly more padding */
    background: #1a1a1a;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    width: 100%;
    max-width: 600px; /* Limit form width */
    margin-left: auto;
    margin-right: auto;
}


.admin-controls.media-upload-form h2 {
    margin: 0 0 10px 0;
    font-size: 1.5rem;
    color: #fff;
    width: 100%;
    text-align: center;
}

.admin-controls.media-upload-form form {
    display: flex;
    flex-direction: column; /* Stack file input and button */
    align-items: center;
    gap: 15px;
    width: 100%; /* Make form take full width of its container */
}


.admin-controls.media-upload-form input[type="file"] {
    padding: 10px;
    background: #151515;
    border: 1px solid #333;
    border-radius: 6px;
    color: #f0f0f0;
    font-size: 1rem;
    box-sizing: border-box;
    width: 100%; /* Take full width */
    cursor: pointer;
}

.admin-controls.media-upload-form input[type="file"]::file-selector-button {
    padding: 8px 12px;
    background: #292929;
    border: none;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    transition: background 0.3s ease;
    margin-right: 10px;
    font-size: 0.9rem;
    font-weight: 500;
}

.admin-controls.media-upload-form input[type="file"]::file-selector-button:hover {
    background: #3b3b3b;
}

.admin-controls.media-upload-form button {
    padding: 10px 20px;
    background: #007bff; /* Blue color for upload */
    border: none;
    border-radius: 6px;
    cursor: pointer;
    color: #fff;
    font-size: 1.1rem;
    font-weight: 600;
    transition: background 0.3s ease;
    width: auto; /* Button width based on content */
}

.admin-controls.media-upload-form button:hover {
    background: #0056b3;
}

/* Success/Error messages for upload */
.admin-controls.media-upload-form p {
    margin-top: 10px;
    font-size: 0.95rem;
}
.admin-controls.media-upload-form p[style="color: green;"] {
     color: #28a745 !important; /* Ensure green is used */
}
.admin-controls.media-upload-form p[style="color: red;"] {
    color: #dc3545 !important; /* Ensure red is used */
}


.media-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* Responsive grid */
    gap: 20px;
    width: 100%;
    max-width: 1200px; /* Match other container widths */
    margin-top: 30px;
    padding: 0 10px;
    justify-items: center; /* Center grid items within their cells */
}

.media-item {
    background: #1a1a1a;
    border-radius: 12px;
    padding: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden; /* Hide overflow for rounded corners */
    width: 100%; /* Take full width of the grid cell */
    max-width: 300px; /* Prevent items from getting too wide */
}

.media-item img,
.media-item video {
    display: block; /* Remove extra space below media */
    max-width: 100%; /* Ensure media fits in its container */
    height: auto; /* Maintain aspect ratio */
    border-radius: 8px; /* Rounded corners for media */
    margin-bottom: 10px; /* Space below media */
}

.media-item video {
     width: 100%; /* Ensure video takes full width if needed */
     /* Optional: Add max-height if videos are too tall */
     /* max-height: 200px; */
     object-fit: cover; /* Ensure video covers the area without stretching */
}

.media-item p {
    text-align: center;
    font-size: 0.9rem;
    color: #bbb;
    margin: 0 0 10px 0; /* Space below filename */
    word-break: break-word; /* Break long filenames */
}

/* Style for the delete form within media items */
.media-item form {
    margin-top: auto; /* Push the form to the bottom */
    width: 100%; /* Make the form take full width */
    text-align: center; /* Center the button within the form */
}

/* Style for the delete button */
.media-item .delete-button {
    padding: 8px 12px; /* Smaller padding for a smaller button */
    background: #dc3545; /* Red color for delete */
    border: none;
    border-radius: 6px;
    cursor: pointer;
    color: #fff;
    font-size: 0.9rem; /* Smaller font size */
    font-weight: 500;
    transition: background 0.3s ease;
    width: auto; /* Button width based on content */
}

.media-interactions {
  display: flex;
  gap: 10px;
  margin-top: 10px;
  justify-content: center; /* Wyśrodkuj przyciski */
}

.like-button,
.dislike-button {
  padding: 5px 10px;
  background: #292929;
  border: none;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.1s ease;
   min-width: 60px; /* Upewnij się, że przyciski mają minimalną szerokość */
   text-align: center; /* Wyśrodkuj tekst w przycisku */
}

.like-button:hover,
.dislike-button:hover {
  background: #3a3a3a;
  transform: scale(1.05); /* Lekkie powiększenie przy najechaniu */
}

/* Styl dla polubionego/niepolubionego przycisku */
.like-button.voted {
    background: #28a745; /* Zielony dla polubionego */
    color: #fff;
    font-weight: bold;
}

.dislike-button.voted {
    background: #dc3545; /* Czerwony dla niepolubionego */
    color: #fff;
    font-weight: bold;
}

.like-button.voted:hover,
.dislike-button.voted:hover {
     transform: scale(1.05); /* Utrzymaj powiększenie przy najechaniu */
}

/* Styl dla formularza usuwania w elemencie media */
.media-item form {
    margin-top: 10px; /* Zmniejsz odstęp, jeśli interakcje są bliżej */
    width: 100%;
    text-align: center;
}

/* Styl dla przycisku usuwania */
.media-item .delete-button {
    padding: 8px 12px;
    background: #dc3545;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 500;
    transition: background 0.3s ease;
    width: auto;
}

.media-item .delete-button:hover {
    background: #c82333;
}

.delete-drink-button {
  margin-top: 10px;
  padding: 8px 12px;
  background: #dc3545;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.3s ease;
}
.delete-drink-button:hover {
  background: #c82333;
}

.ingredient-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.stock-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.stock-btn,
.stock-delete-btn {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 6px;
  font-size: 1.2rem;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

/* minus/plus */
.stock-btn {
  background: #444;
}
.stock-btn:hover {
  background: #555;
}

/* kosz */
.stock-delete-btn {
  background: #dc3545;
}
.stock-delete-btn:hover {
  background: #c82333;
}

.ingredient-stock {
  min-width: 24px;
  text-align: center;
  font-weight: bold;
  color: #0f0;
}
.delete-user-button {
  width: 40px;
  height: 40px;
  background: #dc3545;
  border: none;
  border-radius: 8px;
  font-size: 1.3rem;
  color: #fff;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.delete-user-button:hover {
  background: #c82333;
  transform: scale(1.1);
}

.drink-ingredient-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.ingredient-stock-controls {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.inline-form {
  display: inline;
}

.stock-btn {
  width: 28px;
  height: 28px;
  background: #444;
  border: none;
  border-radius: 4px;
  color: #fff;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.stock-btn:hover {
  background: #555;
}

.stock-icons {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 40px;
  justify-content: center;
}
.bottle-icon {
  font-size: 1.1rem;
}
.no-stock {
  color: #888;
  font-size: 0.9rem;
}

.spotify-iframe {
    width: 30%;
    height: 352px;
    border-radius: 12px;
  }

  /* Na telefonach (ekrany max 768px) iframe ma pełną szerokość */
  @media (max-width: 768px) {
    .spotify-iframe {
      width: 100%;
    }
  }