/* General card layout */

.card {

    display: inline-block;

    width: 22%;

    margin: 10px;

    padding: 15px;

    text-align: center;

    border: 1px solid #ccc;

    border-radius: 8px;

    transition: transform 0.3s ease;

    cursor: pointer;

    background: white;

}



.card:hover, .four-column .card.active {

    transform: scale(1.03); /* Slightly enlarge the card when hovered */

    background: #ffd5001f;

}



button[disabled] {

    opacity: 0.7;

}



.card .card-content {

    padding: 10px;

}



.card img {

    width: 150px;

    height: 150px;

    margin-bottom: 10px;

}



.card h3 {

    font-size: 29px;

    font-weight: bold;

}



.card p {

    font-size: 14px;

    color: #666;

}



/* Layout for multiple cards in a row */

.four-column {

    display: flex;

    flex-wrap: wrap;

    justify-content: space-between;

}



.four-column .card {

    flex: 1 0 21%; /* Flexbox property to keep cards responsive */

    box-sizing: border-box;

}



.step_heading {

    font-size: 22px;

    margin-bottom: 20px;

}





.form-row {

    display: flex;

    gap: 20px;

    flex-wrap: wrap;

}



.form-group {

    flex: 1;

    display: flex;

    flex-direction: column;

}



.align-end {

    justify-content: flex-end;

}



/* Make sure button fills available space in smaller screens */

.form-group button {

    width: 100%;

    padding: 12px;

    font-size: 16px;

}



@media (max-width: 600px) {

    .form-row {

        flex-direction: column;

    }

}



h2.call_offer_msg {

    font-size: 26px !important;

}



#car-offer-form {

    max-width: 650px;

    margin: 40px auto;

    background-color: rgb(29 41 57);

    border-radius: 12px;

    padding: 30px;

    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);

    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

}



#car-offer-form label {

    display: block;

    font-weight: 60;

    margin-bottom: 6px;

    color: white;

margin-top: 15px;

}



#car-offer-form select,

#car-offer-form input[type="text"] {

    width: 100%;

    padding: 12px;

    border: 1px solid #ccc;

    border-radius: 8px;

    background: #f9f9f9;

    font-size: 14px;

    transition: border-color 0.3s ease;

}



#car-offer-form select:focus,

#car-offer-form input[type="text"]:focus {

    border-color: #007cba;

    outline: none;

    background: #fff;

}



#get_offer_button {

  width: 100%;

    background-color: #ffd100;

    color: black;

    font-size: 16px;

    font-weight: bold;

    border: none;

    border-radius: 8px;

    cursor: pointer;

    transition: background-color 0.3s ease;

    text-transform: capitalize;

}



#get_offer_button:hover {

    background-color: #ffd100eb;

}



#offer_result {

    margin-top: 20px;

    font-size: 16px;

    font-weight: 700;

    color: #1a1a1a;

    padding: 15px;

    border-radius: 8px;

    background-color: #f1f8ff;

    border: 1px solid #cce5ff;

    text-transform: capitalize;

    text-align: center;

}

.step {

        display: none;

        border-radius: 12px;

        margin-bottom: 30px;

        transition: all 0.3s ease-in-out;

    }



    .step h2 {

        margin-top: 0;

        font-size: 22px;

        color: #333;

        margin-bottom: 15px;

    }



    .step p {

        font-size: 17px;

    margin-bottom: 15px;

    color: black;

    line-height: 24px;

    }



    .step label {

        display: block;

        margin-bottom: 10px;

        font-size: 15px;

        cursor: pointer;

    }



    input[type="radio"],

    input[type="checkbox"] {

        margin-right: 8px;

    }



    #progress-bar-container {

        background-color: #e0e0e0;

        border-radius: 5px;

        overflow: hidden;

     

    }



    #progress-bar {

        height: 20px;



        width: 0%;

        transition: width 0.4s ease;

             background: #fcd614 !important;

    }

    



    #back-button,

    #next-button {

        padding: 10px 20px;

        background-color: #4caf50;

        color: white;

        border: none;

        border-radius: 8px;

        font-size: 16px;

        cursor: pointer;

        margin-top: 10px;

        margin-right: 10px;

    }



    #back-button:hover,

    #next-button:hover {

        background-color: #45a049;

    }



    #final_offer_value {

        font-size: 55px;

        color: #f65b08;

        font-weight: bold;

    }

    

    div#car-offer-form h3 {

        text-transform: capitalize;

        font-size: 26px;

        text-align: center;

        font-weight: 900;

        color: white;

    }

    

    div#car-offer-form select:disabled {

    background: #747e8f !important;

    opacity: 1;

    color: black;

    border: none !important;

}





