/* ============================================================
   BrandVic Strategy Form  –  v 2.1
   BRAND COLOR: #F8CE33 (yellow)
   Everything is scoped under .multistep-form-container
   ============================================================ */

/* ── hard button reset (scoped) ── */
.multistep-form-container button {
    font-family: inherit;
    font-size:   inherit;
    font-weight: inherit;
    color:       inherit;
    background:  none;
    border:      none;
    border-radius: 0;
    cursor:      pointer;
    -webkit-appearance: none;
    -moz-appearance:    none;
    appearance:         none;
    outline:     none;
    line-height: inherit;
    padding:     0;
    margin:      0;
}

/* ── container ── */
.multistep-form-container {
    max-width:        1280px;
    margin:           40px auto;
    padding:          40px 24px;
    font-family:      'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
    color:            #7A7A7A;
    background-color: #F7F7F7;
}

/* ════════════════════════════════════════════════════════════
   HEADER
   ════════════════════════════════════════════════════════════ */
.multistep-form-container .form-header {
    text-align:    center;
    margin-bottom: 50px;
}
.multistep-form-container .form-header h2 {
    font-size:     36px;
    color:         #54595F;
    margin-bottom: 20px;
    font-weight:   700;
}
.multistep-form-container .form-header p {
    font-size:     18px;
    line-height:   1.6;
    color:         #7A7A7A;
    margin-bottom: 15px;
    max-width:     720px;
    margin-left:   auto;
    margin-right:  auto;
}
.multistep-form-container .reviews {
    font-size:  16px;
    color:      #54595F;
    font-weight: 600;
}

/* HIDE description paragraphs on steps 2-10 (client request) */
.multistep-form-container.step-active:not(.step-1) .form-header p,
.multistep-form-container.step-active:not(.step-1) .form-header .reviews {
    display: none;
}

/* ════════════════════════════════════════════════════════════
   PROGRESS BAR
   ════════════════════════════════════════════════════════════ */
.multistep-form-container .progress-container {
    margin-bottom: 60px;
    position:      relative;
    padding:       0 20px;
}
.multistep-form-container .progress-wrapper {
    position:  relative;
    max-width: 100%;
    margin:    0 auto;
}

.multistep-form-container .progress-line {
    position:         absolute;
    top:              19px;
    left:             0;
    right:            0;
    height:           3px;
    background-color: #E5E5E5;
    z-index:          0;
    border-radius:    2px;
}
.multistep-form-container .progress-line-fill {
    position:         absolute;
    top:              0;
    left:             0;
    height:           100%;
    width:            0%;
    background:       #F8CE33;
    border-radius:    2px;
    transition:       width 0.6s ease;
    box-shadow:       0 1px 4px rgba(248, 206, 51, 0.35);
}

.multistep-form-container .progress-steps {
    display:          flex;
    justify-content:  space-between;
    align-items:      flex-start;
    width:            100%;
    position:         relative;
    z-index:          1;
}
.multistep-form-container .progress-step {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    flex:           0 0 auto;
}

.multistep-form-container .step-circle {
    width:            40px;
    height:           40px;
    border-radius:    50%;
    background-color: #FFFFFF;
    border:           3px solid #D1D1D1;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    font-size:        14px;
    font-weight:      700;
    color:            #B8B8B8;
    box-shadow:       0 2px 6px rgba(0, 0, 0, 0.08);
    transition:       background 0.35s, border-color 0.35s, color 0.35s, box-shadow 0.35s, transform 0.35s;
}

.multistep-form-container .progress-step.completed .step-circle {
    background:       #F8CE33;
    border-color:     #F8CE33;
    color:            #FFFFFF;
    box-shadow:       0 2px 8px rgba(248, 206, 51, 0.35);
}

.multistep-form-container .progress-step.active .step-circle {
    background:       #F8CE33;
    border-color:     #F8CE33;
    color:            #FFFFFF;
    transform:        scale(1.18);
    box-shadow:       0 0 0 5px rgba(248, 206, 51, 0.2),
                      0 4px 12px rgba(248, 206, 51, 0.45);
}

