/* /Components/Account/Pages/Login.razor.rz.scp.css */
.login[b-qpcfberv0p] {
    max-width: 420px;
}

/* 16px or more stops iOS Safari zooming in when the field gets focus. */
.login[b-qpcfberv0p]  .form-control {
    font-size: 1rem;
    min-height: 2.75rem;
}
/* /Components/AccountMenu.razor.rz.scp.css */
.account-icon[b-oamx2cgv3d] {
    width: 2rem;
    height: 2rem;
    padding: 0.4rem;
    border-radius: 50%;
    background: #e7f0fa;
    color: #1b6ec2;
}

.account-name[b-oamx2cgv3d] {
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.25rem;
    border-bottom: 1px solid #e9ecef;
    font-size: 0.875rem;
    color: #6c757d;
    overflow-wrap: anywhere;
}
/* /Components/LanguagePicker.razor.rz.scp.css */
.current[b-u181u6r3wd] {
    font-weight: 600;
}

.flag[b-u181u6r3wd] {
    width: 1.5rem;
    height: 1rem;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* Not sticky, so it doesn't cover the detail page's sticky back bar. */
.top-bar[b-7y4rtkl55x] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0 1rem;
    /* Keeps clear of the notch when an iPhone is turned sideways. */
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
    min-height: 3.5rem;
    background: linear-gradient(180deg, #fff 0%, #f5f9fd 100%);
    border-top: 3px solid #1b6ec2;
    border-bottom: 1px solid #e3eaf2;
    box-shadow: 0 1px 6px rgba(21, 90, 159, 0.06);
}

.brand[b-7y4rtkl55x] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-decoration: none;
    color: #1f2d3d;
}

.brand-mark[b-7y4rtkl55x] {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.55rem;
    box-shadow: 0 2px 6px rgba(21, 90, 159, 0.3);
}

.brand-accent[b-7y4rtkl55x] {
    color: #1b6ec2;
}

.top-bar-links[b-7y4rtkl55x] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.content[b-7y4rtkl55x] {
    padding: 1rem;
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
}

@media (min-width: 641px) {
    .top-bar[b-7y4rtkl55x], .content[b-7y4rtkl55x] {
        padding-left: max(2rem, env(safe-area-inset-left));
        padding-right: max(1.5rem, env(safe-area-inset-right));
    }
}

#blazor-error-ui[b-7y4rtkl55x] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem calc(0.7rem + env(safe-area-inset-bottom, 0px)) 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-7y4rtkl55x] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-xoyj06qemq],
.components-reconnect-repeated-attempt-visible[b-xoyj06qemq],
.components-reconnect-failed-visible[b-xoyj06qemq],
.components-pause-visible[b-xoyj06qemq],
.components-resume-failed-visible[b-xoyj06qemq],
.components-rejoining-animation[b-xoyj06qemq] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-xoyj06qemq],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-xoyj06qemq],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-xoyj06qemq],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-xoyj06qemq],
#components-reconnect-modal.components-reconnect-retrying[b-xoyj06qemq],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-xoyj06qemq],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-xoyj06qemq],
#components-reconnect-modal.components-reconnect-failed[b-xoyj06qemq],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-xoyj06qemq] {
    display: block;
}


#components-reconnect-modal[b-xoyj06qemq] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-xoyj06qemq 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-xoyj06qemq 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-xoyj06qemq 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-xoyj06qemq]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-xoyj06qemq 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-xoyj06qemq {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-xoyj06qemq {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-xoyj06qemq {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-xoyj06qemq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-xoyj06qemq] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-xoyj06qemq] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-xoyj06qemq] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-xoyj06qemq] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-xoyj06qemq] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-xoyj06qemq] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-xoyj06qemq 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-xoyj06qemq] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-xoyj06qemq {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/Nutridrink.razor.rz.scp.css */
/* Sized for older eyes: large text, strong borders and dark text throughout. */
.filters[b-y963stj166] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    max-width: 720px;
    margin-bottom: 1.5rem;
}