div#car-offer-form select {

    appearance: none;

}



#offer_result.error {

    background: white;

    border: 2px solid red;

    color: red;

    font-size: 15px;

    padding: 10px;

}



.tell_us_details {

    text-align: center;

    background: rgb(29 41 57);

    padding: 20px;

    color: white;

    font-size: 40px;

    font-weight: bold;

}



.main_step_container {

    max-width: 1200px;

    margin: 0 auto;

}



h2.step_heading {

    font-size: 36px;

    text-align: center;

    font-weight: 600;

    color: black;

    margin-top: 15px;

}



.main_container {

    background: #f3f4f6;

    padding-bottom: 40px;

    min-height: 50vh;

    padding-top: 70px;

}



.bottom-bar {

    background: white;

    padding: 20px;

    max-width: 1200px;

    margin: 0 auto;

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 10px;

}



.bottom-bar button#back-button {

    background: white;

    color: black;

    border: 1px solid rgb(208 213 221);

   padding: 10px 50px;

    font-size: 19px;

    font-weight: 600;

}



.bottom-bar button#next-button {

    background: #fcd614;

    color: black;

    border: 1px solid #fcd614;

    padding: 10px 50px;

    font-size: 19px;

    font-weight: 600;

}



.bottom-bar button#next-button:hover {

    background: #ddbd18;

    border: 1px solid #ddbd18;

    transition: .3s;

}





.bottom-bar button#back-button:hover {

    background: rgb(208 213 221);

    transition: .3s;

}



.step.mileage input {

    max-width: 350px;

    margin: 0 auto;

    display: flex;

    justify-content: center;

    align-items: center;

    position: relative;

    top: 20px;

    border: 1px solid rgb(208 213 221 );

}



.card-grid {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

}



.card-option {

    flex: 1 1 calc(20% - 20px);

    min-width: 180px;

    height: 100%;

    background: #fff;

    border: 1px solid #ccc;

    border-radius: 10px;

    overflow: hidden;

    text-align: center;

    cursor: pointer;

    transition: all 0.3s ease;

    box-shadow: 0 2px 6px rgba(0,0,0,0.1);

}







.card-option .card-content img {

    object-fit: cover;

    width: 150px;

    height: 150px;

}



.card-option .card-content h4 {

    font-size: 25px;

    font-weight: bold;

    padding: 10px 20px !important;

    margin-bottom: 0px;

}



.card-option .card-content p {font-size: 17px;color: black;line-height: 24px;margin-bottom: 0px;padding-top: 0;padding-bottom: 20px;padding-left: 15px;padding-right: 15px;}



.card-option input:checked + .card-content, .card-option.selected, .card-option:hover {

    height: 100% !important;

    transform: scale(1.03);

    background: #ffd5001f;

    transition: .3s;

}



.card input[type="radio"] {

     position: absolute;

    top: 15px;

    left: 15px;

    transform: scale(1.4);

    border-radius: 0px !important;

    accent-color: #fcd614;

}



.card {

      position: relative;

}



.card-option input {

    position: absolute;

    top: 15px;

    left: 15px;

    transform: scale(1.4);

    border-radius: 0px !important;

    accent-color: #fcd614;

}



.card-option {

    position: relative;

}



.four-column textarea {

    border: 1px solid #ccc;

    padding: 20px !important;

}



