/* Styles for RM Roof Replace Cost Plugin */

form#roofPriceForm {
    width: 460px;
    max-width: 100%;
    text-align: center;
}

hr.styled-hr {
    height: 5px!important;
    background-color: #ccc!important;
    margin: 20px 0!important;
}

#roofPriceForm .smaller-form-group {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
#roofPriceForm .form-group {
    margin-bottom: 15px;
}

#roofPriceForm .row-group {
    display: flex;
    gap: 10px;
}

#roofPriceForm .row-item {
    flex: 1;
}

#roofPriceForm label {
    font-weight: bold;
    margin-bottom: 15px;
    display: block;
}

#roofPriceForm input[type="number"], #roofPriceForm select {
    width: 100%;
    padding: 8px;
    border: 2px solid #ccc;
    border-radius: 4px;
    margin-bottom: 10px;
}

#regions-map a {
    text-decoration: none;
}
#regions-map g path {
    cursor: pointer;
    transition: fill 0.2s;
}
#regions-map g:hover path {
    fill: #0087ba;
}
#regions-map a.selected-region g path {
    fill: #cc6c27;
    stroke: #0056b3;
}


#roofPriceForm .checkbox-group {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

#roofPriceForm .checkbox-item {
    text-align: center;
    cursor: pointer;
}

#roofPriceForm .checkbox-item p {
    font-size: 80%;
    font-weight: bold;
}

#roofPriceForm .checkbox-item img {
    width: 100%;
    height: 100px;
    object-fit: cover;
    border: 2px solid transparent;
    border-radius: 16px;
    border-color: #fff;
    border-width: 4px;
    transition: 0.3s;
}
#roofPriceForm #garageGroup .checkbox-item img {
    width: 100%;
    height: 85px;
}
#roofPriceForm #roofSlopeGroup .checkbox-item img,
#roofPriceForm #levelsGroup .checkbox-item img{
    width: 85px;
    height: 85px;
}

#roofPriceForm .checkbox-item img.selected,
#roofPriceForm .checkbox-item img:hover {
    border-color: #0087ba;
    border-radius: 16px;
    border-width: 4px;
    box-shadow: 1px 0px 10px -4px #000;
}

#roofPriceForm button {
    background-color: #cc6c27;
    color: white;
    padding: 10px 25px;
    font-size: 20px;
    border: none;
    border-radius: 35px;
    cursor: pointer;
    position: relative;
    margin: 0 auto;
    display: flex
;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
}

#roofPriceForm button:hover {
    background-color: #d68a52;
}

#roofPriceForm button::after {
    content: '▼';
    transform: rotate(-90deg);
    margin-left: 10px;
    font-size: 25px;
    background-color: #fff;
    color: #cc6c27;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    line-height: 39px;
}
#roofPriceForm button:hover:after{
    color: #d68a52;
}

.result {
    flex-direction: column;
    flex-wrap: wrap;
    margin-top: 20px;
    padding: 15px 0;
    text-align:center;
    display: none;
}
.result>div {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 20px 20px;
}
.result div[class *="-estimate"] {
    padding: 50px 25px;
    display: flex;
    flex-direction: column;
    width: 31%;
    border-radius: 10px;
}
.result div[class *="-estimate"] p{
    margin-bottom:0px;
    font-size: 1.5rem;
}
.result .low-estimate{
    background-color:#F1F1F1;
}
.result .mid-estimate{
    background-color:#FBAF40;
}
.result .high-estimate {
    background-color: #F05023;
    color: #fff;
}
#tooltip {
    position: fixed; /* Fixed positioning relative to the viewport */
    background-color: rgba(0, 0, 0, 0.75);
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 14px;
    pointer-events: none; /* Prevent tooltip from blocking interactions */
    display: none; /* Hidden by default */
    z-index: 1000; /* Ensure it appears above all other elements */
    white-space: nowrap; /* Prevent text wrapping */
}

@media screen and (min-width: 768px) {
    form#roofPriceForm {
        width: 750px;
        max-width: 100%;
    }
    #roofPriceForm .checkbox-group {
        justify-content: space-between;
        flex-wrap: nowrap;
    }
}

@media screen and (max-width: 767px) {
    form#roofPriceForm {
        width: 100%;
    }
    form#roofPriceForm label {
        text-align: center;
    }
    .squareft{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    form#roofPriceForm .form-group {
        width: 100%;
    }
    div#roofTypeGroup .checkbox-item {
        width: 47%;
    }
    div#roofTypeGroup .checkbox-item img{
        height: 150px;
    }
}

@media screen and (max-width: 600px) {
    .result>div {
        justify-content: center;
    }

    .result div[class *="-estimate"] {
        padding: 15px;
        width: 100%;
    }
}

@media screen and (max-width: 550px) {
    div#roofTypeGroup .checkbox-item img {
        height: 100px;
    }
}