/*
Theme Name: Astra Child
Theme URI: https://www.wpastra.com/
Author: Srikant Deogharia
Author URI: https://www.projectdirectoryfix.version3.bangonrealty.com
Template: astra
Version: 1.0.0
Description: Astra Child Theme
Text Domain: astra-child
*/

/* Import Google Fonts - Inter */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root{
  /* Spacing & type scale (used below as well) */
  --pill-h-desktop: 42px;
  --pill-h-tablet: 40px;
  --pill-h-mobile: 38px;
  --pill-v-pad: 6px;
  --pill-h-pad: 14px;

  --ring-color: rgba(255,255,255,0.35); /* subtle keyboard ring */
  --ring-width: 2px;
}

/* Hide outlines for mouse/touch focus; keep for keyboard only */
*:focus:not(:focus-visible){ outline: 0 !important; box-shadow: none !important; }

/* Global body styling to remove default margins that can prevent full-width */
body.single-project {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* Astra main container adjustments to allow full width for custom sections */
.ast-container {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

/* General Layout & Spacing for the main content area */
.astra-single-project-content {
    padding-top: 0;
}

/* Wrapper for sections that need a full-width background but constrained content */
.astra-single-project-body-content-wrapper {
    background-color: transparent;
    padding: 60px 0;
}

/* Inner content wrapper to center content within full-width sections */
.astra-single-project-body-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Styling for individual content sections */
.project-section {
    margin-bottom: 25px;  /*reduced from 50*/
    padding: 0;
}

/* Styling for section headings (H2) */
.project-section h2 {
    font-size: 2.2em; /* Keep current font size */
    font-weight: 700; /* Keep current font weight */
    color: #333; /* Keep current color */
    margin-bottom: 25px; /* Keep consistent margin from your previous instructions */
    border-bottom: none !important; /* <--- IMPORTANT CHANGE: Remove underline */
    padding-bottom: 10px; /* Keep current padding if desired */
    display: inline-block; /* Keep current display */
    text-transform: uppercase !important; /* <--- IMPORTANT CHANGE: Force uppercase */
}
/* Hero Image Section (TOP SECTION with overlay details and form) */
.project-hero-image-section {
    position: relative;
    width: 100%;
    height: 600px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    overflow: hidden;
    margin-bottom: 25px; /* Space from next section (below the section), changed from 50px */
}

.hero-overlay { /* THIS DIV IS REMOVED FROM PHP, SO THIS CSS IS NOT ACTIVE */
    display: none; /* Ensuring it's not visible if it somehow appears */
    /* All other overlay properties are irrelevant as the div is removed */
} 

.hero-content-wrapper {
    position: absolute;
    bottom: 40px; /* Distance from bottom */
    left: 5%; /* Distance from left */
    z-index: 2;
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    color: #fff;
    text-align: left;
    box-sizing: border-box;
    padding: 0 20px;
}

.project-hero-image-section .project-title-heading {
    font-size: 3.5em;
    font-weight: 700;
    margin-bottom: 10px;
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.7);
    color: #E0E0E0; /* Lighter color for project name */
}

.project-hero-image-section .project-details-line {
    font-size: 1.5em;
    font-weight: 400;
    line-height: 1.5;
    margin-bottom: 0;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
    color: #E0E0E0; /* Lighter color for details line */
}

/* Project Overview Section */
.project-overview-content {
    text-align: justify;
    font-size: 1em;
    line-height: 1.7;
    color: #555;
}

/* Project Highlights Grid */
.project-highlights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px;
    margin-top: 25px;
}

.highlight-item {
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.highlight-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.highlight-icon {
    font-size: 2.5em;
    color: #333;
    margin-bottom: 10px;
    display: block;
    line-height: 1;
}
/* Force Dashicons font */
.dashicons {
    font-family: 'Dashicons' !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #FF8C00 !important; /* ✅ Add this line */
}
.project-highlights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 20px;
}

.highlight-item {
    background: white;
    border-radius: 8px;
    padding: 15px;
    text-align: center;
    box-shadow: 0 0 5px rgba(0,0,0,0.1);
}

.highlight-item h3 {
    font-size: 1.2em;
    font-weight: 600;
    color: #333;
    margin-bottom: 5px;
    line-height: 1.3;
}

.highlight-item p {
    font-size: 0.9em;
    color: #666;
    margin: 0;
    line-height: 1.3;
}

/* Key Features Section */
.project-features-section {
    background-color: #fff;
    padding: 60px 0;
    margin-bottom: 25px; /*reduced from 50px*/
}

/* Ensure content is centered within this full-width section */
.project-features-section .container.astra-single-project-body-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.features-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    margin-top: 25px;
}

@media (min-width: 768px) {
    .features-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.project-usps,
.detailed-amenities {
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 30px;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);
}

.project-usps h3,
.detailed-amenities h3 {
    font-size: 1.8em;
    font-weight: 600;
    color: #333;
    margin-bottom: 20px;
}

.project-usps ul,
.detailed-amenities ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.project-usps ul li,
.detailed-amenities ul li {
    font-size: 1.05em;
    color: #555;
    margin-bottom: 10px;
    position: relative;
    padding-left: 30px;
    line-height: 1.5;
}

.project-usps ul li:before,
.detailed-amenities ul li:before {
    content: "\2713";
    color: #28a745;
    font-weight: bold;
    position: absolute;
    left: 0;
    top: 2px;
    font-size: 1.2em;
}

/* Pricing Table Styling */
.pricing-table-container {
    overflow-x: auto;
    margin-top: 25px;
}
.pricing-table-container table {
    width: 100%;
    min-width: 600px;
    border-collapse: collapse;
    background-color: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);
}

.pricing-table-container th,
.pricing-table-container td {
    padding: 18px;/*changed from 18px to 22 px*/
    border: 1px solid #ddd;
    text-align: center;
    font-size: 1.05em;
    color: #333;
}

.pricing-table-container th {
    background-color: #FF8C00;
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
}

.pricing-table-container tr:nth-child(even) {
    background-color: #f7f7f7;
}

/* Image Gallery & Location Map (Side-by-Side as per Desired Output) */
.project-image-map-section {
    margin-bottom: 50px;
}

.image-map-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    margin-top: 25px;
}

@media (min-width: 768px) {
    .image-map-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.main-gallery-image {
    background-color: #f0f0f0;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 400px;
}

.main-gallery-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 10px;
}

.google-map-embed {
    position: relative;
    padding-bottom: 400px; /*changes from 56.25%;*/ 
    height: 0;
    overflow: hidden;
    background-color: #f0f0f0;
    border-radius: 10px;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);
}


.bottom-cta-inner {
  max-width: 800px;
  margin: 0 auto;
  padding-top: 0;
}

.project-bottom-cta-section h2 {
    font-size: 2.2em !important;
    /*color: #fff !important; */
    margin-bottom: 10px !important;
    text-align: center !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    width: 100% !important;
    display: block !important;
}
.project-bottom-cta-section p {
    text-align: center;
    /*color: #fff; */
    margin-bottom: 30px;
    font-size: 1.2em;
    margin-bottom: 25px;
    line-height: 1.6;
}

.cta-benefits {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 30px;
    margin-bottom: 25px;
    font-size: 1.15em;
    font-weight: 500;
    white-space: nowrap;
    overflow-x: auto;
    padding: 0 10px 5px;
    box-sizing: border-box;
}

.cta-benefits span.dashicons {
    font-size: 1.6em;
    vertical-align: middle;
    margin-right: 8px;
    color: #333;
}

/* Responsive Adjustments */
@media (max-width: 1200px) {
    .hero-content-wrapper {
        padding-left: 20px;
    }
    .project-enquiry-form-top-container {
        right: 20px;
    }
}

@media (max-width: 1024px) {
    .project-hero-image-section {
        height: 450px;
    }
    .project-hero-image-section .project-title-heading {
        font-size: 3em;
    }
    .project-hero-image-section .project-details-line {
        font-size: 1.3em;
    }
    .project-enquiry-form-top-container {
        max-width: 280px;
        padding: 15px;
    }
    /* .project-section h2 {
        font-size: 1.8em;
        border-bottom: none !important; 
        text-transform: uppercase !important; 
        margin-bottom: 20px !important; 
    }*/
    .project-highlights-grid {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    }
    .highlight-item {
        padding: 15px;
    }
    .highlight-icon {
        font-size: 2em;
    }
    .highlight-item h3 {
        font-size: 1.1em;
    }
    .highlight-item p {
        font-size: 0.8em;
    }
    .main-gallery-image, .google-map-embed {
        height: 350px;
    }
}

@media (max-width: 768px) {
    .project-hero-image-section {
        height: 400px;
    }
    .project-enquiry-form-top-container {
        position: relative; /* Make it flow naturally below hero image */
        top: auto;
        right: auto;
        margin: 30px auto; /* Center it below the image */
        max-width: 90%; /* Allow wider on mobile */
        padding: 20px;
    }

    .hero-content-wrapper { /* Adjust for mobile stacked layout */
        position: relative;
        bottom: auto;
        left: auto;
        width: auto;
        margin-bottom: 30px;
        padding: 0 20px;
        text-align: center;
    }
    .project-hero-image-section .project-title-heading {
        font-size: 2.5em;
    }
    .project-hero-image-section .project-details-line {
        font-size: 1.1em;
    }


    /* .project-section h2 {
        font-size: 1.8em;
        border-bottom: none !important; 
        text-transform: uppercase !important; 
        margin-bottom: 20px !important; 
    } */
    .project-overview-content {
        text-align: left; /* No justify on mobile to prevent awkward spacing */
    }
    .project-highlights-grid {
        grid-template-columns: 1fr;
    }
    .features-grid {
        grid-template-columns: 1fr;
    }
    .image-map-grid {
        grid-template-columns: 1fr;
    }
    .main-gallery-image, .google-map-embed {
        height: 300px;
    }
    .cta-benefits {
            flex-wrap: wrap; /* Allow wrapping */
            justify-content: center;
            gap: 10px;
            white-space: normal;
            overflow-x: visible;
            padding: 0 5px 5px;
        }
        .project-bottom-cta-section .wpforms-container {
            max-width: 90%;
        }
    }

    @media (max-width: 480px) {
        .project-hero-image-section {
            height: 300px;
        }
        .project-hero-image-section .project-title-heading {
            font-size: 2em;
        }
        .project-hero-image-section .project-details-line {
            font-size: 0.9em;
        }
        .project-enquiry-form-top-container {
            padding: 15px;
        }
        
        .main-gallery-image, .google-map-embed {
            height: 250px;
        }
    }
.project-gallery-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

.project-gallery-wrapper .gallery-img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    width: calc(33.33% - 10px);
}
.project-bottom-cta-section .cta-benefits {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin: 20px 0;
}

.cta-benefits .dashicons {
    font-size: 20px;
    margin-right: 6px;
}

.benefit-text {
    font-weight: 500;
}
/* 🔲 Hero Section: Title & Line Styling */
.project-title-heading {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: #fff;
}

.project-details-line {
    font-size: 1.2rem;
    color: #fff;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
}

.project-enquiry-form-top-container select option:hover {
    background-color: #ffa033;   /* Lighter on hover */
    color: #fff !important;
}
/* 🔧 Fix Dropdown in Bottom CTA Form */
.project-bottom-cta-section select,
.project-bottom-cta-section select option {
  background-color: #ff8c00;
  color: #fff !important;
  font-weight: 500;
}

.project-bottom-cta-section select option:hover {
  background-color: #ffa033;
  color: #fff !important;
}
/* ==== Project Highlights Grid Styling ==== */
.project-highlights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-top: 25px;
  padding: 10px 0;
}

.highlight-item {
  background: #fff;
  border-radius: 8px;
  padding: 18px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
  text-align: center;
  transition: transform 0.3s ease;
  min-width: 0; /* ✅ Add this line here */
  word-break: break-word; /* ✅ Add this line */
}

.highlight-item:hover {
  transform: translateY(-4px);
}

.highlight-icon {
  font-size: 30px;
  color: #f57c00;
  margin-bottom: 8px;
  display: inline-block;
}

.highlight-rera {
  font-size: 1.1rem !important;
  line-height: 1.2 !important;
  white-space: normal !important;
  word-break: break-word !important;
  overflow: visible !important;
  text-overflow: unset !important;
}

.highlight-label {
  font-size: 0.9rem;
  color: #777;
  margin: 0;
}
/* === Key Features Section – Unified Layout === */
.features-single {
    font-size: 1.05rem;
    line-height: 1.7;
    color: #333;
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.03); /* softer and subtler */
    margin-top: 0px;
}
.project-features-section {
    padding: 40px 0;
    background-color: #fff; /* matches the rest of the page */
}
.project-features-section h2 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 25px; /* Standard gap to content */
  color: #222;
  text-align: left;
  display: inline-block;
  border-bottom: 3px solid #ff8c00; /* Match your theme */
  padding-bottom: 8px;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
}
.gallery-item img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}
.gallery-grid {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 10px;
}

.gallery-item {
  flex: 0 0 auto;
  scroll-snap-align: start;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  min-width: 300px;
  max-width: 400px;
}

.section-heading {
  display: inline-block;
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 20px;
  position: relative;
  border-bottom: none !important; /* ⬅️ Add this line */
}

.section-heading::after {
  content: none !important; /* <--- IMPORTANT CHANGE: This completely removes the orange pseudo-element underline */
  /* You can optionally remove the other properties (position, left, bottom, width, height, background) as they are now redundant */
}

.project-gallery {
  margin-bottom: 60px;
}

.gallery-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: 20px;
  overflow-x: auto;
  padding-bottom: 10px;
  scroll-snap-type: x mandatory;
}

.gallery-item {
  flex: 0 0 auto;
  width: 300px;
  scroll-snap-align: start;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.gallery-item img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}
.gallery-wrapper {
  position: relative;
  overflow: hidden;
  padding: 20px 0;
}

.gallery-grid {
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth;
  gap: 20px;
}

.gallery-item {
  flex: 0 0 auto;
  width: 300px;
  height: auto;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  background-color: #fff;
}

.gallery-item img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* Arrow styles */
.gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 20px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.gallery-arrow.left {
  left: 10px;
}

.gallery-arrow.right {
  right: 10px;
}

.gallery-arrow:hover {
  background-color: rgba(0, 0, 0, 0.8);
}
#gallery-scroll {
  overflow-x: auto;
  scrollbar-width: none; /* Firefox */
}
#gallery-scroll::-webkit-scrollbar {
  display: none; /* Chrome, Safari */
}
.gallery-arrow {
  background: #333;
  color: #fff;
  border: none;
  padding: 12px 16px;
  cursor: pointer;
  font-size: 24px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  transition: background 0.3s ease;
  border-radius: 50%;
}
.gallery-arrow:hover {
  background: #f97316; /* orange-500 on hover */
}
.gallery-arrow.left {
  left: 10px;
}
.gallery-arrow.right {
  right: 10px;
}
.gallery-grid {
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth;
  gap: 20px;
  padding: 20px 0;
  scrollbar-width: none; /* Firefox */
}
.gallery-grid::-webkit-scrollbar {
  display: none; /* Chrome, Safari */
}

.gallery-item {
  flex: 0 0 auto;
  width: 300px;
  height: 300px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 8px;
}
.video-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
  border-radius: 12px;
  margin-top: 20px;
}

.video-wrapper {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px 0;
}

