/*! Pool Builder Plugin CSS - Cleaned and Organized */

/* Restore default box-sizing outside plugin */

.header_container,
.header_container *,
#upper,
#upper *,
#header,
#header * {
    box-sizing: content-box !important;
}

/* =====================================================================
   CSS CUSTOM PROPERTIES - Design Tokens
   ===================================================================== */
:root {
    /* Brand Colors */
    --wppb-primary: #1956BC;
    --wppb-primary-rgb: 25, 86, 188;
    --wppb-success: #2FDB81;
    --wppb-muted: #6c757d;
    --wppb-gray-light: #f8f9fa;
    --wppb-gray: #e9ecef;
    --wppb-gray-dark: #495057;
    --wppb-border: #dee2e6;
    --wppb-white: #ffffff;
    
    /* Spacing */
    --wppb-spacing-xs: 0.25rem;
    --wppb-spacing-sm: 0.5rem;
    --wppb-spacing-md: 1rem;
    --wppb-spacing-lg: 1.5rem;
    --wppb-spacing-xl: 2rem;
    
    /* Typography */
    --wppb-font-size-sm: 0.875rem;
    --wppb-font-size-base: 1rem;
    --wppb-font-size-lg: 1.25rem;
    
    /* Card Responsive Scaling */
    --wppb-card-scale: 1;
    --wppb-card-min-width: 290px;
    --wppb-card-max-width: 360px;
    --wppb-card-min-height: 290px;
    --wppb-card-max-height: 360px;
    --wppb-card-image-height: 200px;
    --wppb-card-padding: 1.5rem;
    --wppb-card-title-size: 1.25rem;
    --wppb-card-text-size: 0.875rem;
    
    /* WordPress Integration */
    --wp-admin-bar-height: 32px;
    --wp-admin-bar-mobile-height: 46px;
    --wp-theme-header-height: 0px;
    --wp-total-header-height: calc(var(--wp-admin-bar-height) + var(--wp-theme-header-height));
    
    /* Bootstrap Override */
    --bs-primary: var(--wppb-primary);
    --bs-primary-rgb: var(--wppb-primary-rgb);
}

/* =====================================================================
   WORDPRESS SCOPED UTILITY CLASSES
   All classes scoped to prevent theme conflicts
   ===================================================================== */

#wppb_customize_container .hidden {
    display: none;
}

#wppb_customize_container .max-width {
    max-width: 1340px;
    margin: 0 auto;
}

#wppb_customize_container .w-100 {
    width: 100%;
}

#wppb_customize_container .btn-sm {
    font-size: var(--wppb-font-size-sm);
    padding: var(--wppb-spacing-sm) var(--wppb-spacing-md);
}

.wppb_wrapper {
    position: relative; /* Required for absolute positioning of docked bottom bar */
    width: 100%;
    max-width: 1340px;
    margin: 0 auto;
    padding-bottom: 100px; /* Space for bottom bar */
}
/* Could remove or refactor for parent of .series-info-container #seriesInfoModal */
#wppb_customize_container .series-info-container h6 {
    text-transform: none;
    font-size: var(--wppb-font-size-lg);
    font-weight: 600;
    color: #212529;
    margin-bottom: var(--wppb-spacing-lg);
    text-align: left;
}

#wppb_customize_container .series-image-container {
    aspect-ratio: 3/2;
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 8px;
    overflow: hidden;
    max-height: 300px;
}

.wppb_location_wrapper .container_content {
    max-width: 1000px;
}

/* =====================================================================
   MAIN CONTAINERS - WordPress Scoped
   ===================================================================== */

.wppb_series_container {
    width: 100%;
    max-width: 1340px;
    margin: 0 auto;
    padding: 0;
}

.wppb_series_container .title_section {
    margin-top: var(--wppb-spacing-xl);
    margin-bottom: var(--wppb-spacing-md);
}


#wppb_wrapper {
    min-height: 100vh;
    width: 100%;
}

/* =====================================================================
   LOCATION VIEW - Two Column Layout
   ===================================================================== */

#wppb_location_container {
    width: 100%;
    margin: 0 auto;
    /* background-color: #efefef; */
    padding: var(--wppb-spacing-xl) 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 50vh;
}

#wppb_location_container .container_content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    max-width: 1340px;
    margin: 0 auto;
    padding: 0 var(--wppb-spacing-md);
    align-items: center;
}

.left_column {
    display: flex;
    flex-direction: column;
    gap: var(--wppb-spacing-lg);
}

.left_column .title_section h1,
.wppb-location-view .welcome-section h1 {
    font-size: var(--wppb-font-size-lg);
    color: var(--wppb-muted);
    margin-bottom: var(--wppb-spacing-sm);
}

.left_column .title_section h2,
.wppb-location-view .welcome-section h2 {
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: var(--wppb-spacing-sm);
}

.left_column .title_section .text-primary,
.wppb-location-view .welcome-section .text-primary {
    color: var(--wppb-primary);
    font-size: var(--wppb-font-size-lg);
    margin-bottom: var(--wppb-spacing-xl);
}