.multistep-form-container .step-label {
    margin-top:   8px;
    font-size:    11px;
    color:        #999999;
    font-weight:  500;
    white-space:  nowrap;
    text-align:   center;
    transition:   color 0.3s, font-weight 0.3s;
}
.multistep-form-container .progress-step.active   .step-label { color: #F8CE33; font-weight: 700; }
.multistep-form-container .progress-step.completed .step-label { color: #54595F; font-weight: 600; }

.multistep-form-container .progress-text {
    text-align:   center;
    font-size:    13px;
    color:        #7A7A7A;
    font-weight:  600;
    margin-top:   18px;
}
.multistep-form-container .progress-text span {
    font-size:   19px;
    font-weight: 700;
    color:       #F8CE33;
}

/* ════════════════════════════════════════════════════════════
   FORM STEPS
   ════════════════════════════════════════════════════════════ */
.multistep-form-container .form-step        { display: none; }
.multistep-form-container .form-step.active { display: block; animation: bv-slideUp 0.4s ease; }

@keyframes bv-slideUp {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0);    }
}

.multistep-form-container .step-content {
    background:  #FFFFFF;
    padding:     60px 50px 56px;
    border-radius: 8px;
    box-shadow:  0 2px 10px rgba(0, 0, 0, 0.07);
    text-align:  center;
    max-width:   780px;
    margin:      0 auto;
}

.multistep-form-container .step-intro {
    font-size:     26px;
    color:         #1A1A1A;
    margin-bottom: 32px;
    line-height:   1.4;
    font-weight:   500;
}
.multistep-form-container .step-question {
    font-size:     26px;
    color:         #1A1A1A;
    margin-bottom: 18px;
    font-weight:   500;
    line-height:   1.4;
}
.multistep-form-container .step-subtitle {
    font-size:     15px;
    color:         #7A7A7A;
    margin-bottom: 34px;
    line-height:   1.6;
    max-width:     560px;
    margin-left:   auto;
    margin-right:  auto;
}

/* ════════════════════════════════════════════════════════════
   INPUTS
   ════════════════════════════════════════════════════════════ */
.multistep-form-container .form-input,
.multistep-form-container .form-select,
.multistep-form-container .form-textarea {
    display:          block;
    width:            100%;
    max-width:        460px;
    margin:           0 auto 18px;
    padding:          16px 20px;
    font-size:        16px;
    font-family:      inherit;
    color:            #1A1A1A;
    background-color: #FFFFFF;
    border:           2px solid #D5D5D5;
    border-radius:    6px;
    transition:       border-color 0.25s, box-shadow 0.25s;
    box-sizing:       border-box;
}
.multistep-form-container .form-input::placeholder,
.multistep-form-container .form-textarea::placeholder {
    color: #AAAAAA;
}
.multistep-form-container .form-input:focus,
.multistep-form-container .form-select:focus,
.multistep-form-container .form-textarea:focus {
    outline:      none;
    border-color: #F8CE33;
    box-shadow:   0 0 0 3px rgba(248, 206, 51, 0.18);
}
.multistep-form-container .form-input.error,
.multistep-form-container .form-select.error,
.multistep-form-container .form-textarea.error {
    border-color: #E74C3C;
    background-color: #FFF5F5;
}
.multistep-form-container .error-message {
    color:         #E74C3C;
    font-size:     13px;
    margin-top:    -10px;
    margin-bottom: 14px;
    display:       none;
    text-align:    center;
}
.multistep-form-container .error-message.show { display: block; }

.multistep-form-container .form-textarea {
    resize:     vertical;
    min-height: 130px;
}
.multistep-form-container .form-select {
    -webkit-appearance: none;
    appearance:         none;
    background-image:   url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3e%3cpath fill='%23888' d='M6 8L1 3h10z'/%3e%3c/svg%3e");
    background-repeat:  no-repeat;
    background-position: right 18px center;
    padding-right:      44px;
    cursor:             pointer;
}

/* ════════════════════════════════════════════════════════════
   CONTINUE/SUBMIT BUTTONS
   ════════════════════════════════════════════════════════════ */
