/* ==========================================================================
   CompuHedge — Wizard theme override
   Aligns the Material Bootstrap Wizard (contact / sign-up) with the
   CompuHedge web app + marketing site: light surfaces, orange primary,
   subtle blue accent, dark slate text. Loaded AFTER the vendor CSS.
   Only restyles — does not change markup, ids or JS behaviour.
   ========================================================================== */

:root {
  --brand: #f7941e;
  --brand-strong: #e07c00;
  --brand-soft: rgba(247, 148, 30, 0.12);
  --brand-ring: rgba(247, 148, 30, 0.30);
  --ch-text: #0f1b2d;
  --ch-muted: #57637a;
  --ch-faint: #8a94a8;
  --ch-border: #e6eaf1;
  --ch-border-strong: #d5dbe6;
  --ch-bg: #ffffff;
  --ch-bg-muted: #f6f8fb;
  --ch-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ch-display: "Plus Jakarta Sans", var(--ch-font);
}

/* ---------- Page background (replace the photo with a clean light field) -- */
body { font-family: var(--ch-font); color: var(--ch-text); }

.image-container,
.image-container.set-full-height {
  background-image:
    radial-gradient(1100px 560px at 88% -10%, var(--brand-soft), transparent 60%),
    radial-gradient(900px 520px at -5% 6%, rgba(37, 99, 235, 0.08), transparent 55%),
    linear-gradient(180deg, #ffffff 0%, #eef2f8 100%) !important;
}
/* Remove the dark photo overlay tint that the vendor adds */
.image-container:before { background: transparent !important; opacity: 0 !important; }

/* Subtle CompuHedge brand bar at the very top */
.image-container.set-full-height { position: relative; }

/* ---------- Wizard card ---------- */
.wizard-container { margin-top: 40px; margin-bottom: 40px; }
.wizard-card,
.card.wizard-card {
  border-radius: 20px !important;
  border: 1px solid var(--ch-border) !important;
  box-shadow: 0 24px 60px rgba(15, 27, 45, 0.14) !important;
  background: var(--ch-bg) !important;
  overflow: hidden;
}

/* Brand logo strip inside the card header */
.wizard-card .wizard-header { padding: 30px 25px 8px; position: relative; }
.wizard-card .wizard-header:before {
  content: "";
  display: block;
  width: 168px; height: 34px;
  margin: 0 auto 18px;
  background: url("../img/logo.png") center / contain no-repeat;
}
.wizard-card .wizard-title {
  font-family: var(--ch-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ch-text);
  margin: 0 0 8px;
}
.wizard-card .wizard-header h5 {
  color: var(--ch-muted);
  font-size: 15px;
  line-height: 1.55;
  max-width: 560px;
  margin: 0 auto;
}

/* ---------- Step tabs / navigation pills ---------- */
.wizard-card .nav-pills > li > a,
.wizard-navigation .nav > li > a {
  color: var(--ch-muted);
  font-weight: 600;
  letter-spacing: 0.01em;
}
.wizard-navigation { background: var(--ch-bg-muted); border-top: 1px solid var(--ch-border); border-bottom: 1px solid var(--ch-border); }

/* The sliding highlight + step underline are already orange via data-color="red";
   reinforce with the exact brand orange. */
.wizard-card[data-color="red"] .moving-tab,
.wizard-card .moving-tab {
  background-color: var(--brand) !important;
  color: #fff !important;
  font-weight: 600;
  border-radius: 10px !important;
  box-shadow: 0 12px 24px -8px rgba(247, 148, 30, 0.5) !important;
}
.wizard-card .nav-pills > li.active > a,
.wizard-card .nav-pills > li.active > a:hover,
.wizard-card .nav-pills > li.active > a:focus { color: var(--ch-text) !important; }

/* ---------- Inputs ---------- */
.wizard-card .info-text {
  font-family: var(--ch-display);
  color: var(--ch-text);
  font-weight: 700;
}
.input-group-addon { color: var(--brand-strong); border: none; background: transparent; }
.input-group-addon .material-icons { color: var(--brand-strong); }

.form-group.label-floating .control-label,
.form-group .control-label { color: var(--ch-faint); }
.form-group.is-focused .control-label { color: var(--brand-strong) !important; }
.form-group .control-label small { color: var(--ch-faint); }

/* The vendor shrinks a floated label to 11px once the field has a value (e.g. a
   pre-selected dropdown like Functional Currency, which is never "empty") - too
   small to read comfortably. Bump the shrunk-state size up across the board.
   The vendor's floated-label positioning (top: -28px) assumes a single line, so
   force nowrap too - otherwise a longer label + "(required)" wraps onto a second
   line and overlaps the field's value text sitting right underneath it. */
.form-group.label-static label.control-label,
.form-group.label-floating.is-focused label.control-label,
.form-group.label-floating:not(.is-empty) label.control-label {
  font-size: 13px !important;
  white-space: nowrap;
}

/* Second Currency Pair (compuFreeTrial.html) is deliberately blank until the user picks
   one, so the vendor never floats its label the way it does for its always-populated
   row-mates (Functional Currency, First Currency Pair) - it sits ~21px lower, looking
   misaligned with the rest of the row. Force it into the raised position regardless of
   the field's empty/focus state, without giving it a default value. */
.form-group.label-raised label.control-label {
  top: -28px !important;
  left: 0 !important;
  font-size: 13px !important;
  white-space: nowrap;
}

/* Underline colour for focused inputs (vendor uses data-color red -> orange) */
.wizard-card[data-color="red"] .form-group .form-control,
.wizard-card .form-group .form-control {
  background-image: linear-gradient(var(--brand), var(--brand)), linear-gradient(var(--ch-border-strong), var(--ch-border-strong)) !important;
  color: var(--ch-text);
}
select.form-control { color: var(--ch-text); }

/* ---------- Footer buttons ---------- */
.wizard-footer { padding: 10px 25px 28px; }

/* Primary actions (Next / SEND / Finish) — were btn-danger (red) -> brand orange */
.wizard-card .btn.btn-fill.btn-danger,
.btn.btn-next,
.btn.btn-finish,
.wizard-card .btn-danger {
  background-color: var(--brand) !important;
  border-color: var(--brand) !important;
  color: #fff !important;
  border-radius: 12px !important;
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: 0 6px 18px rgba(247, 148, 30, 0.30) !important;
  transition: background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.wizard-card .btn.btn-fill.btn-danger:hover,
.btn.btn-next:hover,
.btn.btn-finish:hover,
.wizard-card .btn-danger:hover,
.wizard-card .btn.btn-fill.btn-danger:focus,
.btn.btn-next:focus,
.btn.btn-finish:focus {
  background-color: var(--brand-strong) !important;
  border-color: var(--brand-strong) !important;
  color: #fff !important;
  box-shadow: 0 12px 26px rgba(224, 124, 0, 0.34) !important;
  transform: translateY(-1px);
}

/* Secondary action (Previous) — quiet ghost button */
.btn.btn-previous,
.wizard-card .btn.btn-default {
  background-color: var(--ch-bg) !important;
  border: 1px solid var(--ch-border-strong) !important;
  color: var(--ch-text) !important;
  border-radius: 12px !important;
  font-weight: 600;
  box-shadow: none !important;
}
.btn.btn-previous:hover,
.wizard-card .btn.btn-default:hover {
  border-color: var(--brand) !important;
  color: var(--brand-strong) !important;
}

/* ---------- Success / info alert ---------- */
#myAlert.alert {
  border-radius: 12px;
  border: 1px solid var(--brand-ring);
  background: var(--brand-soft);
  color: var(--ch-text);
  font-weight: 500;
  margin: 18px;
}
#myAlert.alert .alert-link { color: var(--brand-strong); font-weight: 700; }

/* ---------- Recaptcha spacing ---------- */
#recaptchav2_element { margin-top: 8px; }

@media (max-width: 600px) {
  .wizard-card .wizard-header:before { width: 140px; height: 30px; }
}