/* The money path after the quote form in the site's v2 design: checkout (8 languages), order confirmation, quote review
   and order tracking (Mohamed, 7 Oct 2026: "ok let's fix them but you must be extremley careful with the functions of the
   quote form, if you find something to enhance on it good, but it must be 1000% safe").
   LOOK ONLY. This file is the whole restyle: the pages' markup, fields, scripts, words, prices and payment steps are
   untouched. It loads only when config/skin.php 'money' is on, and every rule sits under body.money-v2 (plus one page
   class: mny-checkout, mny-confirm, mny-review, mny-track), so with the switch off every page is exactly today's page.
   Same look and the same rules as the quote form's site-v2-quote.css, so a customer moves from the price to the payment
   without a change of style:
   - no display, width, overflow, opacity or visibility override with !important (Alpine shows and hides with inline
     styles); no transform, filter or contain on anything that holds a sticky or fixed element;
   - no stacking level is changed (the checkout's pop-up keeps 50; the header sits at 50 there, set by the layout);
   - ONE chosen recipe for the payment and delivery choices; pointing never looks like choosing (hover only for a mouse,
     a finger leaves no mark behind);
   - text sizes in rem, nothing below 12px, Arabic in Cairo with no letter spacing. */

/* The typed tick and arrow inside these pages' words ("✓ Included", "en → French") draw as the site's own drawn tick and arrow:
   a two-glyph face of the family the page already uses (Inter), limited to those two code points and declared once per Inter
   weight the site loads (400-700; a face only joins the weight it is declared for). No word or markup changes;
   if the file ever fails to load, the browser's own marks show, as today. */
@font-face{font-family:Inter;src:url("/fonts/lingo-marks.woff2?v=2") format("woff2");unicode-range:U+2192,U+2713;font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url("/fonts/lingo-marks.woff2?v=2") format("woff2");unicode-range:U+2192,U+2713;font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url("/fonts/lingo-marks.woff2?v=2") format("woff2");unicode-range:U+2192,U+2713;font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url("/fonts/lingo-marks.woff2?v=2") format("woff2");unicode-range:U+2192,U+2713;font-weight:700;font-style:normal;font-display:swap}

body.money-v2{
  --mn-navy:#101d30;--mn-deep:#0b1626;--mn-ink:#122033;--mn-paper:#f6f5f1;--mn-muted:#4c5966;--mn-soft:#5a6672;
  --mn-orange:#c7420d;--mn-orange-h:#b83a0a;--mn-accent:#f86011;--mn-on-dark:#d3dbe4;--mn-on-dark-soft:#b9c5d1;
  --mn-warm:#ffa06b;--mn-line:#e2e1da;--mn-line-2:#d9d8d1;--mn-tint:#fbf3ec;--mn-chip:#fbfaf7;
  --mn-edge:#8a877f;--mn-edge-hover:#5f5c54;--mn-rest:#cfccc3;
  --mn-green:#15803d;--mn-green-tint:#edf6f0;--mn-green-line:#bfdcc8;
  --mn-amber-bg:#fdf6ec;--mn-amber-line:#efd5a5;--mn-amber-ink:#6f420a;--mn-amber-icon:#c77a0d;
  --mn-card-shadow:0 1px 2px rgba(16,29,48,.04),0 24px 48px -32px rgba(16,29,48,.28);
  --mn-btn-shadow:0 4px 10px -6px rgba(199,66,13,.35);
}

/* ---------- Every page: warm paper, white cards with the short accent bar ---------- */
body.mny-checkout #main>.bg-gray-50,
body.mny-review #main>.bg-gray-50,
body.mny-track #main>.bg-gray-50{background:var(--mn-paper);color:var(--mn-ink)}
body.mny-confirm #main>.bg-gradient-to-br{background:var(--mn-paper);color:var(--mn-ink)}