/* Styled like the filter legends below, so all three sections read the same way. */
.search-label[b-y963stj166] {
    display: block;
    margin: 0 0 0.5rem;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.3;
}

.search-box[b-y963stj166] {
    position: relative;
}

.search-icon[b-y963stj166] {
    position: absolute;
    top: 50%;
    left: 0.9rem;
    width: 1.6rem;
    height: 1.6rem;
    transform: translateY(-50%);
    fill: none;
    stroke: #495057;
    stroke-width: 2.5;
    stroke-linecap: round;
    pointer-events: none;
}

/* The light grey fill sets the field apart from the white chips and cards; it turns white while typing.
   16px or more also stops iOS Safari zooming in when the field gets focus. */
.search[b-y963stj166] {
    min-height: 3.5rem;
    padding-left: 3.25rem;
    border: 2px solid #6c757d;
    border-radius: 0.75rem;
    background-color: #f1f3f5;
    font-size: 1.2rem;
}

.search:focus[b-y963stj166] {
    background-color: #fff;
}

.search[b-y963stj166]::placeholder {
    color: #5c636a;
}

.filter-group[b-y963stj166] {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

/* Overrides Bootstrap's floated, extra-large legend. */
.filter-group legend[b-y963stj166] {
    float: none;
    width: auto;
    margin: 0 0 0.5rem;
    padding: 0;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.3;
}

.chips[b-y963stj166] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

/* 3rem = 48px, comfortably above Apple's 44px minimum touch target. */
.chip[b-y963stj166] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 100%;
    min-height: 3rem;
    padding: 0.25rem 1.1rem;
    border: 2px solid #6c757d;
    border-radius: 999px;
    background: #fff;
    color: #212529;
    font-size: 1.15rem;
    line-height: 1.25;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
}

@media (hover: hover) {
    .chip:hover[b-y963stj166] {
        border-color: #155a9f;
        background: #f1f6fc;
    }
}

.chip:active[b-y963stj166] {
    background: #e7f1fb;
}

.chip:focus-visible[b-y963stj166] {
    outline: none;
    box-shadow: 0 0 0 0.25rem rgba(21, 90, 159, 0.5);
}

/* Solid fill plus a tick: white on #155a9f is about 7:1 contrast. */
.chip.selected[b-y963stj166],
.chip.selected:hover[b-y963stj166] {
    border-color: #155a9f;
    background: #155a9f;
    color: #fff;
    font-weight: 700;
}

/* With large text or zoom, a long label wraps inside the chip instead of pushing it off the screen. */
.chip-label[b-y963stj166] {
    display: inline-grid;
    min-width: 0;
    overflow-wrap: break-word;
}

/* An invisible bold copy of the label, so the chip is already as wide as its bold selected state. */
.chip-label[b-y963stj166]::after {
    content: attr(data-text);
    height: 0;
    overflow: hidden;
    visibility: hidden;
    font-weight: 700;
}

/* A badge on the corner rather than inline, so the tick takes no room and the chip keeps its size. */
.chip-check[b-y963stj166] {
    position: absolute;
    top: -0.45rem;
    left: -0.35rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid #155a9f;
    border-radius: 999px;
    background: #fff;
    color: #155a9f;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1;
}

.chip-icon[b-y963stj166],
.chip-image[b-y963stj166] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 2rem;
    height: 2rem;
    margin-left: -0.5rem;
    border-radius: 999px;
    background: #f1f3f5;
    font-size: 1.2rem;
    line-height: 1;
}

/* Room for two emoji side by side, e.g. chocolate and coffee. */
.chip-icon[b-y963stj166] {
    padding: 0 0.3rem;
}

.chip-image[b-y963stj166] {
    width: 2rem;
    object-fit: contain;
    background: #fff;
}

.chip.selected .chip-icon[b-y963stj166] {
    background: #fff;
}

.result-count[b-y963stj166] {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
    color: #212529;
}

.no-matches p[b-y963stj166] {
    margin-bottom: 0.75rem;
}

.no-matches .btn[b-y963stj166] {
    min-height: 2.75rem;
}

.product[b-y963stj166] {
    margin-bottom: 2rem;
}