.custom-video-wrapper {
  max-width: 800px;
  margin: 0 auto;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
/* ========== PROJECT VIDEO RESPONSIVE EMBED ========== */
.video-wrapper {
  position: relative;
  padding-bottom: 400px; /*reduced from 54%- this the size of youtube video block*/
  padding-top: 25px;
  height: 0;
  overflow: hidden;
}

.benefit-item {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.cta-benefits {
  overflow: hidden;
  flex-wrap: wrap;         /* Ensures items move to next line if needed */
  justify-content: center;
  gap: 20px;
  margin-bottom: 25px;
  font-size: 1.1em;
  font-weight: 500;
}

.benefit-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: normal;     /* ✅ Allow wrapping within item */
}
.hero-content-wrapper {
  position: absolute;
  bottom: 20px;
  left: 20px;
  z-index: 2;
  margin: 0;
  padding: 0;
}

.hero-blur-box {
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 14px 24px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  display: inline-block;
  max-width: 90%;
  margin: 0;
}

.hero-blur-box h1.project-title-heading {
  font-size: 2.2em;
  font-weight: 700;
  margin: 0 0 6px 0;
  line-height: 1.1;
  color: #fff;
  text-transform: uppercase; /* <-- ADD THIS LINE */
}

.hero-blur-box p.project-details-line {
  font-size: 1.05em;
  margin: 0;
  line-height: 1.3;
  color: #f0f0f0;
}


@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .hero-blur-box {
    background: rgba(0, 0, 0, 0.65); /* fallback */
  }
}
.project-hero-image-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px; /* You can increase if needed */
  background: linear-gradient(to bottom, rgba(0,0,0,0.7), rgba(0,0,0,0));
  z-index: 1;
  pointer-events: none;
}
.ast-header {
  position: relative;
  z-index: 20;
  background: linear-gradient(to bottom, rgba(0,0,0,0.65), rgba(0,0,0,0)) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
/* === Global Section Spacing === */
.project-section {
  margin-bottom: 60px;  /* spacing between sections */
  padding: 0;
}


/* === Section Heading Spacing === */
/* .project-section h2,
.section-heading {
  font-size: 2.2em;
  font-weight: 700;
  color: #333;
  margin-bottom: 25px;   
  border-bottom: 3px solid #FF8C00;
  padding-bottom: 10px;
  display: inline-block;
  text-transform: capitalize;
} */
/* === Global Typography Consistency === */
body {
  font-size: 16px;
  line-height: 1.7;
  color: #444;
}

h1 {
  font-size: 2.8em;
  margin-bottom: 15px;
  font-weight: 700;
}

h2 {
  font-size: 2.2em;
  margin-bottom: 20px;
  font-weight: 700;
}

p {
  font-size: 1em;
  line-height: 1.7;
  margin-bottom: 15px;
}
.section-divider {
  height: 2px;
  width: 80px;
  background-color: #FF8C00;
  margin: 30px auto;
  border-radius: 4px;
}
.project-section:first-of-type {
  margin-top: 20px; /* Reduce from default or remove entirely */
}
.key-features-wrapper {
  margin-bottom: 40px;
}

.project-section {
  margin-bottom: 60px; /* Ensure uniform gap between sections */
}
.video-wrapper {
  margin-bottom: 30px !important;
}

.project-location-section {
  margin-top: 30px !important;
}
/* .project-section h2 {
  margin-top: 0;
} */
.project-enquiry-form-section {
  padding-top: 40px;
}

.project-enquiry-form-section h2 {
  margin-top: 0;
}
.project-section {
  margin-top: 60px;
  margin-bottom: 60px;
}

/* .project-section h2 {
  margin-bottom: 25px;
  margin-top: 0;
  border-bottom: none !important; 
  text-transform: uppercase !important; 
}
*/
.project-section:first-of-type {
  margin-top: 30px;
}

.video-wrapper,
.project-image-map-section,
.project-enquiry-form-section {
  margin-top: 40px;
  margin-bottom: 40px;
}

/* Cleaned & Refactored CSS for BangOnRealty Project Pages */

/* General Body Cleanup */
body.single-project {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* Container Full Width */
.ast-container {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

/* Content Section Layout */
.astra-single-project-content {
    padding-top: 0;
}

.astra-single-project-body-content-wrapper {
    background-color: #fff;
    padding: 60px 0;
}

.astra-single-project-body-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Unified Section Styling */
.project-section {
    margin: 60px 0;
    padding: 0;
}

.project-section:first-of-type {
    margin-top: 30px;
}

/* .project-section:last-child {
    margin-bottom: 0;
}
*/
/* Paragraphs */
.project-section p {
    font-size: 1em;
    line-height: 1.7;
    margin-bottom: 15px;
}

/* Special Sections */
.key-features-wrapper {
    margin-bottom: 40px;
}

.video-wrapper,
.project-image-map-section,
.project-enquiry-form-section {
    margin-top: 40px;
    margin-bottom: 40px;
}

.project-enquiry-form-section h2 {
    margin-top: 0;
}

/* === Final Section Spacing Fixes === */
.project-section {
  margin-top: 40px; /* Changed from 60px */
  margin-bottom: 40px; /* Changed from 60px */
  padding: 0 !important;
}

.project-section:first-of-type {
  margin-top: 40px; /* Reduced for Hero → Overview */
}

/*.project-section:last-child {
  margin-bottom: 0;
}
*/
/* Specific Adjustments */
.project-enquiry-form-section {
  margin-top: 60px;
  margin-bottom: 60px;
}

.video-wrapper,
.project-image-map-section {
  margin-top: 40px;
  margin-bottom: 40px;
}

.project-enquiry-form-section h2 {
  margin-top: 0 !important;
}

.video-wrapper,
.project-image-map-section,
.project-enquiry-form-section {
  margin-top: 40px !important;
  margin-bottom: 40px !important;
}

/* === June Enhancements: Layout, Spacing, Typography === */
/* Section Spacing */
.project-section {
  margin: 60px 0 !important;
  padding: 0 !important;
}
.project-section:first-of-type {
  margin-top: 30px !important;
}
/*.project-section:last-child {
  margin-bottom: 30px !important;
}
*/
/* Hero Section Adjustments */
.project-hero-image-section {
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
  height: 100vh;
}

/* Hero Overlay Text Box */
.hero-blur-box {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: rgba(0, 0, 0, 0.5);
  padding: 20px 30px;
  border-radius: 12px;
  color: #fff;
  display: inline-block;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

/* Hero Text Styling */
.hero-blur-box h1,
.hero-blur-box .project-details-line {
  margin: 0;
  color: #fff !important;
  font-size: 1.8rem;
  line-height: 1.4;
}

/* Form Top Spacing Fix */
.project-enquiry-form-section {
  margin-top: 60px !important;
  padding-top: 20px !important;
}
.project-enquiry-form-section h2 {
  margin-top: 0 !important;
}
/* CLEANUP JUNE 2025 - Unified Section Heading */
.section-heading {
  font-size: 28px;
  font-weight: 600;
  color: #2c2c2c;
  border-bottom: none !important; /* <--- IMPORTANT CHANGE: Remove this specific underline */
  padding-bottom: 8px;
  margin-bottom: 30px;
  text-transform: uppercase;
}

/* === June Fixes v2 – Final Visual Alignments === */

/* 1. Section-to-Section Spacing Cleanup */
.project-section {
  margin-top: 60px !important;
  margin-bottom: 60px !important;
}
.project-section:first-of-type {
  margin-top: 30px !important;
}
/* .project-section:last-child {
  margin-bottom: 40px !important;
}
*/
/* 2. Bottom CTA Form Padding Fix */
.project-enquiry-form-section:last-child {
  padding-top: 60px !important;
  padding-bottom: 60px !important;
}

/* === Section Spacing Standardization === */
.project-section {
  margin: 60px 0 !important;
  padding: 0 !important;
}

.project-section:first-of-type {
  margin-top: 40px !important;
}

/* .project-section:last-child {
  margin-bottom: 40px !important;
}
*/
/* === Headings === */
/* .project-section h2,
.section-heading {
  font-size: 2.2em;
  font-weight: 700;
  margin: 0 0 25px;
  color: #222;
  text-transform: uppercase !important; 
  border-bottom: none !important; 
  padding-bottom: 10px;
  display: inline-block;
}
*/
/* === Hero Section === */
.project-hero-image-section {
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
  height: 100vh;
}

.hero-blur-box {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: rgba(0, 0, 0, 0.5);
  padding: 20px 30px;
  border-radius: 12px;
  color: #fff;
  display: inline-block;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.hero-blur-box h1,
.hero-blur-box .project-details-line {
  margin: 0;
  color: #fff !important;
  font-size: 1.8rem;
  line-height: 1.4;
}

/* Divider below project name */
.project-details-line::before {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background-color: #FF8C00;
  margin: 10px 0;
}

/* === Specific Sections === */
.key-features-wrapper,
.video-wrapper,
.project-image-map-section,
.project-enquiry-form-section {
  margin-top: 60px;
  margin-bottom: 60px;
}

.project-enquiry-form-section {
  padding-top: 20px !important;
}

.project-enquiry-form-section h2 {
  margin-top: 0 !important;
}

/* === Gallery === */
.project-gallery-wrapper {
  margin-top: 60px;
  margin-bottom: 60px;
}

/* === Clear Footer Gap === */
.site-footer {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* === Global Typography Reset === 
body, h1, h2, h3, h4, h5, h6, p, a, span, div, input, select, textarea, button {
  font-family: 'Inter', sans-serif;
  color: #333;
  line-height: 1.6;
} 
*/ 

/* === Container Styling === */
body.single-project {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

.ast-container {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

.astra-single-project-body-content-wrapper {
  background-color: #fff;
  padding: 30px 0;/*reduced from 60*/
}

.astra-single-project-body-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}
/* === ROUND 3: Final Visual Alignment and Hero Adjustments === */

/* Hero Section - reduce height and center form vertically */
.project-hero-image-section {
  height: 85vh !important;
  display: flex;
  align-items: center;
  margin-bottom: 0 !important;
}

/* Hero to Overview */
.project-section:nth-of-type(1) {
  margin-top: 40px !important;
  margin-bottom: 40px !important;
}

/* Overview to Highlights */
.project-section:nth-of-type(2) {
  margin-top: 60px !important;
  margin-bottom: 30px !important;
}

/* Highlights to Key Features - final spacing and padding fix */
.project-features-section {
  margin-top: 30px !important; /* Changed from 20px */
  margin-bottom: 30px !important; /* Changed from 20px */
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.project-features-section .container {
  padding: 20px 0 !important;
}

/* Pricing Section (remains good) */
.project-section:nth-of-type(4) {
  margin-top: 40px !important;
  margin-bottom: 40px !important; /*reduced from 60*/
}

/* Gallery Section (remains good) */
.project-image-map-section {
  margin-top: 60px !important;
  margin-bottom: 60px !important;
}

/* Walkthrough to Location - reduced spacing */
.video-wrapper {
  margin-top: 20px !important; /* Changed from 60px - then from 20px*/
  margin-bottom: 20px !important; /* Changed from 20px - then from 10px */
}

.project-location-section {
  margin-top: 20px !important; /* Changed from 10px */
  margin-bottom: 60px !important;/* Changed from 20px */
}

/* Match Map Height to Video and center align */
.google-map-embed {
  height: 400px !important; /* Changed from 300px to match video */
  max-width: 75% !important;
  margin: 0 auto;
  display: block;
}

/* --- START OF CUSTOM FIXES (Place at very end of style.css) --- */
/* 1. General Section Spacing - Ensure consistent default */
.project-section {
  margin-top: 20px !important; /* reduced from 40px*/
  margin-bottom: 40px !important; /* reduced from 40px*/
  padding: 0 !important;
}

.project-section:first-of-type {
  margin-top: 30px !important; /* Slightly less for the first section */
}

/* .project-section:last-child {
  margin-bottom: 30px !important; Slightly less for the last section before footer 
}
*/
/* 2. Key Features Section - Targeted adjustment */
.project-features-section {
  margin-top: 30px !important; /* Specific top margin */
  margin-bottom: 30px !important; /* Specific bottom margin */
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Adjust inner padding for Key Features content */
.project-features-section .astra-single-project-body-content {
    padding-top: 10px !important;
    padding-bottom: 20px !important;
}

/* 3. Gap between Project Video and Location - Targeted adjustment */
.video-wrapper {
  margin-bottom: 20px !important; /* Reduce gap after video */
}

.project-location-section {
  margin-top: 20px !important; /* Reduce gap before location */
}

/* 4. Match Project Location size to Video container */
.google-map-embed {
  height: 200px !important; /* Match video height - reduced from 400px*/
  max-width: 69% !important; /* changed from 100% */
  margin: 0 auto !important; /* Center map if needed */
  display: block !important;
}

/* --- END OF CUSTOM FIXES --- */
/* === FINAL GLOBAL BUTTON STYLING — UNIFIED FOR CTA + WPForms === */
button,
input[type="submit"],
.wpforms-submit,
.project-enquiry-form-top-container .wpforms-submit,
.project-bottom-cta-section .wpforms-submit {
    font-family: Arial, sans-serif !important;
    background-color: #262829 !important;
    color: #ffffff !important; /* ✅ Corrected to white text */
    padding: 14px 0 !important;
    border: none !important;
    border-radius: 0 !important;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    width: 100%;
    cursor: pointer;
    letter-spacing: 1px;
}

button:hover,
input[type="submit"]:hover,
.wpforms-submit:hover,
.project-enquiry-form-top-container .wpforms-submit:hover,
.project-bottom-cta-section .wpforms-submit:hover {
    background-color: #1C3E4D !important;
    color: #ffffff !important;
}

/* === Fix Dropdown Arrow (Remove default appearance) === */
select {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background: none !important;
}
/* 1. Hide Labels */
.project-enquiry-form-top-container .wpforms-field-label,
.project-bottom-cta-section .wpforms-field-label {
  display: none;
}

/* 2. Input & Textarea Styling */
.project-enquiry-form-top-container .wpforms-field input,
.project-enquiry-form-top-container .wpforms-field textarea,
.project-enquiry-form-top-container .wpforms-field select,
.project-bottom-cta-section .wpforms-field input,
.project-bottom-cta-section .wpforms-field textarea,
.project-bottom-cta-section .wpforms-field select {
  background: transparent !important;
  border: none !important;
  /*border-bottom: 1px solid rgba(255, 255, 255, 0.6) !important;----applied unversal styling at line 2216*/
  color: #333 !important;/* Changed from #000 */
  font-size: 16px !important;
  padding: 10px 5px !important;
  width: 100% !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  box-sizing: border-box;
}

/* 3. Submit Button Styling */
.project-enquiry-form-top-container .wpforms-submit,
.project-bottom-cta-section .wpforms-submit {
  background: #1e1e1e !important;
  color: #fff !important;
  padding: 14px 0 !important;
  width: 100% !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  text-transform: uppercase;
  border: none !important;
  border-radius: 2px !important;
  cursor: pointer;
  letter-spacing: 1px;
  transition: background 0.3s ease;
}

.project-enquiry-form-top-container .wpforms-submit:hover,
.project-bottom-cta-section .wpforms-submit:hover {
  background: #ff4500 !important;
  color: #fff !important;
}

/* 4. Form Field Spacing */
.project-enquiry-form-top-container .wpforms-field,
.project-bottom-cta-section .wpforms-field {
  margin-bottom: 18px !important;
}

/* 5. Top CTA Boxed Layout Styling */
.project-enquiry-form-top-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 20px;
  width: 100%;
  box-sizing: border-box;
}

.project-enquiry-form-top-container form {
  width: 320px;
  background: linear-gradient(135deg, #fbb03b, #ff7746);
  padding: 30px 25px;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
/* === 6. Bottom CTA Layout Final Cleanup === */
.project-bottom-cta-section {
  background: linear-gradient(135deg, #fbb03b, #ff7746);
  padding: 60px 0 40px !important; /* Adjust vertical padding as needed */
  width: 100vw; /* Make it full viewport width */
  max-width: 100vw; /* Ensure it doesn't exceed viewport width */
  margin-left: calc(50% - 50vw); /* Pull to left edge */
  margin-right: calc(50% - 50vw); /* Pull to right edge */
  box-sizing: border-box; /* Include padding in width calculation */
}

.project-bottom-cta-section form {
  max-width: 480px; /* Keep form content constrained */
  margin: 0 auto !important; /* Center the form within the full-width section */
  padding-bottom: 0 !important;
}
/* === Vertical Spacing Balance for Bottom CTA === */
.project-bottom-cta-section {
  margin-top: 60px;
  margin-bottom: 0;
}

#acf-map {
  margin-bottom: 0 !important;
}

/* 7. Mobile/Tablet Responsive Fix */
@media (max-width: 768px) {
  .project-enquiry-form-top-container {
    justify-content: center;
    padding: 20px 10px;
  }

  .project-enquiry-form-top-container form,
  .project-bottom-cta-section form {
    width: 90% !important;
  }

  /* form padding rules belong to ≤768 as well */
  .project-bottom-cta-section form {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 10px;
  }
}

/* === Step 3: Responsive Fixes for Bottom CTA Section === */
@media (max-width: 1024px) {
  .project-bottom-cta-section {
    padding: 60px 20px 40px !important;
    margin-top: 0 !important;
  }
}

/* extra mobile tightening */
@media (max-width: 768px) {
  .project-bottom-cta-section {
    padding: 40px 15px 30px !important;
    margin-top: 0 !important;
  }
}

@media (max-width: 768px) {
  .project-bottom-cta-section {
    padding: 40px 15px 30px !important;
    margin-top: 0 !important;
  }
}

  .project-bottom-cta-section form {
    padding: 0;
  }

  .project-enquiry-form-top-container .wpforms-submit,
  .project-bottom-cta-section .wpforms-submit {
    font-size: 14px !important;
    padding: 12px 0 !important;
  }

.project-enquiry-form-top-container .form-header {
  display: none !important;
}

.project-bottom-cta-section h2 {
  color: #222 !important;
}

.project-bottom-cta-section p,
.project-bottom-cta-section .benefit-text {
  color: #444 !important;
}

.project-bottom-cta-section .wpforms-field input,
.project-bottom-cta-section .wpforms-field textarea,
.project-bottom-cta-section .wpforms-field select {
  color: #333 !important;
}

.project-bottom-cta-section input::placeholder,
.project-bottom-cta-section textarea::placeholder,
.project-bottom-cta-section select::placeholder {
  color: #555 !important;
}

.project-bottom-cta-section .dashicons {
  color: #222 !important;
}
/* Unify underline color for all CTA form inputs */
.project-bottom-cta-section .wpforms-field input,
.project-bottom-cta-section .wpforms-field textarea,
.project-bottom-cta-section .wpforms-field select,
.project-enquiry-form-top-container .wpforms-field input,
.project-enquiry-form-top-container .wpforms-field textarea,
.project-enquiry-form-top-container .wpforms-field select {
  border: none !important;
  border-bottom: 1px solid #999 !important;
  background-color: transparent !important;
}

/* --- ULTIMATE FINAL FIX FOR PLACEHOLDER COLOR CONSISTENCY --- */

/* 1. Ensure Placeholder text color is explicitly set and overrides input color */
.project-enquiry-form-top-container .wpforms-field input::placeholder,
.project-enquiry-form-top-container .wpforms-field textarea::placeholder,
.project-bottom-cta-section .wpforms-field input::placeholder,
.project-bottom-cta-section .wpforms-field textarea::placeholder,
input.iti__tel-input::placeholder {
  color: #333 !important; /* THIS MUST BE #333 */
  font-size: 16px !important;
  font-weight: 500 !important;
  opacity: 1 !important;
}

/* 2. Set the actual entered text color (what user types) */
.project-enquiry-form-top-container .wpforms-field input,
.project-enquiry-form-top-container .wpforms-field textarea,
.project-bottom-cta-section .wpforms-field input,
.project-bottom-cta-section .wpforms-field textarea {
    color: #333 !important; /* THIS MUST BE #333 */
    font-size: 16px !important;
    font-weight: 500 !important;
}

/* 3. Ensure Select field text color (both value and options) */
.project-enquiry-form-top-container .wpforms-field select,
.project-bottom-cta-section .wpforms-field select {
    color: #333 !important; /* THIS MUST BE #333 */
    font-size: 16px !important;
    font-weight: 500 !important;
    background-color: transparent !important;
}

.project-enquiry-form-top-container .wpforms-field select option,
.project-bottom-cta-section .wpforms-field select option {
    color: #333 !important; /* THIS MUST BE #333 */
    background-color: #fff !important;
}

/* Increase margin-bottom below Location map for more space */
.project-location-section {
  margin-bottom: 80px !important; /* Increased from 40px */
}

/* Remove extra white gap below Bottom CTA */
.project-bottom-cta-section {
  margin-bottom: 0 !important;
  padding-bottom: 40px !important;
}

/* Remove bottom margin from last section */
.project-section:last-child {
  margin-bottom: 0 !important;
}

/* Reset footer spacing */
.site-footer {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.project-bottom-cta-section form {
  margin-left: auto !important;
  margin-right: auto !important;
}
/* === Step 2 Final Fix – Prevent Collapsed Margin Above Bottom CTA === */
.project-bottom-cta-section {
  padding-top: 60px !important;
  margin-top: 0 !important;
}
/* Step 2 – Final Fix: Clear Spacing Above Bottom CTA */
.bottom-cta-wrapper {
  padding-top: 60px !important;
  margin-top: 0 !important;
}
/* ✅ Fix: Center the Bottom CTA form inside its section */
.project-bottom-cta-section form {
  margin-left: auto !important;
  margin-right: auto !important;
}
/* ✅ Fix: Reduce footer height to prevent extra white space */
.site-primary-footer-wrap {
  padding: 20px 20px 10px !important;
}
@media (max-width: 1024px) {
  .project-enquiry-form-top-container {
    display: none !important;
  }
}
@media (max-width: 1024px) {
  input::placeholder,
  textarea::placeholder {
    color: #333 !important; /* darker for contrast */
    opacity: 1 !important;
  }
}
/* ✅ Section-to-Section Spacing */
.project-section {
  margin-top: 50px;
  margin-bottom: 50px;
  padding-top: 0;
  padding-bottom: 0;
}

/* ✅ Heading to Content Gap */
/* .project-section h2.section-heading {
  margin-bottom: 25px;
}
*/

/* ✅ Specific Sections *
project-gallery h2,
#project-walkthrough h2,
#project-location h2 {
  margin-bottom: 25px;
}
*/
/* Walk through video and Google Map alignment FIX */
/* .project-walkthrough-container,
.google-map-embed {
  max-width: 600px;
  margin: 0 auto;
} */
/* tandardize Walkthrough and Location Section Layout */
.project-walkthrough-container,
.google-map-embed {
  max-width: 800px !important;
  margin: 0 auto !important;
  display: block !important;
  height: auto !important;
}
.project-walkthrough-container iframe,
.google-map-embed iframe {
  width: 100% !important;
  height: 450px !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  display: block !important;
  border: none !important;
  border-radius: 10px !important;
}

.google-map-embed {
  padding-bottom: 30px !important;
  box-shadow: none !important;
  background: none !important;
} 

/* === Final Unified Section Heading === */
.project-section h2,
.section-heading {
  font-size: 2.2em;
  font-weight: 700;
  color: #222;
  margin: 0 0 25px;
  padding-bottom: 10px;
  display: inline-block;
  text-transform: uppercase !important;
  border-bottom: none !important;
  line-height: 1.3;
}

@media (max-width: 768px) {
  .project-section h2,
  .section-heading {
    font-size: 1.8em !important;
  }
}

/* === Final Vertical Section Spacing === */
.project-section {
  margin: 60px 0 !important;
  padding: 0 !important;
}

.project-section:first-of-type {
  margin-top: 40px !important;
}

.project-section:last-child {
  margin-bottom: 0 !important;
}
/* Fix tightness under Key Features list */
.key-features-wrapper ul {
  margin-top: 10px;
}

/* Standardize section spacing above Walkthrough and Location */
#project-walkthrough,
#project-location {
  margin-top: 60px;
}

/* === Final Heading-to-Content Gap Standardization === */

/* Apply consistent margin after all H2s inside .project-section */
.project-section h2,
.section-heading {
  margin-bottom: 10px !important; /* reduced from 25 px*/
}

/* Remove excess top margin from content blocks that follow headings */
.project-highlights-grid,
.features-grid,
.pricing-table-container,
.gallery-wrapper,
.video-wrapper,
.project-walkthrough-container,
.google-map-embed {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Add controlled spacing below headings only */
.project-highlights-grid,
.features-grid,
.gallery-wrapper,
.video-wrapper,
.project-walkthrough-container,
.google-map-embed {
  margin-top: 10px !important;
}
/* === FINAL FIX: WPForms Checkbox Alignment and Style === */

/* Target both the top and bottom CTA forms */
.project-enquiry-form-top-container .wpforms-field-checkbox,
.project-bottom-cta-section .wpforms-field-checkbox {
    display: flex !important;         /* 1. Aligns items in a single row */
    align-items: center !important;   /* 2. Vertically centers the text with the checkbox */
    gap: 10px !important;             /* 3. Adds a nice space between the checkbox and text */
    margin-bottom: 18px !important;   /* 4. Keeps spacing consistent with other fields */
}

/* Style the checkbox input itself to have a consistent size */
.project-enquiry-form-top-container .wpforms-field-checkbox input[type="checkbox"],
.project-bottom-cta-section .wpforms-field-checkbox input[type="checkbox"] {
    width: 18px !important;           /* Makes the checkbox a good size */
    height: 18px !important;
    flex-shrink: 0;                   /* Prevents the checkbox from shrinking */
}

/* Style the checkbox LABEL to match the font/color of other fields */
.project-enquiry-form-top-container .wpforms-field-checkbox label,
.project-bottom-cta-section .wpforms-field-checkbox label {
    color: #333 !important;           /* Matches your input text color */
    font-size: 16px !important;        /* Matches your input font size */
    font-weight: 500 !important;       /* Matches your input font weight */
    line-height: 1.4 !important;       /* Improves readability */
    margin: 0 !important;              /* Removes any default margins */
}

/* Optional: Style the "Privacy Policy" link within the label */
.project-enquiry-form-top-container .wpforms-field-checkbox label a,
.project-bottom-cta-section .wpforms-field-checkbox label a {
    color: #333 !important;           /* Keeps link color consistent */
    text-decoration: underline !important; /* Makes it clear it's a link */
}

.project-enquiry-form-top-container .wpforms-field-checkbox label a:hover,
.project-bottom-cta-section .wpforms-field-checkbox label a:hover {
    text-decoration: none !important;  /* Clean hover effect */
}

/* Hide the red "This field is required" text for the checkbox to keep it clean */
.wpforms-field-checkbox .wpforms-error {
    display: none !important;
}
/* =========================================================
   BANG ON REALTY – POPUP MAKER THEME 2875 (FINAL 2025-06-26)
   ========================================================= */

/* 1. Card wrapper */
.popmake,                /* safety */
.popmake-2875,           /* Popup ID */
.pum-theme-bang-on-realty-custom {   /* fallback theme slug */
  --orange1:#fbb03b;
  --orange2:#ff7746;
  --txt:#1a1a1a;

  background:linear-gradient(135deg,var(--orange1),var(--orange2)) !important;
  padding:38px 28px !important;
  border-radius:14px !important;
  max-width:520px !important;   /* desktop card width */
  margin:0 auto !important;
  box-shadow:none !important;
  color:var(--txt);
  position:relative;
}

/* 2. Close button */
.popmake-2875 .pum-close{
  position:absolute!important;
  top:16px;right:16px;
  color:var(--txt)!important;
  background:transparent!important;
  font-size:26px;
  line-height:1;
  border:none!important;
  opacity:.8;transition:opacity .3s;
}
.popmake-2875 .pum-close:hover{opacity:.5}

/* 3. Headline & sub-headline */
.popmake-2875 h2,
.popmake-2875 .pum-title{
  margin:0 0 6px;
  font-size:26px;
  font-weight:700;
  text-transform:uppercase;
  text-align:center;
  line-height:1.25;
}
.popmake-2875 p{
  margin:0 0 24px;
  font-size:15px;
  text-align:center;
}

/* 4. Core WPForms layout */
.popmake-2875 .wpforms-form{
  display:flex;
  flex-direction:column;
  gap:18px;
  max-width:460px;
  margin:0 auto;
}

/* 5. Inputs -– underline style */
.popmake-2875 input[type="text"],
.popmake-2875 input[type="email"],
.popmake-2875 input[type="tel"],
.popmake-2875 textarea{
  background:transparent!important;
  border:none!important;
  border-bottom:1px solid #424242!important;
  border-radius:0!important;
  padding:12px 6px!important;
  font-size:15px!important;
  color:var(--txt)!important;
  box-shadow:none!important;
}
.popmake-2875 input::placeholder,
.popmake-2875 textarea::placeholder{color:#555!important;opacity:1}

/* 6. Checkbox row */
.popmake-2875 .wpforms-field-checkbox{
  display:flex!important;
  align-items:center!important;
  gap:10px;
  font-size:14px;
}
.popmake-2875 .wpforms-field-checkbox a{color:var(--txt);text-decoration:underline}

/* 7. Country-code phone dropdown fix 
.popmake-2875 .iti{background:transparent!important}*/

/* 8. Submit button */
.popmake-2875 .wpforms-submit{
  width:100%!important;
  max-width:260px!important;
  margin:18px auto 0!important;
  padding:14px 20px!important;
  background:#1a1a1a!important;
  color:#fff!important;
  font-weight:600;
  text-transform:uppercase;
  border:none!important;
  border-radius:6px!important;
  transition:background .25s;
}
.popmake-2875 .wpforms-submit:hover{background:#333!important}

/* 9. Responsive: ≤ 768 px */
@media(max-width:768px){
  .popmake-2875{padding:30px 18px!important;max-width:90%!important;}
  .popmake-2875 h2{font-size:22px}
  .popmake-2875 .wpforms-form{max-width:100%}
  .popmake-2875 .wpforms-submit{max-width:100%}
}

/* =========================================================
   BANG ON REALTY – POPUP PATCH (26 Jun 2025)
   ========================================================= */

/* 1. Force transparent input backgrounds & underline style */
.popmake-2875 input[type="text"],
.popmake-2875 input[type="email"],
.popmake-2875 input[type="tel"],
.popmake-2875 textarea {
  background-color: transparent !important;   /* white boxes gone   */
  border: none !important;                    /* remove side borders */
  border-bottom: 1px solid #424242 !important;/* keep underline      */
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* 2. Make WPForms title & subtitle centre-aligned */
.popmake-2875 .wpforms-title,
.popmake-2875 h2,
.popmake-2875 h3,
.popmake-2875 p {
  text-align: center !important;
}

/* 3. Submit button width: inline-auto on desktop, 100 % on mobile  */
@media (min-width: 769px) {
  .popmake-2875 .wpforms-submit {
    width: auto !important;      /* shrink to content */
    max-width: 260px !important; /* upper limit        */
    display: inline-flex !important;
  }
}
/* still full-width for touch devices (≤768 px) */

/* 4. Close button: swap “CLOSE” pill for neat × icon */
.popmake-2875 .pum-close {
  width: 32px;
  height: 32px;
  background: transparent !important;
  color: var(--txt);
  font-size: 26px;
  font-weight: 700;
  line-height: 26px;
  text-align: center;
  padding: 0 !important;
}
.popmake-2875 .pum-close::before {
  content: "×";
}

/* ================================================
   FINAL FIX: UNIFIED POPUP FORM (Confirmed on 26-Jun)
   ================================================ */

/* --- Base inputs --- */
.popmake-2875 .wpforms-container input[type="text"],
.popmake-2875 .wpforms-container input[type="email"],
.popmake-2875 .wpforms-container input[type="tel"],
.popmake-2875 .wpforms-container select,
.popmake-2875 .wpforms-container textarea {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid #333 !important;
  color: #1a1a1a !important;
  border-radius: 0 !important;
  padding: 12px 6px !important;
  font-size: 15px !important;
  box-shadow: none !important;
  width: 100% !important;
}

/* --- Fix the country code phone field (removes block background) --- 
.popmake-2875 .iti__flag-container,
.popmake-2875 .iti {
  background: transparent !important;
}*/

/* --- Placeholder style --- */
.popmake-2875 .wpforms-container input::placeholder,
.popmake-2875 .wpforms-container textarea::placeholder {
  color: #4a4a4a !important;
  opacity: 1 !important;
  font-size: 14px !important;
}

/* --- Submit button --- */
.popmake-2875 .wpforms-submit {
  background-color: #1a1a1a !important;
  color: #fff !important;
  padding: 12px 24px !important;
  border-radius: 6px !important;
  text-transform: uppercase;
  font-weight: 600;
  width: auto !important;
  max-width: 260px !important;
  margin: 0 auto !important;
  display: block !important;
  text-align: center;
}

/* --- Responsive: full width button on small devices --- */
@media screen and (max-width: 768px) {
  .popmake-2875 .wpforms-submit {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* --- Heading alignment & font overrides --- */
.popmake-2875 h2,
.popmake-2875 .wpforms-title {
  text-align: center !important;
  font-family: 'Jost', sans-serif !important;
  font-weight: 700 !important;
  font-size: 32px !important;
  color: #1a1a1a !important;
  margin-bottom: 6px !important;
  text-transform: uppercase;
}

.popmake-2875 p {
  text-align: center !important;
  font-size: 15px !important;
  color: #333333 !important;
  margin-bottom: 20px;
}

/* --- Close button override --- */
.popmake-2875 .pum-close {
  background: transparent !important;
  color: #1a1a1a !important;
  font-size: 26px !important;
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  line-height: 1 !important;
}
.popmake-2875 .pum-close::before {
  content: "×";
}
/* =========================================================
   BANG ON REALTY – POPUP FORM AFTER “BASE STYLING ONLY”
   (affects ONLY #popmake-2875)
   ========================================================= */

/* --- 1. Inputs, selects, textarea – transparent underline --- */
#popmake-2875 input:not([type="checkbox"]):not([type="radio"]),
#popmake-2875 select,
#popmake-2875 textarea {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid #333 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 12px 6px !important;
  font-size: 15px !important;
  color: #1a1a1a !important;
  width: 100% !important;
}

/* --- 2. Phone flag wrapper – keep gradient visible --- 
#popmake-2875 .iti,
#popmake-2875 .iti__flag-container { background: transparent !important; }
*/
/* --- 3. Placeholder colour --- */
#popmake-2875 ::placeholder { color: #4a4a4a !important; opacity: 1; }

/* --- 4. Remove UL bullets / default margins --- */
#popmake-2875 ul.wpforms-list { list-style: none; margin: 0; padding: 0; }

/* --- 5. Checkbox label inline spacing --- */
#popmake-2875 .wpforms-field-checkbox label { margin-left: 6px; }

/* --- 6. Heading & subheading alignment --- */
#popmake-2875 h2,
#popmake-2875 .wpforms-title      { text-align: center !important; margin-bottom: 6px; }
#popmake-2875 p                   { text-align: center !important; margin-bottom: 20px; }

/* --- 7. Submit button – centred, max 260 px --- */
#popmake-2875 .wpforms-submit {
  display: block !important;
  width: auto !important;
  max-width: 260px !important;
  margin: 20px auto 0 !important;
  background: #1a1a1a !important;
  color: #fff !important;
  text-transform: uppercase;
  font-weight: 600;
  padding: 12px 24px !important;
  border-radius: 6px;
}

/* Full-width button on mobile */
@media (max-width:768px){
  #popmake-2875 .wpforms-submit { width: 100% !important; max-width: 100% !important; }
}

/* --- 8. Close button – simple × icon --- */
#popmake-2875 .pum-close{
  background: transparent !important;
  color:#1a1a1a !important;
  width:32px;height:32px;font-size:26px;line-height:1;
  padding:0 !important;text-align:center;
}
#popmake-2875 .pum-close::before{content:"×";}
/* =================================================
   POPUP FINAL TWEAKS  – 26 Jun 2025
   ================================================= */

/* 1.  Heading – force uppercase */
#popmake-2875 h2,
#popmake-2875 .pum-title { text-transform: uppercase !important; }

/* 2.  Close button – place neatly, show only “×”, hide the word CLOSE */
#popmake-2875 .pum-close {
  position: absolute !important;
  top: 14px;               /* inside the card */
  right: 14px;
  width: 32px;
  height: 32px;
  font-size: 24px;
  line-height: 24px;
  background: transparent !important;
  color: #1a1a1a !important;
  padding: 0 !important;
  text-align: center;
  border: none !important;
}

#popmake-2875 .pum-close::before { content: "×"; }

/* hide the default “CLOSE” word (still accessible to screen readers) */
#popmake-2875 .pum-close span { 
  font-size: 0 !important; 
  line-height: 0 !important; 
}

/* 3.  Sharp-edge card (remove rounded corners) */
#popmake-2875,
#popmake-2875 .pum-container,
#popmake-2875 .pum-content { border-radius: 0 !important; }
/* Add just below the previous tweaks */
#popmake-2875 h2 {
  font-size: clamp(22px, 2.2vw + 12px, 32px) !important;
  /* upper-bound 32 px, lower-bound 22 px, fluid in between */
}
/* ---------- CLOSE BUTTON FINAL CLEAN-UP ---------- */
#popmake-2875 .pum-close {
  color: transparent !important;        /* hides the literal word CLOSE   */
  overflow: hidden;                     /* prevent text from peeking out  */
}
#popmake-2875 .pum-close::before {
  content: "×";
  color: #1a1a1a;
  font-size: 26px;
  line-height: 32px;
  width: 32px;
  height: 32px;
  display: block;
  text-align: center;
}
/* --------------------------------------------------
   POPUP INPUT FOCUS / AUTOFILL – KEEP TRANSPARENT
   -------------------------------------------------- */
#popmake-2875 input:focus,
#popmake-2875 textarea:focus {
  background: transparent !important;
  outline: none;                     /* optional: removes blue outline */
}

/* Chrome / Edge / Safari autofill */
#popmake-2875 input:-webkit-autofill,
#popmake-2875 input:-webkit-autofill:focus,
#popmake-2875 textarea:-webkit-autofill,
#popmake-2875 textarea:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
  -webkit-text-fill-color: #1a1a1a !important;   /* keeps text readable */
}
/* =======================================================
   UNIVERSAL FORM PATCH – PHONE PADDING + AUTOFILL FIX
   Affects:
     • Popup  (#popmake-2875)
     • CTA forms (.cta-form wrapper)
     • Any WPForms input that carries the intl-tel-input flag
   ======================================================= */

/* 1 ▸ Phone field: push text past the 48-px flag box 
input[type="tel"].iti__tel-input,
.iti input[type="tel"],
.wpforms-container input[type="tel"] {
  padding-left: 100px !important;   flag-box = 48px; add a little air , changed to 100px
  box-sizing: border-box;
}
*/
/* 2 ▸ Autofill: keep transparent background on every form */
input:-webkit-autofill,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
  -webkit-text-fill-color: #1a1a1a !important;   /* preserve text colour */
  transition: background-color 9999s ease-in-out 0s;  /* Chrome hack */
}

/* 3 ▸ Optional visual cue: highlight active field with orange underline */
input:focus,
textarea:focus,
select:focus {
  border-bottom: 2px solid #f58634 !important;
  outline: none !important;
}
/* ====================================================
   PHONE LEFT-PADDING  +  CHECKBOX VALIDATION VISIBILITY
   ==================================================== */

/* 1 ▸ Phone field – visible digits 
.iti--allow-dropdown input.iti__tel-input,
input[type="tel"].iti__tel-input {
  padding-left: 72px !important;     flag (56px) + 16px air 
  box-sizing: border-box;
} */

/* 2 ▸ Checkbox row never disappears and shows error */
.wpforms-field-checkbox ul          { list-style:none;margin:0;padding:0; }
.wpforms-field-checkbox li          { display:flex;align-items:center;gap:6px; }
.wpforms-field-checkbox input[type="checkbox"] {
  position:static !important;       /* override WPForms hiding */
  width:16px;height:16px;margin:0;
}
.wpforms-field-checkbox.wpforms-error li {          /* red ring on error */
  outline:2px solid #FF4D4F;outline-offset:3px;
}
.wpforms-field-checkbox .wpforms-error {            /* error text */
  color:#FF4D4F;font-size:12px;margin-top:4px;
}

/* 3 ▸ Autofill always transparent */
input:-webkit-autofill,
input:-webkit-autofill:focus {
  -webkit-box-shadow:0 0 0 1000px transparent inset !important;
  -webkit-text-fill-color:#1a1a1a !important;
}

/* PHONE: beat inline text-indent as well as padding 
.iti input[type="tel"].iti__tel-input {
  padding-left: 72px !important;   
  text-indent: 0 !important;       
}*/
/* CHECKBOX: restore normal flow, show error text */
.wpforms-field-checkbox.wpforms-error li {          /* keep flex OFF */
  display:block !important;
  outline:2px solid #FF4D4F; outline-offset:3px;
}
.wpforms-field-checkbox.wpforms-error .wpforms-error{
  display:block !important;     /* error line visible */
  color:#FF4D4F; font-size:12px; margin-top:4px;
}

/*  PHONE DIGITS ALWAYS VISIBLE — works for any type/text & any class stack 
.wpforms-field input[name*="phone"]:not([type="hidden"]),
input.wpforms-smart-phone-field,
input[data-rule-phonefield] {
  padding-left: 72px !important;   
  text-indent: 0 !important;       
  box-sizing: border-box;
} */
/* CHECKBOX VISIBILITY & ERROR MESSAGE ----------------------------------- */
.wpforms-field-checkbox { position: relative; }

/* normal state: inline layout */
.wpforms-field-checkbox li {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 2px 0;
}

/* input box always rendered */
.wpforms-field-checkbox input[type="checkbox"]{
  position: static !important;   /* don’t let WPForms absolute-position it */
  width: 16px; height: 16px; margin: 0;
}

/* error state — outline + message below */
.wpforms-field-checkbox.wpforms-error li{
  display: flex !important;
  outline: 2px solid #FF4D4F;
  outline-offset: 3px;
}
.wpforms-field-checkbox .wpforms-error{
  display: block !important;
  color: #FF4D4F;
  font-size: 12px;
  margin: 4px 0 0 24px;          /* indent so text aligns with label */
}
/* === PHONE FIELD: FINAL FIX ====================================== 
input.wpforms-smart-phone-field {
  padding-left: 80px !important;     flag 56 px + breathing room          
  text-indent: 0 !important;        cancels plugin’s inline indentation 
  box-sizing: border-box;
}
*/

/* === RED CHECKBOX TICK (cross-browser) =========================== */
input[type="checkbox"] {
  accent-color: #FF4D4F;            /* modern browsers */
}

/* expand flag box so number never overlaps */
.iti__flag-container { width: 56px !important; }

/* Widen the flag container so the dial code never overlaps   */
.iti__flag-container     { width: 64px !important; }

/* =========================================================
   FINAL PHONE + CHECKBOX PATCH   (BangOn Realty)   26-Jun-2025
   ========================================================= */

/* 2 ▸  Checkbox – red tick & visible on error */
input[type="checkbox"]              { accent-color:#FF4D4F; }

.wpforms-field-checkbox input[type="checkbox"]{ position:static !important; }
.wpforms-field-checkbox.wpforms-error li      { outline:2px solid #FF4D4F; outline-offset:3px; }
.wpforms-field-checkbox .wpforms-error        { display:block !important; color:#FF4D4F; font-size:12px; margin-top:4px; }


/* checkbox tick colour */
input[type="checkbox"] { accent-color:#FF4D4F; }

/* checkbox error outline */
.wpforms-field-checkbox input[type="checkbox"]{ position:static !important; }
.wpforms-field-checkbox.wpforms-error li      { outline:2px solid #FF4D4F; outline-offset:3px; }
.wpforms-field-checkbox .wpforms-error        { display:block !important; color:#FF4D4F; font-size:12px; margin-top:4px; }

/* ———————————————————————————————
   PHONE PADDING – fine-tuned per location
   ———————————————————————————————*/

/* 1 ▸ POPUP (adjust IDs if yours differ) */
#popmake-2875 .iti input,

/* 3 ▸ Make the flag box wide enough everywhere */
.iti__flag-container    { width: 50px !important; }

/* === FINAL PHONE FIELD ALIGNMENT (27-Jun-2025) === */
/* widen the flag zone everywhere */
.iti__flag-container { width: 56px !important; }

/* 1 ▸ Popup (#popmake-2875) */
#popmake-2875 .iti input,
#popmake-2875 input.wpforms-smart-phone-field {
  padding-left: 84px !important;   /* 56-px flag + 28-px air */
  text-indent: 0 !important;
}

/* 2 ▸ Project page Top & Bottom CTA */
.project-enquiry-form-top-container .iti input,
.project-enquiry-form-top-container input.wpforms-smart-phone-field,
.project-bottom-cta-section .iti input,
.project-bottom-cta-section input.wpforms-smart-phone-field {
  padding-left: 50px !important;   /* 56-px flag + 4-px air  */
  text-indent: 0 !important;
}

/* universal safety */
.iti input,
input.wpforms-smart-phone-field { box-sizing: border-box; text-indent:0!important; }
/* === POPUP PHONE FIELD – FINAL LEFT-PADDING PATCH (29-Jun-2025) === */
#popmake-2875 input[type="tel"].iti__tel-input,
#popmake-2875 input[type="tel"].wpforms-smart-phone-field,
#popmake-2875 .iti--allow-dropdown input.iti__tel-input {
    /* 56 px flag zone  + 16 px breathing room */
    padding-left: 50px !important; /*changed from 72*/
    text-indent: 0 !important;      /* kill any JS inline indent */
    box-sizing: border-box;
}

/* === POPUP OVERLAY & CARD SHADOW TWEAK – 29-Jun-25 === */

/* 1 ▸ Dim the page behind the popup */
.pum-overlay {                               /* overlay covers 100 % of viewport */
  background: rgba(0, 0, 0, 0.40) !important;/* 40 % black tint                 */
  backdrop-filter: blur(3px);                /* softens background              */
}

/* 2 ▸ Give the orange card a lift */
#popmake-2875,
#popmake-2875 .pum-container,
#popmake-2875 .pum-content {
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.25) !important;
  /* optional: if you’d like razor-sharp corners remove the radius here */
  /* border-radius: 0 !important; */
}
/* — remove any residual shadow on the popup form — */
#popmake-2875,
#popmake-2875 .pum-container,
#popmake-2875 .pum-content {
  box-shadow: none !important;
}

/* — flatten the outer wrapper & keep interior spacing — */
#popmake-2875 {                     /* outer wrapper */
  padding: 0 !important;            /* no more frame */
}

#popmake-2875 .pum-container,
#popmake-2875 .pum-content {
  padding: 38px 28px !important;    /* restore spacing */
  width: 100% !important;
  max-width: none !important;
}

/* Read More Section in Home Page- Redirecting to About Page*/
.read-more-link {
  font-size: inherit;
  font-family: inherit;
  font-weight: inherit;
  color: inherit;
  text-decoration: none;
  transition: color 0.3s ease, border-bottom 0.3s ease;
  border-bottom: 1px solid transparent;
}

.read-more-link:hover {
  color: #F57F17; /* or your brand highlight color */
  border-bottom: 1px solid #F57F17;
}


/* Social Media Icons Style in Contact Us section*/
/* Social icon container */
.bor-social {
  display: flex;
  justify-content: center; /* Options: flex-start | center | flex-end */
  align-items: center;
  gap: 15px;
  margin-top: 10px;
}

/* Icon base style */
.bor-social a {
  font-size: 20px;
  text-decoration: none;
  transition: transform 0.3s ease;
}

/* Individual brand colors */
.bor-social a.facebook  { color: #1877F2; }  /* Facebook Blue */
.bor-social a.linkedin  { color: #0A66C2; }  /* LinkedIn Blue */
.bor-social a.instagram { color: #E4405F; }  /* Instagram Pink */
.bor-social a.youtube   { color: #FF0000; }  /* YouTube Red */

/* Hover animation (subtle enlarge) */
.bor-social a:hover {
  transform: scale(1.15);
}

/* Optional: Make icons inside circular backgrounds */
.bor-social i {
  background: #fff;
  border-radius: 50%;
  padding: 6px;
}

/* ==================================================== 
Home Page Featured/Directory card height normalization 
==================================================== */
.project-grid { align-items: stretch; }

.project-card { height: 100%; }
.project-card > a { display: flex; flex-direction: column; height: 100%; }

.card-content { display: flex; flex-direction: column; flex: 1 1 auto; }

/* Keep meta tidy: clamp to 2 lines, consistent height */
.card-meta {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.25em * 2); /* reserve space so CTAs align */
  line-height: 1.25;
}

/* Push CTA to bottom so all cards align */
.card-cta { margin-top: auto; }

/* ===============================================
================= Thank You (CRO) =================
   Hero with optional image, centered content,
   consistent slider, and WA nudge
=============================================== */

/* ---------- HERO / CONFIRMATION ---------- */
.bor-thanks-hero {
  padding: 56px 16px 24px;
}
.bor-thanks-hero.light {
  background: #f7f7f9;            /* lighter, friendly surface if no featured image */
}
.bor-thanks-hero.with-bg {
  /* Uses inline style variable: --hero-bg:url('...') */
  background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.25)), var(--hero-bg) center/cover no-repeat;
}

.bor-thanks-card{
  max-width: 900px; width: 100%; margin: 0 auto;
  background: #121212; color: #fff;
  border-radius: 18px; padding: 28px 24px;
  text-align: center;
  box-shadow: 0 12px 34px rgba(0,0,0,.25);
}
.bor-thanks-card h1{
  color: #fff; font-size: 28px; line-height: 1.2; margin: 0 0 10px;
}
.bor-thanks-card p{
  color: #eaeaea; margin: 0 0 16px;
}
.bor-emoji{ font-size: 32px; margin-bottom: 6px; }

/* reassurance list */
.bor-next-steps{
  list-style: disc; text-align: left;
  max-width: 560px; margin: 10px auto 0; padding-left: 18px;
  color: #d9d9d9;
}

/* ---------- BUTTONS (kept for slider section only) ---------- */
.btn-primary{
  display:inline-block; padding:12px 18px; border-radius:999px; font-weight:600; text-decoration:none;
  background:linear-gradient(90deg,#ff7a00,#ff9a3d); color:#111;
  transition: filter .2s ease;
}
.btn-primary:hover{ filter:brightness(1.05); }

.btn-outline{
  display:inline-block; padding:12px 18px; border-radius:999px; font-weight:600; text-decoration:none;
  border:1.5px solid #ff8a1f; color:#ff8a1f; transition: background .2s ease, color .2s ease;
}
.btn-outline:hover{ background:#ff8a1f; color:#111; }

/* ---------- SIMILAR PROJECTS (horizontal scroller) ---------- */
.bor-similar-wrap{ padding: 26px 16px 48px; }
.bor-similar-title{
  font-size: 24px; text-align: center; margin: 0 0 16px;
}

/* Scope slider tweaks so other galleries remain unaffected */
.bor-similar .gallery-grid{
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 6px 4px 12px;
  -webkit-overflow-scrolling: touch;
}
.bor-similar .gallery-item{
  flex: 0 0 300px;                 /* card width; adjust if your card is wider */
  scroll-snap-align: start;
}
.bor-similar .gallery-grid::-webkit-scrollbar{ height: 8px; }
.bor-similar .gallery-grid::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,.15); border-radius: 4px;
}

.bor-similar-cta{
  display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:16px;
}
.bor-similar-empty{ text-align:center; opacity:.85; }

/* Bridge: ensure thank-you slider gets the same card styles */
.bor-similar .project-card { display: block; } /* typical base */

/* --- Thank-You slider — unclip cards & align content (scoped) --- */

/* Support both: 
   A) <section class="bor-similar"><div class="gallery-wrapper">...</div></section>
   B) <div class="gallery-wrapper bor-similar">...</div>  (your current DOM) */
.bor-similar .gallery-wrapper,
.bor-similar.gallery-wrapper {
  overflow: visible;
}

.bor-similar .gallery-item,
.bor-similar.gallery-wrapper .gallery-item {
  overflow: visible;
  display: block;
}

/* Ensure the link wraps card content vertically so CTA pins to bottom */
.bor-similar .project-card > a,
.bor-similar.gallery-wrapper .project-card > a {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Title clamp + reserved space => meta row baseline aligns across cards */
.bor-similar .card-title,
.bor-similar.gallery-wrapper .card-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  line-height: 1.3;
  min-height: calc(1.3em * 2);
  margin-bottom: 10px;
}

/* Meta: keep two lines of footprint for alignment */
.bor-similar .card-meta,
.bor-similar.gallery-wrapper .card-meta {
  line-height: 1.25;
  min-height: calc(1.25em * 2);
}

/* CTA pinned to bottom; avoid wrapping in narrow widths */
.bor-similar .card-cta,
.bor-similar.gallery-wrapper .card-cta {
  margin-top: auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Thank-You slider: let cards expand naturally */
.bor-similar .gallery-item,
.bor-similar.gallery-wrapper .gallery-item {
  height: auto !important;
  overflow: visible !important;
  display: block;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1024px){
  .bor-similar .gallery-item{ flex-basis: 280px; }
}
@media (max-width: 768px){
  .bor-thanks-card{ padding: 22px 16px; }
  .bor-thanks-card h1{ font-size: 24px; }
  .bor-similar .gallery-item{ flex-basis: 260px; }
}

/* ---------- ACCESSIBILITY / MOTION ---------- */
@media (prefers-reduced-motion: reduce){
  .bor-wa-nudge{ transition: none; }
  .btn-primary, .btn-outline{ transition: none; }
}
/* ================================================================
===sliders positioning in thankyou and project page================
====================hero section of thankyou design ===============
===================================================================*/

/* === TY + Single: move slider arrows out of the cards === */
.bor-similar-wrap .gallery-wrapper,
.single-project .gallery-wrapper {
  /* add horizontal gutters for arrows so they don't overlap cards */
  padding: 20px 56px !important; /* 56px ≈ arrow size + gap */
}

.bor-similar-wrap .gallery-arrow.left,
.single-project .gallery-arrow.left { left: 8px !important; }

.bor-similar-wrap .gallery-arrow.right,
.single-project .gallery-arrow.right { right: 8px !important; }

@media (max-width: 768px) {
  .bor-similar-wrap .gallery-wrapper,
  .single-project .gallery-wrapper { padding: 16px 44px !important; }

  .bor-similar-wrap .gallery-arrow,
  .single-project .gallery-arrow {
    width: 36px; height: 36px; font-size: 18px;
  }
}

/* === TY only: remove top radius on project cards/images === */
.bor-similar-wrap .gallery-item {
  border-radius: 0 0 10px 10px !important;   /* keep bottom soft, top sharp */
}
.bor-similar-wrap .gallery-item img {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* === Single-project gallery: same sharp-top look (optional) === */
.single-project .gallery-item {
  border-radius: 0 0 10px 10px !important;
}
.single-project .gallery-item img {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}
/* === Single-project gallery (final) === */
.single-project .project-gallery .gallery-item,
.single-project .gallery-grid .gallery-item{
  height: 300px;                 /* tile height */
  padding: 0 !important;
  display: block;
}
@media (min-width:1200px){
  .single-project .project-gallery .gallery-item,
  .single-project .gallery-grid .gallery-item{
    height: 320px;
  }
}

.single-project .project-gallery .gallery-item > a,
.single-project .gallery-grid .gallery-item > a{
  display:block; width:100%; height:100%; line-height:0;
}

.single-project .project-gallery .gallery-item > a img,
.single-project .gallery-grid .gallery-item > a img{
  width:100%;
  height:100% !important;   /* beats earlier height:auto */
  object-fit:cover;         /* crops out the orange matte inside the image */
  display:block;
  border:0;
  border-radius:inherit;
}

/* === THANK YOU: Hero (dual background) === */
.bor-thanks-hero {
  position: relative;
  padding: 56px 24px;
  background-color: var(--hero-mobile-bg, #FFF3E5); /* mobile solid */
  background-image: none;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  border-radius: 0;
}
.bor-thanks-hero::before { content: none !important; } /* no overlay */

/* desktop: use the image */
@media (min-width: 768px) {
  .bor-thanks-hero.has-desktop-img {
    background-image: var(--hero-bg);
  }
}

/* Copy block — match previous centered look */
.bor-thanks-card {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  max-width: 980px;
  margin: 0 auto;
  color: #fff;
  text-align: center;
  padding: 28px 24px;
}
.bor-thanks-card h1 {
  margin: 0 0 10px;
  font-weight: 700;
  font-size: clamp(26px, 3vw, 40px);
}
.bor-thanks-card p { margin: 0 0 8px; opacity: .95; }
.bor-emoji { display: inline-block; font-size: 32px; margin-bottom: 8px; }
.bor-next-steps { margin: 16px 0 0; padding: 0; }
.bor-next-steps li { margin: 8px 0; }

/* TY hero: align desktop image to bottom-center */
@media (min-width: 768px){
  .bor-thanks-hero.has-desktop-img{
    background-position: center bottom !important;
  }
}
.bor-similar-title{
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 800;
  text-align: center;
}
/* Center every bit of copy in the hero */
.bor-thanks-card{ text-align:center; }
.bor-next-steps{
  list-style-position: inside;
  text-align: center;
  margin: 16px auto 0;
  padding: 0;
  display: inline-block; /* shrinks to content so centering looks neat */
}
.bor-next-steps li{ margin: 8px 0; }
/* TY title + meta line */
.ty-title{ font-weight:700; font-size:clamp(26px,3vw,40px); margin:0 0 4px; }
.ty-meta{ font-weight:600; font-size:clamp(18px,2.1vw,22px); margin:2px 0 10px; opacity:.95; }
.ty-sub{ opacity:.95; }

/* TY bullets: center the block, keep bullets aligned */
.bor-next-steps{
  display: inline-block;    /* lets us center the whole list */
  margin: 16px auto 0;      /* centers the block */
  padding-left: 1.1rem;     /* room for the bullet */
  text-align: left;         /* text in each line stays aligned */
  list-style: disc;         /* keep default bullet */
}
.bor-next-steps li{ margin: 6px 0; }

/* TY hero – focus skyline lower */
@media (min-width:768px){
  section.bor-thanks-hero.has-desktop-img{
    /* 98% = nudged down; try 95–99% to taste */
    background-position: 50% 98% !important;
  }
}

/* TY hero – stronger white copy */
.bor-thanks-card,
.bor-thanks-card * { color:#fff !important; }

.ty-title{ font-weight:800; }     /* “Thank you” */
.ty-meta{  font-weight:700; }     /* “Your enquiry is in!” */
.bor-thanks-card p{ font-weight:500; }  /* body/sub line */
.bor-next-steps li{ font-weight:600; }  /* if you keep bullets */


/* Equalize TY title and SIMILAR PROJECTS size */
.ty-title{
  font-size: clamp(26px, 2.6vw, 36px);  /* was bigger */
}
.bor-similar-title{
  font-size: clamp(26px, 2.6vw, 36px);  /* was smaller */
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 800;
  text-align: center;
}

@media (min-width:768px){
  .bor-thanks-hero{ padding-top: 96px; } /* was 56px */
}

/* Thank You: centered split underline under the heading */
.bor-similar-wrap{ 
  text-align: center;                 /* ensures the inline-block H2 centers */
}

.bor-similar-wrap .bor-similar-title{
  position: relative;
  display: inline-block;              /* shrink to text so it can center */
  margin: 0 auto 10px;
  padding-bottom: 6px;                /* keeps line close to the letters */
  letter-spacing: .04em;
}

/* two thin halves + small middle gap; metallic orange */
/* Thank You: simple, centered underline for the section heading */
.bor-similar-wrap{
  text-align: center;                 /* keep the heading centered */
}

.bor-similar-wrap .bor-similar-title{
  display: inline-block;              /* shrink to text */
  margin: 0 auto 14px;
  /* Fallback (older browsers): border-bottom underline */
  border-bottom: 3px solid #ffb067;   /* lighter orange */
  padding-bottom: 6px;                /* keeps line close to letters */
}

/* Modern enhancement: use real text underline when supported */
@supports (text-decoration-thickness: 3px){
  .bor-similar-wrap .bor-similar-title{
    border-bottom: none;
    text-decoration-line: underline;
    text-decoration-color: #ff8f3a;   /* darker orange to match theme */
    text-decoration-thickness: 3px;
    text-underline-offset: 6px;       /* distance from letters */
  }
}

/* left segment (gap controls) */
.bor-similar-wrap .bor-similar-title::before{ 
  right:50%; 
  margin-right:4px; 
}

/* right segment */
.bor-similar-wrap .bor-similar-title::after{ 
  left:50%;  
  margin-left:4px; 
}

/* === Single Project – Gallery (square corners, hover shadow only) === */
.single-project .project-gallery .gallery-wrapper{ position:relative; }

.single-project .project-gallery .gallery-grid{
  display:flex; gap:28px;
  overflow-x:auto; scroll-snap-type:x mandatory;
  padding:6px 0 18px;              /* spacing under tiles */
  -webkit-overflow-scrolling: touch;
}
.single-project .project-gallery .gallery-grid::-webkit-scrollbar{ height:8px; }
.single-project .project-gallery .gallery-grid::-webkit-scrollbar-thumb{
  background:#e5e5e5; border-radius:4px;
}

/* Tile — rounded corners, hover shadow only */
.single-project .project-gallery .gallery-item{
  flex:0 0 auto;
  width:min(360px, 82vw);
  height:320px;
  border-radius:12px !important;       /* ✅ give a valid radius with units */
  background:#fff;
  box-shadow:none;                      /* no shadow by default */
  scroll-snap-align:start;
  padding:0 !important;
  overflow:hidden !important;           /* ✅ clips the image to the rounded corners */
}
@media (max-width:640px){
  .single-project .project-gallery .gallery-item{ height:240px; }
}

/* Hover shadow on the card (optional) */
.single-project .project-gallery .gallery-item:hover{
  box-shadow:0 6px 18px rgba(0,0,0,.08);
}

/* Image fill + hover */
.single-project .project-gallery .gallery-item img{
  width:100%; height:100%;
  object-fit:cover; display:block;
  cursor:pointer;
  border-radius:inherit !important;     /* ✅ match the card’s radius on all 4 corners */
  transition:transform .25s ease, box-shadow .25s ease;
}
.single-project .project-gallery .gallery-item:hover img{
  transform:scale(1.02);                /* subtle lift on hover */
}

/* Hover shadow (tile only on hover) */
.single-project .project-gallery .gallery-item:hover{
  box-shadow:0 6px 18px rgba(0,0,0,.08);
}

/* Keyboard focus ring (square) */
.single-project .project-gallery .gallery-item img:focus-visible{
  outline:none;
  border-radius:inherit;
  box-shadow:0 0 0 3px #ff7a1a;
}

/* Arrows */
.single-project .project-gallery .gallery-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:10px;
  background:#212121; color:#fff; border:0;
  display:grid; place-items:center;
  box-shadow:0 6px 18px rgba(0,0,0,.18);
  z-index:2; opacity:.9;
}
.single-project .project-gallery .gallery-arrow.left{ left:-8px; }
.single-project .project-gallery .gallery-arrow.right{ right:-8px; }
.single-project .project-gallery .gallery-arrow:hover{ opacity:1; }

/* Tighter spacing before Walkthrough */
.single-project #project-walkthrough{ margin-top:36px; }

/*===================================================================
============================BLOGS====================================
====================================================================*/
/* =========================================================
   BOR • BLOG v7 (clean install)
   Scope: Blog archive (list) + Single blog posts
   Safe: Excludes Project Directory archive + Single Project
========================================================= */

/* ---- knobs you can tweak ---- */
:root{
  --bor-container: 1280px;                 /* match single-project width */
  --bor-pad-x: 12px;                       /* inner side padding */
  --bor-header-offset: 96px;               /* space under transparent header */
  --bor-archive-thumb-w: 450px;            /* left image column width (280–360) */
  --bor-archive-thumb-h: 210px;            /* left image height  (190–240)   */
  --bor-hero-h: clamp(320px, 48vh, 620px); /* single-post hero ≈45–50% */
  --bor-archive-thumb-x: 58%; 
  --bor-img-pad-x: 16px;  /* left/right gap around the image */
}

/* ---------- base container & header offset ---------- */
body.blog .site-content,
body.archive:not(.post-type-archive-project) .site-content,
body.single-post .site-content{
  padding-bottom: 24px;
  min-height: 50vh;
}
body.blog.ast-theme-transparent-header .site-content,
body.archive.ast-theme-transparent-header .site-content{
  padding-top: var(--bor-header-offset) !important;
}
body.blog .site-content > .ast-container,
body.archive:not(.post-type-archive-project) .site-content > .ast-container,
body.single-post .site-content > .ast-container{
  max-width: var(--bor-container) !important;
  padding-left: var(--bor-pad-x) !important;
  padding-right: var(--bor-pad-x) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* =====================================================
   ARCHIVE (list) — one canonical grid, no overlap
===================================================== */

/* 0) Each post spans full row (prevents skinny columns) */
body.blog .ast-row > article,
body.archive:not(.post-type-archive-project) .ast-row > article{
  flex: 0 0 100% !important;
  max-width: 100% !important;
}

/* 1) Pick the inner wrapper and make it a 2-col grid */
body.blog .ast-article-post .ast-article-inner,
body.archive:not(.post-type-archive-project) .ast-article-post .ast-article-inner,
body.blog .ast-post-format.blog-layout-5 .ast-article-inner,
body.archive:not(.post-type-archive-project) .ast-post-format.blog-layout-5 .ast-article-inner{
  display: grid !important;
  grid-template-columns: var(--bor-archive-thumb-w) 1fr !important;
  column-gap: 12px !important;        /* was gap: 18px */
  row-gap: 18px !important;            /* keep your vertical spacing the same */
  align-items: start !important;
  padding: 0 !important;
}

/* 2) Default all direct children to the RIGHT column */
body.blog .ast-article-post .ast-article-inner > *,
body.archive:not(.post-type-archive-project) .ast-article-post .ast-article-inner > *,
body.blog .ast-post-format.blog-layout-5 .ast-article-inner > *,
body.archive:not(.post-type-archive-project) .ast-post-format.blog-layout-5 .ast-article-inner > *{
  grid-column: 2 !important;
  min-width: 0;
}

/* 3) Send ONLY the featured image wrapper to the LEFT column */
body.blog .ast-article-post .ast-article-inner > .ast-blog-featured-section,
body.archive:not(.post-type-archive-project) .ast-article-post .ast-article-inner > .ast-blog-featured-section,
body.blog .ast-post-format.blog-layout-5 .ast-article-inner > .ast-blog-featured-section,
body.archive:not(.post-type-archive-project) .ast-post-format.blog-layout-5 .ast-article-inner > .ast-blog-featured-section{
  grid-column: 1 !important;
  margin: 0 !important;
  float: none !important;
  width: auto !important;               /* ← was 100%; allows horizontal centering */
  max-width: 100% !important;
  justify-self: center !important;      /* ← centers the whole image block horizontally */
  line-height: 0;
}

/* 3a) Neutralize Astra width helpers ONLY inside the card */
body.blog .ast-article-post .ast-article-inner .ast-blog-featured-section[class*="ast-width-"],
body.archive:not(.post-type-archive-project) .ast-article-post .ast-article-inner .ast-blog-featured-section[class*="ast-width-"],
body.blog .ast-post-format.blog-layout-5 .ast-article-inner .ast-blog-featured-section[class*="ast-width-"],
body.archive:not(.post-type-archive-project) .ast-post-format.blog-layout-5 .ast-article-inner .ast-blog-featured-section[class*="ast-width-"]{
  width: 100% !important;
  max-width: 100% !important;
  flex: none !important;
}

/* 5) Right column spacing + simple “Read more” link */
body.blog .ast-article-post .ast-article-inner > header,
body.blog .ast-article-post .ast-article-inner > .ast-blog-contain,
body.blog .ast-article-post .ast-article-inner > .entry-content,
body.archive:not(.post-type-archive-project) .ast-article-post .ast-article-inner > header,
body.archive:not(.post-type-archive-project) .ast-article-post .ast-article-inner > .ast-blog-contain,
body.archive:not(.post-type-archive-project) .ast-article-post .ast-article-inner > .entry-content{
  padding: 16px !important;
}
body.blog .read-more a,
body.archive:not(.post-type-archive-project) .read-more a,
body.blog .more-link,
body.archive:not(.post-type-archive-project) .more-link{
  background: none !important; border: 0 !important; padding: 0 !important;
  text-decoration: underline !important; color: #ff5200 !important; font-weight: 600;
}

/* 6) Optional card chrome (looks like your current UI) */
body.blog .ast-article-post,
body.archive:not(.post-type-archive-project) .ast-article-post{
  background:#fff; border-radius:16px; box-shadow:0 8px 24px rgba(0,0,0,.08); overflow:hidden;
}

/* 7) Mobile: stack image over text */
@media (max-width: 768px){
  body.blog .ast-article-post .ast-article-inner,
  body.archive:not(.post-type-archive-project) .ast-article-post .ast-article-inner,
  body.blog .ast-post-format.blog-layout-5 .ast-article-inner,
  body.archive:not(.post-type-archive-project) .ast-post-format.blog-layout-5 .ast-article-inner{
    grid-template-columns: 1fr !important;
  }
  body.blog .ast-article-post .ast-article-inner > *,
  body.archive:not(.post-type-archive-project) .ast-article-post .ast-article-inner > *,
  body.blog .ast-post-format.blog-layout-5 .ast-article-inner > *,
  body.archive:not(.post-type-archive-project) .ast-post-format.blog-layout-5 .ast-article-inner > *{
    grid-column: auto !important;
  }
}

/* =====================================================
   SINGLE BLOG — full-bleed hero container
   Applies only to single blog posts
===================================================== */
body.single-post .ast-single-post-featured-section,
body.single-post .post-thumb,
body.single-post .post-thumbnail,
body.single-post .ast-article-image-container--wide,
body.single-post .entry-header .ast-blog-featured-section,
body.single-post .entry-header .post-thumbnail,
body.single-post .entry-header .post-thumb-img-content {
  width: 100vw !important;
  max-width: 100vw !important;
  height: var(--bor-hero-h, 48vh) !important;   /* adjust globally via this var */
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  overflow: hidden !important;
  border-radius: 0 !important;
}

/* =====================================================
   SINGLE BLOG — featured image fills the hero
===================================================== */
body.single-post .ast-single-post-featured-section img,
body.single-post .post-thumb img,
body.single-post .post-thumbnail img,
body.single-post .ast-article-image-container--wide img,
body.single-post .entry-header img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;           /* 👈 key: always fills */
  object-position: center center !important;
  display: block !important;
}


/* Title truly flush-left (kill theme indent) */
body.single-post .entry-header,
body.single-post .entry-title{
  padding-left: 0 !important; margin-left: 0 !important; text-align: left !important;
}

/* Headings scale (H2/H3 not bold; small step above body) */
body.single-post .entry-content h2,
body.single-post .entry-content h3{
  font-weight: 400 !important;
  font-size: 1.167em !important; /* if body ≈12, this ≈14 */
  line-height: 1.35; margin: 18px 0 8px;
}
body.single-post .entry-title{ font-size: 1.777em !important; font-weight:700 !important; line-height:1.2; margin:14px 0 12px !important; }

/* Body spacing */
body.single-post .entry-content p{ margin: 0 0 16px; }
body.single-post .entry-content ul,
body.single-post .entry-content ol{ margin: 0 0 16px 20px; padding: 0; }
body.single-post .entry-content li{ margin: 4px 0; }

/* ---------- SAFETY: never touch Projects ---------- */
.post-type-archive-project .site-content,
.single-project .site-content{ /* intentionally blank */ }

/* BOR • Blog v7.0.1 — let archive text use the full right column */
body.blog .ast-article-post .ast-article-inner > :not(.ast-blog-featured-section),
body.archive:not(.post-type-archive-project) .ast-article-post .ast-article-inner > :not(.ast-blog-featured-section){
  max-width: none !important;     /* kill theme cap */
  width: 100% !important;         /* stretch to full grid column */
}

body.blog .ast-article-post .entry-title,
body.archive:not(.post-type-archive-project) .ast-article-post .entry-title{
  max-width: none !important;     /* ensure title isn’t constrained */
}

/* === BOR • BLOG — LINTER-SAFE CANONICAL THUMBNAIL CROP (ARCHIVE ONLY) === */
/* 1) Make the crop window on whichever wrapper Astra uses */
body.blog .ast-article-post .post-thumb-img-content,
body.blog .ast-article-post .post-thumb,
body.archive:not(.post-type-archive-project) .ast-article-post .post-thumb-img-content,
body.archive:not(.post-type-archive-project) .ast-article-post .post-thumb {
  height: var(--bor-archive-thumb-h) !important;   /* e.g., 210px */
  position: relative !important;
  overflow: hidden !important;
  border-radius: 10px;
  line-height: 0;
}

/* 2) Ensure the anchor fills the crop window */
body.blog .ast-article-post .post-thumb-img-content > a,
body.blog .ast-article-post .post-thumb > a,
body.archive:not(.post-type-archive-project) .ast-article-post .post-thumb-img-content > a,
body.archive:not(.post-type-archive-project) .ast-article-post .post-thumb > a {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

/* 3) Center & cover the actual image (single, consistent strategy) */
body.blog .ast-article-post .post-thumb-img-content img,
body.blog .ast-article-post .post-thumb img,
body.archive:not(.post-type-archive-project) .ast-article-post .post-thumb-img-content img,
body.archive:not(.post-type-archive-project) .ast-article-post .post-thumb img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: var(--bor-archive-thumb-x) 50% !important;
  position: static !important;     /* avoid absolute/translate conflicts */
  transform: none !important;      /* neutralize theme hover origin */
}

/* 4) Vertically center ONLY the thumbnail column in the row */
body.blog .ast-article-post .ast-article-inner > .ast-blog-featured-section,
body.blog .ast-article-post .ast-article-inner > .ast-post-featured-section,
body.archive:not(.post-type-archive-project) .ast-article-post .ast-article-inner > .ast-blog-featured-section,
body.archive:not(.post-type-archive-project) .ast-article-post .ast-article-inner > .ast-post-featured-section {
  align-self: center !important;
}

body.blog .ast-article-post figure.post-thumb,
body.archive:not(.post-type-archive-project) .ast-article-post figure.post-thumb { 
  margin:0 !important; 
}

/* BLOG ARCHIVE: add left/right padding inside the image lane */
body.blog .ast-article-post .ast-article-inner > .ast-blog-featured-section,
body.blog .ast-article-post .ast-article-inner > .ast-post-featured-section,
body.archive:not(.post-type-archive-project) .ast-article-post .ast-article-inner > .ast-blog-featured-section,
body.archive:not(.post-type-archive-project) .ast-article-post .ast-article-inner > .ast-post-featured-section{
  box-sizing: border-box !important;
  padding-left: var(--bor-img-pad-x) !important;
  padding-right: var(--bor-img-pad-x) !important;
  width: 100% !important;              /* keep filling the left grid track */
  max-width: 100% !important;
  /* optional: if you still have justify-self:center somewhere, neutralize it: */
  justify-self: stretch !important;
}

@media (max-width:768px){
  body.blog .ast-article-post .ast-article-inner > .ast-blog-featured-section,
  body.blog .ast-article-post .ast-article-inner > .ast-post-featured-section,
  body.archive:not(.post-type-archive-project) .ast-article-post .ast-article-inner > .ast-blog-featured-section,
  body.archive:not(.post-type-archive-project) .ast-article-post .ast-article-inner > .ast-post-featured-section {
    align-self:start !important;
  }
}

/* ============================
   Paragraph / Line Killer (scoped)
   Scope: single blog posts, blog archive (post cards), Privacy Policy (ID 2624)
   ============================ */

/* 1) Single blog posts (inside content only) */
body.single-post .entry-content p{
  border: 0 !important;
  box-shadow: none !important;
  background-image: none !important;
  padding-bottom: 0 !important;
}
body.single-post .entry-content p::after{ content: none !important; }
body.single-post .entry-content hr,
body.single-post .entry-content .wp-block-separator{
  display: none !important; border: 0 !important; height: 0 !important; margin: 0 !important;
}

/* 2) Blog archive cards (Astra) — exclude Project archive */
body.blog .ast-article-post .entry-content p,
body.blog .ast-article-post .ast-blog-contain p,
body.archive:not(.post-type-archive-project) .ast-article-post .entry-content p,
body.archive:not(.post-type-archive-project) .ast-article-post .ast-blog-contain p{
  border: 0 !important;
  box-shadow: none !important;
  background-image: none !important;
  padding-bottom: 0 !important;
}
body.blog .ast-article-post .entry-content p::after,
body.blog .ast-article-post .ast-blog-contain p::after,
body.archive:not(.post-type-archive-project) .ast-article-post .entry-content p::after,
body.archive:not(.post-type-archive-project) .ast-article-post .ast-blog-contain p::after{
  content: none !important;
}
body.blog .ast-article-post .entry-content hr,
body.blog .ast-article-post .entry-content .wp-block-separator,
body.archive:not(.post-type-archive-project) .ast-article-post .entry-content hr,
body.archive:not(.post-type-archive-project) .ast-article-post .entry-content .wp-block-separator{
  display: none !important; border: 0 !important; height: 0 !important; margin: 0 !important;
}

/* 3) Privacy Policy (Page ID 2624) — Elementor + core */
body.page-id-2624 .elementor p,
body.page-id-2624 .elementor .elementor-widget-text-editor p,
body.page-id-2624 .elementor .elementor-widget-theme-post-content p,
body.page-id-2624 .entry-content p{
  border: 0 !important;
  box-shadow: none !important;
  background-image: none !important;
  padding-bottom: 0 !important;
}
body.page-id-2624 .elementor p::after,
body.page-id-2624 .entry-content p::after{ content: none !important; }
body.page-id-2624 .elementor .elementor-widget-divider .elementor-divider,
body.page-id-2624 hr,
body.page-id-2624 .wp-block-separator{
  display: none !important; border: 0 !important; height: 0 !important; margin: 0 !important;
}

/* ===================================================================
   ===================================================================
         PROJECT DIRECTORY - BLUEPRINT v1.3 - FINAL STYLES
   ===================================================================
   ===================================================================*/

/* --- 1. CORE LAYOUT & HERO --- */
.post-type-archive-project .entry-header { display: none; }
.project-directory-hero {
    position: relative; width: 100vw; height: 50vh; min-height: 400px;
    margin-left: calc(50% - 50vw); display: flex;
    align-items: center; justify-content: center; padding: 20px;
}
.project-directory-hero .hero-background {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover; background-position: center bottom; z-index: 1;
}
.project-directory-hero .ast-container { position: relative; z-index: 2; width: 100%; max-width: 75%; }
@media (max-width: 768px) { .project-directory-hero .ast-container { max-width: 100%; } }
.project-directory-body { padding: 40px 0; }
.bottom-cta { padding: 60px 0; text-align: center; }
/* BEGIN NOVA CSS PATCH — Scoped container for Project Directory only */
.project-directory-body .ast-container {
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;       /* adjust if your site uses a different width */
  padding-left: 16px;      /* gentle inner gutters */
  padding-right: 16px;
}
/* END NOVA CSS PATCH */


/* --- 2. SEARCH BAR & EXPANDED FILTERS --- */
.search-bar-top-row {
    display: flex; align-items: center; gap: 0;
    border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.4);
    background: rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.search-field {
    flex-grow: 1; border: none; background: transparent; font-size: 16px;
    color: #fff; padding: 15px 25px; outline: none; border-radius: 8px 0 0 8px;
}
.search-field::placeholder { color: #fff; opacity: 0.9; }
/* When selections are present, visually hide the free-text input (keep buttons & spacing) */
.search-bar-top-row.has-selections .search-field {
  opacity: 0;
  pointer-events: none;
}

.search-bar-top-row button:not(.pill) {
    flex-shrink: 0; width: 55px; height: 55px; cursor: pointer; border: none;
    background: transparent; border-left: 1px solid rgba(255, 255, 255, 0.4);
}
.search-bar-top-row button .dashicons { color: #fff !important; }
.search-bar-top-row button[type="submit"] { border-radius: 0 8px 8px 0; }

#advanced-filters-container {
    max-height: 0; opacity: 0; visibility: hidden; overflow: hidden;
    transition: all 0.4s ease; margin-top: 10px;
    background: rgba(0, 0, 0, 0.25); backdrop-filter: blur(10px);
    border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.4);
}
.project-search-filter-form.filters-expanded #advanced-filters-container { max-height: 500px; opacity: 1; visibility: visible; padding: 20px; }

.filter-control-wrap label { display: none !important; } /* force-hide labels, Labels are handled by Select2 placeholders */


/* --- 3. STICKY HEADER (MOBILE/TABLET) --- */
.search-bar-top-row.is-sticky {
    position: fixed; top: 0; left: 0; width: 100%;
    z-index: 1000; border-radius: 0; box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    animation: slideDown 0.3s ease-out;
}
@keyframes slideDown { from { transform: translateY(-100%); } to { transform: translateY(0); } }

/* --- 4. ACTIVE FILTER CHIPS --- */
.active-filters-bar { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 25px; }
.active-chip, .clear-filters-chip {
    display: inline-flex; align-items: center; gap: 8px;
    background: #eee; border-radius: 20px; padding: 8px 15px;
    font-size: 14px; text-decoration: none; color: #333;
}
.active-chip .chip-remove { color: #999; font-weight: bold; }
.active-filters-bar .clear-filters-chip { background:#ffc600; color:#fff; font-weight:500; }

/* When multiple chips exist, don’t let a single chip wrap words */
#project_location + .select2 .select2-selection__choice{
  white-space: nowrap;
}

/* Clear Filters chip — same pill visuals + double border + 2-line wrap */
.filter-grid-wrap .clear-filters-chip{
  background: rgba(255,255,255,0.18);
  color:#fff;
  border-radius:28px;
  min-height:42px;
  padding:8px 15px;

  /* double-border effect */
  border:1px solid rgba(255,255,255,0.35);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.18);

  display:inline-flex;
  align-items:center;

  /* allow two-line wrap while keeping nice spacing */
  white-space:normal;
  line-height:1.2;
  text-align:center;

  cursor:pointer;
}

/* optional: hover/focus for better affordance */
/* Clear Filters chip: hover vs keyboard focus */
.filter-grid-wrap .clear-filters-chip:hover{
  background: rgba(255,255,255,0.24);
  outline: none;
  /* no box-shadow on hover */
}

.filter-grid-wrap .clear-filters-chip:focus-visible{
  background: rgba(255,255,255,0.24);
  outline: none;
  box-shadow: 0 0 0 var(--ring-width) var(--ring-color); /* subtle ring only for keyboard */
}

/* === Desktop filter pills — glass background === */
body.post-type-archive-project #project-search-filter-form .select2-selection--single,
body.post-type-archive-project #project-search-filter-form .select2-selection--multiple{
  background: rgba(255,255,255,0.18) !important;           /* translucent white */
  border: 1px solid rgba(255,255,255,0.35) !important;     /* subtle outer border */
  background-clip: padding-box !important;                 /* keep the inner fill clean */
  backdrop-filter: saturate(140%) blur(2px);               /* optional: subtle glass */
}

/* ==== Keyboard focus rings for Select2 (no hover rings) ==== */
.filter-grid .select2-selection--single,
.filter-grid .select2-selection--multiple{
  outline: none !important;
  box-shadow: none !important;
}

/* mouse hover = no ring */
.filter-grid .select2-container:hover .select2-selection{
  outline: none !important;
  box-shadow: none !important;
}

/* keyboard focus only (parser-safe) */
.filter-grid .select2-container:focus-within .select2-selection{
  box-shadow: 0 0 0 var(--ring-width) var(--ring-color) !important;
  outline: none !important;
}

/* Older Select2 adds .select2-container--focus; still keep it subtle */
.filter-grid .select2-container--focus .select2-selection{
  /* This will show on both mouse & keyboard; the :has(:focus-visible) above is the preferred path */
  box-shadow: 0 0 0 var(--ring-width) var(--ring-color) !important;
}
/* ==== Pill sizing & typography normalization ==== */
.filter-grid .select2-selection--single,
.filter-grid .select2-selection--multiple{
  min-height: var(--pill-h-desktop);
  padding: var(--pill-v-pad) var(--pill-h-pad) !important;
  border-radius: 28px !important;
}

/* keep rendered text vertically centered inside pill */
.filter-grid .select2-selection__rendered{
  line-height: calc(var(--pill-h-desktop) - 2px) !important; /* -2px accounts for the 1px border top & bottom */
  font-size: 0.95rem;
  letter-spacing: 0.1px;
}
/* Responsive remap for pill height variable */
@media (max-width: 1024px){
  :root{ --pill-h-desktop: var(--pill-h-tablet); }
}
@media (max-width: 768px){
  :root{ --pill-h-desktop: var(--pill-h-mobile); }
}

/* Ensure dropdown sits above hero/filter wrappers */
.select2-container--open {
  z-index: 9999 !important;
}

/* --- 5. RESULTS, CARDS (FLAT), & PAGINATION --- */
.results-count { text-align: center; margin-bottom: 25px; color: #555; font-size: 1.1rem; }
.project-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 1024px) { .project-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) { .project-grid { grid-template-columns: 1fr; } }

.project-card { background: #fff !important; border: 1px solid #eee; border-radius: 0 !important; box-shadow: none !important; transition: border-color 0.3s ease !important; }
.project-card:hover { border-color: #ccc !important; transform: none !important; }
.project-card a { text-decoration: none; color: inherit; }
.card-image { position: relative; width: 100%; padding-top: 66.66%; background-color: #f5f5f5; }
.card-image img, .card-image-placeholder { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.card-ribbon {
    position: absolute; top: 0; left: 0; background: #ff8c00;
    color: #fff; padding: 5px 12px; font-size: 12px; font-weight: bold; z-index: 1;
}
.card-content { padding: 20px !important; }
.card-title { font-size: 1.5rem !important; margin: 0 0 10px !important; }
.card-meta { font-size: 0.9rem !important; color: #666 !important; }
.card-cta { display: block !important; text-align: center; background: #222 !important; color: #fff !important; padding: 12px !important; margin-top: 20px !important; font-weight: 600 !important; }
.card-cta:hover { background: #000 !important; }
.save-search-wrap { text-align: center; margin: 40px 0; }
.no-results-found { text-align: center; padding: 60px 20px; }
.pagination { text-align: center; margin-top: 40px; }
/* BEGIN NOVA CSS PATCH — Pretty pagination */
.pagination {
  display: flex;
  justify-content: center;
}
.pagination .page-numbers {
  display: inline-flex;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.pagination .page-numbers li a,
.pagination .page-numbers li span {
  display: inline-block;
  padding: 8px 12px;
  border: 1px solid #ddd;
  text-decoration: none;
  line-height: 1.2;
}
.pagination .page-numbers li .current {
  border-color: #222;
  font-weight: 600;
}
/* END NOVA CSS PATCH */

/* === Project Card Equal Height & Meta Wrap (applies to directory + featured) === */
.project-grid { align-items: stretch; }

.project-card { height: 100%; }
.project-card > a { display: flex; flex-direction: column; height: 100%; }

.card-content { display: flex; flex-direction: column; flex: 1 1 auto; }

/* Meta line: clamp to 2 lines, keep consistent height */
.card-meta {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.25em * 2); /* reserve height so layout doesn’t jump */
  line-height: 1.25;
}

/* Align CTA buttons at bottom */
.card-cta { margin-top: auto; }

/* --- FINAL FIX: Bottom CTA Layout --- */
.bottom-cta {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-size: cover;
    background-position: center;
    width: 100vw;
    margin-left: calc(50% - 50vw);
}
/* --- FINAL FIX: Bottom CTA Content Stacking --- */
.bottom-cta .ast-container,
.bottom-cta .bottom-cta-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
/* ===================================================================
   PROJECT DIRECTORY - FINAL SURGICAL POLISH (Aug 16, 2025)
   =================================================================== */

/* --- 1. Center the Search Bar --- */
.project-directory-hero .ast-container {
    display: flex;
    justify-content: center; /* Horizontally centers the form container */
    align-items: center;
}

/* --- 2. Fix Filter Dropdown Transparency --- */
.filter-grid .select2-selection--multiple,
.filter-grid .select2-selection--single {
    background-color: rgba(255, 255, 255, 0.2) !important; /* Semi-transparent white */
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
}
.filter-grid .select2-selection__rendered,
.filter-grid .select2-selection__placeholder {
    color: #ffffff !important; /* White text for readability */
}
.filter-grid .select2-selection__arrow b {
    border-color: #ffffff transparent transparent transparent !important; /* White dropdown arrow */
}
.filter-grid .select2-selection--multiple .select2-selection__choice {
    background-color: rgba(255, 255, 255, 0.9) !important; /* Nearly opaque white for selected pills */
    color: #222 !important;
}
.filter-grid .select2-selection--multiple .select2-selection__choice__remove {
    color: #222 !important;
}

/* --- 3. Fix Bottom CTA Styling to Match Homepage --- */
.bottom-cta {
    padding-top: 100px !important;
    padding-bottom: 100px !important;
    background-size: cover;
    background-position: center;
}
.bottom-cta h2 {
    color: #333 !important; /* Dark text like homepage CTA */
    font-weight: 700 !important;
}
.bottom-cta p {
    color: #555 !important; /* Dark text like homepage CTA */
}
/* Ghost button style to match homepage CTA 
.bottom-cta .button.cta-button {
    background-color: transparent !important;
    color: #333 !important;
    border: 2px solid #333 !important;
    border-radius: 5px !important;
    font-weight: bold !important;
    transition: all 0.3s ease;
}
.bottom-cta .button.cta-button:hover {
    background-color: #333 !important;
    color: #fff !important;
}*/
/* ===================================================================
   PROJECT DIRECTORY - DEFINITIVE LAUNCH CSS (Aug 16, 2025)
   =================================================================== */

/* --- 1. HEADER OVERLAY FIX --- */
body.page-template-default.page-id-2428 .site-header, /* Specific to your Project Directory Page ID */
body.post-type-archive-project .site-header {
    position: absolute !important;
    width: 100%;
    z-index: 100;
    background: transparent !important;
}
body.page-template-default.page-id-2428 .ast-theme-transparent-header .main-header-bar,
body.post-type-archive-project .ast-theme-transparent-header .main-header-bar {
    border-bottom: none !important;
}
body.page-template-default.page-id-2428 #content,
body.post-type-archive-project #content {
    padding-top: 0 !important;
}
.project-directory-hero {
    padding-top: 100px !important; /* Make space for the overlay header */
}

/* --- 2. SEARCH BAR CENTERING & TRANSPARENCY --- */
.project-directory-hero .ast-container {
    display: flex;
    justify-content: center;
    align-items: center;
}
.unified-search-form {
    width: 100%;
}
.search-bar-top-row .search-field {
    background-color: transparent !important;
}
/* Select2 Filters Transparency */
.filter-grid .select2-selection--multiple,
.filter-grid .select2-selection--single {
    background-color: rgba(255, 255, 255, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
}
.filter-grid .select2-selection__rendered,
.filter-grid .select2-selection__placeholder {
    color: #ffffff !important;
}
.filter-grid .select2-selection__arrow b {
    border-color: #ffffff transparent transparent transparent !important;
}
/* Hide Select2 arrows in all filter pills */
.filter-grid-wrap .select2-selection__arrow,
.filter-grid-wrap .select2-selection__arrow b,
.filter-grid .select2-selection__arrow,
.filter-grid .select2-selection__arrow b{
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  border: 0 !important;
}
/* Remove extra right padding that was reserved for the arrow */
.filter-grid-wrap .select2-selection--single .select2-selection__rendered,
.filter-grid .select2-selection--single .select2-selection__rendered{
  padding-right: 12px !important;
}

.filter-grid .select2-selection--multiple .select2-selection__choice {
    background-color: rgba(255, 255, 255, 0.9) !important;
    color: #222 !important;
}
.filter-grid .select2-selection--multiple .select2-selection__choice__remove {
    color: #222 !important;
}


/* --- 3. BOTTOM CTA STYLING TO MATCH HOMEPAGE --- */
.bottom-cta {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.bottom-cta .ast-container,
.bottom-cta .bottom-cta-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.bottom-cta h2 {
    text-transform: uppercase !important;
    color: #fffff0 !important;
    font-weight: 1000 px !important;
    font-size: clamp(28px, 4vw, 40px) !important;
    line-height: 1.2 !important;

}

.bottom-cta p {
    color: #555 !important;
}
/* Ghost button style */
.bottom-cta .button.cta-button {
    background-color: transparent !important;
    color: #333 !important;
    border: 2px solid #333 !important;
    border-radius: 5px !important;
    font-weight: bold !important;
    transition: all 0.3s ease;
}
.bottom-cta .button.cta-button:hover {
    background-color: #333 !important;
    color: #fff !important;
}
/* ===================================================================
   PROJECT DIRECTORY - DEFINITIVE & AGGRESSIVE STYLES
   =================================================================== */

/* --- 1. HEADER OVERLAY & HERO FIX --- */
body.page-id-2428 .site-header { /* Use Page ID for max specificity */
    position: absolute !important;
    width: 100%;
    z-index: 101;
    background: transparent !important;
    border-bottom: none !important;
}
body.page-id-2428 #content {
    padding-top: 0 !important;
}
.project-directory-hero {
    padding-top: 120px !important; /* Make space for header */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

/* --- 2. SEARCH BAR CENTERING & TRANSPARENCY --- */
.project-directory-hero .ast-container {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
}
.unified-search-form {
    width: 100% !important;
    max-width: 800px !important;
}
.search-bar-top-row .search-field,
.filter-grid .select2-selection--multiple,
.filter-grid .select2-selection--single {
    background-color: rgba(255, 255, 255, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    color: #fff !important;
}
.search-bar-top-row .search-field::placeholder,
.filter-grid .select2-selection__rendered,
.filter-grid .select2-selection__placeholder {
    color: #ffffff !important;
}

/* --- 3. BOTTOM CTA FIX --- */
.bottom-cta {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 130px 20px !important;
    background-size: cover;
    background-position: center;
}
.bottom-cta h2, .bottom-cta p {
    color: #fffff0 !important;
}
.bottom-cta .button.cta-button {
    background-color: transparent !important;
    color: #fffff0 !important;
    border: 2px solid #fffff0 !important;
}
.bottom-cta .button.cta-button:hover {
    background-color: #fffff0 !important;
    color: #fff !important;
}
/* --- FINAL FIX: Bottom CTA Button Specificity --- */
/* === Unify Bottom-CTA button with Elementor hero button === */
.bottom-cta a.button.cta-button,
section.bottom-cta a.button.cta-button,
.bottom-cta .button.cta-button {
  background-color: #262829 !important;  /* same dark fill */
  background-image: none !important; 
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 3px !important;          /* Elementor uses ~3px */
  padding: 10px 20px !important;          /* matches hero button */
  text-transform: uppercase !important;
  letter-spacing: 3px !important;
  font-weight: 400 !important;
  display: inline-flex;
  align-items: center;             /* vertical centering */
  justify-content: center;
  line-height: 1 !important; /* consistent height/tap target */
  min-height: 44px; 
  width: auto; 
}

.bottom-cta a.button.cta-button:hover,
section.bottom-cta a.button.cta-button:hover,
.bottom-cta .button.cta-button:hover {
  background-color: #1C3E4D !important;   /* same hover as your primary CTA */
  color: #ffffff !important;
}

.bottom-cta .ast-container { text-align: center; }
/* Responsive sizing for the CTA label and padding */
.bottom-cta a.button.cta-button,
 section.bottom-cta a.button.cta-button,
.bottom-cta .button.cta-button {
  font-size: clamp(12px, 0.95vw, 14px) !important;
  padding: clamp(10px, 1.2vw, 14px) clamp(20px, 2.4vw, 28px) !important;
  min-height: clamp(44px, 5.2vw, 52px);
}


/* === Select2 dropdown contrast & states (global) === */
.select2-dropdown{
  background: rgba(15,15,15,.96);
  border: 1px solid rgba(255,255,255,.25);
}
.select2-results__option{ color:#fff; }

/* keyboard/hover highlight */
.select2-results__option--highlighted{
  background:#fff !important;
  color:#111 !important;
}

/* selected item(s) */
.select2-results__option[aria-selected="true"]{
  background: rgba(255,255,255,.15) !important;
  color:#fff !important;
}

/* Optional: tighten label layout for our checkbox template */
.select2-results__option label{ display:flex; align-items:center; gap:8px; }

/* === Select2: dark dropdown + readable options (strong specificity) === */
.select2-container .select2-dropdown {
  background: rgba(15,15,15,.96) !important;
  border: 1px solid rgba(255,255,255,.25) !important;
}
/* Keep the dropdown search field stuck to the top of the Select2 menu */
.select2-container .select2-dropdown .select2-search--dropdown {
  position: sticky;
  top: 0;
  z-index: 2;
  background: rgba(15,15,15,.96); /* match the dropdown bg above */
  padding: 8px;
}

/* Make sure the search input spans the width */
.select2-container .select2-dropdown .select2-search__field {
  width: 100%;
}

/* Make the inner results pane dark too */
.select2-container--default .select2-results > .select2-results__options {
  background: rgba(15,15,15,.96) !important;
}

/* Base option text */
.select2-container .select2-results__option {
  color: #fff !important;
}

/* keyboard/hover highlight */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: #fff !important;
  color: #111 !important;
}

/* selected item(s) in the list */
.select2-container .select2-results__option[aria-selected="true"] {
  background: rgba(255,255,255,.15) !important;
  color: #fff !important;
}

/* Our checkbox template layout */
.select2-container .select2-results__option label {
  display: flex; gap: 8px; align-items: center;
}
/* Force white text for single-select pills (selected & placeholder) */
#project-search-filter-form .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #fff !important;
}
#project-search-filter-form .select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: #fff !important;
  opacity: .9 !important;
}

/* Hide the inline search field for BUDGET only */
#price_breakdown + .select2 .select2-search--inline { display: none !important; }
/* Custom search bar inside Select2 dropdown (Location) */
.select2-dropdown .bor-dd-search-wrap {
  position: sticky;           /* stays at top while scrolling options */
  top: 0;
  z-index: 1;
  background: rgba(15,15,15,.96);
  padding: 8px 10px 6px;
  border-bottom: 1px solid rgba(255,255,255,.15);
}
.select2-dropdown .bor-dd-search {
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.25);
  background: #0f0f0f;
  color: #fff;
  outline: none;
}
/* Small gap below the selection chip and the dropdown panel */
.select2-container .select2-dropdown { margin-top: 6px !important; }

/* Normalize multi-select pill height to match singles */
.filter-grid-wrap .select2-selection--multiple {
  min-height: 42px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}


/* Tweak chip’s top offset so rows are even */
.filter-grid-wrap .select2-selection--multiple .select2-selection__choice {
  margin-top: 2px !important; /* was 4px in some builds */
}
/* Budget placeholder precise centering */
#price_breakdown + .select2 .select2-selection__rendered { position: relative; }

/* === FINAL DEFINITIVE SOLUTION: Uniform, Aligned, & Spaceless Style === */

/* 1. Overall Search & Filter Bar Styling: Ensure it spans the full width of the screen. */
.search-filter-container {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 15px !important; /* Add a small side padding to prevent it from touching screen edges */
    transition: max-width 0.3s ease-in-out;
}

/* 2. Style the search field: ensure uniform size with the pills */
.search-filter-form .search-field {
    min-width: 145px !important;
    max-width: 145px !important; /* Forces a fixed width */
    height: 38px !important;
    padding: 0 18px !important;
    border-radius: 38px !important;
    background: rgba(255, 255, 255, 0.18) !important;
    color: #fff !important;
    font-size: 14px !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25) !important;
}

.search-filter-form .search-field::placeholder {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* 3. Main container for filters: ensures all pills are on a single line with no scroll */
.filter-grid-wrap {
    display: flex !important;
    flex-wrap: nowrap !important; 
    justify-content: flex-start !important; 
    align-items: center !important;
    gap: 5px !important; 
}

/* 4. Ensure uniform filter pill sizing and vertical alignment */
.filter-grid-wrap .select2-container {
    flex-grow: 0 !important;
    min-width: 145px !important;
    max-width: 145px !important;  
}

/* === Project Directory: perfectly center text inside multi-select pills === */
/* 1) Normalize the multi-select pill containers to use flex centering */
#project-search-filter-form .select2-container--default .select2-selection--multiple{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:38px !important;
  padding:0 14px !important;
  border-radius:38px !important;
}

/* ===== 0) HERO: remove the top gap so hero sits right under header ===== */
.post-type-archive-project .entry-header { display: none !important; } /* already present in your sheet, make sure it wins */
.post-type-archive-project .site-content { padding-top: 0 !important; }
.post-type-archive-project #primary { margin-top: 0 !important; }
.project-directory-hero { margin-top: 0 !important; }  /* ensure section itself doesn't add top spacing */

/* ===== 1) MULTI-SELECT PILL BASE: center content like single-select pills ===== */
#project-search-filter-form .select2-container--default .select2-selection--multiple {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;    /* <- center vertically & horizontally */
  min-height: 42px !important;
  padding: 0 14px !important;
  border-radius: 38px !important;
}

/* ===== FINAL OVERRIDE: center Location & Budget pills exactly ===== */

/* Replace any earlier left:14px rules; lock to true geometric center */
.post-type-archive-project #project-search-filter-form
  #price_breakdown.select2-hidden-accessible + span.select2.select2-container.select2-container--default
  .select2-selection--multiple .select2-selection__rendered.is-empty::before {
  content: "Budget";
  position: absolute;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  opacity: .85;
  pointer-events: none;
}

/* === Priority D: Fix misalignment for Location & Budget pills === */

/* BUDGET pill (center placeholder text like others) */
#price_breakdown + .select2 .select2-selection__rendered {
    display: flex !important;
    align-items: center !important;   /* vertical center */
    justify-content: center !important; /* horizontal center */
    min-height: 32px !important; 
    line-height: 32px !important;
    text-align: center !important;
}

#price_breakdown.select2-hidden-accessible + span.select2.select2-container {
  width: 170px !important;
}

/* If you previously set any fixed width for all .select2 containers, allow these to grow */
.filter-grid-wrap .select2-container {
  max-width: none !important;  /* prevents global caps from re-clamping */
}
/* 1) Remove Select2's default inner padding so text centers optically */
#project_location + .select2 .select2-selection__rendered,
#price_breakdown + .select2 .select2-selection__rendered{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 3) Give both multi-select containers a touch more room */
#project_location + .select2 .select2-selection__rendered,
#price_breakdown  + .select2 .select2-selection__rendered {
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
}

/* === PROJECT DIRECTORY — FINAL CENTERING + WIDTH TWEAK === */

/* A) Remove UL padding so optical center is true for both multis */
ul#select2-project_location-container.select2-selection__rendered,
ul#select2-price_breakdown-container.select2-selection__rendered {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* B) LOCATION — center the inline input itself (not full width) */
ul#select2-project_location-container.select2-selection__rendered {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
}

/* Make the Location pill wide enough (override Select2 inline width) */
#project_location.select2-hidden-accessible + span.select2.select2-container {
  min-width: 200px !important;     /* was 170/180 — give it breathing room */
  width: auto !important;
}

/* C) BUDGET — true geometric centering for placeholder */
ul#select2-price_breakdown-container.select2-selection__rendered {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 32px !important;
  line-height: 32px !important;
}

/* When empty, center the faux placeholder */
ul#select2-price_breakdown-container.select2-selection__rendered.is-empty::before {
  content: "Budget";
  position: absolute;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  opacity: .85;
  pointer-events: none;
}

/* Make the Budget pill wide enough as well */
#price_breakdown.select2-hidden-accessible + span.select2.select2-container {
  min-width: 190px !important;
  width: auto !important;
}
/* === FINAL FIX: Uniform Pill Height + Center Text for All Select2 Pills === */
#project-search-filter-form .select2-container .select2-selection--single,
#project-search-filter-form .select2-container .select2-selection--multiple {
  height: 44px !important;              /* fixed pill height */
  min-height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50px !important;       /* keep pill shape */
  padding: 0 14px !important;
  line-height: 1.4 !important;
  box-sizing: border-box !important;
}

/* Ensure placeholder & selected spans are centered */
#project-search-filter-form .select2-selection__rendered {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  text-align: center !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1.4 !important;
}

/* Fix vertical alignment of placeholder & chips */
#project-search-filter-form .select2-selection__placeholder,
#project-search-filter-form .select2-selection__choice {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 4px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
}
/* === PROJECT DIRECTORY — FINAL UNIFORM PILL STYLES === */
/* 1) Typography: make all pill text consistent (placeholder, chips, values) */
#project-search-filter-form .select2-container *,
#project-search-filter-form .select2-selection__rendered,
#project-search-filter-form .select2-selection__placeholder,
#project-search-filter-form .select2-selection__choice,
#project-search-filter-form .select2-selection__choice__display {
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* 2) Pill box: same height + vertical/horizontal centering for ALL selects */
#project-search-filter-form .select2-container .select2-selection--single,
#project-search-filter-form .select2-container .select2-selection--multiple {
  height: 40px !important;
  min-height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  padding: 0 14px !important;
  box-sizing: border-box !important;
}