body.mny-checkout #checkout-form>.bg-white,
body.mny-confirm #main .max-w-3xl>.bg-white.rounded-2xl,
body.mny-review #main .max-w-2xl>.bg-white.rounded-2xl,
body.mny-track #main .max-w-4xl>.bg-white.rounded-xl{position:relative}
/* the order summary keeps its own sticky position on laptops (a sticky box already anchors the accent bar) */
@media (max-width:1023px){body.mny-checkout .lg\:col-span-1>.bg-white{position:relative}}
body.mny-checkout #checkout-form>.bg-white,
body.mny-checkout .lg\:col-span-1>.bg-white,
body.mny-confirm #main .max-w-3xl>.bg-white.rounded-2xl,
body.mny-review #main .max-w-2xl>.bg-white.rounded-2xl,
body.mny-track #main .max-w-4xl>.bg-white.rounded-xl{
  border:1px solid var(--mn-line);border-radius:18px;--tw-shadow:var(--mn-card-shadow);--tw-shadow-colored:var(--mn-card-shadow)
}
body.mny-checkout #checkout-form>.bg-white::before,
body.mny-checkout .lg\:col-span-1>.bg-white::before,
body.mny-confirm #main .max-w-3xl>.bg-white.rounded-2xl::before,
body.mny-review #main .max-w-2xl>.bg-white.rounded-2xl::before,
body.mny-track #main .max-w-4xl>.bg-white.rounded-xl::before{
  content:"";position:absolute;top:-1px;inset-inline-start:24px;width:40px;height:3px;border-radius:0 0 2px 2px;background:var(--mn-accent)
}
@media (min-width:640px){
  body.mny-confirm #main .max-w-3xl>.bg-white.rounded-2xl::before,
  body.mny-review #main .max-w-2xl>.bg-white.rounded-2xl::before,
  body.mny-track #main .max-w-4xl>.bg-white.rounded-xl::before{inset-inline-start:32px;width:48px}
}

/* ---------- The navy heading band (checkout, confirmation, tracking search): heading at the start, as on the quote form.
   Full width by the same shadow trick as the quote form's band; it never overlaps a card. ---------- */