.left_column .location-section h3,
.wppb-location-view .location-section h3 {
    font-size: 1.5rem;
    margin-bottom: var(--wppb-spacing-md);
}

.right_column {
    display: flex;
    justify-content: center;
    align-items: center;
}

.pool-hero-image-container {
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
}

.pool-hero-image-container img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.wppb-location-view .welcome-section {
    text-align: left;
    margin-bottom: var(--wppb-spacing-xl);
}

.wppb-location-view .location-section {
    margin-bottom: var(--wppb-spacing-xl);
}



/* =====================================================================
   BASIC LAYOUT COMPONENTS
   ===================================================================== */

.pool-type-card {
    width: 100%;
    height: 100%;
    margin: 10px;
    padding: 0;
}

.container_content {
    display: contents;
}

.wppb_location_next_btn {
    margin-top: 20px;
}

/* =====================================================================
   CONTACT FORM STYLING
   ===================================================================== */

#wppb_customize_container .pool-contact-form {
    width: 100%;
}

#wppb_customize_container .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--wppb-spacing-md);
    margin-bottom: var(--wppb-spacing-md);
}

#wppb_customize_container .form-row.three-col,
#wppb_customize_container .form-row.city-state-zip {
    grid-template-columns: 1fr 1fr 1fr;
}

#wppb_customize_container .form-group {
    margin-bottom: var(--wppb-spacing-md);
}

#wppb_customize_container .form-group.col-md-6,
#wppb_customize_container .form-group.col-md-4 {
    margin-bottom: 0;
}

#wppb_customize_container .form-control {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid var(--wppb-gray);
    border-radius: 6px;
    font-size: var(--wppb-font-size-base);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

#wppb_customize_container .form-control:focus {
    border-color: var(--wppb-primary);
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(25, 86, 188, 0.25);
}

#wppb_customize_container .form-control::placeholder {
    color: #9ca3af;
    opacity: 1;
}

#wppb_customize_container .form-section-title {
    font-weight: 600;
    color: var(--wppb-gray-dark);
    font-size: var(--wppb-font-size-base);
    margin-bottom: 0.75rem;
}

#wppb_customize_container .sms-consent-text {
    font-size: var(--wppb-font-size-sm);
    color: var(--wppb-muted);
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

#wppb_customize_container .form-check {
    margin-bottom: var(--wppb-spacing-sm);
}

#wppb_customize_container .form-check-inline {
    display: inline-block;
    margin-right: var(--wppb-spacing-md);
    margin-bottom: var(--wppb-spacing-sm);
}

#wppb_customize_container .form-check-input {
    margin-right: var(--wppb-spacing-sm);
}

#wppb_customize_container .form-check-label {
    font-size: var(--wppb-font-size-sm);
    color: var(--wppb-gray-dark);
    cursor: pointer;
}

#wppb_customize_container .btn-primary {
    background-color: var(--wppb-primary);
    border-color: var(--wppb-primary);
    padding: 0.75rem var(--wppb-spacing-xl);
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 6px;
    transition: all 0.15s ease-in-out;
}

#wppb_customize_container .btn-primary:hover {
    background-color: #0056b3;
    border-color: #0056b3;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}


/* =====================================================================
   RESPONSIVE DESIGN - Mobile First
   ===================================================================== */

@media (max-width: 768px) {
    #wppb_location_container .container_content {
        grid-template-columns: 1fr;
        gap: var(--wppb-spacing-lg);
        padding: 0 var(--wppb-spacing-md);
    }
    
    .right_column {
        order: -1;
    }
    
    .left_column .title_section h1 {
        font-size: var(--wppb-font-size-base);
    }
    
    .left_column .title_section h2 {
        font-size: 2rem;
    }
    
    .left_column .title_section .text-primary {
        font-size: var(--wppb-font-size-base);
    }
    
    .left_column .location-section h3 {
        font-size: var(--wppb-font-size-lg);
    }
    
}



/* =====================================================================
   WORDPRESS INTEGRATION STYLES
   ===================================================================== */

/* WordPress main content area */
main {
    margin-top: 0;
    margin-bottom: 0;
    background-color: #efefef;
}

/* Hide empty paragraphs that WordPress might add */
main p:empty {
    display: none;
}

/* WordPress header and footer */
#wppb_wrapper header {
    width: 100%;
    background-color: var(--wppb-white);
    border-bottom: 1px solid #e0e0e0;
}

/* =====================================================================
   MAIN CONTAINER STRUCTURE
   ===================================================================== */


.wppb_container {
    width: 100%;
    height: 100%;
    min-height: 80vh;
    margin-bottom: 20px;
    padding: 0;
    display: block;
    /* flex-direction: column;
    justify-content: flex-start; */
    align-items: flex-start;
    position: relative;
    box-sizing: border-box;
}


.wppb_type_container {
    width: 100%;
}