div#loading-container {

    display: flex;

    justify-content: center;

}



/*vehicle pickup*/



    .wrapper {

        background-color: #3a4b66;

    }





    .pickup-wrapper {

        display: flex;

        color: #fff;

        overflow: hidden;

        padding: 60px 20px;

            max-width: 90%;

    margin: 0 auto;

    }



    .pickup-sidebar {

        flex: 1;

        text-align: center;

        display: flex;

        flex-direction: column;

        align-items: flex-start;        

    }



    .pickup-sidebar h2 {

        font-size: 44px;

    margin-bottom: 10px;

    text-align: left;

    max-width: 80%;

    }



    .pickup-sidebar .price {

        font-size: 60px;

        font-weight: bold;

        color: #ffc107;

        margin: 10px 0;

        border-bottom: 4px solid #fff;

        display: inline-block;

    }



    .pickup-form-container {

        flex: 2;

        color: #000;

    }



    .step { display: none; }

    .step.active { display: block; }



    .form-row {

        display: flex;

        gap: 20px;

        

    }



form#pickupStepsForm  .form-row, form#pickupCallForm  .form-row {

    margin-bottom: 20px;

}



    .form-group {

        flex: 1;

        display: flex;

        flex-direction: column;

    }



    .form-group label {

        margin-bottom: 6px;

        font-weight: 600;

    }



    .form-group input {

        padding: 10px;

        border: 1px solid #ccc;

        border-radius: 8px;

    }



    .button-row {

        text-align: right;

    }



    .button-row #nextBtn, .button-row #submitBtn , .button-row #submitBtnCall {

        background: #fcd614;

    color: black;

    border: 1px solid #fcd614;

    padding: 10px 50px;

    font-size: 19px;

    border-radius: 8px;

    font-weight: 600;

    }

  

     .button-row #nextBtn:hover , .button-row #submitBtn:hover , .button-row #submitBtnCall:hover {

        background: #ddbd18;

    border: 1px solid #ddbd18;

    transition: .3s;

      color: black;

    }

    

    

    .button-row button#prevBtn {

            background: white;

    color: black;

    border: 1px solid rgb(208 213 221);

    padding: 10px 50px;

    font-size: 19px;

    border-radius: 8px;

    font-weight: 600;

    

    }

    

    .button-row button#prevBtn:hover {

          background: rgb(208 213 221);

    transition: .3s;

    }

  



    

    

.pickup-sidebar p {

    margin-bottom: 0px !important;

    font-size: 21px;

}



.pickup-sidebar p {

    margin-bottom: 0px !important;

    font-size: 21px;

}



.pickup-sidebar h2 {

    color: white !important;

}



form#pickupStepsForm, form#pickupCallForm {

    min-height: 380px;

    height: 100%;

}



form#pickupStepsForm div#responseMsg.successResponse, form#pickupCallForm div#responseMsg.successResponse {

    display: flex;

    justify-content: center;

    align-items: center;

    height: 100%;

    font-size: 37px;

    text-align: center;

    margin-top: 0px !important;

}



form#pickupStepsForm , form#pickupCallForm   {

    background: white;

    padding: 30px;

    border-radius: 15px;

}







form#pickupStepsForm  .step h3 , form#pickupCallForm  .step h3 {

    font-weight: 700;

    text-transform: uppercase;

    font-size: 30px;

}



form#pickupStepsForm  .step p , form#pickupCallForm  .step p {

    font-size: 22px;

    margin-top: 20px;

    margin-bottom: 30px;

}



form#pickupStepsForm  .step input , form#pickupCallForm  .step input {

    height: 50px;

    border: 1px solid #ccc;

}



form#pickupStepsForm  .step label , form#pickupCallForm  .step label {

    color: #797575;

}



button#accept_our_offer {

    background: #ffc107;

    border: 1px solid #ffc107;

    margin-top: 20px;

    margin-bottom: 20px;

    font-size: 21px;

    font-weight: bold;

    color: black;

    padding: 15px 25px;

}