body.mny-checkout #main>.bg-gray-50>.max-w-6xl>.mb-4:first-child,
body.mny-confirm #main .max-w-3xl>.text-center.mb-8:first-child,
body.mny-track #main .max-w-4xl>.text-center.mb-8:first-child{
  position:relative;padding:1.75rem 0 2rem;text-align:start;color:#fff;
  background:var(--mn-navy);box-shadow:0 0 0 100vmax var(--mn-navy);clip-path:inset(0 -100vmax)
}
body.mny-checkout #main>.bg-gray-50>.max-w-6xl>.mb-4:first-child{margin:-1.5rem 0 1.75rem}
body.mny-confirm #main .max-w-3xl>.text-center.mb-8:first-child,
body.mny-track #main .max-w-4xl>.text-center.mb-8:first-child{margin:-3rem 0 2rem;padding:2rem 0 2.25rem}
/* tracking: the search card is centred, so its band is too */
body.mny-track #main .max-w-4xl>.text-center.mb-8:first-child{text-align:center}
body.mny-track #main .max-w-4xl>.text-center.mb-8:first-child>p{margin-inline:auto}
body.mny-checkout #main>.bg-gray-50>.max-w-6xl>.mb-4:first-child>h1,
body.mny-confirm #main .max-w-3xl>.text-center.mb-8:first-child>h1,
body.mny-track #main .max-w-4xl>.text-center.mb-8:first-child>h1{
  margin:0;font-family:Poppins,Inter,sans-serif;font-weight:500;font-size:2.75rem;line-height:3.25rem;letter-spacing:-.04em;color:#fff;text-wrap:balance
}
body.mny-checkout #main>.bg-gray-50>.max-w-6xl>.mb-4:first-child>p,
body.mny-confirm #main .max-w-3xl>.text-center.mb-8:first-child>p,
body.mny-track #main .max-w-4xl>.text-center.mb-8:first-child>p{margin:.625rem 0 0;max-width:42.5rem;font-size:1.125rem;line-height:1.75rem;color:var(--mn-on-dark)}
/* "Edit quote" sits above the heading, quiet on the navy */
body.mny-checkout #main>.bg-gray-50>.max-w-6xl>.mb-4:first-child>a{margin-bottom:.875rem;font-size:.875rem;font-weight:500;color:var(--mn-on-dark)}
body.mny-checkout #main>.bg-gray-50>.max-w-6xl>.mb-4:first-child>a:hover{color:var(--mn-on-dark)}
@media (hover:hover) and (pointer:fine){body.mny-checkout #main>.bg-gray-50>.max-w-6xl>.mb-4:first-child>a:hover{color:var(--mn-warm)}}
body.mny-checkout #main>.bg-gray-50>.max-w-6xl>.mb-4:first-child>a:focus-visible{outline:2px solid #ff914e;outline-offset:3px;border-radius:4px}
/* the confirmation's status mark: smaller, on the navy */
body.mny-confirm #main .max-w-3xl>.text-center.mb-8:first-child>.rounded-full{width:3.25rem;height:3.25rem;margin-bottom:1.125rem}
body.mny-confirm #main .max-w-3xl>.text-center.mb-8:first-child>.rounded-full>svg{width:1.875rem;height:1.875rem}
body.mny-confirm #main .max-w-3xl>.text-center.mb-8:first-child>.bg-green-500{background-color:#16a34a}
@media (max-width:1279px){
  body.mny-checkout #main>.bg-gray-50>.max-w-6xl>.mb-4:first-child>h1,
  body.mny-confirm #main .max-w-3xl>.text-center.mb-8:first-child>h1,
  body.mny-track #main .max-w-4xl>.text-center.mb-8:first-child>h1{font-size:2.5rem;line-height:3rem}
}
@media (max-width:899px){
  body.mny-checkout #main>.bg-gray-50>.max-w-6xl>.mb-4:first-child>h1,
  body.mny-confirm #main .max-w-3xl>.text-center.mb-8:first-child>h1,
  body.mny-track #main .max-w-4xl>.text-center.mb-8:first-child>h1{font-size:2.125rem;line-height:2.625rem}
}
@media (max-width:639px){
  body.mny-checkout #main>.bg-gray-50>.max-w-6xl>.mb-4:first-child{padding:1.375rem 0 1.5rem;margin-bottom:0}
  body.mny-confirm #main .max-w-3xl>.text-center.mb-8:first-child,
  body.mny-track #main .max-w-4xl>.text-center.mb-8:first-child{padding:1.5rem 0 1.625rem;margin-bottom:1.5rem}
  body.mny-checkout #main>.bg-gray-50>.max-w-6xl>.mb-4:first-child>h1,
  body.mny-confirm #main .max-w-3xl>.text-center.mb-8:first-child>h1,
  body.mny-track #main .max-w-4xl>.text-center.mb-8:first-child>h1{font-size:1.875rem;line-height:2.375rem;letter-spacing:-.035em}
  body.mny-checkout #main>.bg-gray-50>.max-w-6xl>.mb-4:first-child>p,
  body.mny-confirm #main .max-w-3xl>.text-center.mb-8:first-child>p,
  body.mny-track #main .max-w-4xl>.text-center.mb-8:first-child>p{font-size:1rem;line-height:1.5rem}
}

/* ---------- Card headings and quiet text ---------- */
body.mny-checkout #checkout-form h2,
body.mny-checkout .lg\:col-span-1>.bg-white>h3,
body.mny-confirm #main .max-w-3xl h3,
body.mny-track #main .max-w-4xl>.bg-white h3{font-family:Poppins,Inter,sans-serif;font-weight:600;letter-spacing:-.02em;color:var(--mn-ink)}
body.mny-checkout #checkout-form h2,
body.mny-checkout .lg\:col-span-1>.bg-white>h3{font-size:1.3125rem;line-height:1.3}
body.money-v2 #main .text-gray-600{color:var(--mn-muted)}
body.money-v2 #main .text-gray-500{color:var(--mn-soft)}
body.money-v2 #main .text-gray-700{color:var(--mn-ink)}
body.money-v2 #main .text-gray-900{color:var(--mn-ink)}
body.money-v2 #main .border-t,body.money-v2 #main .border-b{border-color:var(--mn-line)}
body.money-v2 #main .border-dashed{border-color:var(--mn-line-2)}
body.money-v2 #main a:focus-visible,body.money-v2 #main button:focus-visible{outline-color:var(--mn-orange)}

/* ---------- Checkout: fields ---------- */
body.mny-checkout #checkout-form label.block{color:var(--mn-ink);font-weight:600}
body.mny-checkout #checkout-form label.block>span{color:var(--mn-soft)}
body.mny-checkout #checkout-form :is(input[type="text"],input[type="email"],input[type="tel"],textarea){
  border-color:var(--mn-edge);border-radius:12px;background-color:#fff;color:var(--mn-ink)
}
body.mny-checkout #checkout-form :is(input,textarea):focus{--tw-ring-color:var(--mn-orange)}
body.mny-checkout #checkout-form :is(input,textarea)[aria-invalid="true"]{border-color:#b42318}
body.mny-checkout #checkout-form p.text-xs{font-size:.8125rem;line-height:1.45}
body.mny-checkout #checkout-form p.text-amber-700{color:#a14a07}
body.mny-checkout #checkout-form p.text-red-600{color:#b42318}
/* "Did you mean ...?" in the amber family of the quote form */
body.mny-checkout #checkout-form p.bg-amber-50{border-radius:12px;border-color:var(--mn-amber-line);background-color:var(--mn-amber-bg);color:var(--mn-amber-ink)}
body.mny-checkout #checkout-form p.bg-amber-50>button{color:var(--mn-amber-ink)}