.wppb_type_container .title_section {
    width: 100%;
    text-align: center;
    margin-bottom: var(--wppb-spacing-xl);
    margin-top: var(--wppb-spacing-xl);
}

.customize-left .title_section p {
    margin-bottom: var(--wppb-spacing-md);
}

.customize-left .title_section h5 {
    margin-top: var(--wppb-spacing-sm);
    margin-bottom: var(--wppb-spacing-sm);
}

/* =====================================================================
   BOTTOM BAR CONTAINERS
   ===================================================================== */

.wppb-bottom-bar-container,
div.bottom-bar-container {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background-color: var(--wppb-white);
    padding: 0;
    margin-top: var(--wppb-spacing-md);
}

.wppb-financing-custom {
    font-size: 0.8rem;
    color: var(--wppb-muted);
    letter-spacing: 0.05rem;
}


/* WordPress body and HTML reset */
body {
    background-color: #efefef;
    margin: 0;
    padding: 0;
}

html {
    margin: 0;
    padding: 0;
}






/* ScrollSpy styles moved to scrollspy.css */

/* ===================================================================
   OPTION STYLING - Used by Radio Button Cards
   =================================================================== */

/* Option Price Tag */
.option-price {
    display: inline-block;
    background: #e7f3ff;
    color: var(--wppb-primary);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-weight: 600;
    font-size: var(--wppb-font-size-sm);
}



#wppb_wrapper {
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    width: 100% !important;
    margin: 0 auto 100px auto;
    padding: 0;
    box-sizing: border-box;
    /* Ensure wrapper starts below WordPress elements without overlap */
}

/* When WordPress admin bar is present - exact positioning without gap */
.admin-bar #wppb_wrapper {
    margin-top: var(--wp-total-header-height); /* Start below all WordPress headers - no gap, just touching */
}

/* Ensure all step containers respect WordPress header positioning */

/* Additional safety for various WordPress configurations */
body.admin-bar #wppb_wrapper,
.wp-admin-bar-active #wppb_wrapper,
.logged-in #wppb_wrapper {
    position: relative;
    z-index: 998; /* Below WordPress admin elements (1000+) but above content */
}

/* Only fix wrapper z-index conflict when modal is open */
.modal-open #wppb_wrapper,
.wppb-modal-open #wppb_wrapper {
    z-index: unset !important;
}

/* Fallback for themes that might have different header structures */
.admin-bar #wppb_wrapper {
    margin-top: var(--wp-admin-bar-height); /* Fallback to just admin bar height */
}








/* ===================================================================
   FIXED BOTTOM NAVIGATION BAR
   =================================================================== */



@keyframes slideUpBottom {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}



.bottom-bar-container {
    width: 100% !important;
    margin: 0 auto !important;
    padding: 2rem 2rem !important;
}

/* Bottom Bar Sections */
.bottom-bar-left,
.bottom-bar-right {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
}

.bottom-bar-center {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}






/* Responsive Bottom Bar */
@media (max-width: 768px) {
    .bottom-bar-container {
        padding: 0.75rem 1rem;
        min-height: 70px;
        flex-direction: row;
        gap: 0.5rem;
    }
    
    
}

@media (max-width: 480px) {
    .bottom-bar-container {
        padding: 0.5rem;
        min-height: 60px;
    }
    
    .bottom-bar-left,
    .bottom-bar-right {
        flex: 0 0 auto;
    }
    
    .bottom-bar-center {
        flex: 1;
        min-width: 0;
    }
    
}
   
/* Stacked Options Container - Universal for all option types */
.size-options-stack,
.options-stack {
    display: flex;
    flex-direction: column;
    max-width: 100%;
    margin: 0 !important;
    margin-bottom: 0 !important;

    border: solid 0px red;
}


/* =====================================================================
   MOBILE RESPONSIVE - Consolidated
   ===================================================================== */

@media (max-width: 768px) {
    /* Card Layout Adjustments */
    .radio-button-card-content {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--wppb-spacing-sm);
        padding-left: 1.5rem;
    }
    
    .option-info {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--wppb-spacing-xs);
    }
    
    
    
    /* Form adjustments for mobile */
    #wppb_customize_container .form-row,
    #wppb_customize_container .form-row.three-col,
    #wppb_customize_container .form-row.city-state-zip {
        grid-template-columns: 1fr;
        gap: var(--wppb-spacing-sm);
    }
    
}


/* ===================================================================
   ACCESSIBILITY STYLES
   =================================================================== */

/* Screen reader only class for accessibility */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ===================================================================
   OPTION INFO MODAL STYLES
   =================================================================== */

#wppbOptionVideo {
    width: 100%;
    max-height: 300px;
    object-fit: cover;
    border-radius: 8px;
}

#wppbOptionVideoContainer {
    margin-bottom: 1rem;
}

#wppbOptionImage {
    width: 100%;
    max-height: 300px;
    object-fit: cover;
    border-radius: 8px;
}

#wppbOptionImageContainer {
    margin-bottom: 1rem;
}

