@import '_content/Pentacom.Sail.Common.WebFramework.Blazor/Pentacom.Sail.Common.WebFramework.Blazor.taw98s7l5l.bundle.scp.css';

/* /Components/Dialogs/ModalView.razor.rz.scp.css */
button.btn-close[b-2t1rej19w5] {
  margin-top: -2.5em !important;
  margin-right: -0.5em !important;
  /* padding-top: 0; */
}
/* /Components/Dialogs/OrderDetailItemView.razor.rz.scp.css */
@charset "UTF-8";
/* Header: item image beside the description (ListView + ItemCard; PhotoCard renders a
   hero band above instead, so this row is text-only there). */
.item-detail-head[b-acb0ie5qlc] {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.item-detail-head-image[b-acb0ie5qlc] {
  flex: 0 0 auto;
}

.item-detail-head-text[b-acb0ie5qlc] {
  flex: 1 1 auto;
  min-width: 0;
}

.item-image[b-acb0ie5qlc] {
  width: 125px;
}

.qtyButtonSize[b-acb0ie5qlc] {
  font-size: 1.5em;
  padding: 0px;
}

.qtyTextSize[b-acb0ie5qlc] {
  display: flex;
  align-items: center;
  white-space: nowrap;
  font-size: 1.3em;
}

/* Icon-only stepper: drop MudButton's 64px min-width so both buttons plus the count
   fit the narrow PhotoCard modal on one line. */
.qtyTextSize[b-acb0ie5qlc]  .qty-btn {
  min-width: 0;
  padding: 0 6px;
}

@media (min-width: 992px) {
  .qtyButtonSize[b-acb0ie5qlc] {
    font-size: 2em;
  }
  .qtyTextSize[b-acb0ie5qlc] {
    font-size: 2em;
  }
}
/* Footer: qty stepper on the left, action buttons pushed right. Combo members render
   no stepper, so margin-left:auto keeps the buttons right-aligned on their own. */
.footer-actions[b-acb0ie5qlc] {
  display: flex;
  align-items: center;
  gap: 8px;
}

.footer-buttons[b-acb0ie5qlc] {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin-left: auto;
}

input.specialInstructions[b-acb0ie5qlc] {
  border: solid var(--mud-palette-lines-inputs, #e4e0d8) 1.5px;
  border-radius: 4px;
  background: var(--oo-field-bg, #f6f7f8);
  color: var(--oo-text);
  font-family: "Inter", sans-serif;
  font-style: italic;
  font-weight: 700;
  padding: 20px 16px;
  width: 100%;
}

/* Size group: wrapping grid of selectable buttons — scans and changes easily even with many sizes. */
.size-grid[b-acb0ie5qlc] {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

@media (max-width: 699.98px) {
  .size-grid[b-acb0ie5qlc] {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* The radio itself is hidden — .size-btn is the visible control — but stays in the DOM
   so the native radio group keeps keyboard/screen-reader semantics. */
.size-input[b-acb0ie5qlc] {
  position: absolute;
  clip: rect(0, 0, 0, 0);
  pointer-events: none;
}

.size-btn[b-acb0ie5qlc] {
  border: 1.5px solid var(--mud-palette-lines-inputs, #e4e0d8);
  background: var(--oo-card-surface, #fff);
  border-radius: 8px;
  padding: 9px 8px;
  margin-bottom: 0;
  cursor: pointer;
  text-align: center;
  transition: all 0.12s;
}

.size-btn:hover[b-acb0ie5qlc] {
  border-color: var(--oo-btn-bg, #01497c);
}

.size-input:checked + .size-btn[b-acb0ie5qlc] {
  background: var(--oo-btn-bg, #01497c);
  border-color: var(--oo-btn-bg, #01497c);
  color: var(--oo-btn-text, #fff);
}

.size-name[b-acb0ie5qlc] {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.25;
}

.size-price[b-acb0ie5qlc] {
  display: block;
  font-size: 12px;
  font-weight: 700;
  margin-top: 3px;
}

/* Softer container rounding for the item/modifier modal only (prototype tier). */
[b-acb0ie5qlc] .modal-content {
  border-radius: 16px;
}
/* /Components/Dialogs/UpsellModalView.razor.rz.scp.css */
/* ─────────────────────────────────────────────
   Upsell Modal
   Renders inside the shared <ModalView Size="upsell"> wrapper. Backdrop, z-index, and
   open/close lifecycle live on ModalView; this file only styles the upsell-specific
   content + the custom 400px dialog width. The Title slot is intentionally empty —
   .modal-header is collapsed via CSS so the image band sits flush at the top.
   ──────────────────────────────────────────── */

/* Custom dialog width for the upsell modal. */
[b-om9kk6w8hn] .modal-dialog.modal-upsell {
    max-width: 400px;
}

/* Empty Title slot — collapse the header chrome entirely so the body is flush at top. */
[b-om9kk6w8hn] .modal-upsell .modal-header {
    display: none;
}

[b-om9kk6w8hn] .modal-upsell .modal-body {
    padding: 0;
}

[b-om9kk6w8hn] .modal-upsell .modal-footer {
    border-top: none;
    padding: 0 20px 20px;
    display: block;
}

/* ── Image band ──
   Operator-uploaded photos are zoomed-cropped to fill the band edge-to-edge
   (object-fit: cover). The honey gradient remains as the fallback that shows
   through when ImageUrl 404s and the <img> is removed by the onerror handler. */
.upsell-img-band[b-om9kk6w8hn] {
    position: relative;
    height: 200px;
    overflow: hidden;
    background: linear-gradient(135deg, #fdf3dc, #f5dfa0);
}

.upsell-img[b-om9kk6w8hn] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ── Body ── */
.upsell-body[b-om9kk6w8hn] {
    padding: 18px 20px 0;
}

.upsell-eyebrow[b-om9kk6w8hn] {
    font-size: 0.8em;
    color: #808080;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.upsell-title[b-om9kk6w8hn] {
    font-size: 17px;
    font-weight: 700;
    color: var(--oo-text);
    margin-bottom: 4px;
}

.upsell-desc[b-om9kk6w8hn] {
    font-size: 0.9em;
    color: var(--oo-text-secondary);
    margin-bottom: 16px;
}

.upsell-desc :is(p, ul, ol)[b-om9kk6w8hn] { margin: 0 0 8px 0; }
.upsell-desc :is(p, ul, ol):last-child[b-om9kk6w8hn] { margin-bottom: 0; }

.upsell-price-row[b-om9kk6w8hn] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 16px;
}

.upsell-price[b-om9kk6w8hn] {
    font-size: 22px;
    font-weight: 700;
    color: var(--oo-text);
}

/* ── Action buttons (footer slot) ──
   The flex column stacks them; full-width fill is the one upsell-specific deviation
   from the inline buttons used elsewhere. */
.upsell-actions[b-om9kk6w8hn] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.upsell-actions[b-om9kk6w8hn]  .mud-button-root {
    font-weight: 700;
}

/* Mobile tweak — give the modal more vertical breathing room */
@media (max-width: 480px) {
    [b-om9kk6w8hn] .modal-dialog.modal-upsell { max-width: 100%; }
    .upsell-img-band[b-om9kk6w8hn] { height: 130px; }
}
/* /Components/Layout/Layout.razor.rz.scp.css */
.page-wrapper[b-1rv77nm2pj] {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
/* /Components/Layout/NoStoreLayout.razor.rz.scp.css */
/* Standalone "wrong URL" shell — deliberately literal colors: this renders before any store, and
   therefore any theme, has been resolved. */
.nostore-bar[b-lks3o4sqjg] {
    position: sticky;
    top: 0;
    z-index: 1030;
    background-color: #212529;
    border-bottom: 1px solid rgba(255, 255, 255, .15);
    padding: 8px 0;
}

.nostore-bar-inner[b-lks3o4sqjg] {
    width: 100%;
    padding-inline: 12px;
}

.nostore-content[b-lks3o4sqjg] {
    width: 100%;
    max-width: 1140px;
    margin-inline: auto;
    padding-inline: 12px;
    padding-top: 1.1rem;
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-6tx8cpbcyc],
.components-reconnect-repeated-attempt-visible[b-6tx8cpbcyc],
.components-reconnect-failed-visible[b-6tx8cpbcyc],
.components-pause-visible[b-6tx8cpbcyc],
.components-resume-failed-visible[b-6tx8cpbcyc],
.components-rejoining-animation[b-6tx8cpbcyc] {
    display: none;
}

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


#components-reconnect-modal[b-6tx8cpbcyc] {
    background-color: var(--oo-card-surface);
    color: var(--oo-text);
    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-6tx8cpbcyc 0.5s both;
    &[open]

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

#components-reconnect-modal button[b-6tx8cpbcyc] {
    border: 0;
    background-color: var(--oo-btn-bg);
    color: var(--oo-btn-text);
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-6tx8cpbcyc] {
        background-color: var(--oo-btn-bg-hover);
    }

    #components-reconnect-modal button:active[b-6tx8cpbcyc] {
        background-color: var(--oo-btn-bg);
    }

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

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

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

@keyframes components-rejoining-animation-b-6tx8cpbcyc {
    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/Views/CategoryView.razor.rz.scp.css */
.categoryDescription[b-zjt46p2sgt] {
  margin-top: -13px;
  margin-bottom: 8px;
  font-size: 0.9em;
  color: #696c96;
  text-align: center;
  font-family: "Inter", sans-serif;
}

/* List View menu: two equal columns from 576px up. Grid items stretch, so PluItemView's
   height:100% still equalizes prices across each row. */
.menu-list-grid[b-zjt46p2sgt] {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: 24px;
}

@media (min-width: 576px) {
  .menu-list-grid[b-zjt46p2sgt] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* /Components/Views/CheckoutButtonView.razor.rz.scp.css */
.btn-checkout-wrap[b-jppe1s5p85]  .btn-checkout {
  height: 49px;
  font-weight: 700;
}

.btn-checkout-row[b-jppe1s5p85] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
/* /Components/Views/CheckoutView.razor.rz.scp.css */
@charset "UTF-8";
/* ::deep — MudButton renders its own <button>, which never carries this component's scope
   attribute; the wrapping div does. */
.place-order[b-5xltwlr0e0]  .mud-button-root {
  height: 2.3em;
  margin-top: 1em;
  font-size: 1.4em;
  font-weight: 800;
}

div#map[b-5xltwlr0e0] {
  height: 226px;
  width: 100%;
}

/* /Components/Views/ComboItemView.razor.rz.scp.css */
/* ListView item: full-height flex column so the price/quick-add footer pins to the bottom and
   lines up across the row's two columns (CategoryView's .menu-list-grid stretches its items to
   equal height), matching the card themes. */
.plu-list-item[b-pir7l0h2bo] {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding-bottom: 18px;
}

.plu-list-item > a[b-pir7l0h2bo] {
  display: flex;
  flex-direction: column;
  flex: 1;
  cursor: pointer;
}

.plu-list-body[b-pir7l0h2bo] {
  display: flex;
  column-gap: 24px;
}

.plu-list-desc[b-pir7l0h2bo] {
  flex: 1 1 auto;
  min-width: 0;
}

.plu-list-thumb[b-pir7l0h2bo] {
  flex: 0 0 auto;
  min-width: 125px;
}

.plu-list-footer[b-pir7l0h2bo] {
  margin-top: auto;
  padding-top: 8px;
}

.plu-list-price[b-pir7l0h2bo] {
  font-weight: 700;
}

.outOfStock[b-pir7l0h2bo] {
  color: #ccc;
}

.outOfStock h5[b-pir7l0h2bo] {
  color: #ccc !important;
}

.outOfStock > a[b-pir7l0h2bo] {
  cursor: default !important;
}

.item-image[b-pir7l0h2bo] {
  width: 125px;
}
/* /Components/Views/ForcedModifierView.razor.rz.scp.css */
/* Changes here seemed to need to be made in OrderDetaiLitemView */
.forcedModifier[b-wzpkt6ea7f] {
  margin-bottom: 30px;
}

.innerForcedModifier[b-wzpkt6ea7f] {
  margin-top: -15px;
}

.forcedModifierDepth-1[b-wzpkt6ea7f] {
  margin-left: 25px;
}

.forcedModifierDepth-2[b-wzpkt6ea7f] {
  margin-left: 40px;
}

.forcedModifierDepth-3[b-wzpkt6ea7f] {
  margin-left: 60px;
}

.requirement[b-wzpkt6ea7f] {
  float: right;
  font-size: 0.8em;
  color: #808080;
  text-transform: none;
  margin-top: 4px;
}

/* Modifier options: two columns from 992px up. */
.modifier-grid[b-wzpkt6ea7f] {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: 1.5rem;
}

@media (min-width: 992px) {
  .modifier-grid[b-wzpkt6ea7f] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* Tighter gutters in the card-theme modals so long option names fit beside their dropdowns
   instead of wrapping. */
.menu-theme-cards .modifier-grid[b-wzpkt6ea7f],
.menu-theme-photo .modifier-grid[b-wzpkt6ea7f] {
  column-gap: 0.75rem;
}
/* /Components/Views/FulfillmentSectionView.razor.rz.scp.css */

/* Scheduling block. */
.fulfillment-timing[b-e5lmk528q3] {
  margin-top: 1rem;
}

.fulfillment-toggle[b-e5lmk528q3] {
  display: flex;
  justify-content: center;
}

.fulfillment-closed[b-e5lmk528q3] {
  text-align: center;
}
/* /Components/Views/LoadingView.razor.rz.scp.css */
.centered[b-oxsxu9rogq] {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform: -webkit-translate(-50%, -50%);
  transform: -moz-translate(-50%, -50%);
  transform: -ms-translate(-50%, -50%);
  /* Theme tokens, not the old hardcoded navy: the loading screen is the first thing a customer
     sees, and a fixed color against a dark store background is the white-flash it replaces. */
  color: var(--oo-text, #003975);
}

.loader[b-oxsxu9rogq] {
  color: var(--oo-btn-bg, #003975);
  font-size: 90px;
  text-indent: -9999em;
  overflow: hidden;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  margin: 72px auto;
  position: relative;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load6 1.7s infinite ease, round 1.7s infinite ease;
  animation: load6-b-oxsxu9rogq 1.7s infinite ease, round-b-oxsxu9rogq 1.7s infinite ease;
}

@-webkit-keyframes load6 {
  0% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
  5%, 95% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
  10%, 59% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
  }
  20% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
  }
  38% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
  }
  100% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
}
@keyframes load6-b-oxsxu9rogq {
  0% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
  5%, 95% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
  10%, 59% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
  }
  20% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
  }
  38% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
  }
  100% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
}
@-webkit-keyframes round {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes round-b-oxsxu9rogq {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
/* /Components/Views/MenuView.razor.rz.scp.css */
/* Category drawer's active row. ::deep because MudListItem renders its own markup;
   this component's root <div> is what carries the scope attribute. */
[b-sv0n38zd0o] .drawer-category-selected {
  background-color: var(--mud-palette-primary);
}

[b-sv0n38zd0o] .drawer-category-text-selected {
  color: var(--mud-palette-primary-text);
  font-weight: bold;
}
/* /Components/Views/ModifierPluView.razor.rz.scp.css */
.mod-row[b-o41g312zqu] {
  display: grid;
  grid-template-columns: 10fr 2fr;
  align-items: center;
  column-gap: 1.5rem;
}

.mod-option[b-o41g312zqu] {
  display: flex;
  align-items: center;
  column-gap: 6px;
  min-width: 0;
}

.mod-option[b-o41g312zqu]  .mod-select {
  flex: 0 0 9rem;
  margin-top: 0;
}

.mod-option[b-o41g312zqu]  .mud-checkbox {
  font-size: 14px;
  line-height: 21px;
}

.mod-option[b-o41g312zqu]  .mud-checkbox .mud-button-root {
  padding: 4px;
}

.mod-price[b-o41g312zqu] {
  text-align: right;
}

.outOfStock[b-o41g312zqu] {
  color: #ccc;
  pointer-events: none;
}

/* Card-theme modals are narrower: tighter gutters, and dropdown rows reclaim the price column
   (a dropdown option never renders a price there). */
.menu-theme-cards .mod-row[b-o41g312zqu],
.menu-theme-photo .mod-row[b-o41g312zqu] {
  column-gap: 0.75rem;
}

.menu-theme-cards .mod-row-dropdown[b-o41g312zqu],
.menu-theme-photo .mod-row-dropdown[b-o41g312zqu] {
  grid-template-columns: minmax(0, 1fr);
}

.menu-theme-cards .mod-row-dropdown .mod-price[b-o41g312zqu],
.menu-theme-photo .mod-row-dropdown .mod-price[b-o41g312zqu] {
  display: none;
}
/* /Components/Views/OrderCompleted.razor.rz.scp.css */
div#map[b-u5ff6t4ra5] {
  height: 400px;
  width: 100%;
}

/* Closing "back to the merchant's site" band. Reads as the end of the flow, so it sits on the raised
   surface rather than a plain card and centers on its own row. */
.completed-return[b-u5ff6t4ra5] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: var(--oo-surface-alt);
  border: 1px solid var(--mud-palette-lines-default);
  border-radius: calc(var(--oo-radius) + 4px);
  padding: 20px 24px;
  margin: 8px 0 24px;
  text-align: center;
}

.completed-return-text[b-u5ff6t4ra5] {
  color: var(--oo-text-secondary);
}
/* /Components/Views/OrderHistoryView.razor.rz.scp.css */
/* Logged-out banner */
.order-history-banner[b-uim87qmrqi] {
    background-color: color-mix(in srgb, var(--mud-palette-appbar-background) 80%, transparent);
    border-radius: 8px;
    padding: 12px 20px;
    margin-bottom: 16px;
}

.banner-content[b-uim87qmrqi] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.banner-title[b-uim87qmrqi] {
    color: var(--mud-palette-appbar-text);
    font-weight: 700;
    font-size: 0.95em;
}

.banner-subtitle[b-uim87qmrqi] {
    color: var(--mud-palette-appbar-text);
    opacity: 0.9;
    font-size: 0.84em;
}

.btn-sign-in[b-uim87qmrqi] {
    background: transparent;
    border: 1px solid var(--mud-palette-appbar-text);
    color: var(--mud-palette-appbar-text);
    border-radius: 6px;
    padding: 6px 16px;
    font-size: 0.8em;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    opacity: 0.8;
    font-family: inherit;
}

.btn-sign-in:hover[b-uim87qmrqi] {
    opacity: 1;
}

/* Logged-in accordion */
.order-history-accordion[b-uim87qmrqi] {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    margin-bottom: 16px;
    overflow: hidden;
}

.accordion-header[b-uim87qmrqi] {
    background-color: color-mix(in srgb, var(--mud-palette-appbar-background) 80%, transparent);
    padding: 12px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-title[b-uim87qmrqi] {
    color: var(--mud-palette-appbar-text);
    font-weight: 700;
    font-size: 0.95em;
}

.header-subtitle[b-uim87qmrqi] {
    color: var(--mud-palette-appbar-text);
    opacity: 0.7;
    font-size: 0.8em;
}

.favorites-badge[b-uim87qmrqi] {
    background: rgba(255, 255, 255, 0.15);
    color: var(--mud-palette-appbar-text);
    border-radius: 16px;
    padding: 5px 14px;
    font-size: 0.75em;
    font-weight: 600;
    white-space: nowrap;
}

/* Accordion sections */
.accordion-section[b-uim87qmrqi] {
    border-top: 1px solid var(--mud-palette-lines-default);
}

.section-header[b-uim87qmrqi] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    cursor: pointer;
    background: var(--oo-surface-alt);
}

.section-header:hover[b-uim87qmrqi] {
    background: var(--oo-row-hover);
}

.section-title[b-uim87qmrqi] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85em;
    color: var(--oo-text);
}

.section-desc[b-uim87qmrqi] {
    font-weight: 400;
    color: var(--oo-text-secondary);
}

.section-content[b-uim87qmrqi] {
    padding: 8px 20px 16px;
}
/* /Components/Views/OrderSummaryView.razor.rz.scp.css */
@charset "UTF-8";
/* Cart rows. The negative side margins bleed the row borders out to the card edge while the
   per-cell padding keeps the text inset. site.css also targets .row-outline for the cart-card
   variant — keep the class name. */
.row-outline[b-qyfysc4fl4] {
  border: solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12)) 1px;
  margin: 0 -0.75rem -1px;
  padding: 10px 0px 8px 0px;
}

.row-outline > *[b-qyfysc4fl4] {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.cart-line[b-qyfysc4fl4] {
  display: flex;
  flex-wrap: wrap;
}

.cart-line-name[b-qyfysc4fl4] {
  flex: 1 0 0%;
}

.cart-line-qty[b-qyfysc4fl4] {
  flex: 0 0 auto;
}

/* Cart-card variant (#3432): the blocks sitting directly in the card body drop the bleed, and the
   last one drops its bottom border against the card edge. */
.sidebar-section-cart .sidebar-section-body > .row-outline[b-qyfysc4fl4] {
  margin-left: 0;
  margin-right: 0;
}

.sidebar-section-cart .sidebar-section-body > .row-outline:last-child[b-qyfysc4fl4] {
  border-bottom: none;
}

.orderSummary[b-qyfysc4fl4] {
  font-weight: 600;
}

/* Desktop sticky sidebar only (#3432): the cart line-item list grows with flex and scrolls internally
   so a long cart no longer pushes the totals + checkout button below the fold. Activates only inside the
   sidebar's flex-column panel capped to the viewport (MenuView's MudPaper) — min-height:0 lets the flex
   item shrink below content height so overflow engages; inert without that capped flex parent.
   The scroll box is stretched out to the row/combo "bleed" line (negative side margins) and the inner
   rows drop their own bleed, so the cart borders — including the combo's accent outline — land inside
   the clip box instead of being shaved off by overflow-x. overflow-y:auto keeps the vertical scrollbar
   hidden until the cart is actually long enough to overflow (no reserved gutter lane). */
.orderSummary-scroll[b-qyfysc4fl4] {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  /* overflow-y:auto makes the x-axis compute to auto too (CSS spec) — pin it off so the row/combo
     boxes (which now exactly fill this container) can't surface a horizontal scrollbar. */
  overflow-x: hidden;
  margin-left: -0.75rem;
  margin-right: -0.75rem;
}

/* Inside the scroll box the rows and combo no longer bleed past the edge (the box itself now reaches
   the bleed line), so their borders stay within the clip region and render in full. */
.orderSummary-scroll .row-outline[b-qyfysc4fl4],
.orderSummary-scroll .combo-group[b-qyfysc4fl4] {
  margin-left: 0;
  margin-right: 0;
}

/* The rows' -1px border-collapse hangover: the box's auto height includes the last child's negative
   bottom margin but scrollHeight uses its real bottom edge, leaving a permanent 1px overflow that
   trips overflow-y:auto's scrollbar even for a two-item cart. Zero it on the last child — there is
   no following row inside the clip box to collapse a border with. */
.orderSummary-scroll > :last-child[b-qyfysc4fl4] {
  margin-bottom: 0;
}

.summary-line[b-qyfysc4fl4] {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
}

.rewards-line[b-qyfysc4fl4] {
  display: grid;
  grid-template-columns: 5fr 4fr 3fr;
}

.rewards-line > :last-child[b-qyfysc4fl4] {
  text-align: right;
}

.highlight[b-qyfysc4fl4] {
  color: var(--oo-section-title, #677bc1);
}

.subtext[b-qyfysc4fl4] {
  font-size: 0.8em;
  color: #a5a5a5;
  font-weight: 600;
  text-transform: uppercase;
}

.subtotal[b-qyfysc4fl4] {
  font-size: 1em;
}

.total[b-qyfysc4fl4] {
  font-size: 1.2em;
  font-weight: bold;
  color: var(--oo-text);
}

.quantity[b-qyfysc4fl4] {
  color: var(--oo-text);
  font-weight: bold;
  font-size: 1.1em;
  margin-top: -1px;
}

.price[b-qyfysc4fl4] {
  font-size: 0.85em;
  margin-top: 2px;
  margin-right: 2px;
}

/* Fixed-width price column so the quantity steppers line up regardless of price length (#3358).
   min-width:0 defeats the flex auto-minimum — without it the cell padding + the price text
   make the box's min-content wider than the basis, so it still grows with price length. */
.cart-price[b-qyfysc4fl4] {
  flex: 0 0 5rem;
  min-width: 0;
  text-align: right;
}

/* Unavailable line-through: site.css covers .quantity/.price globally; the name cell is scoped here. */
.cart-line-unavailable .cart-line-name[b-qyfysc4fl4] {
  text-decoration: line-through;
  opacity: 0.55;
}

a:hover > .row-outline[b-qyfysc4fl4] {
  background: var(--oo-row-hover);
}

.emptyCart[b-qyfysc4fl4] {
  text-align: center;
  height: 318px;
  color: #ababab;
  font-size: 1.1em;
  text-transform: uppercase;
  font-weight: bold;
}

/* A combo renders as one bordered collection box — the header + its member rows inside a single accent
   outline, not a border per row. The wrapper is a real block (not display:contents) so it can carry the
   outline; it matches the cart row's horizontal bleed so the box lines up with the standalone cart rows,
   and collapses 1px into the row below like .row-outline does. z-index lifts the accent border above the
   neighbours' collapsed grey borders so all four edges show. */
.combo-group[b-qyfysc4fl4] {
  position: relative;
  z-index: 1;
  border: solid var(--oo-combo-accent) 1px;
  margin: 0 -0.75rem -1px;
  background: var(--oo-combo-surface);
}

/* Inner rows sit inside the box: no own border/tint (the box provides both) and no bleed margin (the
   box already carries it). The header keeps the darker tint; members get a light internal divider so
   they stay separable within the collection. */
.combo-group .row-outline[b-qyfysc4fl4] {
  border: none;
  margin: 0;
  background: transparent;
}

.combo-group .row-outline.combo-header[b-qyfysc4fl4] {
  background: var(--oo-combo-header);
}

.combo-group a .row-outline[b-qyfysc4fl4] {
  border-top: solid var(--oo-combo-divider) 1px;
}

.combo-group-name[b-qyfysc4fl4] {
  color: var(--oo-combo-accent);
  font-weight: 700;
  text-decoration: none;
}

/* The whole combo header is the modify affordance (tap anywhere to re-walk the combo's prompts), so it
   wraps the header row like a standalone cart line's anchor. cursor:pointer is the only affordance.
   Re-neutralize link color + underline so the header — name AND price — reads as plain cart text, then
   suppress the member-divider border-top .combo-group a .row-outline adds (the header is the box's top
   row, not a member). */
.combo-header-link[b-qyfysc4fl4],
.combo-header-link:hover[b-qyfysc4fl4] {
  color: inherit;
  text-decoration: none;
}

.combo-header-link[b-qyfysc4fl4] {
  display: block;
  cursor: pointer;
}

.combo-group a.combo-header-link .row-outline[b-qyfysc4fl4] {
  border-top: none;
}

/* The combo total on the header reads as the group's price — bold to stand apart from member lines. */
.combo-header .combo-total[b-qyfysc4fl4] {
  font-weight: 700;
}
/* /Components/Views/PastOrderCard.razor.rz.scp.css */
.past-order-card[b-55fxmhnwk1] {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 9px;
    padding: 0;
    background: var(--oo-card-surface, #fff);
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.card-header[b-55fxmhnwk1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--oo-surface-alt);
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.header-left[b-55fxmhnwk1] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.order-date[b-55fxmhnwk1],
.order-type[b-55fxmhnwk1] {
    font-size: 0.65em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: var(--oo-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.order-total[b-55fxmhnwk1] {
    font-size: 0.8em;
    font-weight: 700;
    color: var(--oo-text);
}

.card-items[b-55fxmhnwk1] {
    flex: 1;
    padding: 8px 12px;
}

.line-item[b-55fxmhnwk1] {
    padding: 4px 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.line-item:last-of-type[b-55fxmhnwk1] {
    border-bottom: none;
}

.line-item-top[b-55fxmhnwk1] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 6px;
}

.item-name[b-55fxmhnwk1] {
    font-size: 0.8em;
    font-weight: 500;
    color: var(--oo-text);
}

.item-price[b-55fxmhnwk1] {
    font-size: 0.7em;
    font-weight: 700;
    color: var(--oo-text);
    flex-shrink: 0;
}

.item-mods .size-label[b-55fxmhnwk1] {
    font-weight: 600;
    color: var(--oo-text);
}

.item-mods[b-55fxmhnwk1] {
    font-size: 0.65em;
    color: var(--oo-text-secondary);
    margin-top: 1px;
    line-height: 1.4;
}

.item-mods.truncated[b-55fxmhnwk1] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mod-toggle[b-55fxmhnwk1] {
    background: none;
    border: none;
    font-family: inherit;
    font-size: 0.6em;
    font-weight: 700;
    color: var(--mud-palette-primary);
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-top: 1px;
}

.item-notes[b-55fxmhnwk1] {
    font-size: 0.65em;
    color: var(--oo-info);
    font-style: italic;
    margin-top: 2px;
    line-height: 1.4;
}

.item-status[b-55fxmhnwk1] {
    font-size: 0.6em;
    font-weight: 700;
    margin-top: 2px;
    letter-spacing: 0.3px;
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.item-status-sublabel[b-55fxmhnwk1] {
    font-size: 1.15em;
    font-weight: 400;
    opacity: 0.85;
    letter-spacing: 0;
}

.status-oos[b-55fxmhnwk1] {
    color: var(--oo-danger);
}

.status-time[b-55fxmhnwk1] {
    color: var(--oo-info);
}

.status-nla[b-55fxmhnwk1] {
    color: var(--oo-warning);
}

.status-changed[b-55fxmhnwk1] {
    color: var(--oo-warning);
}

/* Unavailable items */
.unavailable-item .item-name[b-55fxmhnwk1],
.unavailable-item .item-mods[b-55fxmhnwk1] {
    text-decoration: line-through;
    color: var(--oo-text-secondary);
}

.unavailable-item .item-price[b-55fxmhnwk1] {
    color: var(--oo-text-secondary);
}

/* Expand button for 4+ items */
.card-expand-btn[b-55fxmhnwk1] {
    width: 100%;
    margin-top: 4px;
    padding: 5px 8px;
    background: none;
    border: 1.5px dashed var(--mud-palette-lines-default);
    color: var(--oo-text-secondary);
    font-family: inherit;
    font-size: 0.65em;
    font-weight: 600;
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.card-expand-btn:hover[b-55fxmhnwk1] {
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary);
    background: var(--oo-surface-alt);
}

.card-footer[b-55fxmhnwk1] {
    padding: 8px 12px 12px;
}

.btn-reorder[b-55fxmhnwk1] {
    background-color: var(--mud-palette-primary);
    color: var(--oo-btn-text);
    border: none;
    border-radius: 6px;
    padding: 8px;
    font-family: inherit;
    font-size: 0.8em;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
}

.btn-reorder:hover:not(:disabled)[b-55fxmhnwk1] {
    opacity: 0.9;
}

.btn-reorder:disabled[b-55fxmhnwk1] {
    opacity: 0.5;
    cursor: not-allowed;
}
/* /Components/Views/PastOrdersSection.razor.rz.scp.css */
.past-orders-grid[b-srnjt15gjr] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    padding: 8px 0 4px;
}

/* Collapse: hide rows past the first. Same trick as .reorder-grid. */
.past-orders-grid.collapsed[b-srnjt15gjr] {
    grid-template-rows: auto;
    grid-auto-rows: 0;
    row-gap: 0;
    padding-bottom: 0;
    overflow: hidden;
}

@media (max-width: 600px) {
    .past-orders-grid[b-srnjt15gjr] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.past-order-skeleton[b-srnjt15gjr] {
    min-width: 0;
}

.show-more[b-srnjt15gjr] {
    text-align: center;
    padding: 8px 0;
}

.show-more a[b-srnjt15gjr] {
    font-size: 0.85em;
    color: var(--mud-palette-primary);
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.show-more a:hover[b-srnjt15gjr] {
    text-decoration: underline;
}

.empty-state[b-srnjt15gjr] {
    text-align: center;
    padding: 24px;
    color: var(--oo-text-secondary);
    font-size: 0.9em;
}
/* /Components/Views/PluItemView.razor.rz.scp.css */
/* ListView item: full-height flex column so the price/quick-add footer pins to the bottom and
   lines up across the row's two columns (CategoryView's .menu-list-grid stretches its items to
   equal height), matching the card themes. */
.plu-list-item[b-ex2n85jxu0] {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding-bottom: 18px;
}

.plu-list-item > a[b-ex2n85jxu0] {
  display: flex;
  flex-direction: column;
  flex: 1;
  cursor: pointer;
}

.plu-list-body[b-ex2n85jxu0] {
  display: flex;
  column-gap: 24px;
}

.plu-list-desc[b-ex2n85jxu0] {
  flex: 1 1 auto;
  min-width: 0;
}

.plu-list-thumb[b-ex2n85jxu0] {
  flex: 0 0 auto;
  min-width: 125px;
}

.plu-list-footer[b-ex2n85jxu0] {
  margin-top: auto;
  padding-top: 8px;
}

.plu-list-price[b-ex2n85jxu0] {
  font-weight: 700;
}

.outOfStock[b-ex2n85jxu0] {
  color: #ccc;
}

.outOfStock h5[b-ex2n85jxu0] {
  color: #ccc !important;
}

.outOfStock > a[b-ex2n85jxu0] {
  cursor: default !important;
}

.item-image[b-ex2n85jxu0] {
  width: 125px;
}
/* /Components/Views/QuantityStepper.razor.rz.scp.css */
/* Inline cart quantity stepper (#3358) */
.cart-qty[b-xjue26xy3a] {
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.cart-qty-btn[b-xjue26xy3a] {
  padding: 0;
  border: none;
  background: none;
  line-height: 1;
  color: var(--oo-btn-bg, #01497c);
  font-family: inherit;
  font-size: 1.3em;
  cursor: pointer;
}

.cart-qty-btn:disabled[b-xjue26xy3a] {
  opacity: .4;
  cursor: default;
}

/* Invisible placeholders that hold the +/- buttons' width in static mode so the number stays aligned
   with the interactive stepper's number. visibility:hidden keeps layout; the glyph guarantees an exact
   width match. */
.cart-qty-btn-spacer[b-xjue26xy3a] {
  visibility: hidden;
}

.cart-qty-num[b-xjue26xy3a] {
  font-size: .85em;
  width: 1.75rem;
  text-align: center;
}
/* /Components/Views/QuickAddControl.razor.rz.scp.css */
/* Quick Add / inline quantity control (#3394). Both states are a rounded "pill" in the store's
   primary color with the button-text color on it — deliberately its own look, distinct from the cart's plain
   QuantityStepper (per prototype). */

/* Zero state — price + "+" combined into one clickable pill. */
.qa-pill[b-hzwmzhhipa] {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: var(--mud-palette-primary);
    border: none;
    cursor: pointer;
    border-radius: 999px;
    padding: 5px 6px 5px 13px;
    transition: background 0.15s;
}

.qa-pill:hover[b-hzwmzhhipa] {
    background: var(--mud-palette-primary-darken);
}

.qa-pill:disabled[b-hzwmzhhipa] {
    opacity: 0.5;
    cursor: default;
}

.qa-price[b-hzwmzhhipa] {
    color: var(--oo-btn-text);
    font-size: 13px;
    font-weight: 700;
}

.qa-pill-plus[b-hzwmzhhipa] {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    flex-shrink: 0;
    background: color-mix(in srgb, var(--oo-btn-text) 22%, transparent);
    color: var(--oo-btn-text);
    font-size: 0.7em;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* In-cart state — matching pill holding the − qty + stepper. */
.qa-stepper[b-hzwmzhhipa] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: var(--mud-palette-primary);
    border-radius: 999px;
    padding: 3px;
    animation: qaPop-b-hzwmzhhipa 0.22s ease;
}

.qa-step[b-hzwmzhhipa] {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    padding: 0;
    background: color-mix(in srgb, var(--oo-btn-text) 20%, transparent);
    color: var(--oo-btn-text);
    font-size: 0.68em;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}

.qa-step:hover[b-hzwmzhhipa] {
    background: color-mix(in srgb, var(--oo-btn-text) 36%, transparent);
}

.qa-step:disabled[b-hzwmzhhipa] {
    opacity: 0.5;
    cursor: default;
}

.qa-qty[b-hzwmzhhipa] {
    color: var(--oo-btn-text);
    font-weight: 700;
    font-size: 12px;
    min-width: 16px;
    text-align: center;
}

@keyframes qaPop-b-hzwmzhhipa {
    0% { transform: scale(0.85); }
    55% { transform: scale(1.06); }
    100% { transform: scale(1); }
}
/* /Components/Views/QuickReorderCard.razor.rz.scp.css */
.quick-reorder-card[b-8a5h2a1eig] {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 9px;
    padding: 10px 11px;
    /* Deliberately a shade off the plain card — these tiles sit inside the history panel and read as
       a group. --oo-surface-alt keeps that separation on a dark theme, where the old off-white didn't. */
    background: var(--oo-surface-alt);
    display: flex;
    flex-direction: column;
    height: 100%;
    min-width: 0;
    overflow: hidden;
    word-break: break-word;
}

.quick-reorder-card.unavailable[b-8a5h2a1eig] {
    opacity: 0.6;
}

.card-content[b-8a5h2a1eig] {
    flex: 1;
    margin-bottom: 6px;
}

.card-name[b-8a5h2a1eig] {
    font-weight: 600;
    font-size: 0.9em;
    color: var(--oo-text);
    margin-bottom: 2px;
}

.card-mods .size-label[b-8a5h2a1eig] {
    font-weight: 600;
    color: var(--oo-text);
}

.card-price[b-8a5h2a1eig] {
    font-weight: 600;
    font-size: 0.85em;
    color: var(--oo-text);
    margin-bottom: 2px;
}

.card-mods[b-8a5h2a1eig] {
    font-size: 0.7em;
    color: var(--oo-text-secondary);
    line-height: 1.4;
    margin-top: 1px;
}

.card-mods.truncated[b-8a5h2a1eig] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mod-toggle[b-8a5h2a1eig] {
    background: none;
    border: none;
    font-family: inherit;
    font-size: 0.6em;
    font-weight: 700;
    color: var(--mud-palette-primary);
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-top: 1px;
}


.card-notes[b-8a5h2a1eig] {
    font-size: 0.7em;
    color: var(--oo-info);
    font-style: italic;
    margin-top: 2px;
    line-height: 1.5;
}

.card-count[b-8a5h2a1eig] {
    font-size: 0.75em;
    color: var(--oo-text-secondary);
}

.card-action[b-8a5h2a1eig] {
    margin-top: auto;
}

.btn-add[b-8a5h2a1eig] {
    background-color: var(--mud-palette-primary);
    color: var(--oo-btn-text);
    border: none;
    border-radius: 4px;
    padding: 6px 16px;
    font-family: inherit;
    font-size: 0.8em;
    font-weight: 600;
    cursor: pointer;
}

.btn-add:hover[b-8a5h2a1eig] {
    opacity: 0.9;
}

.status-label[b-8a5h2a1eig] {
    font-size: 0.75em;
    font-weight: 500;
}

.out-of-stock[b-8a5h2a1eig] {
    color: var(--oo-danger);
}

.currently-unavailable[b-8a5h2a1eig] {
    color: var(--oo-info);
}

.no-longer-available[b-8a5h2a1eig] {
    color: var(--oo-warning);
}

.options-changed[b-8a5h2a1eig] {
    color: var(--oo-warning);
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.status-sublabel[b-8a5h2a1eig] {
    font-size: 0.85em;
    font-weight: 400;
    opacity: 0.85;
}
/* /Components/Views/QuickReorderSection.razor.rz.scp.css */
.reorder-grid[b-eyiccb8mge] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    padding: 8px 0;
}

@media (max-width: 600px) {
    .reorder-grid[b-eyiccb8mge] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.reorder-grid.collapsed[b-eyiccb8mge] {
    grid-template-rows: auto;
    grid-auto-rows: 0;
    row-gap: 0;
    padding-bottom: 0;
    overflow: hidden;
}

.show-more[b-eyiccb8mge] {
    text-align: center;
    padding: 8px 0;
}

.show-more a[b-eyiccb8mge] {
    font-size: 0.85em;
    color: var(--mud-palette-primary);
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.show-more a:hover[b-eyiccb8mge] {
    text-decoration: underline;
}

.empty-state[b-eyiccb8mge] {
    text-align: center;
    padding: 24px;
    color: var(--oo-text-secondary);
    font-size: 0.9em;
}
/* /Shared/MainLayout.razor.rz.scp.css */