/* ============================================================================
   ALLERGENS — 2026
   ----------------------------------------------------------------------------
   One allergen UI shared by every surface that lists food: the product cards
   on the website, the QR menu cards, the quick-view popup and the product
   page. Two pieces only:

     .alg-btn    a small button that sits on a card and states, at a glance,
                 whether the dish carries any of the 14 common allergens.
     .alg-modal  the panel it opens, naming each one with its own glyph.

   Why a button and not the tooltip this replaced: a `title` attribute never
   opens on a phone, and a menu is read on phones. The information a guest
   with an allergy needs must survive a touch.

   Everything below leans on the --m-* tokens from modern-2026.css, so the
   component re-skins with the active site theme and needs no dark-mode
   branch of its own. Logical properties throughout: the layout mirrors
   itself under RTL without a single [dir] override.
   ========================================================================= */

/* ---------------------------------------------------------------- palette */
.alg-btn,
.alg-modal {
    /* Per-allergen accents. The catalog stores a Bootstrap-ish colour word
       per row (warning / info / danger / success / secondary); these are the
       only five that can arrive, mapped once here onto the site's tokens. */
    --alg-warning: var(--m-warning, #D89B1F);
    --alg-info:    var(--m-info,    #2B7AB8);
    --alg-danger:  var(--m-danger,  #C73E3E);
    --alg-success: var(--m-success, #2D8659);
    --alg-secondary: var(--m-text-mute, #8C7A66);
}

/* ============================================================ 1. THE BUTTON */

.alg-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 1px solid var(--m-line-2, rgba(60, 40, 20, .14));
    border-radius: var(--m-r-pill, 999px);
    background: var(--m-surface, #fff);
    color: var(--m-text-soft, #5C4938);
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.35;
    white-space: nowrap;
    /* On a narrow card the pill must shrink with its column instead of
       spilling over the card edge, so the label truncates rather than the
       button growing past its parent. */
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    cursor: pointer;
    transition: background .2s var(--m-ease, ease), border-color .2s var(--m-ease, ease),
                color .2s var(--m-ease, ease), transform .2s var(--m-ease, ease),
                box-shadow .2s var(--m-ease, ease);
    -webkit-tap-highlight-color: transparent;
}

.alg-btn:hover,
.alg-btn:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .45);
}

.alg-btn:focus-visible {
    outline: 2px solid var(--m-brand, #B8541A);
    outline-offset: 2px;
}

.alg-btn:active { transform: translateY(0); }

.alg-btn__icon {
    display: inline-flex;
    flex-shrink: 0;
    font-size: 10.5px;
}

/* The label is the only part allowed to give way when space runs out. */
.alg-btn > span:not(.alg-btn__icon) {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Dish that declares allergens — amber, the colour of a caution the guest
   should actually stop and read. */
.alg-btn--has {
    border-color: color-mix(in srgb, var(--alg-warning) 38%, transparent);
    background: color-mix(in srgb, var(--alg-warning) 12%, var(--m-surface, #fff));
    color: color-mix(in srgb, var(--alg-warning) 78%, #000);
}
.alg-btn--has:hover,
.alg-btn--has:focus-visible {
    background: color-mix(in srgb, var(--alg-warning) 20%, var(--m-surface, #fff));
    border-color: color-mix(in srgb, var(--alg-warning) 58%, transparent);
}

/* Dish that declares none — stated in green rather than left blank, because
   "no badge" is ambiguous (unknown? or safe?) and this is not a question to
   leave ambiguous. */
.alg-btn--clean {
    border-color: color-mix(in srgb, var(--alg-success) 30%, transparent);
    background: color-mix(in srgb, var(--alg-success) 9%, var(--m-surface, #fff));
    color: color-mix(in srgb, var(--alg-success) 74%, #000);
}
.alg-btn--clean:hover,
.alg-btn--clean:focus-visible {
    background: color-mix(in srgb, var(--alg-success) 16%, var(--m-surface, #fff));
    border-color: color-mix(in srgb, var(--alg-success) 50%, transparent);
}

/* A browser without color-mix() still gets a readable, on-brand button. */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
    .alg-btn--has   { background: rgba(216, 155, 31, .12); border-color: rgba(216, 155, 31, .38); color: #8a6110; }
    .alg-btn--clean { background: rgba(45, 134, 89, .10); border-color: rgba(45, 134, 89, .30); color: #1d6b43; }
}

/* Compact variant for dense card footers — the smallest size that still
   reads at arm's length on a phone. */
.alg-btn--sm { padding: 2px 7px; font-size: 9.5px; gap: 4px; }
.alg-btn--sm .alg-btn__icon { font-size: 9px; }
@media (max-width: 575.98px) {
    .alg-btn--sm { padding: 2px 6px; font-size: 9px; gap: 3px; }
    .alg-btn--sm .alg-btn__icon { font-size: 8.5px; }
}

/* Icon-only chip (the menu cards): a round badge the size of the other
   card notes, the text living in the title/aria-label instead. */
.alg-btn--icon {
    width: 28px;
    height: 28px;
    padding: 0;
    gap: 0;
    justify-content: center;
    border-radius: 50%;
}
.alg-btn--icon .alg-btn__icon { font-size: 12px; }
.alg-btn--icon.alg-btn--sm { width: 24px; height: 24px; }
.alg-btn--icon.alg-btn--sm .alg-btn__icon { font-size: 11px; }

/* Full-width variant for the product page and the quick-view popup. */
.alg-btn--block {
    width: 100%;
    justify-content: center;
    padding: 10px 14px;
    font-size: 13.5px;
    border-radius: var(--m-r, 14px);
}
.alg-btn--block .alg-btn__icon { font-size: 14px; }

/* ============================================================= 2. THE MODAL */

.alg-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;      /* above the sticky cart bar and the mini-cart drawer */
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s var(--m-ease, ease), visibility .25s var(--m-ease, ease);
}

.alg-modal.is-open { opacity: 1; visibility: visible; }

.alg-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(20, 13, 8, .55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
}

.alg-modal__panel {
    position: relative;
    width: min(520px, 100%);
    max-height: min(84vh, 720px);
    display: flex;
    flex-direction: column;
    background: var(--m-surface, #fff);
    color: var(--m-text, #2A1F17);
    border-radius: var(--m-r-xl, 28px) var(--m-r-xl, 28px) 0 0;
    box-shadow: var(--m-shadow-lg, 0 24px 48px -12px rgba(0, 0, 0, .25));
    transform: translateY(16px);
    transition: transform .3s var(--m-ease-out, cubic-bezier(.16, 1, .3, 1));
    overflow: hidden;
}

.alg-modal.is-open .alg-modal__panel { transform: translateY(0); }

/* From tablet up it stops being a phone sheet and becomes a centred dialog. */
@media (min-width: 576px) {
    .alg-modal { align-items: center; padding: 24px; }
    .alg-modal__panel { border-radius: var(--m-r-xl, 28px); transform: translateY(8px) scale(.98); }
    .alg-modal.is-open .alg-modal__panel { transform: translateY(0) scale(1); }
}

/* The grab handle reads as "drag me down" on the phone sheet only. */
.alg-modal__grip {
    width: 42px;
    height: 4px;
    border-radius: 999px;
    background: var(--m-line-2, rgba(60, 40, 20, .14));
    margin: 10px auto 0;
    flex-shrink: 0;
}
@media (min-width: 576px) { .alg-modal__grip { display: none; } }

/* ------------------------------------------------------------------- head */

.alg-modal__head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--m-line, rgba(60, 40, 20, .08));
}

.alg-modal__badge {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    font-size: 17px;
    background: color-mix(in srgb, var(--alg-warning) 15%, transparent);
    color: var(--alg-warning);
}
.alg-modal--clean .alg-modal__badge {
    background: color-mix(in srgb, var(--alg-success) 15%, transparent);
    color: var(--alg-success);
}
@supports not (color: color-mix(in srgb, red 50%, blue)) {
    .alg-modal__badge { background: rgba(216, 155, 31, .15); }
    .alg-modal--clean .alg-modal__badge { background: rgba(45, 134, 89, .15); }
}

.alg-modal__titles { flex: 1; min-width: 0; }

.alg-modal__title {
    margin: 0 0 3px;
    font-size: 16.5px;
    font-weight: 800;
    line-height: 1.3;
    color: var(--m-text, #2A1F17);
}

.alg-modal__dish {
    margin: 0;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--m-text-mute, #8C7A66);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.alg-modal__close {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border: 1px solid var(--m-line, rgba(60, 40, 20, .08));
    border-radius: 50%;
    background: var(--m-surface-2, #FAF6EB);
    color: var(--m-text-soft, #5C4938);
    font-size: 13px;
    cursor: pointer;
    transition: background .2s, color .2s, transform .2s;
}
.alg-modal__close:hover { background: var(--m-danger, #C73E3E); color: #fff; transform: rotate(90deg); }
.alg-modal__close:focus-visible { outline: 2px solid var(--m-brand, #B8541A); outline-offset: 2px; }

/* ------------------------------------------------------------------- body */

.alg-modal__body {
    padding: 16px 20px 20px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.alg-modal__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.alg-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--m-line, rgba(60, 40, 20, .08));
    border-radius: var(--m-r, 14px);
    background: var(--m-surface-2, #FAF6EB);
}

.alg-item__icon {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: color-mix(in srgb, currentColor 14%, transparent);
}
@supports not (color: color-mix(in srgb, red 50%, blue)) {
    .alg-item__icon { background: rgba(0, 0, 0, .05); }
}

.alg-item__name {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--m-text, #2A1F17);
    overflow-wrap: anywhere;
}

/* The catalog colour lands on the row as `data-color`, and the icon tile
   inherits it through currentColor — one rule per colour, not per allergen. */
.alg-item[data-color="warning"]   .alg-item__icon { color: var(--alg-warning); }
.alg-item[data-color="info"]      .alg-item__icon { color: var(--alg-info); }
.alg-item[data-color="danger"]    .alg-item__icon { color: var(--alg-danger); }
.alg-item[data-color="success"]   .alg-item__icon { color: var(--alg-success); }
.alg-item[data-color="secondary"] .alg-item__icon { color: var(--alg-secondary); }

/* The "contains none" state. */
.alg-modal__clean {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border: 1px dashed color-mix(in srgb, var(--alg-success) 40%, transparent);
    border-radius: var(--m-r, 14px);
    background: color-mix(in srgb, var(--alg-success) 7%, transparent);
}
@supports not (color: color-mix(in srgb, red 50%, blue)) {
    .alg-modal__clean { border-color: rgba(45, 134, 89, .4); background: rgba(45, 134, 89, .07); }
}
.alg-modal__clean i { font-size: 22px; color: var(--alg-success); flex-shrink: 0; }
.alg-modal__clean p { margin: 0; font-size: 13px; font-weight: 600; line-height: 1.55; color: var(--m-text-soft, #5C4938); }

/* ------------------------------------------------------------------- foot */

.alg-modal__note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 14px 0 0;
    padding: 11px 13px;
    border-radius: var(--m-r-sm, 10px);
    background: var(--m-bg-2, #F5EFDF);
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.6;
    color: var(--m-text-mute, #8C7A66);
}
.alg-modal__note i { margin-top: 2px; flex-shrink: 0; }

/* Motion is decoration here; the panel must still appear for anyone who has
   asked the OS to stop animating things. */
@media (prefers-reduced-motion: reduce) {
    .alg-modal,
    .alg-modal__panel,
    .alg-btn { transition: none; }
    .alg-modal__panel { transform: none !important; }
}