/* Keeps the product name in view while scrolling through its flavours. */
.product h2[b-y963stj166] {
    position: sticky;
    top: 0;
    z-index: 2;
    margin: 0 0 0.5rem;
    padding: 0.5rem 0;
    background: #fff;
    font-size: 1.3rem;
}

.bottle-grid[b-y963stj166] {
    display: grid;
    /* Cards are at least 400px wide (full width on phones) and never more than three to a row,
       so notes and rating labels have room on wide screens. The 1.5rem is the two gaps in a row of three. */
    grid-template-columns: repeat(auto-fill, minmax(max(min(100%, 400px), calc((100% - 1.5rem) / 3)), 1fr));
    gap: 0.75rem;
}

.bottle[b-y963stj166] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 5rem;
    padding: 0.5rem 0.75rem 0.5rem 0.5rem;
    /* Same 2px grey edge as the chips (4.7:1), so each card clearly reads as something to tap. */
    border: 2px solid #6c757d;
    border-radius: 0.75rem;
    background: #fff;
    --rating-color: transparent;
    box-shadow: inset 0.35rem 0 0 var(--rating-color);
    -webkit-tap-highlight-color: transparent;
    transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
}

@media (hover: hover) {
    .bottle:hover[b-y963stj166] {
        border-color: #155a9f;
        background: #f1f6fc;
    }
}

.bottle:focus-within[b-y963stj166] {
    border-color: #155a9f;
    box-shadow: inset 0.35rem 0 0 var(--rating-color), 0 0 0 0.25rem rgba(21, 90, 159, 0.5);
}

.bottle:active[b-y963stj166] {
    background: #f1f6fc;
}

/* The picture sets the card's height. A bit smaller on phones to leave room for the text. */
.bottle img[b-y963stj166] {
    width: 110px;
    height: 110px;
    object-fit: contain;
    flex-shrink: 0;
}

@media (min-width: 641px) {
    .bottle img[b-y963stj166] {
        width: 140px;
        height: 140px;
    }
}

.bottle-text[b-y963stj166] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.bottle-link[b-y963stj166] {
    display: flex;
    flex-direction: column;
    color: inherit;
    text-decoration: none;
}

.bottle-link:focus-visible[b-y963stj166] {
    outline: none;
}

.bottle-product[b-y963stj166] {
    font-size: 0.9rem;
    color: #5c636a;
}

.bottle-flavour[b-y963stj166] {
    font-size: 1.1rem;
    font-weight: 600;
}

/* A tinted pill; dark text on the light tint keeps well above 7:1 contrast. */
.bottle-rating[b-y963stj166] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    align-self: flex-start;
    margin-top: 0.3rem;
    padding: 0.15rem 0.65rem 0.15rem 0.45rem;
    border: 1px solid var(--rating-border);
    border-radius: 999px;
    background: var(--rating-tint);
    color: var(--rating-text);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.3;
}

/* A thick left edge coloured by rating, drawn as an inset shadow so it takes no room and the
   content lines up with unrated cards. The face and text carry the same information for colour-blind users. */
.bottle.rated-good[b-y963stj166] {
    --rating-color: #198754;
    --rating-tint: #d1e7dd;
    --rating-border: #a3cfbb;
    --rating-text: #0a3622;
}

/* Darker than Bootstrap's amber so the edge stays visible against white (about 4:1). */
.bottle.rated-mixed[b-y963stj166] {
    --rating-color: #b36b00;
    --rating-tint: #fff3cd;
    --rating-border: #ffe69c;
    --rating-text: #4d3a00;
}

.bottle.rated-bad[b-y963stj166] {
    --rating-color: #dc3545;
    --rating-tint: #f8d7da;
    --rating-border: #f1aeb5;
    --rating-text: #58151c;
}

.heading-count[b-y963stj166] {
    margin-left: 0.25rem;
    font-size: 1.1rem;
    font-weight: 400;
    color: #495057;
}

