/* LEAD FORM STARTS */

.insurance-form {
    z-index:1;
    max-width: 510px;
    background-color: #fff;
    padding: 40px 20px !important;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.form-row {
    display: flex;
    gap: 20px;
}
.form-group {
    flex: 1;
    margin-bottom: 15px;
}
.form-group label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
    font-size:16px;
}

.insurance-form .form-group > label::after{
    content: " *";
    color: #ff5c5c;
    font-weight: 700;
}

.form-group input[type="text"], 
.form-group input[type="date"],
.form-group input[type="email"],
.form-group select {
    width: 100%;
    padding: 8px;
    margin-top: 3px;
    font-family: 'Lato';
    font-size:16px;
    border: 2px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

/* Consistent dropdown arrow icon for all lead-form selects */
.insurance-form select{
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("https://blog.policyadvisor.com/wp-content/uploads/2024/08/Symbol.svg");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px;
}
.form-group input[type="date"] {
width: auto !important;
}
.form-group input[type="text"]:focus,.form-group input[type="date"]:focus,
.form-group input[type="email"]:focus,
.form-group select:focus {
    border:2PX SOLID #17b3e4;
outline:none;
}
.iti {
width: 100%;
}
.radio-group {
    display: flex;
    gap: 10px;
}

.radio-group label {
    display: flex;
    align-items: center;
    width: calc(100% - 10px);
    padding: 8px;
    margin-top: 3px;
    font-size: 16px;
    border: 2px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;;
}

.radio-group input[type="radio"]:hover,.form-group input[type="text"]:hover,.form-group input[type="date"]:hover,
.form-group input[type="email"]:hover,
.form-group select:hover,.radio-label:hover { 
border-color: #00aeda;
}
.radio-group input[type="radio"] {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
width: 24px;
height: 24px;
border: 2px solid #ccc;
border-radius: 50%;
position: relative;
background-color: #fff;
cursor: pointer;
outline: none;
transition: background 0.3s, border-color 0.3s;
}

.radio-group input[type="radio"]:checked {
background-color: #17b3e4;
border-color: #17b3e4;
background-image:url("https://www.policyadvisor.com/wp-content/uploads/2024/08/Frame.svg");
}

.radio-group input[type="radio"]:checked::before {
content:url("https://www.policyadvisor.com/wp-content/uploads/2024/08/Frame.svg");
position: absolute;
top: -2px;
left: -2px;
width: 24px;
height: 24px;
background-color: #fff;
border-radius: 50%;
}

.radio-group label {
display: flex;
align-items: center;
cursor: pointer;
padding: 5px;
margin-bottom: 3px !important;
transition: border-color 0.3s;
}

.radio-group input[type="radio"]:checked + label {
border-color: #17b3e4;
}
.add-btn, .continue-btn, .verify-btn {
display: block;
padding: 10px 20px;
text-transform: uppercase;
font-family: 'Lato';
background-color: #17b2e4;
margin-inline: auto;
color: #fff;
border: none;
cursor: pointer;
font-weight: 700;
text-align: center;
border-radius: 4px;
}
.add-btn:hover, .continue-btn:hover, .verify-btn:hover {
opacity:0.7;
}
button#resend-button {
position: relative;
border: none;
top: -15px;
cursor: pointer;
background: none;
font-size: 16px;
font-family: 'Lato';
color: #00aeda;
}
button.delete-btn {
background: #fff;
cursor:pointer;
border: NONE;
position: relative;
top: 8px;
}
#edit-button{
display: inline-block;
background: #fff;
border: none;
cursor:pointer;
font-family: 'Lato';
font-weight: 700;
margin-bottom: 10px;
margin-top: -10px;
font-size: 16px;
color: #17b2e3;
}

button#add-family-member {
background: #fff;
font-size: 16px;
margin: 20px auto;
font-weight: 700;
font-family: 'Lato';
border-radius: 4px;
padding: 10px 20px;
border: 2px solid #ccc;
}
div#family-members-heading {
display: none;
color: #ccc;
font-size: 18px;
font-weight: 700;
margin-bottom: 0px;
}
/* For Chrome, Safari, Edge, and Opera */
.insurance-form input[type="date"]::-webkit-inner-spin-button,
.insurance-form input[type="date"]::-webkit-calendar-picker-indicator {
display: none;
-webkit-appearance: none;
}

