/* =========================================
   1. BASE SLIDER COMPONENT
========================================= */
.htm-custom-slider {
    --divider-color: #1853B9;
    --divider-width: 3px;
    border: 3px solid #1853B9;
}

.htm-custom-handle {
    width: 20px;
    height: 20px;
    background-color: #ffffff;
    border: 3px solid #1853B9;
    border-radius: 50%;
    /* Optional: A tiny shadow makes it pop off the image better */
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

.htm-slider-img {
    width: 100%;
    height: 250px;
    object-fit: cover;
}

/* =========================================
   2. TOOLTIP / POPUP TYPOGRAPHY & HEADER
========================================= */
.htm-popup-wrapper {
    width: 100%;
}

.htm-popup-wrapper .swiper-wrapper {
    align-items: center;
}

.htm-popup-header {
    display: flex;
    align-items: flex-end;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 10px;
    gap: 15px;
    margin-right: 10px;
    flex-wrap: wrap;
}

.htm-popup-header h3 {
    margin: 0;
    color: #000;
    font-weight: 600;
}

.htm-popup-title-link,
a.htm-popup-title-link {
    color: #1853B9;
    text-decoration: none;
    transition: opacity 0.2s;
    font-size: 2rem;
    line-height: 1.2;
}

.htm-popup-title-link:hover {
    opacity: 0.8;
    text-decoration: underline;
}

h4.htm-slide-title-text {
    margin: 10px 0;
    font-size: 24px;
    min-height: 20px;
    font-weight: 600;
}

.htm-slide-desc-text {
    font-size: 20px;
    line-height: 1.4;
    margin-top: 5px;
    min-height: 40px;
}

.leaflet-container a.leaflet-popup-close-button {
    font-size: 30px;
    width: 34px;
    height: 34px;
    font-weight: bold;
    padding: 5px;
    color: #000;
}

/* =========================================
   3. SWIPER LAYOUT & CONTAINER FIXES
========================================= */
.htm-slider-outer-wrapper {
    display: flex;
    align-items: center;
    background: #f2f2f2;
}

.htm-swiper-container {
    width: 100%;
    overflow: hidden;
    padding-bottom: 30px;
}

/* Force the Swiper container to absorb all leftover space between the arrows */
.htm-slider-outer-wrapper .htm-swiper-container {
    flex: 1 !important;
    min-width: 0 !important; /* Critical hack for Swiper inside Flexbox */
    width: 100% !important;
}

/* Force the custom web component to stretch 100% across the swiper slide */
.swiper-slide .htm-custom-slider {
    width: 100% !important;
    display: block !important; /* Web components are inline by default, this fixes spacing */
}

/* =========================================
   4. SWIPER NAVIGATION ARROWS & DOTS
========================================= */

/* FLEXBOX SWIPER ARROWS (The Outer Button) */
body .htm-slider-outer-wrapper .swiper-button-next,
body .htm-slider-outer-wrapper .swiper-button-prev {
    position: static !important; /* Kills Swiper's default floating behavior */
    margin: 0 !important;
    flex-shrink: 0 !important;   /* Prevents the buttons from squishing */
    width: 30px !important;
    height: 36px !important;
    background-color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease-in-out !important;
    cursor: pointer !important;
}

/* Base Chevron - Forced to Blue */
body .htm-slider-outer-wrapper .swiper-button-next::after,
body .htm-slider-outer-wrapper .swiper-button-prev::after {
    content: '' !important;
    font-family: unset !important;
    width: 10px !important;
    height: 10px !important;
    border: solid #1853B9 !important; /* Your specific blue */
    border-width: 3px 3px 0 0 !important;
    transition: border-color 0.2s ease-in-out !important;
}

/* Chevron Rotations */
body .htm-slider-outer-wrapper .swiper-button-next::after { transform: translateX(-2px) rotate(45deg) !important; }
body .htm-slider-outer-wrapper .swiper-button-prev::after { transform: translateX(2px) rotate(-135deg) !important; }

/* HOVER EFFECTS */
/* Button background turns blue and scales up */
body .htm-slider-outer-wrapper .swiper-button-next:hover,
body .htm-slider-outer-wrapper .swiper-button-prev:hover {
    background-color: #1853B9 !important;
}

/* Inner chevron turns white */
body .htm-slider-outer-wrapper .swiper-button-next:hover::after,
body .htm-slider-outer-wrapper .swiper-button-prev:hover::after {
    border-color: #ffffff !important;
}

/* PAGINATION BULLETS (DOTS) */
/* Ensure the dots sit neatly inside the 30px padding we added in JS */
body .htm-popup-wrapper .swiper-pagination {
    bottom: 0px !important;
}

/* Force Elementor to accept the custom blue for all dots */
body .htm-popup-wrapper .swiper-pagination-bullet {
    background: #1853B9 !important;
    background-color: #1853B9 !important;
    opacity: 0.3 !important;
    width: 10px !important;
    height: 10px !important;
    transition: opacity 0.2s ease !important;
}

/* Solid blue for the active dot */
body .htm-popup-wrapper .swiper-pagination-bullet-active {
    opacity: 1 !important;
}

/* =========================================
   5. COPY LINK BUTTONS
========================================= */

/* Tooltip Copy Button */
button.htm-copy-btn {
    background: none;
    border: 1px solid #1853B9;
    border-radius: 4px;
    cursor: pointer;
    padding: 6px;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
    box-shadow: none;
}

button.htm-copy-btn:hover {
    border-color: #1853B9;
    color: #1853B9;
    background-color: #f4f7fc;
    box-shadow: none;
}

/* Single Page Copy Button */
.htm-copy-single {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: #ffffff;
    border: 2px solid #1853B9;
    color: #1853B9;
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: 30px;
}

.htm-copy-single:hover {
    background-color: #1853B9;
    color: #ffffff;
}

/* Forces the SVG stroke to turn white on hover */
.htm-copy-single:hover .htm-copy-icon {
    stroke: #ffffff;
}

/* =========================================
   6. SINGLE PROJECT PAGE STYLES
========================================= */

.htm-index-list {
    list-style: inside;
    padding-left: 0;
    margin: 0;
}

.htm-index-item {
    margin-bottom: 10px;
}

.htm-index-list a.htm-smooth-scroll {
    color: #1853B9;
    text-decoration: none;
    font-weight: 600;
    transition: opacity 0.2s;
}

.htm-index-list a.htm-smooth-scroll:hover {
    opacity: 0.7;
}

/* Individual Slide Wrappers */
.htm-single-slide-wrapper {
    margin-bottom: 80px;
    scroll-margin-top: 100px; /* Protects title from sticky headers */
    text-align: center;
}

h2.htm-slide-title,
.htm-slide-title {
    margin-bottom: 15px;
    font-weight: 600;
}

/* Specific styling for the slider when used on the single page */
.htm-custom-slider.htm-single-slider {
    width: 100%;
    border-radius: 0px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.htm-custom-slider.htm-single-slider img {
    width: 100%;
    height: auto; /* Let the image scale naturally */
    max-height: 85vh; /* Caps the height at 85% of the user's screen so it doesn't get absurdly tall on desktops */
    object-fit: contain; /* Forces the entire image to stay inside the box without cropping a single pixel */
    background-color: #f8f9fa; /* Adds a clean, light-grey backdrop to the sides if the screen is wider than the portrait photo */
}

p.htm-slide-description {
    margin: 35px auto 0;
    line-height: 1.6;
    padding: 1rem;
    background: #f9f9f9;
    border: 1px solid #ccc;
    text-align: left;
    max-width: 600px;
}

/* =========================================
   7. BEFORE / AFTER VISUAL LABELS
========================================= */

/* --- A. MAP TOOLTIP LABELS --- */
.htm-swiper-container {
    position: relative;
}

.htm-swiper-container::before,
.htm-swiper-container::after {
    position: absolute;
    bottom: 4px;
    font-size: 18px;
    font-weight: 800;
    color: #1853B9;
    letter-spacing: 1px;
    z-index: 10;
    pointer-events: none;
}

.htm-swiper-container::before { content: 'BEFORE'; left: 2px; }
.htm-swiper-container::after { content: 'AFTER'; right: 2px; }


/* Specific styling for the slider when used on the single page */
.htm-custom-slider.htm-single-slider {
    position: relative;
    overflow: visible !important;
    margin: 0 auto 30px auto; /* Centers the slider and keeps the 30px bottom gap for labels */
    max-width: fit-content; /* Shrink-wraps the blue border tightly to the photo's width */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.htm-custom-slider.htm-single-slider img {
    width: auto; /* Lets the width scale naturally... */
    max-width: 100%; /* ...but prevents it from breaking off the screen on mobile */
    height: auto;
    max-height: 85vh; /* Caps the height so it fits nicely on the screen */
    /* We no longer need object-fit: contain or background colors because the box perfectly hugs the photo! */
}

.htm-custom-slider.htm-single-slider::before,
.htm-custom-slider.htm-single-slider::after {
    position: absolute;
    bottom: -26px; /* Pushes the text exactly beneath the blue border */
    font-weight: 800;
    color: #1853B9;
    letter-spacing: 1px;
    z-index: 10;
    pointer-events: none;
}

.htm-custom-slider.htm-single-slider::before { content: 'BEFORE'; left: 0px; }
.htm-custom-slider.htm-single-slider::after { content: 'AFTER'; right: 0px; }

/* =========================================
   8. CUSTOM CLUSTER STYLING
========================================= */

/* The semi-transparent outer ring */
.marker-cluster-small,
.marker-cluster-medium,
.marker-cluster-large {
    background-color: rgba(24, 83, 185, 0.4) !important;
}

/* The solid inner circle and typography */
.marker-cluster-small div,
.marker-cluster-medium div,
.marker-cluster-large div {
    background-color: #1853B9 !important; /* Your brand blue */
    color: #ffffff !important;
    font-weight: 800 !important;
    font-size: 16px !important; /* Bumped up from the default 12px */

    /* Flexbox ensures the larger text stays perfectly centered in the circle */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* =========================================
   9. CUSTOM SVG MAP PIN
========================================= */
.htm-custom-pin svg {
    /* Gives the flat SVG a realistic 3D shadow on the map */
    filter: drop-shadow(0px 5px 4px rgba(255,255,255,255.4));
    transition: transform 0.2s;
}

.htm-custom-pin:hover svg {
    transform: scale(1.1) translateY(-2px);
}