/*
    Order-page nav shim — the small set of legacy classes the ported <nav> markup depends
    on that neither Bootstrap 5 nor the ported order CSS units supply.

    ⚠️ READ THIS BEFORE ADDING A RULE. Bootstrap **is** loaded, app-wide: App.razor:12
    links lib/bootstrap/dist/css/bootstrap.min.css (v5.3.3). So `.navbar`, `.fixed-top`,
    `.row`, `.container-fluid`, `.col-auto`, `.text-nowrap`, `.p-0` and the whole `.d-*-*`
    display-utility family — including `.d-md-none` — already resolve on this page. Only
    the classes below are genuinely missing, and only because they are Bootstrap **4**
    names that v5 renamed or dropped, or because they come from the legacy site-wide
    stylesheet that OrderLegacyStyles.razor deliberately does not port.

    This file is loaded from OrderLegacyStyles.razor, i.e. via the order page's single
    <HeadContent>, so it applies to the order page only. It does not touch homepage.css
    and it defines no new design — every value is copied from the legacy source named
    beside it.
*/

/*
    Bootstrap 4's `.no-gutters` (legacy's Bootstrap). Renamed to `.g-0` in Bootstrap 5, so
    the class is inert here today — which means every `.row no-gutters` in the ported
    markup currently keeps `.row`'s negative side margins and its children keep the
    gutter padding.

    ⚠️ This is a PRE-EXISTING layout drift that this file incidentally corrects, not
    something introduced by the nav port. Three elements already shipped carrying
    `row no-gutters`: `.mainContent` (the two-column contract — inset by the gutter at
    every viewport), `#header-search-bar-container` and `#fixed-search-bar-container`.

    ⚠️ THE BOOTSTRAP 4 COPY BELOW IS NOT SUFFICIENT ON ITS OWN, and the reason is a
    difference in the SELECTOR, not in the values. Bootstrap 4 padded only real columns
    (`.col`, `.col-*`), so its `.no-gutters` only had to unpad those. Bootstrap 5 pads
    EVERY row child — `.row > *` — so a child carrying neither class still gets
    `padding: 0 calc(var(--bs-gutter-x) * .5)` = 12px a side, which the `[class*="col-"]`
    reset never reaches.

    That is exactly what `#sidebar.main-content-basket` is: a direct child of
    `.row.mainContent` with no col class. Measured at 1440x900 before this line — legacy
    put `.basket-inner` at x 1107→1440 (flush with the viewport edge), this app put it at
    1119→1452, i.e. the whole basket column shifted 12px right and 12px of it hanging off
    the right edge of the screen. `#sidebar` itself looked correct in the same
    measurement (`position: fixed; right: 0` pins its border box) — the 12px lived in its
    PADDING, and only the `position: fixed` `.basket-inner` inside it, whose static
    position is the padding edge, actually moved. Check the child, not the panel.

    Zeroing the two gutter custom properties is Bootstrap 5's own `.g-0` definition
    verbatim, so it neutralises `.row`'s negative margins and every `.row > *` padding in
    one place rather than second-guessing which children carry a col class. The Bootstrap
    4.6 rules are kept beneath it: they are what legacy actually served, they cost
    nothing, and they keep this shim readable as a port of that stylesheet.
*/
.no-gutters {
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
    margin-right: 0;
    margin-left: 0;
}

.no-gutters > .col,
.no-gutters > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
}

