.search-form {
    background-color: #f0f4f8;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 10px;

    /* display: grid;  */
    /* grid-template-columns: 200px 1fr; */
    gap: 15px 20px;
    align-items: center;
}

.post-form {
    background-color: #f0f4f8;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 10px;

    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 10px 10px;
    align-items: center;
}

.search-sort{
    background-color: #f0f4f8;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 10px;

    /* display: grid;  */
    /* grid-template-columns: 200px 1fr; */
    gap: 15px 20px;
    align-items: center;
}


 form {
    background-color: #f0f4f8;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 10px;

    /* gdisplay: grid; */
    /* grid-template-columns: 200px 1fr; */
    gap: 15px 20px;
    align-items: center;
}

form label {
    font-weight: bold;
    color: #333;
    text-align: right;
}

form input[type="text"],
form input[type="number"],
form input[type="file"] {
   /* width: 100%;*/
    padding: 6px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

.submit-wrapper {
    grid-column: 2; /* zarovná tlačítko do pravého sloupce */
}

form button[type="submit"] {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 16px;
    margin-top: 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1em;
    width: fit-content;
}

form button[type="submit"]:hover {
    background-color: #0056b3;
}

body {
    font-family: Arial, sans-serif;
    max-width: 800px;
    margin: auto;
}

.box {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    border: 1px solid #ccc;
    padding: 10px;
    margin: 10px 0;
    background-color: #f9f9f9;
    border-radius: 8px;
    gap: 20px;
}

.box img {
    width: 150px;
    height: auto;
    object-fit: contain;
    border-radius: 4px;
    flex-shrink: 0;
}

.info {
    flex: 1;
}

.info strong {
    font-size: 1.2em;
    color: #333;
}


/* === Grid layout for saved foods === */
.cards-grid{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 30px 5px;
    align-items: start;
}

/* Card look */
.box{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    border: 1px solid #ccc;
    padding: 12px;
    margin: 0; /* grid handles spacing */
    background-color: #f9f9f9;
    border-radius: 8px;
    gap: 10px;
    height: 100%;
}

.box img{
    width: 100%;
    height: 140px;
    object-fit: contain;
    border-radius: 4px;
}

.info{ margin-top: 4px; }

/* Make the page wider */
body{
    max-width: 1400px;
}
@media (min-width: 1600px){
    body{ max-width: 1500px; }
}


/* === Search + Sort bar === */
.search-sort-bar {
    margin: 20px 0;
}
.search-sort-bar form select,
.search-sort-bar form input[type="text"],
.search-sort-bar form button {
    padding: 6px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 0.9em;
}
.search-sort-bar form button {
    background-color: #007bff;
    color: #fff;
    cursor: pointer;
    border: none;
}
.search-sort-bar form button:hover {
    background-color: #0056b3;
}


/* === overrides to ensure image left, text right inside card === */
.cards-grid .box{
    display:flex;
    flex-direction:row;
    align-items:center;
    row-gap:30px;
    column-gap:5px; 
}
.cards-grid .box img{
    width:160px;
    height:120px;
    object-fit:contain;
    flex-shrink:0;
}
.cards-grid .info{ flex:1; }

img {
            max-width: 150px;
            max-height: 150px;
            object-fit: contain;
            border-radius: 4px;
            flex-shrink: 0;
            transition: transform 0.3s ease;
        }
        img:hover {
            transform: scale(3.8);
.clear-link {            
	background-color:#dc3545; 
	color:white; border:none; 
	padding:8px 16px; 
	border-radius:4px; 
	cursor:pointer;  }