/* Ensure the inner UL is truly centered and has no optical nudge */
#project-search-filter-form .select2-selection__rendered {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  text-align: center !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Chips/placeholder sit centered and don’t shift the baseline */
#project-search-filter-form .select2-selection__choice,
#project-search-filter-form .select2-selection__placeholder {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 6px !important;
}

/* 3) Width policy: consistent min-widths and balanced space usage */
#project-search-filter-form .select2-container { max-width: none !important; }

/* Single source-of-truth min-width for every pill */
#project-search-filter-form .select2-container .select2-selection--single,
#project-search-filter-form .select2-container .select2-selection--multiple {
  min-width: 150px !important;  /* baseline so labels never look cramped */
}

/* Fine-tune the two multis so the row breathes + “CLEAR FILTERS” has space */
#project_location.select2-hidden-accessible + span.select2.select2-container {
  min-width: 165px !important;  
  width: auto !important;
}
#price_breakdown.select2-hidden-accessible + span.select2.select2-container {
  min-width: 160px !important;  
  width: auto !important;
}

/* Location’s inline input should not stretch; center the node itself */
ul#select2-project_location-container.select2-selection__rendered {
  display: flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important;
}

/* Budget placeholder: keep geometric center */
ul#select2-price_breakdown-container.select2-selection__rendered {
  position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important;
  min-height: 32px !important; line-height: 32px !important;
}
ul#select2-price_breakdown-container.select2-selection__rendered.is-empty::before {
  content: "Budget";
  position: absolute; left: 50% !important; top: 50% !important; transform: translate(-50%,-50%) !important;
  opacity: .85; pointer-events: none;
}

