/* ============ Round 17: the large-order sheet (31 Oct 2026, the owner: "when the weight is over Mathieu's limit and you click mail us, open a mail modal with
   the details the customer selected filled in"; redrawn the same day: "the modal form looks too AI generic") ============
   The first version was the generic kit (title and lead, a pale box, a segmented control, five stacked label-over-box fields). Now the sheet is made of
   this shop's own pieces, so it reads as part of the family and not as a template:
   - its head is the cart's dark "too heavy" card (design.css .cart-heavy: loam gradient, gold gauge, striped beyond the limit), the card the customer
     just pressed, with the packs and their photos on sand tiles and the limit written where the stripes begin; the gauge fills once as it opens;
   - Mathieu's two ways are big tiles with a line icon and a round marker, like the contact page's topics (dark green when chosen);
   - the fields are the checkout's (.fld: label inside the box, "optional" as a small tag; the one focus ring of round8-forms.css);
   - the send button stays in reach at the bottom (sticky, over an S-curve fade, round 12);
   - a phone gets a bottom sheet with a grabber (a drag down closes it), a computer a centred card. Closing slides it away too.
   Looked at: Baymard (labels stay visible: never inside-only placeholders), UX Movement (labels inside the field box, tall fields), Stripe's and
   Shopify's checkouts (the summary of what you buy heads the form). Markup: assets/js/bigorder.js. Only transform and opacity animate. */

html.fi-bo-lock, html.fi-bo-lock body { overflow: hidden; }

