/* ============================================================================
   CTS contact panel — port of the design handoff's cts-ask.css.
   Source project: claude.ai/design/p/019e1eba-09c8-759d-bba6-5364190349ea

   TWO DEVIATIONS FROM "drop in as-is":

   1. TOKENS. The handoff assumes --line / --mist / --blue / --ink etc. exist on
      :root. They don't here — cts-site.css was never ported globally, its tokens
      live scoped inside .cp-page and .cts-chrome. So the token block below is
      declared on the component roots instead. Values are the handoff's own.

   2. BUTTON CLASS. The handoff's submit uses `.btn .btn-p`. Bootstrap is loaded
      site-wide and owns `.btn`, so the submit is `.askbtn` here. Same reason the
      marketing pages use .cp-btn rather than .btn.

   Everything else — class names, layout, dark variant, slide-over — is the
   handoff's markup contract unchanged, so the reference CSS stays recognisable.
   The slide-over rules are included but nothing mounts a sheet yet; the inline
   panel shipped first by agreement.
   ============================================================================ */

.askblk,
.askover {
    --line: #E4E7EB;
    --line-2: #EFF1F4;
    --mist: #F7F9FB;
    --ink: #0B1220;
    --muted: #55616E;      /* handoff helper-text token */
    --muted-2: #6B7681;
    --blue: #1FA9E0;
    --blue-7: #0B76A3;
    --blue-50: #EAF7FD;
    --blue-100: #D2EEFA;
    --ok-bg: #ECFDF3;
    --ok-line: #A7E8C4;
    --ok-ink: #04663C;
    --ask-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    font-family: var(--ask-sans);
}