/* ---------- Checkout: payment and delivery choices (one chosen recipe) ---------- */
body.mny-checkout [role="radiogroup"]>label{border-radius:14px;border-color:var(--mn-rest);background-color:#fff}
body.mny-checkout [role="radiogroup"]>label.border-gray-200:hover{border-color:var(--mn-rest)}
body.mny-checkout [role="radiogroup"]>label.bg-orange-50{border-color:var(--mn-orange);background-color:var(--mn-tint)}
body.mny-checkout [role="radiogroup"] input[type="radio"]{accent-color:var(--mn-orange)}
body.mny-checkout [role="radiogroup"] input[type="radio"]:focus-visible{outline-color:var(--mn-orange)}
body.mny-checkout [role="radiogroup"]>label .text-gray-600{color:var(--mn-muted)}
@media (hover:hover) and (pointer:fine){
  body.mny-checkout [role="radiogroup"]>label.border-gray-200:hover{border-color:var(--mn-edge);background-color:var(--mn-chip)}
}

/* ---------- Checkout: order summary ---------- */
body.mny-checkout .lg\:col-span-1>.bg-white .text-3xl{font-family:Poppins,Inter,sans-serif;font-weight:600;letter-spacing:-.035em;color:var(--mn-ink);font-variant-numeric:tabular-nums}
body.mny-checkout .lg\:col-span-1>.bg-white .text-green-700{color:var(--mn-green)}
@media (min-width:1024px){body.mny-checkout .lg\:col-span-1>.lg\:sticky{top:6.5rem}}

/* ---------- Checkout: the phone price bar sits right under the new header (88px + its 1px line; 76px up to 850px wide;
   72px up to 600px), switching at the header's own breakpoints (menu-v2.css); the old header was 80px + 1px, hence the
   page's own 81px ---------- */
body.mny-checkout #main .lg\:hidden.sticky{top:89px;border-color:var(--mn-line);--tw-shadow:0 10px 24px -18px rgba(16,29,48,.3)}
@media (max-width:850px){body.mny-checkout #main .lg\:hidden.sticky{top:77px}}
@media (max-width:600px){body.mny-checkout #main .lg\:hidden.sticky{top:73px}}
body.mny-checkout #main .lg\:hidden.sticky .text-lg{font-family:Poppins,Inter,sans-serif;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums}

/* ---------- Checkout: the header's own "Get Instant Quote" button only from 1280px wide, exactly where the old header
   showed it, so on tablets the pay button stays the only orange button (the old checkout journey, unchanged) ---------- */
@media (max-width:1279px){body.mny-checkout .mv .mv-cta-bar{display:none}}

/* ---------- Checkout: the main button keeps the quote form's ready orange (its exact colours), no glow ---------- */
body.mny-checkout button[form="checkout-form"]{
  background-image:linear-gradient(to right,#c7420d,#b83a0a);border-radius:12px;font-weight:600;letter-spacing:-.01em;--tw-shadow:var(--mn-btn-shadow);--tw-shadow-colored:var(--mn-btn-shadow)
}
body.mny-checkout button[form="checkout-form"]+p{font-size:.8125rem;line-height:1.45;color:var(--mn-soft)}
@media (hover:hover) and (pointer:fine){
  body.mny-checkout button[form="checkout-form"]:hover{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1)}
}

/* ---------- Checkout: the "before you go" pop-up (desktop mouse only) ---------- */
body.mny-checkout #main .fixed.inset-0.z-50 .fixed.inset-0.bg-gray-900{background-color:rgba(11,22,38,.55)}
body.mny-checkout #main .fixed.inset-0.z-50 .rounded-2xl{border-radius:18px}
body.mny-checkout #main .fixed.inset-0.z-50 .rounded-2xl>.bg-orange-100{width:auto;height:auto;margin-bottom:.75rem;background-color:transparent}
body.mny-checkout #main .fixed.inset-0.z-50 .rounded-2xl>.bg-orange-100>svg{width:2rem;height:2rem;color:var(--mn-orange)}
body.mny-checkout #main .fixed.inset-0.z-50 h3{font-family:Poppins,Inter,sans-serif;font-weight:600;font-size:1.3125rem;line-height:1.3;letter-spacing:-.02em;color:var(--mn-ink)}
body.mny-checkout #main .fixed.inset-0.z-50 .space-y-3>button{min-height:3rem;border-radius:12px;background-color:var(--mn-orange);font-weight:600}
body.mny-checkout #main .fixed.inset-0.z-50 .space-y-3>button:hover{background-color:var(--mn-orange-h)}
body.mny-checkout #main .fixed.inset-0.z-50 .space-y-3>a{border-radius:12px;border-color:var(--mn-edge);font-weight:600;color:var(--mn-ink)}
body.mny-checkout #main .fixed.inset-0.z-50 .space-y-3>a:hover{background-color:var(--mn-chip)}

/* ---------- Order confirmation ---------- */
body.mny-confirm #main .max-w-3xl>.bg-white .text-2xl{font-family:Poppins,Inter,sans-serif;font-weight:600;letter-spacing:-.03em;color:var(--mn-ink)}
body.mny-confirm #main .max-w-3xl>.bg-white .text-xl.font-bold{font-family:Poppins,Inter,sans-serif;font-weight:600;letter-spacing:-.02em}
body.mny-confirm #main .max-w-3xl>.bg-white .text-green-600{color:var(--mn-green)}
body.mny-confirm #main .max-w-3xl>.bg-white .text-amber-600{color:#a14a07}
body.mny-confirm #main .max-w-3xl>.bg-white .text-blue-600{color:var(--mn-ink)}
body.mny-confirm #main .max-w-3xl>.bg-white .font-medium:not(.rounded-full){color:var(--mn-ink)}
/* what happens next: a white card, steps in ink with the numbers in the brand orange */
body.mny-confirm #main .max-w-3xl>.bg-blue-50{border-radius:16px;border-color:var(--mn-line);background-color:#fff}
body.mny-confirm #main .max-w-3xl>.bg-blue-50>h3{font-size:1.1875rem;line-height:1.35}
body.mny-confirm #main .max-w-3xl>.bg-blue-50>h3>svg{color:var(--mn-orange)}
body.mny-confirm #main .max-w-3xl>.bg-blue-50 ol{font-size:.9375rem;line-height:1.55;color:var(--mn-ink)}
body.mny-confirm #main .max-w-3xl>.bg-blue-50 ol>li>span:first-child{color:var(--mn-orange-h)}
/* not paid yet: the amber family */
body.mny-confirm #main .max-w-3xl>.bg-amber-50{border-radius:16px;border-color:var(--mn-amber-line);background-color:var(--mn-amber-bg)}
body.mny-confirm #main .max-w-3xl>.bg-amber-50 .text-amber-900{color:var(--mn-amber-ink)}
/* the two buttons */
body.mny-confirm #main .max-w-3xl>.flex>a{min-height:3.25rem;border-radius:12px;font-weight:600}
body.mny-confirm #main .max-w-3xl>.flex>a.bg-blue-600{background-color:var(--mn-navy)}
body.mny-confirm #main .max-w-3xl>.flex>a.bg-blue-600:hover{background-color:#1b2d47}
body.mny-confirm #main .max-w-3xl>.flex>a.bg-gradient-to-r{background-image:linear-gradient(to right,#c7420d,#b83a0a);--tw-shadow:var(--mn-btn-shadow);--tw-shadow-colored:var(--mn-btn-shadow)}
body.mny-confirm #main .max-w-3xl>.flex>a.border-2{border-width:1.5px;border-color:var(--mn-edge);background-color:#fff;color:var(--mn-ink)}
body.mny-confirm #main .max-w-3xl>.flex>a.border-2:hover{border-color:var(--mn-edge)}
@media (hover:hover) and (pointer:fine){
  body.mny-confirm #main .max-w-3xl>.flex>a.border-2:hover{border-color:var(--mn-edge-hover);background-color:var(--mn-chip)}
}
/* "How did you hear about us?" */
body.mny-confirm #attribution-card{border-radius:16px;border-color:var(--mn-line);background-color:#fff}
body.mny-confirm #attribution-card>p.font-semibold{font-family:Poppins,Inter,sans-serif;font-size:1.0625rem;letter-spacing:-.015em;color:var(--mn-ink)}
body.mny-confirm #attribution-card .attr-btn{min-height:2.75rem;border-color:var(--mn-edge);background-color:var(--mn-chip);font-size:.9375rem;color:var(--mn-ink)}
body.mny-confirm #attribution-card .attr-btn:hover{border-color:var(--mn-edge)}
@media (hover:hover) and (pointer:fine){body.mny-confirm #attribution-card .attr-btn:hover{border-color:var(--mn-edge-hover);background-color:#f1efea}}
body.mny-confirm #attribution-detail{min-height:2.75rem;border-radius:12px;border-color:var(--mn-edge);font-size:1rem;color:var(--mn-ink)}
body.mny-confirm #attribution-send{min-height:2.75rem;border-radius:12px;background-color:var(--mn-navy)}
body.mny-confirm #attribution-thanks{color:var(--mn-green)}
/* help line */
body.mny-confirm #main .max-w-3xl>.text-center.mt-8 a,
body.mny-track #main .max-w-4xl>.text-center.text-sm a{color:var(--mn-orange-h);font-weight:500;text-decoration:underline;text-decoration-color:rgba(184,58,10,.35);text-underline-offset:3px}

/* ---------- Quote review (specialist quote) ---------- */
body.mny-review #main .max-w-2xl>.bg-white>.flex:first-child>.rounded-full{width:auto;height:auto;background-color:transparent}
body.mny-review #main .max-w-2xl>.bg-white>.flex:first-child>.rounded-full>svg{width:2rem;height:2rem;color:var(--mn-orange)}
body.mny-review #main .max-w-2xl>.bg-white h1{font-family:Poppins,Inter,sans-serif;font-weight:600;font-size:1.75rem;line-height:1.25;letter-spacing:-.03em;color:var(--mn-ink);text-wrap:balance}
body.mny-review #main .max-w-2xl>.bg-white>p{line-height:1.65}
body.mny-review #main .max-w-2xl>.bg-white>.bg-gray-50{border-radius:12px;border-color:var(--mn-line);background-color:var(--mn-paper);color:var(--mn-muted)}
body.mny-review #review-email-form label{font-weight:600;color:var(--mn-ink)}
body.mny-review #review-email{min-height:3rem;padding:0 .875rem;border:1.5px solid var(--mn-edge);border-radius:12px;font-size:1rem;color:var(--mn-ink)}
body.mny-review #review-email:focus{border-color:var(--mn-orange);--tw-ring-color:rgba(199,66,13,.25)}
body.mny-review #review-email-form button{min-height:3rem;border-radius:12px;background-color:var(--mn-orange);font-weight:600}
body.mny-review #review-email-form button:hover{background-color:var(--mn-orange-h)}
body.mny-review #review-email-form button:disabled{opacity:.6}
body.mny-review #main .max-w-2xl>.bg-white a{color:var(--mn-orange-h)}
@media (max-width:479px){body.mny-review #review-email-form .flex{flex-direction:column}}

/* ---------- Order tracking ---------- */
/* search card */
body.mny-track #main .max-w-4xl>.bg-white.max-w-md{position:relative}
body.mny-track #main .max-w-4xl label{font-weight:600;color:var(--mn-ink)}
body.mny-track #track-order-number{min-height:3rem;border-color:var(--mn-edge);border-radius:12px;font-size:1rem;color:var(--mn-ink)}
body.mny-track #track-order-number:focus{--tw-ring-color:var(--mn-orange)}
body.mny-track #main form button[type="submit"]{min-height:3.25rem;border-radius:12px;background-image:linear-gradient(to right,#c7420d,#b83a0a);font-weight:600;--tw-shadow:var(--mn-btn-shadow);--tw-shadow-colored:var(--mn-btn-shadow)}
body.mny-track #main .max-w-4xl ul svg.text-blue-600{color:var(--mn-orange)}
/* notices */
body.mny-track #main .bg-red-50{border-radius:12px;border-color:#f3c7c2;background-color:#fdf3f2}
body.mny-track #main .bg-red-50 .text-red-800{color:#8f1d14}
body.mny-track #main .max-w-4xl>.bg-green-50,
body.mny-track #main .max-w-4xl>.bg-white .bg-green-50{border-radius:12px;border-color:var(--mn-green-line);background-color:var(--mn-green-tint)}
body.mny-track #main .max-w-4xl>.bg-amber-50{border-radius:16px;border-color:var(--mn-amber-line);background-color:var(--mn-amber-bg)}
body.mny-track #main .max-w-4xl>.bg-amber-50 .text-amber-900,
body.mny-track #main .max-w-4xl>.bg-amber-50 .text-amber-800{color:var(--mn-amber-ink)}
body.mny-track #main .max-w-4xl>.bg-amber-50 svg.text-amber-600{color:var(--mn-amber-icon)}
body.mny-track #main .max-w-4xl>.bg-amber-50 a[href^="tel:"]{color:var(--mn-amber-ink)}
body.mny-track #main .max-w-4xl>.bg-amber-50 a[href*="/payment/"]{min-height:3rem;border-radius:12px;background-image:linear-gradient(to right,#c7420d,#b83a0a);font-weight:600;--tw-shadow:var(--mn-btn-shadow);--tw-shadow-colored:var(--mn-btn-shadow)}
/* the order card */
body.mny-track #main .max-w-4xl>.bg-white h1{font-family:Poppins,Inter,sans-serif;font-weight:600;font-size:1.625rem;line-height:1.25;letter-spacing:-.03em;color:var(--mn-ink)}
body.mny-track #main .max-w-4xl>.bg-white h3{font-size:1.0625rem}
body.mny-track #main .max-w-4xl>.bg-white .bg-\[\#F86011\]{background-color:var(--mn-orange)}
body.mny-track #main .max-w-4xl>.bg-white .text-\[\#F86011\]{color:var(--mn-orange-h)}
body.mny-track #main .max-w-4xl>.bg-white .border-gray-300.rounded-full{border-color:var(--mn-rest)}
body.mny-track #main .max-w-4xl>.bg-white p.text-gray-400{color:#6b7682}
body.mny-track #main .max-w-4xl>.bg-white dd{color:var(--mn-ink)}
body.mny-track #main .max-w-4xl>.bg-white .border-gray-200{border-color:var(--mn-line)}
/* the two buttons under the order */
body.mny-track #main .max-w-4xl>.bg-white>.flex.gap-4>a{min-height:3.25rem;border-radius:12px;font-weight:600}
body.mny-track #main .max-w-4xl>.bg-white>.flex.gap-4>a.bg-blue-600{background-color:var(--mn-navy)}
body.mny-track #main .max-w-4xl>.bg-white>.flex.gap-4>a.bg-blue-600:hover{background-color:#1b2d47}
body.mny-track #main .max-w-4xl>.bg-white>.flex.gap-4>a.border-2{border-width:1.5px;border-color:var(--mn-edge);color:var(--mn-ink)}
body.mny-track #main .max-w-4xl>.bg-white>.flex.gap-4>a.border-2:hover{border-color:var(--mn-edge)}
@media (hover:hover) and (pointer:fine){
  body.mny-track #main .max-w-4xl>.bg-white>.flex.gap-4>a.border-2:hover{border-color:var(--mn-edge-hover);background-color:var(--mn-chip)}
}
@media (max-width:479px){body.mny-track #main .max-w-4xl>.bg-white>.flex.gap-4{flex-direction:column}}
/* the help line under the search card had no gap in the search state */
body.mny-track #main .max-w-4xl>.max-w-md+.text-center{margin-top:1.5rem}

/* ---------- Old outline icons: buttons keep their words, the hint list gets the drawn dot (status marks stay) ---------- */
body.mny-confirm #main .max-w-3xl>.flex>a>svg,
body.mny-confirm #main .max-w-3xl>.bg-blue-50>h3>svg,
body.mny-track #main .max-w-4xl>.bg-amber-50 a[href*="/payment/"]>svg{display:none}
body.mny-track #main .max-w-4xl>.bg-white.max-w-md ul>li>svg{display:none}
body.mny-track #main .max-w-4xl>.bg-white.max-w-md ul>li::before{content:"";flex:none;width:6px;height:6px;margin:.5em .75rem 0 0;border-radius:50%;background:var(--mn-orange)}
html[dir="rtl"] body.mny-track #main .max-w-4xl>.bg-white.max-w-md ul>li::before{margin:.5em 0 0 .75rem}
/* keyboard focus on a round choice is round */
body.mny-checkout [role="radiogroup"] input[type="radio"]{border-radius:50%}

/* ---------- Phones: a little less padding inside the cards, so the text gets the width ---------- */
@media (max-width:479px){
  body.mny-confirm #main .max-w-3xl>.bg-white.rounded-2xl,
  body.mny-review #main .max-w-2xl>.bg-white.rounded-2xl,
  body.mny-track #main .max-w-4xl>.bg-white.rounded-xl{padding:1.5rem 1.25rem}
  body.mny-review #main .max-w-2xl>.bg-white h1{font-size:1.5rem}
  body.mny-track #main .max-w-4xl>.bg-white h1{font-size:1.4375rem}
  /* the order number gets the full width (it used to break after "LS-"); status and delivery date go under it */
  body.mny-track #main .max-w-4xl>.bg-white>.flex.justify-between:first-child{flex-direction:column;align-items:flex-start;gap:.875rem}
  body.mny-track #main .max-w-4xl>.bg-white>.flex.justify-between:first-child>.text-right{text-align:start}
  body.mny-track #main .max-w-4xl>.bg-amber-50 a[href*="/payment/"]{display:flex;width:100%;justify-content:center;white-space:nowrap;padding-inline:1rem}
}

/* ---------- Print (an order confirmation is often printed or saved as PDF): no band, dark text ---------- */
@media print{
  body.mny-checkout #main>.bg-gray-50>.max-w-6xl>.mb-4:first-child,
  body.mny-confirm #main .max-w-3xl>.text-center.mb-8:first-child,
  body.mny-track #main .max-w-4xl>.text-center.mb-8:first-child{margin-top:0;background:none;box-shadow:none;clip-path:none;color:var(--mn-ink)}
  body.mny-checkout #main>.bg-gray-50>.max-w-6xl>.mb-4:first-child>:is(h1,p,a),
  body.mny-confirm #main .max-w-3xl>.text-center.mb-8:first-child>:is(h1,p),
  body.mny-track #main .max-w-4xl>.text-center.mb-8:first-child>:is(h1,p){color:var(--mn-ink)}
}

/* ---------- Arabic: Cairo wherever this file names a face, no letter spacing ---------- */
html[dir="rtl"] body.money-v2 #main :is(h1,h2,h3,.text-3xl,.text-2xl,.text-lg,.text-xl,p.font-semibold){font-family:Cairo,Inter,Tahoma,sans-serif;letter-spacing:0}
html[dir="rtl"] body.money-v2 #main h1{font-weight:700;line-height:1.45}
html[dir="rtl"] body.mny-checkout #main>.bg-gray-50>.max-w-6xl>.mb-4:first-child>h1,
html[dir="rtl"] body.mny-confirm #main .max-w-3xl>.text-center.mb-8:first-child>h1,
html[dir="rtl"] body.mny-track #main .max-w-4xl>.text-center.mb-8:first-child>h1,
html[dir="rtl"] body.mny-track #main .max-w-4xl>.bg-white h1,
html[dir="rtl"] body.mny-review #main .max-w-2xl>.bg-white h1{font-family:Cairo,Inter,Tahoma,sans-serif;font-weight:700;letter-spacing:0;line-height:1.45}
html[dir="rtl"] body.money-v2 #main :is(h2,h3){font-weight:700}
html[dir="rtl"] body.money-v2 #main :is(button,a,label,p,span){letter-spacing:0}

/* ---------- Languages with long words ---------- */
html:is([lang="de"],[lang="cy"]) body.money-v2 #main h1{hyphens:auto;hyphenate-limit-chars:10 4 4;overflow-wrap:break-word}

/* ---------- One word of the heading in the brand orange (Mohamed, 8 Oct 2026; word per page in config/h1_accent.php) ---------- */
body.money-v2 #main h1 span.sv2-hl{color:var(--mn-accent)}
body.mny-review #main h1 span.sv2-hl{color:var(--mn-orange)}
