:root {
  --bcob-primary: #009fdf;
  --bcob-primary-dark: #0077b6;
  --bcob-secondary: #9ed8f0;

  --bcob-success: #34c759;
  --bcob-danger: #ff3b30;
  --bcob-warning: #ff9500;

  --bcob-bg: #f4f7fb;
  --bcob-surface: #ffffff;
  --bcob-border: #e6eaf0;

  --bcob-text: #202124;
  --bcob-text-light: #6b7280;

  --bcob-radius: 18px;

  --bcob-shadow: 0 12px 35px rgba(0, 0, 0, 0.06);

  --bcob-transition: 0.25s ease;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
}

.bcob-form {
  display: grid;

  grid-template-columns: 260px minmax(0, 1fr) 300px;

  gap: 28px;

  width: 100%;

  max-width: 1320px;

  margin: auto;

  padding: 32px;

  align-items: start;
}

.bcob-left-column,
.bcob-center-column,
.bcob-right-column {
  min-width: 0;
}

.bcob-left-column {
  position: sticky;

  top: 30px;
}

.bcob-right-column {
  position: sticky;

  top: 30px;
}

.bcob-center-column {
  min-height: 600px;
}

#bcob-form-element {
  display: flex;

  flex-direction: column;

  gap: 40px;
}

.bcob-step {
  display: none;
}

.bcob-step.is-active {
  display: block;

  animation: bcobFade 0.35s ease;
}

.bcob-step-inner {
  display: flex;

  flex-wrap: wrap;

  gap: 14px;
}

.bcob-field {
  position: relative;
}

.width-100 {
  width: 100%;
}

.width-75 {
  width: calc(75% - 6px);
}

.width-66 {
  width: calc(66.666% - 8px);
}

.width-50 {
  width: calc(50% - 12px);
}

.width-33 {
  width: calc(33.333% - 16px);
}

.width-25 {
  width: calc(25% - 18px);
}

.bcob-error {
  color: var(--bcob-danger);

  font-size: 13px;

  margin-top: 8px;
}

.bcob-hidden {
  display: none !important;
}

.bcob-loading {
  pointer-events: none;

  opacity: 0.55;
}

.bcob-spinner {
  width: 18px;

  height: 18px;

  border-radius: 50%;

  border: 2px solid rgba(0, 0, 0, 0.15);

  border-top-color: var(--bcob-primary);

  animation: bcobSpin 0.8s linear infinite;
}

main.bcob-center-column {
  box-shadow:
    0px 2px 6px 0px #0b0b0d0d,
    0px 24px 56px 0px #0b0b0d1a;
  border: 1px solid #e6e3dd;
  padding-top: 32px;
  padding-right: 48px;
  padding-bottom: 32px;
  padding-left: 48px;
  border-radius: 20px;
  background: #ffffff;
  max-width: 100%;
  position: relative;
  overflow: hidden;
}

.bcob-field-label span.required {
  color: #b35000;
}

.bcob-field-description {
  font-size: 13px;
  line-height: 1.5;
  color: #5a5a62;
  margin-top: 6px;
}

@keyframes bcobSpin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes bcobFade {
  from {
    opacity: 0;

    transform: translateY(15px);
  }

  to {
    opacity: 1;

    transform: none;
  }
}

label.bcob-group-label {
  font-family: "Figtree";
  font-weight: 500;
  font-size: 13px;
  line-height: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5a5a62;
  border-top: 1px solid #e6e3dd;
  display: block;
  padding-top: 24px;
  margin-top: 14px;
}

main.bcob-center-column:before {
  background: linear-gradient(90deg, #ff852e 0%, #ff6b00 55%, #b35000 100%);
  width: 100%;
  height: 6px;
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  content: "";
  position: absolute;
  left: 0;
  top: 0;
}