/* === Filter Pills – Final Polish (replacement block) === */

/* 0) Uniform gap between pills */
.filter-grid-wrap .select2-container { margin-right: 10px !important; }
.filter-grid-wrap .select2-container:last-of-type { margin-right: 0 !important; }

/* 1) Base pill style (same height/typography everywhere) */
.filter-control-wrap .select2-container--default .select2-selection--multiple {
  min-height: 40px !important;
  height: 40px !important;
  border-radius: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 14px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  box-sizing: border-box !important;
}
.filter-control-wrap .select2-selection__choice {
  height: 40px !important;
  line-height: 40px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  border-radius: 20px !important;
  margin: 0 6px 0 0 !important;
  padding: 0 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  white-space: nowrap !important;
}

/* 2) LOCATION — true centering (both the rendered list and the inline input) */
#project_location + .select2 .select2-selection__rendered{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding-left:0 !important;
  padding-right:0 !important;      /* kill Select2's default inner padding */
}
#project_location + .select2 .select2-search--inline{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:auto !important;
}

/* 3) BUDGET — match style & center */
#price_breakdown + .select2 .select2-selection__rendered{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
  min-width:120px !important;
  height:40px !important;
  line-height:40px !important;
  text-align:center !important;
}

/* ===== NOVA: Project Directory overrides (keep at end of file) ===== */

