/* ===================================
    New Header Design Styles (site-header)
    =================================== */

    .site-header {
        border-bottom: 1px solid #e0e0e0; /* Subtle border as seen in image */
        /* The previous 'position: sticky' can be kept if you like sticky headers */
        position: sticky;
        top: 0;
        background-color: #fff; /* Ensure background for sticky header */
        z-index: 1000;
    }
    
    .header-container-new {
        /* Using Bootstrap's .container, but can add specific padding if needed */
        /* Ensure it aligns items properly. Bootstrap navbar does a good job. */
    }
    
    .logo-new img {
        height: 180px;
        /* In the image, the logo seems to have "DRIVEN" larger and "REALTY" smaller.
            This would be part of your actual image file. */
    }
    @media (max-width: 767.98px) {
          .logo-new img {
            height: 80px; /* Adjust this value for your preferred mobile logo size */
          }
        }

    .annaalemi-logo-container {
        display: block; /* Allows us to align items horizontally */
        align-items: center; /* Vertically centers the text and image */
        text-decoration: none; /* Remove underline from the link */
        color: inherit; /* Inherit text color from parent if needed, or set a specific color */
    }
    
    .powered-by-text {
        width: 100%;
        font-size: 0.8em; /* Adjust this value to make "Powered by" smaller */
        color: #333; /* Example color for the text */
        text-align: center;
    }
    
    .annaalemi-logo {
        width: 30%;
        height: auto; /* Maintain aspect ratio */
        max-width: 100%; /* Ensures it doesn't overflow its container */
    }
    
    /* Optional: If you want to control spacing between the two logos */
    .navbar-brand + .navbar-brand.annaalemi-logo-container {
        margin-left: 15px; /* Adjust as needed for spacing between the two logos */
    }
    
    /* Main Navigation - New Styling */
    .main-navigation-new .nav-item {
        margin-left: 10px; /* Adjust spacing between nav items */
        margin-right: 10px;
    }
    
    .main-navigation-new .nav-link {
        font-family: 'Jost', sans-serif;
        font-size: 17px; /* Adjust to match image - it looks a bit smaller/standard */
        color: #181616; /* Color from your previous spec, looks about right */
        padding: 10px 8px; /* Reduced padding to match a more standard header height */
        font-weight: 500; /* Medium weight */
        text-transform: capitalize; /* Image shows "Home", "Property", not all caps */
        position: relative;
        transition: color 0.3s ease;
    }
    
    .main-navigation-new .nav-link:hover,
    .main-navigation-new .nav-link.active {
        color: #0B1B3C; /* Using the dark blue for hover/active, common practice */
        /* No underline by default, as per the new image's cleaner look */
    }
    
    /* Optional: If you want a subtle indicator for active/hover, not a full underline */
    .main-navigation-new .nav-link.active::after,
    .main-navigation-new .nav-link:hover::after {
        content: '';
        position: absolute;
        bottom: 0; /* Position at the bottom of the link's padding */
        left: 50%;
        transform: translateX(-50%);
        width: 60%; /* Width of the small indicator line */
        height: 2px;
        background-color: #0B1B3C; /* Dark blue indicator */
        /* Remove this ::after block if you want no indicator at all */
    }
    
    
    /* Login Button - New Class for potential specific styling */
    .btn-login-new {
        background-color: #0B1B3C; /* Dark blue/charcoal from your spec */
        color: #fff;
        font-family: 'Jost', sans-serif;
        font-weight: 500;
        text-transform: uppercase;
        padding: 10px 20px; /* Adjust padding as needed */
        border-radius: 4px; /* Slightly rounded corners */
        font-size: 14px;
        letter-spacing: 0.5px;
        white-space: nowrap; /* Prevent text wrapping */
    }
    .btn-login-new .arrow {
        margin-left: 5px;
        font-size: 16px; /* Make arrow slightly larger */
    }
    .btn-login-new:hover {
        background-color: #1C2F5C; /* Slightly lighter shade for hover */
        color: #fff;
    }

    .profile-dropdown-container {
        position: relative;
        display: inline-block;
    }

    .profile-avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: #0B1B3C; /* Primary blue */
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
        font-size: 1rem;
        cursor: pointer;
        border: 2px solid #fff;
        box-shadow: 0 0 0 2px #0B1B3C;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    .profile-avatar:hover {
        transform: scale(1.05);
        box-shadow: 0 0 0 3px #1C2F5C;
    }

    .profile-dropdown-menu {
        position: absolute;
        top: calc(100% + 10px); /* Position below the avatar with a gap */
        right: 0;
        background-color: #fff;
        border-radius: 8px;
        box-shadow: 0 5px 25px rgba(0,0,0,0.1);
        border: 1px solid #e9ecef;
        width: 240px; /* Wider dropdown */
        z-index: 1021; /* Above other header content */
        display: none; /* Hidden by default */
        animation: fadeIn 0.2s ease-out;
    }
    
    .profile-dropdown-menu.show {
        display: block;
    }

    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(-10px); }
        to { opacity: 1; transform: translateY(0); }
    }

    .dropdown-user-info {
        padding: 1rem;
        border-bottom: 1px solid #e9ecef;
        text-align: left;
    }
    .dropdown-user-info .username {
        font-weight: 600;
        color: #181616;
        margin: 0;
    }
    /* You can add this back if you store user email in session */
    /* .dropdown-user-info .user-email { ... } */

    .profile-dropdown-menu .dropdown-item {
        display: flex;
        align-items: center;
        gap: 12px; /* Increased gap */
        padding: 0.75rem 1rem;
        color: #495057;
        text-decoration: none;
        font-size: 0.95rem;
        font-weight: 500;
    }
    .profile-dropdown-menu .dropdown-item i.fas {
        width: 20px;
        text-align: center;
        color: #adb5bd;
        transition: color 0.2s ease;
    }
    .profile-dropdown-menu .dropdown-item:hover {
        background-color: #f8f9fa;
        color: #0B1B3C;
    }
    .profile-dropdown-menu .dropdown-item:hover i.fas {
        color: #0B1B3C;
    }
    
    .dropdown-divider {
        height: 1px;
        margin: 0.5rem 0;
        overflow: hidden;
        background-color: #e9ecef;
    }

    

    /* Ensuring the login button is properly aligned at the far right within the collapsible navbar */
    /* Bootstrap's ms-lg-auto on .header-actions-new should handle this for large screens. */
    /* For mobile, Bootstrap stacks them. */
    
    
    /* Mobile Nav Toggle - inherits from previous styles if .mobile-nav-toggle is reused */
    /* Or style specifically if needed */
    .navbar-toggler.mobile-nav-toggle {
        border: none;
        /* color: #181616; /* Color of the bars */
    }
    .navbar-toggler.mobile-nav-toggle:focus {
        box-shadow: none;
    }
    .navbar-toggler.mobile-nav-toggle span {
        display: block;
        width: 22px;
        height: 2px;
        background-color: #181616; /* Color of the bars */
        margin: 5px auto;
        transition: all 0.3s ease-in-out;
    }
    
    /* ===================================
        Hero Section Alt Styles
        =================================== */
    
        .hero-section-alt {
        position: relative;
        color: #fff; /* Default text color for this section */
        min-height: 70vh; /* Adjust as needed, or use padding */
        display: flex;
        align-items: center; /* Vertically center content within the section */
        padding: 80px 0; /* Vertical padding */
        overflow: hidden; /* Ensures nothing spills out */
    }
    
    .hero-alt-background-image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center center;
        z-index: 1; /* Behind content, above page background */
    }
    
    /* Optional: Dark overlay for better text readability if background is too bright */
    .hero-alt-background-image::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.35); /* Adjust darkness (0.3 = 30% black) */
        z-index: 2;
    }
    
    .hero-alt-content {
        position: relative; /* To ensure it's above the background image and its overlay */
        z-index: 3;
        display: flex;
        flex-direction: column; /* Stack text and search box */
        align-items: flex-start; /* Align items to the left */
        width: 100%;
    }
    
    .hero-alt-text-overlay {
        text-align: left;
        margin-bottom: 30px; /* Space between text and search box */
    }
    
    .hero-alt-small-title {
        font-family: 'Jost', sans-serif;
        font-size: 16px; /* Adjust as needed */
        font-weight: 300; /* Lighter weight */
        margin-bottom: 8px;
        color: #f0f0f0; /* Slightly off-white for subtlety */
    }
    
    .hero-alt-main-title {
        font-family: 'Jost', sans-serif;
        font-size: 48px; /* Adjust as needed, from image this looks large */
        font-weight: 700; /* Bold */
        color: #ffffff;
        line-height: 1.2;
        margin-bottom: 0;
        text-shadow: 1px 1px 3px rgba(0,0,0,0.3); /* Subtle shadow for readability */
    }
    
    .hero-alt-search-box-container {
        width: 100%;
        max-width: 550px; /* Max width of the search box area, adjust as per image */
    }
    
    .hero-alt-search-box {
        background-color: #fff;
        padding: 15px; /* Padding inside the white box */
        border-radius: 8px; /* Rounded corners */
        box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    }
    
    .hero-alt-search-box form {
        display: flex;
        gap: 10px; /* Space between input and button */
    }
    
    .hero-alt-search-input {
        flex-grow: 1; /* Input takes available space */
        border: 1px solid #dcdcdc; /* Light grey border */
        padding: 12px 15px;
        font-size: 16px;
        font-family: 'Jost', sans-serif;
        border-radius: 5px; /* Slightly rounded corners for input */
        color: #333;
    }
    
    .hero-alt-search-input::placeholder {
        color: #999;
    }
    
    .hero-alt-search-button {
        background-color: #0B1B3C; /* Your specified button color */
        color: #fff;
        font-family: 'Jost', sans-serif;
        font-weight: 500; /* Medium weight */
        text-transform: uppercase;
        padding: 12px 25px;
        border: none;
        border-radius: 5px; /* Slightly rounded corners for button */
        cursor: pointer;
        font-size: 14px;
        letter-spacing: 0.5px;
    }
    
    .hero-alt-search-button:hover {
        background-color: #1C2F5C; /* Slightly lighter shade for hover, adjust as needed */
    }
    
    /* Responsive Adjustments */
    @media (max-width: 992px) {
        .hero-alt-main-title {
            font-size: 40px;
        }
        .hero-alt-search-box-container {
            max-width: 500px;
        }
    }
    
    @media (max-width: 768px) {
        .hero-section-alt {
            min-height: 60vh;
            padding: 60px 0;
            text-align: center; /* Center align everything on smaller screens */
        }
        .hero-alt-content {
            align-items: center; /* Center content items */
        }
        .hero-alt-text-overlay {
            text-align: center; /* Ensure text itself is centered */
        }
        .hero-alt-main-title {
            font-size: 32px;
        }
        .hero-alt-small-title {
            font-size: 14px;
        }
        .hero-alt-search-box-container {
            width: 90%; /* Make search box slightly less than full width */
            max-width: 400px;
        }
        .hero-alt-search-box form {
            /* On very small screens, you might stack them if preferred */
            /* flex-direction: column; */
        }
        .hero-alt-search-input,
        .hero-alt-search-button {
            /* If stacking: */
            /* width: 100%; */
            /* margin-bottom: 10px; */
        }
        /* .hero-alt-search-button { margin-bottom: 0; } */
    }
    
    @media (max-width: 480px) {
        .hero-alt-main-title {
            font-size: 28px;
        }
         .hero-alt-search-box form {
            flex-direction: column;
        }
        .hero-alt-search-input,
        .hero-alt-search-button {
            width: 100%;
        }
         .hero-alt-search-input {
            margin-bottom: 10px;
        }
    }
    
    /* ===================================
        Updated Footer Styles
        =================================== */
    
        .site-footer-main {
        background-color: #181616; /* UPDATED background color */
        color: #A8A8A8;
        padding-top: 60px;
        font-family: 'Jost', sans-serif;
        position: relative; /* For absolute positioning of back-to-top if needed */
    }
    
    .footer-logo {
        max-height: 150px; /* Adjusted size slightly */
        margin-bottom: 15px;
    }
    
    .footer-col .tagline {
        font-size: 16px;
        color: #fff;
        margin-bottom: 5px;
        font-weight: 300;
    }
    
    /* Social Icons using Bootstrap Icons */
    .social-icons a.social-icon-link {
        margin-right: 15px;
        display: inline-block;
        color: #A8A8A8; /* Icon color */
        font-size: 20px; /* Icon size */
    }
    .social-icons a.social-icon-link:hover {
        color: #fff; /* Icon color on hover */
    }
    .social-icons a.social-icon-link:last-child {
        margin-right: 0;
    }
    
    .footer-heading {
        color: #fff;
        font-size: 18px;
        margin-bottom: 25px; /* Increased margin */
        font-weight: 500;
    }
    
    .footer-address-block p {
        font-size: 14px;
        margin-bottom: 5px; /* Reduced margin for tighter address blocks */
        line-height: 1.6;
        display: flex;
        align-items: flex-start;
    }
    .footer-address-block p.address-text,
    .footer-address-block p.contact-text {
        padding-left: 26px; /* Space for icon if icon is not inline with strong tag */  
        margin-bottom: 10px;
    }
    
    .footer-address-block p strong {
        color: #fff;
        display: block; /* Make strong take its own line */
        margin-bottom: 4px;
    }
    
    .footer-icon { /* For icons next to "Address" and "Contact" */
        margin-right: 10px;
        font-size: 16px; /* Size of the icon */
        color: #A8A8A8; /* Color of the icon */
        position: relative;
        top: 3px; /* Align with text */
    }
    
    .footer-links {
        list-style: none;
        padding-left: 0;
    }
    
    .footer-links li {
        margin-bottom: 12px; /* Spacing for links */
    }
    
    .footer-links li a {
        color: #A8A8A8;
        text-decoration: none;
        font-size: 15px;
        display: flex;
        align-items: center;
    }
    .footer-links li a:hover {
        color: #fff;
    }
    .footer-icon-link { /* For icons within useful links (e.g., arrow) */
        margin-right: 8px;
        font-size: 16px; /* Size of the link icon */
        position: relative;
        top: 1px; /* Fine-tune alignment */
    }
    
    .footer-bottom {
        /* The image has a subtle line separating this from the main footer.
            Using a border-top on this element achieves that. */
        background-color: #181616; /* Same background color */
        padding: 25px 0; /* Increased padding */
        margin-top: 40px;
        font-size: 14px; /* Slightly larger font for bottom links */
        border-top: 1px solid #333; /* Line separator */
    }
    
    .footer-bottom .copyright-text { /* Target specific p tag if needed */
        margin-bottom: 0;
        color: #888; /* Slightly dimmer for copyright */
    }
    
    .footer-bottom-links a {
        color: #A8A8A8;
        text-decoration: none;
        margin-left: 20px;
    }
    .footer-bottom-links a:first-child {
        margin-left: 0; /* For md and up when text-md-end */
    }
    
    .footer-bottom-links a:hover {
        color: #fff;
    }
    
    /* Back to Top Button using Bootstrap Icons */
    .back-to-top-btn {
        position: fixed;
        bottom: 25px;
        right: 25px;
        background-color: #0B1B3C;
        color: white;
        border-radius: 50%;
        display: none; /* Hidden by default, shown by JS */
        z-index: 1000;
        width: 44px;
        height: 44px;
        font-size: 20px; /* Icon size */
        line-height: 44px; /* Center icon vertically */
        text-align: center;
        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        text-decoration: none;
    }
    .back-to-top-btn i {
        position: relative;
        top: 1px; /* Fine tune vertical alignment */
    }
    
    .back-to-top-btn:hover {
        background-color: #1F1F1F;
        color: white;
    }
    
    /* Responsive adjustments for footer text if needed */
    @media (max-width: 767px) {
        .footer-address-block p.address-text,
        .footer-address-block p.contact-text {
            padding-left: 0;
            margin-top: 0;
        }
        .footer-address-block p {
            flex-direction: column; /* Stack icon and strong tag above text */
            align-items: flex-start;
        }
        .footer-address-block p strong {
             display: inline-block; /* Allow icon and strong tag on same line */
        }
        .footer-icon {
            margin-bottom: 5px; /* Space below icon when stacked */
        }
        .footer-bottom-links a {
            display: block; /* Stack bottom links on small screens */
            margin-left: 0;
            margin-bottom: 5px;
        }
        .footer-bottom-links a:last-child {
            margin-bottom: 0;
        }
    }
    
    /* ===================================
        "Live" Property Card Styles (Clickable & Larger Address)
        (This is the CSS from css_clickable_card_02 artifact)
        =================================== */
    
    /* Wrapper link for the whole card */
    .live-property-card-link {
        display: block;
        text-decoration: none;
        color: inherit;
        height: 100%;
    }
    
    .live-property-card-link:hover,
    .live-property-card-link:focus {
        text-decoration: none;
        color: inherit;
    }
    
    .live-property-card {
        background-color: #fff;
        border: 1px solid #e9ecef;
        border-radius: 8px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        height: 100%;
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
        transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    }
    
    .live-property-card-link:hover .live-property-card {
        transform: translateY(-5px);
        box-shadow: 0 8px 20px rgba(0,0,0,0.12);
    }
    
    .live-property-card__image-container {
        position: relative;
        width: 100%;
        line-height: 0;
    }
    
    .live-property-card__image {
        width: 100%;
        height: 200px;
        object-fit: cover;
        object-position: top left; /* Image covers from top left */
        display: block;
    }
    
    .live-property-card__content {
        padding: 18px;
        display: flex;
        flex-direction: column;
        flex-grow: 1;
    }
    
    .live-property-card__price {
        font-family: 'Jost', sans-serif;
        font-size: 22px;
        font-weight: 700;
        color: #181616;
        margin-bottom: 6px;
    }
    
    /* In public/assets/css/style.css */
    /* Find and update this existing rule: */
    
    .live-property-card__address {
        font-family: 'Jost', sans-serif;
        font-size: 17px;
        color: #333;
        line-height: 1.45;
        margin-bottom: 12px; /* Space AFTER the line, before features */
        padding-bottom: 12px; /* Space BEFORE the line, within the address element */
        min-height: auto; /* Remove or adjust if previously set for 2 lines, as line height now includes padding */
        border-bottom: 1px solid #e0e0e0; /* The new line! Adjust color and thickness as needed */
    }
    
    /* You might also want to adjust the margin-top of the features section if needed,
        but the margin-bottom on the address should handle the spacing.
        Ensure the existing .live-property-card__features rule is present: */
    
    .live-property-card__features {
        display: flex;
        gap: 20px;
        /* margin-bottom: 16px; /* This was the original margin, adjust if it looks too much/little with the new line */
        /* The margin-bottom on .live-property-card__address now controls space above features */
        /* Let's keep a consistent margin for the features block itself before the VIEW DETAILS link */
        margin-bottom: 16px;
        font-family: 'Jost', sans-serif;
        font-size: 14px;
        color: #333;
    }
    
    /* The rest of your .live-property-card CSS rules remain the same */
    .live-property-card__features .feature-item {
        display: flex;
        align-items: center;
    }
    
    .live-property-card__features .feature-item i.bi { /* For Bootstrap Icons */
        margin-right: 8px;
        font-size: 18px;
        color: #444;
        position: relative;
        top: 0px;
    }
    
    /* VIEW DETAILS is a span, styled to look like a link */
    .live-property-card__view-details {
        margin-top: auto; /* Pushes to the bottom */
        font-family: 'Jost', sans-serif;
        font-size: 13px;
        font-weight: 600;
        color: #181616;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        align-self: flex-start;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        cursor: pointer; /* Indicates it's part of a clickable area */
    }
    
    .live-property-card__view-details i.bi { /* For Bootstrap Icon arrow */
        margin-left: 6px;
        font-size: 20px;
        transition: transform 0.2s ease-in-out;
    }
    
    /* Hover effect for VIEW DETAILS triggered by hovering the main card link */
    .live-property-card-link:hover .live-property-card__view-details {
        color: #0B1B3C;
    }
    .live-property-card-link:hover .live-property-card__view-details i.bi {
        transform: translateX(4px);
    }
    
    /* Ensure your main section title and other global styles are also in style.css */
    .section-title { /* Example for "Discover Properties in Ottawa" */
        font-family: 'Jost', sans-serif;
        font-weight: 700;
        color: #181616; /* Or your preferred heading color */
    }
    
    /* ===================================
        About Us Snippet Section Styles
        =================================== */
    
        .about-snippet-section {
        /* If not using Bootstrap's bg-light, or want a custom shade: */
        /* background-color: #f8f9fa; */ /* Example light grey */
    }
    
    .about-snippet-heading {
        font-family: 'Jost', sans-serif;
        font-size: 40px; /* Adjust as needed */
        font-weight: 700; /* Bold */
        color: #181616; /* Dark heading color */
        line-height: 1.4;
    }
    
    .about-snippet-section .text-content-column p {
        font-family: 'Jost', sans-serif;
        font-size: 18px; /* Standard paragraph size */
        line-height: 1.7;
        color: #555; /* Readable paragraph text color */
        margin-bottom: 1.5rem; /* Space between paragraphs */
    }
    
    .about-snippet-section .text-content-column p:last-child {
        margin-bottom: 0;
    }
    
    .about-snippet-image {
        border-radius: 12px; /* Rounded corners for the image */
        max-width: 100%;
        height: auto; /* Maintain aspect ratio */
        box-shadow: 0 8px 25px rgba(0,0,0,0.1); /* Optional: subtle shadow */
    }
    
    /* Responsive adjustments if needed beyond Bootstrap's grid */
    @media (max-width: 767px) {
        .about-snippet-section .text-content-column {
            margin-bottom: 30px; /* Space between text and image on smaller screens */
            text-align: center; /* Center text on mobile */
        }
        .about-snippet-heading {
            font-size: 24px;
            text-align: center;
        }
        .about-snippet-section .image-column {
            text-align: center; /* Center image on mobile */
        }
    }
    
    /* ===================================
        Listings Page Styles
        =================================== */
    
    /* Page Header Section */
    .page-header-section {
        /* background-color: #2c3e50; /* Example dark background, Bootstrap's bg-dark is also an option */
        /* text-white is a Bootstrap class */
        /* py-4 is Bootstrap padding */
    }
    
    .page-header-section .page-title {
        font-family: 'Jost', sans-serif;
        font-weight: 700;
        font-size: 36px; /* Adjust as needed */
    }
    
    .breadcrumb-light .breadcrumb-item a {
        color: #adb5bd; /* Light color for breadcrumb links on dark background */
        text-decoration: none;
    }
    .breadcrumb-light .breadcrumb-item a:hover {
        color: #f8f9fa; /* Lighter on hover */
    }
    .breadcrumb-light .breadcrumb-item.active {
        color: #f8f9fa; /* Active breadcrumb color */
    }
    .breadcrumb-light .breadcrumb-item + .breadcrumb-item::before {
        color: #adb5bd; /* Color of the separator */
    }
    
    
    /* Filter Bar Section */
    .filter-bar-section {
        /* bg-light is a Bootstrap class for light grey background */
        border-bottom: 1px solid #dee2e6; /* Subtle border below filter bar */
    }
    
    .filter-form .form-label {
        font-size: 14px;
        font-weight: 500;
        margin-bottom: 0.3rem;
        color: #495057;
    }
    
    .filter-form .form-control,
    .filter-form .form-select {
        font-size: 15px;
        border-radius: 0.25rem; /* Standard Bootstrap rounding */
    }
    
    .filter-search-button {
        background-color: #0B1B3C; /* Your primary button color */
        border-color: #0B1B3C;
        color: #fff;
        font-weight: 500;
        padding: 0.55rem 1.5rem; /* Adjust padding */
    }
    .filter-search-button:hover {
        background-color: #1C2F5C;
        border-color: #1C2F5C;
    }
    
    
    /* Property Card Badges ("R" and "NEW") */
    .live-property-card__image-container .property-card-badge {
        position: absolute;
        top: 10px;
        padding: 4px 8px;
        font-size: 12px;
        font-weight: bold;
        color: #fff;
        border-radius: 3px;
        text-transform: uppercase;
        z-index: 2; /* Above the image overlay if any */
    }
    
    .live-property-card__image-container .realtor-badge {
        left: 10px;
        background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent black like before */
        font-family: 'Jost', sans-serif; /* Or specific font for 'R' logo */
    }
    
    .live-property-card__image-container .new-badge {
        right: 10px;
        background-color: #28a745; /* Green for "NEW", or choose your color */
    }
    
    /* Ensure the existing .live-property-card styles (from css_live_card_with_fa_01) are also in your style.css */
    /* For example: */
    /* .live-property-card { ... } */ /* Already defined above */
    .live-property-card__image {
        /* ... */
        height: 210px; /* Adjust height if needed for this page, or keep 200px from above */
    }
    /* ... etc. for all .live-property-card child elements ... */
    
    
    /* Pagination (Basic Bootstrap styling will apply, you can customize further) */
    .pagination .page-item .page-link {
        color: #0B1B3C; /* Your primary color */
    }
    .pagination .page-item.active .page-link {
        background-color: #0B1B3C;
        border-color: #0B1B3C;
        color: #fff;
    }
    .pagination .page-item.disabled .page-link {
        color: #6c757d;
    }
    
    /* ========================================================================== */
    /* START: Property Details Page Styles (Optimized & Reviewed from Original) */
    /* ========================================================================== */
    
    .property-detail-page {
        padding-bottom: 5%;
        font-family: 'Jost', sans-serif; /* Apply base font to whole page */
    }
    
    /* This section is now handled by Property Gallery V3 Styles below */
    /* .property-gallery-section .main-image-area { ... } */
    /* .image-thumbnails-strip { ... } */
    
    
    .property-detail-tabs-nav {
        background-color: #fff;
        border-bottom: 1px solid #dee2e6;
        z-index: 999; /* For sticky behavior */
    }
    .property-detail-tabs-nav .nav-tabs {
        border-bottom: none;
    }
    .property-detail-tabs-nav .nav-link {
        font-family: 'Jost', sans-serif;
        font-weight: 500;
        color: #495057;
        padding: 0.9rem 1.5rem;
        border: none;
        border-bottom: 3px solid transparent;
        font-size: 1.125rem; /* ~18px */
    }
    .property-detail-tabs-nav .nav-link.active,
    .property-detail-tabs-nav .nav-link:hover {
        color: #0B1B3C;
        border-bottom-color: #0B1B3C;
        background-color: transparent;
    }
    
    .property-main-info-bar {
        padding: 25px;
        background-color: #fff;
        border-radius: 8px;
    }
    .property-main-info-bar .main-address {
        font-family: 'Jost', sans-serif;
        font-weight: 600;
        font-size: 2rem; /* ~32px */
        color: #181616;
        margin-bottom: 0.75rem !important;
    }
    .property-main-info-bar .main-address i.fas {
        color: #0B1B3C !important;
        font-size: 1.75rem; /* ~28px */
        margin-right: 10px !important;
    }
    .property-main-info-bar .text-muted.small {
        font-size: 1.05rem; /* ~17px */
        margin-bottom: 1rem !important;
    }
    
    .property-main-info-bar .key-stats-grid {
        display: grid;
        /* This is the key change: creates 3 equal columns */
        grid-template-columns: repeat(3, 1fr); 
        gap: 25px 20px; /* Adjusted gap slightly for better spacing */
        margin-top: 20px;
        font-family: 'Jost', sans-serif;
    }
    .key-stats-grid div {
        font-size: 1.125rem; /* ~18px */
        color: #333;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .key-stats-grid div i.fas,
    .key-stats-grid div i.bi { /* Added i.bi for potential Bootstrap Icons */
        margin-bottom: 10px;
        font-size: 2em; /* Relative to parent font-size */
        color: #0B1B3C;
    }
    .key-stats-grid div strong {
        display: block;
        font-size: 1rem; /* ~16px */
        color: #555;
        text-transform: uppercase;
        margin-bottom: 0;
        font-weight: 500;
    }
    .key-stats-grid div span { /* The actual stat value */
        font-weight: 600;
        font-size: 1.1rem; /* Slightly larger for the value */
        color: #181616;
    }
    
    
    .property-detail-page .tab-content {
        padding: 30px;
        background-color: #fff;
        border-radius: 0 0 8px 8px; /* Keep bottom rounding if tabs are above */
        /* box-shadow: 0 2px 4px rgba(0,0,0,0.05); */ /* Removed as per original request for shadow on info-bar and sidebar */
    }
    .property-detail-page .section-subtitle {
        font-family: 'Jost', sans-serif;
        font-size: 1.875rem; /* ~30px */
        font-weight: 600;
        color: #0B1B3C;
        margin-bottom: 1.25rem;
        margin-top: 2rem; /* Space before new section subtitle */
        padding-bottom: 0.75rem;
        border-bottom: 1px solid #e0e0e0;
    }
    .property-detail-page .tab-content > .tab-pane > *:first-child .section-subtitle, /* If subtitle is wrapped */
    .property-detail-page .tab-content > .tab-pane > .section-subtitle:first-child {
        margin-top: 0; /* No top margin for the very first subtitle in a tab */
    }
    
    .property-description,
    .ai-summary-list li,
    .property-detail-page .tab-content p, /* General paragraphs in tab content */
    .accordion-body .list-group-item,
    .accordion-body .list-group-item span,
    .accordion-body .list-group-item strong,
    .accordion-body .table-sm th,
    .accordion-body .table-sm td {
        font-family: 'Jost', sans-serif;
        line-height: 1.8;
        color: #333;
        font-size: 1.125rem; /* ~18px */
    }
    
    .ai-summary-list { list-style: none; padding-left: 0; }
    .ai-summary-list li { margin-bottom: 0.7rem; }
    .ai-summary-list li i.fas { margin-right: 0.6rem; color: #0B1B3C; }
    
    .read-more-toggle {
        color: #0B1B3C;
        font-weight: 600;
        font-size: 1.125rem; /* ~18px */
        text-decoration: none;
        cursor: pointer;
    }
    .read-more-toggle:hover { text-decoration: underline; }
    
    .history-item { font-family: 'Jost', sans-serif; }
    .history-item .fw-bold { font-size: 1.125rem; /* ~18px */ }
    .history-item .small.text-muted { font-size: 1rem; /* ~16px */ }
    /* .history-thumb { width: 70px; height: 70px; object-fit: cover; } */ /* If you add thumbnails to history */
    
    /* Accordion styles for Features & Details */
    .key-features-grid-accordion .accordion-sub-heading { /* If you have subheadings inside accordion items */
        font-family: 'Jost', sans-serif;
        font-size: 1.5rem; /* ~24px */
        font-weight: 600;
        margin-bottom: 1rem;
        color: #181616;
    }
    .key-features-grid-accordion .key-feature-label {
        font-size: 1rem; /* ~16px */
        color: #495057;
        font-weight: 500;
    }
    .key-features-grid-accordion .key-feature-value {
        font-size: 1.125rem; /* ~18px */
        color: #181616;
        font-weight: 500;
    }
    
    .accordion-button {
        font-family: 'Jost', sans-serif;
        font-weight: 600;
        font-size: 1.3rem; /* ~21px */
        padding: 1.1rem 1.35rem;
    }
    .accordion-button:not(.collapsed) {
        color: #fff;
        background-color: #0B1B3C;
    }
    .accordion-button:not(.collapsed)::after { /* Bootstrap 5 accordion icon color */
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    }
    
    /* Sidebar Styles */
    .property-sidebar-right {
        position: -webkit-sticky; /* For Safari compatibility */
        position: sticky;
        top: 120px; /* This is the key part. Adjust this value to be the height of your sticky navigation bar plus some extra space (e.g., 20px) */
        align-self: flex-start; /* Important for sticky to work correctly inside a flex container like a Bootstrap row */
    }
    .price-summary-sidebar {
        display: block;
    }
    .price-summary-sidebar .sidebar-price {
        font-size: 2rem; /* ~48px */
        font-weight: 700;
        color: #181616;
    }
    .price-summary-sidebar .sale-status-badge {
        background-color: #0B1B3C !important; /* Ensure primary color */
        font-size: 1rem; /* ~16px */
        padding: 0.5em 1em;
        font-weight: 500;
        margin-left: 1rem;
    }
    .price-summary-sidebar .estimated-value { /* If you add this element */
        font-size: 1.05rem; /* ~17px */
    }
    .price-summary-sidebar .estimated-value i.fas {
        color: #0B1B3C;
        margin-right: 4px;
    }
    
    .contact-agent-sidebar-box { background-color: #f8f9fa; }
    .contact-agent-sidebar-box .h5 {
        font-weight: 600;
        font-size: 1.4rem; /* ~22px */
        color: #181616;
    }
    .contact-agent-sidebar-box .small.text-muted {
        font-size: 1rem; /* ~16px */
    }
    .contact-agent-sidebar-box .form-control-sm { /* Customizing Bootstrap's sm */
        font-size: 1rem; /* ~16px, making it a bit larger than default sm */
        padding: 0.5rem 0.85rem;
    }
    .contact-agent-sidebar-box .btn-sm { /* Customizing Bootstrap's sm */
        font-size: 1rem; /* ~16px */
        padding: 0.6rem 1rem; /* Slightly more padding */
        font-weight: 500;
    }
    
    .property-actions-sidebar-box .list-group-item {
        font-size: 1.125rem; /* ~18px */
        color: #333;
        padding-top: 0.9rem;
        padding-bottom: 0.9rem;
    }
    .property-actions-sidebar-box .form-check-input:checked {
        background-color: #0B1B3C;
        border-color: #0B1B3C;
    }
    
    /* Market Insights & Chart Titles */
    .market-insights-summary p.h4 { /* Assuming this class is used for stat numbers */
        font-size: 1.75rem; /* ~28px */
        margin-bottom: 0.1rem !important;
    }
    .market-insights-summary small { /* For labels under stats */
        font-size: 1rem; /* ~16px */
        color: #333;
    }
    .section-subtitle-small { /* For chart titles */
        font-family: 'Jost', sans-serif;
        font-size: 1.4rem; /* ~22px */
        font-weight: 600;
        color: #181616;
        margin-bottom: 0.85rem;
    }
    
    /* Chart container to ensure responsiveness */
    .chart-container {
        position: relative; /* Needed for Chart.js responsiveness */
        /* height and width are set inline in PHP, but max-width is good here */
        max-width: 100%; /* Ensure it doesn't overflow its column */
    }
    #medianSoldPriceDomChart { /* If you have this specific chart ID */
        /* Specific styles if needed */
    }
    
    /* ===================================
        Mortgage Calculator Styles (for Property Details Page)
        =================================== */
    
        .calculator-container-wrapper { /* Optional wrapper for spacing */
        /* Add padding or margins if needed to space it within the tab */
    }
    
    .calculator-container {
        background-color: #fff; /* Or #f8f9fa if you want it to blend with tab bg */
        padding: 25px;
        border-radius: 10px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
        display: flex;
        gap: 30px;
        width: 100%;
        flex-wrap: wrap; /* Allow wrapping on smaller screens */
        border: 1px solid #e0e0e0; /* Softer border */
    }
    
    .calculator-form {
        flex: 1;
        min-width: 280px; /* Minimum width before wrapping */
    }
    
    .calculator-results {
        flex: 1;
        min-width: 280px; /* Minimum width before wrapping */
        background-color: #f0f5f0; /* Light green tint, adjust as needed */
        border: 1px solid #00693e; /* Dark green border - matches image */
        border-radius: 10px;
        padding: 25px;
        color: #333;
        display: flex; /* Added for flex column layout */
        flex-direction: column; /* Added */
        justify-content: space-between; /* Added to push disclaimer down */
    }
    
    .calculator-form h2.calculator-title-hidden {
        /* This title is visually hidden but can be kept for semantics if desired */
        display: none;
    }
    .calculator-results h3 { /* "Mortgage Payment" text */
        font-weight: 600;
        color: #181616;
        margin-bottom: 8px;
        font-size: 1.125rem; /* ~18px */
    }
    
    .calculator-form .form-group {
        margin-bottom: 18px;
    }
    
    .calculator-form .form-group label {
        display: block;
        font-weight: 500;
        margin-bottom: 6px;
        font-size: 1rem; /* ~16px */
        color: #495057;
    }
    
    .calculator-form .form-group input[type="text"],
    .calculator-form .form-group input[type="number"],
    .calculator-form .form-group select.form-select { /* Specific for select */
        width: 100%;
        padding: 10px 12px; /* Slightly less padding */
        border: 1px solid #ced4da;
        border-radius: 6px;
        font-size: 1.05rem; /* ~17px */
        font-family: 'Jost', sans-serif;
        box-sizing: border-box;
        transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        background-clip: padding-box; /* From Bootstrap for selects */
    }
    .calculator-form .form-group input:focus, 
    .calculator-form .form-group select.form-select:focus {
        border-color: #0B1B3C; /* Theme color focus */
        outline: 0;
        box-shadow: 0 0 0 0.2rem rgba(11, 27, 60, 0.25);
    }
    
    .calculator-form .input-group { /* For interest rate with % */
        position: relative;
        display: flex; /* Bootstrap class, ensure it's applied or replicate style */
        flex-wrap: wrap; /* Bootstrap class */
        align-items: stretch; /* Bootstrap class */
        width: 100%; /* Bootstrap class */
    }
    .calculator-form .input-group .form-control { /* Input within group */
        position: relative;
        flex: 1 1 auto;
        width: 1%;
        min-width: 0;
    }
    .calculator-form .input-group .input-group-text {
        /* position: absolute; */ /* Removed to work with Bootstrap's flex */
        /* right: 1px; top: 1px; bottom: 1px; */
        padding: 10px 12px; /* Match input padding */
        background-color: #e9ecef;
        border: 1px solid #ced4da; /* Added border */
        border-left: none; /* Remove left border as input has right */
        border-radius: 0 6px 6px 0;
        display: flex;
        align-items: center;
        font-size: 0.9rem;
        color: #495057;
        margin-left: -1px; /* Overlap borders */
    }
    .calculator-form .input-group input[type="number"] { /* Ensure no spinners */
        -moz-appearance: textfield;
    }
    .calculator-form .input-group input[type="number"]::-webkit-outer-spin-button,
    .calculator-form .input-group input[type="number"]::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }
    
    .calculator-form .down-payment-group {
        margin-top: 10px;
    }
    .calculator-form .down-payment-group input[type="range"].form-range {
        width: 100%;
        margin-top: 8px;
        accent-color: #00693e; /* Dark green for slider thumb (modern browsers) */
    }
    /* Custom styling for range slider track and thumb for better cross-browser consistency */
    .calculator-form input[type="range"].form-range::-webkit-slider-runnable-track {
        background: #d4e6d6; /* Lighter green for track */
        height: 8px;
        border-radius: 4px;
        width: 100%;
        cursor: pointer;
    }
    .calculator-form input[type="range"].form-range::-moz-range-track {
        background: #d4e6d6;
        height: 8px;
        border-radius: 4px;
        width: 100%;
        cursor: pointer;
    }
    .calculator-form input[type="range"].form-range::-webkit-slider-thumb {
        -webkit-appearance: none; /* Override default */
        appearance: none;
        background: #00693e; /* Dark green thumb */
        height: 20px;
        width: 20px;
        border-radius: 50%;
        margin-top: -6px; /* Adjust to center on track ( (track_height - thumb_height) / 2 ) */
        cursor: pointer;
    }
    .calculator-form input[type="range"].form-range::-moz-range-thumb {
        background: #00693e;
        height: 20px;
        width: 20px;
        border-radius: 50%;
        border: none;
        cursor: pointer;
    }
    
    
    .calculator-results .results-display .monthly-payment {
        font-size: 2.5rem; /* ~40px, adjust as needed */
        font-weight: 700;
        color: #181616;
        margin-bottom: 20px;
        text-align: center; /* Centered as in image */
    }
    .calculator-results .results-display .monthly-payment span {
        font-size: 1rem; /* ~16px */
        font-weight: 400;
        color: #555;
        margin-left: 5px; /* Space before /monthly */
    }
    
    .calculator-results .results-grid {
        display: grid;
        grid-template-columns: 1fr 1fr; /* Two columns */
        gap: 15px; /* Space between grid items */
        margin-bottom: 20px;
    }
    .calculator-results .results-grid-item p { /* Label like "Principal Amount" */
        margin: 0 0 4px 0; /* Small space below label */
        font-size: 0.9rem; /* ~14.4px */
        color: #555;
    }
    .calculator-results .results-grid-item .value { /* The actual calculated value */
        font-size: 1.2rem; /* ~19px */
        font-weight: 600;
        color: #181616;
    }
    
    .calculator-results .disclaimer {
        font-size: 0.85rem; /* ~13.6px */
        color: #6c757d;
        text-align: center;
        margin-top: auto; /* Pushes to bottom if .calculator-results is flex-column */
        padding-top: 15px; /* Space above disclaimer */
        line-height: 1.4;
    }
    .calculator-results .disclaimer i.fas { /* Font Awesome info icon */
        margin-right: 5px;
        color: #6c757d; /* Match text color */
    }
    
    /* Responsive adjustments for calculator */
    @media (max-width: 991px) { /* When sidebar might stack or for better layout */
        .calculator-container {
            flex-direction: column; /* Stack form and results */
        }
    }
    @media (max-width: 767px) {
        .calculator-results .results-grid {
            grid-template-columns: 1fr; /* Single column on smaller screens */
        }
    }
    
    
    /* ========================================================================== */
    /* START: Styles for Property Gallery V2 (FROM ARTIFACT property_gallery_makeover_v1) */
    /* ========================================================================== */
    /* This section is being replaced by V3 styles below */
    /*
    .property-gallery-section-v2 {
        margin-bottom: 2rem; 
        font-family: 'Jost', sans-serif;
    }
    
    .gallery-main-container {
        display: flex;
        flex-direction: column; 
        background-color: #000; 
    }
    
    .gallery-main-image-wrapper {
        position: relative;
        line-height: 0; 
        overflow: hidden; 
        flex-grow: 1;
        display: flex; 
        align-items: center; 
        justify-content: center; 
        background-color: #1a1a1a; 
    }
    
    .pdp-current-main-image {
        display: block;
        width: 100%;
        height: auto; 
        max-height: 70vh; 
        object-fit: contain; 
        cursor: pointer; 
    }
    
    .image-actions-top-v2 { ... }
    .image-actions-bottom-v2 { ... }
    .btn-light-transparent { ... }
    .calculator-overlay-box-v2 { ... }
    .gallery-thumbnails-strip-v2 { ... }
    .thumbnail-v2 { ... }
    */
    /* ========================================================================== */
    /* END: Styles for Property Gallery V2                                      */
    /* ========================================================================== */
    
/* ========================================================================== */
/* START: Styles for Property Gallery V3 (Containerized, Calc Overlay, 2x2 Thumbs) */
/* ========================================================================== */
.property-gallery-section-v3 {
    margin-bottom: 2rem;
    /* The .container class will handle padding/max-width if it's a direct child */
}

.property-gallery-section-v3 .container {
background-color: #f0f2f5; /* Light background for the gallery block within container */
padding: 15px; /* Padding inside the container for the gallery \*/
border-radius: 8px;
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.gallery-layout-split {
display: flex;
flex-direction: row;
gap: 15px; /* Increased gap slightly */
height: 65vh; /* Adjust as needed, e.g., 60vh or fixed px */
min-height: 480px; /* Adjusted min height */
max-height: 650px; /* Adjusted max height \*/
}

/* Main Image Column (Left) */
.gallery-main-image-col {
flex: 3; /* Main image takes more space */
display: flex;
min-width: 0;
background-color: #000;
border-radius: 6px;
overflow: hidden; /* For object-fit and rounded corners on image \*/
}

.gallery-main-image-wrapper-v3 {
position: relative; /* For absolute positioning of overlay children \*/
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}

.pdp-current-main-image-v3 {
display: block;
width: 100%;
height: 100%;
object-fit: cover; /* Changed to cover for better fill, might crop */
cursor: pointer;
border-radius: 6px; /* If image needs rounding (redundant if wrapper has overflow:hidden) \*/
}

/* Action buttons on main image */
.image-actions-top-v2 { /* Reusing V2 class names \*/
position: absolute;
top: 15px;
right: 15px;
z-index: 20;
}
.image-actions-bottom-v2 {
position: absolute;
bottom: 15px;
left: 15px;
z-index: 20;
}
.btn-light-transparent {
background-color: rgba(30, 30, 30, 0.75);
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.25);
box-shadow: 0 1px 2px rgba(0,0,0,0.2);
font-size: 0.8rem;
padding: 0.35rem 0.7rem;
font-family: 'Jost', sans-serif;
}
.btn-light-transparent:hover {
background-color: rgba(0, 0, 0, 0.9);
}
.btn-light-transparent i.fas {
margin-right: 4px;
}

/* Calculator Overlay Box (reverting to overlay style) */
.calculator-overlay-box-v2 {
position: absolute;
bottom: 15px;
right: 15px;
background-color: rgba(11, 27, 60, 0.9); /* Primary color, semi-transparent */
color: #fff;
padding: 12px 15px;
border-radius: 6px;
width: calc(100% - 30px); /* Max width relative to parent, considering padding */
max-width: 320px; /* Absolute max width */
z-index: 15; /* Below action buttons but above image \*/
font-family: 'Jost', sans-serif;
box-shadow: 0 2px 10px rgba(0,0,0,0.3);
box-sizing: border-box;
font-size: 0.85rem;
}
.calculator-overlay-box-v2 h4 {
font-weight: 600;
font-size: 1.05rem;
margin-bottom: 0.2rem;
}
.calculator-overlay-box-v2 .small {
font-size: 0.75rem;
opacity: 0.9;
line-height: 1.3;
}
.calculator-overlay-box-v2 hr {
margin: 8px 0;
border-top: 1px solid rgba(255,255,255,0.15);
}
.calculator-overlay-box-v2 .btn-light {
background-color: #fff;
color: #0B1B3C;
font-weight: 500;
font-size: 0.75rem;
padding: 0.4rem 0.5rem;
border: none;
width: 100%;
}
.calculator-overlay-box-v2 .btn-light:not(:last-child) {
margin-bottom: 6px;
}
.calculator-overlay-box-v2 .btn-light:hover {
background-color: #e9ecef;
}

/* Side Thumbnails Column (Right) */
.gallery-side-thumbnails-col {
flex: 1; /* Narrower than main image */
display: flex;
flex-direction: column; /* Stack grid and "Show All" button */
gap: 10px;
min-width: 0;
height: 100%; /* Fill the height of gallery-layout-split \*/
}

.gallery-side-thumbnails-wrapper-v3 { /* 2x2 Grid */
flex-grow: 1; /* Grid takes up most space */
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 10px; /* Increased gap between thumbs */
border-radius: 6px;
overflow: hidden; /* Important if more than 4 items are somehow rendered */
min-height: 0; /* Fix for grid item content overflow \*/
}

.side-thumbnail-item-v3 {
position: relative;
overflow: hidden;
cursor: pointer;
border: 2px solid transparent; /* For active state indication */
transition: border-color 0.2s ease;
background-color: #1a1a1a; /* Dark placeholder for thumbs */
border-radius: 4px;
width: 100%;
height: 100%;
}
.side-thumbnail-item-v3.placeholder {
background-color: #2c2c2c; /* Slightly lighter for empty slots */
/* Optional: Add a placeholder icon or pattern */
}
.side-thumbnail-item-v3 img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: opacity 0.2s ease, transform 0.2s ease;
opacity: 0.8; /* Slightly more visible default */
}
.side-thumbnail-item-v3:hover img {
opacity: 1;
transform: scale(1.03);
}
.side-thumbnail-item-v3.active img { /* Should be handled by JS, adding class 'active' */
opacity: 1;
}
.side-thumbnail-item-v3.active {
border-color: #0B1B3C; /* Your primary theme color \*/
}
.side-thumbnail-item-v3:hover:not(.active) {
border-color: #777;
}