/* Keeps the line breaks typed in the notes, and wraps long words so they cannot widen the card. */
.bottle-notes[b-y963stj166] {
    margin-top: 0.25rem;
    font-size: 0.9rem;
    color: #5c636a;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

/* Tucked into the lower right corner, below the chevron. Taps go through to the card's link. */
.bottle-emoji[b-y963stj166] {
    position: absolute;
    right: 0.5rem;
    bottom: 0.3rem;
    font-size: 1.1rem;
    line-height: 1;
    letter-spacing: 0.1rem;
    pointer-events: none;
}

/* Keep long notes from running under the emojis. */
.bottle:has(.bottle-emoji) .bottle-notes[b-y963stj166] {
    margin-bottom: 1.1rem;
}

.chevron[b-y963stj166] {
    margin-left: auto;
    padding-left: 0.25rem;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    color: #495057;
}

/* The layout's top bar is sticky from this width, so headings stick below it. */
@media (min-width: 641px) {
    .product h2[b-y963stj166] {
        top: 3.5rem;
    }
}

/* "Saved" notice after rating a drink: pinned to the bottom, where it's in view on a phone and near the thumb.
   The safe-area inset keeps it clear of the iPhone home indicator. */
.toast-region[b-y963stj166] {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    z-index: 1050;
    display: flex;
    justify-content: center;
    padding: 0 1rem;
    pointer-events: none;
}

.saved-toast[b-y963stj166] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    max-width: 480px;
    padding: 0.5rem 0.5rem 0.5rem 1rem;
    border-radius: 0.75rem;
    background: #146c43;
    color: #fff;
    font-size: 1.05rem;
    line-height: 1.3;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.25);
    pointer-events: auto;
    animation: saved-toast-in-b-y963stj166 0.2s ease-out;
}

.saved-toast-check[b-y963stj166] {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: #fff;
    color: #146c43;
    font-weight: 700;
}

.saved-toast-text[b-y963stj166] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* 2.75rem = 44px, Apple's minimum touch target. */
.saved-toast-close[b-y963stj166] {
    flex: none;
    width: 2.75rem;
    height: 2.75rem;
    border: none;
    border-radius: 0.5rem;
    background: transparent;
    color: #fff;
    font-size: 1.75rem;
    line-height: 1;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.saved-toast-close:focus-visible[b-y963stj166] {
    outline: 3px solid #fff;
    outline-offset: -3px;
}

@keyframes saved-toast-in-b-y963stj166 {
    from {
        opacity: 0;
        transform: translateY(1rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .saved-toast[b-y963stj166] {
        animation: none;
    }
}
/* /Components/Pages/NutridrinkDetail.razor.rz.scp.css */
/* On phones the back link stays in reach at the top while scrolling the form and product text. */
.back-bar[b-7n4uugly6j] {
    position: sticky;
    top: 0;
    z-index: 2;
    margin: -0.5rem 0 0.5rem;
    padding: 0.25rem 0;
    background: #fff;
    border-bottom: 1px solid #e9ecef;
}

/* 2.75rem = 44px, Apple's minimum touch target. */
.back-link[b-7n4uugly6j] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 2.75rem;
    padding-right: 0.75rem;
    font-size: 1.05rem;
    font-weight: 600;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

.back-link span[b-7n4uugly6j] {
    font-size: 1.75rem;
    line-height: 1;
}

.detail[b-7n4uugly6j] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem 2rem;
    align-items: flex-start;
}

.bottle-images[b-7n4uugly6j] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    flex: 1 1 280px;
    max-width: 320px;
    margin: 0 auto;
}

.main-image[b-7n4uugly6j] {
    width: 100%;
    max-width: 280px;
    height: 360px;
    object-fit: contain;
}

.thumbnails[b-7n4uugly6j] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
}

.thumbnail[b-7n4uugly6j] {
    display: block;
    padding: calc(0.25rem - 1px);
    border: 2px solid #6c757d;
    border-radius: 0.5rem;
    background: #fff;
    -webkit-tap-highlight-color: transparent;
}

.thumbnail.selected[b-7n4uugly6j] {
    border-color: #155a9f;
    box-shadow: 0 0 0 0.2rem #155a9f;
}