/* For Firefox */
.insurance-form input[type="date"] {
-moz-appearance: textfield;
}

.family-member {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 15px;
}
.family-member > div {
    flex: 1;
}
.form-heading{
text-align: center;
font-size: 18px;
font-weight: bold;
margin-bottom: 20px;
}
.disabled {
    background-color: #e9ecef;
    pointer-events: none;
    cursor: not-allowed;
}
.radio-label.checked {
border:2px solid #17b3e4; 
}
.error-message{
color: rgb(216, 22, 113);
font-family: 'Lato';
font-size: 14px;
margin-left: 5px;
}
.error-message.position-absolute {
position: absolute;
}
#countdown-message{
position: relative;
top: -15px;
font-size: 14px;
margin-left: 5px;
}
.counter_time{
color: #17b2e4;
}
#phone {
padding-left: 40px;
}
.iti__country-container {
right:inherit !important;
}

label[for="company_size"] {
display: inline;
}

.insurance_type_group {
display: flex;
flex-direction: column;
}

/* To hide arrows to increase and decrease number of number fields */

/* For Chrome, Safari, Edge, Opera   */

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}

/* For Firefox */

input[type="number"] {
-moz-appearance: textfield;
}

.loader {
border: 4px solid #f3f3f3;
border-top: 4px solid #17b2e4;
border-radius: 50%;
width: 20px;
height: 20px;
animation: spin 2s linear infinite;
display: flex;
margin: 5px auto;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

.grey-heading {
color: #ccc;
font-size: 18px;
font-weight: 700;
margin-bottom: 10px;
}

#add-traveller {
display: flex;
background: #fff;
font-size: 16px;
margin: 20px auto;
font-weight: 700;
font-family: "Lato";
border-radius: 4px;
padding: 10px 20px;
border: 2px solid #ccc;
}
.form-group input[type="number"] {
width: 100%;
padding: 8px;
margin-top: 3px;
font-family: "Lato";
font-size: 16px;
border: 2px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}

.disclaimer {
margin-top: 10px;
text-align: left;
font-size: 13px;
}

.red-link {
color: red;
}

/* -----------------------------
   Lead Form 2-Step UI
------------------------------*/
.lead-form-progress{
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    max-width: 420px;
    margin: 0 auto 25px;
    padding: 0 10px;
}
.lead-form-progress-line{
    position: absolute;
    top: 18px;
    left: 25%;
    right: 25%;
    height: 2px;
    background: #d6d6d6;
    z-index: 0;
}

.lead-form-progress.is-step-2 .lead-form-progress-line{
    background: #17b3e4;
}
.lead-form-progress-step{
    position: relative;
    z-index: 1;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    width: 50%;
}
.lead-form-progress-circle{
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #e9ecef;
    color: #9d9d9d;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
}
.lead-form-progress-circle-check{
    display: none;
    font-size: 16px;
    line-height: 1;
}
.lead-form-progress-step--1 .lead-form-progress-circle{
    background: #17b3e4;
    color: #fff;
}
.lead-form-progress-step--2 .lead-form-progress-circle{
    background: #e9ecef;
    color: #9d9d9d;
}
.lead-form-progress-label{
    margin-top: 8px;
    font-size: 12px;
    font-weight: 700;
    color: #273133;
}
.lead-form-progress.is-step-2 .lead-form-progress-step--2 .lead-form-progress-circle{
    background: #17b3e4;
    color: #fff;
}
.lead-form-progress.is-step-2 .lead-form-progress-step--1 .lead-form-progress-circle-number{
    display: none;
}
.lead-form-progress.is-step-2 .lead-form-progress-step--1 .lead-form-progress-circle-check{
    display: block;
}

.lead-form-step1-actions .lead-form-step1-continue-btn{
    width: 100%;
}

.lead-form-step2-nav{
    display: flex;
    gap: 15px;
    align-items: center;
	margin-top:20px;
}
.lead-form-step2-nav .lead-form-back-btn{
    flex: 0 0 100px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    text-transform: uppercase;
    font-family: 'Lato';
    background: #fff;
    border: 1px solid #e0e0e0;
    color: #273133;
    border-radius: 4px;
    font-weight: 700;
    cursor: pointer;
}
.lead-form-step2-nav .continue-btn{
    margin-top: 0;
    flex: 1;
}