/* ========================================================================== */
/* WPPB Fixed bottom bar                                                      */
/* ========================================================================== */




/* Fixed bottom utility class - using fixed instead of sticky for theme compatibility */
/* Sticky positioning breaks when ancestor has overflow:hidden (common in themes) */
.sticky-bottom {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 1030 !important; /* Bootstrap's modal z-index is 1050, so stay below */
}

/* Bottom bar main container - fixed at bottom of viewport */
/* Using fixed positioning for universal theme compatibility (immune to overflow:hidden) */
#wppb_bottom_bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: white;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
    animation: slideUpBottom 0.3s ease-out;
    z-index: 1030; /* Above content but below modals */
}

/* Docked state - bar stays at bottom of wrapper instead of viewport */
/* Applied via JS when user scrolls to end of pool builder content */
#wppb_bottom_bar.wppb-bottom-bar-docked {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
}

.wppb-bottom-bar-container {
    width: 100% !important;
    max-width: 1340px !important;
    margin: 0 auto !important;
    padding: 1rem 2rem !important;
}

.wppb-bottom-bar-left,
.wppb-bottom-bar-right {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 1rem; /* Add gap between price and button */
}

.wppb-bottom-bar-center {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.wppb-price-display {
    text-align: right; /* Align text to the right */
    padding: 0 1rem;
}

.wppb-price-label {
    font-size: 0.875rem;
    color: #6c757d;
    margin-bottom: 0.25rem;
    font-weight: 500;
}

.wppb-price-main {
    display: flex;
    align-items: baseline;
    justify-content: flex-end; /* Align to the right */
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.wppb-price-amount {
    font-size: 1.5rem;
    font-weight: 700;
    color: #2FDB81;
    transition: transform 0.15s ease;
}

.wppb-financing-amount {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
    font-size: 1rem;
    color: #8B8B8B;
    font-weight: 600;
    animation: fadeIn 0.3s ease-in;
}

.wppb-financing-slash {
    font-size: 1.25rem;
    color: #8B8B8B;
    margin: 0 0.125rem;
}

.wppb-financing-monthly {
    font-size: 1.1rem;
    font-weight: 600;
}

.wppb-financing-note {
    font-size: 0.75rem;
    color: #8B8B8B;
    font-weight: 400;
    font-style: italic;
}

.wppb-price-note {
    font-size: 0.75rem;
    color: #8B8B8B;
    font-style: italic;
}

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

@keyframes enableButton {
    0% {
        transform: scale(1);
        box-shadow: 0 4px 12px rgba(13, 110, 253, 0.3);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 8px 16px rgba(13, 110, 253, 0.4);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 4px 12px rgba(13, 110, 253, 0.3);
    }
}





#wppb_continue_btn {
    color: #fff !important;
    background-color: #1956BC !important;
    border-color: #1956BC;
    border-width: 2px;
    border-style: solid;
    transition: all 0.3s ease;
}

/* Hover state for better UX */
#wppb_continue_btn:hover:not(:disabled) {
    background-color: #0056b3 !important;
    border-color: #0056b3;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
}

/* Disabled state */
#wppb_continue_btn:disabled {
    color: #6c757d !important;
    background-color: #e9ecef !important;
    border-color: #dee2e6;
    opacity: 0.65;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}
#wppb_continue_btn:active {
    color: #fff;
    background-color: #1956BC !important;
    border-style: solid;
    border-color: #1956BC;
    border-width: 2px;
}




/* Removed custom quantity-input styles - using Bootstrap defaults */

/* Hide description in lighting cards */
.radio-button-card .option-description {
    display: none;
}

/* WPPB Responsive Design */
@media (max-width: 768px) {
  .wppb-bottom-bar-container {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch;
    gap: 0.75rem;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0.75rem 1rem !important;
  }

  /* Price row (full width, on top) */
  .wppb-bottom-bar-center {
    order: -1;
    flex: 1 1 100%;
    text-align: center;
  }
  .wppb-price-display { margin-bottom: 0.25rem; }

  /* Buttons row */
  .wppb-bottom-bar-left,
  .wppb-bottom-bar-right {
    flex: 1 1 45%;
    display: flex;
  }
  #wppb_back_btn,
  #wppb_continue_btn {
    width: 100%;
    padding: 0.5rem 1rem !important;
    font-size: 0.875rem !important;
    min-width: 0;
    white-space: nowrap;
  }

  /* If Back is hidden, let Continue span full width */
  .wppb-bottom-bar-container:not(:has(#wppb_back_btn:not([style*="display: none"]))) .wppb-bottom-bar-right {
    flex-basis: 100%;
  }

  .wppb-price-main {
    justify-content: center;
    gap: 0.25rem;
    align-items: center;
  }

  .wppb-price-label {
    font-size: 0.675rem;
    margin-bottom: 0rem;
}

  .wppb-price-amount { 
    font-size: 1.25rem; 
}

.wppb-financing-amount {
    font-size: 0.8rem;
}

.wppb-financing-slash {
    font-size: 1rem;
}

.wppb-financing-monthly {
    font-size: 1rem;
}

.wppb-financing-note {
    font-size: 0.75rem;
}


}

