/* ---------------------------------------------------------------------------
 * m2t-order.css - the /order-now/ page
 *
 * Loaded only on the "M2T Order" template, on top of m2t-home.css.
 * Radii stay 3-7px. Brand tokens only. Hyphens only, no long dashes.
 *
 * The order widget itself is the vendor's, rendered by the [cwe_currency_conversion]
 * shortcode into an OPEN shadow root. Nothing in this file can reach inside that
 * root - the inside is styled by the injector in m2t-order.js. What this file does
 * is everything around it: the page, the card the widget sits in, and the sections
 * below.
 * ------------------------------------------------------------------------- */

/* MUST match .m2t-nav-inner (1240 / 24px). Anything else and the card, the sections
   below it and the nav end up on three different left edges. */
.m2t-ord-wrap{ max-width:1240px; margin:0 auto; padding:0 24px; }

/* ---- hero: centred, no amount summary (the amounts are in the fields below) ---- */
.m2t-ordhero{ background:var(--navy); color:#fff; padding:44px 0 64px; text-align:center; }
.m2t-ordhero-in{ max-width:760px; margin:0 auto; padding:21px 15px 0px; }
.m2t-ordhero h1{ font-size:36px; line-height:1.15; margin:0 0 10px; font-weight:800; letter-spacing:-.5px; }
.m2t-ordhero p{ margin:0 auto; color:#b9c8dc; font-size:15.5px; max-width:56ch; }

/* ---- the card the vendor widget sits in ---- */
.m2t-tunnel{ margin:-34px 0 0; position:relative; z-index:2;
  background:#fff; border:1px solid var(--line); border-radius:7px; }
.m2t-tunnel-head{ padding:14px 24px; border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:14px; }
.m2t-tunnel-head h2{ margin:0; font-size:17px; font-weight:700; color:var(--navy); }
.m2t-lock{ font-size:12px; font-weight:600; color:var(--cyan-d); display:flex; align-items:center; gap:6px; }
.m2t-tunnel-body{ padding:24px; }

/* ---- shield against the widget's GLOBAL css --------------------------------
   Measured in the browser on 25 Aug 2026, not guessed. cwe-widget.js injects a
   436 KB inline <style> into the MAIN document - not into its shadow root - and it
   opens with Tailwind Preflight:

       *, ::before, ::after { box-sizing:border-box; border-width:0;
                              border-style:solid; border-color:currentcolor; }

   That "*" reaches every element on OUR page. While the browser is parsing 436 KB
   the border-style:solid half lands before the border-width:0 half has settled, so
   anything of ours that never declared a width paints its initial "medium" border
   in currentColor. Timeline captured on the live page:

       t=1048ms  .m2t-logo  228x25   width 0,0,0,0     style none,none,none,none
       t=1211ms  .m2t-logo  232x29   width 2px x4      style solid x4    <- the box
       t=1364ms  .m2t-logo  230x27   width 1px x4      style solid x4
       t=1682ms  .m2t-logo  228x25   width 0,0,0,0     style solid x4

   That is the border around the logo, and it is why it happens here and on no other
   page: this is the only page that executes the vendor bundle.

   Declaring the width ourselves leaves preflight nothing to paint. ELEMENT selectors
   are deliberate: (0,0,1) beats the "*" at (0,0,0) but loses to every class rule in
   m2t-home.css, so real borders - the nav underline, the cards, the inputs - are
   untouched. None of these five elements has a UA border worth keeping. */
a, img, svg, figure, picture { border-width: 0; }

/* ---- the vendor's own containers, and the space we hold for them ------------
   The widget is a 714 KB remote bundle. Until it arrives this box is empty, so we
   reserve the height the finished form occupies and fill it with a skeleton. Without
   the reservation the sections below jump upward by the full height of the form the
   moment React paints, which is the "breaking the section" Sayeed reported.
   The number is the measured height of the rendered form, not a guess. */
#cwe-currency-conversion-widget{ min-height:96px; }
/* While it is held back the container is out of flow, so the floor would only pad the
   skeleton. It applies once the form is in, where it is a floor and never a clamp. */
.m2t-tunnel-body:not(.is-ready) #cwe-currency-conversion-widget{ min-height:0; }
#custom-data-widget{ display:none; }

/* ---- loading skeleton, and the swap ----------------------------------------
   Sayeed's call, 25 Aug 2026, and it is the right one: hold the widget back while
   it downloads and show the skeleton, then swap once. The first version keyed off
   :empty, which stops matching the instant React inserts its root node - which is
   NOT the moment the form appears. In that gap the vendor paints its own tall
   loading box, so the skeleton flashed and the section then broke anyway. Now
   m2t-order.js adds .is-ready to .m2t-tunnel-body only once the real fields exist.

   The widget is held with position:absolute + opacity:0, NOT display:none. It has
   to stay laid out at full width or React measures a zero-width box and the form
   comes back with the wrong column widths. Absolute takes it out of flow so the
   skeleton supplies the height; opacity hides it; pointer-events stops anyone
   clicking a control they cannot see.

   FAILSAFE, and it matters: this must never strand a customer in front of an
   invisible order form. The animation below flips the widget back into view after
   10s with no JavaScript involved at all, so even if m2t-order.js never runs, or a
   vendor rebuild breaks our field detection, the form still arrives. */
.m2t-tunnel-body{ position:relative; }

.m2t-skel{ display:none; }
.m2t-tunnel-body:not(.is-ready) .m2t-skel{ display:block; }
.m2t-tunnel-body.is-ready .m2t-skel{ display:none; }

.m2t-tunnel-body:not(.is-ready) #cwe-currency-conversion-widget{
  position:absolute; left:0; right:0; top:0; opacity:0; pointer-events:none;
  animation:m2t-tunnel-failsafe 0s linear 10s forwards; }
.m2t-tunnel-body:not(.is-ready) .m2t-skel{
  animation:m2t-skel-failsafe 0s linear 10s forwards; }
@keyframes m2t-tunnel-failsafe{ to{ position:static; opacity:1; pointer-events:auto; } }
@keyframes m2t-skel-failsafe{ to{ display:none; } }

#cwe-currency-conversion-widget{ transition:opacity .2s ease; }
/* align the BOXES, not the column bottoms. The currency column is taller than the
   others because the rate bar hangs under it, so align-items:end pushed that whole
   column up and its box off the shared baseline (Sayeed, 25 Aug 2026). start-aligned,
   every column opens with a 9px label + 9px margin, so all four boxes begin at 18px
   and the rate bar hangs below without moving anything. Same shape as the real form. */
.m2t-skel-row{ display:grid; grid-template-columns:1.3fr 1fr 1fr auto; gap:16px; align-items:start; }
.m2t-skel-f{ display:block; min-width:0; }
.m2t-skel-lab{ display:block; height:10px; width:80px; margin-bottom:14px; border-radius:3px; }
.m2t-skel-box{ display:block; height:48px; border-radius:5px; }
.m2t-skel-btn{ display:block; height:48px; width:170px; border-radius:5px;
  margin-top:24px; }   /* 10px label + 14px margin: the button has no label of its own */
.m2t-skel-rate{ display:block; height:9px; width:150px; margin-top:11px; border-radius:3px; }
.m2t-skel-lab, .m2t-skel-box, .m2t-skel-btn, .m2t-skel-rate{
  background:linear-gradient(90deg, #eef2f7 0%, #f6f9fc 50%, #eef2f7 100%);
  background-size:200% 100%; animation:m2t-shimmer 1.25s linear infinite; }
@keyframes m2t-shimmer{ from{ background-position:200% 0; } to{ background-position:-200% 0; } }
@media (prefers-reduced-motion:reduce){
  .m2t-skel-lab, .m2t-skel-box, .m2t-skel-btn, .m2t-skel-rate{ animation:none; background:#eef2f7; }
}

/* ---- the checkout terms strip ----------------------------------------------
   Centred, quiet, and deliberately not decorated. Rewritten 25 Aug 2026: the first
   version put a cyan tick before each limit, which Sayeed rightly killed - a tick
   means done or verified, and these are terms, not a checklist. On the last screen
   before money moves, decoration reads as sales. Restraint reads as a bank.

   Three levels, in order of what a nervous customer needs: the limits that decide
   whether their order is even possible, then the fee, then who they are paying and
   how. The shield is the one piece of ornament and it earns its place, because a
   payment method line without a trust mark is just a list. */
.m2t-tunnel-foot{ margin:20px 0 0; padding-top:18px;
  border-top:1px solid var(--line); text-align:center; }
.m2t-tunnel-rate{ font-weight:700; color:var(--ink); }
.m2t-tunnel-rate b{ color:var(--cyan-d); font-weight:800; }

.m2t-limits{ margin:0 0 6px; font-size:14.5px; font-weight:500;
  color:var(--navy); letter-spacing:-.1px; }
.m2t-limits b{ font-weight:800; }
.m2t-fee{ margin:0; font-size:13px; font-weight:400; color:var(--muted); }

/* the trust badge: a contained panel rather than loose text, so it reads as one
   object and not as another sentence */
.m2t-pay{ display:inline-flex; align-items:center; justify-content:center;
  gap:11px; flex-wrap:wrap; margin:15px auto 0; padding:9px 15px;
  border:1px solid var(--line); border-radius:6px; background:#f7f9fc; }
.m2t-pay-label{ display:inline-flex; align-items:center; gap:7px;
  font-size:13px; font-weight:600; color:var(--muted); white-space:nowrap; }
.m2t-shield{ width:15px; height:15px; flex-shrink:0; fill:none; stroke:var(--cyan-d);
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.m2t-pay-list{ display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap;
  justify-content:center; }
.m2t-pay-chip{ display:inline-flex; align-items:center; padding:6px 12px;
  border-radius:5px; border:1px solid var(--line); background:#fff;
  font-size:13px; font-weight:700; color:var(--navy); white-space:nowrap; }

/* ---- preview-only mock of the widget (never rendered on the live template) ---- */
.m2t-mock-note{ margin:0 0 18px; padding:9px 12px; border-radius:4px; background:#fff6e5;
  border:1px solid #f0d9a8; color:#7a5a12; font-size:12px; font-weight:600; }
.m2t-tunnel-row{ display:grid; grid-template-columns:1.3fr 1fr 1fr auto; gap:16px; align-items:end; }
.m2t-tf{ display:block; min-width:0; }
.m2t-tf > span{ display:block; font-size:12px; font-weight:700; color:var(--ink); margin-bottom:7px; }
.m2t-tf > span em{ font-style:normal; color:#d0342c; }
.m2t-tf i{ display:flex; align-items:center; justify-content:space-between; gap:8px;
  border:1px solid var(--line); border-radius:5px; padding:12px 13px; font-style:normal;
  font-size:16px; font-weight:600; color:var(--ink); background:#fff; }
.m2t-tf i svg{ flex-shrink:0; opacity:.5; }
.m2t-tunnel-btn{ display:block; background:var(--cyan); color:#fff; font-weight:700;
  font-size:16px; padding:13px 34px; border-radius:5px; text-decoration:none;
  text-align:center; white-space:nowrap; }
.m2t-tunnel-btn:hover{ background:var(--cyan-d); }

/* ---- what happens after you order ------------------------------------------
   Sizes and the 15% top margin are Sayeed's, 25 Aug 2026, given as exact values.
   Centred throughout at his request: heading, sub, all three cards and the strip
   below them, on desktop and on mobile alike.

   NOTE on margin-top:15%. A percentage margin resolves against the container's
   WIDTH, not its height, so this is about 179px inside the 1240px wrap and about
   49px on a phone. That is the behaviour we want here (a big calm gap on desktop,
   a sensible one on mobile) but it is worth knowing it is not a fixed number. */
.m2t-after{ padding:46px 0 10px; margin-top:15%; text-align:center; }
.m2t-after h2{ margin:0 0 6px; font-size:26px; font-weight:800; color:var(--navy); letter-spacing:-.4px; }
.m2t-after > p{ margin:0 0 26px; color:var(--muted); font-size:16px; }
.m2t-after-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.m2t-after-card{ border:1px solid var(--line); border-radius:7px; padding:20px;
  background:#fff; text-align:center; }
/* block + auto margins, or a centred text-align cannot reach a replaced element */
.m2t-after-card img{ width:45px; height:44px; margin:0 auto 12px; display:block; }
.m2t-after-card h3{ margin:0 0 7px; font-size:17px; font-weight:700; color:var(--navy); }
.m2t-after-card p{ margin:0; font-size:14.5px; line-height:1.55; color:var(--muted); }

/* ---- bring with you --------------------------------------------------------
   Ticks removed on 25 Aug 2026. Same reasoning as the terms strip: a tick reads as
   "done", and nothing here is done yet - these are things to bring. Centred, and
   separated by spacing rather than marks. "Collect within 7 days" dropped as well;
   it is a deadline, not a thing you carry, and it is already answered in the FAQ. */
.m2t-bring{ margin-top:18px; border:1px solid var(--line); border-radius:7px;
  background:#f7f9fc; padding:18px 20px; display:flex; gap:10px 26px; flex-wrap:wrap;
  align-items:center; justify-content:center; }
.m2t-bring strong{ font-size:14px; color:var(--navy); }
.m2t-bring ul{ margin:0; padding:0; list-style:none; display:flex; gap:10px 26px;
  flex-wrap:wrap; justify-content:center; }
.m2t-bring li{ display:flex; align-items:center; font-size:13.5px; color:var(--muted); }

@media (max-width:980px){
  .m2t-tunnel-row{ grid-template-columns:1fr 1fr; }
  .m2t-tunnel-btn{ grid-column:1 / -1; }
  .m2t-after-grid{ grid-template-columns:1fr; }
  /* skeleton follows the same reflow as the real form, so the reserved height stays honest */
  .m2t-skel-row{ grid-template-columns:1fr 1fr; }
  .m2t-skel-btn{ grid-column:1 / -1; width:100%; margin-top:0; }
}
@media (max-width:640px){
  .m2t-tunnel{ margin-top:18px; }
  .m2t-tunnel-row{ grid-template-columns:1fr; }
  .m2t-skel-row{ grid-template-columns:1fr; }
  /* on a phone the badge stacks its label above the chips, still centred */
  .m2t-limits{ font-size:13px; }
  .m2t-pay{ flex-direction:column; gap:9px; padding:11px 14px; }
  .m2t-ordhero{ padding:34px 0 54px; }
  .m2t-ordhero h1{ font-size:27px; }
  /* keep the hero text on the same edge as the card and sections below it (24px) */
  .m2t-ordhero-in{ padding:21px 24px 0; }
}