.lead-form-header{
    text-align: center;
    margin-bottom: 12px;
}

.lead-form-title{
    font-size: 28px;
    font-weight: 700;
    color: #1d2d50;
    line-height: 1.2;
}

.lead-form-subtitle{
    margin-top: 6px;
    font-size: 16px;
    color: #5b6272;
    line-height: 1.4;
}

.lead-form-divider{
    margin-top: 10px;
    display: block;
    height: 2px;
    width: 100%;
    background: #17b3e4;
    margin-left: auto;
    margin-right: auto;
}

.lead-form-email-phone-row {
    display: flex;
    flex-direction: column;
}

/* -----------------------------
   Field Layout (2-column)
------------------------------*/
.lead-form-step[data-lead-step="coverage"]{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 20px;
}

.lead-form-step[data-lead-step="coverage"] > .form-group{
    margin-bottom: 0;
}

/* Non .form-group blocks (conditional sections, repeaters, etc.) should span full width */
.lead-form-step[data-lead-step="coverage"] > :not(.form-group):not(.lead-form-step1-actions){
    grid-column: 1 / -1;
}

.lead-form-step[data-lead-step="coverage"] > .lead-form-step1-actions{
    grid-column: 1 / -1;
}

/* Make radio options look like full text buttons (2-up, wraps naturally) */
.radio-group{
    flex-wrap: wrap;
}

.radio-group label{
    flex: 1 1 0;
    width: auto;
    white-space: normal;
    text-align: center;
    margin-bottom: 0 !important;
}

