/* Virtual Try On, for Exella.

   The tokens below are lifted from id-dev.cloud-ace.com so this reads as a
   Cloud Ace product rather than as something wearing its logo. Plus Jakarta
   Sans, the brand blue and its deep companion, the navy ink, the 11px control
   radius, the soft navy tinted shadows.

   One deliberate departure. Cloud Ace's system is built for a consultancy site:
   gradients, tinted cards, generous fills. Applied on top of fashion imagery it
   turns into a dashboard with photographs in it. So the system runs the
   instrument: header, tabs, controls, status, cards. The imagery sits in quiet
   frames with nothing laid over it. */

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/assets/fonts/PlusJakartaSans-variable.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #fff;
  --bg: #f7f9fd;
  --surface: #fff;
  --surface-2: #eef3fb;
  --tint: #e8f0fd;
  --line: #e3e9f3;
  --line-2: #d3ddec;
  --ink: #0d1730;
  --ink-soft: #47526b;
  --ink-faint: #7a8398;
  --brand: #1a66e6;
  --brand-deep: #0c47b4;
  --cyan: #1fb6d4;
  --brand-tint: #eaf1fe;
  --pos: #129a70;
  --danger: #e0576e;

  --shadow-sm: 0 1px 2px #0d17300a, 0 2px 8px #0d17300d;
  --shadow: 0 4px 14px #0d17300f, 0 18px 46px #0d173014;
  --shadow-brand: 0 14px 40px #1a66e638;

  --sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --maxw: 1180px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0; color: var(--ink); }
p { margin: 0; }
button, input, a { font-family: inherit; }

:where(button, a, [tabindex]):focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 6px;
}

.eyebrow {
  font-size: 11.5px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--brand);
}

/* ---------------- header ---------------- */
.topbar {
  position: sticky; top: 0; z-index: 40;
  background: #ffffffe8; backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}
.bar {
  max-width: var(--maxw); margin: 0 auto; padding: 0 26px;
  height: 66px; display: flex; align-items: center; gap: 22px;
}
.brand { display: flex; align-items: center; gap: 13px; text-decoration: none; }
.logo { height: 23px; width: auto; display: block; }
.brandsep { width: 1px; height: 19px; background: var(--line-2); }
.brandname { font-weight: 700; font-size: 15px; color: var(--ink); letter-spacing: -.01em; }

.mainnav { display: flex; gap: 4px; margin-left: auto; }
.navtab {
  border: 0; background: none; cursor: pointer; color: var(--ink-faint);
  font-size: 14.5px; font-weight: 600; letter-spacing: -.01em;
  padding: 9px 14px; border-radius: 9px; transition: color .18s, background .18s;
}
.navtab:hover { color: var(--ink); background: var(--surface-2); }
.navtab.is-on { color: var(--brand); background: var(--brand-tint); }

.badges { display: flex; gap: 8px; }
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; padding: 7px 12px; border-radius: 999px;
  border: 1px solid var(--line-2); background: #fff; color: var(--ink-soft);
  box-shadow: var(--shadow-sm); white-space: nowrap;
}
.pill-quiet { color: var(--ink-faint); font-weight: 500; }
.dot {
  width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: var(--pos); box-shadow: 0 0 0 3px #129a7022;
}

main { max-width: var(--maxw); margin: 0 auto; padding: 52px 26px 30px; }

/* ---------------- lede ---------------- */
.lede { max-width: 640px; margin-bottom: 40px; }
.lede h1 {
  margin: 14px 0 0; font-weight: 800;
  font-size: clamp(30px, 4.2vw, 46px); line-height: 1.08; letter-spacing: -.028em;
}
.sub { margin-top: 16px; font-size: 16px; color: var(--ink-soft); max-width: 560px; }

/* ---------------- stage ---------------- */
.stage { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.panel {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 18px; padding: 18px; box-shadow: var(--shadow-sm);
}
.panelhead {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 13px; min-height: 24px;
}
.panelhead h2 { font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.hint { font-size: 12.5px; color: var(--ink-faint); text-align: right; }

/* the photograph itself: quiet, no ornament, nothing laid on top */
.frame {
  position: relative; aspect-ratio: 3 / 4; width: 100%; overflow: hidden;
  border-radius: 13px; background: var(--surface-2);
  border: 1px solid var(--line);
}
.frame > video, .frame > img { width: 100%; height: 100%; object-fit: cover; display: block; }
#cam { transform: scaleX(-1); }

.blank {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px; padding: 26px;
  text-align: center; color: var(--ink-faint);
}
.blank p { font-size: 13.5px; max-width: 210px; line-height: 1.5; }

/* framing an upload: same oval, same 3:4, same result as the camera path */
#crop {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; cursor: grab; touch-action: none;
}
#crop:active { cursor: grabbing; }
.zoomrow { display: flex; align-items: center; gap: 12px; margin-top: 13px; }
.zoomrow label {
  font-size: 11.5px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-faint);
}
.zoomrow input { flex: 1; accent-color: var(--brand); }

