/*
Theme Name: Puravankara Bangalore
Theme URI: https://puravankara-bangalore.com
Author: Puravankara
Author URI: https://puravankara-bangalore.com
Description: A one-page real estate landing page theme – pixel-perfect replica of the Purva Silversky project page. Fully customizable via the WordPress Customizer.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: puravankara-bangalore
Tags: one-page, real-estate, custom-logo, custom-menu, theme-options
*/

/* ==========================================================================
   CSS Variables — extracted from the live site
   ========================================================================== */
:root {
    /* Primary colors */
    --color-navy-dark: #0a1628;
    --color-navy: var(--color-navy);
    --color-navy-light: #14304d;

    /* Backgrounds */
    --color-bg-cream: #f5f0e8;
    --color-bg-light: #f8f6f1;
    --color-bg-white: #ffffff;

    /* Text */
    --color-text-dark: #1a1a1a;
    --color-text-body: #333333;
    --color-text-light: #666666;
    --color-text-white: #ffffff;

    /* Accents */
    --color-gold: #c9a84c;
    --color-gold-light: #d4b95e;
    --color-blue-accent: #1a5276;
    --color-cta-green: #25d366;

    /* Borders */
    --color-border: rgba(0, 0, 0, 0.1);
    --color-border-light: rgba(255, 255, 255, 0.2);

    /* Fonts */
    --font-primary: 'Playfair Display', serif;
    --font-secondary: 'Poppins', sans-serif;
    --font-body: 'Open Sans', sans-serif;

    /* Spacing — GLOBAL SECTION RULE
       All page sections use these two variables for consistent top/bottom spacing.
       To change spacing site-wide, only edit here. */
    --section-padding: 70px 0;
    /* Desktop: all sections */
    --section-padding-mobile: 40px 0;
    /* Mobile: all sections */
    --container-width: 1200px;
    --container-padding: 0 15px;
}

/* ==========================================================================
   Global Reset & Base Styles
   ========================================================================== */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 70px;
}

body {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-text-body);
    background-color: var(--color-bg-white);
    overflow-x: hidden;
}

a {
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

ul,
ol {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-primary);
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-text-dark);
}

/* ==========================================================================
   Container
   ========================================================================== */
.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: var(--container-padding);
}

/* ==========================================================================
   Section Base
   ========================================================================== */
.section {
    padding: var(--section-padding);
}

.section-subtitle {
    font-family: var(--font-primary);
    font-style: italic;
    color: var(--color-navy);
    font-size: 18px;
    margin-bottom: 10px;
    text-align: center;
}

.section-title {
    font-family: var(--font-primary);
    font-size: 36px;
    font-weight: 700;
    color: var(--color-text-dark);
    text-align: center;
    margin-bottom: 40px;
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */
.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.btn {
    display: inline-block;
    padding: 12px 30px;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    font-family: var(--font-secondary);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}

.btn-primary {
    background: var(--color-btn-bg);
    color: var(--color-btn-text);
}

.btn-primary:hover {
    background: var(--color-btn-hover);
}

.btn-outline {
    background-color: transparent;
    color: var(--color-navy);
    border: 2px solid var(--color-navy);
}

.btn-outline:hover {
    background-color: var(--color-navy);
    color: var(--color-text-white);
}

/* ==========================================================================
   Section: Header
   ========================================================================== */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 20px 0;
    transition: all 0.3s ease;
    background: transparent;
}

/* Fix for WordPress Admin Bar covering the header */
.admin-bar .site-header {
    top: 32px;
}
@media screen and (max-width: 782px) {
    .admin-bar .site-header {
        top: 46px;
    }
}

.site-header.header-scrolled {
    background-color: var(--color-navy);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    padding: 10px 0;
}

.header-container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Logo */
.header-logo .custom-logo {
    height: 40px;
    width: auto;
}

.header-logo .site-title {
    font-family: var(--font-primary);
    font-size: 24px;
    color: var(--color-text-white);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.overlay-tagline {
    font-size: 16px;
    font-weight: 400;
    color: #ffffff;
    /* Pure White as requested */
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Navigation - Pill Shape */
.header-nav {
    background-color: rgba(var(--color-navy-rgb), 0.8);
    padding: 12px 30px;
    border-radius: 50px;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.header-nav .nav-menu {
    display: flex;
    gap: 25px;
    margin: 0;
    padding: 0;
}

.header-nav .nav-menu li {
    display: inline-block;
}

.header-nav .nav-menu a {
    color: var(--color-text-white);
    font-family: var(--font-secondary);
    font-size: 14px;
    font-weight: 500;
    text-transform: capitalize;
    opacity: 0.9;
    padding: 5px 0;
    position: relative;
}

.header-nav .nav-menu a:hover {
    opacity: 1;
    color: var(--color-gold);
}

/* Phone CTA */
.header-phone .phone-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: rgba(var(--color-navy-rgb), 0.8);
    color: var(--color-text-white);
    padding: 10px 20px;
    border-radius: 30px;
    font-family: var(--font-secondary);
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.header-phone .phone-btn:hover {
    background-color: var(--color-text-white);
    color: var(--color-navy);
}

.header-phone .phone-btn i {
    font-size: 16px;
    background: var(--color-text-white);
    color: var(--color-navy);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: -5px;
    transform: rotate(90deg);
    /* Fix orientation */
}

.header-phone .phone-btn:hover i {
    background: var(--color-navy);
    color: var(--color-text-white);
}

/* Mobile Toggle */
.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    z-index: 1001;
}

.mobile-menu-toggle .hamburger-line {
    display: block;
    width: 25px;
    height: 2px;
    background-color: var(--color-text-white);
    margin: 5px 0;
    transition: all 0.3s ease;
}

/* Mobile Responsive */
@media (max-width: 991px) {
    .header-nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%;
        height: 100vh;
        background-color: var(--color-navy-dark);
        flex-direction: column;
        justify-content: center;
        border-radius: 0;
        transition: right 0.3s ease;
        padding-top: 60px;
        box-shadow: -5px 0 15px rgba(0, 0, 0, 0.5);
        z-index: 2000;
        /* Ensure mobile menu is above everything */
    }

    .header-nav.nav-open {
        right: 0;
    }

    .header-nav .nav-menu {
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }

    .header-nav .nav-menu a {
        font-size: 18px;
    }

    .mobile-menu-toggle {
        display: block;
        z-index: 2001;
        /* Ensure above nav overlay (2000) */
    }

    .header-phone {
        display: none;
        /* Hide top phone on mobile, rely on sticky bottom bar */
    }

    /* Hamburger Animation */
    .mobile-menu-toggle.is-active .hamburger-line:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }

    .mobile-menu-toggle.is-active .hamburger-line:nth-child(2) {
        opacity: 0;
    }

    .mobile-menu-toggle.is-active .hamburger-line:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -5px);
    }
}

/* ==========================================================================
   HERO SECTION
   ========================================================================== */

.hero-section {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 600px;
    overflow: hidden;
}

/* ---- Hero Slider ---- */
.hero-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* Gradient Overlay - Darkens left side for text readability */
.hero-slider::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(var(--hero-overlay-color-rgb, 0, 0, 0), var(--hero-overlay-opacity, 0.56)) 35%, rgba(var(--hero-overlay-color-rgb, 0, 0, 0), 0));
    z-index: 5;
    /* Above slides, below arrows */
    pointer-events: none;
}

.hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
}

.hero-slide.active {
    opacity: 1;
}

.hero-slide-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    object-position: var(--hero-pos-x, center) var(--hero-pos-y, center);
    animation: var(--hero-animation, none);
}

/* Zoom Animation (Ken Burns Effect) */
@keyframes zoom-out {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(var(--hero-anim-scale, 1.15));
    }

    100% {
        transform: scale(1);
    }
}

@media (max-width: 991px) {
    .hero-slide-img {
        object-position: center center !important;
    }
}

.hero-slide-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #0a1628 0%, #1a3c6e 50%, var(--color-navy) 100%);
}

/* ---- Hero Arrows ---- */
.hero-arrows {
    position: absolute;
    bottom: 40px;
    left: 40px;
    z-index: 10;
    display: flex;
    gap: 15px;
}

.hero-arrow {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.5);
    background: rgba(0, 0, 0, 0.15);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(4px);
}

.hero-arrow:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.8);
}

/* ---- Overlay Container (Desktop) ---- */
.hero-overlay-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    /* Solid overlay instead of gradient as requested */
    background: rgba(var(--hero-overlay-color-rgb, 0, 0, 0), var(--hero-overlay-opacity, 0.56));
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    padding: 100px 40px 60px;
    pointer-events: none;
    /* Allow clicks to pass through to slider/arrows */
}

/* ---- Info Card ---- */
.hero-info-card {
    display: flex;
    align-items: center;
    max-width: 380px;
    pointer-events: auto;
    /* Re-enable clicks */
}

.hero-info-card-inner {
    background: var(--hero-card-bg, rgba(var(--color-navy-rgb), 0.75));
    backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 30px 25px;
    border: 1px solid rgba(255, 255, 255, var(--hero-card-bg-opacity, 0.3));
}

.hero-location {
    color: #fff;
    font-family: var(--hero-subhead-family, var(--font-secondary));
    font-size: var(--hero-subhead-size, 14px);
    font-weight: var(--hero-subhead-weight, 400);
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.hero-location-pin {
    font-size: 16px;
}

.hero-project-name {
    color: #fff;
    font-family: var(--font-primary);
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.2;
    text-align: center;
}

/* Highlight pills */
.hero-highlights {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

.hero-highlight-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.1);
    padding: 10px 15px;
    border-radius: 50px;
    color: #fff;
    font-family: var(--font-secondary);
    font-size: 14px;
    font-weight: 500;
    transition: background 0.3s ease;
}

.hero-highlight-icon {
    color: var(--color-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
}

.hero-highlight-icon svg,
.hero-highlight-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    fill: var(--color-gold);
}

/* Meta pills (BHK + Price) */
.hero-meta-pills {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 15px;
}

