@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

/* ----- Form Step Container ----- */
.form-step {
    margin: 20px 0;
}

#estimate-form {
    max-width: 750px;
}

.form-step p {
    margin-bottom: 20px;
    line-height: normal;
    font: normal normal normal 20px / 30px "Lato", Helvetica, Arial, Verdana, sans-serif;

}



/* ----- Contact & Project Detail Items ----- */
.contact-item, .project-detail-item {
    margin-top: 10px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background: #f9f9f9;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    column-gap: 10px;


}

.contact-item p, .project-detail-item p {
    font-size: 16px;
    font-family: "Montserrat", Helvetica, Arial, Verdana, sans-serif;
}

/* ----- Form Action Button Container ----- */
.form-buttons {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
    column-gap: 5px;
    margin-top: 20px;
}


/* ----- Buttons ----- */

/* Form Action Buttons */
button#save-contact, button#save-project-details, button#add-project-details, button#add-contact, button.prev-step, button.next-step, button.submit, button#cancel-contact, button#cancel-project-details {
    padding: 10px 15px;
    border-radius: 5px;
    font: normal normal 900 16px / 18px "Montserrat", Helvetica, Arial, Verdana, sans-serif}

button#save-contact, button#save-project-details, button#add-project-details, button#add-contact, button.next-step,  button.submit {
    color: white;
    border: 0px;
}

button#save-contact, button#save-project-details, button#add-contact, button#add-project-details  {
    background-color: #296AFFc9;;
}

button#save-contact:hover, button#save-project-details:hover, button#add-contact:hover, button#add-project-details:hover {
    background-color: #296AFF;
    box-shadow: 0 0 5px #296AFF;
}

button#save-contact:active, button#save-project-details:active, button#add-contact:active, button#add-project-details:active {
    background-color: #296AFF;
    box-shadow: none;
    transition: all 0.3s ease;
    transform: scale(0.9);
}

button.next-step, button.submit  {
    background-color: #669822d4;
}

button.next-step:hover, button.submit:hover {
    background-color: #669822;
    box-shadow: 0 0 5px #669822;
}

button.next-step:active, button.submit:active {
    background-color: #669822;
    box-shadow: none;
    transition: all 0.3s ease;
    transform: scale(0.9);
}

button#cancel-contact, button#cancel-project-details {
    box-shadow: inset #000000 0 0 0px .5px;
    border: 0px;
    color: rgba(0, 0, 0, 0.87);
}

button#cancel-contact:hover, button#cancel-project-details:hover {
    box-shadow: inset rgba(0, 0, 0, 0.87) 0 0 0px 2px;
}

button#cancel-contact:active, button#cancel-project-details:active {
    box-shadow: inset rgba(0, 0, 0, 0.87) 0 0 0px 1px;
    transition: all 0.3s ease;
    transform: scale(0.9);
}
/* button#save-contact, button#save-project-details{
    margin-top: 15px;
} */


button.prev-step {
    background-color: transparent;
    color: rgba(0, 0, 0, 0.87);
    box-shadow: inset rgba(0, 0, 0, 0.87) 0 0 0px .5px;
    border: 0px;
}

button.prev-step:hover {
    box-shadow: inset rgba(0, 0, 0, 0.87) 0 0 0px 2px;
}

button.prev-step:active {
    box-shadow: inset rgba(0, 0, 0, 0.87) 0 0 0px 1px;
    transition: all 0.3s ease;
    transform: scale(0.9);
}

/* Contact & Project Buttons  */
button.edit-contact, button.delete-contact, button.edit-project-detail, button.delete-project-detail {
    border: 0px;
    line-height: 0;
    vertical-align: middle;
}

button.edit-contact, button.edit-project-detail, button.delete-contact, button.delete-project-detail {
    background-color: transparent;
}

/* ----- Contact Buttons Container ----- */
.contact-item .contact-buttons, .project-detail-item .project-detail-buttons {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    column-gap: 5px;
}

/* ----- Icons ----- */
img.edit-icon, img.delete-icon {
    /* border-style: solid; */
    width: 20px;
    height: 20px;
    vertical-align: middle;
    border-radius: 5px;
    padding: 5px;
}

img.edit-icon {
    background-color: #296AFFc9;
}

img.edit-icon:hover {
    background-color: #296AFF;
    box-shadow: 0 0 5px #296AFF;
}

img.edit-icon:active {
    background-color: #296AFF;
    box-shadow: none;
    transition: all 0.3s ease;
    transform: scale(0.9);
}

img.delete-icon, img.file-delete-icon {
    background-color: #f50000b0;
}

img.delete-icon:hover, img.file-delete-icon:hover {
    background-color: #f50000;
    box-shadow: 0 0 5px #f50000;
}

img.delete-icon:active, img.file-delete-icon:active {
    background-color: #f50000;
    box-shadow: none;
    transition: all 0.3s ease;
    transform: scale(0.9);

}

img.file-delete-icon {
    width: 20px;
    height: 20px;
    vertical-align: middle;
    border-radius: 5px;
    padding: 5px;
    background-color: #f50000b0;
}


/* ----- Inputs ----- */

input, textarea {
background-color: #f6f7f6;
margin-bottom: 10px;
font: normal normal normal 18px / 28px "Lato", Helvetica, Arial, Verdana, sans-serif;

}
textarea.multi-step-form-textarea{
    min-height: 100px;
}

/* input[type="file"]{
    font-size: 14px !important;
} */

.inline-group input[type="radio"] {
    margin-left: 5px;
    margin-right: 5px;
}

#estimate-form input.multi-step-form-input, #estimate-form textarea.multi-step-form-input {
    width: 100%;
    padding: 10px 12px;
    font: normal normal normal 18px / 28px "Lato", Helvetica, Arial, Verdana, sans-serif;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    transition: border-color 0.3s ease-in-out;


}

#estimate-form input.multi-step-form-input:focus, #estimate-form textarea.multi-step-form-input:focus {
    border-color: #8FB508;
    border-width: 2px;
    outline: none;
}

.inline-group input[type="radio"] {
    margin-left: 5px;
    margin-right: 5px;
}

#estimate-form input[type="radio"] {
    width: auto;
}

/* ----- Labels ----- */
#estimate-form label {
    font-size: 20px;
    font-weight: 700;
    display: block;
    margin-top: 10px;
    font-family: "Lato", Helvetica, Arial, Verdana, sans-serif;
    color: #494949;
}

#estimate-form .inline-group label {
    display: inline-block;
    margin-right: 10px;
}


/* ----- Inline Group ----- */
.inline-group {
    padding-bottom: 10px;
}
    
/* ----- Error Messages ----- */
.form-error-message {
    color: #f50000;
    font-size: 14px;
    margin-top: -5px;
    font-weight: 900;
    font-family: "Montserrat", Helvetica, Arial, Verdana, sans-serif;
}


/* ----- File Upload ----- */

.uploaded-file{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background: #f9f9f9;
}

#uploaded-files{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    row-gap: 15px;
}

.uploaded-image-thumbnail{
    width: 150px;
    max-height: 150px;
    object-fit: cover;
    border-radius: 5px;
    aspect-ratio: 16/9 ;
}

.form-step h3{
    font: normal normal 600 24px / 34px "Montserrat", Helvetica, Arial, Verdana, sans-serif;
}

.form-step h2{
    font: normal normal 700 28px / 39px "Montserrat", Helvetica, Arial, Verdana, sans-seri

}

.form-step h4{
    font: normal normal 600 22px / 32px "Montserrat", Helvetica, Arial, Verdana, sans-serif;
}