/* ═══════════════════════════════════════════════════════════════════════════
   Capture form — pc-acdi PT + EN.

   Layout follows the DevClub capture card: a labelled field stack with a small
   uppercase caret label above each input, one radio row, then CTA and a single
   short consent line. Colours are TCB's own (purple #6666FF / #4E00FF, mint
   #B9F0D7, #2C2C2C borders) so the modal matches the page behind it.

   Mobile-first: everything below is the phone case; one >=560px block widens
   the radio row and adds padding. Verified at 360/390/430/768/1440.
   ═══════════════════════════════════════════════════════════════════════════ */

/* The class is doubled ON PURPOSE — this is an override layer, not a base style.
   The Elementor-era grid still sits on this very element in the page CSS
   (.pcacdipt-form__fields / .pcacdien-form__fields: display:flex, flex-wrap:wrap,
   negative margins). At equal specificity the winner is whichever file loads
   last, and the page CSS loads after this one.

   PT survived only by accident: its rule omits flex-direction, so the column
   below stuck. EN's rule DOES set flex-direction:row — which silently turned the
   stack into a wrapping row, shrinking every text input to its content width
   (286px) while the fieldset and button still filled the line (390px). It read
   as "the inputs are too narrow" and was really "the container changed axis".

   Doubling the class makes this deterministic no matter how the links are
   ordered. Do not "simplify" it back to a single class. */
.tcb-form.tcb-form{
  --f-purple:#6666FF; --f-purple-deep:#4E00FF; --f-glow:#5800FF;
  --f-mint:#B9F0D7;   --f-border:#2C2C2C;     --f-field:rgba(37,37,37,.85);
  --f-dim:#C4C4CC;    --f-faint:#8A8A93;      --f-err:#FF6B6B;
  display:flex; flex-direction:column; flex-wrap:nowrap; gap:16px;
  margin:0;                       /* kills the legacy 0 -5px -10px gutter */
}
/* Every direct child spans the column; the legacy grid sized them to content. */
.tcb-form.tcb-form > *{width:100%; max-width:100%}

.tcb-field{border:0; padding:0; margin:0; min-width:0}

.tcb-label{
  display:flex; align-items:center; gap:6px;
  margin:0 0 7px; padding:0;
  font-size:11.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--f-dim);
}
.tcb-label i{color:var(--f-mint); font-style:normal; font-weight:700}

/* 16px is not a style choice: below it, iOS Safari zooms the page on focus and
   the visitor loses the form. */
.tcb-input{
  display:block; width:100%; min-height:52px;
  padding:13px 16px; margin:0;
  background:var(--f-field);
  border:1px solid transparent; border-radius:12px;
  color:#fff; font-family:inherit; font-size:16px; line-height:1.3;
  -webkit-appearance:none; appearance:none;
}
.tcb-input::placeholder{color:var(--f-faint)}
.tcb-input:focus{
  outline:none; border-color:var(--f-purple);
  box-shadow:0 2px 18px -8px var(--f-glow);
}
.tcb-input:user-invalid{border-color:var(--f-err)}

/* ── phone: country button sits inside the field ──────────────────────────── */
.tcb-tel{position:relative; display:flex; align-items:stretch}
.tcb-tel .tcb-input{padding-left:104px}
.tcb-tel--invalid .tcb-input{border-color:var(--f-err)}

.tcb-tel .tel__country{
  position:absolute; left:1px; top:1px; bottom:1px; z-index:2;
  display:flex; align-items:center; gap:6px;
  padding:0 10px 0 13px; min-width:94px;
  background:transparent; border:0; border-right:1px solid var(--f-border);
  border-radius:12px 0 0 12px;
  color:#fff; font-family:inherit; font-size:15px; cursor:pointer;
}
.tcb-tel .tel__country:hover{background:rgba(102,102,255,.10)}
.tcb-tel .tel__country:focus-visible{outline:2px solid var(--f-purple); outline-offset:-2px}
/* ISO2 chip, not an emoji — see the comment in phone-input.js */
.tel__flag{
  flex:0 0 auto; min-width:26px; padding:2px 5px;
  background:rgba(255,255,255,.08); border-radius:5px;
  font-size:11px; font-weight:700; letter-spacing:.04em; line-height:1.5;
  text-align:center; color:#fff; font-variant-numeric:tabular-nums;
}
.tel__dial{color:var(--f-dim); font-variant-numeric:tabular-nums}
.tel__caret{color:var(--f-faint); font-size:10px}