@media (hover: hover) {
    .thumbnail:hover[b-7n4uugly6j] {
        border-color: #155a9f;
    }
}

.thumbnail img[b-7n4uugly6j] {
    display: block;
    width: 56px;
    height: 56px;
    object-fit: contain;
}

.shop-link[b-7n4uugly6j] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 2.75rem;
}

.product-info[b-7n4uugly6j] {
    max-width: 960px;
    margin-top: 2.5rem;
}

.product-info h2[b-7n4uugly6j] {
    font-size: 1.4rem;
}

.product-info h3[b-7n4uugly6j] {
    font-size: 1.1rem;
    margin-top: 1.5rem;
}

.product-info .description[b-7n4uugly6j] {
    font-weight: 600;
}

.facts[b-7n4uugly6j] {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.4rem 1.5rem;
    margin-top: 1.5rem;
}

.facts dt[b-7n4uugly6j] {
    font-weight: 600;
}

.facts dd[b-7n4uugly6j] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin: 0;
    overflow-wrap: anywhere;
}

.tag[b-7n4uugly6j] {
    padding: 0.15rem 0.6rem;
    border-radius: 1rem;
    background: #e9ecef;
    font-size: 0.9rem;
}

.ingredients[b-7n4uugly6j] {
    color: #495057;
}

/* EditForm renders the <form>, so it needs ::deep to be reached by this scoped CSS. */
.detail[b-7n4uugly6j]  .review-form {
    flex: 1 1 320px;
    max-width: 640px;
}

.review-form fieldset legend[b-7n4uugly6j] {
    font-size: 1.1rem;
    font-weight: 600;
}

.review-form .form-label[b-7n4uugly6j] {
    font-weight: 600;
}

/* Bigger hit area for the "No rating" option. */
.review-form .form-check-label[b-7n4uugly6j] {
    padding: 0.5rem 0.25rem;
}

.save-row[b-7n4uugly6j] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
}

/* Three equal tiles, face above text, wide enough to tap easily on a phone. */
.rating-choices[b-7n4uugly6j] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    max-width: 420px;
    margin-bottom: 0.25rem;
}

.rating-choices input[b-7n4uugly6j] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.rating-choices label[b-7n4uugly6j] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    min-height: 5.5rem;
    padding: 0.5rem 0.25rem;
    border: 2px solid #6c757d;
    border-radius: 0.75rem;
    background: #fff;
    font-size: 0.95rem;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
}

/* Unselected faces stay in colour and only slightly softened: fully greyed out they looked disabled.
   The selected tile is marked by its thick coloured edge, tint and bold text instead. */
.rating-face[b-7n4uugly6j] {
    font-size: 2.2rem;
    line-height: 1;
    opacity: 0.8;
    transition: opacity 0.15s;
}

.rating-choices input:checked + label[b-7n4uugly6j] {
    font-weight: 600;
}

.rating-choices input:checked + label .rating-face[b-7n4uugly6j] {
    opacity: 1;
}

.rating-choices input:checked + label.rated-bad[b-7n4uugly6j] {
    border-color: #dc3545;
    background: #fbeaec;
    box-shadow: 0 0 0 2px #dc3545;
}

.rating-choices input:checked + label.rated-mixed[b-7n4uugly6j] {
    border-color: #b36b00;
    background: #fdf3e1;
    box-shadow: 0 0 0 2px #b36b00;
}

.rating-choices input:checked + label.rated-good[b-7n4uugly6j] {
    border-color: #198754;
    background: #e8f3ee;
    box-shadow: 0 0 0 2px #198754;
}

@media (hover: hover) {
    .rating-choices label:hover[b-7n4uugly6j] {
        border-color: #155a9f;
    }
}

.rating-choices input:focus-visible + label[b-7n4uugly6j] {
    outline: 3px solid #155a9f;
    outline-offset: 4px;
}

