/* ============================================================================
   Clutch Day — two-step handoff popup (step 1: contact → step 2: app checkout)
   ----------------------------------------------------------------------------
   Mounted by cd-popup.js into the [data-cdco] div. Every class is scoped under
   .cdco, so nothing here can leak into the page.

   REWRITTEN for AW2. The ported version was a WHITE card using hued greys
   (#454F5B, #DCE1E8, #8A929C) and a second cyan (#00A6CC). Dropping a white
   sheet on top of a page that is black end to end broke the illusion at the
   single highest-intent moment on it, and the second cyan is off-system.

   This version:
     • takes its values from aw2-design.css tokens, with literal fallbacks so
       the popup still renders if it is ever mounted on a page without them,
     • uses ONE cyan, #00D2FF, and never puts it on a letterform,
     • keeps 16px inputs so iOS does not zoom the viewport on focus,
     • keeps every tap target at 44px or taller.
   Nothing about the popup's markup, validation or submit path is styled here
   that changes its behaviour. Classes are unchanged apart from the added
   .cdco-mark and .cdco-consent.
   ========================================================================== */

.cdco {
  position: fixed; inset: 0; z-index: 300;
  display: none; align-items: flex-start; justify-content: center;
  padding: 24px 16px; overflow-y: auto;
  font-family: var(--cd-font, "TT Firs Neue"), -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.cdco.open { display: flex; }

.cdco-backdrop {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.82);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.cdco-card {
  position: relative; z-index: 1;
  width: 100%; max-width: 420px; margin: auto;
  background: var(--cd-surface, rgba(255,255,255,0.07));
  border: 1px solid var(--cd-stroke, rgba(255, 255, 255, 0.14));
  border-radius: var(--cd-radius-xl, 28px);
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(0, 210, 255, 0.08);
}

/* ------------------------------------------------------------------ header */
.cdco-head {
  position: relative;
  background: #000;
  padding: 15px 46px 15px 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  color: #fff;
}
/* The accent lives here as a 2px rule, never as ink. */
.cdco-head::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--cd-accent-gradient, linear-gradient(90deg, #00D2FF, rgba(0, 210, 255, 0.75)));
}
.cdco-head-l {
  display: flex; align-items: center; gap: 9px;
  font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.86);
}
.cdco-mark { height: 13px; width: auto; display: block; opacity: 0.95; }

.cdco-x {
  position: absolute; top: 50%; right: 10px; transform: translateY(-50%);
  width: 44px; height: 44px;                 /* 44px tap target, small ink */
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; padding: 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 22px; line-height: 1; cursor: pointer;
  transition: color 0.12s;
}
.cdco-x:hover { color: #fff; }
.cdco-x:focus-visible {
  outline: 2px solid var(--cd-accent, #00D2FF); outline-offset: -6px; border-radius: 50%;
}

/* -------------------------------------------------------------------- body */
.cdco-body { padding: 22px 20px 24px; }

.cdco-h2 {
  margin: 0 0 7px;
  font-size: 23px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.14;
  color: var(--cd-text, #fff);
}
.cdco-sub {
  margin: 0 0 18px;
  font-size: 14px; line-height: 1.5; font-weight: 300;
  color: var(--cd-text-secondary, rgba(255, 255, 255, 0.72));
}

/* --------------------------------------------------------- step indicator */
.cdco-steps {
  display: flex; align-items: center; gap: 9px; margin-bottom: 17px;
  font-size: 10px; font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--cd-text-tertiary, rgba(255, 255, 255, 0.6));
}
.cdco-steps .on { color: #fff; }           /* current step is white, not cyan */
.cdco-steps .bar {
  flex: 1; height: 2px; border-radius: 2px;
  background: var(--cd-stroke-soft, rgba(255, 255, 255, 0.1)); overflow: hidden;
}
.cdco-steps .bar i {
  display: block; width: 50%; height: 100%;
  background: var(--cd-accent-gradient, linear-gradient(90deg, #00D2FF, rgba(0, 210, 255, 0.75)));
}

/* ------------------------------------------------------------------ fields */
.cdco-label {
  display: block; margin-bottom: 7px;
  font-size: 10px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--cd-text-tertiary, rgba(255, 255, 255, 0.6));
}
.cdco-input {
  box-sizing: border-box; width: 100%;
  background: var(--cd-surface-2, rgba(255, 255, 255, 0.05));
  border: 1px solid var(--cd-stroke, rgba(255, 255, 255, 0.14));
  border-radius: var(--cd-radius-md, 12px);
  padding: 14px;
  font-family: inherit;
  font-size: 16px;                          /* 16px or iOS zooms the page */
  font-weight: 400;
  color: var(--cd-text, #fff);
  outline: none; margin-bottom: 16px;
  transition: border-color 0.12s, box-shadow 0.12s, background-color 0.12s;
}
.cdco-input::placeholder { color: rgba(255, 255, 255, 0.36); }
.cdco-input:focus {
  border-color: var(--cd-accent, #00D2FF);
  background: rgba(255, 255, 255, 0.07);
  box-shadow: 0 0 0 3px rgba(0, 210, 255, 0.18);
}
.cdco-input.err { border-color: var(--cd-danger, #D92D20); }

.cdco-fielderr {
  display: none;
  margin: -10px 0 12px;
  font-size: 12px; line-height: 1.4; color: var(--cd-danger, #D92D20);
}
.cdco-fielderr.show { display: block; }

/* ----------------------------------------------------------------- consent */
/* Compliance text. Quiet, but never hidden and never below the fold of the
   card: it sits directly above the button that acts on it. */
.cdco-consent {
  margin: 2px 0 14px;
  font-size: 11px; line-height: 1.45; font-weight: 300;
  color: rgba(255, 255, 255, 0.5);
}

/* ------------------------------------------------------------------ action */
.cdco-btn {
  width: 100%; box-sizing: border-box;
  border: none; border-radius: 9999px;
  padding: 17px;
  font-family: inherit; font-size: 16px; font-weight: 500;
  color: #000;                              /* black ON cyan, never cyan ink */
  background: var(--cd-accent-gradient, linear-gradient(90deg, #00D2FF, rgba(0, 210, 255, 0.75)));
  box-shadow: var(--cd-shadow-accent, 0 10px 26px rgba(0, 210, 255, 0.35));
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  transition: filter 0.15s, transform 0.12s;
}
.cdco-btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
.cdco-btn:active { transform: scale(0.975); }
.cdco-btn[disabled] { opacity: 0.7; cursor: default; transform: none; }
.cdco-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.cdco-ts { display: flex; justify-content: center; margin: 0 0 14px; min-height: 0; }
.cdco-ts:empty { margin: 0; }

/* Block, not flex: this line wraps to two lines on a narrow phone, and as a
   flex row the dot was centred against the whole block and drifted away from
   the text. Inline-block keeps it tucked against the first word. */
.cdco-trust {
  display: block; margin-top: 14px; text-align: center;
  font-size: 12px; font-weight: 300; line-height: 1.45;
  color: var(--cd-text-tertiary, rgba(255, 255, 255, 0.6));
}
.cdco-trust .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--cd-accent, #00D2FF);
  display: inline-block; vertical-align: middle;
  margin-right: 7px; position: relative; top: -1px;
}

@media (prefers-reduced-motion: reduce) {
  .cdco-btn:hover, .cdco-btn:active { transform: none; }
}