/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

/* Style for gallery */
#neathouses-reference-template .neathouses-reference-gallery {
    display: block; /* Vertical alignment */
    margin: 0; /* Remove extra margin */
}

#neathouses-reference-template .neathouses-gallery-item {
    margin-bottom: 10px; /* Spacing between images */
    overflow: hidden; /* Ensure cropping */
    display: block; /* vertical alignment */
    width: 147px; /* Fixed width for square */
    height: 147px; /* Fixed height for square */
}

#neathouses-reference-template .neathouses-gallery-icon {
    margin: 0; /* remove margin */
    display: block; /* vertical alignment */
    width: 100%;
    height: 100%;
    position: relative;
}

#neathouses-reference-template .neathouses-gallery-item img {
    display: block;
    max-width: 100%; /* Responsive width */
    width: 100%; /* fill container */
    height: 100%; /* fill container */
    margin: 0;
    object-fit: cover; /* Crop the image */
    object-position: center; /* Center the image */
    position: absolute;
    top: 0;
    left: 0;
}

/* Remove figure margin */
#neathouses-reference-template .neathouses-gallery-item figure {
    margin: 0; /* Remove extra margin */
    display: block; /* vertical alignment */
    width: 100%;
    height: 100%;
}

/* Star rating */
#neathouses-reference-template .neathouses-star-rating {
    display: inline-block;
    font-size: 24px;
}

/* Star rating FORM */
.star-rating {
    display: inline-block;
    font-size: 0; /* Remove spacing */
}

.star-rating input[type="radio"] {
    position: absolute;
    opacity: 0; /* Hide radio buttons */
    z-index: -1;
}

.star-rating label.star {
    float: right; /* Move stars */
    padding: 10px;
    font-size: 0; /* Make star invisible */
    cursor: pointer;
    transition: color 0.2s ease-in-out; /* Smooth color change */
}

.star-rating label.star::before {
    font-size: 24px;
    display: inline-block;
    content: "\2606"; /* Unselected star */
    color: #ccc; /* Unselected star color */
}

.star-rating input[type="radio"]:checked ~ label.star::before {
    content: "\2605"; /* Selected star */
    color: #ffcc00; /* Selected star color */
}

.star-rating label.star:hover::before,
.star-rating label.star ~ label.star:hover::before{
    content: "\2605"; /* Selected star */
    color: #ffcc00; /* Selected star color */
}