@media (max-width: 640.98px) {
    /* Smaller picture so the rating form starts closer to the top of the screen. */
    .main-image[b-7n4uugly6j] {
        height: 240px;
    }

    /* Centred to line up with the pictures above; the product text stays left-aligned. */
    h1[b-7n4uugly6j],
    .lead[b-7n4uugly6j],
    .review-form fieldset legend[b-7n4uugly6j],
    .review-form .form-label[b-7n4uugly6j] {
        text-align: center;
    }

    /* Labels are inline by default, so text-align would have no effect on them. */
    .review-form .form-label[b-7n4uugly6j] {
        display: block;
    }

    /* The rating tiles, notes and save button share the full screen width, so their edges line up. */
    .detail[b-7n4uugly6j]  .review-form {
        flex-basis: 100%;
        max-width: none;
    }

    .rating-choices[b-7n4uugly6j] {
        max-width: none;
    }

    /* Bootstrap floats the radio into a left gutter; lay it out inline so the pair can be centred. */
    .review-form .form-check[b-7n4uugly6j] {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.25rem;
        padding-left: 0;
    }

    .review-form .form-check-input[b-7n4uugly6j] {
        float: none;
        margin: 0;
    }

    .save-row[b-7n4uugly6j] {
        justify-content: center;
        text-align: center;
    }

    .save-row .btn[b-7n4uugly6j] {
        width: 100%;
    }

    /* Too narrow for two columns: put each label above its value. */
    .facts[b-7n4uugly6j] {
        grid-template-columns: 1fr;
        gap: 0.15rem;
    }

    .facts dd[b-7n4uugly6j] {
        margin-bottom: 0.6rem;
    }
}

/* The layout's top bar is sticky from this width, so the back link no longer needs to be. */
@media (min-width: 641px) {
    .back-bar[b-7n4uugly6j] {
        position: static;
        margin: 0 0 0.5rem;
        border-bottom: none;
    }
}
/* /Components/Pages/Ratings.razor.rz.scp.css */
.intro[b-b8tn5arxhz] {
    font-size: 1.1rem;
    color: #495057;
}

.people[b-b8tn5arxhz] {
    max-width: 720px;
    margin-bottom: 1rem;
}

.filter-heading[b-b8tn5arxhz] {
    margin: 0 0 0.5rem;
    font-size: 1.2rem;
    font-weight: 700;
}

.chips[b-b8tn5arxhz] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

/* Matches the list page's chips. Always semi-bold, so selecting one doesn't change its width and reflow the row.
   3rem = 48px, comfortably above Apple's 44px minimum touch target. */
.chip[b-b8tn5arxhz] {
    position: relative;
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    min-height: 3rem;
    padding: 0.25rem 1.1rem;
    border: 2px solid #6c757d;
    border-radius: 999px;
    background: #fff;
    color: #212529;
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.25;
    text-decoration: none;
    overflow-wrap: anywhere;
    -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {
    .chip:hover[b-b8tn5arxhz] {
        border-color: #155a9f;
        background: #f1f6fc;
    }
}

.chip:focus-visible[b-b8tn5arxhz] {
    outline: none;
    box-shadow: 0 0 0 0.25rem rgba(21, 90, 159, 0.5);
}

.chip.selected[b-b8tn5arxhz],
.chip.selected:hover[b-b8tn5arxhz] {
    border-color: #155a9f;
    background: #155a9f;
    color: #fff;
}

.chip-check[b-b8tn5arxhz] {
    position: absolute;
    top: -0.45rem;
    left: -0.35rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid #155a9f;
    border-radius: 999px;
    background: #fff;
    color: #155a9f;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1;
}

.result-count[b-b8tn5arxhz] {
    font-size: 1.15rem;
    font-weight: 600;
}

/* One column on phones; side by side once there's room. */
.drink-list[b-b8tn5arxhz] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
    gap: 0.75rem;
    margin: 0 0 1.5rem;
    padding: 0;
    list-style: none;
}

.drink[b-b8tn5arxhz] {
    padding: 0.75rem;
    border: 2px solid #6c757d;
    border-radius: 0.75rem;
    background: #fff;
}

.drink-head[b-b8tn5arxhz] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.drink-head img[b-b8tn5arxhz] {
    width: 64px;
    height: 64px;
    object-fit: contain;
    flex-shrink: 0;
}