/* "Show all photos" button */
#openGalleryModalBtnV3 {
display: block;
width: 100%;
padding: 0.6rem;
font-size: 0.85rem;
font-family: 'Jost', sans-serif;
background-color: #282c30; /* Darker shade */
color: #fff;
border: 1px solid #454d55;
border-radius: 4px;
text-align: center;
transition: background-color 0.2s ease;
flex-shrink: 0; /* Prevent button from shrinking if space is tight \*/
}
#openGalleryModalBtnV3:hover {
background-color: #3a3f44;
}
#openGalleryModalBtnV3 i.fas {
margin-right: 6px;
}

/* Modal styles (reusing .gallery-modal-v2 classes - these are assumed to be correct from previous iterations) */
/* Copy the full modal CSS from the style\_css\_full\_v2 document here if it's not already present */
/* Minimal Modal CSS for brevity - use your full modal styles \*/
.gallery-modal-v2 { display: none; position: fixed; z-index: 1070; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; background-color: rgba(0,0,0,0.92); box-sizing: border-box; align-items: center; justify-content: center; padding: 20px; }
.gallery-modal-content-v2 { position: relative; display: flex; justify-content: center; align-items: center; width: 100%; height: calc(100% - 120px); max-width: 1200px; flex-direction: column; }
.gallery-modal-image-v2 { display: block; max-width: 100%; max-height: 100%; object-fit: contain; transition: transform 0.3s ease-in-out; cursor: zoom-in; }
.gallery-modal-image-v2.zoomed { transform: scale(1.7); cursor: zoom-out; }
.zoom-instruction { background-color: rgba(0,0,0,0.7); color: white; padding: 5px 10px; border-radius: 3px; font-size: 0.8rem; z-index: 1052; opacity: 0; transition: opacity 0.3s; margin-top: 10px; position: absolute; bottom: 0; }
.gallery-modal-content-v2:hover .zoom-instruction, .gallery-modal-image-v2:not(.zoomed):hover + .zoom-instruction { opacity: 1; }
.gallery-modal-image-v2.zoomed + .zoom-instruction { opacity: 0 \!important; }
.gallery-modal-close-v2 { position: absolute; top: 10px; right: 15px; color: #f1f1f1; font-size: 35px; font-weight: bold; transition: 0.3s; z-index: 1072; line-height: 1; }
.gallery-modal-prev-v2, .gallery-modal-next-v2 { cursor: pointer; position: absolute; top: 50%; transform: translateY(-50%); width: auto; padding: 14px; color: white; font-weight: bold; font-size: 22px; transition: 0.3s ease; border-radius: 3px; user-select: none; background-color: rgba(0,0,0,0.35); z-index: 1071; }
.gallery-modal-next-v2 { right: 15px; } .gallery-modal-prev-v2 { left: 15px; }
.gallery-modal-prev-v2:hover, .gallery-modal-next-v2:hover { background-color: rgba(0,0,0,0.65); }
.gallery-modal-caption-v2 { text-align: center; color: #ccc; padding: 8px 0; font-size: 0.9rem; height: 30px; position: absolute; bottom: 70px; width: 100%; left:0; z-index: 1071; }
.gallery-modal-thumbnails-v2 { display: flex; justify-content: center; align-items: center; gap: 5px; padding: 10px 0; overflow-x: auto; background-color: rgba(0,0,0,0.6); position: absolute; bottom: 0; left: 0; width: 100%; height: 70px; box-sizing: border-box; z-index: 1071; }
.modal-thumbnail-img { height: 50px; min-width: 70px; object-fit: cover; opacity: 0.6; cursor: pointer; border: 2px solid transparent; border-radius: 3px; transition: opacity 0.2s ease, border-color 0.2s ease; }
.modal-thumbnail-img:hover, .modal-thumbnail-img.active { opacity: 1; border-color: #fff; }

/* Responsive adjustments for V3 gallery layout */
@media (max-width: 991px) { /* Tablet: Stack gallery columns */
.gallery-layout-split {
flex-direction: column;
height: auto;
max-height: none;
}
.gallery-main-image-col {
height: 45vh; /* Adjusted for stacked view */
min-height: 280px; /* Min height for main image when stacked */
}
.gallery-side-thumbnails-col {
margin-top: 15px; /* Space when stacked */
height: auto; /* Let content define height */
}
.gallery-side-thumbnails-wrapper-v3 { /* Becomes horizontal scroll for side thumbs */
grid-template-rows: 1fr; /* Single row */
grid-template-columns: repeat(4, 1fr); /* Show 4 thumbs if available, scroll if more */
height: 120px; /* Fixed height for the scrollable row */
overflow-x: auto;
overflow-y: hidden;
flex-grow: 0; /* Don't let it grow, button will be after */
}
.side-thumbnail-item-v3 {
height: 100px;
min-width: 120px; /* Allow thumbs to be wider in scroll view \*/
}
#openGalleryModalBtnV3 {
margin-top: 10px;
}
}

@media (max-width: 767px) { /* Mobile specific adjustments */
.property-gallery-section-v3 .container {
padding: 10px; /* Less padding for gallery block on mobile */
}
.gallery-layout-split {
gap: 10px;
}
.gallery-main-image-col {
height: 40vh;
min-height: 220px;
}
.gallery-side-thumbnails-wrapper-v3 {
height: 100px; /* Smaller horizontal thumbs row */
grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); /* More responsive thumb count */
}
.side-thumbnail-item-v3 {
height: 80px;
min-width: 90px;
}
.calculator-overlay-box-v2 { /* Adjust overlay for smaller screens */
font-size: 0.75rem;
padding: 10px;
max-width: 280px; /* Ensure it doesn't get too wide on small main image \*/
}
.calculator-overlay-box-v2 h4 { font-size: 0.9rem; }
.calculator-overlay-box-v2 .small { font-size: 0.65rem; }
.calculator-overlay-box-v2 .btn-light { font-size: 0.7rem; padding: 0.3rem; }
}


/* ========================================================================== */
/* START: Styles for Property Gallery V4 (Main Left, 2 Thumbs Top-Right, Static Calc Bottom-Right) */
/* ========================================================================== */
.property-gallery-section-v4 {
    margin-bottom: 2rem;
    font-family: 'Jost', sans-serif;
}

.property-gallery-section-v4 .container {
    background-color: #fff; 
    padding: 10px;
    border-radius: 8px;
}

.gallery-layout-split-v4 {
    display: flex;
    flex-direction: row;
    gap: 10px;
    height: 60vh; 
    min-height: 400px; 
    max-height: 550px; 
}

/* Main Image Column (Left) */
.gallery-main-image-col-v4 {
    flex: 2.5; 
    display: flex;
    min-width: 0; 
    background-color: #e9ecef; 
    border-radius: 6px;
    overflow: hidden;
}

.gallery-main-image-wrapper-v4 {
    position: relative; 
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pdp-current-main-image-v4 {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain; 
    cursor: pointer;
    border-radius: 6px; 
}

/* Action buttons on main image (reusing V2 classes) */
.image-actions-top-v2 {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 20;
}
.image-actions-bottom-v2 {
    position: absolute;
    bottom: 12px;
    left: 12px;
    z-index: 20;
    display: flex; 
    gap: 8px;
}
.btn-light-transparent { 
    background-color: rgba(0, 0, 0, 0.5); 
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
    font-size: 0.75rem; 
    padding: 0.3rem 0.6rem;
    border-radius: 4px;
    font-family: 'Jost', sans-serif;
}
.btn-light-transparent:hover {
    background-color: rgba(0, 0, 0, 0.7);
}
.btn-light-transparent i.fas {
    margin-right: 4px;
}

/* Right Column: 2 Thumbs (stacked), Calculator Box */
.gallery-side-content-col-v4 {
    flex: 1; 
    display: flex;
    flex-direction: column;
    gap: 10px; 
    min-width: 0;
    height: 100%; 
}

.gallery-top-right-images-v4 { 
    display: grid;
    grid-template-rows: repeat(2, 1fr); 
    gap: 10px;
    flex-grow: 1; 
    min-height: 0; 
    overflow: hidden; 
}

.top-right-image-wrapper-v4 {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    background-color: #e0e0e0; 
    border-radius: 4px;
    width: 100%;
    height: 100%; 
}
.top-right-image-wrapper-v4.placeholder {
     background-color: #f0f0f0;
}
.top-right-image-wrapper-v4 img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    display: block;
    transition: opacity 0.2s ease, transform 0.2s ease;
    opacity: 0.9; 
}
.top-right-image-wrapper-v4:hover img {
    opacity: 1;
    transform: scale(1.02); 
}

/* "Show all photos" button on main image moved here */
/* ID #openGalleryModalBtnV4 is styled by .btn-light-transparent if it's inside .image-actions-bottom-v2 */


/* === UPDATED AND NEW STYLES START HERE === */

/* Static Calculator Box (not an overlay) */
.calculator-static-box-v4 {
    background: linear-gradient(135deg, #0B1B3C 0%, #1c2f5c 70%, #2f457c 100%); /* Blue gradient */
    color: #fff;
    padding: 20px; /* Increased padding */
    border-radius: 8px; /* Slightly more rounded */
    font-family: 'Jost', sans-serif;
    box-sizing: border-box;
    font-size: 0.85rem;
    flex-shrink: 0; 
    position: relative; /* For the shine pseudo-element */
    overflow: hidden; /* To contain the shine */
    box-shadow: 0 4px 15px rgba(0,0,0,0.2); /* Enhanced shadow */
}

/* Container Shine Effect for calculator-static-box-v4 */
.calculator-static-box-v4::before {
    content: "";
    position: absolute;
    top: 0;
    left: -150%; /* Start off-screen to the left */
    width: 100%; /* Width of the shine element */
    height: 100%;
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.0) 40%, /* Less intense shine */
        rgba(255, 255, 255, 0.1) 50%, /* Peak of shine */
        rgba(255, 255, 255, 0.0) 60%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-25deg); /* Angle the shine */
    animation: containerShine 5s infinite linear; /* Slower, continuous shine */
    z-index: 1; /* Above background, below content */
}