/* ---- the dialog and its sheet -------------------------------------------------------------------------------------------------------------------- */
.fi-bo {
  position: fixed; inset: 0; width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; padding: 0; border: 0;
  display: flex; align-items: flex-end; justify-content: center; background: rgba(33, 24, 17, .52); color: var(--ink, #1f2a24); overflow: visible;
  opacity: 1; transition: opacity .28s ease, display .28s allow-discrete, overlay .28s allow-discrete;
}
.fi-bo:not([open]) { display: none; opacity: 0; }
@starting-style { .fi-bo[open] { opacity: 0; } }
.fi-bo::backdrop { background: transparent; }

.fi-bo-sheet {
  position: relative; display: flex; flex-direction: column; width: 100%; max-height: calc(100% - 24px); overflow: auto; overscroll-behavior: contain;
  border-radius: 24px 24px 0 0; background: #fff; box-shadow: 0 -18px 48px -14px rgba(33, 24, 17, .4);
  transform: none; transition: transform .44s cubic-bezier(.32, .72, 0, 1);
}
.fi-bo:not([open]) .fi-bo-sheet { transform: translateY(100%); transition-duration: .28s; }
@starting-style { .fi-bo[open] .fi-bo-sheet { transform: translateY(100%); } }
.fi-bo-sheet.is-dragging { transition: none; }

/* ---- the head: the cart's "too heavy" card ------------------------------------------------------------------------------------------------------- */
.fi-bo-top {
  --focus: var(--focus-on-dark, #e9cf86);
  flex: none; padding: 10px 20px 22px; color: var(--sand-soft, #f4ead2);
  background: var(--grain), radial-gradient(80% 140% at 100% 0%, rgba(217, 98, 43, .30), transparent 66%), linear-gradient(165deg, #5b3e2a 0%, #33241a 100%), #33241a;
}
.fi-bo-grab { display: block; width: 40px; height: 5px; margin: 0 auto 12px; border-radius: 99px; background: rgba(244, 234, 210, .4); }
.fi-bo-head { display: flex; align-items: flex-start; gap: 12px; }
.fi-bo-heading { flex: 1 1 auto; min-width: 0; }
.fi-bo-title { margin: 0; color: #fff; font: 600 24px / 1.15 var(--font-display), var(--font-sans), sans-serif; letter-spacing: -.02em; text-wrap: balance; }
.fi-bo-title:focus { outline: 0; }
.fi-bo-lead { margin: 6px 0 0; max-width: 42ch; color: var(--sand-soft, #f4ead2); font: 500 14.5px / 1.45 var(--font-sans), sans-serif; }
.fi-bo-x { display: grid; place-items: center; flex: none; width: 44px; height: 44px; margin: -6px -10px 0 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--sand-soft, #f4ead2); cursor: pointer; }

.fi-bo-lines { display: grid; gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; }
.fi-bo-line { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 12px; }
.fi-bo-pack { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: var(--sand-soft, #f4ead2); overflow: hidden; }
.fi-bo-pack img { width: 100%; height: 100%; padding: 4px; box-sizing: border-box; object-fit: contain; }
.fi-bo-what { display: grid; gap: 1px; min-width: 0; }
.fi-bo-what b { color: #fff; font: 600 15.5px / 1.3 var(--font-sans), sans-serif; font-variant-numeric: tabular-nums; }
.fi-bo-what small { color: var(--sand-soft, #f4ead2); font: 500 13.5px / 1.3 var(--font-sans), sans-serif; opacity: .9; }

/* the gauge: gold up to the limit, striped beyond it (design.css .cart-heavy-gauge); the limit is written where the stripes begin */
.fi-bo-weight { margin-top: 18px; }
.fi-bo-gauge { position: relative; display: flex; height: 10px; margin-bottom: 30px; border-radius: 99px; background: rgba(255, 255, 255, .15); }
.fi-bo-gauge i { display: block; height: 100%; transform-origin: 0 50%; }
.fi-bo-gauge .ok { flex: 0 0 calc(var(--ok, 75) * 1%); border-radius: 99px 0 0 99px; background: linear-gradient(90deg, #c8963a, #f1d49a); transition: transform .55s var(--ease-soft, ease) .2s; }
.fi-bo-gauge .over { flex: 1 1 auto; border-radius: 0 99px 99px 0; background: repeating-linear-gradient(135deg, #d9622b 0 6px, #f0a074 6px 12px); transition: transform .45s ease-out .7s; }
@starting-style { .fi-bo[open] .fi-bo-gauge i { transform: scaleX(0); } }
.fi-bo-at-limit, .fi-bo-at-total { position: absolute; top: 17px; font: 700 13.5px / 1 var(--font-sans), sans-serif; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fi-bo-at-limit { left: calc(var(--ok, 75) * 1%); transform: translateX(-100%); padding-right: 3px; color: #f1d49a; }
.fi-bo-at-limit::after { content: ""; position: absolute; right: -1px; top: -12px; width: 2px; height: 8px; border-radius: 1px; background: #f1d49a; }
.fi-bo-at-total { right: 0; color: #f6b08c; }
.fi-bo-weighs { margin: 0; color: var(--sand-soft, #f4ead2); font: 500 14px / 1.45 var(--font-sans), sans-serif; }
.fi-bo-top > .fi-bo-weighs { margin-top: 14px; }

/* ---- the body: the two ways, the checkout's fields, the consent ------------------------------------------------------------------------------- */
.fi-bo-body { padding: 20px 20px 0; background: #fff; }
.fi-bo-form { display: grid; gap: 18px; }

.fi-bo-choice { margin: 0; padding: 0; border: 0; min-width: 0; }
.fi-bo-choice legend { margin: 0 0 10px; padding: 0; color: var(--green-ink, #1d3a2c); font: 600 15.5px / 1.3 var(--font-sans), sans-serif; }
.fi-bo-ways { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.fi-bo-opt {
  position: relative; display: grid; align-content: space-between; gap: 18px; min-height: 108px; padding: 14px 14px 15px; box-sizing: border-box;
  border-radius: 18px; background: #f1f0ea; color: var(--green-ink, #1d3a2c); cursor: pointer; -webkit-user-select: none; user-select: none;
  transition: transform .2s var(--ease-soft, ease);
}
.fi-bo-opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.fi-bo-opt-ic { display: block; width: 30px; height: 30px; color: var(--green-deep, #2f7a55); --hi-w: 1.5; }
.fi-bo-opt-ic svg { display: block; width: 100%; height: 100%; }
.fi-bo-opt-name { font: 600 15.5px / 1.25 var(--font-sans), sans-serif; text-wrap: balance; }
.fi-bo-opt-mark { position: absolute; top: 14px; right: 14px; width: 20px; height: 20px; box-sizing: border-box; border: 2px solid var(--field-line, #76847a); border-radius: 50%; background: #fff; }
.fi-bo-opt:has(input:checked) { background: var(--green-ink, #1d3a2c); color: #fff; }
.fi-bo-opt:has(input:checked) .fi-bo-opt-ic { color: #f1d49a; }
.fi-bo-opt:has(input:checked) .fi-bo-opt-mark { border-color: #fff; background: #fff; box-shadow: inset 0 0 0 4px var(--green-ink, #1d3a2c); }
.fi-bo-opt:has(input:focus-visible) { outline: 3px solid var(--focus, #1d3a2c); outline-offset: 3px; }
.fi-bo-opt:active { transform: scale(.98); }

.fi-bo-fields { display: grid; gap: 10px; }
.fi-bo-fields > [hidden] { display: none; }
.fi-bo-fields textarea { display: block; width: 100%; box-sizing: border-box; resize: vertical; }
.fi-bo-fields .fld[data-for="address"] textarea { min-height: 88px; }
.fi-bo-fields .fi-bo-err[hidden], .fi-bo-consent .fi-bo-err[hidden] { display: none; }
.fi-bo-consent .co-check-text a { color: var(--green-ink, #1d3a2c); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.fi-bo-trap { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* the send button stays in reach: sticky at the bottom of the sheet, over a soft fade (an S-curve, never two stops) */
.fi-bo-foot {
  position: sticky; bottom: 0; z-index: 2; display: grid; gap: 10px; margin: 0 -20px; padding: 18px 20px max(20px, env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .1) 3px, rgba(255, 255, 255, .5) 8px, rgba(255, 255, 255, .9) 13px, #fff 16px);
}
.fi-bo-send { width: 100%; min-height: 54px; justify-content: center; }
.fi-bo-status { margin: 0; color: var(--danger, #b3261e); font: 600 14px / 1.45 var(--font-sans), sans-serif; }
.fi-bo-status:empty { display: none; }
.fi-bo-status a { color: inherit; text-decoration: underline; }

/* ---- sent: the same head with a tick, the way that was asked, one button ------------------------------------------------------------------------ */
.fi-bo-tick { flex: none; width: 44px; height: 44px; border-radius: 50%; background: rgba(241, 212, 154, .16) no-repeat center / 22px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f1d49a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.fi-bo-way { display: flex; align-items: center; gap: 12px; margin: 0 0 4px; padding: 14px 16px; border-radius: 18px; background: #f1f0ea; color: var(--green-ink, #1d3a2c); font: 600 16px / 1.3 var(--font-sans), sans-serif; }

/* ---- a computer: a centred card ------------------------------------------------------------------------------------------------------------------ */
@media (min-width: 641px) {
  .fi-bo { align-items: center; padding: 24px; box-sizing: border-box; }
  .fi-bo-sheet { width: min(560px, 100%); max-height: 100%; border-radius: 24px; box-shadow: 0 0 0 1px rgba(43, 30, 21, .06), 0 28px 64px -16px rgba(33, 24, 17, .42); opacity: 1; transition: transform .44s cubic-bezier(.32, .72, 0, 1), opacity .3s ease; }
  .fi-bo:not([open]) .fi-bo-sheet { transform: translateY(16px) scale(.98); opacity: 0; }
  @starting-style { .fi-bo[open] .fi-bo-sheet { transform: translateY(16px) scale(.98); opacity: 0; } }
  .fi-bo-grab { display: none; }
  .fi-bo-top { padding: 26px 28px 24px; }
  .fi-bo-title { font-size: 27px; }
  .fi-bo-body { padding: 24px 28px 0; }
  .fi-bo-foot { margin: 0 -28px; padding: 18px 28px 26px; }
  .fi-bo-fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .fi-bo-fields > * { grid-column: 1 / -1; }
  .fi-bo-fields > [data-for="name"], .fi-bo-fields > [data-for="email"] { grid-column: auto; }
}
/* a phone: the head is the handle (bigorder.js draggable), so it does not scroll the sheet under the finger */
@media (max-width: 640px) {
  .fi-bo-grab, .fi-bo-head { touch-action: none; }
}
@media (hover: hover) and (pointer: fine) {
  .fi-bo-x:hover { background: rgba(244, 234, 210, .12); }
  .fi-bo-opt:not(:has(input:checked)):hover { background: #e9e7de; }
}
@media (prefers-reduced-motion: reduce) {
  .fi-bo, .fi-bo-sheet, .fi-bo-gauge i, .fi-bo-opt { transition: none !important; }
}