@media (max-width: 480px) {
    .wppb-bottom-bar-container {
        /* flex-direction: column; */
        gap: 0.5rem;
        padding: 1rem;
        min-height: auto;
    }
    
    .wppb-bottom-bar-left,
    .wppb-bottom-bar-center,
    .wppb-bottom-bar-right {
        width: 100%;
        justify-content: center;
    }
}

/* ========================================================================== */
/* WPPB FINANCING TOOLTIP                                                    */
/* ========================================================================== */

/* Base tooltip styles */
.wppb-financing-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 12px 16px;
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.5;
    min-width: 400px;
    max-width: 450px;
    white-space: normal;
    word-wrap: break-word;
    text-align: left;
    z-index: 10000;
    margin-bottom: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    animation: tooltipFadeIn 0.2s ease-in;
}

/* Tooltip arrow */
.wppb-financing-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #333;
}

/* Fade animations */
@keyframes tooltipFadeIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(5px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* Tablet styles */
@media (max-width: 768px) {
    .wppb-financing-tooltip {
        min-width: 300px;
        max-width: 350px;
        font-size: 13px;
        padding: 10px 14px;
        left: auto;
        right: 10px;
        transform: none;
    }
    
    .wppb-financing-tooltip::after {
        left: auto;
        right: 20px;
        transform: none;
    }
}

/* Mobile styles - full width modal approach */
@media (max-width: 480px) {
    .wppb-financing-tooltip {
        position: fixed;
        bottom: auto;
        top: 50%;
        left: 10px;
        right: 10px;
        transform: translateY(-50%);
        min-width: auto;
        max-width: none;
        width: auto;
        max-height: 80vh;
        overflow-y: auto;
        font-size: 14px;
        padding: 16px 40px 16px 16px;
        border-radius: 8px;
        box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    }
    
    /* Hide arrow on mobile */
    .wppb-financing-tooltip::after {
        display: none;
    }
}

/* Close button styling for mobile */
.wppb-tooltip-close {
    position: absolute;
    top: 8px;
    right: 12px;
    font-size: 18px;
    opacity: 0.7;
    cursor: pointer;
    background: none;
    border: none;
    color: white;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: opacity 0.2s ease;
}

.wppb-tooltip-close:hover {
    opacity: 1;
    background: rgba(255,255,255,0.1);
}

/* ========================================================================== */
/* WPPB LOCATION SELECTOR (UIBuilder Component)                              */
/* ========================================================================== */

.wppb-location-selector {
    margin: 1rem 0;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #dee2e6;
}
.wppb_location_wrapper {
    max-width: 1340px !important;
    margin: 0 auto;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.wppb-location-selector {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

.wppb-location-select {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    border: 2px solid #dee2e6;
    border-radius: 6px;
    background-color: #fff;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.wppb-location-select:focus {
    border-color: #1956BC;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

.wppb-location-select:hover {
    border-color: #adb5bd;
}
/* Old location container margins removed */
/* Mobile responsive */
@media (max-width: 768px) {
    .wppb-location-selector {
        margin: 0.5rem 0;
        padding: 0.75rem;
    }
    
    .wppb-location-select {
        padding: 0.5rem 0.75rem;
        font-size: 0.9rem;
    }
}

/* ===================================================================
   STANDARDIZED POOL TYPE & SERIES CARD STYLING
   =================================================================== */
/* ===================================================================
   SERIES CARDS RESPONSIVE LAYOUT - 4 COLUMNS ON EXTRA LARGE SCREENS
   ===================================================================
   
   Enhances Bootstrap's responsive grid for series cards specifically
   for screens 1920px and up to display 4 columns optimally.
   
   =================================================================== */

/* Enhanced 4-column layout for screens 1920px and up */
@media (min-width: 1920px) {
    /* Target series cards using Bootstrap column classes for precision */
    .col-xxl-3.series-card,
    .series-card {
        /* Bootstrap's col-xxl-3 handles the basic grid, we enhance with optimal spacing */
        max-width: none; /* Let Bootstrap handle the width */
    }
    
    /* Ensure container properly distributes 4 columns */
    .series-card .card,
    .col-xxl-3 .card.series-card {
        height: 100%;
        min-height: 300px; /* Consistent height for professional look */
    }
    
    /* Optimize image display for 4-column layout */
    .series-card .card-img-top-wrapper,
    .col-xxl-3 .series-card .card-img-top-wrapper {
        height: 180px; /* Slightly smaller for 4-column layout */
    }
    
    /* Adjust text sizing for 4-column layout */
    .series-card .card-title,
    .col-xxl-3 .series-card .card-title {
        font-size: 1.1rem; /* Slightly smaller for better fit */
    }
    
    .series-card .card-text,
    .col-xxl-3 .series-card .card-text {
        font-size: 0.9rem; /* Compact text for 4 columns */
    }
    
    /* Ensure the row container has proper spacing for 4 columns */
    .row.g-2 .col-xxl-3 {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}

/* Additional responsive improvements for series cards across all screen sizes */
@media (min-width: 1400px) and (max-width: 1919px) {
    /* Bootstrap XXL screens but below 1920px - maintain 3 columns with better spacing */
    .series-card .card {
        min-height: 320px;
    }
    
    .series-card .card-img-top-wrapper {
        height: 200px;
    }
}

@media (min-width: 992px) and (max-width: 1399px) {
    /* Bootstrap LG screens - 3 columns with comfortable spacing */
    .series-card .card {
        min-height: 320px;
    }
    
    .series-card .card-img-top-wrapper {
        height: 320px;
    }
}



/* Unified card styling for both pool type and series cards */
.pool-type-card,
.series-card {
    min-width: calc(var(--wppb-card-min-width) * var(--wppb-card-scale)) !important;
    min-height: calc(var(--wppb-card-min-height) * var(--wppb-card-scale)) !important;
    max-width: calc(var(--wppb-card-max-width) * var(--wppb-card-scale)) !important;
    max-height: calc(var(--wppb-card-max-height) * var(--wppb-card-scale)) !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    border: 2px solid #dee2e6;
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-left: auto !important;
    margin-right: auto !important;

}
.card-img-top-wrapper {
    padding: 0 !important;
    width: 100% !important;
    height: calc(var(--wppb-card-image-height) * var(--wppb-card-scale)) !important;
    max-height: calc(var(--wppb-card-image-height) * var(--wppb-card-scale)) !important;
    min-height: calc(var(--wppb-card-image-height) * var(--wppb-card-scale)) !important;
    position: relative;
    overflow: hidden; /* Prevent content overflow */
    background: #f8f9fa; /* Light background in case image fails */
}

/* Series cards now use simple images - carousel functionality removed */

/* Card image styling */
.card-img-top {
    width: 100% !important;
    height: calc(var(--wppb-card-image-height) * var(--wppb-card-scale)) !important;
    object-fit: cover !important;
    overflow: hidden !important;
}
.pool-type-card:hover,
.series-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    border-color: #1956BC;
}

.pool-type-card.selected,
.series-card.selected {
    border-color: #1956BC;
    border: 3px solid #1956BC;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25);
    transform: translateY(-2px);
}

/* Standardized image container */
.pool-type-card .card-img-top-wrapper,
.series-card .card-img-top-wrapper {
    overflow: hidden;
    background: #f8f9fa;
}

/* Ensure series cards maintain consistent height in Bootstrap grid */
.series-card {
    min-height: 320px; /* Minimum card height to prevent stacking */
    display: flex;
    flex-direction: column;
}

.series-card .card-body {
    flex-grow: 1; /* Allow card body to expand */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Standardized card body */
.pool-type-card .card-body,
.series-card .card-body {
    padding: calc(var(--wppb-card-padding) * var(--wppb-card-scale));
    display: flex;
    flex-direction: column;
}

/* Standardized card titles */
.pool-type-card .card-title,
.series-card .card-title {
    font-size: calc(var(--wppb-card-title-size) * var(--wppb-card-scale));
    font-weight: 700;
    color: #212529;
    margin-bottom: calc(0.75rem * var(--wppb-card-scale));
    flex: 0 0 auto;
}

/* Description container with scroll */
.pool-type-card .description-container,
.series-card .description-container {
    flex: 1;
    overflow-y: auto;
    margin-bottom: 0.75rem;
    padding-right: 0.5rem;
}

/* Standardized card text */
.pool-type-card .card-text,
.series-card .card-text {
    font-size: calc(var(--wppb-card-text-size) * var(--wppb-card-scale));
    color: #6c757d;
    line-height: 1.4;
    line-clamp: 3;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    margin: 0;
}

/* Custom scrollbar for description */
.description-container::-webkit-scrollbar {
    width: 4px;
}

.description-container::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 2px;
}

.description-container::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 2px;
}

.description-container::-webkit-scrollbar-thumb:hover {
    background: #999;
}

/* Standardized form check styling */
.pool-type-card .form-check,
.series-card .form-check {
    margin-bottom: 0;
    padding: 0.5rem 0;
}

.pool-type-card .form-check-input,
.series-card .form-check-input {
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid #dee2e6;
    background-color: #fff;
}

.pool-type-card .form-check-input:checked,
.series-card .form-check-input:checked {
    background-color: #1956BC;
    border-color: #1956BC;
}

.pool-type-card .form-check-input:focus,
.series-card .form-check-input:focus {
    border-color: #1956BC;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.pool-type-card .form-check-label,
.series-card .form-check-label {
    font-size: 0.95rem;
    font-weight: 600;
    color: #495057;
    cursor: pointer;
    line-height: 1.25rem;
}

/* Equal height cards - disabled since we use fixed heights */
.pool-type-card.h-100,
.series-card.h-100 {
    height: 100%;
}

@media (max-width: 768px) {
    .pool-type-card .card-body,
    .series-card .card-body {
        padding: 1rem !important;
    }
    
    .pool-type-card .card-title,
    .series-card .card-title {
        font-size: 1rem;
        margin-bottom: 0.5rem;
    }
    
    .pool-type-card .form-check-input,
    .series-card .form-check-input {
        width: 1.1rem;
        height: 1.1rem;
    }
    
    .pool-type-card .form-check-label,
    .series-card .form-check-label {
        font-size: 0.875rem;
    }
}

/* Mobile responsiveness for fixed layout */
@media (max-width: 768px) {
    /* Mobile: Maintain WordPress header compliance */
    :root {
        --wp-admin-bar-height: var(--wp-admin-bar-mobile-height); /* Use mobile admin bar height */
    }
    
    .admin-bar #wppb_wrapper {
        margin-top: var(--wp-admin-bar-mobile-height); /* Mobile admin bar is typically taller */
    }

}

/* ===================================================================
   PROGRESSIVE CARD SCALING - RESPONSIVE BREAKPOINTS
   ===================================================================
   
   Cards scale intelligently across different screen sizes while 
   maintaining proportions and usability
   
   =================================================================== */

/* Large tablets and small desktops (960px - 1199px): Scale to 90% */
@media (max-width: 1199px) and (min-width: 960px) {
    :root {
        --wppb-card-scale: 0.9;
    }
}

/* Tablets (768px - 959px): Scale to 85% */
@media (max-width: 959px) and (min-width: 768px) {
    :root {
        --wppb-card-scale: 0.85;
    }
}

/* Small tablets (640px - 767px): Scale to 80% */
@media (max-width: 767px) and (min-width: 640px) {
    :root {
        --wppb-card-scale: 0.8;
    }
    
    /* Additional adjustments for better spacing */
    .pool-type-card,
    .series-card {
        margin: 0.5rem !important;
        margin: 0.25rem auto !important;
    }
    
}

/* Large mobile devices (480px - 639px): Scale to 75% */
@media (max-width: 639px) and (min-width: 480px) {
    :root {
        --wppb-card-scale: 0.75;
    }
    
    /* Slightly reduce border radius for smaller cards */
    .pool-type-card,
    .series-card {
        border-radius: 0.5rem !important;
        margin: 0.25rem auto !important;
    }
    
}

/* Small mobile devices (320px - 479px): Scale to 70% */
@media (max-width: 479px) {
    :root {
        --wppb-card-scale: 0.7;
    }
    
    /* Minimal margins for very small screens */
    .pool-type-card,
    .series-card {
        margin: 0.125rem !important;
        border-radius: 0.375rem !important;
        margin: 0.25rem auto !important;
    }
    
    /* Adjust form elements for better touch targets */
    .pool-type-card .form-check-input,
    .series-card .form-check-input {
        width: calc(1.1rem * var(--wppb-card-scale));
        height: calc(1.1rem * var(--wppb-card-scale));
    }
    
    /* Ensure text remains readable */
    .pool-type-card .card-title,
    .series-card .card-title {
        font-size: clamp(0.9rem, calc(var(--wppb-card-title-size) * var(--wppb-card-scale)), 1.1rem);
    }
    
    .pool-type-card .card-text,
    .series-card .card-text {
        font-size: clamp(0.75rem, calc(var(--wppb-card-text-size) * var(--wppb-card-scale)), 0.825rem);
    }
}




/* ===================================================================
   THEME-AGNOSTIC MODAL STYLES
   ===================================================================
   
   Defensive modal styles to ensure proper display across all themes
   
   =================================================================== */

/* Custom modal backdrop */
.wppb-modal-backdrop {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.5) !important;
    z-index: 999997 !important;
    transition: opacity 0.3s ease !important;
    pointer-events: auto !important;
}

/* Prevent body scroll when modal is open */
body.wppb-modal-open {
    overflow: hidden !important;
    position: relative !important;
}

/* Modal positioning and z-index - consolidated */
.wppb-modal-active,
#wppbOptionInfoModal.show,
#wppbModelGalleryModal.show,
#wppbDisclosureModal.show {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 999999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 1rem !important;
    overflow: auto !important;
    pointer-events: auto !important;
}

/* Modal dialog container */
#wppbOptionInfoModal .modal-dialog,
#wppbModelGalleryModal .modal-dialog,
#wppbDisclosureModal .modal-dialog {
    position: relative !important;
    margin: auto !important;
    max-width: 600px !important;
    width: 100% !important;
    max-height: 90vh !important;
    pointer-events: auto !important;
    z-index: 1000000 !important;
}

