/* Fix for Refer modal: ensure it opens only when body.modal-open-refer is set */
.modal-open-refer {
    overflow: auto;
}

body.modal-open-refer .custom-modal-refer {
    opacity: 1 !important;
    visibility: visible !important;
}

body.modal-open-refer .custom-modal-refer .custom-modal-dialog {
    transform: scale(1) !important;
}

/* Ensure refer modal sits above other modals if accidentally visible */
.custom-modal-refer {
    z-index: 20;
}

/* Refer modal progress bar */
.refer-progress {
    background: rgba(0, 0, 0, 0.06);
    height: 10px;
    border-radius: 8px;
    overflow: hidden;
    margin: 12px 0 18px;
}

.refer-progress-bar {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #f9b754, #F2A93C);
    transition: width 300ms ease;
}

/* Validation styles */
.input-error {
    border-color: #e04b4b !important;
    box-shadow: 0 0 0 2px rgba(224, 75, 75, 0.06);
}

.validation-message {
    color: #e04b4b;
    font-size: 13px;
    margin-top: 6px;
}

.refer-step .form-foot .btn {
    min-width: 120px
}

/* Dynamic header for current step */
.refer-step-header {
    margin-bottom: 8px
}

.refer-step-title {
    font-weight: 700;
    font-size: 16px;
    color: #222
}

.refer-step-title .refer-step-sub {
    display: block;
    font-weight: 400;
    font-size: 13px;
    color: #666
}

.refer-progress {
    position: relative
}

.refer-progress-percent {
    position: absolute;
    right: 8px;
    top: -22px;
    font-size: 13px;
    color: #333;
    font-weight: 600
}

/* Make the small indicators compact and unobtrusive */
.refer-steps-indicator {
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 12px;
    color: #555;
    margin-bottom: 6px
}

.refer-steps-indicator .step-indicator {
    padding: 6px 8px;
    background: transparent;
    border-radius: 6px
}

.refer-steps-indicator .step-active {
    background: rgba(59, 123, 232, 0.08);
    color: #1a56d1
}

/* Responsive: hide multi-line labels and show only header on small screens */
@media (max-width:640px) {
    .refer-steps-indicator {
        display: none
    }

    .refer-step-title {
        font-size: 14px
    }

    .refer-step-title .refer-step-sub {
        font-size: 12px
    }

    .refer-progress-percent {
        top: -18px
    }
}

/* Improved layout for form rows inside refer modal */
.refer-step h4 {
    margin-top: 8px;
    font-size: 18px
}

.refer-step p.fsub {
    margin: 6px 0 18px;
    color: #69707a
}

.refer-step .frow {
    margin-bottom: 14px
}

.refer-step .frow.two-col {
    display: flex;
    gap: 18px
}

.refer-step .frow.two-col>div {
    flex: 1
}

/* Radios: larger and themed */
.refer-step label.radio {
    display: block;
    text-transform: uppercase;
    font-size: 12px;
    color: #222;
    margin: 8px 0
}

.refer-step input[type="radio"] {
    width: 18px;
    height: 18px;
    vertical-align: middle;
    accent-color: #2e86ff;
    margin-right: 10px
}

/* File inputs: pill background and padding */
.refer-step input[type="file"] {
    display: block;
    width: 100%;
    background: #e9fbf6;
    padding: 14px 12px;
    border-radius: 6px;
    border: 1px solid #dff3ec;
    box-sizing: border-box
}

/* Secondary insurance radios - stacked with spacing */
.refer-step .check-privacy label {
    font-weight: 400;
    opacity: .8;
    text-transform: none;
    letter-spacing: normal;
    font-size: 14px;
}

.refer-step .check-privacy label input{
    width: 30px;
    margin-top: 15px;
}


/* Form footer layout */
.refer-step .form-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 20px
}

.refer-step .form-foot .btn {
    padding: 12px 20px
}

.refer-step .form-foot .btn.btn-outline {
    border: 1px solid #cfcfcf;
    color: #222;
}

.refer-step .form-foot .btn.btn-primary {
    background: #05402A;
    color: #fff;
}
.refer-step .form-foot .btn.btn-primary:hover {
    background: #222;
    color: #fff;
}

/* Small input placeholder box at bottom (if used) */
.refer-step .small-input {
    width: 120px;
    height: 44px;
    border-radius: 6px;
    border: 1px solid #e6f4ee;
    background: #f8fffc
}

@media (max-width:640px) {
    .refer-step .frow.two-col {
        flex-direction: column
    }

    .refer-progress-percent {
        right: 6px
    }
}