/* BEGIN NOVA CSS PATCH — Grid defaults for stable layout */
.project-grid {
  /* ensure top-to-bottom flow, then left-to-right */
  grid-auto-flow: row;
  align-items: stretch;    /* already present elsewhere; safe repeat */
}
.project-card {
  display: block;          /* cards are anchors inside; keep outer block */
  height: 100%;
}
.project-card > a {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.card-content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
/* If your card has a media wrapper, keep thumbnails consistent */
.project-card .card-media img {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;      /* consistent thumb height */
  object-fit: cover;
  display: block;
}
/* END NOVA CSS PATCH */
/* ===== Project Cards: equal height + aligned CTA row ===== */

/* Ensure grid items stretch so cards can fill equal height */
.pd-results { align-items: stretch; }

/* Card fills its grid cell */
.pd-results .project-card,
.pd-results .card {               /* fallback if your class is "card" */
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Body grows to take extra space */
.pd-results .project-card__body,
.pd-results .card .card-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

/* Push actions to the bottom */
.pd-results .project-card__actions,
.pd-results .card .card-footer,
.pd-results .card .card-actions {
  margin-top: auto;              /* <-- makes buttons sit on same baseline */
  display: flex;
  gap: 12px;
}

/* Optional: keep media heights consistent so cards look uniform */
.pd-results .project-card__media img,
.pd-results .card .card-img-top {
  width: 100%;
  aspect-ratio: 16 / 9;          /* adjust if you prefer 4/3 or 1/1 */
  object-fit: cover;
  display: block;
}

/* Small screens: spacing tune so single-column cards still look tight */
@media (max-width: 640px) {
  .pd-results .project-card__actions,
  .pd-results .card .card-footer { gap: 10px; }
}
/* Project Directory — stack containers; keep 3-col grid */
.pd-section { width: 100%; clear: both; }
.project-directory-body > .ast-container {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 28px;
}
.pd-chips .active-filters-bar { display:flex; flex-wrap:wrap; gap:10px 12px; align-items:center; }
.pd-chips .active-chips { display:flex; flex-wrap:wrap; gap:8px; }

.pd-results .project-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:24px;
  width:min(100%,1200px);
  margin-inline:auto;
  padding-inline:16px;
}
@media (max-width:1024px){ .pd-results .project-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:768px){  .pd-results .project-grid{ grid-template-columns:1fr; } }

.pd-actions{ text-align:center; }
.pd-pagination nav.pagination{ display:flex; justify-content:center; }


/* === BANG | Final guards for filter pills (no overlap, 5px gaps, centered Location) === */

/* 1) Every Select2 inside the grid must fill its column, never overflow */
.project-search-filter-form .filter-grid-wrap .select2-container{
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;          /* prevent legacy min-width from stretching pills */
}

/* 2) Location pill — make the inner list span full width, then center contents */
#project_location + .select2 .select2-selection__rendered{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;           /* critical: the UL was ~66px; now full width */
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* LOCATION — make UL + inline search behave like one centered block */

/* Container fills the pill */
#project_location.select2-hidden-accessible + span.select2.select2-container{
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

/* Multiple selection shell: no inner padding, full width */
#project_location + span.select2 .select2-selection--multiple{
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  min-width: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* UL spans the pill and centers children */
ul#select2-project_location-container.select2-selection__rendered{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;  /* visual center */
  width: 100% !important;
  margin: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  list-style: none !important;
  min-width: 0 !important;
}