/* Turn radios into full "button" labels (no visible circles) */
.radio-group input[type="radio"]{
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.radio-group label.radio-label{
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    padding: 14px 12px;
    border: 1px solid #e4e9f0;
    background: #fff;
    color: #7a8794;
    font-weight: 700;
    font-size: 14px;
    min-width: 0;
}

/* Highlight selected option text */
.radio-group label.radio-label:has(> input[type="radio"]:checked){
    background: #17b3e4;
    border-color: #17b3e4;
    color: #fff;
}

/* Coverage-step typography + spacing closer to the reference */
.lead-form-step[data-lead-step="coverage"] .form-group{
    margin-bottom: 20px;
}

.lead-form-step[data-lead-step="coverage"] .form-group label{
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 8px;
    letter-spacing: 0.2px;
    text-transform: uppercase;
    color: #8b97a8;
}

.lead-form-step[data-lead-step="coverage"] .form-group input[type="text"],
.lead-form-step[data-lead-step="coverage"] .form-group input[type="email"],
.lead-form-step[data-lead-step="coverage"] .form-group input[type="date"],
.lead-form-step[data-lead-step="coverage"] .form-group select{
    font-size: 14px;
    padding: 12px 14px;
    border: 1px solid #e4e9f0;
    border-radius: 8px;
    margin-top: 3px;
    color: #555555;
}

/* Match the dropdown arrow/icon consistently across selects */
.lead-form-step[data-lead-step="coverage"] .form-group select{
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("https://blog.policyadvisor.com/wp-content/uploads/2024/08/Symbol.svg");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px;
    padding: 9px 40px 9px 10px; /* space for arrow on the right */
}

/* Ensure the extra text after some labels (e.g. "(Include yourself...)") matches label styling */
.lead-form-step[data-lead-step="coverage"] .form-group{
    color: #8b97a8;
}

.lead-form-step[data-lead-step="coverage"] .radio-group{
    gap: 12px;
    justify-content: space-between;
}

.lead-form-step[data-lead-step="coverage"] .radio-group label.radio-label{
    flex: 0 0 calc(50% - 6px) !important;
    max-width: calc(50% - 6px) !important;
    width: calc(50% - 6px) !important;
    box-sizing: border-box;
}

/* Specific UI for provincial coverage block (health form) */
.lead-form-step[data-lead-step="coverage"] .provincial-health-coverage-field{
    grid-column: 1 / -1;
}


.lead-form-step[data-lead-step="coverage"] .provincial-health-coverage-help{
    font-size: 14px;
    line-height: 1.45;
    color: #97a3b3;
    margin: -2px 0 10px;
    text-transform: none;
    letter-spacing: 0;
}

.lead-form-step[data-lead-step="coverage"] .provincial-health-coverage-field .radio-group{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lead-form-step[data-lead-step="coverage"] .provincial-health-coverage-field .radio-group label.radio-label{
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
    justify-content: flex-start;
    text-align: left;
    background: #fff !important;
    color: #273133 !important;
    border-color: #dce3ec !important;
    gap: 10px;
}

.lead-form-step[data-lead-step="coverage"] .provincial-health-coverage-field .radio-group input[type="radio"]{
    position: relative;
    opacity: 1;
    width: 22px;
    height: 22px;
    pointer-events: auto;
    flex: 0 0 22px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: 2px solid #b8c3d3;
    border-radius: 50%;
    background: #fff;
}

.lead-form-step[data-lead-step="coverage"] .provincial-health-coverage-field .radio-group input[type="radio"]:checked{
    border-color: #17b3e4;
    box-shadow: inset 0 0 0 5px #fff;
    background: #17b3e4;
}

@media (max-width: 640px) {
	.insurance-form{
		padding-top:20px !important;
	}
    .lead-form-progress{
        max-width: 320px;
        margin-bottom: 20px;
    }

    .lead-form-progress-line{
        left: calc(25% + 4px);
        right: calc(25% + 4px);
    }

    .lead-form-title{
        font-size: 20px;
    }

    .lead-form-subtitle{
        font-size: 14px;
    }
	.lead-form-step[data-lead-step="coverage"]{
        grid-template-columns: 1fr;
    }

    /* Life form: keep specific pairs in 2 columns on mobile */
    #life-insurance-form .lead-form-step[data-lead-step="coverage"]{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Default full-width for life coverage fields on mobile */
    #life-insurance-form .lead-form-step[data-lead-step="coverage"] > .form-group{
        grid-column: 1 / -1;
    }

    #life-insurance-form .lead-form-step[data-lead-step="coverage"] > :not(.form-group):not(.lead-form-step1-actions){
        grid-column: 1 / -1;
    }

    #life-insurance-form .lead-form-step[data-lead-step="coverage"] > .lead-form-step1-actions{
        grid-column: 1 / -1;
    }

    /* Keep these pairs in one row on mobile */
    #life-insurance-form .lead-form-step[data-lead-step="coverage"] .form-group:has(input#coverage_amount),
    #life-insurance-form .lead-form-step[data-lead-step="coverage"] .form-group:has(select#coverage_term),
    #life-insurance-form .lead-form-step[data-lead-step="coverage"] .form-group:has(input#primary_applicant_DOB),
    #life-insurance-form .lead-form-step[data-lead-step="coverage"] .form-group:has(select#province){
        grid-column: auto;
    }

    /* Health form: keep specific pairs in 2 columns on mobile */
    #health-insurance-form .lead-form-step[data-lead-step="coverage"]{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Default full-width for health coverage fields on mobile */
    #health-insurance-form .lead-form-step[data-lead-step="coverage"] > .form-group{
        grid-column: 1 / -1;
    }

    #health-insurance-form .lead-form-step[data-lead-step="coverage"] > :not(.form-group):not(.lead-form-step1-actions){
        grid-column: 1 / -1;
    }

    #health-insurance-form .lead-form-step[data-lead-step="coverage"] > .lead-form-step1-actions{
        grid-column: 1 / -1;
    }

    /* Keep these pairs in one row on mobile */
    #health-insurance-form .lead-form-step[data-lead-step="coverage"] .form-group:has(input#primary_applicant_DOB),
    #health-insurance-form .lead-form-step[data-lead-step="coverage"] .form-group:has(select#province),
    #health-insurance-form .lead-form-step[data-lead-step="coverage"] .form-group:has(input#annual_income),
    #health-insurance-form .lead-form-step[data-lead-step="coverage"] .form-group:has(input[name="coverage_for_family"]){
        grid-column: auto;
    }
	.hero-image-health img{
		height:200px !important ;
	}
	.hero-heading-health{
	    line-height: 40px;
		margin: 0 0 10px 0;
		font-size: 28px;
	}
}
#company_size_field_li,#company_size_field_hi{
	font-size:14px;
}
button.verify-btn {
    margin-top: 20px;
}
/* LEAD FORM ENDS */