html {
    line-height: 1.5;
}

.meal-container-link {
	text-decoration: none;
}

.meal-container {
	background-color: var(--color-primary-100);
    border-radius: 8px;
    box-shadow: 0 0.25rem 0 0 var(--color-card-shadow);
    margin-block-end: 1rem;
    cursor: pointer;
}
.meal-container-disabled {
    cursor: default;
    opacity: .5;
}
.meal-container-inner {
    border-radius: 0 8px 8px 0;
    margin-inline-start: 0.5rem;
    padding: 1rem 0.5rem;
    background-position: right;
    background-size: cover;
	background-color: var(--color-primary-500);
}
.meal-container-breakfast {
	background-image: url("../img/mealordering-breakfast.jpg");
}
.meal-container-lunch {
	background-image: url("../img/mealordering-lunch.jpg");
}
.meal-container-dinner {
	background-image: url("../img/mealordering-dinner.jpg");
}

.meal-text-container {
	display: flex;
}

.meal-text {
	display: flex;
    flex-direction: column;
    margin-inline: 0.5rem;
    inline-size: 50%;
}
.meal-text-name {
	font-size: 1.125rem;
    font-weight: 700;
	line-height: 1.6rem;
}
.meal-text-availability {
	font-size: 1.0625rem;
	line-height: 1.6rem;
}



.meal-ordering-categories-wrapper {
    padding: 1rem 0;
}

.nutrients-container {
    background-color: var(--color-primary-900);
    margin-block-end: 1rem;
    display: inline-block;
    inline-size: 100%;
    padding: 1rem;
}
.nutrients-container-header {
    display: flex;
    justify-content: space-between;
}
.nutrients-container-header button {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;
    background-color: transparent;
    background-image: none;
    border-width: 0;
    border-style: solid;
}
.nutrients-container-title {
    font-size: 1.125rem;
    font-weight: 500;
    margin: 0;
    margin-block-end: 1rem;
}
.nutrition-item-wrapper {
    font-size: .875rem;
    font-weight: 500;
    margin-block-end: 1rem;
}
.nutrition-item {
    display: grid;
    grid-template-areas:
        "label label"
        "bar bar"
        "value value";
    grid-template-columns: 1fr auto;
    gap: 4px;
}
.nutrition-item-label {
}
.nutrition-item-icon {
    color: var(--color-success-background);
    vertical-align: middle;
}
.nutrition-item-icon-warning {
    color: var(--color-error-background);
    vertical-align: middle;
}
.nutrition-item-bar {
    grid-area: bar;
    box-shadow: inset 0 0 0 1px var(--color-primary-700);
    forced-color-adjust: none;
    block-size: 10px;
    border-radius: 5px;
    overflow: hidden;
    background: var(--color-primary-700);
    inline-size: 100%;
}
.nutrition-item-bar-fill {
    block-size: 100%;
    background-color: var(--color-success-background);
}
.nutrition-item-bar-fill-error {
    background-color: var(--color-error-background);
}
.nutrition-item-value {
    text-align: end;
    grid-area: value;
}


.order-from-history-link {    
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--color-primary-300);
    padding: 1.125rem 1.875rem 1.125rem 1.375rem;
    margin-block-end: 1rem;
    font-weight: 500;
    font-size: 1.188rem;
    letter-spacing: .033rem;
    text-decoration: none;
}

.meal-categories-list {
    padding: 0 1rem;
}
.meal-category {
	width: 100%;
    display: inline-block;
}
.meal-category:not(:last-child) {
    margin-bottom: 1rem;
}
.meal-category-card {
    background-color: var(--color-card);
    border-radius: var(--border-radius-card);
    box-shadow: 0 0.25rem 0 0 var(--color-card-shadow);
}
.meal-category-link {
    display: flex;
    padding: 1rem;
    font-size: 1.188rem;
    font-weight: 500;
    line-height: 1.563rem;
    letter-spacing: .033rem;
	text-decoration: none;
}

.meal-categories-nav-container {
    display: flex;
    margin-block: 0 1rem;
    overflow-x: auto;
    scrollbar-width: none;
    inline-size: 100%;
}

.meal-categories-anchor {
    flex-shrink: 0;
}

.meal-categories-nav-button {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    line-height: 1;
    font-weight: 500;
    text-transform: uppercase;
    white-space: nowrap;
    text-align: center;
    -webkit-user-select: none;
    user-select: none;
    border: var(--border-width-button) solid;
    border-radius: var(--border-radius-button);
    box-shadow: 0 1px 4px #00000052;
    cursor: pointer;
    transition-property: background,border-color,box-shadow;
    transition-duration: .15s;

    font-weight: 700;
    font-size: 1rem;
    margin-inline-end: 1rem;

    background-color: var(--color-button-carousel);
    border-color: var(--color-button-carousel-border);
    border-width: 2px;
    color: var(--color-button-carousel-font);
}

.meal-categories-nav-button-selected {
    background-color: var(--color-button-carousel-selected);
    border-color: var(--color-button-carousel-selected-border);
    border-width: 2px;
    color: var(--color-button-carousel-selected-font);
}


.meal-option-list,
.meal-history-list {
    padding: 0 1rem;
    cursor: pointer;
}
.meal-option {
    width: 100%;
    display: inline-block;
}
.meal-option:not(:last-child) {
    margin-bottom: 1rem;
}
.meal-option-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;

    font-size: 1.188rem;
    font-weight: 500;
    line-height: 1.563rem;
    letter-spacing: .033rem;

    background-color: var(--color-card);
    border-radius: var(--border-radius-card);
    padding: 1rem;
    box-shadow: 0 0.25rem 0 0 var(--color-card-shadow);
}
.meal-option-title {
    margin: 0;
    font-size: 1.1875rem;
    margin-block-end: 0.5rem;
    font-weight: 500;
}
.meal-option-tag {
    background-color: var(--color-primary-700);
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: .875rem;
    margin-inline-end: 0.5rem;
}
.meal-option-icon {
    vertical-align: middle;
    display: inline-block;
    flex-shrink: 0;
    margin-left: 0.3rem
}
.meal-cart-link {
    position: fixed;
    inset-inline-end: 1.5rem;
    inset-block-end: 1.5rem;
    display: inline-block;
    inline-size: 4.5rem;
    block-size: 4.5rem;
    border-radius: 50%;
    background-color: var(--color-primary-300);
    box-shadow: 0 0.125rem 4rem 0 var(--color-primary-900);
}
.meal-cart-icon {    
    display: inline-block;
    flex-shrink: 0;

    position: absolute;
    inset-block-start: 1.25rem;
    inset-inline-start: 1.125rem;
}
.meal-cart-link-counter {
    position: absolute;
    inset-block-start: -0.25rem;
    inset-inline-end: 0.125rem;
    display: inline-block;
    inline-size: 1.5rem;
    block-size: 1.5rem;
    border-radius: 50%;
    border: 0.125rem solid var(--color-white);
    background-color: var(--color-success-foreground);
    color: var(--color-white);
    font-size: .875rem;
    text-align: center;
}

.meal-option-details {
    font-size: 0.96rem;
    display: flex;
    gap: 0.5rem;
}

.button-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin-block-end: 1rem;
}