/* Reset and base styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

body {
    background-color: #f8f9fa;
    color: #212529;
    max-width: 100%;
    overflow-x: hidden;
    padding-bottom: 20px;
}

/* Header styles */
.header {
    text-align: center;
    padding: 20px 0;
    margin-bottom: 20px;
}

.header h1 {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 20px;
}

.logo {
    width: 80px;
    height: 80px;
    margin: 0 auto;
}

/* Food card styles */
.food-card {
    background-color: white;
    border-radius: 15px;
    margin: 15px;
    padding: 15px;
    display: flex;
    position: relative;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.food-image {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    object-fit: cover;
    margin-right: 15px;
}

.food-details {
    flex: 1;
}

.food-name {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 5px;
}

.expiry {
    font-size: 18px;
    margin-bottom: 5px;
}

.expiry-days {
    color: #0d6efd;
    font-weight: 600;
}

.food-attributes {
    color: #6c757d;
    margin-bottom: 10px;
}

.tags-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.tag {
    display: inline-flex;
    align-items: center;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
}

.tag-food {
    background-color: #ffebee;
    color: #e53935;
}

.tag-drink {
    background-color: #e3f2fd;
    color: #1e88e5;
}

.quantity {
    display: flex;
    align-items: center;
    color: #495057;
}

.quantity-icon {
    margin-right: 5px;
}

.edit-button {
    position: absolute;
    top: 15px;
    right: 15px;
    color: #6c757d;
}

/* Add food button */
.add-button {
    background-color: #0d6efd;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 15px;
    font-size: 18px;
    font-weight: 500;
    width: calc(100% - 30px);
    margin: 15px;
    text-align: center;
    cursor: pointer;
}

/* Icons */
.icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.icon-fridge {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230d6efd'%3E%3Cpath d='M7,2H17A2,2 0 0,1 19,4V9H5V4A2,2 0 0,1 7,2M19,19A2,2 0 0,1 17,21V22H15V21H9V22H7V21A2,2 0 0,1 5,19V10H19V19M8,5V7H10V5H8M8,12V15H10V12H8Z'/%3E%3C/svg%3E");
    width: 80px;
    height: 80px;
}

.icon-calendar {
    position: absolute;
    width: 40px;
    height: 40px;
    right: 10px;
    top: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230d6efd'%3E%3Cpath d='M19,19H5V8H19M16,1V3H8V1H6V3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3H18V1M17,12H12V17H17V12Z'/%3E%3C/svg%3E");
}

.icon-edit {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236c757d'%3E%3Cpath d='M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z'/%3E%3C/svg%3E");
}

.icon-food {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e53935'%3E%3Cpath d='M15.5,21L14,8H16.23L15.1,3.46L16.84,3L18.09,8H22L20.5,21H15.5M5,11H10A3,3 0 0,1 13,14H2A3,3 0 0,1 5,11M13,18A3,3 0 0,1 10,21H5A3,3 0 0,1 2,18H13M3,15H8L9.5,16.5L11,15H12A1,1 0 0,1 13,16A1,1 0 0,1 12,17H3A1,1 0 0,1 2,16A1,1 0 0,1 3,15Z'/%3E%3C/svg%3E");
    width: 16px;
    height: 16px;
    margin-right: 5px;
}

.icon-drink {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231e88e5'%3E%3Cpath d='M3,2H21V4H3V2M3,5H21V6H20L14,12V19H10V12L4,6H3V5M21,7V9H18V7H21Z'/%3E%3C/svg%3E");
    width: 16px;
    height: 16px;
    margin-right: 5px;
}

.icon-cart {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23495057'%3E%3Cpath d='M17,18C15.89,18 15,18.89 15,20A2,2 0 0,0 17,22A2,2 0 0,0 19,20C19,18.89 18.1,18 17,18M1,2V4H3L6.6,11.59L5.24,14.04C5.09,14.32 5,14.65 5,15A2,2 0 0,0 7,17H19V15H7.42A0.25,0.25 0 0,1 7.17,14.75C7.17,14.7 7.18,14.66 7.2,14.63L8.1,13H15.55C16.3,13 16.96,12.58 17.3,11.97L20.88,5.5C20.95,5.34 21,5.17 21,5A1,1 0 0,0 20,4H5.21L4.27,2M7,18C5.89,18 5,18.89 5,20A2,2 0 0,0 7,22A2,2 0 0,0 9,20C9,18.89 8.1,18 7,18Z'/%3E%3C/svg%3E");
}