.guide { position: absolute; inset: 0; pointer-events: none; }
.guide span {
  position: absolute; left: 50%; top: 41%; transform: translate(-50%, -50%);
  width: 47%; aspect-ratio: 3 / 4; border-radius: 50%;
  border: 1.5px dashed #ffffffc4;
}
/* the same oval on the empty frame, in ink rather than white, so a blank
   panel already tells you what it wants */
.guide-idle span { border-color: var(--line-2); }
.frame:has(#youImg:not([hidden])) .guide-idle,
.frame:has(#cam:not([hidden])) .guide-idle { display: none; }

/* The chosen cloth fills the result frame until the render replaces it.
   Zoomed into the middle of the flat lay rather than using the fabric macro:
   the macro is shot magnified, so at this size it showed a giant weave and
   misrepresented the print scale, which is the one thing this whole demo is
   trying to get right. 160% crops past the grey studio edge and the text
   strip some flat lays carry. */
.cloth {
  position: absolute; inset: 0; pointer-events: none;
  background-size: 160%; background-position: center;
  transition: opacity .55s ease;
}

#spin {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; object-fit: cover; cursor: ew-resize; touch-action: none;
}
.spinhint {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: #fff; background: #0d1730a8; padding: 7px 14px; border-radius: 999px;
  backdrop-filter: blur(4px); pointer-events: none; transition: opacity .3s;
}

/* ---------------- result tabs ---------------- */
.tabs {
  display: flex; gap: 3px; padding: 3px; margin-bottom: 13px;
  background: var(--surface-2); border-radius: 11px;
}
.tab {
  flex: 1; border: 0; background: none; cursor: pointer;
  font-size: 13.5px; font-weight: 600; color: var(--ink-faint);
  padding: 8px 10px; border-radius: 8px; transition: color .18s, background .18s, box-shadow .18s;
}
.tab:hover:not(.is-on) { color: var(--ink); }
.tab.is-on { background: #fff; color: var(--ink); box-shadow: var(--shadow-sm); }

/* invitation shown on a view that has not been generated yet */
.invite {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 9px; padding: 30px;
  text-align: center; background: #ffffffea; backdrop-filter: blur(3px);
}
.invite h3 { font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.invite p { font-size: 13.5px; color: var(--ink-soft); max-width: 250px; }
.invite .btn { margin-top: 6px; }
.est { font-size: 12px; color: var(--ink-faint); }

/* ---------------- the one loading treatment ---------------- */
.busy {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px;
  background: #ffffffee; backdrop-filter: blur(3px);
}
.ring { animation: spin 1.4s linear infinite; }
.ring-track { stroke: var(--line-2); }
.ring-live { stroke: var(--brand); }
@keyframes spin { to { transform: rotate(360deg); } }
.busystep { font-size: 14px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.busysub { font-size: 12.5px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }

/* ---------------- controls ---------------- */
.acts { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 14px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  cursor: pointer; border: 1px solid transparent; border-radius: 11px;
  padding: 11px 19px; font-size: 14.5px; font-weight: 600; letter-spacing: -.005em;
  transition: transform .15s, box-shadow .2s, background .2s, border-color .2s, opacity .2s;
  text-decoration: none;
}
.btn-primary {
  background: linear-gradient(120deg, var(--brand), var(--brand-deep));
  color: #fff; box-shadow: var(--shadow-brand);
}
.btn-primary:hover:not(:disabled) { transform: translateY(-1px); }
.btn-ghost { background: #fff; color: var(--ink); border-color: var(--line-2); }
.btn-ghost:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); }
.btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; transform: none; }
label.btn { display: inline-flex; }

.note { margin-top: 12px; font-size: 11.5px; line-height: 1.55; color: var(--ink-faint); }
.meta {
  margin-top: 12px; font-size: 12.5px; color: var(--ink-faint);
  font-variant-numeric: tabular-nums; min-height: 20px;
}
.meta.bad { color: var(--danger); font-weight: 600; }

/* ---------------- the scarves ---------------- */
.picker { margin-top: 40px; }
.pickhead { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.pickhead h2 { font-size: 20px; font-weight: 800; letter-spacing: -.025em; }

.rail { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; margin-top: 16px; }
.swatch {
  padding: 0; border: 1px solid var(--line); background: #fff; cursor: pointer;
  border-radius: 14px; overflow: hidden; text-align: left; display: block;
  box-shadow: var(--shadow-sm);
  transition: transform .18s, box-shadow .2s, border-color .2s;
}
.swatch:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.swatch[aria-pressed="true"] { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint), var(--shadow); }
.swatch .cloth-tile { display: block; aspect-ratio: 1; background-size: cover; background-position: center; }
.swatch .cap { display: block; padding: 10px 11px 12px; }
.swatch .nm {
  display: block; font-size: 12px; font-weight: 700; color: var(--ink);
  line-height: 1.35; letter-spacing: -.01em;
}
.swatch .pr {
  display: block; margin-top: 3px; font-size: 11.5px; color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

.styles { margin-top: 30px; }
.styles h2 { font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 11px; }
.chip {
  border: 1px solid var(--line-2); background: #fff; color: var(--ink-soft);
  cursor: pointer; font-size: 13.5px; font-weight: 600;
  padding: 9px 15px; border-radius: 999px; box-shadow: var(--shadow-sm);
  transition: color .18s, border-color .18s, background .18s;
}
.chip:hover { color: var(--ink); border-color: var(--ink-faint); }
.chip[aria-pressed="true"] {
  background: var(--brand-tint); border-color: var(--brand); color: var(--brand-deep);
}

/* ---------------- how it works ---------------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: s; }
.steps li {
  display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  padding: 18px 20px; box-shadow: var(--shadow-sm);
}
/* numbering is real here: these run in order and each one needs the last */
.steps li::before {
  counter-increment: s; content: counter(s);
  width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  background: var(--brand-tint); color: var(--brand-deep);
  font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.steps h3 { font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.steps p { font-size: 13.5px; margin-top: 2px; }
.steps .facts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.fact {
  font-size: 12px; font-weight: 600; padding: 6px 11px; border-radius: 999px;
  background: var(--surface-2); color: var(--ink-soft); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.fact.model { background: var(--brand-tint); color: var(--brand-deep); }

.notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 26px; }
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  padding: 20px; box-shadow: var(--shadow-sm);
}
.card h3 { font-size: 15px; font-weight: 700; letter-spacing: -.015em; margin-bottom: 7px; }
.card p { font-size: 13.5px; }

/* ---------------- foot ---------------- */
.foot {
  max-width: var(--maxw); margin: 0 auto; padding: 26px;
  display: flex; gap: 18px; flex-wrap: wrap;
  border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-faint);
}

/* ---------------- responsive ---------------- */
@media (max-width: 940px) {
  .stage { grid-template-columns: 1fr; }
  .rail { grid-template-columns: repeat(3, 1fr); }
  .notes { grid-template-columns: 1fr; }
  .steps li { grid-template-columns: auto 1fr; }
  .steps .facts { grid-column: 2; justify-content: flex-start; }
}
@media (max-width: 620px) {
  main { padding: 34px 18px 20px; }
  .bar { padding: 0 18px; gap: 14px; height: 60px; }
  .badges { display: none; }
  .rail { grid-template-columns: repeat(2, 1fr); }
  .brandname { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}


/* --- verification dialog ---------------------------------------------------
   Only ever shown when reCAPTCHA is configured. Sized so the widget's own
   304px iframe is never clipped, which is the usual reason a checkbox looks
   broken on a phone. */
.verify-veil {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center;
  background: rgba(13, 23, 48, .55); backdrop-filter: blur(3px); padding: 20px;
}
.verify-veil[hidden] { display: none; }
.verify-card {
  background: #fff; border-radius: 14px; padding: 28px; max-width: 400px;
  width: 100%; box-shadow: 0 24px 70px rgba(13, 23, 48, .3); text-align: center;
}
.verify-card h2 { font-size: 1.2rem; margin-bottom: 10px; }
.verify-card p { color: #5b6478; font-size: .92rem; line-height: 1.55; margin-bottom: 18px; }
#recaptchaBox { display: flex; justify-content: center; min-height: 78px; }
.verify-note { margin-top: 14px; font-size: .86rem; color: #b4402e; }
.verify-note[hidden] { display: none; }
#verifyCancel { margin-top: 16px; }