.hero-meta-pill {
    display: inline-block;
    background: rgba(255, 255, 255, 0.95);
    color: var(--color-navy);
    padding: 10px 20px;
    border-radius: 6px;
    font-family: var(--font-primary);
    font-size: 15px;
    font-weight: 700;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Target the Tagline Pill (Global/Desktop) */
.hero-meta-typology {
    font-size: var(--tagline-size-desk, 20px);
    color: var(--tagline-color, var(--color-navy));
    font-family: var(--tagline-font, inherit) !important;
}

/* Target the Price Pill (Global/Desktop) */
.hero-meta-pill:nth-last-child(1),
.hero-meta-price {
    font-size: var(--price-size-desk, 22px);
    color: var(--price-color, #e74c3c);
    font-weight: 800;
    border: 2px solid var(--price-color, #e74c3c);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    font-family: var(--price-font, inherit) !important;
}

/* Car Badge Icon - Default White (Global) */
.car-badge-icon svg,
.car-badge-icon path {
    fill: #ffffff !important;
}

/* Brochure button — mobile only */
.hero-brochure-btn {
    display: none;
    margin-top: 20px;
    text-align: center;
    background-color: var(--color-btn-bg, var(--color-navy));
    color: var(--color-btn-text, #fff);
    border: 2px solid var(--color-btn-border, var(--color-navy));
    padding: 14px 30px;
    border-radius: 30px;
    font-family: var(--font-secondary);
    font-size: 15px;
    font-weight: 600;
}

/* ---- Contact Form (Right Overlay) ---- */
.hero-contact-form-wrap {
    display: flex;
    align-items: center;
    z-index: 20;
    /* Enable clicks */
    position: relative;
    max-width: 370px;
    pointer-events: auto;
    /* Re-enable clicks */
}

/* Specific styling for Hero Form Select (Global) */
.hero-contact-form select {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.hero-contact-form select option {
    color: #000;
}

/* ... (skipping unedited parts in middle if possible, but replacing full block for safety) ... */
/* Check: form styles are generic, but let's just keep going down to car badge */

.hero-contact-form {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(6px);
    border-radius: 12px;
    padding: 30px 25px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    width: 100%;
}

/* ... form inputs ... */
/* I will split this replacement if it is too long, but let's try to target car badge specifically in next chunk or include it here if short.
   Lines 464 to 710 is ~250 lines. Might be too big for single replacement if I include everything.
   I'll break it down. First: Overlay properties.
*/



.hero-location {
    color: #fff;
    font-family: var(--font-secondary);
    font-size: 14px;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.hero-project-name {
    color: #fff;
    font-family: var(--font-primary);
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.2;
}

/* Highlight pills */
.hero-highlights {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

.hero-highlight-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--hero-highlight-bg, rgba(255, 255, 255, 0.1));
    padding: 8px 15px;
    border-radius: 25px;
    color: #fff;
    font-family: var(--font-secondary);
    font-size: 13px;
    font-weight: 500;
    /* Step 1: Add visible border as requested */
    border: 1px solid rgba(255, 255, 255, 0.4);
}

.hero-highlight-icon {
    color: var(--color-gold);
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.hero-highlight-icon svg {
    width: 20px;
    height: 20px;
    fill: var(--color-gold);
}

/* Super Highlight */
.super-highlight-pill {
    /* Base styles overriden by themes or custom color */
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    animation: super-pulse 2s infinite alternate;
    color: #fff !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Color Themes */
.super-highlight-pill.theme-red_orange {
    background: linear-gradient(135deg, #ff416c, #ff4b2b) !important;
    box-shadow: 0 0 15px rgba(255, 75, 43, 0.6) !important;
}
.super-highlight-pill.theme-blue_purple {
    background: linear-gradient(135deg, #4776E6, #8E54E9) !important;
    box-shadow: 0 0 15px rgba(142, 84, 233, 0.6) !important;
}
.super-highlight-pill.theme-green_teal {
    background: linear-gradient(135deg, #11998e, #38ef7d) !important;
    box-shadow: 0 0 15px rgba(56, 239, 125, 0.6) !important;
}
.super-highlight-pill.theme-gold_yellow {
    background: linear-gradient(135deg, #f12711, #f5af19) !important;
    box-shadow: 0 0 15px rgba(245, 175, 25, 0.6) !important;
}
.super-highlight-pill.theme-custom {
    /* Background and shadow are set inline via PHP */
}

.super-highlight-text {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.4;
    text-align: left !important;
    flex: 1;
}

.super-highlight-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.super-highlight-icon svg,
.super-highlight-icon img {
    fill: #fff !important;
    animation: icon-zoom 1.5s infinite alternate ease-in-out;
}

@keyframes super-pulse {
    0% {
        box-shadow: 0 0 10px rgba(255, 75, 43, 0.4);
        transform: scale(1);
    }
    100% {
        box-shadow: 0 0 20px rgba(255, 75, 43, 0.9);
        transform: scale(1.03);
    }
}

@keyframes icon-zoom {
    0% { transform: scale(0.9); }
    100% { transform: scale(1.2); }
}

/* Meta pills (BHK + Price) */
.hero-meta-pills {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 15px;
}

.hero-meta-pill {
    display: inline-block;
    background: rgba(255, 255, 255, 0.95);
    color: var(--color-navy);
    padding: 10px 20px;
    border-radius: 6px;
    font-family: var(--font-primary);
    font-size: 15px;
    font-weight: 700;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Brochure button — mobile only */
.hero-brochure-btn {
    display: none;
    margin-top: 20px;
    text-align: center;
    background-color: var(--color-btn-bg, var(--color-navy));
    color: var(--color-btn-text, #fff);
    border: 2px solid var(--color-btn-border, var(--color-navy));
    padding: 14px 30px;
    border-radius: 30px;
    font-family: var(--font-secondary);
    font-size: 15px;
    font-weight: 600;
}

/* ---- Contact Form (Right Overlay) ---- */
.hero-contact-form-wrap {
    display: flex;
    align-items: center;
    max-width: 370px;
    pointer-events: auto;
    /* Re-enable clicks */
}

.hero-contact-form {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(6px);
    border-radius: 12px;
    padding: 30px 25px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    width: 100%;
}

.hero-form-title {
    color: #fff;
    font-family: var(--font-primary);
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 25px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 12px;
    border-radius: 6px;
}

.hero-form input[type="text"],
.hero-form input[type="email"],
.hero-form input[type="tel"] {
    width: 100%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 6px;
    padding: 14px 12px;
    color: #fff;
    font-family: var(--font-secondary);
    font-size: 14px;
    outline: none;
    margin-bottom: 15px;
}

.hero-form input::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

/* Phone Input Styles - Fixed for "Anti-Gravity" Alignment */
/* Match Phone Input with Name/Email fields (Boxed Style) */
.phone-input-group input#hero-phone,
.phone-input-group input#about-phone {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.7) !important;
    border-radius: 6px !important;
    height: 46.4px !important;
    padding: 12px 12px 12px 80px !important;
    width: 100% !important;
    color: #fff !important;
    font-size: 14px !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
}

.phone-input-group input#hero-phone:focus,
.phone-input-group input#about-phone:focus {
    border-color: #fff !important;
    outline: none;
}

/* Ensure the international container doesn't add extra borders */
.phone-input-group,
.iti {
    border: none !important;
    background: transparent !important;
    width: 100% !important;
    display: block !important;
}

.phone-input-group {
    margin-bottom: 15px !important;
}

/* Align the flag container with the new height */
.iti__selected-flag {
    background: transparent !important;
    height: 46.4px !important;
    padding-left: 10px !important;
    border-radius: 6px 0 0 6px !important;
}

/* Ensure the dropdown list appears correctly above elements */
.iti__country-list {
    z-index: 100000 !important;
    color: #333 !important;
    border: none !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    width: 300px;
}

/* Wrapper spacing */
.phone-input-group {
    margin-bottom: 20px;
}

/* Fix double margin: remove margin from inputs inside the group */
.phone-input-group input {
    margin-bottom: 0 !important;
}

.iti__selected-flag {
    background: transparent !important;
    padding-left: 12px;
}

.iti__arrow {
    border-top-color: #fff !important;
    /* White arrow */
}

.iti__arrow--up {
    border-bottom-color: #fff !important;
}

.phone-input-group:focus-within {
    border-color: var(--color-gold);
}

.phone-prefix {
    color: #fff;
    /* Revert to White text for dark bg */
    font-family: var(--font-secondary);
    font-size: 14px;
    white-space: nowrap;
    padding-right: 10px;
    border-right: 1px solid rgba(255, 255, 255, 0.3);
    /* Lighter divider */
    margin-right: 10px;
    font-weight: 500;
}

.phone-input-group input {
    border: none !important;
    margin-bottom: 0 !important;
    padding: 12px 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #fff;
    /* White text for input */
}

/* Ensure placeholder is visible on dark bg */
.phone-input-group input::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

.hero-form-submit {
    width: 100%;
    background: var(--color-btn-bg);
    color: var(--color-btn-text);
    border: 2px solid var(--color-btn-border);
    padding: 14px;
    border-radius: 6px;
    font-family: var(--font-secondary);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 15px;
    transition: all 0.3s ease;
}

.hero-form-submit:hover {
    opacity: 1;
    background: var(--color-btn-hover);
    border-color: var(--color-btn-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.hero-form-consent {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 15px;
    color: #ffffff !important;
    /* Force White for visibility */
    font-family: var(--font-secondary);
    font-weight: 400;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    font-size: 11px;
    line-height: 1.4;
    cursor: pointer;
}

.hero-form-consent input[type="checkbox"] {
    margin-top: 2px;
    flex-shrink: 0;
}

/* ---- Car Badge (Desktop only) ---- */
.car-badge {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    width: 200px;
    height: 200px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-car-badge, #ffffff);
}

.car-badge-text {
    position: absolute;
    width: 200px;
    height: 200px;
    animation: rotateBadge 12s linear infinite;
}

.car-badge-text svg {
    width: 200px;
    height: 200px;
    fill: currentColor;
}

.car-badge-icon {
    position: relative;
    z-index: 2;
}

@keyframes rotateBadge {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* ==========================================================================
   POPUP FORM MODAL (Modular System)
   ========================================================================== */

.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
    overflow-y: auto;
    /* Allow scrolling if popup is tall */
    padding: 20px;
}

.popup-overlay.active {
    display: flex;
}

/* Base Modal Styles */
.popup-form-modal {
    background: var(--form-bg-color, #fff);
    color: var(--form-text-color, #222);
    border-radius: 12px;
    position: relative;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    width: 100%;
    margin: auto;
    animation: fadeIn 0.3s ease-out;
}

.popup-form-modal h2,
.popup-form-modal h3,
.popup-form-modal h4,
.popup-form-modal p,
.popup-form-modal span:not(.badge-text):not(.badge-sub) {
    color: inherit;
    /* Allow text color to flow down from Customizer */
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.popup-close {
    position: absolute;
    top: 15px;
    right: 20px;
    background: none;
    border: none;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    z-index: 9999;
    color: #666;
    transition: color 0.3s;
}

.popup-close:hover {
    color: #000;
}

/* Common Form Elements */
.lead-gen-form .form-group {
    margin-bottom: 15px;
}

.lead-gen-form label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
    font-size: 14px;
    color: #333;
}

/* Unified Input Styles - Match exactly */
.lead-gen-form input[type="text"],
.lead-gen-form input[type="email"],
.lead-gen-form input[type="tel"],
.lead-gen-form select,
.lead-gen-form textarea,
.phone-input-group {
    width: 100%;
    padding: 12px;
    /* Consistent Background: Transparent White */
    background: rgba(255, 255, 255, 0.1) !important;
    /* Consistent Border: Soft White */
    border: 1px solid rgba(255, 255, 255, 0.7) !important;
    border-radius: 6px !important;
    font-size: 14px;
    font-family: var(--font-secondary);
    transition: all 0.3s;
    color: #fff !important;
    /* Always white text on dark bg */
    box-shadow: none !important;
}

select.input-light {
    color: rgba(255, 255, 255, 0.6) !important;
}

select.input-light option {
    color: #333 !important;
}

/* Remove inner styles for phone input inside group */
.phone-input-group input {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}

.lead-gen-form input:focus,
.lead-gen-form select:focus {
    border-color: var(--color-gold);
    outline: none;
}

.popup-submit-btn {
    width: 100%;
    padding: 14px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    border: none;
    margin-top: 10px;
}

/* Phone Group with Country Code */
.phone-row,
.phone-group {
    display: flex;
    gap: 10px;
}

.country-code-select {
    width: 90px !important;
    flex-shrink: 0;
}

/* Consent Text */
.popup-consent {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-top: 15px;
    font-size: 11px;
    color: #666;
    line-height: 1.4;
}

/* --- Template 1: Standard (Customizable Style) --- */
.popup-form-modal.template-1 {
    background: var(--form-bg-color, #fff);
    color: var(--form-text-color, #222);
    max-width: 420px;
    padding: 20px 25px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.template-1 .popup-title {
    color: var(--form-text-color, #222);
    text-align: center;
    margin-bottom: 12px;
    font-weight: 700;
    font-size: 20px;
}

.template-1 .popup-close {
    color: var(--form-text-color, #666);
    opacity: 0.6;
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    font-size: 18px;
}

.template-1 .popup-close:hover {
    opacity: 1;
}

/* Template 1 form groups - reduced spacing */
.template-1 .form-group {
    margin-bottom: 6px;
}

/* Template 1 Inputs - Solid light gray background */
.template-1 input[type="text"],
.template-1 input[type="email"],
.template-1 input[type="tel"],
.template-1 select {
    width: 100%;
    padding: 12px 14px;
    border: none;
    border-radius: 8px;
    background: #e8e8e8;
    font-size: 14px;
    font-family: var(--font-secondary, 'Poppins', sans-serif);
    color: var(--form-text-color, #222);
    outline: none;
    box-sizing: border-box;
    height: 48px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    transition: all 0.2s ease;
}

.template-1 input[type="text"]:focus,
.template-1 input[type="email"]:focus,
.template-1 input[type="tel"]:focus,
.template-1 select:focus {
    background: #e0e0e0;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
    outline: none;
}

.template-1 input::placeholder {
    color: rgba(0, 0, 0, 0.4);
}

.template-1 select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    cursor: pointer;
}

.template-1 select option {
    background: #fff;
    color: #333;
}

/* Template 1 Select Dropdowns (Budget/BHK) - Match input styling exactly */
.template-1 .form-select-qualifier {
    width: 100%;
    padding: 12px 40px 12px 14px;
    border: none;
    border-radius: 8px;
    background: #e8e8e8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E") no-repeat right 14px center;
    appearance: none;
    -webkit-appearance: none;
    font-size: 14px;
    font-family: var(--font-secondary, 'Poppins', sans-serif);
    color: #333;
    cursor: pointer;
    box-sizing: border-box;
    height: 48px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    transition: all 0.2s ease;
}

/* Fix: Placeholder color for Select */
.template-1 select:invalid,
.template-1 .form-select-qualifier:invalid {
    color: rgba(0, 0, 0, 0.4) !important;
}


.template-1 .form-select-qualifier:focus {
    background: #e0e0e0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E") no-repeat right 14px center;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
    outline: none;
}

.template-1 .form-select-qualifier option {
    background: #fff;
    color: #333;
}

.template-1 .popup-title {
    color: var(--form-text-color, #222);
    text-align: center;
    margin-bottom: 15px;
    font-weight: 700;
    font-size: 22px;
}

.template-1 .popup-close {
    color: var(--form-text-color, #666);
    opacity: 0.6;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    font-size: 18px;
}

.template-1 .popup-close:hover {
    opacity: 1;
}

/* Template 1 form groups - reduce spacing */
.template-1 .form-group {
    margin-bottom: 8px;
}

/* Template 1 Inputs - Slimmer design */
/* Template 1 Styles - See complete styles at top of file (line ~1215) */
/* Old duplicate styles removed - consolidated above */

/* Fix for phone input in template-1 with intl-tel-input */
.template-1 .iti input[type="tel"] {
    background: #e8e8e8;
    color: var(--form-text-color, #222);
    height: 48px;
}

.template-1 .popup-consent {
    color: var(--form-text-color, #666);
    opacity: 0.8;
    margin-top: 8px;
    font-size: 11px;
    line-height: 1.3;
}

.template-1 .popup-consent input[type="checkbox"] {
    margin-right: 6px;
    width: 14px;
    height: 14px;
}

/* Fix phone input layout */
.template-1 .phone-group input[type="tel"] {
    flex: 1;
    width: auto;
}

/* Slimmer submit button for template-1 */
.template-1 .popup-submit-btn {
    padding: 14px;
    font-size: 15px;
    margin-top: 6px;
}

/* Mobile compact - even slimmer */
@media (max-width: 480px) {
    .popup-form-modal.template-1 {
        padding: 20px 15px;
        max-width: 90%;
        width: 100%;
        margin: auto;
    }

    .template-1 .popup-title {
        font-size: 20px;
        margin-bottom: 15px;
    }

    .template-1 .form-group {
        margin-bottom: 8px;
    }

    .template-1 input[type="text"],
    .template-1 input[type="email"],
    .template-1 input[type="tel"],
    .template-1 select,
    .template-1 .form-select-qualifier {
        padding: 12px 14px;
        font-size: 15px;
        height: 48px;
    }

    .template-1 .iti input[type="tel"] {
        height: 48px;
    }

    .template-1 .popup-consent {
        font-size: 10px;
        margin-top: 8px;
    }
}

/* Removed specific gold background to allow Global Button Color to apply */
.popup-submit-btn,
.template-1 .popup-submit-btn,
.template-3 .popup-submit-btn,
.template-4 .popup-submit-btn {
    background: var(--color-btn-bg);
    color: var(--color-btn-text);
    border: none;
    transition: all 0.3s ease;
}

.popup-submit-btn:hover {
    opacity: 0.9;
    transform: translateY(-2px);
}

/* Template 2 Gradient Button (Using Global as Start) */
.template-2 .gradient-btn {
    background: var(--color-btn-bg);
    color: var(--color-btn-text);
    border: none;
}

/* Template 2 Logo: Force Center */
/* Template 2 Specific Mobile Alignment */
@media (max-width: 767px) {
    .template-2 .phone-group {
        gap: 5px !important;
    }

    .template-2 .country-code-select {
        width: 80px !important;
        font-size: 13px !important;
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    .template-2 .phone-group input[type="tel"] {
        flex: 1 !important;
        font-size: 13px !important;
    }

    .template-2 .popup-content-wrap {
        padding: 20px 15px !important;
    }

    .template-2 .popup-headline {
        font-size: 18px !important;
    }
}

.template-2 .popup-logo {
    margin-bottom: 15px;
    text-align: center;
    display: flex;
    justify-content: center;
    width: 100%;
}

/* Mobile compact */
@media (max-width: 480px) {
    .popup-form-modal.template-1 {
        padding: 25px 20px;
    }
}

/* --- Template 2: Simple White (Centered) - Slimmer Design --- */
.popup-form-modal.template-2 {
    max-width: 420px;
    padding: 0;
    overflow: hidden;
}

.popup-header-strip {
    background: #e74c3c;
    color: #fff;
    text-align: center;
    padding: 8px;
    font-weight: 700;
    font-size: 13px;
    animation: flash 2s infinite;
}

@keyframes flash {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.8;
    }
}

.template-2 .popup-content-wrap {
    padding: 15px 20px 10px;
    text-align: center;
}

.template-2 .popup-logo {
    margin-bottom: 8px;
    text-align: center;
    display: flex;
    justify-content: center;
    width: 100%;
}

.template-2 .popup-headline {
    font-size: 17px;
    color: #333;
    margin-bottom: 3px;
    line-height: 1.3;
}

.template-2 .popup-subhead {
    font-size: 12px;
    color: #666;
    margin-bottom: 12px;
    font-style: italic;
}

/* Template 2 form groups - minimal spacing */
.template-2 .form-group {
    margin-bottom: 5px;
}

.template-2 .input-light {
    background: #f9f9f9;
    border-color: #eee;
}

/* Template 2 Select Dropdowns (Budget/BHK) - Match input styling */
.template-2 .form-select-qualifier.input-light {
    width: 100%;
    padding: 12px 36px 12px 14px;
    border: none;
    border-radius: 6px;
    background: #e8e8e8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E") no-repeat right 14px center;
    appearance: none;
    -webkit-appearance: none;
    font-size: 14px;
    font-family: var(--font-secondary, 'Poppins', sans-serif);
    color: #333;
    cursor: pointer;
    box-sizing: border-box;
    height: 44px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    transition: all 0.2s ease;
}

/* Fix: Placeholder color for Select */
.template-2 select:invalid,
.template-2 .form-select-qualifier:invalid {
    color: rgba(0, 0, 0, 0.4) !important;
}


.template-2 .form-select-qualifier.input-light:focus {
    background: #e0e0e0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E") no-repeat right 14px center;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
    outline: none;
}

.template-2 .form-select-qualifier.input-light option {
    background: #fff;
    color: #333;
}

.template-2 .gradient-btn {
    color: var(--color-btn-text);
    background-size: 200% auto;
    transition: 0.5s;
    padding: 12px;
    font-size: 15px;
    margin-top: 5px;
    margin-bottom: 5px;
}

/* Template 2 Consent Text */
.template-2 .popup-consent {
    font-size: 10px;
    color: #666;
    line-height: 1.3;
    margin-top: 5px;
    margin-bottom: 5px;
    display: block;
    text-align: center;
}

/* Template 2 Trust Badges - more compact */
.template-2~.popup-trust-badges,
.template-2 .popup-trust-badges {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 8px;
    font-size: 10px;
    color: #27ae60;
    font-weight: 600;
    border-top: 1px solid #eee;
    padding-top: 8px;
}

/* Template 2 Logo Sizing */
.template-2 .popup-logo img {
    width: var(--popup-logo-width, 200px);
    max-width: 100%;
    height: auto;
    transition: width 0.3s ease;
    margin: 0 auto;
    /* Ensure centering */
    display: block;
}

@media (max-width: 480px) {
    .template-2 .popup-logo img {
        max-width: 80%;
    }

    .popup-form-modal.template-2 {
        max-width: 340px;
    }

    .template-2 .popup-content-wrap {
        padding: 15px 20px;
    }

    .template-2 .popup-headline {
        font-size: 16px;
    }

    .template-2 .popup-subhead {
        font-size: 12px;
        margin-bottom: 12px;
    }

    .template-2 .form-group {
        margin-bottom: 6px;
    }

    .popup-trust-badges {
        font-size: 9px;
        gap: 8px;
        margin-top: 12px;
        padding-top: 10px;
    }
}

.template-2 .gradient-btn:hover {
    background-position: right center;
}

.popup-trust-badges {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 15px;
    font-size: 10px;
    color: #27ae60;
    font-weight: 600;
    border-top: 1px solid #eee;
    padding-top: 12px;
}

/* --- Template 3: Split (Image + Form) - Fixed Design --- */
.popup-form-modal.template-3 {
    max-width: 800px;
    padding: 0;
    overflow: hidden;
    background: #fff;
    display: flex;
    flex-direction: row;
}

.popup-split-grid {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

/* Left: Image Column */
.popup-image-col {
    flex: 1;
    position: relative;
    background: var(--color-navy);
    min-height: 350px;
}

.popup-split-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0.5;
    position: absolute;
    top: 0;
    left: 0;
}

/* Right: Form Column */
.popup-form-col {
    flex: 1;
    padding: 15px 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    background: var(--color-navy, var(--color-navy));
    color: #fff;
    min-height: auto;
    overflow-y: auto;
}

.popup-form-col .popup-title {
    color: #fff !important;
    font-size: 16px;
    margin-bottom: 10px;
    font-weight: 700;
    text-align: left;
}

/* Form groups - minimal spacing */
.template-3 .form-group {
    margin-bottom: 4px;
}

/* Template 3 Inputs - compact design */
.template-3 .input-line {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 8px 10px;
    width: 100%;
    margin-bottom: 0;
    border-radius: 4px;
    color: #fff;
    font-size: 13px;
    transition: all 0.3s ease;
    box-sizing: border-box;
    height: 38px;
}

.template-3 .input-line:focus {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.4);
    outline: none;
}

/* Placeholder color - consistent */
.template-3 .input-line::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

select.input-line {
    color: rgba(255, 255, 255, 0.8) !important;
    cursor: pointer;
    height: 38px;
}

select.input-line option {
    background: var(--color-navy);
    color: #fff;
}

/* Template 3 Select Dropdowns (Budget/BHK) - Match input styling */
.template-3 .form-select-qualifier.input-line {
    background: rgba(255, 255, 255, 0.1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8L1 3h10z'/%3E%3C/svg%3E") no-repeat right 10px center;
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 8px 30px 8px 10px;
    width: 100%;
    margin-bottom: 0;
    border-radius: 4px;
    color: #fff;
    font-size: 13px;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    box-sizing: border-box;
    transition: all 0.3s ease;
    height: 38px;
}

/* Fix: Placeholder color for Select */
.template-3 select:invalid,
.template-3 .form-select-qualifier:invalid {
    color: rgba(255, 255, 255, 0.6) !important;
}


.template-3 .form-select-qualifier.input-line:focus {
    background: rgba(255, 255, 255, 0.15) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8L1 3h10z'/%3E%3C/svg%3E") no-repeat right 10px center;
    border-color: rgba(255, 255, 255, 0.4);
    outline: none;
}

.template-3 .form-select-qualifier.input-line option {
    background: var(--color-navy);
    color: #fff;
}

/* Phone Input Group */
.template-3 .phone-input-group {
    margin-bottom: 4px;
}

/* Button - more compact */
.popup-submit-btn.dark-btn {
    background: var(--color-btn-bg) !important;
    color: var(--popup-btn-text, var(--color-navy)) !important;
    width: 100%;
    padding: 10px;
    font-weight: 700;
    font-size: 14px;
    border-radius: 4px;
    margin-top: 6px;
    margin-bottom: 6px;
    border: none;
    cursor: pointer;
}

/* Consent text wrapper - compact */
.popup-consent-wrap {
    margin-top: 6px;
    margin-bottom: 4px;
}

/* Consent Text - visible and compact */
.template-3 .popup-consent {
    color: rgba(255, 255, 255, 0.9);
    font-size: 10px;
    line-height: 1.3;
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

.template-3 .popup-consent input[type="checkbox"] {
    margin: 0;
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    margin-top: 1px;
}

.template-3 .popup-consent span {
    flex: 1;
}

.template-3 .popup-close {
    color: #fff;
    opacity: 0.8;
}

.template-3 .popup-close:hover {
    opacity: 1;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .popup-split-grid {
        flex-direction: column;
        height: auto;
        max-height: 85vh;
        overflow-y: auto;
    }

    .popup-image-col {
        width: 100%;
        height: 180px;
        min-height: auto;
    }

    .popup-form-col {
        width: 100%;
        padding: 15px 20px;
        min-height: auto;
    }

    .template-3 .popup-title {
        font-size: 16px;
        margin-bottom: 12px;
    }

    .template-3 .form-group {
        margin-bottom: 5px;
    }

    .template-3 .input-line {
        padding: 8px 10px;
        font-size: 13px;
    }

    .popup-consent-wrap {
        margin-top: 10px;
    }

    .template-3 .popup-consent {
        font-size: 10px;
    }
}

.popup-header-strip {
    background: #e74c3c;
    color: #fff;
    text-align: center;
    padding: 10px;
    font-weight: 700;
    font-size: 14px;
    animation: flash 2s infinite;
}

@keyframes flash {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.8;
    }
}

.template-2 .popup-content-wrap {
    padding: 30px 40px;
    text-align: center;
}

.template-2 .popup-logo {
    margin-bottom: 15px;
    text-align: center;
    display: flex;
    justify-content: center;
    width: 100%;
}

.template-2 .popup-headline {
    font-size: 20px;
    color: #333;
    margin-bottom: 5px;
    line-height: 1.3;
}

.template-2 .popup-subhead {
    font-size: 14px;
    color: #666;
    margin-bottom: 25px;
    font-style: italic;
}

.template-2 .input-light {
    background: #f9f9f9;
    border-color: #eee;
}

.template-2 .gradient-btn {
    color: var(--color-btn-text);
    background-size: 200% auto;
    transition: 0.5s;
}

/* Template 2 Logo Sizing */
.template-2 .popup-logo img {
    width: var(--popup-logo-width, 200px);
    max-width: 100%;
    height: auto;
    transition: width 0.3s ease;
    margin: 0 auto;
    /* Ensure centering */
    display: block;
}

@media (max-width: 480px) {
    .template-2 .popup-logo img {
        max-width: 80%;
    }
}

.template-2 .gradient-btn:hover {
    background-position: right center;
}

.popup-trust-badges {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 20px;
    font-size: 11px;
    color: #27ae60;
    font-weight: 600;
    border-top: 1px solid #eee;
    padding-top: 15px;
}

/* --- Template 3: Split (Image + Form) --- */
/* --- Template 3 (Split Layout - Premium Navy) --- */
.popup-form-modal.template-3 {
    max-width: 900px;
    padding: 0;
    overflow: hidden;
    background: #fff;
    /* Container bg */
    display: flex;
    flex-direction: row;
}

.popup-split-grid {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

/* Left: Image Column */
.popup-image-col {
    flex: 1;
    position: relative;
    background: var(--color-navy);
}

.popup-split-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0.5;
    /* Darken image for overlay text */
}

/* Right: Form Column (Navy Theme) */
.popup-form-col {
    flex: 1;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--color-navy, var(--color-navy));
    /* Navy Background */
    color: #fff;
    /* White Text */
}

.popup-form-col .popup-title {
    color: #fff !important;
    /* Force White */
    font-size: 24px;
    margin-bottom: 30px;
    font-weight: 700;
    text-align: left;
    /* Align left for premium feel */
}

/* Labels */
.popup-form-col label {
    font-size: 11px;
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 5px;
    display: block;
    font-weight: 600;
}

/* Premium Input Lines */
.template-3 .input-line {
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    padding: 10px 0;
    width: 100%;
    margin-bottom: 20px;
    border-radius: 0;
    color: #fff;
    font-size: 16px;
    transition: all 0.3s ease;
}

.template-3 .input-line:focus {
    border-bottom-color: #fff;
    outline: none;
}

.template-3 .input-line::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

select.input-line {
    color: rgba(255, 255, 255, 0.6) !important;
}

select.input-line option {
    color: #333 !important;
}

/* Phone Row Alignment */
.phone-row {
    display: flex;
    align-items: center;
    /* Vertical alignment */
    gap: 15px;
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    margin-bottom: 20px;
}

/* Style the Select/Input inside phone row to share the border */
.phone-row .input-line {
    border-bottom: none;
    /* Remove individual borders */
    margin-bottom: 0;
    padding: 8px 0;
}

.phone-row .country-code-select {
    background: transparent;
    border: none;
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    width: auto;
    cursor: pointer;
    min-width: 80px;
}

.phone-row .country-code-select option {
    background: var(--color-navy);
    /* Dark bg for dropdown options */
    color: #fff;
}

/* Button */
.popup-submit-btn.dark-btn {
    background: var(--color-btn-bg) !important;
    color: var(--popup-btn-text, #ffffff) !important;
    width: 100%;
    padding: 15px;
    font-weight: 700;
    font-size: 16px;
    border-radius: 4px;
    /* Slight rounding */
    margin-top: 10px;
    transition: transform 0.2s;
    border: none;
}

.popup-submit-btn.dark-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* Consent Text */
.popup-consent.x-small-text {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 20px;
    display: block;
    line-height: 1.4;
}

/* Mobile Optimization */
/* Mobile Optimization */
@media (max-width: 768px) {
    .popup-split-grid {
        flex-direction: column;
    }

    .popup-image-col {
        display: none;
        /* Keep hidden */
    }

    .popup-form-col {
        padding: 20px 15px;
        /* Reduce padding for compactness */
    }

    .popup-form-col .popup-title {
        font-size: 20px;
        margin-bottom: 15px;
        text-align: center;
    }

    /* Reduce spacing between fields */
    .template-3 .input-line,
    .phone-row {
        margin-bottom: 12px;
    }

    /* Ensure Label is tight above input */
    .popup-form-col label {
        margin-bottom: 4px;
        font-size: 12px;
        display: block !important;
        width: 100% !important;
        text-align: left !important;
    }

    /* Fix Phone Row Mobile Appearance */
    .phone-row,
    .popup-split-grid .form-group,
    .popup-split-grid p {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        margin-bottom: 12px;
    }

    .template-3 .input-line,
    .phone-row .iti {
        width: 100% !important;
    }

    .phone-row {
        margin-top: 0;
        border-bottom: none;
    }

    /* Re-add border to the input container since we broke the row */
    .phone-row input {
        border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    }

    .phone-row {
        display: flex;
        align-items: center;
        width: 100%;
        margin-top: 5px;
        /* Add small space between label and input */
    }

    .popup-submit-btn.dark-btn {
        margin-top: 10px;
        padding: 12px;
    }
}
/* ==========================================================================
   Section: Location Advantages (Dual-Template)
   ========================================================================== */

/* Side-by-Side Split Layout */
.location-dual-layout {
    display: flex;
    gap: 40px;
    margin-top: 30px;
    align-items: stretch;
}

.location-interactive-pane {
    flex: 1;
    min-width: 0; /* Prevent flex overflow */
}

.location-map-pane {
    flex: 1;
    min-height: 420px;
    border-radius: 8px;
    overflow: hidden;
}

.location-map-pane iframe,
.location-map-pane img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Template 1: Original Single List */
.location-points.t1-single-list {
    padding: 0;
    margin: 0;
    list-style: none;
}

/* Tab Pane Show / Hide */
.loc-tab-pane {
    display: none;
    animation: fadeIn 0.35s ease;
}

.loc-tab-pane.active {
    display: block;
}

/* Shared List Reset */
.loc-premium-list {
    padding: 0;
    margin: 0;
    list-style: none;
}

.loc-premium-list li:last-child,
.t1-single-list li:last-child {
    border-bottom: none;
}

/* Navigation Tabs for Location */
.loc-tabs-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
    padding-bottom: 10px;
}

.loc-tab-btn {
    flex: 0 0 auto; /* Prevent shrinking */
    background: #fdfaf3;
    border: 1px solid #e5dfd4;
    color: var(--color-navy);
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.3s ease;
}

.loc-tab-btn.active {
    background: var(--color-navy);
    color: #fff;
    border-color: var(--color-navy);
}

/* List Items Refresh */
.loc-premium-list li, 
.location-points.t1-single-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid #f0f0f0;
    gap: 15px;
}

.loc-item-left, .loc-name-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.loc-pin-icon {
    width: 20px;
    height: 20px;
    color: var(--color-gold);
    flex-shrink: 0;
}

.loc-item-name, .loc-name {
    font-size: 15px;
    font-weight: 500;
    color: var(--color-navy);
    line-height: 1.4;
}

.loc-item-time, .loc-dist {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-gold);
    background: #fffcf5;
    border: 1px solid #f9f2e5;
    padding: 4px 10px;
    border-radius: 4px;
    white-space: nowrap;
}

/* Map Overlay */
.loc-map-overlay {
    position: absolute;
    inset: 0;
    background: rgba(var(--color-navy-rgb), 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transition: background 0.3s ease;
}

.location-map-wrapper:hover .loc-map-overlay {
    background: rgba(var(--color-navy-rgb), 0.2);
}

.loc-overlay-btn {
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
}

.location-map-wrapper:hover .loc-overlay-btn {
    opacity: 1;
    transform: translateY(0);
}

/* Response Fixes */
@media (max-width: 1024px) {
    .location-dual-layout {
        flex-direction: column-reverse; /* List on top, Map on bottom for mobile */
        gap: 25px;
    }
    .location-map-pane {
        min-height: 300px;
    }
}

@media (max-width: 480px) {
    .location-section {
        padding: 40px 0;
    }
    .loc-tabs-nav {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    .loc-tab-btn {
        padding: 10px 12px;
        font-size: 12px;
        text-align: center;
        white-space: normal;
    }
    .loc-item-name, .loc-name {
        font-size: 14px;
    }
    .loc-item-time, .loc-dist {
        font-size: 11px;
    }
    .loc-overlay-btn {
        opacity: 1;
        transform: none;
        font-size: 12px;
        padding: 8px 15px;
    }
}

/* --- GLOBAL CONSENT TEXT (Small) --- */
.popup-consent {
    font-size: 9px !important;
    color: #888;
    line-height: 1.3;
    display: block;
    margin-top: 10px;
}

/* --- Template 4: Pill Design (New Update) --- */
.popup-form-modal.template-4-new {
    max-width: 480px;
    padding: 0;
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
    border: none;
}

.popup-form-modal.template-4-new .popup-close-circle {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 35px;
    height: 35px;
    background: #eee;
    color: #888;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    z-index: 10;
    transition: all 0.2s ease;
}

.popup-form-modal.template-4-new .popup-close-circle:hover {
    background: #ddd;
    color: #333;
}

.template-4-new .popup-content-wrap {
    padding: 30px 40px;
    text-align: center;
}

.template-4-new .popup-logo-centered {
    margin-bottom: 25px;
}

.template-4-new .popup-logo-centered img {
    width: var(--popup-logo-width, 180px);
    max-width: 100%;
    height: auto;
    display: inline-block;
}

.template-4-new .popup-headline-mixed {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 25px;
    line-height: 1.4;
}

.template-4-new .part-black {
    color: #000;
}

.template-4-new .part-red {
    color: #e74c3c;
    /* Red color from image */
}

/* Pill Inputs */
.template-4-new .pill-input {
    background: #f1f3f6;
    border: 1px solid #e1e4e8;
    border-radius: 50px;
    padding: 12px 25px;
    font-size: 15px;
    color: #333;
    width: 100%;
}

.template-4-new .pill-input::placeholder {
    color: #888;
}

/* Phone Group Pill */
.phone-group-pill-new {
    display: flex;
    gap: 10px;
    align-items: center;
}

.flag-pill {
    display: flex;
    align-items: center;
    background: #f1f3f6;
    /* Match input bg */
    border: 1px solid #e1e4e8;
    border-radius: 50px;
    padding: 0 5px;
    height: 47px;
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
    width: 100px;
    /* Fixed width for better alignment */
}

/* Custom Select Styling */
.country-code-select-pill {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: none;
    width: 100%;
    height: 100%;
    font-weight: 700;
    color: #333;
    padding: 0 10px;
    font-size: 14px;
    cursor: pointer;
    outline: none;
}

/* Mobile Styling for New Template 4 */
@media (max-width: 480px) {
    .template-4-new .popup-content-wrap {
        padding: 25px 20px;
    }

    .template-4-new .popup-headline-mixed {
        font-size: 17px;
    }

    .phone-group-pill-new {
        gap: 8px;
    }

    .flag-pill {
        width: 90px;
        font-size: 13px;
    }

    .template-4-new .pill-btn {
        width: 100%;
        min-width: unset;
    }

    .popup-bottom-strip {
        font-size: 16px;
    }
}

/* Bottom Navy Strip */
.popup-bottom-strip {
    background: var(--color-navy, var(--color-navy));
    color: #fff;
    display: block;
    text-align: center;
    padding: 12px;
    text-decoration: none;
    font-size: 20px;
    font-weight: 700;
}

.popup-bottom-strip:hover {
    color: #fff;
    opacity: 0.9;
}

/* Mobile Styling for New Template 4 */
@media (max-width: 480px) {
    .template-4-new .popup-content-wrap {
        padding: 25px 20px;
    }

    .template-4-new .popup-headline-mixed {
        font-size: 17px;
    }

    .phone-group-pill-new {
        gap: 8px;
    }

    .flag-pill {
        padding: 0 10px;
        font-size: 13px;
    }

    .template-4-new .pill-btn {
        width: 100%;
        min-width: unset;
    }

    .popup-bottom-strip {
        font-size: 16px;
    }
}

/* --- Template 4: Elegant Style (Redesign) --- */
.popup-form-modal.template-4 {
    max-width: 450px;
    padding: 0;
    overflow: hidden;
    background: #fff;
    border-radius: 12px;
    position: relative;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
}

/* Header Strip (Scarcity) */
.popup-header-strip {
    background: #e74c3c;
    /* Salmon Red */
    color: #fff;
    font-weight: 700;
    text-align: center;
    padding: 12px 30px;
    font-size: 14px;
    position: relative;
}

.template-4 .popup-close {
    color: #fff;
    top: 50%;
    transform: translateY(-50%);
    right: 15px;
    font-size: 24px;
    opacity: 0.9;
}

.template-4 .popup-content-wrap {
    padding: 25px 30px;
    text-align: center;
}

/* Typography */
.template-4 .popup-logo-wrap {
    margin-bottom: 15px;
    display: flex;
    justify-content: center;
}

.template-4 .popup-logo-wrap img {
    max-height: 50px;
    width: auto;
}

.template-4 .popup-headline {
    font-family: 'Playfair Display', serif;
    font-size: 24px;
    font-weight: 700;
    color: #333;
    margin-bottom: 5px;
}

.template-4 .popup-subhead {
    font-family: 'Poppins', sans-serif;
    font-style: italic;
    color: #777;
    font-size: 14px;
    margin-bottom: 20px;
}

/* Form Styles */
.template-4 input {
    background: #fff;
    border: 1px solid #e1e1e1;
    border-radius: 6px;
    padding: 12px;
    font-size: 14px;
    color: #333;
    width: 100%;
}

.template-4 input:focus {
    border-color: #333;
}

/* Phone Group (Pill) */
.phone-group-pill {
    display: flex;
    gap: 10px;
    align-items: center;
}

.country-pill {
    background: #f8f9fa;
    border: 1px solid #e1e1e1;
    border-radius: 6px;
    padding: 0 12px;
    height: 47px;
    /* Match input height */
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    color: #333;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

.phone-group-pill input[type="tel"] {
    flex: 1;
    /* Allow input to fill space */
    width: auto;
    /* Override fixed width */
}

/* Trust Badges Footer */
.popup-footer-badges {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #eee;
    font-size: 11px;
    color: var(--color-cta-green);
    font-weight: 600;
    flex-wrap: wrap;
}

.badge-item i {
    margin-right: 3px;
}

/* Template 4 Mobile */
@media (max-width: 480px) {
    .popup-header-strip {
        font-size: 12px;
        padding: 10px 30px 10px 15px;
    }

    .template-4 .popup-content-wrap {
        padding: 20px;
    }

    .template-4 .popup-headline {
        font-size: 20px;
    }

    .popup-footer-badges {
        gap: 10px;
        font-size: 10px;
    }
}

.popup-split-grid {
    display: flex;
    flex-direction: row;
    /* Desktop: Row */
    height: 500px;
    /* Fixed height for desktop split */
}

/* Image Column */
.popup-image-col {
    position: relative;
    width: 50%;
    height: 100%;
    overflow: hidden;
}

.popup-split-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Image Overlay */
.popup-image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 40%, rgba(0, 0, 0, 0.9) 100%);
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #fff;
}

.overlay-top {
    text-align: center;
    margin-top: 20px;
}

.overlay-project {
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 5px;
    color: rgba(255, 255, 255, 0.9);
}

.overlay-tagline {
    font-family: var(--font-primary);
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 5px;
    line-height: 1.2;
}

.overlay-location {
    font-size: 13px;
    opacity: 0.8;
}

.overlay-bottom {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.popup-offer-badge {
    background: #e74c3c;
    color: #fff;
    padding: 10px 15px;
    border-radius: 4px;
    /* Rectangular strip */
    clip-path: polygon(0 0, 100% 0, 95% 100%, 0% 100%);
    /* Slight angle effect optionally */
    border-left: 4px solid #c0392b;
}

.badge-text {
    display: block;
    font-size: 12px;
    font-weight: 500;
}

.badge-sub {
    display: block;
    font-size: 14px;
    font-weight: 700;
}

.overlay-price-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
}

.config-text {
    font-weight: 600;
}

.price-text {
    font-weight: 700;
    font-size: 18px;
}

/* Form Column - Updated styles above, these are old duplicates */
.popup-form-col {
    width: 50%;
    padding: 40px 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--color-navy);
}

/* Old Template 3 styles - replaced by newer slimmer design above */
.template-3 .popup-title {
    color: #fff;
    font-size: 24px;
    margin-bottom: 25px;
    text-align: center;
    line-height: 1.3;
}

/* Inputs in Template 3 - see updated .input-line styles above */
.template-3 input,
.template-3 select,
.template-3 textarea {
    /* Styles defined in newer section with .input-line class */
}

.template-3 input::placeholder {
    /* Placeholder styles defined in newer section */
}

.template-3 .popup-submit-btn {
    /* Button styles defined in newer section */
}

.template-3 .popup-submit-btn:hover {
    /* Hover styles defined in newer section */
}

/* Consent checkbox text - updated styles above */
.template-3 .popup-consent {
    /* See updated styles in newer section */
}

.template-3 .popup-close {
    color: #fff;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .popup-split-grid {
        flex-direction: column;
        height: auto;
        max-height: 85vh;
        /* Prevent full screen takeover */
        overflow-y: auto;
    }

    .popup-image-col {
        width: 100%;
        height: 200px;
        /* Reduce height from 250px */
    }

    .popup-form-col {
        width: 100%;
        padding: 20px 20px;
        /* Compact padding */
    }

    .template-3 .popup-title {
        color: #fff;
        /* White title on Navy */
        font-size: 24px;
        margin-bottom: 25px;
        text-align: center;
        line-height: 1.3;
    }

    /* Inputs in Template 3 (Navy background) */
    .template-3 input,
    .template-3 select,
    .template-3 textarea {
        background: #fff;
        /* White pills */
        border: none;
        border-radius: 6px;
        color: #333;
        padding: 12px 15px;
        margin-bottom: 12px;
    }

    .template-3 input::placeholder {
        color: #999;
    }

    .template-3 .popup-submit-btn {
        background: var(--color-btn-bg);
        /* Cream/Gold button */
        color: var(--color-btn-text);
        font-weight: 700;
        text-transform: uppercase;
        border: 2px solid var(--color-btn-border);
    }

    .template-3 .popup-submit-btn:hover {
        background: var(--color-btn-hover);
        color: #fff;
    }

    /* Consent checkbox text */
    .template-3 .popup-consent {
        color: rgba(255, 255, 255, 0.6);
    }

    .template-3 .popup-close {
        color: #fff;
    }
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .popup-split-grid {
        flex-direction: column;
        height: auto;
        max-height: 85vh;
        /* Prevent full screen takeover */
        overflow-y: auto;
    }

    .popup-image-col {
        width: 100%;
        height: 200px;
        /* Reduce height from 250px */
    }

    .popup-form-col {
        width: 100%;
        padding: 20px 20px;
        /* Compact padding */
    }

    .template-3 .popup-title {
        font-size: 20px;
        margin-bottom: 20px;
    }
}

/* --- Template 4 Mobile Optimization (Compact) --- */
@media (max-width: 480px) {
    .popup-form-modal.template-4 {
        margin: 10px;
        /* Some margin */
        width: calc(100% - 20px);
        max-height: 90vh;
        /* Prevent overflow */
        overflow-y: auto;
    }

    .template-4 .popup-content-wrap {
        padding: 20px 20px 15px;
        /* Compact padding */
    }

    .template-4 .popup-logo-wrap {
        margin-bottom: 10px;
    }

    /* Logo Logic: Scale naturally but cap */
    .template-4 .popup-logo-wrap img {
        max-width: 180px;
        /* Absolute cap for mobile */
        /* width: var(--popup-logo-width) is respected up to this cap */
    }

    .template-4 .popup-headline {
        font-size: 16px;
        /* Smaller headline */
        margin-bottom: 15px;
        line-height: 1.3;
    }

    /* Compact Inputs */
    .template-4 .round-input,
    .country-pill {
        padding: 10px 15px;
        /* Smaller padding */
        font-size: 13px;
        height: 42px;
        /* Fix height */
    }

    .template-4 input,
    .template-4 select {
        margin-bottom: 10px;
        /* Reduced gap */
    }

    .phone-group-pill {
        gap: 8px;
    }

    .template-4 .popup-submit-btn {
        padding: 12px 20px;
        font-size: 14px;
        margin-top: 5px;
        width: 100%;
    }

    .template-4 .popup-consent {
        font-size: 9px;
        margin-top: 10px;
    }

    .popup-phone-strip {
        font-size: 16px;
        padding: 12px;
    }
}

/* (Removed outdated/dangling CSS) */


/* ==========================================================================
   RESPONSIVE — HERO + POPUP
   ========================================================================== */

@media (max-width: 991px) {

    /* Hero stacks vertically on mobile */
    .hero-section {
        height: auto;
        min-height: auto;
    }

    .hero-slider {
        position: relative;
        height: 435px;
    }

    .hero-arrows {
        bottom: 20px;
        left: auto;
        right: 20px;
    }

    .hero-arrow {
        width: 45px;
        height: 45px;
    }

    .hero-overlay-container {
        position: relative;
        flex-direction: column;
        padding: 0;
        height: auto;
    }

    /* Car Badge Icon White */
    .car-badge-icon svg,
    .car-badge-icon path {
        fill: #ffffff !important;
    }

    .hero-info-card {
        max-width: 100%;
        width: 100%;
        margin: 0;
        /* Ensure no margin */
    }

    .hero-info-card-inner {
        background: var(--color-bg-cream, #f5f0e8);
        backdrop-filter: none;
        border-radius: 0;
        padding: 40px 20px;
        border: none;
        text-align: left;
        width: 100%;
    }

    .hero-location {
        color: var(--color-navy);
        font-size: var(--hero-subhead-size-mob, 14px);
        justify-content: center;
    }

    /* Car Badge Icon - Default White */
    .car-badge-icon svg,
    .car-badge-icon path {
        fill: #ffffff !important;
    }

    .hero-project-name {
        color: var(--color-navy);
        font-size: 32px;
        text-align: center;
    }

    .hero-highlights {
        margin-top: 15px;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .hero-highlight-pill {
        background: rgba(245, 240, 232, 0.95);
        /* Cream background */
        color: #333;
        /* Dark text */
        border-radius: 8px;
        /* Less rounded */
        padding: 8px 14px;
        /* Slim padding */
        border: none;
        width: 100%;
        justify-content: flex-start;
        /* Left-align */
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
        /* Subtle shadow */
        display: flex;
        align-items: center;
        gap: 12px;
        font-weight: 500;
    }

    .hero-highlight-icon svg {
        fill: var(--color-gold);
        /* Gold icons to match desktop */
    }

    .hero-meta-pills {
        flex-direction: column;
        align-items: center;
        gap: 12px;
        width: 100%;
        margin-top: 15px;
    }

    .hero-meta-pill {
        width: 100%;
        text-align: center;
        padding: 16px 20px;
        background: #fff;
        border: none;
        border-radius: 12px;
        font-size: 16px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    }

    /* Target the Tagline Pill */
    .hero-meta-typology {
        font-size: var(--tagline-size-mob, 16px);
    }

    /* Target the Price Pill to stay highlighted */
    .hero-meta-pill:nth-last-child(1),
    .hero-meta-price {
        font-size: var(--price-size-mob, 18px);
        color: var(--price-color, #e74c3c);
        font-weight: 800;
        border: 2px solid var(--price-color, #e74c3c);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    }

    .hero-brochure-btn {
        display: flex;
        margin: 15px auto 0;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        max-width: 280px;
        padding: 14px 10px;
        font-size: 13px !important;
        letter-spacing: 0.5px;
        white-space: nowrap;
    }

    /* Mobile Form Spacing - Clean Stack */
    .hero-contact-form-wrap {
        margin-top: 20px !important;
        padding: 0 !important;
        width: 100%;
        max-width: 100%;
    }

    .hero-contact-form {
        background: rgba(var(--color-inpage-form-bg-rgb), 0.95);
        backdrop-filter: blur(5px);
        border-radius: 12px;
        /* Keep consistent rounding */
        border: 1px solid rgba(255, 255, 255, 0.15);
        padding: 30px 20px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    }

    /* Ensure Select is readable and clickable */
    .hero-contact-form select {
        background-color: rgba(255, 255, 255, 0.1);
        color: #fff;
        border: 1px solid rgba(255, 255, 255, 0.2);
    }

    .hero-contact-form select option {
        color: #000;
        /* Dark text in dropdown options */
    }

    .hero-form-title {
        border-color: rgba(255, 255, 255, 0.4);
    }

    /* Car badge hidden on mobile */
    .car-badge {
        display: none;
    }
}

/* Icon Zoom Animation */
@keyframes zoomInOut {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

.zoom-icon {
    margin-left: 8px;
    animation: zoomInOut 2s infinite ease-in-out;
}


.overview-section {
    background-color: var(--color-bg-cream, #f5f0e8);
    padding: var(--section-padding);
}

/* ==========================================================================
   GLOBAL SECTION HEADING TYPOGRAPHY
   (Mandatory for all new sections to maintain 100% consistency)
   ========================================================================== */

/* Wrapper for centering headers (optional, defaults to centered) */
.section-header {
    text-align: center;
    margin-bottom: 40px;
}

/* Shared section label (The small, italicized red/gold sub-heading) */
.section-label {
    display: inline-block;
    font-family: var(--font-secondary);
    font-size: 14px;
    font-weight: 500;
    color: var(--color-gold, #c9a84c);
    /* Updated to theme accent instead of navy */
    text-transform: capitalize;
    font-style: italic;
    margin-bottom: 15px;
    letter-spacing: 0.5px;
}

/* Shared section heading (The massive primary section text) */
.section-title {
    font-family: var(--font-primary);
    font-size: 36px;
    /* Globally increased for better hierarchy */
    font-weight: 700;
    color: var(--color-navy, var(--color-navy));
    line-height: 1.25;
    margin: 0 0 8px;
    /* Small bottom margin so paragraph sits close */
}

/* Overview: left-align the 'Overview' italic label (matching all other sections) */
.overview-text .section-label {
    display: block;
    text-align: left;
    margin-bottom: 8px;
}

/* Overview: left-align the main heading too (global .section-title is center) */
.overview-text .section-title {
    text-align: left;
}

/* Base overview specific grid overrides */
.overview-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

.overview-content {
    font-family: var(--font-secondary);
    font-size: 15px;
    line-height: 1.85;
    color: var(--color-navy);
    text-align: justify;
    margin-bottom: 30px;
}

.overview-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--color-btn-bg);
    color: var(--color-btn-text);
    border: 2px solid var(--color-btn-border);
    padding: 14px 32px;
    border-radius: 30px;
    font-family: var(--font-secondary);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.overview-btn:hover {
    background: var(--color-btn-hover);
    opacity: 0.9;
    transform: translateY(-2px);
    background: var(--color-btn-hover);
    border-color: var(--color-navy-light);
    color: #fff;
}

.overview-btn svg {
    flex-shrink: 0;
}

.overview-image-wrap {
    display: flex;
    justify-content: flex-end;
}

.overview-image {
    width: 100%;
    max-width: 520px;
    border-radius: 16px;
    object-fit: cover;
    display: block;
}

.overview-image-placeholder {
    width: 100%;
    max-width: 520px;
    height: 400px;
    background: rgba(var(--color-navy-rgb), 0.08);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--color-navy);
    font-family: var(--font-secondary);
    font-size: 14px;
}

/* ==========================================================================
   HIGHLIGHTS SECTION
   ========================================================================== */

.highlights-section {
    background-color: var(--color-bg-cream, #f5f0e8);
    padding: var(--section-padding);
    /* Was 0 0 80px — top was missing, causing gap */
}

.highlights-header {
    text-align: center;
    margin-bottom: 40px;
}

.highlights-headline {
    font-family: var(--font-primary);
    font-size: 32px;
    font-weight: 700;
    color: var(--color-navy);
    line-height: 1.25;
}

.highlights-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Default 6-6 */
    gap: 50px;
    align-items: start;
    /* Align to top so long text lists don't center vertically against short images */
}

/* Layout Variations (Desktop Only) */
@media (min-width: 992px) {
    .highlights-grid.layout-4-8 {
        grid-template-columns: 4fr 8fr;
    }

    .highlights-grid.layout-5-7 {
        grid-template-columns: 5fr 7fr;
    }

    .highlights-grid.layout-6-6 {
        grid-template-columns: 6fr 6fr;
    }

    .highlights-grid.layout-7-5 {
        grid-template-columns: 7fr 5fr;
    }

    .highlights-grid.layout-8-4 {
        grid-template-columns: 8fr 4fr;
    }
}

.highlights-image-wrap {
    display: flex;
    justify-content: center;
    position: relative;
}

/* Two-image stack */
.highlights-image-wrap.has-two-images {
    flex-direction: column;
    gap: 20px;
}

.highlights-image {
    width: 100%;
    /* Remove max-width constraint to let grid control width, or keep it but ensure it fills column */
    border-radius: 16px;
    object-fit: cover;
    display: block;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    /* Add subtle shadow for better look */
}

.highlights-image-placeholder {
    width: 100%;
    height: 450px;
    background: rgba(var(--color-navy-rgb), 0.08);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--color-navy);
    font-family: var(--font-secondary);
    font-size: 14px;
}

.highlights-bullets {
    display: flex;
    flex-direction: column;
}

.highlights-bullet-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 0;
    border-bottom: 1px solid rgba(var(--color-navy-rgb), 0.12);
}

.highlights-bullet-item:last-child {
    border-bottom: none;
}

.highlights-bullet-icon {
    flex-shrink: 0;
    color: var(--color-navy);
    display: flex;
    align-items: center;
}

.highlights-bullet-icon img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.highlights-bullet-text {
    font-family: var(--font-secondary);
    font-size: 16px;
    font-weight: 500;
    color: var(--color-navy);
    line-height: 1.4;
}

/* ==========================================================================
   RESPONSIVE — OVERVIEW + HIGHLIGHTS
   ========================================================================== */

@media (max-width: 991px) {
    .overview-section {
        padding: var(--section-padding-mobile);
    }

    .overview-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .overview-text {
        text-align: center;
    }

    .overview-headline {
        font-size: 26px;
    }

    .overview-content {
        text-align: justify;
    }

    .overview-image-wrap {
        justify-content: center;
    }

    .overview-image {
        max-width: 100%;
        border-radius: 16px;
    }

    .highlights-section {
        padding: var(--section-padding-mobile);
    }

    .highlights-headline {
        font-size: 26px;
    }

    .highlights-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .highlights-image {
        max-width: 100%;
    }

    /* Highlights mobile styles moved to dedicated section at end of file */

    .highlights-bullet-text {
        font-size: 15px;
    }
}


/* ==========================================================================
   AMENITIES SECTION (Compact Lead-Gen Redesign)
   ========================================================================== */

.amenities-section {
    background-color: var(--color-bg-cream, #fcfbf9);
    padding: var(--section-padding) 0;
    position: relative;
    overflow: hidden;
}

.amenities-container {
    max-width: 1100px;
    /* Tighter container for a compact feel */
    margin: 0 auto;
    padding: 0 30px;
}

.amenities-header {
    text-align: center;
    margin-bottom: 40px;
    /* Reduced margin for compact layout */
}

.section-label {
    display: inline-block;
    font-family: var(--font-secondary);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--color-gold, #c9a84c);
    margin-bottom: 12px;
}

.amenities-headline {
    font-family: var(--font-primary);
    font-size: 38px;
    font-weight: 700;
    color: var(--color-navy, var(--color-navy));
    line-height: 1.25;
    margin: 0;
}

/* --------------------------------------------------------------------------
   TEMPLATE 1: COMPACT ICON GRID
   -------------------------------------------------------------------------- */
.lg-amenities-icon-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.lg-amenity-card-icon {
    background: transparent;
    border-radius: 0;
    text-align: center;
    box-shadow: none;
    border: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 15px 10px;
    min-height: auto;
    position: relative;
    overflow: visible;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.lg-amenity-card-icon::before {
    display: none;
}

.lg-amenity-card-icon:hover {
    transform: translateY(-8px);
    box-shadow: none;
}

.lg-amenity-card-icon:hover::before {
    display: none;
}

/* ------------------- SHAPE: CIRCLE ------------------- */
.lg-amenity-card-icon.shape-circle .lg-amenity-icon-wrapper {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
    border-radius: 50%;
    transition: all 0.4s ease;
}
.lg-amenity-card-icon.shape-circle:hover .lg-amenity-icon-wrapper {
    transform: scale(1.1) translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
    border-color: rgba(0, 0, 0, 0.15);
}

/* ------------------- SHAPE: SQUARE ------------------- */
.lg-amenity-card-icon.shape-square {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
    padding: 25px 15px;
}
.lg-amenity-card-icon.shape-square .lg-amenity-icon-wrapper {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 65px;
    height: 65px;
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    transition: all 0.4s ease;
}
.lg-amenity-card-icon.shape-square:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.08);
    border-color: rgba(0, 0, 0, 0.15);
}
.lg-amenity-card-icon.shape-square:hover .lg-amenity-icon-wrapper {
    transform: scale(1.1);
}

.lg-amenity-custom-icon {
    max-width: 50px;
    max-height: 50px;
    object-fit: contain;
}

.lg-amenity-lucide {
    width: 45px;
    height: 45px;
    stroke-width: 1.5;
    color: var(--color-gold, #c9a84c);
    transition: color 0.4s ease;
}

.lg-amenity-card-icon:hover .lg-amenity-lucide {
    color: var(--color-navy, var(--color-navy));
}

.lg-amenity-title {
    font-family: var(--font-secondary);
    font-size: 15px;
    font-weight: 700;
    color: var(--color-navy, var(--color-navy));
    margin: 0;
    text-transform: capitalize;
    letter-spacing: 0.5px;
    line-height: 1.4;
}

/* --------------------------------------------------------------------------
   TEMPLATE 2: PREMIUM IMAGE GALLERY
   -------------------------------------------------------------------------- */
.lg-amenities-gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.lg-amenity-card-gallery {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    transform: translateZ(0);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    cursor: pointer;
}

.lg-amenity-gallery-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.lg-amenity-card-gallery:hover .lg-amenity-gallery-img {
    transform: scale(1.12);
}

.lg-amenity-gallery-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(var(--color-navy-rgb), 0.9) 0%, rgba(var(--color-navy-rgb), 0.2) 50%, rgba(var(--color-navy-rgb), 0) 100%);
    transition: background 0.4s ease;
}

.lg-amenity-card-gallery:hover .lg-amenity-gallery-overlay {
    background: linear-gradient(to top, rgba(var(--color-navy-rgb), 0.95) 0%, rgba(var(--color-navy-rgb), 0.4) 60%, rgba(var(--color-navy-rgb), 0) 100%);
}

.lg-amenity-gallery-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 25px 20px;
    text-align: center;
    transform: translateY(0);
    transition: transform 0.4s ease;
}

.lg-amenity-card-gallery:hover .lg-amenity-gallery-content {
    transform: translateY(-5px);
}

.lg-amenity-gallery-title {
    font-family: var(--font-secondary);
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    margin: 0;
    text-transform: capitalize;
    letter-spacing: 0.5px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* --------------------------------------------------------------------------
   AMENITIES RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .lg-amenities-gallery-grid {
        grid-template-columns: none;
    }

    /* Native CSS Scroll-Snap 1-Row Slider for GALLERY template below 1024px */
    .lg-amenities-gallery-grid.native-mobile-slider {
        display: grid;
        grid-template-rows: 1fr;
        grid-auto-flow: column;
        grid-auto-columns: calc(33.333% - 16px);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 24px;
        padding-bottom: 24px;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .lg-amenities-gallery-grid.native-mobile-slider::-webkit-scrollbar {
        display: none;
    }

    .lg-amenities-gallery-grid.native-mobile-slider > div {
        scroll-snap-align: start;
        scroll-snap-stop: always;
        height: 100%;
    }
}

@media (max-width: 768px) {
    .lg-amenities-gallery-grid.native-mobile-slider {
        grid-auto-columns: calc(50% - 12px);
        gap: 24px;
    }
    
    /* ICON Grid: 2 rows, horizontal slider (2x2 grid visible) */
    .lg-amenities-icon-grid.native-mobile-slider {
        display: grid;
        grid-template-rows: repeat(2, 1fr);
        grid-auto-flow: column;
        grid-auto-columns: calc(50% - 8px);
        gap: 16px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding-bottom: 15px;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    
    .lg-amenities-icon-grid.native-mobile-slider::-webkit-scrollbar {
        display: none;
    }

    .lg-amenities-icon-grid.native-mobile-slider > div {
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    .lg-amenities-icon-grid .lg-amenity-card-icon {
        min-height: auto;
        padding: 10px 5px;
    }

    .lg-amenities-icon-grid .lg-amenity-card-icon.shape-circle .lg-amenity-icon-wrapper {
        width: 55px;
        height: 55px;
        margin-bottom: 8px;
    }
    .lg-amenities-icon-grid .lg-amenity-card-icon.shape-square {
        padding: 15px 10px;
    }
    .lg-amenities-icon-grid .lg-amenity-card-icon.shape-square .lg-amenity-icon-wrapper {
        width: 45px;
        height: 45px;
        margin-bottom: 8px;
    }

    .lg-amenities-icon-grid .lg-amenity-custom-icon {
        max-width: 30px;
        max-height: 30px;
    }

    .lg-amenities-icon-grid .lg-amenity-lucide {
        width: 30px;
        height: 30px;
    }

    .lg-amenities-icon-grid .lg-amenity-title {
        font-size: 11px;
        margin-top: 5px;
    }
}

@media (max-width: 480px) {
    .lg-amenities-gallery-grid.native-mobile-slider {
        grid-auto-columns: calc(75% - 12px);
        gap: 16px;
    }
}

/* ==========================================================================
   FLOOR & MASTER PLAN SECTION (Dual-Pane Interactive UI)
   ========================================================================== */

/* Match the global cream background used by Gallery and Location sections */
.floor-plan-section {
    background-color: var(--color-bg-cream, #f5f0e8);
}

.fp-dual-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-top: 40px;
    align-items: start;
}

/* Pane Titles */
.fp-pane-title {
    font-family: var(--font-primary);
    color: var(--color-navy);
    font-size: 26px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 25px;
    position: relative;
    padding-bottom: 10px;
}

.fp-pane-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background-color: var(--color-gold);
    border-radius: 2px;
}

/* Tab Navigation Menu */
.fp-tabs-nav-container {
    border-bottom: 1px solid rgba(var(--color-navy-rgb), 0.1);
    margin-bottom: 25px;
}

.fp-tabs-nav {
    display: flex;
    gap: 30px;
    list-style: none;
    padding: 0;
    margin: 0;
    justify-content: center;
    overflow-x: auto;
    white-space: nowrap;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.fp-tabs-nav::-webkit-scrollbar {
    display: none;
}

.fp-tab-btn {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    /* Reserve space for active border */
    color: var(--color-navy-light);
    font-family: var(--font-primary);
    font-size: 16px;
    font-weight: 600;
    padding: 10px 0 15px 0;
    cursor: pointer;
    transition: all 0.3s ease;
}

.fp-tab-btn:hover {
    color: var(--color-navy);
}

.fp-tab-btn.active {
    color: var(--color-gold);
    border-bottom-color: var(--color-gold);
}

/* Tab Content Panes */
.fp-tabs-content {
    position: relative;
    width: 100%;
}

.fp-tab-pane {
    display: none;
    animation: fade-in 0.4s ease-out;
}

.fp-tab-pane.active {
    display: block;
}

/* Descriptive Subheading for Master Plan (perfectly clones .fp-tab-btn aesthetics and dimensions) */
.fp-master-desc {
    font-family: var(--font-primary);
    font-size: 16px;
    font-weight: 600;
    color: var(--color-gold);
    /* Match the 'active' tab color to draw focus */
    text-align: center;
    padding: 10px 0 15px 0;
    /* Exact padding of .fp-tab-btn */
    margin: 0 0 25px 0;
    /* Exact bottom margin of .fp-tabs-nav-container */
    border-bottom: 1px solid rgba(var(--color-navy-rgb), 0.1);
}

/* Image Viewer & Lead Gen Overlay */
.fp-image-wrapper {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    /* Premium depth styling */
    border: 1px solid rgba(0, 0, 0, 0.05);
    cursor: pointer;
    /* Indicated interactivity */

    /* Strict boundaries to prevent blowing up the page */
    width: 100%;
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fp-plan-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Change to contain if architecture maps have white borders you wish to preserve */
    display: block;
    transition: transform 0.5s ease;
}

.fp-image-wrapper:hover .fp-plan-image {
    transform: scale(1.02);
}

/* Frosted Glass Overlay */
.fp-blur-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.7));
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.fp-overlay-content {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    transform: translateY(10px);
    transition: transform 0.3s ease;
}

.fp-image-wrapper:hover .fp-overlay-content {
    transform: translateY(0);
}

.fp-lock-icon {
    width: 50px;
    height: 50px;
    color: var(--color-navy);
    stroke-width: 1.5;
    background: #fff;
    padding: 14px;
    border-radius: 50%;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.fp-overlay-btn {
    pointer-events: none;
    /* Let parent trigger the click */
    box-shadow: 0 10px 20px rgba(var(--color-navy-rgb), 0.15);
}

/* Mobile Responsiveness */
@media (max-width: 991px) {
    .fp-dual-layout {
        grid-template-columns: 1fr;
        /* Stack vertically */
        gap: 50px;
    }

    .fp-master-desc {
        display: none;
        /* Hide descriptive sub-text on mobile so layouts stack tightly */
    }

    .fp-image-wrapper {
        height: 400px;
        /* Reduce height on Tablets */
    }
}

@media (max-width: 768px) {

    /* Create a 2x2 Grid of pill buttons instead of horizontal scrolling */
    .fp-tabs-nav-container {
        margin-left: 0;
        margin-right: 0;
        border-bottom: none;
        margin-bottom: 20px;
    }

    .fp-tabs-nav {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        padding: 0;
        white-space: normal;
        overflow: visible;
        justify-content: center;
    }

    .fp-tab-btn {
        background: #fff;
        border: 1px solid rgba(var(--color-navy-rgb), 0.1) !important;
        border-radius: 8px;
        font-size: 14px;
        padding: 12px 5px;
        text-align: center;
        width: 100%;
        color: var(--color-navy);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
    }

    .fp-tab-btn.active {
        background: var(--color-navy) !important;
        color: #fff !important;
        border-color: var(--color-navy) !important;
    }

    .fp-pane-title {
        font-size: 22px;
    }

    .fp-image-wrapper {
        height: 320px;
        /* Crucial: Small height on Mobile so it doesn't slide off screen */
    }
}

/* ==========================================================================
   PHONE INPUT FIX - Remove Nested Border from intl-tel-input Wrapper
   ========================================================================== */

/* Remove all borders and styling from the intl-tel-input wrapper to prevent "box-within-box" effect */
.iti {
    display: block !important;
    width: 100% !important;
}

.iti__input-wrapper {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.iti__input {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    width: 100% !important;
}

/* CRITICAL OVERRIDE: Ensure parent container handles all styling */
.phone-input-group .iti,
.phone-input-group .iti__input-wrapper,
.phone-input-group .iti__input {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* ==========================================================================
   HIGHLIGHTS MOBILE REDESIGN - Professional Left-Aligned Layout
   ========================================================================== */

@media (max-width: 991px) {

    /* REVERT CENTER-ALIGN: User wants LEFT-alignment like reference site */
    .highlights-bullet-item {
        padding: 16px 20px;
        flex-direction: row;
        /* Icon LEFT, Text RIGHT - HORIZONTAL */
        align-items: flex-start;
        /* Align to top */
        text-align: left;
        /* LEFT-aligned text */
        gap: 16px;
        /* Space between icon and text */
        border-bottom: 1px solid rgba(var(--color-navy-rgb), 0.08);
    }

    .highlights-bullet-item:last-child {
        border-bottom: none;
    }

    .highlights-bullet-icon {
        margin-bottom: 0;
        /* Remove bottom margin since we're horizontal */
        flex-shrink: 0;
        opacity: 0.85;
        /* Professional subtle tone */
    }

    .highlights-bullet-icon img {
        width: 24px;
        /* Slightly smaller icons on mobile */
        height: 24px;
    }

    .highlights-bullet-text {
        font-size: 14px;
        /* Slightly smaller for mobile */
        line-height: 1.5;
        font-weight: 500;
    }

    /* Remove any center-alignment from grid container */
    .highlights-grid {
        text-align: left;
    }
}

/* ==========================================================================
   PHONE INPUT FIX - Remove nested border from intl-tel-input
   ========================================================================== */
.phone-input-group {
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
}

.phone-input-group .iti {
    border: none !important;
    background: transparent !important;
    display: block !important;
    width: 100% !important;
}

.phone-input-group .iti__selected-flag {
    border: none !important;
}

.phone-input-group input[type="tel"],
#hero-phone,
#about-phone {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.7) !important;
    border-radius: 6px !important;
    height: 46.4px !important;
    padding: 12px 12px 12px 80px !important;
    width: 100% !important;
    color: #fff !important;
    font-size: 14px !important;
    box-sizing: border-box !important;
}

/* Popup Entrance Animation - Distinctive Scale In */
@keyframes popupScaleIn {
    0% {
        opacity: 0;
        transform: scale(0.9) translateY(10px);
    }

    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}



.phone-btn .fa-phone {
    transform: rotate(0deg) !important;
    /* Diagonal - override 90deg */
    display: inline-block;
}

/* ==========================================================================
   GLOBAL POPUP FORM STYLES - All Popup Templates (1, 2, 3, 4)
   Override hero form's white/transparent styles for white popup backgrounds
   ========================================================================== */

/* Popup Overlay */
#popup-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}

#popup-overlay.active {
    display: flex;
}

/* Popup Template 2, 3, 4-Redesign Inputs - Slimmer Design */
.template-2 input[type="text"],
.template-2 input[type="email"],
.template-2 input[type="tel"] {
    width: 100% !important;
    padding: 12px 14px !important;
    border: none !important;
    border-radius: 6px !important;
    background: #e8e8e8 !important;
    font-size: 14px !important;
    font-family: var(--font-secondary, 'Poppins', sans-serif) !important;
    color: #333 !important;
    outline: none !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    transition: background 0.2s ease, box-shadow 0.2s ease !important;
    box-sizing: border-box !important;
    height: 44px;
}

.template-3 input[type="text"],
.template-3 input[type="email"],
.template-3 input[type="tel"],
.template-3 .input-line,
.template-4-redesign input[type="text"],
.template-4-redesign input[type="email"],
.template-4-redesign input[type="tel"] {
    width: 100% !important;
    padding: 12px 14px !important;
    border: none !important;
    border-radius: 6px !important;
    background: #e8e8e8 !important;
    font-size: 14px !important;
    font-family: var(--font-secondary, 'Poppins', sans-serif) !important;
    color: #333 !important;
    outline: none !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    transition: background 0.2s ease, box-shadow 0.2s ease !important;
    box-sizing: border-box !important;
}

.template-2 input[type="text"]:focus,
.template-2 input[type="email"]:focus,
.template-2 input[type="tel"]:focus,
.template-3 input[type="text"]:focus,
.template-3 input[type="email"]:focus,
.template-3 input[type="tel"]:focus,
.template-4-redesign input[type="text"]:focus,
.template-4-redesign input[type="email"]:focus,
.template-4-redesign input[type="tel"]:focus {
    background: #e0e0e0 !important;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) !important;
}

.template-2 input::placeholder,
.template-3 input::placeholder,
.template-4-redesign input::placeholder {
    color: #999 !important;
}

/* Fix: Select placeholder color for ALL templates must match their input placeholder */
.template-2 select:invalid,
.template-2 .form-select-qualifier:invalid,
.template-3 select:invalid,
.template-3 .form-select-qualifier:invalid,
.template-4-redesign select:invalid,
.template-4-redesign .form-select-qualifier:invalid {
    color: #999 !important;
}

/* Once user picks a real value, restore normal dark color */
.form-select-qualifier {
    color: #333;
}

.form-select-qualifier option {
    color: #333;
}

/* Template 3 override: select on dark bg needs white options */
.template-3 .form-select-qualifier option {
    color: #333 !important;
    background: #fff;
}

/* Popup Close Button */
.popup-close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.08);
    border: none;
    font-size: 20px;
    color: var(--form-text-color, #666);
    opacity: 0.6;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: all 0.2s;
}

.popup-close:hover {
    background: rgba(0, 0, 0, 0.15);
    opacity: 1;
}

/* Popup Modal Base */
.popup-form-modal {
    background: #fff;
    border-radius: 12px;
    max-width: 520px;
    width: 92%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

/* Popup Content Wrapper */
.popup-content-wrap {
    padding: 40px 35px 30px;
}

/* Popup Title */
.popup-title {
    text-align: center;
    font-family: var(--font-primary, 'Playfair Display', serif);
    font-size: 24px;
    font-weight: 700;
    color: var(--form-text-color, #1a2a4e);
    margin: 0 0 8px;
}

/* Popup Subtitle */
.popup-subhead {
    text-align: center;
    font-family: var(--font-secondary, 'Poppins', sans-serif);
    font-size: 14px;
    color: var(--form-text-color, #777);
    opacity: 0.7;
    font-style: italic;
    margin: 0 0 25px;
}

/* Popup Logo */
.popup-logo img {
    max-height: 50px;
    width: auto;
}

/* Popup Headline */
.popup-headline {
    text-align: center;
    font-family: var(--font-primary, 'Playfair Display', serif);
    font-size: 22px;
    font-weight: 700;
    color: var(--form-text-color, #1a2a4e);
    margin: 0 0 5px;
}

/* Popup Submit Buttons - Base Styles (overridden by global popup button styles) */
.popup-submit-btn,
.pill-btn {
    width: 100%;
    padding: 15px;
    background: var(--color-btn-bg);
    color: var(--color-btn-text);
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s;
    font-family: var(--font-secondary, 'Poppins', sans-serif);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 5px;
}

.popup-submit-btn:hover,
.pill-btn:hover {
    background: var(--color-btn-hover);
}

/* Popup Consent Text */
.popup-consent {
    font-size: 11px;
    color: var(--form-text-color, #666);
    opacity: 0.8;
    line-height: 1.4;
    margin-top: 15px;
    display: block;
    text-align: center;
}

/* Phone Input Group in Popups - intl-tel-input */
.template-1 .phone-input-group,
.template-2 .phone-input-group,
.template-3 .phone-input-group,
.template-4-redesign .phone-input-group {
    margin-bottom: 15px;
}

/* Fix intl-tel-input container width in popups */
.template-1 .iti,
.template-2 .iti,
.template-3 .iti,
.template-4-redesign .iti {
    width: 100% !important;
}

/* intl-tel-input flag container styling in popups */
.template-1 .iti__flag-container,
.template-2 .iti__flag-container,
.template-3 .iti__flag-container,
.template-4-redesign .iti__flag-container {
    background: transparent !important;
}

.template-1 .iti__selected-flag,
.template-2 .iti__selected-flag,
.template-3 .iti__selected-flag,
.template-4-redesign .iti__selected-flag {
    background: transparent !important;
    padding: 0 8px 0 12px !important;
}

/* Dial code text color in popups */
.template-1 .iti__selected-dial-code {
    color: var(--form-text-color, #333) !important;
}

.template-2 .iti__selected-dial-code,
.template-3 .iti__selected-dial-code,
.template-4-redesign .iti__selected-dial-code {
    color: #333 !important;
}

/* Fix padding for intl-tel-input phone fields - prevent flag overlap */
/* Must beat .template-4-redesign input[type="tel"] specificity */
.template-1 .iti--separate-dial-code input.popup-phone-input,
.template-2 .iti--separate-dial-code input.popup-phone-input,
.template-3 .iti--separate-dial-code input.popup-phone-input,
.template-4-redesign .iti--separate-dial-code input.popup-phone-input,
.iti--separate-dial-code input.popup-phone-input.clean-input,
#about-phone {
    padding-left: 90px !important;
}

/* Trust Badges */
.popup-trust-badges {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 15px;
    font-size: 12px;
    color: #555;
}

/* Header Strip (Template 2) */
.popup-header-strip {
    background: #e74c3c;
    color: #fff;
    text-align: center;
    padding: 10px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 12px 12px 0 0;
}

/* ==========================================================================
   POPUP TEMPLATE 4 REDESIGN - Match Reference Image Exactly
   ========================================================================== */

/* Modal Container */
.template-4-redesign {
    background: #fff;
    border-radius: 12px;
    max-width: 600px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

/* Close Button - Simple X */
.popup-close-x {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #e8e8e8;
    border: none;
    font-size: 24px;
    color: #666;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 10;
    font-weight: 300;
}

.popup-close-x:hover {
    background: #d0d0d0;
}

/* Content Wrapper */
.template-4-redesign .popup-content-wrap {
    padding: 35px 40px 30px;
}



/* Template 4 Specific Logo Styling */
.template-4-redesign .popup-logo {
    text-align: center !important;
    margin-bottom: 20px !important;
    display: block !important;
}

.template-4-redesign .popup-logo img {
    max-height: 85px !important;
    /* Increased size as requested */
    width: auto !important;
    display: inline-block !important;
    margin: 0 auto !important;
}

/* Headline - Two Parts */
.popup-headline-split {
    text-align: center;
    font-family: var(--font-primary, 'Playfair Display', serif);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5;
    margin: 0 0 35px 0;
}

.popup-headline-split .part-dark {
    color: #000;
}

.popup-headline-split .part-red {
    color: #e74c3c;
    font-weight: 600;
}

/* Form Styling */
.popup-4-form {
    max-width: 100%;
}

/* Clean Input - NO BORDERS, Gray Background with Subtle Shadow */
.clean-input,
.popup-4-form .clean-input,
.template-4-redesign .clean-input,
.template-4-redesign input[type="text"],
.template-4-redesign input[type="email"],
.template-4-redesign input[type="tel"] {
    width: 100% !important;
    padding: 12px 16px !important;
    height: 48px !important;
    /* Fixed height for alignment */
    line-height: normal !important;
    box-sizing: border-box !important;
    border: none !important;
    border-radius: 8px !important;
    background: #e8e8e8 !important;
    font-size: 16px !important;
    font-family: var(--font-secondary, 'Poppins', sans-serif) !important;
    color: #333 !important;
    outline: none !important;
    margin-bottom: 18px !important;
    transition: background 0.2s ease !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
    vertical-align: middle !important;
}

.clean-input:focus,
.popup-4-form .clean-input:focus,
.template-4-redesign .clean-input:focus,
.template-4-redesign input[type="text"]:focus,
.template-4-redesign input[type="email"]:focus,
.template-4-redesign input[type="tel"]:focus {
    background: #e0e0e0 !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2) !important;
}

.clean-input::placeholder {
    color: #555 !important;
}

select.clean-input {
    color: #555 !important;
}

select.clean-input option {
    color: #333 !important;
}



/* Submit Button - Navy Blue */
.submit-navy-btn {
    width: 100%;
    max-width: 280px;
    display: block;
    margin: 25px auto 20px;
    padding: 16px;
    background: var(--color-btn-bg);
    color: var(--color-btn-text);
    border: none;
    border-radius: 8px;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: var(--font-secondary, 'Poppins', sans-serif);
}

.submit-navy-btn:hover {
    background: var(--color-btn-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(26, 42, 78, 0.3);
}

/* Consent Text */
.consent-small-text {
    font-size: 11px;
    color: #666;
    line-height: 1.6;
    text-align: center;
    margin: 10px 0 0 0;
    padding: 0 20px;
}

/* Bottom Phone Strip */
.bottom-phone-strip {
    display: block;
    background: #1a2a4e;
    color: #fff;
    text-align: center;
    padding: 20px;
    text-decoration: none;
    font-size: 20px;
    font-weight: 600;
    border-radius: 0 0 12px 12px;
    transition: background 0.3s ease;
    font-family: var(--font-secondary, 'Poppins', sans-serif);
}

.bottom-phone-strip:hover {
    background: #2a3a5e;
}

.bottom-phone-strip i {
    margin-right: 10px;
}

/* Mobile Responsive */
@media (max-width: 767px) {
    .template-4-redesign {
        width: 95%;
        max-width: 95%;
    }

    .template-4-redesign .popup-content-wrap {
        padding: 30px 20px 20px;
    }

    .popup-headline-split {
        font-size: 16px;
        margin-bottom: 20px;
    }

    .clean-input {
        padding: 12px 14px !important;
        height: 44px !important;
        /* Mobile Alignment Fix */
        font-size: 14px !important;
        margin-bottom: 12px !important;
    }

    .submit-navy-btn {
        max-width: 100%;
        font-size: 15px;
        padding: 14px;
        margin-top: 15px;
    }

    .bottom-phone-strip {
        font-size: 16px;
        padding: 15px;
    }
}

/* ==========================================================================
   PRICE SECTION — Template 1 (Card Layout)
   ========================================================================== */

.price-section {
    position: relative;
    padding: var(--section-padding);
    overflow: hidden;
    background: var(--color-bg-cream, #f5f0e8);
}

/* Diagonal Split Background — cream top-left, navy bottom-right */
.price-bg-split {
    position: absolute;
    inset: 0;
    background: var(--color-navy, var(--color-navy));
    /* Triangle starts at mid-right edge, so header stays on cream */
    clip-path: polygon(100% 45%, 100% 100%, 0 100%);
    z-index: 0;
}

.price-container {
    position: relative;
    z-index: 1;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 30px;
}

/* Section Header — uses global section-label & section-title classes */
.price-header {
    text-align: center;
    margin-bottom: 50px;
    position: relative;
    z-index: 2;
}

/* Ensure heading is always readable on cream */
.price-header .section-label,
.price-header .section-title {
    color: var(--color-navy, var(--color-navy));
}

/* Price Grid — 4 horizontal cards */
.price-grid {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(4, 1fr);
}

/* Adjust grid for fewer cards */
.price-cols-1 {
    grid-template-columns: 1fr;
    max-width: 320px;
    margin: 0 auto;
}

.price-cols-2 {
    grid-template-columns: repeat(2, 1fr);
    max-width: 680px;
    margin: 0 auto;
}

.price-cols-3 {
    grid-template-columns: repeat(3, 1fr);
    max-width: 960px;
    margin: 0 auto;
}

.price-cols-5,
.price-cols-6 {
    grid-template-columns: repeat(3, 1fr);
    max-width: 960px;
    margin: 0 auto;
}

.price-cols-7,
.price-cols-8 {
    grid-template-columns: repeat(4, 1fr);
    margin: 0 auto;
}

/* Individual Price Card */
.price-card {
    position: relative;
    background: rgba(245, 240, 232, 0.95);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.price-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
}

/* Left Navy Accent Bar */
.price-card-accent {
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 100%;
    background: var(--color-navy, var(--color-navy));
    border-radius: 12px 0 0 12px;
}

/* Badge Pill */
.price-badge-wrap {
    text-align: center;
    margin-top: -1px;
}

.price-badge {
    display: inline-block;
    background: var(--color-navy, var(--color-navy));
    color: #fff;
    padding: 10px 36px;
    font-family: var(--font-secondary, 'Poppins', sans-serif);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    border-radius: 0 0 24px 24px;
}

/* Card Body */
.price-card-body {
    padding: 24px 20px 20px;
}

/* Price Amount */
.price-amount {
    text-align: center;
    font-family: var(--font-primary, 'Playfair Display', serif);
    font-size: 26px;
    font-weight: 700;
    color: var(--color-navy-dark, #0a1628);
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    line-height: 1.2;
}

.price-suffix {
    display: block;
    font-family: var(--font-secondary, 'Poppins', sans-serif);
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-body, #333333);
    margin-top: 6px;
    font-style: normal;
}

/* Detail Rows */
.price-details {
    margin-bottom: 18px;
}

.price-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 8px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.price-detail-row:last-child {
    border-bottom: none;
}

.price-detail-label {
    font-family: var(--font-secondary, 'Poppins', sans-serif);
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-body, #333);
}

.price-detail-value {
    font-family: var(--font-secondary, 'Poppins', sans-serif);
    font-size: 15px;
    font-weight: 700;
    color: var(--color-navy-dark, #0a1628);
}

/* CTA Button */
.price-cta-wrap {
    text-align: center;
    margin-top: 8px;
}

.price-cta {
    display: inline-block;
    padding: 12px 36px;
    background: var(--color-btn-bg);
    color: var(--color-btn-text);
    border: none;
    border-radius: 6px;
    font-family: var(--font-secondary, 'Poppins', sans-serif);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s ease;
    letter-spacing: 0.5px;
}

.price-cta:hover {
    background: var(--color-btn-hover);
    transform: scale(1.03);
}

/* ==========================================================================
   PRICE SECTION — Responsive
   ========================================================================== */

/* Tablet */
@media (max-width: 1024px) {
    .price-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .price-cols-1 {
        grid-template-columns: 1fr;
    }

    .price-amount {
        font-size: 22px;
    }

    .price-badge {
        padding: 8px 28px;
        font-size: 13px;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .price-section {
        padding: 50px 0;
    }

    .price-bg-split {
        /* On mobile: navy covers bottom 50% of section */
        clip-path: polygon(100% 40%, 100% 100%, 0 100%);
    }

    .price-container {
        padding: 0 16px;
    }

    .price-header {
        margin-bottom: 30px;
    }

    .price-label {
        font-size: 14px;
    }

    .price-title {
        font-size: 26px;
    }

    /* Vertical Stack on Mobile */
    .price-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;
        padding-bottom: 0;
        overflow: visible;
    }

    /* Remove scrollbars */
    .price-grid::-webkit-scrollbar {
        display: none;
    }

    .price-card {
        width: 100%;
        min-width: 0;
    }

    .price-cols-1 .price-card,
    .price-cols-2 .price-card {
        width: 100%;
    }

    .price-amount {
        font-size: 22px;
    }

    .price-card-body {
        padding: 20px 16px 16px;
    }

    .price-cta {
        padding: 10px 28px;
        font-size: 14px;
    }
}

/* ==========================================================================
   PRICE SECTION — Template 2 (Table Layout)
   ========================================================================== */

.price-table-wrapper {
    width: 100%;
    margin: 0 auto;
    max-width: 1000px;
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    position: relative;
    z-index: 2;
}

.price-table {
    width: 100%;
    table-layout: fixed;
    /* Force equal column sizing */
    border-collapse: collapse;
    font-family: var(--font-secondary, 'Poppins', sans-serif);
}

.price-table thead th {
    width: 25%;
    /* 4 columns get exactly 25% each */
    background: var(--color-navy, var(--color-navy));
    color: #fff;
    padding: 16px 20px;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.price-table thead th:first-child {
    border-radius: 8px 0 0 8px;
}

.price-table thead th:last-child {
    border-radius: 0 8px 8px 0;
}

.price-table tbody tr {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    transition: background 0.2s ease;
}

.price-table tbody tr:last-child {
    border-bottom: none;
}

.price-table tbody tr:hover {
    background-color: rgba(0, 0, 0, 0.02);
}

.price-table td {
    padding: 16px 20px;
    font-size: 15px;
    color: var(--color-text-body, #333);
    vertical-align: middle;
    text-align: center;
}

.pt-type {
    font-weight: 600;
    color: var(--color-navy-dark, #0a1628);
}

.pt-price {
    font-weight: 500;
    color: var(--color-navy-dark, #0a1628);
}

.table-price-suffix {
    font-size: 14px;
    font-weight: 400;
    font-family: var(--font-secondary, 'Poppins', sans-serif);
    color: var(--color-text-body, #333333);
    margin-left: 4px;
}

.price-table-btn {
    background: var(--color-btn-bg);
    color: var(--color-btn-text);
    border: none;
    padding: 8px 20px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.price-table-btn:hover {
    background: var(--color-btn-hover);
    transform: translateY(-1px);
}

/* Mobile Table — Stacked Cards Layout */
@media (max-width: 767px) {
    .price-table-wrapper {
        padding: 0;
        background: transparent;
        box-shadow: none;
        overflow: visible;
        /* Remove horizontal scroll */
    }

    /* Hide the table header completely on mobile */
    .price-table thead {
        display: none;
    }

    /* Convert the table into a block layout */
    .price-table,
    .price-table tbody,
    .price-table tr,
    .price-table td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    /* Each row becomes a card */
    .price-table tbody tr {
        background: #ffffff;
        /* Solid White Card background */
        border: 1px solid rgba(0, 0, 0, 0.05);
        border-radius: 12px;
        margin-bottom: 20px;
        padding: 24px 20px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    }

    /* Remove generic bottom borders for cards */
    .price-table tbody tr:last-child {
        margin-bottom: 0;
    }

    /* Reset td padding and align center */
    .price-table td {
        padding: 0;
        text-align: center;
        border: none;
    }

    /* Stack elements beautifully to match screenshot */
    .price-table td.pt-type {
        font-size: 20px;
        font-weight: 500;
        color: var(--color-navy-dark, #0a1628);
        margin-bottom: 8px;
    }

    .price-table td.pt-area {
        font-size: 15px;
        color: var(--color-text-body, #333333);
        margin-bottom: 12px;
    }

    .price-table td.pt-price {
        font-size: 24px;
        font-weight: 700;
        color: var(--color-navy-dark, #0a1628);
        font-family: var(--font-price-amount, 'Playfair Display', serif);
        margin-bottom: 20px;
    }

    .table-price-suffix {
        display: block;
        margin-left: 0;
        margin-top: 4px;
        font-size: 14px;
        font-weight: 500;
    }


    /* Full-width button for action area */
    .price-table td.pt-action {
        width: 100%;
    }

    .price-table-btn {
        width: 100%;
        max-width: 280px;
        padding: 12px 20px;
        font-size: 15px;
        border-radius: 8px;
    }
}

/* ==========================================================================
   POPUP CLOSE BUTTON — Professional Fix
   Boosts z-index so button always sits above modal content.
   Original positioning (top/right) from base CSS is already correct.
   ========================================================================== */
.popup-close,
.popup-close-x,
.popup-close-circle {
    /* Guarantee visible above ALL modal interior content */
    z-index: 9999 !important;
    /* Lock to top-right — cancel any accidental left value */
    left: auto !important;
    right: 15px !important;
    top: 12px !important;
    bottom: auto !important;
    /* Ensure clicks always register */
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* ==========================================================================
   GLOBAL RESPONSIVE SECTION PADDING
   ========================================================================== */
@media (max-width: 767px) {
    .section {
        padding: var(--section-padding-mobile);
        /* Overrides 70px 0 with 40px 0 */
    }

    /* Prevent Overview Button from breaking into two lines */
    .overview-btn {
        padding: 14px 20px;
        font-size: 13px !important;
        white-space: nowrap;
        gap: 8px;
    }
}

/* ==========================================================================
   Section: Gallery (Reference Implementation)
   ========================================================================== */
.gallery-section {
    background-color: var(--color-bg-cream, #fefdfb);
}

/* Base Desktop Grid: 4 columns, 2 primary rows */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 250px 200px;
    /* Locked premium height */
    gap: 20px;
    margin-top: 40px;
}

/* Heavy, premium border radiuses matching Reference UI */
.gallery-item {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    /* Soft, luxurious depth */
    background: #eaeaea;
    /* Fallback skeleton color */
}

/* Image 1: Left Tall */
.item-1 {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
}

/* Image 2: Middle Top Wide */
.item-2 {
    grid-column: 2 / 4;
    grid-row: 1 / 2;
}

/* Image 3: Middle Bottom Left */
.item-3 {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
}

/* Image 4: Middle Bottom Right */
.item-4 {
    grid-column: 3 / 4;
    grid-row: 2 / 3;
}

/* Image 5: Right Tall */
.item-5 {
    grid-column: 4 / 5;
    grid-row: 1 / 3;
}

.gallery-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Ambient interaction zoom (no dark overlay) to match reference */
.gallery-item:hover .gallery-img {
    transform: scale(1.05);
}

/* Mobile Adjustments for Gallery (2-1-2 Stack) */
@media (max-width: 768px) {
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        /* 2 columns on mobile */
        grid-auto-rows: minmax(180px, auto);
        gap: 15px;
        margin-top: 30px;
    }

    .gallery-item {
        border-radius: 16px;
        /* Slightly tighter curves on mobile */
    }

    /* Reset all spans first */
    .gallery-item {
        grid-column: span 1;
        grid-row: span 1;
    }

    /* Target the middle image (Image 3) to span full width to create the 2-1-2 bento look */
    .item-3 {
        grid-column: 1 / -1;
        /* spans full width (both columns) */
    }
}

@media (max-width: 480px) {
    .gallery-grid {
        grid-auto-rows: minmax(150px, auto);
        gap: 10px;
    }
}

/* ==========================================================================
   Section: Location Advantages
   ========================================================================== */
.location-section {
    background-color: var(--color-bg-cream, #fefdfb);
}

.location-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    margin-top: 40px;
}

/* List Styling (Stacked Rows) */
.location-points {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}

.location-points li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid rgba(var(--color-navy-rgb), 0.2);
    font-size: 18px;
    color: var(--color-navy);
    /* Hardcoded navy — immune to customizer primary color */
    font-family: var(--font-primary);
}

.loc-name-group {
    display: flex;
    align-items: center;
    gap: 15px;
}

.loc-pin-icon {
    width: 22px;
    height: 22px;
    color: #1a4f8b;
    /* Specific classic blue pin color from original design */
    flex-shrink: 0;
}

.loc-name {
    font-weight: 500;
}

.loc-dist {
    font-weight: 400;
    color: var(--color-navy);
    /* Hardcoded navy — same as heading */
}

/* Map Image Container */
.location-map-wrapper {
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: #eaeaea; /* Skeleton */
}

.location-map-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.location-map-link {
    display: block;
}

.location-map-link:hover .location-map-img {
    transform: scale(1.03);
    /* Subtle zoom when clickable */
}

/* Mobile Adjustments */
@media (max-width: 991px) {
    .location-content {
        grid-template-columns: 1fr;
        /* Stack Map and List vertically */
        gap: 40px;
    }
}

@media (max-width: 768px) {
    .location-points li {
        font-size: 15px;
        /* Slight scale down */
        padding: 18px 0;
    }
}

/* ==========================================================================
   Section: About Developer
   ========================================================================== */
.about-section {
    background-color: var(--color-bg-cream, #f5f0e8);
}

/* Ensure the hero form copied into About section always has the solid Navy background for contrast against cream bg */
.about-section .hero-contact-form-wrap {
    max-width: 100%;
}

.about-section .hero-contact-form {
    background: rgba(var(--color-inpage-form-bg-rgb), 0.95);
    backdrop-filter: blur(5px);
}

.about-content-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    /* More space for the text column like reference */
    gap: 60px;
    align-items: start;
    margin-top: 10px;
}

.about-heading {
    font-family: var(--font-primary);
    font-size: 32px;
    font-weight: 600;
    color: var(--color-navy) !important;
    /* Hardcoded navy — immune to customizer red */
    margin: 0 0 4px;
    /* Reduced from 10px */
    line-height: 1.2;
}

.about-text-body {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.75;
    color: #555;
    margin-top: 20px;
    /* Space below the Reviews badge */
}

.about-text-body p {
    margin: 0;
}

/* ==========================================================================
   Right Column: Contact Card — Deep Navy (hardcoded, not customizer color)
   ========================================================================== */
.contact-card {
    background-color: #12233a;
    /* Hardcoded dark navy — immune to customizer primary color */
    border-radius: 16px;
    padding: 28px 24px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}

.contact-card-title {
    font-family: var(--font-primary);
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    text-align: center;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-radius: 8px;
    padding: 12px 16px;
    margin: 0 0 20px;
    letter-spacing: 0.4px;
}

/* Form groups */
.about-contact-form .form-group {
    margin-bottom: 12px;
}

/* Inputs & Textarea — solid white like the reference */
.about-contact-form input:not([type="tel"]),
.about-contact-form textarea {
    width: 100%;
    background: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 13px 16px;
    font-size: 14px;
    color: #1a1a2e;
    font-family: var(--font-body);
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

/* Phone tel input — fallback style BEFORE intl-tel-input JS initialises */
.about-contact-form input[type="tel"],
.hero-mobile-form-section input[type="tel"] {
    width: 100%;
    background: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 13px 16px;
    font-size: 14px;
    color: #1a1a2e;
    font-family: var(--font-body);
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

/* Phone tel input — after intl-tel-input sets its .iti wrapper */
.contact-card .iti,
.hero-mobile-form-section .iti {
    width: 100%;
    display: block;
}

.contact-card .iti input[type="tel"],
.hero-mobile-form-section .iti input[type="tel"] {
    width: 100%;
    background: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding-top: 13px;
    padding-right: 16px;
    padding-bottom: 13px;
    /* padding-left intentionally omitted — dynamically set by intl-tel-input */
    font-size: 14px;
    color: #1a1a2e;
    font-family: var(--font-body);
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

.about-contact-form input::placeholder,
.about-contact-form textarea::placeholder {
    color: #888;
}

.about-contact-form input:focus,
.about-contact-form textarea:focus {
    outline: none;
    border-color: #c9a84c;
    box-shadow: 0 0 0 2px rgba(201, 168, 76, 0.15);
}

.about-contact-form textarea {
    resize: none;
}

.about-contact-form .checkbox-group {
    margin-bottom: 14px;
}

.consent-label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 9px;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.4;
    cursor: pointer;
}

.consent-label input[type="checkbox"] {
    width: auto;
    flex-shrink: 0;
    margin-top: 2px;
    accent-color: #c9a84c;
}

/* Submit button — solid white with dark navy text */
.about-submit-btn {
    width: 100%;
    background: var(--color-btn-bg);
    border: 2px solid var(--color-btn-border);
    color: var(--color-btn-text);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.4px;
    padding: 13px;
    border-radius: 8px;
    cursor: pointer;
    font-family: var(--font-primary);
    transition: background 0.25s, color 0.25s;
}

.about-submit-btn:hover {
    background: var(--color-btn-hover);
    border-color: #c9a84c;
    color: #fff;
}

/* Mobile Adjustments */
@media (max-width: 991px) {
    .about-content-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

@media (max-width: 768px) {
    .about-heading {
        font-size: 26px;
    }

    .contact-card {
        padding: 20px 16px;
    }
}

/* ==========================================================================
   Google Reviews Badge (About Developer Section)
   ========================================================================== */
.google-reviews-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    /* Reduced from 28px */
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 50px;
    padding: 10px 20px 10px 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    text-decoration: none;
    transition: box-shadow 0.2s, transform 0.2s;
}

a.google-reviews-badge:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
    transform: translateY(-1px);
}

.google-g-logo {
    flex-shrink: 0;
}

.review-stars {
    display: flex;
    align-items: center;
    gap: 2px;
}

.review-stars .star {
    width: 18px;
    height: 18px;
}

.review-text {
    font-family: var(--font-body);
    font-size: 14px;
    color: #444;
    white-space: nowrap;
}

.review-text strong {
    color: #222;
    font-weight: 700;
    margin-right: 3px;
}

/* ==========================================================================
   Google Reviews Badge
   ========================================================================== */
.google-reviews-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 50px;
    padding: 7px 14px 7px 10px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
    text-decoration: none;
    transition: box-shadow 0.2s, transform 0.2s;
    max-width: max-content;
    /* Never stretch full width */
}

a.google-reviews-badge:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.13);
    transform: translateY(-1px);
}

.review-stars {
    display: flex;
    align-items: center;
    gap: 1px;
}

.review-stars .star {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.review-text {
    font-family: var(--font-body);
    font-size: 13px;
    color: #555;
    white-space: nowrap;
}

.review-text strong {
    color: #222;
    font-weight: 700;
}

/* Fix mobile overflow in About section */
@media (max-width: 991px) {
    .about-section .container {
        overflow-x: hidden;
    }

    .about-content-grid {
        overflow-x: hidden;
    }

    .google-reviews-badge {
        max-width: 100%;
        flex-wrap: nowrap;
    }
}

/* ==========================================================================
   intl-tel-input minimal overrides — About Contact Card
   The .about-contact-form input rule already handles the input styling.
   These rules ONLY fix the flag button appearance on the dark background.
   ========================================================================== */

/* Stretch the .iti wrapper to full width so it matches other inputs */
.contact-card .iti {
    width: 100%;
    display: block;
}

/* Flag button: transparent so the input's own background shows through */
.contact-card .iti__selected-flag {
    background: transparent;
    padding: 0 8px;
}

.contact-card .iti__selected-flag:hover,
.contact-card .iti__selected-flag:focus {
    background: rgba(255, 255, 255, 0.08);
}

/* White arrow + subtle divider line between flag and number */
.contact-card .iti__arrow {
    border-top-color: rgba(255, 255, 255, 0.6);
}

.contact-card .iti__flag-container {
    border-right: 1px solid rgba(255, 255, 255, 0.2);
}

/* ==========================================================================
   Mobile-Only Hero Form (below hero image on mobile, hidden on desktop)
   ========================================================================== */
.hero-mobile-form-section {
    display: none;
    /* Hidden on desktop */
    background: var(--color-bg-cream, #f5f0e8);
    padding: 24px 0 32px;
}

@media (max-width: 991px) {
    .hero-mobile-form-section {
        display: block;
    }
}

/* ==========================================================================
   FOOTER (Template 1 & Template 2)
   ========================================================================== */

/* --- Common Footer Styles --- */
.pura-footer {
    position: relative;
    z-index: 10;
    font-family: var(--font-body);
}

/* --- Template 1: Dark Navy (2-Column) --- */
.pura-footer--t1 {
    background: var(--color-navy);
    /* Dark Navy Base */
    color: rgba(255, 255, 255, 0.85);
}

.pura-footer__inner {
    padding: 48px 0 24px;
}

/* T1: Top Grid (Brand left, RERA right) */
.pura-footer__top {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    padding-bottom: 28px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 24px;
}

.pura-footer__brand {
    max-width: 480px;
}

.pura-footer__name {
    font-family: var(--font-primary);
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 8px;
    letter-spacing: 0.3px;
}

.pura-footer__tagline {
    font-size: 13.5px;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.5;
    margin: 0 0 16px;
}

.pura-footer__barcode {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pura-footer__barcode img {
    background: #fff;
    padding: 3px;
    border-radius: 4px;
}

.pura-footer__barcode span {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

/* T1: RERA List */
.pura-footer__rera {
    text-align: right;
    min-width: 280px;
}

.pura-footer__rera-label {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 12px;
    font-weight: 600;
}

.pura-footer__rera-list {
    margin: 0;
    padding: 0;
}

.pura-footer__rera-row {
    margin-bottom: 8px;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.pura-footer__rera-row dt {
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
}

.pura-footer__rera-row dd {
    margin: 0;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
}

/* T1: Disclaimer */
.pura-footer__disclaimer {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.pura-footer__disclaimer-text {
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.45);
    line-height: 1.7;
    margin: 0 0 8px;
    text-align: justify;
}

.pura-footer__read-more {
    background: none;
    border: none;
    padding: 0;
    color: #c9a84c;
    /* Gold */
    font-size: 11.5px;
    cursor: pointer;
    text-decoration: underline;
    font-family: inherit;
}

.pura-footer__policy-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #c9a84c;
    text-decoration: none;
    transition: opacity 0.2s;
    font-weight: 500;
}

.pura-footer__policy-link:hover {
    opacity: 0.8;
}

/* T1: Bottom Copyright Bar */
.pura-footer__bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.pura-footer__copy {
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.35);
    margin: 0;
}

.pura-footer__credit {
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.35);
    margin: 0;
}

.pura-footer__credit a {
    color: #c9a84c;
    text-decoration: none;
    transition: opacity 0.2s;
}

.pura-footer__credit a:hover {
    opacity: 0.8;
}

/* --- Template 2: Light Cream (RERA QR Grid) --- */
.pura-footer--t2 {
    background-color: var(--color-bg-cream, #f5f0e8);
    border-top: 3px solid var(--color-gold, #c9a84c);
    color: var(--color-navy, var(--color-navy));
}

.pura-footer--t2__inner {
    padding: 40px 0 24px;
}

/* T2: RERA QR Grid */
.pura-f2-rera {
    text-align: center;
    margin-bottom: 24px;
}

.pura-f2-rera__title {
    font-family: var(--font-primary);
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-navy);
}

.pura-f2-rera__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 160px));
    gap: 20px;
    justify-content: center;
    margin-bottom: 16px;
}

.pura-f2-rera__item {
    margin: 0;
    padding: 0;
    text-align: center;
}

.pura-f2-rera__qr {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto 10px;
    border: 2px solid var(--color-gold);
    padding: 4px;
    background: #fff;
    border-radius: 6px;
}

.pura-f2-rera__caption {
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--color-navy);
    opacity: 0.8;
}

.pura-f2-rera__note {
    font-size: 11px;
    color: rgba(var(--color-navy-rgb), 0.7);
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.6;
}

.pura-f2-divider {
    border: none;
    border-top: 1px solid rgba(var(--color-navy-rgb), 0.1);
    margin: 24px 0;
}

/* T2: Compliance Ticks */
.pura-f2-ticks {
    list-style: none;
    padding: 0;
    margin: 0 auto 24px;
    max-width: 900px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pura-f2-ticks__item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13.5px;
    color: var(--color-navy);
    line-height: 1.4;
}

/* Prevent any inherited red/blue link color inside tick items */
.pura-f2-ticks__item a,
.pura-f2-ticks__item span {
    color: var(--color-navy);
    text-decoration: none;
}

.pura-f2-ticks__icon {
    color: var(--color-gold);
    flex-shrink: 0;
    margin-top: 2px;
}

/* T2: Bottom Links & Disclaimer */
.pura-f2-disclaimer {
    font-size: 11.5px;
    color: rgba(var(--color-navy-rgb), 0.6);
    line-height: 1.6;
    margin: 0 0 12px;
    text-align: justify;
}

.pura-f2-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 12px;
}

.pura-f2-bottom__copy {
    font-size: 12px;
    color: rgba(var(--color-navy-rgb), 0.6);
    margin: 0;
    font-weight: 500;
}

.pura-f2-bottom__links {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    color: rgba(var(--color-navy-rgb), 0.4);
}

.pura-f2-bottom__links a {
    color: var(--color-navy);
    text-decoration: none;
    font-weight: 600;
    transition: opacity 0.2s;
}

.pura-f2-bottom__links a:hover {
    color: var(--color-gold);
}


/* ==========================================================================
   STICKY BOTTOM BAR — Mobile Only
   ========================================================================== */
.sticky-bottom-bar {
    display: none;
    /* Hidden on desktop */
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9990;
    box-shadow: 0 -4px 20px rgba(var(--color-navy-rgb), 0.15);
}

.sticky-btn {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 8px;
    text-decoration: none;
    font-family: var(--font-primary);
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: 0.2px;
    background: var(--color-btn-bg);
    /* Navy */
    color: var(--color-btn-text);
    border-right: 1px solid rgba(255, 255, 255, 0.15);
    transition: background 0.2s;
}

.sticky-btn:last-child {
    border-right: none;
}

.sticky-btn:hover,
.sticky-btn:active {
    background: #152f52;
}


/* ==========================================================================
   RESPONSIVE (Both Templates)
   ========================================================================== */
@media (max-width: 991px) {

    /* Show sticky bar on mobile */
    .sticky-bottom-bar {
        display: flex;
    }

    body {
        padding-bottom: 54px;
    }

    /* Template 1 Mobile */
    .pura-footer__top {
        flex-direction: column;
        gap: 32px;
        align-items: flex-start;
    }

    .pura-footer__rera {
        text-align: left;
    }

    .pura-footer__rera-row {
        justify-content: flex-start;
    }

    /* Template 2 Mobile */
    .pura-f2-rera__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .pura-f2-rera__qr {
        max-width: 90px;
    }

    .pura-f2-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .pura-f2-bottom__links {
        flex-wrap: wrap;
    }
}

/* ═══════════════════════════════════════════════════
   QUALIFIER DROPDOWNS (Budget, BHK Configuration)
   Applied via class: .form-select-qualifier
═══════════════════════════════════════════════════ */
.form-select-qualifier {
    width: 100%;
    display: block;
    padding: 10px 36px 10px 14px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E") no-repeat right 14px center;
    appearance: none;
    -webkit-appearance: none;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    box-sizing: border-box;
    transition: border-color 0.2s;
}

.form-select-qualifier:focus {
    outline: none;
    border-color: #e67817;
    box-shadow: 0 0 0 2px rgba(230, 120, 23, .12);
}

/* input-light variant (popup-2 white style) */
.input-light.form-select-qualifier {
    background-color: #f5f5f5;
    border-color: #ccc;
}

/* input-line variant (popup-3 dark underline style) */
.input-line.form-select-qualifier {
    background-color: transparent;
    border: none;
    border-bottom: 1.5px solid #666;
    border-radius: 0;
    padding: 10px 24px 10px 2px;
    color: inherit;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23aaa'/%3E%3C/svg%3E");
}

.input-line.form-select-qualifier option {
    color: #333;
}

/* clean-input variant (popup-4 navy style) */
.clean-input.form-select-qualifier {
    background-color: #f8f8f8;
    border-color: #ddd;
    border-radius: 8px;
    margin-bottom: 4px;
}

/* ═══════════════════════════════════════════════════
   FOOTER TEMPLATE 1
   (Moved from inline <style> in footer-template-1.php)
═══════════════════════════════════════════════════ */
.footer-template-1 .site-footer {
    background: #f8f9fa;
    border-top: 2px solid #ddd;
    font-size: 14px;
    color: #333;
    min-height: 100px;
    padding: 30px 0 20px 0;
    position: relative;
    z-index: 1;
}

@media (min-width: 768px) {
    .footer-template-1 .site-footer .footer-main {
        width: 100%;
        margin: 0;
        padding: 0 15px;
        text-align: left;
    }
}

.footer-template-1 .site-footer strong {
    font-size: 15px;
    color: #222;
    font-weight: 700;
}

.footer-template-1 .site-footer .footer-social {
    margin: 15px 0 10px 0;
}

.footer-template-1 .site-footer .footer-social a {
    margin: 0 12px 0 0;
    color: inherit;
    font-size: 20px;
    transition: color 0.3s;
}

.footer-template-1 .site-footer .footer-social a[aria-label*="Facebook"] {
    color: #3b5998;
}

.footer-template-1 .site-footer .footer-social a[aria-label*="Twitter"] {
    color: #1da1f2;
}

.footer-template-1 .site-footer .footer-social a[aria-label*="LinkedIn"] {
    color: #0077b5;
}

.footer-template-1 .site-footer .footer-social a[aria-label*="Instagram"] {
    color: #e4405f;
}

.footer-template-1 .site-footer .footer-links {
    margin: 10px 0 0 0;
    font-size: 14px;
}

.footer-template-1 .site-footer .footer-links a {
    color: #007bff;
    text-decoration: none;
    margin: 0 10px 0 0;
    font-weight: 600;
}

.footer-template-1 .site-footer .footer-links a:hover {
    text-decoration: underline;
}

.footer-template-1 .site-footer .footer-disclaimer {
    font-size: 11px;
    line-height: 1.6;
    color: #666;
    margin: 12px 0 0 0;
    text-align: left;
    max-width: 100%;
}

.disclaimer-content {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: all 0.3s ease;
}

.disclaimer-content.expanded {
    -webkit-line-clamp: unset;
    line-clamp: unset;
    display: block;
}

.read-more-btn {
    background: none;
    border: none;
    color: #007bff;
    font-size: 11px;
    font-weight: 600;
    padding: 0;
    margin-top: 5px;
    cursor: pointer;
    outline: none;
}

.footer-template-1 .site-footer .footer-text-2 {
    font-weight: 600;
    color: #444;
    font-size: 14px;
    margin-top: 8px;
    display: block;
}

@media (max-width: 767px) {
    .footer-template-1 .site-footer .footer-main {
        margin: 0 auto;
        width: 100%;
        text-align: center;
        padding: 0 15px;
    }

    .footer-template-1 .site-footer .col-md-8 {
        margin: 0 auto;
        text-align: center;
        padding: 0;
    }

    .footer-template-1 .site-footer .footer-disclaimer {
        text-align: center;
        font-size: 10px;
    }

    /* Global Mobile Popup Fixes - Stretch Fields and Reduce Blank Space */
    .popup-content-wrap,
    .template-2 .popup-content-wrap,
    .template-4 .popup-content-wrap,
    .template-4-new .popup-content-wrap,
    .template-4-redesign .popup-content-wrap {
        padding: 25px 15px 15px !important;
    }

    .iti--separate-dial-code input.popup-phone-input,
    .iti--separate-dial-code input.popup-phone-input.clean-input {
        padding-left: 75px !important;
    }

    .clean-input {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }
}
.popup-custom-logo-img {
    max-width: var(--popup-logo-width-desktop, 150px);
    height: auto;
}
@media (max-width: 768px) {
    .popup-custom-logo-img {
        max-width: var(--popup-logo-width-mobile, 120px);
    }
}