/* Modal content styling */
#wppbOptionInfoModal .modal-content,
#wppbModelGalleryModal .modal-content,
#wppbDisclosureModal .modal-content {
    position: relative !important;
    background-color: #fff !important;
    border: 1px solid rgba(0,0,0,.2) !important;
    border-radius: .5rem !important;
    outline: 0 !important;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,.5) !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    pointer-events: auto !important;
}

/* Modal header */
#wppbOptionInfoModal .modal-header,
#wppbModelGalleryModal .modal-header,
#wppbDisclosureModal .modal-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 1rem !important;
    border-bottom: 1px solid #dee2e6 !important;
    background-color: #fff !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
}

/* Modal body */
#wppbOptionInfoModal .modal-body,
#wppbModelGalleryModal .modal-body,
#wppbDisclosureModal .modal-body {
    position: relative !important;
    padding: 1.5rem !important;
    background-color: #fff !important;
    overflow-y: auto !important;
}

/* Modal footer */
#wppbOptionInfoModal .modal-footer,
#wppbModelGalleryModal .modal-footer,
#wppbDisclosureModal .modal-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    padding: 1rem !important;
    border-top: 1px solid #dee2e6 !important;
    background-color: #fff !important;
}

/* Close button styling */
#wppbOptionInfoModal .btn-close,
#wppbModelGalleryModal .btn-close,
#wppbDisclosureModal .btn-close,
.wppb-modal-active .btn-close {
    box-sizing: content-box !important;
    width: 1em !important;
    height: 1em !important;
    padding: .25em .25em !important;
    color: #000 !important;
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat !important;
    border: 0 !important;
    border-radius: .25rem !important;
    opacity: .5 !important;
    cursor: pointer !important;
}