/* Safety (avoid overlap): the Location Select2 should fit its grid cell */
#project-search-filter-form .filter-grid-wrap 
#project_location.select2-hidden-accessible + span.select2{
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

/* Keep 5px grid gaps clean */
.project-search-filter-form .filter-grid-wrap > *{
  margin: 0 !important; min-width: 0 !important;
}
/* Let the pill band sit inside the search bar */
.search-bar-top-row { position: relative; }

/* Pill container inside the bar */
.active-selections{
  position: absolute;
  top: 50%; transform: translateY(-50%);
  left: 22px;                 /* match your search-field left padding */
  right: 130px;               /* leave room for buttons; adjust if needed */
  display: flex; align-items: center;
  gap: 5px;                   /* requested min spacing */
  white-space: nowrap; overflow-x: auto;
  padding: 0; z-index: 3;
  scrollbar-width: none;
  pointer-events: none;       /* allow typing into the input under it */
}
.active-selections::-webkit-scrollbar{ display: none; }

/* Enable clicks on the pills while the band itself ignores events */
.active-selections .pill, .active-selections .pill * { pointer-events: auto; }

/* Trim overly long text */
.active-selections .pill .pill-text{
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 480px){
  .active-selections{ right:120px; }
  .active-selections .pill{ height:30px; font-size:12.5px; }
  .active-selections .pill .pill-text{ max-width:140px; }
}
/* ===== Search-bar selections: force true pill look & spacing (FINAL OVERRIDE) ===== */