.multistep-form-container .btn-continue,
.multistep-form-container .btn-submit {
    display:          block !important;
    width:            100%;
    max-width:        460px;
    margin:           8px auto 0 !important;
    padding:          17px 24px !important;
    background-color: #F8CE33 !important;
    color:            #FFFFFF !important;
    font-size:        17px !important;
    font-weight:      700 !important;
    border:           none !important;
    border-radius:    6px !important;
    cursor:           pointer;
    box-shadow:       0 3px 10px rgba(248, 206, 51, 0.3);
    transition:       background-color 0.25s, transform 0.15s, box-shadow 0.25s;
    letter-spacing:   0.3px;
    text-align:       center;
}
.multistep-form-container .btn-continue:hover,
.multistep-form-container .btn-submit:hover {
    background-color: #E6BB1F !important;
    transform:        translateY(-1px);
    box-shadow:       0 5px 14px rgba(248, 206, 51, 0.38);
}
.multistep-form-container .btn-continue:active,
.multistep-form-container .btn-submit:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(248, 206, 51, 0.25);
}

/* ════════════════════════════════════════════════════════════
   CHOICE BUTTONS
   ════════════════════════════════════════════════════════════ */
.multistep-form-container .btn-choice {
    display:          block !important;
    width:            100%;
    max-width:        420px;
    margin:           0 auto 12px !important;
    padding:          18px 24px !important;
    background-color: #FFFFFF !important;
    color:            #54595F !important;
    font-size:        17px !important;
    font-weight:      600 !important;
    border:           2px solid #D5D5D5 !important;
    border-radius:    6px !important;
    text-align:       center;
    line-height:      1.4;
    word-wrap:        break-word !important;
    white-space:      normal !important;
    overflow-wrap:    break-word !important;
    transition:       border-color 0.25s, background-color 0.25s, color 0.25s, box-shadow 0.25s, transform 0.15s;
}
.multistep-form-container .btn-choice:hover {
    border-color:     #F8CE33 !important;
    background-color: #FFFBF0 !important;
    box-shadow:       0 3px 10px rgba(248, 206, 51, 0.15);
    transform:        translateY(-1px);
}
.multistep-form-container .btn-choice.selected {
    border-color:     #F8CE33 !important;
    background-color: #FFF9E6 !important;
    color:            #D4A017 !important;
    box-shadow:       0 2px 8px rgba(248, 206, 51, 0.2);
}

.multistep-form-container .btn-choice .subtext {
    display:     block;
    font-size:   13px !important;
    font-weight: 400 !important;
    color:       #9A9A9A !important;
    margin-top:  4px;
}
.multistep-form-container .btn-choice.selected .subtext {
    color: #7A7A7A !important;
}

.multistep-form-container .btn-choice-row {
    display:        flex;
    gap:            16px;
    justify-content: center;
    margin-top:     8px;
}
.multistep-form-container .btn-choice-row .btn-choice {
    max-width: 180px !important;
    flex:      1 1 140px;
    margin:    0 !important;
    padding:   22px 16px !important;
    font-size: 19px !important;
}

/* ════════════════════════════════════════════════════════════
   LOADING & SUCCESS
   ════════════════════════════════════════════════════════════ */
.multistep-form-container .form-loading {
    display:    none;
    text-align: center;
    padding:    80px 20px;
}
.multistep-form-container .form-loading.show { display: block; }

.multistep-form-container .loading-spinner {
    width:            52px;
    height:           52px;
    border:           5px solid #E5E5E5;
    border-top-color: #F8CE33;
    border-radius:    50%;
    margin:           0 auto 24px;
    animation:        bv-spin 0.8s linear infinite;
}
@keyframes bv-spin { to { transform: rotate(360deg); } }

.multistep-form-container .form-loading p {
    font-size: 17px;
    color:     #7A7A7A;
}

.multistep-form-container .success-screen {
    display:    none;
    text-align: center;
    padding:    80px 24px;
    max-width:  600px;
    margin:     0 auto;
}
.multistep-form-container .success-screen.show {
    display:   block;
    animation: bv-slideUp 0.5s ease;
}

