.myfood-availability-banner {
    position: sticky;
    inset-block-start: 0;
    z-index: 99999;
    box-sizing: border-box;
    width: 100%;
    padding: 0.55rem max(1rem, env(safe-area-inset-right))
        0.55rem max(1rem, env(safe-area-inset-left));
    color: #fff;
    background: #7f1d1d;
    border-block-end: 3px solid #fca5a5;
    box-shadow: 0 3px 12px rgb(0 0 0 / 24%);
    font: 600 1rem/1.45 system-ui, -apple-system, BlinkMacSystemFont,
        "Segoe UI", sans-serif;
    text-align: center;
}

.myfood-availability-banner[hidden] {
    display: none;
}

.myfood-availability-banner__message {
    max-width: 72rem;
    margin: 0 auto;
    color: inherit;
    font: inherit;
}

.myfood-resume-notification-form {
    align-items: center;
    display: flex;
    gap: 0.35rem;
    justify-content: center;
    padding-top: 0.2rem;
    position: relative;
}

.myfood-resume-notification-toggle {
    align-items: center;
    cursor: pointer;
    display: inline-flex;
    font-size: 0.8rem;
    gap: 0.35rem;
    line-height: 1.25;
}

.myfood-resume-notification-toggle input {
    accent-color: #fff;
    height: 1rem;
    margin: 0;
    width: 1rem;
}

.myfood-resume-notification-popup {
    background: #fff;
    border: 1px solid #c3c4c7;
    border-radius: 5px;
    box-shadow: 0 6px 24px rgb(0 0 0 / 30%);
    color: #1d2327;
    display: grid;
    gap: 0.45rem;
    inset-block-start: calc(100% + 0.45rem);
    inset-inline-start: 50%;
    padding: 0.8rem;
    position: absolute;
    text-align: left;
    transform: translateX(-50%);
    width: min(22rem, calc(100vw - 1rem));
    z-index: 100002;
}

.myfood-resume-notification-popup[hidden],
.myfood-resume-notification-complete[hidden] {
    display: none;
}

.myfood-resume-notification-heading {
    padding-inline-end: 1.7rem;
}

.myfood-resume-notification-privacy {
    font-size: 0.78rem;
    font-weight: 400;
    margin: 0;
}

.myfood-resume-notification-popup input[type="email"] {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.35);
    border-radius: 3px;
    color: #1d2327;
    min-height: 34px;
    padding: 0.25rem 0.5rem;
    width: 100%;
}

.myfood-resume-notification-popup button[type="submit"] {
    background: #8f191c;
    border: 1px solid #8f191c;
    border-radius: 3px;
    color: #fff;
    cursor: pointer;
    font-weight: 700;
    min-height: 34px;
    padding: 0.25rem 0.7rem;
}

.myfood-resume-notification-close {
    background: transparent;
    border: 0;
    color: #50575e;
    cursor: pointer;
    font: 700 1.35rem/1 system-ui, sans-serif;
    inset-block-start: 0.35rem;
    inset-inline-end: 0.4rem;
    min-height: 1.8rem;
    min-width: 1.8rem;
    padding: 0;
    position: absolute;
}

.myfood-resume-notification-status {
    color: #b32d2e;
    font-size: 0.78rem;
    font-weight: 600;
    min-height: 0;
}

.myfood-resume-notification-complete {
    font-size: 0.8rem;
}

.myfood-resume-notification-form.is-complete
    .myfood-resume-notification-toggle {
    display: none;
}

body.admin-bar .myfood-availability-banner {
    inset-block-start: 32px;
}

.myfood-ordering-control-disabled,
.myfood-ordering-control-disabled:hover,
.myfood-ordering-control-disabled:focus {
    cursor: not-allowed !important;
    opacity: 0.55 !important;
    filter: grayscale(1);
}

@media screen and (max-width: 782px) {
    body.admin-bar .myfood-availability-banner {
        inset-block-start: 46px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .myfood-availability-banner,
    .myfood-ordering-control-disabled {
        scroll-behavior: auto;
        transition: none;
    }
}