/* Container row: wrap + 5px spacing exactly as requested */
.search-bar-top-row .active-selections {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

/* The pills themselves (button.pill) — beat global button rules */
.search-bar-top-row .active-selections .pill {
  display: inline-flex !important;
  align-items: center !important;
  height: 32px !important;
  padding: 0 10px !important;
  gap: 8px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(17,20,26,.6) !important;   /* same family as your filter pills */
  color: #E9EEF2 !important;
  line-height: 1 !important;
  /* the two critical overrides */
  border-radius: 999px !important;
  width: auto !important;
}

/* Close “x” inside the pill */
.search-bar-top-row .active-selections .pill .x {
  margin-left: 4px !important;
  font-weight: 700 !important;
  opacity: .8 !important;
}
.search-bar-top-row .active-selections .pill:focus-visible,
.search-bar-top-row button:not(.pill):focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Pill = label/count only: never show inline search or chips in the pill itself */
#project_location + .select2 .select2-search--inline,
#project_location + .select2 .select2-selection__choice,
#price_breakdown  + .select2 .select2-search--inline {
  display: none !important;
}

/* Make inner search band track the same height as outer row */
.search-bar-top-row,
.search-bar-top-row .search-field, /* common wrapper around the input band */
.search-bar-top-row .select2-container--default .select2-selection--single,
.search-bar-top-row .select2-container--default .select2-selection--multiple {
  height: var(--bar-h, 55px) !important;
}

/* Optional: keep text vertically centered if your input uses line-height */
.search-bar-top-row .search-field input[type="text"],
.search-bar-top-row .search-field .search-field-input {
  line-height: var(--bar-h, 55px) !important;
}
/* LOCATION: center "Location (N)" and keep the clear on the right */
#project_location + .select2:not(.is-empty) .select2-selection--multiple{ position: relative; }

#project_location + .select2:not(.is-empty) .select2-selection__clear{
  position: absolute; right: 10px; top: 50%;
  transform: translateY(-50%);
  margin: 0; padding: 0; line-height: 1;
}

#project_location + .select2:not(.is-empty) .select2-search--inline{ display: none !important; }

#project_location + .select2:not(.is-empty) .select2-selection__rendered{
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  padding-right: 24px !important; /* room for the clear button */
  padding-left: 0 !important;
}

#project_location + .select2.is-empty .select2-selection__rendered {
  justify-content: center !important;
}
/* Center the Location pill overlay label just like Budget */
#project_location + .select2 .select2-selection--multiple { position: relative; }

#project_location + .select2 .bor-count-label {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  opacity: .95;
  font-weight: 600;
  white-space: nowrap;
  text-shadow: 0 1px 1px rgba(0,0,0,.25);
}
/* Hide the small "×" clear widget inside all pills (we clear elsewhere) */
#project_location + .select2 .select2-selection__clear,
#price_breakdown + .select2 .select2-selection__clear,
#configuration + .select2 .select2-selection__clear,
#property_type + .select2 .select2-selection__clear,
#construction_status + .select2 .select2-selection__clear {
  display: none !important;
}

/* === Project Directory: Budget pill (Select2) — single white label, no duplicates === */

#price_breakdown + .select2 .select2-selection--multiple { position: relative; }

#price_breakdown + .select2 .bor-count-label {
  color: #fff;
  opacity: .95;
  text-shadow: 0 1px 1px rgba(0,0,0,.25);
  white-space: nowrap;
  pointer-events: none;
  font-weight: 600; /* match Location when counted */
}

/* When showing "(n)", hide Select2's native placeholder node */
#price_breakdown + .select2.has-count .select2-selection__placeholder {
  display: none !important;
}

/* === Project Directory: Budget pill — ALWAYS centered === */
#price_breakdown + .select2 .select2-selection--multiple {
  position: relative; /* anchor for overlay */
}

/* Center the whole row regardless of state */
#price_breakdown + .select2 .select2-selection__rendered {
  display: flex;
  align-items: center;
  justify-content: center; /* <-- always centered */
  gap: 6px;
}
/* === Overlay label (Budget/Location) — base & visibility === */

/* Base position/typography, hidden by default */
#project-search-filter-form .bor-count-label{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-weight: 600;
  line-height: 1;
  color: #fff;
  opacity: .9;
  pointer-events: none;   /* clicks go to the select, not the label */
  display: none;          /* JS toggles visibility */
}

/* Make label visible when JS adds .is-visible */
#project-search-filter-form .bor-count-label.is-visible{
  display: block !important;
}

/* Ensure the rendered area is a positioning context */
#project_location + .select2 .select2-selection__rendered,
#price_breakdown + .select2 .select2-selection__rendered{
  position: relative !important;
}

/* === Budget pill — CSS-only placeholder when empty (no :has, no JS) === */

/* 1) Guarantee a positioning/centering context */
#price_breakdown + .select2 .select2-selection__rendered{
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* 2) When EMPTY, the render list has only one child: .select2-search
      Draw a centered faux label using ::before. */
#price_breakdown + .select2 .select2-selection__rendered > .select2-search:only-child::before{
  content: "Budget";
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  opacity: .9;
  pointer-events: none;
}

/* 3) When chips exist, the search item is no longer :only-child,
      so the ::before won’t render; no extra rules needed. */

/* As soon as one chip exists, return the input to a tiny inline width next to chips */
#price_breakdown + .select2 .select2-selection__choice ~ .select2-search .select2-search__field{
  width: 2ch !important;           /* small caret space */
  text-align: left !important;
}

/* Optional: hide the input's placeholder when chips exist to avoid ghost text on focus */
#price_breakdown + .select2 .select2-selection__choice ~ .select2-search .select2-search__field::placeholder{
  color: transparent;
}

/* Use a centered overlay for "Budget (N)" */
#price_breakdown + .select2 .bor-count-label {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: #fff;
  opacity: .95;
  font-weight: 600;
  white-space: nowrap;
  text-shadow: 0 1px 1px rgba(0,0,0,.25);
}

