/* Athena OTC form. Matches the house style used by the other Athena
   form plugins: Poppins for headings, Roboto for everything you read,
   Athena gold on ink, square corners. */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Roboto:wght@400;500;700&display=swap");

.otc-wrap,.otc-wrap *,.otc-wrap *::before,.otc-wrap *::after{box-sizing:border-box}

.otc-wrap{
  --o-ink:#0B0B0C; --o-gold:#FFC04A; --o-body:#3A3A42; --o-muted:#6C6C75;
  --o-line:#DAD8D0; --o-shade:#F7F7F5; --o-bad:#B3261E;
  display:block;width:100%;max-width:860px;margin:0 auto;
  font-family:Roboto,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--o-ink);
}

.otc-err{
  background:#FDECEA;border-left:3px solid var(--o-bad);
  padding:14px 18px;margin:0 0 24px;font-size:15px;line-height:1.6;color:#5F1B16;
}

/* Sections 2 to 7 stay closed until a client type is chosen, because the
   fields differ between the two and showing both is how people fill in
   the wrong ones. JS opens them; without JS they are all open, which is
   the safe way round. */
.otc-sec{border-top:1px solid var(--o-line);padding:28px 0 4px}
.otc-sec:first-of-type{border-top:0;padding-top:0}
.otc-sec-h{
  font-family:Poppins,sans-serif;font-size:18px;font-weight:600;
  letter-spacing:-.01em;line-height:1.3;margin:0 0 6px;color:var(--o-ink);
}
.otc-sec-note{font-size:14px;line-height:1.65;color:var(--o-muted);margin:0 0 18px;max-width:62ch}

.otc-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px;margin-top:14px}
.otc-f{display:block;min-width:0}
.otc-full{grid-column:1 / -1}
.otc-half{grid-column:span 1}

.otc-lab{
  display:block;font-size:14px;font-weight:500;line-height:1.45;
  color:var(--o-ink);margin:0 0 7px;
}
.otc-star{color:var(--o-bad);font-style:normal}
.otc-help{font-size:13px;line-height:1.55;color:var(--o-muted);margin:6px 0 0}

.otc-wrap input[type=text],.otc-wrap input[type=tel],.otc-wrap input[type=email],
.otc-wrap textarea{
  width:100%;background:#fff;border:1px solid var(--o-line);border-radius:2px;
  padding:12px 14px;font:400 16px/1.5 Roboto,sans-serif;color:var(--o-ink);
  transition:border-color .15s ease,box-shadow .15s ease;
}
.otc-wrap input:focus,.otc-wrap textarea:focus{
  outline:0;border-color:var(--o-ink);box-shadow:0 0 0 3px rgba(255,192,74,.35);
}
.otc-wrap textarea{resize:vertical;min-height:84px}

.otc-money{position:relative}
.otc-money .otc-cur{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  font-size:16px;color:var(--o-muted);pointer-events:none;
}
.otc-money input{padding-left:30px}

.otc-radios{display:flex;flex-wrap:wrap;gap:10px}
.otc-radio{
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  border:1px solid var(--o-line);border-radius:2px;background:#fff;
  padding:11px 16px;font-size:15px;line-height:1.3;min-height:44px;
  transition:border-color .15s ease,background-color .15s ease;
}
.otc-radio:hover{border-color:var(--o-ink)}
.otc-radio input{accent-color:var(--o-ink);width:17px;height:17px;flex:0 0 auto}
.otc-radio:has(input:checked){border-color:var(--o-ink);background:var(--o-shade)}

.otc-check{display:flex;align-items:flex-start;gap:11px;cursor:pointer;font-size:15px;line-height:1.6}
.otc-check input{accent-color:var(--o-ink);width:18px;height:18px;margin-top:2px;flex:0 0 auto}

.otc-list{margin:0 0 12px;padding:0 0 0 20px;font-size:14px;line-height:1.7;color:var(--o-body)}
.otc-list li{margin:0}
.otc-file{
  display:block;width:100%;background:var(--o-shade);border:1px dashed var(--o-line);
  border-radius:2px;padding:16px;font-size:14px;cursor:pointer;
}

.otc-fixed{background:var(--o-shade);border-left:3px solid var(--o-gold);padding:14px 16px}
.otc-fixed-v{margin:0;font-size:15px;font-weight:500}

.otc-cond{display:none}
.otc-cond.is-on{display:block}
.otc-gated{display:none}
.otc-gated.is-on{display:block}
/* No JavaScript, no gate. Everything shows and the server still decides
   what was required. */
.no-js .otc-gated,.no-js .otc-cond{display:block}

.otc-actions{padding:26px 0 0;border-top:1px solid var(--o-line);margin-top:28px}
.otc-btn{
  display:inline-block;background:var(--o-ink);color:var(--o-gold);
  border:2px solid var(--o-ink);border-radius:2px;cursor:pointer;
  padding:16px 34px;font:700 15px/1 Poppins,sans-serif;
  transition:background-color .16s ease,color .16s ease;
}
.otc-btn:hover,.otc-btn:focus-visible{background:var(--o-gold);color:var(--o-ink)}
.otc-fine{font-size:13px;line-height:1.6;color:var(--o-muted);margin:14px 0 0;max-width:60ch}

.otc-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.otc-done{background:var(--o-shade);border-left:3px solid var(--o-gold);padding:30px 32px}
.otc-done-h{font-family:Poppins,sans-serif;font-size:22px;font-weight:600;margin:0 0 10px}
.otc-done-p{font-size:16px;line-height:1.7;color:var(--o-body);margin:0;max-width:60ch}

@media (max-width:719px){
  .otc-grid{grid-template-columns:1fr;gap:16px}
  .otc-half{grid-column:1 / -1}
  .otc-sec{padding-top:24px}
  .otc-btn{width:100%;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  .otc-wrap input,.otc-wrap textarea,.otc-radio,.otc-btn{transition:none}
}