.tel__list{
  position:absolute; z-index:30; top:calc(100% + 6px); left:0; right:0;
  max-height:260px; overflow-y:auto;
  background:#111114; border:1px solid var(--f-border); border-radius:12px;
  box-shadow:0 18px 40px -12px rgba(0,0,0,.8);
}
.tel__search{
  position:sticky; top:0; z-index:1;
  display:block; width:100%; box-sizing:border-box;
  padding:11px 14px; border:0; border-bottom:1px solid var(--f-border);
  background:#15151A; color:#fff; font-family:inherit; font-size:16px;
}
.tel__search:focus{outline:none}
.tel__list ul{list-style:none; margin:0; padding:4px}
.tel__list li{
  display:flex; align-items:center; gap:10px;
  padding:11px 12px; border-radius:8px; cursor:pointer;
  font-size:15px; color:#fff;
}
.tel__list li:hover,.tel__list li:focus{background:rgba(102,102,255,.16); outline:none}
.tel__name{flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* ── radio row ────────────────────────────────────────────────────────────── */
.tcb-radios{min-width:0}
.tcb-radios__row{display:flex; flex-direction:column; gap:10px}
.tcb-radio{
  display:flex; align-items:center; gap:11px;
  min-height:52px; padding:12px 16px;
  background:var(--f-field); border:1px solid transparent; border-radius:12px;
  font-size:15px; color:#fff; cursor:pointer;
  transition:border-color .15s, background .15s;
}
.tcb-radio:hover{border-color:var(--f-purple)}
.tcb-radio:has(input:checked){
  border-color:var(--f-purple); background:rgba(102,102,255,.16);
  box-shadow:0 2px 18px -9px var(--f-glow);
}
.tcb-radio:has(input:focus-visible){outline:2px solid var(--f-purple); outline-offset:2px}
.tcb-radio input{
  -webkit-appearance:none; appearance:none; margin:0;
  flex:0 0 19px; width:19px; height:19px;
  border:2px solid var(--f-faint); border-radius:50%; cursor:pointer;
}
.tcb-radio input:checked{border-color:var(--f-purple); box-shadow:inset 0 0 0 4px var(--f-purple)}

/* ── CTA + consent ────────────────────────────────────────────────────────── */
.tcb-cta{
  display:block; width:100%; min-height:56px; margin-top:4px; padding:0 18px;
  border:0; border-radius:12px;
  background-color:var(--f-purple);
  background-image:linear-gradient(90deg,var(--f-purple-deep) 0%,var(--f-purple) 100%);
  box-shadow:0 3px 26px -7px var(--f-glow);
  color:#fff; font-family:inherit; font-size:16px; font-weight:700;
  letter-spacing:.01em; cursor:pointer;
  transition:filter .25s;
}
.tcb-cta:hover{filter:brightness(1.12)}
.tcb-cta:active{transform:translateY(1px)}

.tcb-consent{
  margin:0; text-align:center;
  font-size:12.5px; line-height:1.5; color:var(--f-faint);
}

/* ── long-answer variant ──────────────────────────────────────────────────
   Four full-sentence options, so they ALWAYS stack — the >=560px side-by-side
   rule below would squeeze each into a ~200px column and wrap every one to five
   lines. The radio also has to align to the FIRST line, not the vertical centre,
   or on a three-line option the dot floats in the middle of the paragraph. */
.tcb-radios__row--stack{flex-direction:column !important}
.tcb-radio--long{
  align-items:flex-start;
  padding:14px 16px;
  line-height:1.45;
}
.tcb-radio--long input{margin-top:2px}
.tcb-radio--long span{flex:1 1 auto; min-width:0}

/* A long question is a sentence, not a field name: drop the uppercase and the
   wide tracking, which are only legible on 2-3 word labels. */
.tcb-radios legend.tcb-label{
  align-items:flex-start;
  text-transform:none; letter-spacing:normal;
  font-size:13.5px; font-weight:600; line-height:1.45;
  color:#E6E6EA;
}
.tcb-radios legend.tcb-label i{margin-top:1px}

/* ── >=560px: side-by-side radios, a little more room ─────────────────────── */
@media (min-width:560px){
  .tcb-form.tcb-form{gap:18px}
  .tcb-radios__row:not(.tcb-radios__row--stack){flex-direction:row}
  .tcb-radios__row:not(.tcb-radios__row--stack) .tcb-radio{flex:1 1 0; min-width:0}
}

/* Very narrow phones: the country button eats the input, so shrink it. */
@media (max-width:380px){
  .tcb-tel .tcb-input{padding-left:92px}
  .tcb-tel .tel__country{min-width:84px; padding:0 8px 0 10px; font-size:14px}
}

@media (prefers-reduced-motion:reduce){
  .tcb-radio,.tcb-cta{transition:none}
}

/* ── progressive disclosure (js/form-progressive.js) ────────────────────────
   The ICP question stays collapsed until the phone number is complete. */
.tcb-form [hidden]{display:none}
.tcb-reveal.is-revealed{animation:tcb-reveal .32s var(--ease-standard,cubic-bezier(.4,0,.2,1)) both}
@keyframes tcb-reveal{
  from{opacity:0; transform:translateY(-8px)}
  to  {opacity:1; transform:none}
}
@media (prefers-reduced-motion:reduce){
  .tcb-reveal.is-revealed{animation:none}
}

/* phone-input.js toggles `tel--invalid` on the [data-tel] root, but the rule
   above was written as `.tcb-tel--invalid` — a class nothing ever sets, so an
   invalid number never turned red. Match what the JS actually writes. */
.tcb-tel.tel--invalid .tcb-input{border-color:var(--f-err)}

/* ── select (community role field) ─────────────────────────────────────────
   Native <select> so mobile gets the OS picker — a custom dropdown here would
   be worse on every phone. Only the chrome is restyled; 16px again because
   below it iOS zooms the page on focus. */
.tcb-select{
  display:block; width:100%; min-height:52px;
  padding:13px 40px 13px 16px; margin:0;
  background:var(--f-field);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%238A8A93' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center; background-size:12px 8px;
  border:1px solid transparent; border-radius:12px;
  color:#fff; font-family:inherit; font-size:16px; line-height:1.3;
  -webkit-appearance:none; appearance:none; cursor:pointer;
}
.tcb-select:focus{outline:none; border-color:var(--f-purple); box-shadow:0 2px 18px -8px var(--f-glow)}
.tcb-select:invalid{color:var(--f-faint)}          /* placeholder option */
.tcb-select option{background:#15151A; color:#fff}