#wppbOptionInfoModal .btn-close:hover,
#wppbModelGalleryModal .btn-close:hover,
#wppbDisclosureModal .btn-close:hover,
.wppb-modal-active .btn-close:hover {
    opacity: .75 !important;
}

/* Hide Bootstrap modal when using custom handler */
.modal.fade:not(.show):not(.wppb-modal-active) {
    display: none !important;
}

/* Ensure modal images and videos are responsive */
#wppbOptionInfoModal img,
#wppbOptionInfoModal video {
    max-width: 100% !important;
    height: auto !important;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    #wppbOptionInfoModal .modal-dialog,
    #wppbModelGalleryModal .modal-dialog,
    #wppbDisclosureModal .modal-dialog {
        margin: 0.5rem !important;
        max-width: calc(100% - 1rem) !important;
    }
    
    #wppbOptionInfoModal,
    #wppbModelGalleryModal,
    #wppbDisclosureModal,
    .wppb-modal-active {
        padding: 0.5rem !important;
    }
}

/* Let Bootstrap modals use their default z-index values (1050, 1055)
   Only override if there are specific theme conflicts identified */

/* Ensure modal content is above backdrop */
.wppb-modal-active .modal-content {
    z-index: 1000000 !important;
    position: relative !important;
    pointer-events: auto !important;
}