.askblk { border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: #fff; margin-top: 34px; }
.askblk *, .askblk *::before, .askblk *::after { box-sizing: border-box; }
.askblk .hd { display: flex; gap: 20px; align-items: flex-start; padding: 26px 30px; background: var(--mist); border-bottom: 1px solid var(--line); }
.askblk .hd .ico {
    width: 42px; height: 42px; border-radius: 11px; flex: none;
    background: var(--blue-50); color: var(--blue-7);
    display: flex; align-items: center; justify-content: center;
}
.askblk .hd h3 { font-size: 21px; font-weight: 800; letter-spacing: -.025em; margin: 0; color: var(--ink); line-height: 1.25; }
.askblk .hd p { font-size: 15px; line-height: 1.6; color: var(--muted); margin: 7px 0 0; max-width: 56ch; }
.askblk .bd { padding: 26px 30px 30px; }
.askrow { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.askrow + .askrow, .askblk .bd .full { margin-top: 14px; }
.askblk label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 6px; color: var(--ink); }
.askblk label .opt { font-weight: 500; color: var(--muted-2); font-size: 12.5px; margin-left: 5px; }
.askblk .askf {
    width: 100%; height: 50px; border: 1px solid var(--line); border-radius: 10px;
    font-family: inherit; font-size: 15.5px; padding: 0 14px; color: var(--ink); background: #fff;
}
.askblk textarea.askf { height: auto; min-height: 112px; padding: 14px; line-height: 1.55; resize: vertical; }
.askblk .askf:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-100); }
.askblk .askf[aria-invalid="true"] { border-color: #C1443B; box-shadow: 0 0 0 3px #FBE6E4; }
.askblk .askf::placeholder { color: #9AA4AF; opacity: 1; }
.askhint { font-size: 12.5px; color: var(--muted-2); margin-top: 6px; line-height: 1.45; }
.askerr { display: none; font-size: 12.5px; color: #9E3229; margin-top: 6px; font-weight: 600; }
.askerr.on { display: block; }

/* topic chips */
.topics { display: flex; flex-wrap: wrap; gap: 8px; }
.topics input { position: absolute; opacity: 0; width: 0; height: 0; }
.topics label {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 15px;
    border: 1px solid var(--line); border-radius: 999px;
    font-size: 14px; font-weight: 600; cursor: pointer; background: #fff; margin: 0;
}
.topics input:checked + label { border-color: var(--blue); background: var(--blue-50); color: var(--blue-7); box-shadow: inset 0 0 0 1px var(--blue); }
.topics input:focus-visible + label { outline: 2px solid var(--blue); outline-offset: 2px; }

/* The legacy theme (assets/css/style.css) draws a DECORATIVE fake radio on any
   label that follows a radio input:
       input[type=radio] ~ label:before { content:""; border:1px solid #d2d2d5; … }
       input[type=radio] ~ label        { padding-left: 24px; }
   Both out-specify a bare `.topics label` (0,1,3) and (0,1,2) vs (0,1,1), so the
   chips rendered with a grey circle inside them and their text pushed off-centre.
   The chip IS the control here, so kill the pseudo-element and take the padding
   back with enough specificity to win. */
.askblk .topics input[type="radio"] ~ label::before,
.askblk .topics input[type="radio"] ~ label::after { content: none; display: none; }
.askblk .topics input[type="radio"] ~ label { padding: 0 15px; }

/* captcha — not in the handoff; see _ContactPanel.cshtml for why it stays */
.askcap { margin-top: 18px; }

/* footer of form */
.askfoot { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line-2); }
.askblk .askbtn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    height: 52px; padding: 0 26px; border-radius: 9px; border: 1px solid transparent;
    font-family: inherit; font-size: 15px; font-weight: 700; line-height: 1;
    background: var(--blue); color: #fff; cursor: pointer; white-space: nowrap; text-decoration: none;
}
.askblk .askbtn:hover { background: #0E8FC4; color: #fff; text-decoration: none; }
.askblk .askbtn[disabled] { opacity: .6; cursor: not-allowed; }
.askwhen { font-size: 13.5px; color: var(--muted); line-height: 1.5; max-width: 40ch; }
.askwhen b { color: var(--ink); }
.askalt { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 18px; font-size: 13.5px; color: var(--muted); }
.askalt a { font-weight: 600; color: var(--blue-7); }

/* sent state */
.asksent { display: none; padding: 44px 30px; text-align: center; }
.asksent.on { display: block; }
.askblk.sent .bd, .askblk.sent .hd { display: none; }
.asksent .ck {
    width: 52px; height: 52px; border-radius: 50%; background: var(--ok-bg);
    border: 1px solid var(--ok-line); color: var(--ok-ink);
    display: flex; align-items: center; justify-content: center; margin: 0 auto;
}
.asksent h3 { font-size: 22px; font-weight: 800; letter-spacing: -.025em; margin-top: 18px; color: var(--ink); }
.asksent p { font-size: 15.5px; line-height: 1.6; color: var(--muted); margin: 10px auto 0; max-width: 46ch; }

/* dark section variant */
.dark .askblk, .askblk.is-dark { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.15); }
.dark .askblk .hd, .askblk.is-dark .hd { background: rgba(255,255,255,.04); border-bottom-color: rgba(255,255,255,.13); }
.dark .askblk .hd h3, .dark .askblk label, .dark .asksent h3,
.askblk.is-dark .hd h3, .askblk.is-dark label, .askblk.is-dark .asksent h3 { color: #fff; }
.dark .askblk .hd p, .dark .askhint, .dark .askwhen, .dark .askalt, .dark .asksent p,
.askblk.is-dark .hd p, .askblk.is-dark .askhint, .askblk.is-dark .askwhen,
.askblk.is-dark .askalt, .askblk.is-dark .asksent p { color: #B7C4D2; }
.dark .askwhen b, .askblk.is-dark .askwhen b { color: #fff; }
.dark .askblk .askf, .askblk.is-dark .askf { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); color: #fff; }
.dark .askblk .askf::placeholder, .askblk.is-dark .askf::placeholder { color: #7E8EA0; }
.dark .topics label, .askblk.is-dark .topics label { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); color: #fff; }
.dark .topics input:checked + label, .askblk.is-dark .topics input:checked + label { background: rgba(31,169,224,.2); border-color: var(--blue); color: #fff; }
.dark .askfoot, .askblk.is-dark .askfoot { border-top-color: rgba(255,255,255,.13); }
.askblk.is-dark .hd .ico { background: rgba(31,169,224,.16); color: #5DC1EA; }

/* slide-over — styling present, not mounted yet (inline panel shipped first) */
.askover { position: fixed; inset: 0; z-index: 90; display: none; }
.askover.on { display: block; }
.askover .veil { position: absolute; inset: 0; background: rgba(9,17,30,.5); backdrop-filter: blur(2px); }
.askover .sheet { position: absolute; top: 0; right: 0; bottom: 0; width: min(520px,100%); background: #fff; box-shadow: -10px 0 40px rgba(9,17,30,.25); overflow-y: auto; padding: 24px; }
.askover .sheet .askblk { margin-top: 0; border: none; border-radius: 0; }
.askover .sheet .askblk .hd { border-radius: 12px 12px 0 0; }
.askover .close { position: absolute; top: 16px; right: 18px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.askover .askrow { grid-template-columns: 1fr; }

@media (max-width: 680px) {
    .askblk .hd, .askblk .bd { padding-left: 20px; padding-right: 20px; }
    .askrow { grid-template-columns: 1fr; }
    .askfoot .askbtn { width: 100%; }
    .askover .sheet { width: 100%; padding: 16px; }
}