/* Chondrolax MA order page. One surface: the order card on the brand's blue grid field, with Badia (in her
   ceremonial caftan) and the pack sitting on the card's top edge, her open hand presenting the pack.
   Adapted from the Artroflex / Hondro order card (same tokens, same card, field, price and success parts), set
   right-to-left in Tajawal; prices and the brand name keep the Sharp Grotesk display cut of the ad's CTA screen. */

@font-face { font-family: "Tajawal"; src: url("../fonts/Tajawal-Medium.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Tajawal"; src: url("../fonts/Tajawal-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Tajawal Display"; src: url("../fonts/Tajawal-ExtraBold.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Sharp Price"; src: url("../fonts/SharpGroteskSmBold25.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Sharp Label"; src: url("../fonts/SharpGrotesk-Medium20.woff2") format("woff2"); font-display: swap; }

:root {
  --blue: #261fec;
  --white: #fcfaff;
  --red: #e30e2c;
  --red-deep: #c50d27;
  --red-tint: rgb(227 14 44 / .1);
  --blue-text-2: #5e58f1;
  --blue-rule: rgb(38 31 236 / .16);
  --blue-line: rgb(38 31 236 / .3);
  --blue-tint: rgb(38 31 236 / .08);
  --shadow-deep: rgb(0 0 0 / .42);
  --font-body: "Tajawal", "Segoe UI", Tahoma, sans-serif;
  --font-head: "Tajawal Display", "Tajawal", Tahoma, sans-serif;
  --font-price: "Sharp Price", "Arial Narrow", sans-serif;
  --font-latin: "Sharp Label", Arial, sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.5rem;
  --card: min(100% - 2rem, 30rem);
  color-scheme: light;
  accent-color: var(--blue);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100svh;
  color: var(--blue);
  font: 400 1.0625rem/1.6 var(--font-body);
  background-color: var(--blue);
  background-image:
    radial-gradient(60% 42% at 50% 16%, rgb(252 250 255 / .22), rgb(252 250 255 / 0) 70%),
    linear-gradient(to left, rgb(252 250 255 / .06) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(252 250 255 / .06) 1px, transparent 1px),
    radial-gradient(125% 110% at 50% 40%, rgb(0 0 0 / 0) 55%, rgb(0 0 0 / .22) 100%);
  background-size: auto, 72px 72px, 72px 72px, auto;
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  font-synthesis: none;
  overflow-x: clip;
}
html.fonts-wait body { visibility: hidden; animation: fonts-wait-end 0s 2.5s forwards; }
@keyframes fonts-wait-end { to { visibility: visible; } }
h1, p, figure, ul { margin: 0; }
h1 { font-weight: 400; text-wrap: balance; }
ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
em { font-style: normal; }
strong { font-weight: 400; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
::selection { background: var(--blue); color: var(--white); }
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.num { font-family: var(--font-price); font-variant-numeric: tabular-nums; unicode-bidi: isolate; direction: ltr; }

.page { display: grid; justify-items: center; align-content: start; gap: var(--space-4); min-height: 100svh; padding: clamp(.5rem, 3vw, 2rem) 0 max(1.25rem, env(safe-area-inset-bottom)); }

/* ---- the stage: Badia and the pack sit on the card's top edge ------------------------------------------- */
.order { position: relative; width: var(--card); }
.stage { position: relative; height: clamp(15.5rem, 64vw, 20rem); margin-bottom: -3.25rem; z-index: 2; pointer-events: none; }
.stage-light { position: absolute; inset: 4% 0 auto 34%; height: 78%; border-radius: 50%; background: radial-gradient(closest-side, rgb(252 250 255 / .55), rgb(252 250 255 / 0)); filter: blur(6px); }
/* Badia sits at the start side (right in Arabic); her open palm points across to the pack */
.stage-badia { position: absolute; right: 2%; bottom: 0; height: 100%; width: auto; filter: drop-shadow(0 22px 26px var(--shadow-deep)); }
/* the pack stands on the card's top edge, at the height of her open palm */
.stage-pack { position: absolute; left: 14%; bottom: 2.75rem; width: clamp(5.25rem, 22vw, 7.25rem); transform: rotate(-4deg); filter: drop-shadow(0 18px 20px var(--shadow-deep)); }
/* the benefit tag: one disc and three short lines, in the free corner above the pack */
.callout { position: absolute; left: 0; top: 1%; display: flex; align-items: flex-start; gap: var(--space-2); }
.callout-tag { display: grid; gap: 1px; clip-path: polygon(0 0, 100% 0, 100% 100%, 8px 100%, 0 calc(100% - 8px)); }
.callout-disc { display: grid; place-items: center; width: clamp(2.5rem, 10vw, 3.25rem); aspect-ratio: 1; border-radius: 50%; background: var(--white); box-shadow: 0 0 0 4px rgb(252 250 255 / .26), 0 10px 20px -8px rgb(0 0 0 / .5); }
.callout-disc img { width: 84%; }
.callout b { display: flex; align-items: center; gap: .3125rem; padding: .25rem .5625rem .1875rem; background: var(--white); color: var(--blue); font: 700 clamp(.6875rem, 2.9vw, .8125rem)/1.35 var(--font-body); white-space: nowrap; }
.callout b::before { content: ""; width: .375rem; height: .375rem; flex: none; border-radius: 50%; background: var(--red); }

/* ---- the card ------------------------------------------------------------------------------------------- */
.order-card, .order-success {
  position: relative;
  border-radius: 18px;
  background: var(--white);
  color: var(--blue);
  box-shadow: 0 34px 70px -28px var(--shadow-deep), 0 10px 24px -12px rgb(0 0 0 / .22);
}
.order-card { display: grid; gap: var(--space-4); padding: 4rem clamp(1.125rem, 4vw, 1.75rem) clamp(1.25rem, 4vw, 1.75rem); }
/* the honeypot hides in place: an offset off the side would widen a right-to-left page */
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.brand { justify-self: start; font: 1.125rem/1 var(--font-price); letter-spacing: -.02em; }
.order-head { display: grid; justify-items: start; gap: var(--space-3); }
.chip-save { padding: .5rem .75rem .375rem; background: var(--red); color: var(--white); font: 1.375rem/1 var(--font-price); letter-spacing: -.01em; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); }
.order-head h1 { font: clamp(1.875rem, 1.2rem + 3vw, 2.5rem)/1.12 var(--font-head); }
.order-head h1 em { display: block; color: var(--red); }
.order-head h1:focus { outline: none; }

.order-price { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-3); border-block: 1px solid var(--blue-rule); }
.order-price p { display: grid; gap: .375rem; }
.order-price p > span { font: 700 .8125rem/1 var(--font-body); color: var(--blue-text-2); }
.price-old s { position: relative; justify-self: start; font: 1.5rem/1 var(--font-price); color: var(--blue-text-2); text-decoration: none; white-space: nowrap; }
.price-old s::after { content: ""; position: absolute; inset: 50% -.06em auto; height: 3px; translate: 0 -50%; background: var(--red); }
.price-new { justify-items: end; }
.price-new strong { font: clamp(2.75rem, 2rem + 3vw, 3.5rem)/.9 var(--font-price); letter-spacing: -.03em; white-space: nowrap; }
.price-unit { font: 700 max(.42em, .9375rem)/1 var(--font-body); letter-spacing: 0; }

.order-steps { display: grid; gap: var(--space-3); }
.order-progress { height: 4px; border-radius: 999px; background: var(--blue-tint); overflow: hidden; }
.order-progress-bar { display: block; height: 100%; border-radius: inherit; background: var(--blue); transform: scaleX(var(--progress, .08)); transform-origin: right; transition: transform .6s var(--ease), background-color .3s; }
.order-card.is-ready .order-progress-bar { background: var(--red); }
.order-progress-text { font: .9375rem/1.55 var(--font-body); color: var(--blue-text-2); text-wrap: pretty; }

.field { display: grid; gap: .375rem; }
.field label { font: 700 .875rem/1 var(--font-body); }
.field input {
  width: 100%;
  min-height: 3.375rem;
  padding: 0 var(--space-4);
  border: 1.5px solid var(--blue-line);
  border-radius: 10px;
  background: var(--white);
  font: 1.125rem/1.2 var(--font-body);
  color: var(--blue);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field input::placeholder { color: var(--blue-text-2); opacity: 1; }
.field input:hover { border-color: var(--blue); }
.field input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgb(38 31 236 / .16); }
.field input[aria-invalid="true"] { border-color: var(--red-deep); border-width: 2px; box-shadow: 0 0 0 4px rgb(227 14 44 / .18); }
.field-hint { display: none; align-items: flex-start; gap: .375rem; font: .9375rem/1.45 var(--font-body); }
.field-hint::before { content: ""; flex: none; width: .5rem; height: .5rem; margin-top: .45rem; border-radius: 50%; background: var(--red); }
.field:has([aria-invalid="true"]) .field-hint { display: flex; }
/* the number reads left to right, in the price figures: 06 12 34 56 78 */
.field input.phone { font-family: var(--font-price); letter-spacing: .03em; text-align: left; }
.field input.phone::placeholder { font-family: var(--font-price); }

.order-total { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--blue-rule); }
.order-total > span { font: 700 .875rem/1.3 var(--font-body); color: var(--blue-text-2); }
.order-total strong { font: clamp(1.75rem, 1.4rem + 1vw, 2.25rem)/1 var(--font-price); letter-spacing: -.02em; white-space: nowrap; }
.order-shipping { margin-top: calc(-1 * var(--space-2)); font: .9375rem/1.5 var(--font-body); color: var(--blue-text-2); }
.form-error { padding: var(--space-3) var(--space-4); border-right: 2px solid var(--red); background: var(--red-tint); font: .9375rem/1.5 var(--font-body); }
.form-error:empty { display: none; }

.button-submit {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-5);
  width: 100%; min-height: 4.25rem; padding: var(--space-4) var(--space-5); border: 0;
  background: var(--red); color: var(--white);
  font: 1.5rem/1.05 var(--font-head);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  transition: background-color .2s var(--ease);
}
.button-submit:hover { background: var(--blue); }
.button-submit:focus-visible { clip-path: none; }
.button-submit svg { width: 1.5rem; height: 1.5rem; stroke-width: 1.9; transition: transform .35s var(--ease); }
.button-submit:hover svg { transform: translateX(-4px); }
.button-sending { display: none; }
form[data-state="sending"] .button-label { display: none; }
form[data-state="sending"] .button-sending { display: inline; }
form[data-state="sending"] .button-submit { cursor: progress; background: var(--blue-tint); color: var(--blue); }

.order-assurance { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: var(--space-2); font: 700 .8125rem/1.3 var(--font-body); color: var(--blue-text-2); }
.order-assurance li { display: flex; align-items: center; gap: .375rem; }
.order-assurance svg { width: 1.0625rem; height: 1.0625rem; color: var(--blue); }

/* ---- the confirmation answers back ---------------------------------------------------------------------- */
.order-success { display: grid; justify-items: center; gap: var(--space-4); padding: 4.25rem clamp(1.25rem, 4vw, 2rem) clamp(1.75rem, 4vw, 2.5rem); text-align: center; }
.order-success:focus { outline: none; }
.order-success h1 { font: clamp(1.875rem, 1.3rem + 2.4vw, 2.5rem)/1.15 var(--font-head); }
.order-success p { max-width: 30ch; font: 1.125rem/1.55 var(--font-body); color: var(--blue-text-2); }
.order-success .success-recap { padding: var(--space-3) var(--space-4); background: var(--blue-tint); font: 700 1.0625rem/1.5 var(--font-body); color: var(--blue); }
.order-success .success-recap [lang="en"] { font-family: var(--font-latin); }
.order-success .success-keep { font-size: 1rem; }
.order-success .preview-note { font-size: .875rem; }
.success-burst { position: relative; display: grid; place-items: center; width: 5rem; height: 5rem; border-radius: 50%; background: var(--red); color: var(--white); }
.success-check { width: 2.5rem; height: 2.5rem; stroke-width: 2.2; stroke-dasharray: 26; stroke-dashoffset: 26; animation: draw-check .55s .2s var(--ease) forwards; }
.success-burst i { position: absolute; width: .5rem; height: .75rem; border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; background: var(--blue); opacity: 0; animation: mist-drop 1.1s var(--ease) forwards; }
.success-burst i:nth-of-type(1) { --a: 0deg; } .success-burst i:nth-of-type(2) { --a: 60deg; animation-delay: .05s; }
.success-burst i:nth-of-type(3) { --a: 120deg; animation-delay: .1s; } .success-burst i:nth-of-type(4) { --a: 180deg; animation-delay: .05s; }
.success-burst i:nth-of-type(5) { --a: 240deg; animation-delay: .12s; } .success-burst i:nth-of-type(6) { --a: 300deg; animation-delay: .08s; }
@keyframes draw-check { to { stroke-dashoffset: 0; } }
@keyframes mist-drop { 0% { opacity: 1; transform: rotate(var(--a)) translateY(-1.5rem) scale(.4); } 100% { opacity: 0; transform: rotate(var(--a)) translateY(-4.25rem) scale(1); } }

/* ---- the two small legal links, in French ---------------------------------------------------------------- */
.legal-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem 1.25rem; font: .8125rem/1.4 var(--font-latin); color: rgb(252 250 255 / .78); }
.legal-links a { text-decoration: underline; text-underline-offset: .2em; text-decoration-color: rgb(252 250 255 / .4); }
.legal-links a:hover { color: var(--white); }
.legal-links :focus-visible { outline-color: var(--white); }

/* ---- entrance: the card rises, then Badia and the pack settle onto its edge ------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  .order-card, .order-success { animation: rise .7s var(--ease) both; }
  .stage-badia { animation: settle .8s .12s var(--ease) both; }
  .stage-pack { animation: settle-pack .8s .22s var(--ease) both; }
  .callout { animation: fade .5s .55s var(--ease) both; }
  .stage-light { animation: fade 1.2s .1s var(--ease) both; }
}
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes settle { from { opacity: 0; transform: translateY(22px) scale(.97); } }
@keyframes settle-pack { from { opacity: 0; transform: translateY(26px) rotate(-10deg); } }
@keyframes fade { from { opacity: 0; } }

@media (max-width: 380px) {
  .order-assurance { grid-template-columns: 1fr; justify-content: start; }
  .callout-disc { width: 2.25rem; }
}