/*
    Bootstrap 4's right-margin spacing utilities, for the same reason as `.no-gutters`
    above: Bootstrap 5 renamed the directional utilities to logical properties, `mr-*` ->
    `me-*` (and `ml-*` -> `ms-*`, `pr-*` -> `pe-*`, `pl-*` -> `ps-*`). The ported markup
    carries the Bootstrap 4 names because it is legacy's markup, so these three uses are
    INERT under Bootstrap 5 — silently, since an unknown class is not an error.

    All three are in TrolleyBar.razor's delivery-slot picker (:130-135), inside
    `.deliveryTimesContainer`, which is `transform: translateY(100%)` until `#deliveryTimes`
    gains `.active` — i.e. **the panel is off-screen until you tap the delivery pill**, which
    is why this survived the sidebar's layout pass [3473]: nothing visible was wrong.
    Measured at 1440x900 with the panel forced open, against live legacy:

      | element                          | class  | legacy | here (before) |
      | .delivery-time-selector-container | mr-3  | 16px   | 0px           |
      |   > div:nth-child(1)              |        |        |               |
      | label[for=delivery-time-start]    | mr-2   |  8px   | 0px           |
      | label[for=delivery-time-end]      | mr-2   |  8px   | 0px           |

    The visible effect: the From and To columns butt together (both edges at x=1273.5 here,
    1265.5/1281.5 in legacy) and each label sits hard against its own time input.

    Values are the ones production serves, read from
    www.beelivery.com/assets/scss/bootstrap-custom.min.css rather than recalled:
    `.mr-2,.mx-2{margin-right:.5rem !important}` / `.mr-3,.mx-3{margin-right:1rem !important}`.
    The `!important` is Bootstrap 4's own and is kept — dropping it changes which rule wins
    against the `.deliveryOptions ...` descendant selectors in order.min.css.

    ⚠️ ONLY the two steps actually used are defined, matching this file's minimal-shim rule.
    A future `mr-1`/`ml-2`/`pr-3` added to the ported markup will fail the same silent way.
    To re-check, compare the classes present in the DOM against the classes appearing in any
    loaded stylesheet, on this page and on legacy's — the difference is the port gap, and a
    class missing from BOTH is a JS hook rather than a defect. `mx-*`/`my-*`/`mt-*`/`mb-*`
    were NOT renamed and resolve from Bootstrap 5 as-is.
*/
.mr-2 {
    margin-right: .5rem !important;
}

.mr-3 {
    margin-right: 1rem !important;
}

/*
    From the legacy site-wide assets/scss/base.scss:158 (compiled into style.css — the
    stylesheet OrderLegacyStyles.razor deliberately does not port, see its header). This
    is the ONLY thing that clears the fixed 65px navbar: `.navbar` is `position: fixed`
    and therefore out of flow, so without this margin the whole `.mainContent` row starts
    at y=0, underneath it.

    It is not a products-column nicety — it is what positions the BASKET. `#sidebar` is
    `position: fixed` with `top: auto`, so it resolves to its STATIC position, which is
    the top of this row; `.basket-inner` inside it is likewise `position: fixed;
    height: calc(100% - 65px)`. Measured at 1440x900 against live legacy
    (www.beelivery.com/now-delivery) with this rule missing:

      | element                       | legacy       | here (before) |
      | .mainContent                  | top 65       | top 0         |
      | #sidebar                      | 65 → 915     | 0 → 850       |
      | .basket-inner                 | 65 → 900     | 0 → 835       |
      | "Choose your one hour slot"   | top 916      | top 851       |

    So the basket's top 65px sat under the navbar, and the slot picker appeared as a
    sliver across the bottom of the screen. That last row is the one to understand before
    "fixing" the slot picker directly: `.deliveryOptions .deliveryTimesContainer` is
    `position: absolute; top: 0; height: 100%; transform: translateY(100%)` against
    `.basket-inner` (the nearest positioned ancestor), i.e. it is PARKED one full panel
    below the panel and slides up when `#deliveryTimes` gains `.active`. Legacy parks it
    at 900→1735, just past a 900px viewport; 65px too high parks it at 835→1670 and the
    first 65px of it — its "Choose your one hour slot" heading — shows below the basket.
    `.basket-inner`'s scrollHeight is 1670 on BOTH pages: that overflow is the design, not
    the defect. Nothing about the slot picker needs changing.

    The tablet breakpoint mirrors the navbar's own: order.min.css gives `.navbar`
    height 65px, 50px under `@media(max-width:800px)`, which is `@include media("<=tablet")`
    in the legacy source.
*/
.mainContent {
    margin-top: 65px;
}

@media (max-width: 800px) {
    .mainContent {
        margin-top: 50px;
    }
}

/*
    From the same legacy site-wide base.scss (:91). `#sidebar` carries this class in
    legacy's markup and in the port, but no rule for it exists in any ported unit — it
    lived only in style.css — so the basket column shipped with no left edge at all.
    Measured on live legacy: box-shadow `rgba(180,180,180,.4) 0 0 12px 0`, clip-path
    `inset(0px -15px)`; measured here before this rule: both `none`.

    The clip-path is what makes the shadow one-sided: it crops the element's own box top
    and bottom while leaving 15px of bleed on each side, so the blur survives on the left
    edge and does not smear over the nav or below the fold.

    Order.aspx:215-220 emits an inline `.fadedBorderLeft { box-shadow: none !important;
    clip-path: none !important }` — but only on its `else` (non-groceries "order anything"
    shop-picker) branch, which this app does not render at all. The groceries branch this
    page IS gets the rule below, unmodified.
*/
.fadedBorderLeft {
    box-shadow: 0 0 12px 0 rgba(180, 180, 180, .4);
    clip-path: inset(0 -15px 0 -15px);
}