/* Make sure bottom bars don't interfere with modals */
body.wppb-modal-open .bottom-bar,
body.wppb-modal-open .fixed-bottom,
body.wppb-modal-open [style*="position: fixed"] {
    z-index: 999998 !important;
}

/* ==========================================================================
   Thank You Page Styles
   ========================================================================== */

/* Thank You Page Container - Main wrapper for the thank you page */
#wppb_step_thank_you {
    width: 100%;
    padding: 2rem 1rem;
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Remove generic wrap class styles if inherited */
#wppb_step_thank_you.wppb_container {
    background: transparent;
    border: none;
    box-shadow: none;
}

/* Thank You Wrapper - Controls max-width and centering */
.wppb_thank_you_wrapper {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 0 15px;
}

/* Thank You Content Container - Ensures proper display */
#wppb_step_thank_you .wppb_thank_you_content {
    display: block !important; /* Override any display: contents inheritance */
    width: 100%;
}

/* Inner thank-you-content created by UIBuilder */
#wppb_step_thank_you .thank-you-content {
    max-width: 900px;
    margin: 0 auto;
    width: 100%;
}

/* Ensure Bootstrap container doesn't break centering */
#wppb_step_thank_you .thank-you-content .container {
    max-width: 100%;
    padding: 0;
}

/* Success icon styling */
#wppb_step_thank_you .success-icon {
    margin-bottom: 1.5rem;
}

/* Card styling for summary and calendly */
#wppb_step_thank_you .card {
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
}

/* Responsive adjustments for tablets */
@media (max-width: 992px) {
    .wppb_thank_you_wrapper {
        max-width: 100%;
        padding: 0 20px;
    }
    
    #wppb_step_thank_you {
        padding: 1.5rem 0.5rem;
    }
}

/* Responsive adjustments for mobile */
@media (max-width: 768px) {
    .wppb_thank_you_wrapper {
        padding: 0 10px;
    }
    
    #wppb_step_thank_you {
        padding: 1rem 0;
        min-height: 500px;
    }
    
    #wppb_step_thank_you .thank-you-content {
        padding: 0 0.5rem;
    }
}