.drink-name[b-b8tn5arxhz] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
}

.drink-product[b-b8tn5arxhz] {
    font-size: 0.9rem;
    font-weight: 400;
    color: #5c636a;
}

.drink-flavour[b-b8tn5arxhz] {
    font-size: 1.15rem;
    font-weight: 600;
}

.tallies[b-b8tn5arxhz] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.6rem 0 0;
}

.tally[b-b8tn5arxhz] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.15rem 0.7rem 0.15rem 0.5rem;
    border: 1px solid var(--rating-border);
    border-radius: 999px;
    background: var(--rating-tint);
    color: var(--rating-text);
    font-size: 1.05rem;
    font-weight: 700;
}

/* A zero stays in place so the tallies line up across cards, but steps back. */
.tally.empty[b-b8tn5arxhz] {
    border-color: #dee2e6;
    background: #fff;
    color: #6c757d;
    font-weight: 400;
}

.opinions[b-b8tn5arxhz] {
    margin: 0.6rem 0 0;
    padding: 0;
    list-style: none;
}

.opinions li[b-b8tn5arxhz] {
    padding: 0.5rem 0;
    border-top: 1px solid #e9ecef;
}

.opinion-head[b-b8tn5arxhz] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
}

.person[b-b8tn5arxhz] {
    overflow-wrap: anywhere;
}

.rating-pill[b-b8tn5arxhz] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.1rem 0.6rem 0.1rem 0.45rem;
    border: 1px solid var(--rating-border, #dee2e6);
    border-radius: 999px;
    background: var(--rating-tint, #f8f9fa);
    color: var(--rating-text, #495057);
    font-size: 0.95rem;
    font-weight: 600;
}

.updated[b-b8tn5arxhz] {
    margin-left: auto;
    font-size: 0.85rem;
    color: #6c757d;
}

/* Keeps the line breaks typed in the notes, and wraps long words so they cannot widen the card. */
.notes[b-b8tn5arxhz] {
    margin: 0.3rem 0 0;
    color: #495057;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

/* Same colours as the rated cards on the list page. */
.rated-good[b-b8tn5arxhz] {
    --rating-tint: #d1e7dd;
    --rating-border: #a3cfbb;
    --rating-text: #0a3622;
}

.rated-mixed[b-b8tn5arxhz] {
    --rating-tint: #fff3cd;
    --rating-border: #ffe69c;
    --rating-text: #4d3a00;
}

.rated-bad[b-b8tn5arxhz] {
    --rating-tint: #f8d7da;
    --rating-border: #f1aeb5;
    --rating-text: #58151c;
}

.unrated[b-b8tn5arxhz] {
    max-width: 720px;
    margin-bottom: 2rem;
}

/* Padding rather than flex for a 44px touch target: a flex summary loses its disclosure triangle. */
.unrated summary[b-b8tn5arxhz] {
    padding: 0.6rem 0;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
}

.unrated ul[b-b8tn5arxhz] {
    padding-left: 1.25rem;
    color: #495057;
}
/* /Components/Pages/Users.razor.rz.scp.css */
.card-section[b-e06b2rajn7] {
    max-width: 480px;
    margin-bottom: 2rem;
}

/* 16px or more stops iOS Safari zooming in when the field gets focus. */
.card-section[b-e06b2rajn7]  .form-control,
.user-actions .form-control[b-e06b2rajn7] {
    font-size: 1rem;
    min-height: 2.75rem;
}

.user-list[b-e06b2rajn7] {
    list-style: none;
    padding: 0;
    max-width: 480px;
}

    .user-list li[b-e06b2rajn7] {
        padding: 0.75rem 0;
        border-bottom: 1px solid #e9ecef;
    }

.user-row[b-e06b2rajn7] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    word-break: break-all;
}

.user-actions[b-e06b2rajn7] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

    /* 2.75rem = 44px, Apple's minimum touch target. */
    .user-actions .btn[b-e06b2rajn7] {
        min-height: 2.75rem;
    }