/*
    The flyout panels' horizontal inset.

    Both panels carry `class="flyoutMenu col-auto"` — legacy's markup, ported verbatim —
    and NONE of the flyout's own rules set a horizontal padding: order.scss:301-345 gives
    .flyoutCategories `padding: 0 0 .4rem 0` and .flyoutNavItemParent
    `padding: .4rem 3rem .4rem 0`, both zero on the left. Legacy's inset came entirely
    from `.col-auto` in Bootstrap **4**, which hardcodes `padding-left/right: 15px`
    (bootstrap-custom.css:629-634, the file Order.aspx actually served).

    Bootstrap 5 instead derives that from `padding-x: calc(var(--bs-gutter-x) * .5)`, and
    `--bs-gutter-x` is only declared on `.row`. These panels are NOT inside a `.row`, so
    the variable is unset and the computed padding is 0 — measured: every row of the menu
    rendered hard against the panel's left edge, where legacy inset it by 15px.

    Restoring the legacy value rather than adding `.row` or setting the Bootstrap 5
    variable: this is one page's ported chrome, and it should not depend on how a
    framework we did not port happens to resolve a custom property.
*/
.flyoutMenu.col-auto {
    padding-left: 15px;
    padding-right: 15px;
}

/*
    From the legacy site-wide assets/scss/base.scss:96 (compiled into style.css, which
    OrderLegacyStyles.razor does not port — see its header). Carried by the order nav and
    by #category-bar, which already uses the class.
*/
.outerBorderBottom {
    box-shadow: 0 0 6px 3px rgba(180, 180, 180, .4);
}

/*
    Legacy hides the basket icon on the "order anything" shop-picker only:

        body:not(.ordering-groceries) .navbar:not(.shop-selected) .basketIcon { display: none }

    (assets/scss/order.scss:370-373, ported into order.min.css). The discriminator is a
    class legacy puts on <body> — `<body class="ordering-groceries">` (Order.aspx:91).
    There is no per-page <body> class under static SSR here (App.razor renders one bare
    <body> for every route), so that selector matches on THIS page and would hide the
    basket icon and its total: the exact element the owner reported missing.

    Re-asserting the groceries branch structurally instead. Scoped to `.bee-order-page`,
    which only the order page emits, and matching the original's specificity (0,4,1) so it
    actually wins rather than losing silently — hence the doubled class rather than the
    obvious one-class selector. The non-groceries flow this rule exists for is not ported
    at all (see OrderNav.razor), so nothing is being overridden that has a live reader.
*/
.bee-order-page.bee-order-page .navbar .basketIcon.basketIcon {
    display: block;
}

/*
    From the legacy site-wide assets/scss/style.min.css, which OrderLegacyStyles.razor does
    not port (see its header). Copied byte-for-byte from that file's `.button_orange` rule.

    The Checkout button in .bottomCheckoutInfo carries `class="button_orange checkoutButton"`.
    .checkoutButton IS in the ported order.min.css — but it only contributes padding and a
    border-radius, so on its own the button renders as bare browser chrome: grey, auto-width,
    left-aligned. Every visible property (the orange, the white text, the full width, the
    18px weight-600 label) is on this class. Fourth instance of the same gap; the previous
    three are documented above and in the migration doc's "CSS units" section.
*/
.button_orange {
    width: 100%;
    display: block;
    padding: 15px;
    transition: background-color .2s ease-in-out;
    color: #fff;
    background-color: #f60;
    border: 0;
    font-size: 18px;
    text-align: center;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}

.button_orange:hover {
    background-color: #ff7d3e;
}

/*
    Authored, not ported: legacy's checkout error was an <asp:Label> with no class at all
    (Order.aspx:630), so there is no legacy rule to carry. It needs to read as an error and
    to occupy no space when empty — `hidden` does the second, this does the first. Colour is
    Bootstrap 5's $danger, which this app already ships, rather than a new invented red.
*/
.bottomCheckoutInfo .checkoutError {
    color: #dc3545;
    font-size: 14px;
    text-align: center;
    padding: 0 0 10px;
}