#tax-calculator {
     display: block;
    max-width: 100%;
    margin: 20px auto;
    padding: 40px;
    background-color: #EEF3F8;
}

   

#tax-calculator form {
    /*display: flex;
    flex-direction: column; */
}

#tax-calculator label {
    margin: 15px 0 10px;
    color: #053c5e; /* Primary color for text */

}

#tax-calculator input[type="text"],
#tax-calculator select,
#tax-calculator input[type="number"] {
    padding: 12px;
    margin-bottom: 10px;
    border-radius: 8px;
    border: 2px solid #1f7a8c;
    background-color: #fff; /* White background for inputs */
    display: block; /* Ensures the element is treated as a block-level element */
    margin: 10px auto; /* Centers the element within its container */
    width: 80%; /* Example width; adjust as needed for your design */
}

#tax-calculator input[type="radio"],
#tax-calculator input[type="checkbox"] {
    margin-right: 8px;
}


#tax-calculator button {
    cursor: pointer;
    padding: 12px 25px;
    color: black;
    border: 1px solid;
    border-radius: 0px;
    transition: background-color 0.3s ease;
}

#tax-calculator button:hover {
    background-color: darken(#1f7a8c, 20%);
}

#total-cost {
    margin-top: 15px;
    font-size: 1.2em;
    font-weight: bold;
    color: #053c5e;
}

/* Ensure Barlow and Roboto fonts are loaded in your HTML or via wp_enqueue_style */



#tax-calculator .question-container {
    padding: 25px;
    margin-bottom: 25px;
    border-radius: 8px;
    text-align: center;
}

#tax-calculator .question-3 .options-container {
    display: inline-block; /* Allows the container to shrink-wrap its content */
    text-align: left; /* Left-aligns the content within the container */
    width: auto; /* Adjusts width to fit the content */
}


#tax-calculator .question-container .question {
    /* font-family: 'Roboto', sans-serif; */
    font-weight: bold;
    /* color: #053c5e; */
    font-size: 22px;
    margin-bottom: 25px;
}

#tax-calculator .option {
    font-family: 'Roboto', sans-serif; /* Roboto for the options */
    font-size: 18px; /* Size for the option text */
    display: block; 
    /*align-items: center;*/ 
    margin-bottom: 0px; /* Space out each option */
}

#tax-calculator input[type="radio"] + label,
#tax-calculator input[type="checkbox"] + label {
    vertical-align: middle; /* Align radio buttons/checkboxes with their labels */
    margin-left: 5px; /* Space between the radio button/checkbox and its label */
    color: #053c5e; /* Primary color for label text */
}


#tax-calculator .question-number {
    padding: 0px 22px;

    display: inline-block;
    font-weight: bold;
}

/* Previous button styles */

#tax-calculator .prev-btn {
    border: 1px solid;
    display: inline-block;
}

/* Next and Calculate Cost button styles */
#tax-calculator .next-btn, #tax-calculator button[type="submit"] {
    border: 1px solid;
    display: inline-block;
}

/* Button container to align buttons to the right */
#tax-calculator .button-container {
    text-align: center; /* Aligns buttons to the right */
}
#total-cost {
    text-align: center; /* Centers the text inside the #total-cost div */
    margin-top: 15px; /* Adjust spacing as needed */
    font-size: 45px;
}

#progress-tracker {
    text-align: center;
    margin: 20px 0;
}

#progress-bar {
    width: 80%;
    height: 20px;
}

progress {
    -webkit-appearance: none;
    
  }

::-webkit-progress-bar {
    background-color: #efefef;
  }

::-webkit-progress-value {
    background-color: #a31621; /* Complementary color for the fill */
}

progress::-moz-progress-bar {
    background-color: #a31621; /* Complementary color for the fill */
}

.form-step {
    padding-top: 100px; /* Or margin-top: 100px; */
}