button#accept_our_offer:hover {

    transition: .3s;

    background: #f7be13ed;

    border: 1px solid #f7be13ed;

}



form#pickupStepsForm .step ul {

    list-style: none;

    padding-left: 0px;

    margin-top: 45px;

}



form#pickupStepsForm .step ul li {

    display: flex;

    margin: 20px 0px;

}



form#pickupStepsForm .step ul li div img {

    height: 80px;

}



form#pickupStepsForm .step ul li div.column1 {

    padding-right: 19px;

}



form#pickupStepsForm .step ul li div.column2 span {

    font-weight: 600;

    font-size: 22px;

}







form#pickupStepsForm .step ul li div.column2 p {

    margin: 10px 0px;

    font-weight: 300;

}





div#step6 .card-option .card-content h4 {

    font-size: 20px;

    margin-bottom: 20px;

}





.tyrestype .card-grid {

    display: grid;

    grid-template-columns: 1fr 1fr !important;

    gap: 0px;

    border: 1px solid #ccc;

    position: relative;

}



.tyrestype .card-grid .card-option .card-content h4 {

    font-size: 18px;

    font-weight: 500;

    position: absolute;

    top: 0;

    right: 0;

}



.tyrestype .card-grid  label.card-option {border-radius: 0px;}



.tyrestype .card-grid label.card-option:hover {

    transform: unset !important;

}



.stacked_image {

    z-index: 9999;

    height: 350px;

    width: 350px;

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

}



.stacked_image img {

    height: 100%;

    width: 100%;

}



.tyrestype .card-grid label.card-option img, .tyrestype .card-grid label.card-option p , .tyrestype .card-grid label.card-option input {

    visibility: hidden;

}



.tyrestype .card-grid label.card-option:nth-child(2) h4, .tyrestype .card-grid label.card-option:nth-child(4) h4 {

    right: unset;

    left: 0;

}



.card-grid label.card-option {

    margin-bottom: 0px;

}



.two-column {

    max-width: 80%;

    margin: 0 auto;

}



input[type="checkbox"] {

    height: auto !important;

}



@media only screen and (max-width:1024px) {

    .four-column {

        display: grid;

        grid-template-columns: 1fr 1fr;

        gap: 10px;

    }



    .four-column .card {

        width: 100%;

        margin: 0px !important;

    }

    

    .main_step_container {

        padding-left: 10px;

        padding-right: 10px;

    }

    

    .pickup-sidebar h2 {

        font-size: 35px;

    }

    

    button#accept_our_offer {

        font-size: 18px;

    }

    

    .pickup-wrapper {

        max-width: 100%;

        gap: 10px;

    }

    

    div#damage-details .four-column , div#interior_damage_details .four-column{

        grid-template-columns: 1fr !important;

    }





}







@media only screen and (max-width:767px) {

    .four-column {

        grid-template-columns: 1fr 1fr !important;

    }

    

    

    .tell_us_details {

        font-size: 29px;

    }

    

    h2.step_heading {

        font-size: 28px;

    }

    

    .bottom-bar {

        flex-direction: column;

    }

    

    .pickup-wrapper {

        flex-direction: column;

    }

    

    .pickup-form-container {

        margin-top: 40px;

    }

    

    div#car-offer-form .form-row {

        gap: 0px;

    }

    

    .four-column .card {

        padding: 0px;

    }

    

    .main_container {

        padding-top: 40px;

    }



    div#damage-details .four-column , div#interior_damage_details .four-column{

        grid-template-columns: 1fr !important;

    }

    

    

    .tyrestype .card-grid .card-option .card-content h4 {

        font-size: 15px;

    }

    

    .tyrestype .card-grid label.card-option:nth-child(5) h4, .tyrestype .card-grid label.card-option:nth-child(4) h4 {

        bottom: 0 !important;

        top: unset !important;

    }

    

    .stacked_image {

        width: 300px !important;

        height: 300px !important;

    }

    

    .two-column {

        max-width: 100%;

    }

        

}