/* =============================================================================
   ALLERGEN NOTICE (allergen-notice.php)
   -----------------------------------------------------------------------------
   Built from the site's own tokens (fs-theme.css): the logo red, charcoal and
   white, Barlow Condensed for the heading, Inter for the text. The food
   line-art is the same drawing the header and footer use.
   ========================================================================== */

html.fs-an-lock,
html.fs-an-lock body { overflow: hidden; }

.fs-an {
    position: fixed;
    inset: 0;
    z-index: 100000;                /* over the customiser (1200) and basket (1250) */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.fs-an[hidden] { display: none !important; }

/* ---- page behind: dark, slightly blurred -------------------------------- */
.fs-an__overlay {
    position: absolute;
    inset: 0;
    background: rgba(18, 16, 15, .64);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity .35s ease;
}
.fs-an.is-open .fs-an__overlay { opacity: 1; }

/* ---- the card ------------------------------------------------------------ */
.fs-an__dialog {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 660px;
    max-height: calc(100vh - 48px);
    max-height: calc(100dvh - 48px);
    overflow: hidden;
    background: var(--surface, #fff);
    border-radius: var(--r-2xl, 28px);
    box-shadow:
        0 40px 90px rgba(18, 16, 15, .38),
        0 12px 28px rgba(18, 16, 15, .22),
        0 0 0 1px rgba(255, 255, 255, .06);
    opacity: 0;
    transform: translateY(14px) scale(.94);
    transition:
        opacity .38s cubic-bezier(.22, .61, .36, 1),
        transform .42s cubic-bezier(.22, .61, .36, 1);
    outline: none;
}
.fs-an.is-open .fs-an__dialog {
    opacity: 1;
    transform: none;
}

/* ---- red band: badge and heading --------------------------------------- */
.fs-an__head {
    position: relative;
    flex: 0 0 auto;
    padding: 34px 32px 28px;
    text-align: center;
    color: #fff;
    background: linear-gradient(140deg, var(--brand-500, #f04e3e) 0%, var(--brand-600, #d93a2a) 58%, var(--brand-700, #b62f22) 100%);
    overflow: hidden;
}
/* the header's food doodles, redrawn in white */
.fs-an__art {
    position: absolute;
    inset: 0;
    background: url('../img/bg-image/line-art-header.webp') center / 520px auto repeat;
    filter: brightness(0) invert(1);
    opacity: .2;
    pointer-events: none;
}
/* a soft light behind the badge */
.fs-an__head::after {
    content: "";
    position: absolute;
    left: 50%; top: 18px;
    width: 220px; height: 220px;
    transform: translateX(-50%);
    background: radial-gradient(closest-side, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0));
    pointer-events: none;
}
/* close button, top-right corner of the red band */
.fs-an__close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1.5px solid rgba(255, 255, 255, .45);
    border-radius: 50%;
    background: rgba(255, 255, 255, .16);
    color: #fff;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease, transform .2s ease, color .2s ease;
}
.fs-an__close:hover {
    background: #fff;
    border-color: #fff;
    color: var(--brand-600, #d93a2a);
    transform: rotate(90deg);
}
.fs-an__close:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .7);
}
.fs-an__close svg { width: 20px; height: 20px; }

.fs-an__icon {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 78px;
    height: 78px;
    border-radius: 50%;
    background: #fff;
    color: var(--brand-500, #f04e3e);
    box-shadow:
        0 12px 26px rgba(18, 16, 15, .22),
        0 0 0 8px rgba(255, 255, 255, .16);
}
.fs-an__icon svg { width: 40px; height: 40px; margin-top: -2px; }
.fs-an__title {
    position: relative;
    z-index: 1;
    margin: 18px 0 0;
    font-family: var(--font-display, "Barlow Condensed", Impact, sans-serif);
    font-size: clamp(2.125rem, 5vw, 2.875rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: .045em;
    color: #fff;
    text-shadow: 0 2px 10px rgba(18, 16, 15, .18);
}

/* ---- the notice ---------------------------------------------------------- */
.fs-an__body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 30px 38px 8px;
    font-family: var(--font-ui, Inter, sans-serif);
    font-size: 17px;
    line-height: 1.7;
    color: var(--ink-body, #57534e);
}
.fs-an__body p { margin: 0 0 18px; }

/* the paragraph that matters most */
.fs-an__callout {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin: 0 0 18px;
    padding: 18px 20px;
    background: var(--brand-50, #fef4f2);
    border: 1px solid var(--brand-200, #fbc9c2);
    border-left: 5px solid var(--brand-500, #f04e3e);
    border-radius: var(--r-lg, 16px);
}
.fs-an__callout p {
    margin: 0;
    color: var(--n-900, #1c1917);
    font-weight: 600;
    font-size: 17.5px;
    line-height: 1.6;
}
.fs-an__callout-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-top: 1px;
    border-radius: 50%;
    background: var(--brand-500, #f04e3e);
    color: #fff;
}
.fs-an__note {
    font-size: 15.5px;
    color: var(--ink-muted, #6b645e);
}

/* ---- confirmation -------------------------------------------------------- */
.fs-an__foot {
    position: relative;
    flex: 0 0 auto;
    display: grid;
    gap: 18px;
    padding: 20px 38px 32px;
    border-top: 1px solid var(--line, #e5e2de);
    background: var(--surface, #fff);
}
/* a corner of the footer's food doodles */
.fs-an__foot::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url('../img/bg-image/line-art-footer.webp') right bottom / 440px auto no-repeat;
    opacity: .55;
    -webkit-mask-image: linear-gradient(to left, #000 10%, transparent 72%);
    mask-image: linear-gradient(to left, #000 10%, transparent 72%);
    pointer-events: none;
}
.fs-an__foot > * { position: relative; }

.fs-an__check {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0;
    cursor: pointer;
    font-family: var(--font-ui, Inter, sans-serif);
    font-size: 16.5px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--ink, #1c1917);
    -webkit-user-select: none;
    user-select: none;
}
/* the real checkbox stays in the page for keyboards and screen readers */
.fs-an__check input {
    position: absolute;
    width: 26px; height: 26px;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}
.fs-an__box {
    position: relative;
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border: 2px solid var(--line-strong, #d4cfca);
    border-radius: 8px;
    background: var(--surface, #fff);
    transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.fs-an__box::after {
    content: "";
    position: absolute;
    left: 7px; top: 2px;
    width: 8px; height: 14px;
    border: solid #fff;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg) scale(0);
    transition: transform .18s cubic-bezier(.22, .61, .36, 1);
}
.fs-an__check:hover .fs-an__box { border-color: var(--brand-500, #f04e3e); }
.fs-an__check input:checked + .fs-an__box {
    background: var(--brand-500, #f04e3e);
    border-color: var(--brand-500, #f04e3e);
}
.fs-an__check input:checked + .fs-an__box::after { transform: rotate(45deg) scale(1); }
.fs-an__check input:focus-visible + .fs-an__box { box-shadow: var(--ring, 0 0 0 3px rgba(240, 78, 62, .32)); }

.fs-an__btn {
    width: 100%;
    min-height: 58px;
    padding: 0 28px;
    border: 0;
    border-radius: var(--r-pill, 999px);
    background: var(--btn-primary, #d93a2a);
    color: #fff;
    font-family: var(--font-display, "Barlow Condensed", Impact, sans-serif);
    font-size: 21px;
    font-weight: 700;
    letter-spacing: .08em;
    cursor: pointer;
    box-shadow: var(--sh-brand, 0 8px 22px rgba(240, 78, 62, .26));
    transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease, color .2s ease;
}
.fs-an__btn:hover:not(:disabled) {
    background: var(--btn-primary-hover, #b62f22);
    box-shadow: 0 12px 28px rgba(240, 78, 62, .34);
    transform: translateY(-1px);
}
.fs-an__btn:active:not(:disabled) { transform: translateY(0); }
.fs-an__btn:focus-visible { outline: none; box-shadow: var(--ring, 0 0 0 3px rgba(240, 78, 62, .32)), var(--sh-brand); }
.fs-an__btn:disabled {
    background: var(--n-300, #d4cfca);
    color: rgba(255, 255, 255, .92);
    box-shadow: none;
    cursor: not-allowed;
}

/* ---- dark theme ---------------------------------------------------------- */
:root[data-theme="dark"] .fs-an__callout {
    background: rgba(240, 78, 62, .12);
    border-color: rgba(240, 78, 62, .34);
    border-left-color: var(--brand-500, #f04e3e);
}
:root[data-theme="dark"] .fs-an__callout p { color: #fff; }
:root[data-theme="dark"] .fs-an__box { background: transparent; }
:root[data-theme="dark"] .fs-an__btn:disabled { background: rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .55); }
:root[data-theme="dark"] .fs-an__foot::before { opacity: .35; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .fs-an__callout {
        background: rgba(240, 78, 62, .12);
        border-color: rgba(240, 78, 62, .34);
        border-left-color: var(--brand-500, #f04e3e);
    }
    :root:not([data-theme="light"]) .fs-an__callout p { color: #fff; }
    :root:not([data-theme="light"]) .fs-an__box { background: transparent; }
    :root:not([data-theme="light"]) .fs-an__btn:disabled { background: rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .55); }
    :root:not([data-theme="light"]) .fs-an__foot::before { opacity: .35; }
}

/* ---- large screens ------------------------------------------------------
   The site is drawn at 80% from 1200px (fs-theme.css), which would shrink the
   notice and its height limit too. Undo that for the height, and let it be
   wider, so it reads as a large notice rather than a small one. */
@media (min-width: 1200px) {
    .fs-an__dialog {
        max-width: 740px;
        max-height: calc((100vh - 48px) / .8);
        max-height: calc((100dvh - 48px) / .8);
    }
}
/* short laptop screens: a little tighter, so it fits without scrolling */
@media (min-width: 768px) and (max-height: 860px) {
    .fs-an__head { padding: 24px 32px 20px; }
    .fs-an__icon { width: 64px; height: 64px; }
    .fs-an__icon svg { width: 34px; height: 34px; }
    .fs-an__title { margin-top: 14px; }
    .fs-an__body { padding: 22px 38px 4px; line-height: 1.62; }
    .fs-an__body p { margin-bottom: 14px; }
    .fs-an__callout { margin-bottom: 14px; padding: 15px 18px; }
    .fs-an__foot { padding: 16px 38px 22px; gap: 14px; }
    .fs-an__btn { min-height: 54px; }
}

/* ---- tablet -------------------------------------------------------------- */
@media (max-width: 767px) {
    .fs-an { padding: 16px; }
    .fs-an__dialog { max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); border-radius: var(--r-xl, 20px); }
    .fs-an__head { padding: 28px 22px 22px; }
    .fs-an__close { top: 10px; right: 10px; width: 38px; height: 38px; }
    .fs-an__close svg { width: 18px; height: 18px; }
    .fs-an__icon { width: 66px; height: 66px; box-shadow: 0 10px 22px rgba(18, 16, 15, .2), 0 0 0 6px rgba(255, 255, 255, .16); }
    .fs-an__icon svg { width: 34px; height: 34px; }
    .fs-an__title { margin-top: 14px; }
    .fs-an__body { padding: 24px 24px 6px; font-size: 16px; line-height: 1.65; }
    .fs-an__callout { padding: 15px 16px; gap: 12px; }
    .fs-an__callout p { font-size: 16px; }
    .fs-an__note { font-size: 14.5px; }
    .fs-an__foot { padding: 18px 24px 24px; gap: 16px; }
    .fs-an__check { font-size: 15.5px; }
    .fs-an__btn { min-height: 54px; font-size: 19px; }
}

/* ---- phones -------------------------------------------------------------- */
@media (max-width: 420px) {
    .fs-an { padding: 12px; }
    .fs-an__dialog { max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); }
    .fs-an__head { padding: 22px 18px 18px; }
    .fs-an__icon { width: 58px; height: 58px; }
    .fs-an__icon svg { width: 30px; height: 30px; }
    .fs-an__title { font-size: 1.875rem; }
    .fs-an__body { padding: 20px 18px 4px; font-size: 15px; }
    .fs-an__body p { margin-bottom: 14px; }
    .fs-an__callout { margin-bottom: 14px; }
    .fs-an__callout p { font-size: 15px; }
    .fs-an__callout-icon { width: 28px; height: 28px; }
    .fs-an__foot { padding: 16px 18px 18px; gap: 14px; }
    .fs-an__check { font-size: 15px; gap: 12px; }
    .fs-an__btn { min-height: 52px; font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
    .fs-an__overlay,
    .fs-an__dialog,
    .fs-an__box,
    .fs-an__box::after,
    .fs-an__btn { transition: none; }
    .fs-an__dialog { transform: none; }
}