.multistep-form-container .success-icon {
    width:            88px;
    height:           88px;
    border-radius:    50%;
    background:       #F8CE33;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    margin:           0 auto 28px;
    box-shadow:       0 4px 18px rgba(248, 206, 51, 0.35);
}
.multistep-form-container .success-icon svg { width: 44px; height: 44px; }

.multistep-form-container .success-screen h3 {
    font-size:     28px;
    color:         #1A1A1A;
    margin-bottom: 12px;
    font-weight:   700;
}
.multistep-form-container .success-screen p {
    font-size:  16px;
    color:      #6B6B6B;
    line-height: 1.6;
    margin-bottom: 10px;
}

.multistep-form-container .privacy-note {
    font-size:  13px;
    color:      #9A9A9A;
    font-style: italic;
    margin-top: 22px;
    text-align: center;
}
.multistep-form-container .home-link {
    margin-top: 14px;
    text-align: center;
    font-size:  14px;
}
.multistep-form-container .home-link a {
    color:       #F8CE33;
    font-weight: 600;
    text-decoration: none;
}
.multistep-form-container .home-link a:hover { text-decoration: underline; }

/* ════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .multistep-form-container            { padding: 24px 16px; }
    .multistep-form-container .form-header h2  { font-size: 28px; }
    .multistep-form-container .step-content    { padding: 44px 28px 40px; }
    .multistep-form-container .step-intro,
    .multistep-form-container .step-question   { font-size: 22px; }
    .multistep-form-container .step-circle     { width: 34px; height: 34px; font-size: 13px; }
    .multistep-form-container .progress-line   { top: 16px; }
    .multistep-form-container .step-label      { font-size: 10px; }
    .multistep-form-container .btn-choice-row  { flex-direction: column; align-items: center; }
    .multistep-form-container .btn-choice-row .btn-choice { max-width: 260px !important; }
    .multistep-form-container .btn-choice      { font-size: 15px !important; padding: 16px 18px !important; }
}

@media (max-width: 480px) {
    .multistep-form-container .step-content    { padding: 34px 18px 32px; }
    .multistep-form-container .step-intro,
    .multistep-form-container .step-question   { font-size: 19px; }
    .multistep-form-container .step-circle     { width: 30px; height: 30px; font-size: 12px; border-width: 2px; }
    .multistep-form-container .progress-line   { top: 14px; }
    .multistep-form-container .step-label      { display: none; }
    .multistep-form-container .btn-choice      { font-size: 14px !important; padding: 14px 16px !important; max-width: 100% !important; }
}

@media (max-width: 375px) {
    .multistep-form-container .form-header h2  { font-size: 24px; }
    .multistep-form-container .step-content    { padding: 30px 16px 28px; }
    .multistep-form-container .step-intro,
    .multistep-form-container .step-question   { font-size: 18px; }
    .multistep-form-container .btn-choice      { font-size: 13px !important; padding: 12px 14px !important; line-height: 1.3 !important; }
    .multistep-form-container .btn-continue,
    .multistep-form-container .btn-submit      { font-size: 16px !important; padding: 16px 20px !important; }
}

@media (max-width: 320px) {
    .multistep-form-container                  { padding: 20px 12px; }
    .multistep-form-container .form-header h2  { font-size: 22px; }
    .multistep-form-container .form-header p   { font-size: 16px; }
    .multistep-form-container .step-content    { padding: 26px 14px 24px; }
    .multistep-form-container .step-intro,
    .multistep-form-container .step-question   { font-size: 17px; line-height: 1.3; }
    .multistep-form-container .step-subtitle   { font-size: 14px; }
    .multistep-form-container .btn-choice      { font-size: 12px !important; padding: 11px 12px !important; line-height: 1.25 !important; }
    .multistep-form-container .btn-continue,
    .multistep-form-container .btn-submit      { font-size: 15px !important; padding: 15px 18px !important; }
    .multistep-form-container .progress-container { padding: 0 10px; margin-bottom: 40px; }
    .multistep-form-container .step-circle     { width: 26px; height: 26px; font-size: 11px; }
}