/* Hide native placeholder when the count overlay is shown */
#price_breakdown + .select2.has-count .select2-selection__placeholder {
  display: none !important;
}

/* Hide Select2 chips so they don't compete with the overlay */
#price_breakdown + .select2 .select2-selection__choice {
  display: none !important;
}
/* Hide choice chips in Location pill as well */
#project_location + .select2 .select2-selection__choice { 
  display: none !important; 
}

/* Keep the tiny inline search present (for typing) but invisible */
#price_breakdown + .select2 .select2-search--inline .select2-search__field {
  width: 0.75em;
  min-width: 0.75em;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  line-height: 1.2;
}

/* Nice white placeholder when empty */
#price_breakdown + .select2 .select2-selection__placeholder {
  color: #fff;
  opacity: .9;
}

/* Only show the overlay when we actually have a count */
#price_breakdown + .select2:not(.has-count) .bor-count-label {
  display: none;
}
/* ===== Project Directory — Mobile/Tablet Filter Sheet (2025-09-22) ===== */

/* --- 1. Base State (Hidden on Desktop) --- */
.filters-sheet-container {
    display: none;
}

/* --- 2. Active State (Visible on Mobile/Tablet) --- */
@media (max-width: 1024px) {
    /* Hide the original desktop filter grid when the form is expanded on smaller screens */
    body.filters-open .project-search-filter-form .filter-grid-wrap {
        display: none !important;
    }

    /* On smaller screens, the toggle button should open our new sheet */

    body.filters-open #advanced-filters-container {
        max-height: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        padding: 0 !important;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #fff;
        z-index: 10002;
        overflow-y: auto;
        border: none;
        border-radius: 0;
        display: flex; /* Use flexbox for layout */
    }
    /* FIX: Lock body scroll when mobile filter is open */

    body.filters-open { overflow: hidden !important; }
    body.filters-open .filters-sheet-container {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        z-index: 1003; /* keep the panel above everything while open */
    }

    .filters-header {
        display: flex;
        align-items: center;
        padding: 15px 20px;
        border-bottom: 1px solid #e0e0e0;
        flex-shrink: 0;
    }

    .filters-header .filters-back-btn {
        background: #f0f0f0;
        border: none;
        font-size: 20px;
        font-weight: bold;
        cursor: pointer;
        padding: 0;
        margin-right: 15px;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        flex-shrink: 0;
        line-height: 1;
    }
    .filters-header .filters-title {
        /* FIX: Display the title and style it for better UX */
        display: block;
        flex-grow: 1;
        text-align: center;
        font-size: 1.1rem;
        font-weight: 600;
        margin-right: 55px; /* Balance the space taken by the back button */
    }

    .filters-body-wrapper {
        display: flex;
        flex-grow: 1;
        overflow: hidden;
    }

    .filters-nav {
        background-color: #f5f5f5;
        width: 140px;
        flex-shrink: 0;
        padding-top: 10px;
        overflow-y: auto;
    }

    .filters-nav-link {
        display: block;
        padding: 15px 20px;
        text-decoration: none;
        color: #333;
        font-weight: 500;
        border: none;
        background: none;
        width: 100%;
        text-align: left;
    }

    .filters-nav-link.is-active {
        background-color: #fff;
        font-weight: 700;
    }

    .filters-panes {
        flex-grow: 1;
        padding: 20px;
        overflow-y: auto;
        height: 100%;
    }

    .filter-pane {
        display: none;
    }
    .filter-pane.is-active {
        display: block;
    }
    .filter-pane .filter-option {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        cursor: pointer;
        font-size: 1rem;
    }
    .filter-pane .filter-option input {
        margin-right: 15px;
        width: 20px;
        height: 20px;
    }
    /* Style radio and checkbox */
    .filter-option input[type="checkbox"],
    .filter-option input[type="radio"] {
        accent-color: #0073e6;
    }

    .filters-actions {
        display: flex;
        gap: 15px;
        padding: 15px 20px;
        border-top: 1px solid #e0e0e0;
        background: #fff;
        flex-shrink: 0;
    }

    .filters-action-btn {
        flex: 1;
        padding: 15px;
        font-size: 1rem;
        font-weight: 600;
        border-radius: 8px;
        cursor: pointer;
    }
    .filters-action-btn.clear {
        background: #fff;
        border: 1px solid #ccc;
        color: #333;
    }
    .filters-action-btn.apply {
        background: #0073e6;
        border: 1px solid #0073e6;
        color: #fff;
    }
}

/* --- 3. Mobile-Specific Adjustments --- */
@media (max-width: 767px) {
    .filters-nav {
        width: 120px;
    }
    .filters-nav-link {
        padding: 12px 15px;
    }
    .filters-panes {
        padding: 15px;
    }
}

@media (max-width: 1024px) {
    /* FIX: Ensure filter option panes can scroll vertically */
    .filters-panes {
        height: 100%;
    }
}
    /* FIX: Unify Desktop Multi-Select Pill Display (No Shifting) */
    .project-search-filter-form .bor-count-label {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        pointer-events: none;
        color: #fff;
        font-weight: 500;
        font-size: 14px;
        white-space: nowrap;
    }
    .project-search-filter-form .select2-container.has-count .select2-selection__rendered,
    .project-search-filter-form .select2-container.has-count .select2-selection__placeholder {
        opacity: 0; /* Hide the default chips and placeholder */
    }
    .project-search-filter-form .select2-container.is-empty .select2-selection__rendered {
        opacity: 1;
    }
    

/* === Project Directory: pill layout for NON-TOUCH desktops/laptops only ===
   Conditions:
   1) Has a precise pointer (mouse/trackpad): (pointer: fine)
   2) Supports hover interactions: (hover: hover)
   3) Desktop/laptop viewport: ≥1025px
   This avoids affecting tablets/phones and touch-first hybrids.
*/
@media (min-width: 1025px) and (hover: hover) and (pointer: fine) {
  .project-directory-body .filter-grid-wrap{
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    align-items: stretch;
  }
  .project-directory-body .filter-grid-wrap > *{ min-width: 0; }
  .project-directory-body .filter-grid-wrap .select2{
    width: 100% !important;
    min-width: 0 !important;
    flex: initial !important; /* neutralize any older flex widths */
  }
  .project-directory-body .filter-actions-row{
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }
}
@media (min-width: 1025px) {
  /* Consistent height for all filter pills */
  .filter-grid-wrap .select2-container .select2-selection--multiple,
  .filter-grid-wrap .select2-container .select2-selection--single {
    height: 48px !important;
    min-height: 48px !important;
  }
  .filter-grid-wrap .select2-container .select2-selection__rendered {
    line-height: 48px !important;
  }

  /* Even, responsive widths across the row */
  .filter-grid-wrap{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  flex-wrap:nowrap !important;
  overflow-x:auto !important;
  overflow-y:visible !important;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}
  .filter-grid-wrap .filter-control-wrap { flex: 1 1 0; min-width: 220px; }
}
.filter-grid-wrap .select2-container { width: 100% !important; }

/* (Optional) Touch-first fallback: keep tablets/phones on your current UI.
   No layout change here—this block is only for small polish if needed. */
@media (hover: none) and (pointer: coarse) {
  /* example non-breaking tweaks only — safe to leave empty if not needed */
  /* .project-directory-body .filter-grid-wrap { /* keep current tablet UI */ /* } */
}
/* =========================
   BANG — Desktop/Laptop polish (non-touch only)
   Strategy:
   - Phase A: shrink horizontal padding/margins of the search shell as viewport narrows
   - Phase B: then scale down font + pill height
   - Phase C: finally let pills wrap (cleanly) — never overlap
   ========================= */
@media (hover: hover) and (pointer: fine) and (min-width: 1025px){
  :root{
    /* defaults at wide desktop */
    --shell-x: 24px;      /* inner left/right padding of the search+filters shell */
    --pill-h: 44px;
    --pill-fs: 16px;
    --pill-minw: 220px;   /* min width for each pill in grid */
    --pill-gap: 12px;
    --search-fs: 18px;    /* search input text & placeholder */
  }

  /* ===== Phase A: margin/padding reduction first ===== */
  @media (max-width: 1440px){
    :root{ --shell-x: 18px; }
  }
  @media (max-width: 1280px){
    :root{ --shell-x: 12px; }
  }

  /* ===== Phase B: then scale typography & pill size (no wrap yet) ===== */
  @media (max-width: 1160px){
    :root{
      --pill-h: 40px;
      --pill-fs: 15px;
      --search-fs: 16px;
      --pill-minw: 210px;
      --pill-gap: 10px;
    }
  }
  @media (max-width: 1080px){
    :root{
      --pill-h: 38px;
      --pill-fs: 14px;
      --search-fs: 15px;
      --pill-minw: 200px;
      --pill-gap: 10px;
    }
  }

  /* Search input font + placeholder scale */
  .post-type-archive-project #project-search-filter-form .search-field{
    font-size: var(--search-fs) !important;
  }
  .post-type-archive-project #project-search-filter-form .search-field::placeholder{
    font-size: var(--search-fs) !important;
  }

  /* Pill typography/height (keeps Budget identical to others) */
  .post-type-archive-project .project-search-filter-form
    .select2-container .select2-selection--single,
  .post-type-archive-project .project-search-filter-form
    .select2-container .select2-selection--multiple,
  .post-type-archive-project .project-search-filter-form
    .clear-filters-chip{
    padding: 0 14px !important;
    border-radius: 999px !important;
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
  }
  #price_breakdown + .select2 .select2-selection--multiple{
    height: var(--pill-h) !important;
    min-height: var(--pill-h) !important;
  }
  .post-type-archive-project .project-search-filter-form
    .select2-selection__rendered,
  .post-type-archive-project .project-search-filter-form
    .select2-selection__placeholder,
  .post-type-archive-project .project-search-filter-form
    .select2-search__field{
    font-size: var(--pill-fs) !important;
    line-height: 1 !important;
  }

  /* ===== Phase C: allow clean wrapping (no overlap) when truly needed ===== */
  .post-type-archive-project .project-search-filter-form .filter-grid-wrap{
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(var(--pill-minw), 1fr)) !important;
    gap: var(--pill-gap) !important;
    align-items: stretch !important;
    overflow: visible !important;
  }
  .post-type-archive-project .project-search-filter-form .filter-grid-wrap > *{
    min-width: 0 !important;
  }
  .post-type-archive-project .project-search-filter-form .filter-grid-wrap .select2{
    width: 100% !important;
    min-width: 0 !important;
    flex: initial !important; /* neutralize old flex widths */
  }

  /* Hover “border vanish” for ALL pills (keeps silhouette with inset shadow) */
  .post-type-archive-project .project-search-filter-form
    .select2-container .select2-selection--single,
  .post-type-archive-project .project-search-filter-form
    .select2-container .select2-selection--multiple,
  .post-type-archive-project .project-search-filter-form
    .clear-filters-chip{
    border: 1px solid rgba(255,255,255,0.35) !important;
    transition: border-color .15s ease, box-shadow .15s ease;
  }
  .post-type-archive-project .project-search-filter-form
    .select2-container .select2-selection--single:hover,
  .post-type-archive-project .project-search-filter-form
    .select2-container .select2-selection--multiple:hover,
  .post-type-archive-project .project-search-filter-form
    .clear-filters-chip:hover{
    border-color: transparent !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
    cursor: pointer;
  }
}
/* ===== BANG — DESKTOP/LAPTOP ONLY (non-touch): one-line pills, auto-width, tight spacing, identical borders ===== */
@media (min-width: 1025px) and (hover: hover) and (pointer: fine){

  /* A) Match borders for search row and filter shell */
  .search-bar-top-row,
  #advanced-filters-container{
    border: 1px solid rgba(255,255,255,0.40) !important;
    border-radius: 8px !important;
    background: rgba(0,0,0,0.25) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    box-shadow: none !important;
  }

  /* B) One line only (no wrap), tight gaps */
  .post-type-archive-project .project-search-filter-form .filter-grid-wrap{
    display: flex !important;
    flex-wrap: nowrap !important;     /* never wrap on desktop */
    align-items: center !important;
    gap: 10px !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  /* C) Pills are auto-width, not stretched */
  .post-type-archive-project .project-search-filter-form .select2-container,
  .post-type-archive-project .project-search-filter-form .clear-filters-chip{
    width: auto !important;           /* content decides width */
    flex: 0 0 auto !important;        /* keep them in one row */
  }

  /* D) Tight, uniform pill height + padding (including Budget) */
  :root{
    --pill-font: clamp(13px, 0.95vw, 15px);
    --pill-h:    clamp(36px, 2.8vw, 44px);
    --pill-padx: clamp(10px, 0.9vw, 14px);
    --search-fs: clamp(16px, 1.05vw, 18px);
  }

  #project-search-filter-form .search-field,
  #project-search-filter-form .search-field::placeholder{
    font-size: var(--search-fs) !important;
  }

  .post-type-archive-project .project-search-filter-form
    .select2-container .select2-selection--single,
  .post-type-archive-project .project-search-filter-form
    .select2-container .select2-selection--multiple,
  .post-type-archive-project .project-search-filter-form
    .clear-filters-chip{
    padding: 0 var(--pill-padx) !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255,255,255,0.35) !important;
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;   /* never break inside a pill */
    transition: border-color .15s ease, box-shadow .15s ease;
  }

  /* Budget pill consistency */
  #price_breakdown + .select2 .select2-selection--multiple{
    height: var(--pill-h) !important;
    min-height: var(--pill-h) !important;
    padding: 0 var(--pill-padx) !important;
  }

  /* Inner text sizing + prevent extra internal padding */
  .post-type-archive-project .project-search-filter-form
    .select2-selection__rendered,
  .post-type-archive-project .project-search-filter-form
    .select2-selection__placeholder,
  .post-type-archive-project .project-search-filter-form
    .select2-search__field{
    font-size: var(--pill-font) !important;
    line-height: 1 !important;
  }
  .select2-container--default .select2-selection--single .select2-selection__rendered{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Hover: “border vanish” on all pills */
  .post-type-archive-project .project-search-filter-form
    .select2-container .select2-selection--single:hover,
  .post-type-archive-project .project-search-filter-form
    .select2-container .select2-selection--multiple:hover,
  .post-type-archive-project .project-search-filter-form
    .clear-filters-chip:hover{
    border-color: transparent !important;
    cursor: pointer;
  }
}

/* === BANG — DESKTOP/LAPTOP (non-touch) FIX PACK — 2025-09-24 === */
@media (min-width:1025px) and (hover:hover) and (pointer:fine){

  /* 1) Match borders between search row & expanded filter shell (no double look) */
  .search-bar-top-row,
  #advanced-filters-container{
    border:1px solid rgba(255,255,255,0.40) !important;
    border-radius:8px !important;
    background:rgba(0,0,0,0.25) !important;
    backdrop-filter:blur(10px) !important;
    -webkit-backdrop-filter:blur(10px) !important;
    box-shadow:none !important;
  }

  /* 2) Keep pills on one line; allow horizontal scroll (no clipping, no wrap) */
  .post-type-archive-project .project-search-filter-form .filter-grid-wrap{
    display:flex !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    gap:10px !important;
    overflow-x:auto !important;             /* replaces overflow:hidden */
    overflow-y:visible !important;
    scrollbar-width:thin; -webkit-overflow-scrolling:touch;
  }

  /* 3) Pills auto-size; don’t stretch weirdly */
  .post-type-archive-project .project-search-filter-form .select2-container,
  .post-type-archive-project .project-search-filter-form .clear-filters-chip{
    width:auto !important;
    flex:0 0 auto !important;
  }

  /* 4) Uniform height + typography across ALL pills (single + multiple + “Budget”) */
  .post-type-archive-project .project-search-filter-form
    .select2-selection--single,
  .post-type-archive-project .project-search-filter-form
    .select2-selection--multiple,
  .post-type-archive-project .project-search-filter-form
    .clear-filters-chip{
    padding:0 14px !important;
    border-radius:999px !important;
    display:flex !important;
    align-items:center !important;
    box-sizing:border-box !important;
  }
  /* center the text; let line-height be natural */
  .post-type-archive-project .project-search-filter-form .select2-selection__rendered{
    display:flex !important;
    align-items:center !important;
  }

  /* 5) Hover “border vanish” for ALL pills (consistent alpha) */
  .post-type-archive-project .project-search-filter-form
    .select2-selection--single,
  .post-type-archive-project .project-search-filter-form
    .select2-selection--multiple,
  .post-type-archive-project .project-search-filter-form
    .clear-filters-chip{
    border:1px solid rgba(255,255,255,0.35) !important;
    transition:border-color .15s ease, box-shadow .15s ease;
  }
  .post-type-archive-project .project-search-filter-form
    .select2-selection--single:hover,
  .post-type-archive-project .project-search-filter-form
    .select2-selection--multiple:hover,
  .post-type-archive-project .project-search-filter-form
    .clear-filters-chip:hover{
    border-color:transparent !important;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,0.35);
    cursor:pointer;
  }

/* 6) Tighten the big text input so it doesn’t look “inset” from the border */
.search-field{
  padding: 15px 18px !important; /* was 25px each side; keeps a clean, even look */
}
@media (min-width:1025px) and (hover:hover) and (pointer:fine){
  /* Neutralize any hardcoded 32px line-heights inside the pills */
  .post-type-archive-project .project-search-filter-form
    .select2-selection__rendered{
    display: flex !important;
    align-items: center !important;
    line-height: normal !important;
  }
}
/* === PROJECT DIRECTORY: DEFINITIVE & UNIFIED FILTER STYLES (FINAL OVERRIDE) === */

/* --- 3. NEUTRALIZE CONFLICTING SELECT2 ELEMENTS --- */
#project-search-filter-form .select2-selection--multiple .select2-selection__rendered {
    padding: 0 !important;
    margin: 0 !important;
    width: 100%;
}
#project-search-filter-form .select2-search--inline {
    display: none !important;
}

/* --- 4. DROPDOWN & SEARCH STYLING --- */
.select2-dropdown .select2-search--dropdown { position: sticky; top: 0; z-index: 1050; padding: 8px 12px; }
.select2-dropdown .select2-search__field { border-radius: 6px !important; padding: 10px 12px !important; width: 100% !important; box-sizing: border-box !important; }
@media (min-width: 1025px) {
    .select2-dropdown .select2-search--dropdown { background-color: rgba(15,15,15,.96); }
    .select2-dropdown .select2-search__field { color: #ffffff !important; background-color: rgba(255, 255, 255, 0.1) !important; border: 1px solid rgba(255, 255, 255, 0.3) !important; }
    .select2-dropdown .select2-search__field::placeholder { color: #ffffff !important; opacity: 0.7; }
}
@media (max-width: 1024px) {
    .select2-dropdown .select2-search--dropdown { background-color: #ffffff; }
    .select2-dropdown .select2-search__field { color: #333 !important; background-color: #f0f0f0 !important; border: 1px solid #e0e0e0 !important; }
    .select2-dropdown .select2-search__field::placeholder { color: #555 !important; opacity: 1; }
}

/* --- 5. AJAX LOADING STATE --- */
.pd-results.is-loading .project-grid {
    opacity: 0.4;
    transition: opacity 0.2s ease-in-out;
    pointer-events: none;
}
}