@keyframes containerShine {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}


.calculator-static-box-v4 > * {
    position: relative; /* Ensure content is above the shine pseudo-element */
    z-index: 2;
}


.calculator-static-box-v4 h4 {
    font-weight: 600;
    font-size: 1.1rem; /* Slightly larger */
    margin-bottom: 0.3rem;
}
.calculator-static-box-v4 .small {
    font-size: 0.78rem; /* Slightly larger */
    opacity: 0.9;
    line-height: 1.4;
}
.calculator-static-box-v4 hr {
    margin: 10px 0; /* More space */
    border-top: 1px solid rgba(255,255,255,0.15); 
}
.calculator-static-box-v4 .btn-light {
    background-color: #ffffff;
    color: #0B1B3C; 
    font-weight: 600; /* Bolder text */
    font-size: 0.8rem; /* Slightly larger button text */
    padding: 0.5rem 0.6rem; 
    border: none;
    width: 100%;
    border-radius: 5px; /* More rounded buttons */
    transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.calculator-static-box-v4 .btn-light:hover {
    background-color: #f0f8ff; /* AliceBlue like hover */
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    transform: translateY(-1px);
}
.calculator-static-box-v4 .btn-light:active {
    transform: translateY(0px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}


/* Specific button "Unlock Your Mortgage Potential" for shine effect */
.calculator-static-box-v4 .btn-light.btn-unlock-mortgage { /* Added class for specificity */
    position: relative; /* For the shine pseudo-element */
    overflow: hidden; /* To contain the shine */
    /* background-color: #your_custom_button_color; If it's different from other .btn-light */
    /* color: #your_custom_text_color; */
}

.calculator-static-box-v4 .btn-light.btn-unlock-mortgage::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 20px; /* Width of the shine element */
    height: 200%; /* Make it tall enough to cover button height when skewed */
    background-color: rgba(255, 255, 255, 0.4); /* Shine color and intensity */
    transform: rotate(25deg); /* Angle the shine */
    opacity: 0;
    transition: opacity 0.3s ease-out, left 0.5s ease-out; /* Smooth transition for opacity and position */
}

.calculator-static-box-v4 .btn-light.btn-unlock-mortgage:hover::after {
    left: 120%; /* Move across the button */
    opacity: 1;
    transition: opacity 0.2s ease-in, left 0.4s ease-in-out; /* Adjust timing for effect */
}


/* === END OF UPDATED AND NEW STYLES === */


/* --- Modal Styles (ensure these match your JS and are complete) --- */
/* These are copied from the previous correct version, ensure IDs match JS */
.gallery-modal-v2 { display: none; position: fixed; z-index: 1070; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; background-color: rgba(0,0,0,0.92); box-sizing: border-box; align-items: center; justify-content: center; padding: 20px; }
.gallery-modal-content-v2 { position: relative; display: flex; justify-content: center; align-items: center; width: 100%; height: calc(100% - 120px); max-width: 1200px; flex-direction: column; }
.gallery-modal-image-v2 { display: block; max-width: 100%; max-height: 100%; object-fit: contain; transition: transform 0.3s ease-in-out; cursor: zoom-in; }
.gallery-modal-image-v2.zoomed { transform: scale(1.7); cursor: zoom-out; }
.zoom-instruction { background-color: rgba(0,0,0,0.7); color: white; padding: 5px 10px; border-radius: 3px; font-size: 0.8rem; z-index: 1052; opacity: 0; transition: opacity 0.3s; margin-top: 10px; position: absolute; bottom: 0; }
.gallery-modal-content-v2:hover .zoom-instruction, .gallery-modal-image-v2:not(.zoomed):hover + .zoom-instruction { opacity: 1; }
.gallery-modal-image-v2.zoomed + .zoom-instruction { opacity: 0 !important; }
.gallery-modal-close-v2 { position: absolute; top: 10px; right: 15px; color: #f1f1f1; font-size: 35px; font-weight: bold; transition: 0.3s; z-index: 1072; line-height: 1; }
.gallery-modal-prev-v2, .gallery-modal-next-v2 { cursor: pointer; position: absolute; top: 50%; transform: translateY(-50%); width: auto; padding: 14px; color: white; font-weight: bold; font-size: 22px; transition: 0.3s ease; border-radius: 3px; user-select: none; background-color: rgba(0,0,0,0.35); z-index: 1071; }
.gallery-modal-next-v2 { right: 15px; } .gallery-modal-prev-v2 { left: 15px; }
.gallery-modal-prev-v2:hover, .gallery-modal-next-v2:hover { background-color: rgba(0,0,0,0.65); }
.gallery-modal-caption-v2 { text-align: center; color: #ccc; padding: 8px 0; font-size: 0.9rem; height: 30px; position: absolute; bottom: 70px; width: 100%; left:0; z-index: 1071; }
.gallery-modal-thumbnails-v2 { display: flex; justify-content: center; align-items: center; gap: 5px; padding: 10px 0; overflow-x: auto; background-color: rgba(0,0,0,0.6); position: absolute; bottom: 0; left: 0; width: 100%; height: 70px; box-sizing: border-box; z-index: 1071; }
.modal-thumbnail-img { height: 50px; min-width: 70px; object-fit: cover; opacity: 0.6; cursor: pointer; border: 2px solid transparent; border-radius: 3px; transition: opacity 0.2s ease, border-color 0.2s ease; }
.modal-thumbnail-img:hover, .modal-thumbnail-img.active { opacity: 1; border-color: #fff; }


/* Responsive adjustments for V4 gallery layout */
@media (max-width: 991px) { /* Tablet: Stack gallery columns */
    .gallery-layout-split-v4 {
        flex-direction: column;
        height: auto; 
        max-height: none; 
    }
    .gallery-main-image-col-v4 {
        height: 45vh; 
        min-height: 280px; 
    }
    .gallery-side-content-col-v4 {
        margin-top: 10px;
        height: auto; 
    }
    .gallery-top-right-images-v4 { /* Side-by-side for the 2 images on tablet */
        grid-template-columns: repeat(2, 1fr); 
        grid-template-rows: 1fr; /* Single row */
        height: 180px; 
        flex-grow: 0; 
        flex-basis: 180px; 
    }
    .calculator-static-box-v4 {
        margin-top: 10px;
        flex-grow: 0; 
        /* max-height: none; */ 
    }
}

@media (max-width: 767px) { /* Mobile specific adjustments */
    .property-gallery-section-v4 .container {
        padding: 5px;
    }
    .gallery-layout-split-v4 {
        gap: 5px;
    }
    .gallery-main-image-col-v4 {
        height: 40vh; 
        min-height: 220px;
    }
    .gallery-top-right-images-v4 {
        height: 120px; 
    }
    .calculator-static-box-v4 {
        font-size: 0.75rem;
        padding: 10px;
    }
    .calculator-static-box-v4 h4 { font-size: 0.9rem; }
    .calculator-static-box-v4 .small { font-size: 0.65rem; }
    .calculator-static-box-v4 .btn-light { font-size: 0.7rem; padding: 0.3rem; }
}
/* ========================================================================== */
/* END: Styles for Property Gallery V4                                        */
/* ========================================================================== */

/* --- Modal Styles (ensure these match your JS and are complete) --- */
/* These are copied from the previous correct version, ensure IDs match JS \*/
.gallery-modal-v2 { display: none; position: fixed; z-index: 1070; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; background-color: rgba(0,0,0,0.92); box-sizing: border-box; align-items: center; justify-content: center; padding: 20px; }
.gallery-modal-content-v2 { position: relative; display: flex; justify-content: center; align-items: center; width: 100%; height: calc(100% - 120px); max-width: 1200px; flex-direction: column; }
.gallery-modal-image-v2 { display: block; max-width: 100%; max-height: 100%; object-fit: contain; transition: transform 0.3s ease-in-out; cursor: zoom-in; }
.gallery-modal-image-v2.zoomed { transform: scale(1.7); cursor: zoom-out; }
.zoom-instruction { background-color: rgba(0,0,0,0.7); color: white; padding: 5px 10px; border-radius: 3px; font-size: 0.8rem; z-index: 1052; opacity: 0; transition: opacity 0.3s; margin-top: 10px; position: absolute; bottom: 0; }
.gallery-modal-content-v2:hover .zoom-instruction, .gallery-modal-image-v2:not(.zoomed):hover + .zoom-instruction { opacity: 1; }
.gallery-modal-image-v2.zoomed + .zoom-instruction { opacity: 0 \!important; }
.gallery-modal-close-v2 { position: absolute; top: 10px; right: 15px; color: #f1f1f1; font-size: 35px; font-weight: bold; transition: 0.3s; z-index: 1072; line-height: 1; }
.gallery-modal-prev-v2, .gallery-modal-next-v2 { cursor: pointer; position: absolute; top: 50%; transform: translateY(-50%); width: auto; padding: 14px; color: white; font-weight: bold; font-size: 22px; transition: 0.3s ease; border-radius: 3px; user-select: none; background-color: rgba(0,0,0,0.35); z-index: 1071; }
.gallery-modal-next-v2 { right: 15px; } .gallery-modal-prev-v2 { left: 15px; }
.gallery-modal-prev-v2:hover, .gallery-modal-next-v2:hover { background-color: rgba(0,0,0,0.65); }
.gallery-modal-caption-v2 { text-align: center; color: #ccc; padding: 8px 0; font-size: 0.9rem; height: 30px; position: absolute; bottom: 70px; width: 100%; left:0; z-index: 1071; }
.gallery-modal-thumbnails-v2 { display: flex; justify-content: center; align-items: center; gap: 5px; padding: 10px 0; overflow-x: auto; background-color: rgba(0,0,0,0.6); position: absolute; bottom: 0; left: 0; width: 100%; height: 70px; box-sizing: border-box; z-index: 1071; }
.modal-thumbnail-img { height: 50px; min-width: 70px; object-fit: cover; opacity: 0.6; cursor: pointer; border: 2px solid transparent; border-radius: 3px; transition: opacity 0.2s ease, border-color 0.2s ease; }
.modal-thumbnail-img:hover, .modal-thumbnail-img.active { opacity: 1; border-color: #fff; }

/* Responsive adjustments for V4 gallery layout */
@media (max-width: 991px) { /* Tablet: Stack gallery columns */
.gallery-layout-split-v4 {
flex-direction: column;
height: auto;
max-height: none;
}
.gallery-main-image-col-v4 {
height: 45vh;
min-height: 280px;
}
.gallery-side-content-col-v4 {
margin-top: 10px;
height: auto;
}
.gallery-top-right-images-v4 { /* Side-by-side for the 2 images on tablet */
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 1fr; /* Single row */
height: 180px; /* Adjust height for two images side-by-side */
flex-grow: 0; /* Don't let it grow excessively, calc box will take space */
flex-basis: 180px; /* Fixed height */
}
.calculator-static-box-v4 {
margin-top: 10px;
flex-grow: 0; /* Don't let it grow, content defines height */
/* max-height: none; */ /* Allow it to be as tall as needed \*/
}
}

@media (max-width: 767px) { /* Mobile specific adjustments */
.property-gallery-section-v4 .container {
padding: 5px;
}
.gallery-layout-split-v4 {
gap: 5px;
}
.gallery-main-image-col-v4 {
height: 40vh;
min-height: 220px;
}
.gallery-top-right-images-v4 {
height: 120px; /* Further adjust for mobile */
/* Optionally stack them on very small mobile if 2 columns are too tight */
/* grid-template-columns: 1fr; grid-template-rows: repeat(2, 1fr); height: 200px; */
}
.calculator-static-box-v4 {
font-size: 0.75rem;
padding: 10px;
}
.calculator-static-box-v4 h4 { font-size: 0.9rem; }
.calculator-static-box-v4 .small { font-size: 0.65rem; }
.calculator-static-box-v4 .btn-light { font-size: 0.7rem; padding: 0.3rem; }
}
/* ========================================================================== */
/* END: Styles for Property Gallery V4                                        */
/* ========================================================================== \*/