/* Trade Ocean Form Builder — public form card (liquid glass, corporate
   design system). Scoped to .tof-form-wrap so it embeds in any theme page. */

.tof-form-wrap{
  --to-navy:#1D315D;
  --to-orange:#E86824;
  --to-orange-light:#F9AB36;
  --to-teal-deep:#036061;
  --to-teal-mid:#1A8F91;
  --to-charcoal:#2B2B2B;
  --to-grey:#6B6B6B;
  --to-grey-light:#E5E7EB;
  --to-bg-soft:#F5F7FA;
  --to-red:#E24B4A;
  --to-radius:8px;
  --to-font-heading:"Montserrat","Helvetica Neue",Arial,sans-serif;
  --to-font-body:Arial,Helvetica,sans-serif;
  max-width:680px;margin:0 auto;
  font-family:var(--to-font-body);font-size:14px;color:var(--to-charcoal);
}
.tof-form-wrap *,.tof-form-wrap *::before,.tof-form-wrap *::after{box-sizing:border-box}

.tof-form-card{
  background:linear-gradient(160deg, rgba(255,255,255,.80) 0%, rgba(255,255,255,.55) 100%);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  backdrop-filter:blur(18px) saturate(1.4);
  border:1px solid rgba(255,255,255,.85);
  border-left:4px solid var(--to-teal-mid);
  border-radius:14px;
  box-shadow:0 8px 24px rgba(29,49,93,.10), inset 0 1px 0 rgba(255,255,255,.9);
  padding:30px 34px;margin:0;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .tof-form-card{background:rgba(255,255,255,.96)}
}

.tof-form-title{font-family:var(--to-font-heading);font-weight:800;font-size:20px;color:var(--to-navy);margin:0 0 18px;padding:0}
.tof-section{font-family:var(--to-font-heading);font-weight:700;font-size:14px;color:var(--to-navy);border-bottom:2px solid var(--to-grey-light);padding:0 0 8px;margin:10px 0 4px;grid-column:1 / -1}
.tof-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px 14px}
.tof-field{margin-bottom:14px;grid-column:1 / -1}
.tof-field.tof-w-half{grid-column:auto / span 1}

.tof-label{display:block;font-family:var(--to-font-heading);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--to-grey);margin-bottom:5px}
.tof-req{color:var(--to-orange)}
.tof-form-wrap .tof-input{
  width:100%;background:rgba(255,255,255,.85);border:1px solid var(--to-grey-light);border-radius:7px;
  padding:9px 11px;font-family:var(--to-font-body);font-size:13.5px;color:var(--to-charcoal);
  box-shadow:none;line-height:1.4;margin:0;
}
.tof-form-wrap .tof-input:focus{outline:none;border-color:var(--to-teal-mid);box-shadow:none}
.tof-form-wrap textarea.tof-input{min-height:90px;resize:vertical}
.tof-desc{font-size:12px;color:var(--to-grey);margin-top:4px}
.tof-opts{margin-top:4px}
.tof-opt{display:inline-flex;align-items:center;gap:6px;margin:4px 16px 4px 0;font-size:13.5px;color:var(--to-charcoal);font-family:var(--to-font-body);font-weight:normal}
.tof-opt input{margin:0}

.tof-field.error .tof-input{border-color:var(--to-red)}
.tof-field-error{color:var(--to-red);font-size:12px;margin-top:4px;font-weight:bold}
.tof-form-error{background:#FDECEC;border:1.5px solid var(--to-red);border-radius:var(--to-radius);color:var(--to-red);font-family:var(--to-font-heading);font-weight:700;font-size:13px;padding:11px 15px;margin-bottom:16px;grid-column:1 / -1}

.tof-submit-row{margin-top:14px}
.tof-btn-submit{
  display:inline-block;border-radius:999px;border:0;cursor:pointer;
  font-family:var(--to-font-heading);font-weight:700;font-size:13.5px;padding:11px 26px;
  background:linear-gradient(135deg, var(--to-orange-light), var(--to-orange));
  color:#fff;box-shadow:0 4px 14px rgba(232,104,36,.35);line-height:1.4;
}
.tof-btn-submit[disabled]{opacity:.6;cursor:default}

.tof-success{
  background:#E0F0F0;border:1.5px solid var(--to-teal-mid);border-radius:var(--to-radius);
  color:var(--to-teal-deep);font-family:var(--to-font-heading);font-weight:700;font-size:13.5px;
  padding:14px 18px;line-height:1.5;
}
.tof-draft-note{color:var(--to-grey);font-size:13px;font-style:italic}

.tof-hp-wrap{position:absolute !important;left:-9999px !important;top:-9999px !important;height:1px;width:1px;overflow:hidden}

@media (max-width:640px){
  .tof-form-card{padding:22px 20px}
  .tof-grid{grid-template-columns:1fr}
  .tof-field.tof-w-half{grid-column:1 / -1}
}