h1 {
  font-size: 1.75rem !important;
  }
  .required {
    color: red;
  }
  .fa-opacity {
    opacity: 0.5; /* Font awesome opacity */
    font-size: 12px;
  }
  .img-thumbnail {
    object-fit: cover;
    border-radius: 50%;
  }
  .search-link {
    color: red;
  }
  .search-link:hover {
    color: red;
    text-decoration: underline;
    text-decoration-color: red;
  }
  .hover-area {
    position: relative;
    display: inline-block;
  }
    .hover-outline {
    position: absolute;
    pointer-events: none; /* Allows clicks to go through to the image map */
    opacity: 0; /* Initially hidden */
    transition: opacity 0.3s ease; /* Smooth transition */
    top: 0; /* Aligns with the top of the image */
    left: 0; /* Aligns with the left of the image */
    width: 100%; /* Match the width of the image */
    height: 100%; /* Match the height of the image */
    z-index: 10; /* Ensure the SVG is on top */
  }
    svg {
    fill: none; /* No fill for the outline */
    stroke: red; /* Outline color */
    stroke-width: 1; /* Outline thickness */
  }
    /* Hover effect for the YouTube button image */
    .video-thumbnail a:hover img {
          opacity: 1 !important;
  }
  .nav-link {
        color: black;
        font-size: 0.8rem;
        transition: color 0.3s ease;
    }
    .nav-link:hover, .nav-link.active {
        color: red;
    }

    /* =================================================================== */
    /* == FINAL & COMPLETE CSS FOR REVIEWS FEATURE (Card & Modal) == */
    /* =================================================================== */

    /*----------------------------------*/
    /* 1. CREDENTIALS CARD              */
    /*----------------------------------*/

    .credentials-card {
        background-color: #fff;
        cursor: pointer;
    }

    /* --- Column Layout & Responsive Borders --- */
    .host-info-col, .review-col, .rating-col, .total-reviews-col {
        display: flex;
        flex-direction: column;
        justify-content: center;
        border: none;
    }

    /* Medium Screens (Tablets) - 2x2 GRID */
    @media (min-width: 768px) {
        .review-col { border-left: 1px solid #e9ecef; }
        .rating-col { border-top: 1px solid #e9ecef; border-right: 1px solid #e9ecef; }
        .total-reviews-col { border-top: 1px solid #e9ecef; border-left: 1px solid #e9ecef; }
    }

    /* Large Screens (Desktops) - 4-in-a-row GRID */
    @media (min-width: 992px) {
        .rating-col { border-top: none; border-right: none; }
        .total-reviews-col, .rating-col { border-top: none; border-left: 1px solid #e9ecef; }
    }

    /* --- Content Styling --- */
    .credentials-card h3 { font-size: 2.5rem; font-weight: 700; margin-bottom: 0; }
    .card-label { font-size: 0.8rem; color: #6c757d; text-transform: uppercase; letter-spacing: 0.5px; }
    .verified-tick { color: #198754; font-size: 1.2rem; }
    .rating-col .star-rating { font-size: 0.8rem; }
    .rating-col .star-rating .fa-star-half-alt { color: #8a9198; }
    .rating-col .star-rating .far { color: #adb5bd; }

    /* --- Animation Styles --- */
    .review-fader { position: relative; min-height: 95px; overflow: hidden; }
    .review-item {
        position: absolute; width: 100%; height: 100%;
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.6s ease-out, transform 0.6s ease-out;
        display: flex; flex-direction: column;
        pointer-events: none;
    }
    .review-item.active { opacity: 1; transform: translateY(0); pointer-events: auto;}
    .review-item p { margin-bottom: 0.25rem; flex-grow: 1; font-size: 0.95rem; }
    .review-item .author { font-weight: 600; flex-shrink: 0; }

    /* On screens between 768px and 991.98px (Tablet "2x2" layout) */
    @media (min-width: 768px) and (max-width: 991.98px) {
        .review-item p {
            font-size: 0.85rem; /* The new, smaller font size for tablets */
            line-height: 1.4;   /* Adjusted line-height */
        }
    }

    /*----------------------------------*/
    /* 2. REVIEWS MODAL                 */
    /*----------------------------------*/

    .modal-xl { max-width: 1100px; }

    /* --- Layout & Structure --- */
    #reviewsModal .modal-body { padding: 0; }
    #reviewsModal .reviews-modal-container { position: relative; }

    /* --- Left "Insights" Panel --- */
    #reviewsModal .reviews-insights-panel {
        width: 320px;
        padding: 1.5rem;
        background-color: #f8f9fa;
        border-right: 1px solid #dee2e6;
        min-height: 450px;
        border-bottom-left-radius: var(--bs-modal-border-radius);
    }
    .rating-and-host-block { text-align: center; border-bottom: 1px solid #dee2e6; padding-bottom: 1.5rem; }
    .overall-rating-display .rating-value { font-size: 5rem; font-weight: 700; line-height: 1; }
    .star-rating-modal { font-size: 1.2rem; }
    .star-rating-modal .fa-star-half-alt { color: #8a9198; }
    .star-rating-modal .far.fa-star { color: #adb5bd; }
    .verified-tick-modal { color: #198754; font-weight: 600; }
    .host-name { font-size: 1.1rem; }

    /* --- Insights List --- */
    .insights-title { margin-top: 1.5rem; color: #6c757d; font-weight: 600; }
    .insights-list { list-style: none; padding: 0; margin: 0; }
    .insights-list li {
        display: flex; align-items: center;
        margin-bottom: 1rem; padding-bottom: 0.75rem;
        border-bottom: 1px solid #dee2e6;
    }
    .insights-list li:last-child { border-bottom: none; }
    .insights-list li i { width: 30px; text-align: center; margin-right: 1rem; color: #495057; font-size: 1.3rem; }
    .insights-list li span { font-size: 0.9rem; }
    
    /* --- "Check Availability" CTA Link --- */
    .insights-list li.contact-cta a,
    .insights-list li.contact-cta a:link,
    .insights-list li.contact-cta a:visited {
        color: inherit; text-decoration: none; font-weight: 600;
        transition: color 0.15s ease-in-out;
    }
    .insights-list li.contact-cta a:hover { color: var(--brand-color); }
    .insights-list li.contact-cta a:hover i { color: #495057; }

    /* --- Right "Reviews List" Panel --- */
    #reviewsModal .reviews-list-panel {
        position: absolute; top: 0; bottom: 0; left: 320px; right: 0;
        overflow-y: auto; overflow-x: hidden;
        padding-right: 1px;
    }
    #reviewsModal .reviews-list-content {
        background-color: #fff; min-height: 100%;
        border-bottom-right-radius: var(--bs-modal-border-radius);
        display: flex; flex-direction: column;
    }
    .reviews-list-header { padding: 1.5rem 1.5rem 1rem; border-bottom: 1px solid #dee2e6; flex-shrink: 0; }
    .reviews-list-header h6 { margin: 0; }
    .reviews-scroll-area { padding: 1.5rem; flex-grow: 1; }
    .google-footer-link { text-align: center; }
    .google-footer-link a { font-size: 0.85rem; color: #6c757d; text-decoration: none; }
    .google-footer-link a:hover { text-decoration: underline; }
    .google-footer-link i { font-size: 0.7rem; margin-left: 0.25rem; }

    /* --- Individual Review Card Styling --- */
    .review-card { margin-bottom: 1.5rem; border-bottom: 1px solid #f1f3f5; padding-bottom: 1.5rem; }
    .review-card:last-child { border-bottom: none; margin-bottom: 0; }
    .review-author { display: flex; align-items: center; margin-bottom: 1.0rem; }
    .author-avatar { width: 40px; height: 40px; border-radius: 50%; margin-right: 0.75rem; }
    .review-meta { display: flex; align-items: center; }
    .star-rating-individual { font-size: 0.6rem; color: #212529; margin-right: 0.25rem; line-height: 1; }
    .star-rating-individual .far.fa-star { margin-left: -1px; }
    .meta-separator { margin: 0 0.25rem; color: #6c757d; line-height: 1; }
    .review-date { font-size: 0.8rem; color: #6c757d; }
    .review-text p { margin-bottom: 0; line-height: 1.6; }

    .owner-claim-link {
        margin-top: 0.25rem;
        font-size: 0.8rem;
    }
    .owner-claim-link a {
        color: #6c757d;
        text-decoration: none;
        font-weight: 600; /* A little bold to make it stand out slightly */
    }
    .owner-claim-link a:hover {
        color: var(--brand-color);
        text-decoration: none;
    }
    .credentials-card {
        background-color: #fff;
        cursor: pointer;
        /* Add this line for a smooth animation */
        transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    }

    /* Add this new rule for the hover state */
    .credentials-card:hover {
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; /* Adds a more pronounced shadow */
    }
    /* Add this new rule for the "more" link */
    .review-item .more-link {
        color: inherit;
        font-size: 0.9rem;
        font-weight: 550;
        margin-left: 3px; /* A little space before the link */
    }

    /* Optional: Make the link color change with the card hover */
    .review-item .more-link:hover {
        color: var(--brand-color) !important;
    }



/* =================================================================== */
/* ==             CSS FOR THE RATES FEATURE                   == */
/* =================================================================== */

    /* Main container for each stat */
    .stat-item {
        display: flex;
        flex-direction: column; /* STACKS items vertically */
        align-items: center;
        justify-content: center;
        padding: 0.75rem 0; /* Add some vertical padding */
    }

    /* Style for the LARGE NUMBER (borrowed from reviews card) */
    .stat-item .stat-value {
        font-size: 2.2rem; /* Make it nice and big */
        font-weight: 600;  /* Bold but not too heavy */
        color: #343a40;    /* A dark grey, not pure black */
        line-height: 1.2;
    }

    /* Special case for smaller text like "From" */
    .stat-item .stat-prefix {
        font-size: 0.9rem;
        font-weight: 500;
        color: #6c757d;
        margin-right: 0.3rem;
    }

    /* Style for the SMALL LABEL (borrowed from reviews card) */
    .stat-item .stat-label {
        font-size: 0.8rem;
        color: #6c757d;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-top: 0.25rem;
    }

    /* --- Link Styling --- */
    .stat-item a.stat-link {
        color: inherit; /* Inherits the color from its parent */
        text-decoration: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .stat-item a.stat-link:hover .stat-value,
    .stat-item a.stat-link:hover .stat-label {
        color: var(--brand-color); /* Change color on hover */
    }

    /* --- Dividers --- */
    /* Vertical dividers on larger screens */
    @media (min-width: 768px) {
        .stat-item + .stat-item {
            border-left: 1px solid #dee2e6;
        }
    }
    /* Stacking on smaller screens */
    @media (max-width: 767.98px) {
        .stat-item {
            flex-direction: row; /* Go back to horizontal on mobile */
            justify-content: space-between; /* Space items out */
            align-items: center;
        }
        .stat-item + .stat-item {
            border-top: 1px solid #dee2e6;
        }
        /* On mobile, combine the value and prefix */
        .stat-item .stat-value-group {
            display: flex;
            align-items: baseline;
        }
    }

    .subtle-link {
        color: #6c757d;
        font-size: 1rem;
        font-weight: 550;
        text-decoration: none;
    }

    .subtle-link:hover {
        /* --- Hover State --- */
        color: var(--brand-color);
    }


/* =================================================================== */
/* ==            CSS FOR THE RATES MODAL                   == */
/* =================================================================== */

/* --- Modal Structure --- */
#rateDetailsModal .modal-body {
    padding: 0;
    overflow: hidden;
}
#rateDetailsModal .rate-modal-container {
    position: relative;
    display: flex; /* Using flexbox for better responsive handling */
}

/* --- Left "Insights" Panel --- */
#rateDetailsModal .rate-insights-panel {
    width: 320px;
    flex-shrink: 0; /* Prevents the panel from shrinking on smaller screens */
    padding: 1.5rem;
    background-color: #f8f9fa;
    border-right: 1px solid #dee2e6;
}
/* Rate Summary Block (at the top of the left panel) */
.rate-summary-block {
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #dee2e6;
    margin-bottom: 1.5rem;
}
.rate-prefix {
    font-size: 0.9rem;
    color: #6c757d;
    font-weight: 550;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.rate-value {
    font-size: 4.5rem;
    font-weight: 550;
    line-height: 1;
    text-align: center;
}
.rate-suffix {
    text-align: right;
    font-size: 0.9rem;
    color: #6c757d;
}
.monthly-rate-summary {
    text-align: center;
    font-size: 0.9rem;
    color: #6c757d;
    margin-top: 1.0rem;    
    display: flex;
    justify-content: center;
    align-items: center;
}
.monthly-rate-summary .monthly-price {
    font-size: 1.5rem;
    color: #495057;
    font-weight: 550;
    margin: 0 0.25rem;
}
.insights-title {
    color: #6c757d;
    font-weight: 600;
    margin-bottom: 1rem;
}
.insights-list { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
}
.insights-list li {
    display: flex; 
    align-items: center;
    margin-bottom: 1rem; 
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #e9ecef;
}
.insights-list li:last-child { 
    border-bottom: none; 
    margin-bottom: 0;
}
.insights-list li i { 
    width: 30px; 
    text-align: center; 
    margin-right: 1rem; 
    color: #495057; 
    font-size: 1.3rem; 
}
.insights-list li span { 
    font-size: 0.9rem; 
}
.insights-list li.no-highlights span {
    color: #6c757d; /* Lighter text for the fallback message */
}


/* --- Right "Details" Panel --- */
#rateDetailsModal .rate-details-panel {
    flex-grow: 1; /* Allows the panel to fill the remaining space */
    overflow-y: auto;
    scroll-behavior: smooth;
    min-height: 450px;
    max-height: 70vh; 
}
#rateDetailsModal .rate-details-content {
    padding: 1.5rem;
}
.rate-section {
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid #dee2e6;
}
.rate-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}
.rate-section h4 {
    font-size: 1.35rem;
    font-weight: 550;
    margin-bottom: 1rem;
}
.detail-item {
    display: flex;    
    align-items: baseline;
    padding-left: 0.5rem; 
    margin-bottom: 0.5rem; 
}
.detail-item::before {
    content: '•';
    font-size: 1.6rem;
    color: #6c757d;
    font-weight: bold;
    line-height: 1;
    margin-right: 0.75rem;
    flex-shrink: 0;
}

/* =============================== */
/*  CSS FOR THE IMAGE MODAL        */
/* =============================== */
/* Make the outer container flexible and screen-aware */
#imageModal .modal-dialog {
    max-width: 95% !important;
    width: auto !important;
}
/* Make the white box shrink-to-fit the image */
#imageModal .modal-content {
    width: fit-content;
    margin: 0 auto;
}
/* Now we can reliably control the padding */
#imageModal .modal-body {
    padding: 0.5rem !important;
}
/* Control the image size within its new, snug container */
#imageModal img {
    max-height: 85vh;
    max-width: 100%;
    width: auto;
    height: auto;
}
/* This rule fixes the conflict between the slider and the image modal. */
body.modal-open .slider-wrapper {
   z-index: 0;
}