/*! Pool Builder Plugin — ScrollSpy / customize-step component
   05-components.scrollspy.css
   The whole customize-step web (scrollspy nav + option/size/radio-button-card
   selectors + sub-options + prices), consolidated in load order from the former
   pb-sections remnants + scrollspy.css + selector-buttons.css. Now a linted
   ITCSS component.

   no-duplicate-selectors is disabled file-wide: this is consolidated legacy CSS
   that relies on intentional cascade layering (the same selector redefined later
   to override earlier declarations). De-duplicating it is a separate,
   behavior-preserving pass — and an optional further split into a nav file vs a
   selectors file — both of which need visual QA. All other lint rules apply. */

/* ============================================================ *
 *  [1/3] Option/selector remnants — formerly the tail of pb-sections.css
 *        (loaded BEFORE scrollspy, so kept FIRST to preserve source order)
 * ============================================================ */

/* ScrollSpy styles moved to scrollspy.css */

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

/* Option Price Tag */


   
/* Stacked Options Container - Universal for all option types */
#wppb_wrapper .size-options-stack,
#wppb_wrapper .options-stack {
    display: flex;
    flex-direction: column;
    max-width: 100%;
    margin: 0 !important;
    margin-bottom: 0 !important;
    border: solid 0 red;
}


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

@media (max-width: 768px) {
    /* Card Layout Adjustments */
    
    
    
    
}


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

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

/* ============================================================ *
 *  [2/3] ScrollSpy proper — original scrollspy.css
 * ============================================================ */

/* #wppb_customize_container .customize-content-wrapper {
    background: linear-gradient(90deg, #FFFFFF 50%, #EFEFEF 50%) !important;
} */
#wppb_wrapper .size-selector.multi-selector-button {
    padding: 12px 20px 12px 5px !important;
    border-top: 1px solid #ddd;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    background-color: #fff;
    margin-bottom: 5px;
}

#wppb_wrapper .customize-content-wrapper {
    display: flex;
    gap: 0;
    align-items: flex-start;
    min-height: 90vh;
}

#wppb_wrapper .visualizer-section {
    flex: 0 0 50%;
    background: #FFF;
    padding: 20px;
    min-height: 100vh;
    max-width: 50%;        /* Prevent overflow on large screens */
}

#wppb_wrapper .options-section {
    flex: 0 0 50%;
    background: #EFEFEF;
    padding: 20px;
    min-height: 120vh;
}

#wppb_wrapper .visualizer-container {
    position: sticky;
    top: 20px;
}

/* Horizontal scrolling navigation */
#wppb_wrapper #customize-nav .nav {
    flex-wrap: nowrap;
    overflow: auto hidden;
    white-space: nowrap;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
    background: #EFEFEF;
    border: none;
    display: flex;
}

#wppb_wrapper #customize-nav .nav::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

/* Keep each category label on one line (the .nav above is built to scroll
   horizontally). Without this, .nav-link/.nav-item inherit white-space:normal
   and multi-word labels like "Additional Lighting" wrap to two lines. */
#wppb_wrapper #customize-nav .nav-item,
#wppb_wrapper #customize-nav .nav-link {
    white-space: nowrap;
}

 #wppb_wrapper .nav-link a {
   text-decoration: none !important;
   text-decoration-thickness: 0 !important;
   text-underline-offset: 0 !important;
   border-radius: 0 !important;

   /* ✅ FIXED: Removed excessive red borders that created vertical lines */
   border-bottom: 3px solid transparent !important;
}

#wppb_wrapper a.nav-link:hover {
    border-bottom: 3px solid #3853BC !important;
}

#wppb_wrapper a.nav-link.active {
    border-radius: 0 !important;

    /* ✅ FIXED: Clean active state with just bottom border */
    border-bottom: 3px solid #1956BC !important;
}


/* ===================================================================
   Visualization Card
   =================================================================== */

/* Title Section for Step 3 - Inside left column above visualizer */

#wppb_wrapper .wppb_title_section .title_section {
    margin-bottom: 0;
}

#wppb_wrapper .wppb_title_section h5 {
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
}


/* Ensure title section flows naturally */
#wppb_wrapper .wppb_title_section {
    padding: 1rem 0 0.5rem;
    background: transparent;
    z-index: 10;
    position: relative;
    margin-bottom: 1rem;
}

/* Mobile responsiveness for Visualization */
@media (max-width: 768px) {
    #wppb_wrapper .wppb_title_section {
        padding: 1rem 0; /* More padding on mobile */
        margin-bottom: 0.5rem; /* Less margin on mobile */
    }
    
}


/* =====================================================================
   Sub Options Stlying
   ===================================================================== */

/* Visual feedback for selected suboptions */

/* Make radio buttons and checkboxes visible and properly styled */

/**
 * Pool Builder ScrollSpy Styles
 * All styles related to the scrollspy functionality and navigation
 */
#wppb_wrapper div.nav {
    padding-bottom: 10px !important;
}

#wppb_wrapper .title_section p {
    display: none !important;
}

#wppb_wrapper .section-separator small {
    margin-top: 0 !important;
    display: none !important;
}


/* ===================================================================
   RIGHT SIDE - Scroll Spy Navigation + Content
   =================================================================== */

#wppb_wrapper .customize-right {
    display: grid;
    grid-template-rows: auto 1fr;     /* Nav on top, content below */

    /* gap removed for cleaner layout */
    min-width: 0; /* Allow content to shrink */
    max-width: 600px; /* Constrain entire right panel width */

    /* height removed - let content determine height naturally */

    /* overflow removed - let scrollspy-content handle scrolling */

    /* padding removed for cleaner layout */
    position: relative;
}

/* ===================================================================
   SCROLLSPY NAVIGATION
   =================================================================== */

/* Horizontal Scroll Spy Navigation - Fixed at top of right panel */


#wppb_wrapper .nav-pills .nav-link {
    border-radius: 0 !important;
    background-color: #EFEFEF;
    border-top: 2px solid #EFEFEF;
    border-left: 2px solid #EFEFEF !important;
    border-right: 2px solid #EFEFEF !important;
    border-bottom: 2px solid #333 !important;
    margin-right: 15px;
}

#wppb_wrapper .nav-pills .nav-link:hover {
    color: #1956BC;
    border-radius: 0 !important;
    background-color: #EFEFEF;
    border-top: 2px solid #EFEFEF;
    border-left: 2px solid #EFEFEF !important;
    border-right: 2px solid #EFEFEF !important;
    border-bottom: 5px solid #1956BC !important;
}

#wppb_wrapper .nav-pills .nav-link.active {
    color: #1956BC;
    background-color: #EFEFEF;
    border-top: 2px solid #EFEFEF;
    border-left: 2px solid #EFEFEF !important;
    border-right: 2px solid #EFEFEF !important;
    border-bottom: 5px solid #1956BC !important;
}

/* ===================================================================
   SCROLLSPY CONTENT AREA
   =================================================================== */

/* ScrollSpy content should be flexible to content */

/* ScrollSpy Content Area - Only scrollable part of the page */

/* Webkit scrollbar styling for customize-content */
#wppb_wrapper .customize-content::-webkit-scrollbar {
    width: 8px;
}

#wppb_wrapper .customize-content::-webkit-scrollbar-track {
    background: transparent;
}

#wppb_wrapper .customize-content::-webkit-scrollbar-thumb {
    background-color: #dee2e6;
    border-radius: 4px;
    border: 2px solid transparent;
}

#wppb_wrapper .customize-content::-webkit-scrollbar-thumb:hover {
    background-color: #adb5bd;
}

#wppb_wrapper .scrollspy-content {
    position: relative;
    overflow-y: auto;
    flex: 1;
    padding: 5px 75px 50px 0;
    width: 100%;
    max-height: 900px;
    height: 900px;
    background-color: #f0f0f0;
    scroll-behavior: smooth;
    box-sizing: border-box;
}

/* ===================================================================
   SCROLLSPY SECTIONS
   =================================================================== */

/* Section Headers - Condensed Clean Design */
#wppb_wrapper .section-header {
    margin-top: 10px !important;
    margin-bottom: -5px !important;
    border: none !important;
}

#wppb_wrapper .section-header h4 {
    margin-bottom: 0.125rem;
    color: #212529;
    font-weight: 700;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

#wppb_wrapper .section-header h5 {
    margin-bottom: 0.125rem;
    color: #212529;
    font-weight: 700;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

#wppb_wrapper .section-header p {
    display: none !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Content Placeholders */
#wppb_wrapper .content-placeholder {
    padding: 3rem;
    text-align: center;
    color: #6c757d;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px dashed #dee2e6;
}

/* ScrollSpy Sections - All visible, stacked vertically within fixed layout */
#wppb_wrapper .scrollspy-section {
    padding-top: 10px; /* Reduced padding for cleaner visual spacing */
    padding-bottom: 5px; /* Reduced bottom padding */
    min-height: auto; /* Remove min-height for natural content flow */
    max-width: 100%;
    margin-top: 5px;
    overflow-x: hidden;
    word-wrap: break-word;
    box-sizing: border-box;
    scroll-margin-top: 10px; /* Reduced offset for more precise positioning */
    scroll-margin-bottom: 100px; /* Reduced offset for more precise positioning */

    /* background removed for cleaner appearance */
}

#wppb_wrapper .scrollspy-section:last-child {
    margin-bottom: 100px; /* Extra space at bottom for scrolling */
    padding-bottom: 100px;
}

/* Martin's Styles - Removed custom quantity-input styles to use Bootstrap defaults */
#wppb_wrapper #unified-options-container {
    padding-bottom: 200px;
}


/* ===================================================================
   SCROLLSPY UI COMPONENTS (Radio Buttons, Selectors, Forms)
   =================================================================== */

/* SUBCATEGORY SELECTOR */

#wppb_wrapper .subcategory-header h5 {
    margin-top: 10px !important;
    margin-bottom: 1px !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: var(--bs-primary, #1956BC) !important;
}

#wppb_wrapper .subcategory-header p {
    display: none !important;
}


/* Category Info */
#wppb_wrapper .category-info {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Category Info */
#wppb_wrapper .category-info small {
    display: block;
}

/* ===================================================================
   CATEGORY CHECKMARKS - Visual indicators for completed selections
   =================================================================== */

/* Checkmark positioning and styling */
#wppb_wrapper .category-checkmark {
    display: inline-block;
    margin-left: 8px;

    /* position: relative;
    top: -1px;
    opacity: 0;
    transition: opacity 0.2s ease-in-out; */
}

#wppb_wrapper .category-checkmark img {
    width: 16px;
    height: 16px;
    vertical-align: middle;
}

/* Show checkmark with smooth fade-in */
#wppb_wrapper .category-checkmark[style*="display: block"],
#wppb_wrapper .category-checkmark[style*="display: inline-block"] {
    opacity: 1;
}

/* Responsive adjustments for mobile */
@media (max-width: 768px) {
    #wppb_wrapper .category-checkmark img {
        width: 14px;
        height: 14px;
    }
    
    #wppb_wrapper .category-checkmark {
        margin-left: 6px;
    }
}

/* Universal Radio Button Card Styling - All cards use radio-button-card classes */

/* Size card base styling for specific contexts */

/* Size-specific radio button cards */
#wppb_wrapper .wppb_size_single .radio-button-card,
#wppb_wrapper .wppb_size_selection .radio-button-card {
    transition: all 0.2s ease;
    cursor: pointer;
    position: relative;
}

/* Add radio indicators to wppb size selectors - Updated for unified size-selector structure */
#wppb_wrapper .wppb_size_single .size-selector::before,
#wppb_wrapper .wppb_size_selection .radio-button-card::before,
#wppb_wrapper #size-section .radio-button-card::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0.75rem;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #dee2e6;
    background: white;
    z-index: 2;
}

#wppb_wrapper .wppb_size_single .size-selector.selected::before,
#wppb_wrapper .wppb_size_single .size-selector.auto-selected::before,
#wppb_wrapper .wppb_size_selection .radio-button-card.selected::before,
#wppb_wrapper .wppb_size_single .radio-button-card.auto-selected::before {
    background: #1956BC;
    border-color: #1956BC;
}

#wppb_wrapper .wppb_size_single .size-selector.selected::after,
#wppb_wrapper .wppb_size_single .size-selector.auto-selected::after,
#wppb_wrapper .wppb_size_selection .radio-button-card.selected::after,
#wppb_wrapper .wppb_size_single .radio-button-card.auto-selected::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 16px;
    transform: translateY(-50%);
    color: white;
    font-size: 12px;
    font-weight: bold;
    z-index: 2; /* Above the radio indicator */
}

#wppb_wrapper .radio-button-card:hover {
    border-left: 4px solid #1956BC;
    border-top: 1px solid #1956BC;
    border-right: 1px solid #1956BC;
    border-bottom: 1px solid #1956BC;
    background-color: #fff;
}

#wppb_wrapper .wppb_size_selection .radio-button-card:hover {
    transform: translateY(0);
}

/* Auto-selected size card styling - Updated for unified size-selector structure */
#wppb_wrapper .wppb_size_single .size-selector.auto-selected,
#wppb_wrapper .wppb_size_single .radio-button-card.auto-selected {
    border-left: 4px solid #1956BC;
    border-top: 1px solid #1956BC;
    border-right: 1px solid #1956BC;
    border-bottom: 1px solid #1956BC;
    background-color: #fff;
}

#wppb_wrapper .radio-button-card.selected {
    border-left: 4px solid #1956BC;
    border-top: 1px solid #1956BC;
    border-right: 1px solid #1956BC;
    border-bottom: 1px solid #1956BC;
    background-color: #fff;
}

#wppb_wrapper .radio-button-card[type="checkbox"] input {
    border-radius: 0 !important;
}

#wppb_wrapper .radio-button-card-wrapper {
    width: 100%;

    /* Remove rigid width constraints to allow responsive layouts */
    margin-bottom: 5px !important;
    margin-top: 0 !important;
}

/* Universal Radio Button Visual Indicator - Fixed to match working size selector pattern */
#wppb_wrapper .radio-button-card::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0.75rem;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #dee2e6; /* ✅ FIXED: Add border like size selectors */
    background: white;          /* ✅ FIXED: White background instead of gray */
    transition: all 0.2s ease;
    z-index: 2; /* Ensure proper stacking */
}

#wppb_wrapper .radio-button-card.selected::before {
    background: #1956BC;
    border-color: #1956BC; /* ✅ FIXED: Update border color when selected */
}

#wppb_wrapper .radio-button-card.selected::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 16px; /* Slightly adjusted from 0.81rem */
    transform: translateY(-50%);
    color: white;
    font-size: 12px;
    font-weight: bold;
    line-height: 1;
    z-index: 3; /* ✅ FIXED: Ensure checkmark appears above background circle */
}

/* Checkbox-specific styling - Rounded Square instead of Circle */
#wppb_wrapper .radio-button-card.checkbox-card::before {
    border-radius: 4px; /* Rounded square instead of circle */
    border: 2px solid #dee2e6; /* Add border for better definition */
    background: white; /* White background when unselected */
    width: 18px; /* Slightly smaller than radio */
    height: 18px; /* Slightly smaller than radio */
}

#wppb_wrapper .radio-button-card.checkbox-card.selected::before {
    background: #1956BC; /* Blue background when selected */
    border-color: #1956BC; /* Blue border when selected */
}

#wppb_wrapper .radio-button-card.checkbox-card.selected::after {
    margin-left: 0; /* No offset needed for squares */
}

/* Hide radio button visual indicators when quantity control is enabled */
#wppb_wrapper .radio-button-card.quantity-card::before,
#wppb_wrapper .radio-button-card.quantity-card::after {
    display: none !important;
}

/* Card Content Layout - Clean horizontal layout */
#wppb_wrapper .radio-button-card-content,
#wppb_wrapper .option-card-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding-left: 2.5rem; /* Space for radio button on left */
    position: relative; /* For absolute positioning of note */
    flex-wrap: wrap; /* Allow children to wrap to the next line */
}

/* Hide prices on size selectors */
#wppb_wrapper .wppb_size_single .radio-button-card .option-price,
#wppb_wrapper .wppb_size_selection .radio-button-card .option-price,
#wppb_wrapper .wppb_size_single .radio-button-card .price-display,
#wppb_wrapper .wppb_size_selection .radio-button-card .price-display,
#wppb_wrapper .wppb_size_single .radio-button-card .price-amount,
#wppb_wrapper .wppb_size_selection .radio-button-card .price-amount,
#wppb_wrapper .wppb_size_single .radio-button-card .price,
#wppb_wrapper .wppb_size_selection .radio-button-card .price,
#wppb_wrapper #size-section .option-price,
#wppb_wrapper #size-section .price-display,
#wppb_wrapper #size-section .price-amount,
#wppb_wrapper #size-section .price {
    display: none !important;
}

/* Ensure size selector content has proper spacing for radio indicators - Updated for unified structure */
#wppb_wrapper .wppb_size_single .selector-content,
#wppb_wrapper .wppb_size_single .radio-button-card-content,
#wppb_wrapper .wppb_size_selection .radio-button-card-content,
#wppb_wrapper #size-section .radio-button-card-content {
    padding-left: 2.5rem;
    position: relative;
    z-index: 1; /* Keep content below radio indicator */
}

/* Add hover state for single size selectors to match existing behavior */
#wppb_wrapper .wppb_size_single .size-selector:hover {
    border-left: 4px solid #1956BC;
    border-top: 1px solid #1956BC;
    border-right: 1px solid #1956BC;
    border-bottom: 1px solid #1956BC;
}

/* Ensure single size selectors have consistent selected state */
#wppb_wrapper .wppb_size_single .size-selector.selected {
    border-left: 4px solid #1956BC;
    border-top: 1px solid #1956BC;
    border-right: 1px solid #1956BC;
    border-bottom: 1px solid #1956BC;
    background: #fff;
}

/* Size Selector */
#wppb_wrapper .size-selector {
    position: relative;
}

#wppb_wrapper .size-selector:hover {
    border-left: 4px solid #1956BC;
    border-top: 1px solid #1956BC;
    border-right: 1px solid #1956BC;
    border-bottom: 1px solid #1956BC;
}

#wppb_wrapper .size-selector.selected {
    border-left: 4px solid #1956BC;
    border-top: 1px solid #1956BC;
    border-right: 1px solid #1956BC;
    border-bottom: 1px solid #1956BC;
    background: #fff;
}

/* Ensure radio inputs are completely hidden on size selectors */
#wppb_wrapper .size-selector input[type="radio"],
#wppb_wrapper .size-selector input[type="checkbox"] {
    position: absolute !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    pointer-events: none !important;
    top: -9999px !important;
    left: -9999px !important;
}

/* Add radio indicators to size selectors */
#wppb_wrapper .size-selector::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0.75rem;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #dee2e6;
    background: white;
    z-index: 1; /* Ensure proper stacking */
}

#wppb_wrapper .size-selector.selected::before {
    background: #1956BC;
    border-color: #1956BC;
}

#wppb_wrapper .size-selector.selected::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 16px;
    transform: translateY(-50%);
    color: white;
    font-size: 12px;
    font-weight: bold;
    z-index: 2; /* Above the radio indicator */
}

/* Single option note styling */
#wppb_wrapper .single-option-note {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    z-index: 1;
    background: white;
    padding: 0 10px;
}

#wppb_wrapper .option-info .option-dimensions {
    display: block !important;
    position: relative;
    margin: 0;
    left: 30px;
    padding-right: 10px !important;
    width: 100px;
    color: #495057;
    font-size: 0.8rem;
    font-weight: 500;
}

/* Custom size display element - will be populated by JavaScript */
#wppb_wrapper .size-display-from-data {
    position: relative;
    margin: 0;
    left: 30px;
    padding-right: 10px !important;
    width: 100px;
    color: #495057;
    font-size: 0.8rem;
    font-weight: 500;
    display: block;
}

/* Hide the old option-description and show size from data attribute */
#wppb_wrapper .option-info .option-description {
    display: none !important;
}

/* Show data-size-display value in place of option-description */
#wppb_wrapper .radio-button-card[data-size-display]:not([data-size-display=""]) .option-info::after {
    content: attr(data-size-display);
    position: relative;
    margin: 0;
    left: 30px;
    padding-right: 10px !important;
    width: 100px;
    color: #495057;
    font-size: 0.8rem;
    font-weight: 500;
    display: block;
}


#wppb_wrapper .size-details,
#wppb_wrapper .option-details {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: #212529;
    font-size: 0.8rem;
    font-weight: 600;
}

#wppb_wrapper .size-details small,
#wppb_wrapper .option-details small {
    color: #6c757d;
    font-size: 0.875rem;
    font-weight: 500;
}

/* Price styling */

/* Right-side meta container (price + info icon) */

#wppb_wrapper .option-info-btn {
    color: #6c757d;
}

#wppb_wrapper .option-info-btn:hover,
#wppb_wrapper .option-info-btn:focus {
    color: #1956BC;
}

/* Sub-options styling */

/* Sub-options: force full-width row under the main line */
#wppb_wrapper .sub-options-wrapper {
    display: none; /* Hide by default until parent is selected */
    flex-basis: 100%;
    width: 100%;
    margin-top: 0.75rem;
    padding-left: 1.5rem; /* Indent for visual hierarchy */
    border-left: 2px solid #e9ecef; /* Visual connection to parent */
}

/* Show suboptions when parent option is selected */
#wppb_wrapper .radio-button-card.selected .sub-options-wrapper {
    display: block;
    animation: slideDown 0.3s ease;
}

/* Animation for smooth appearance */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

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

#wppb_wrapper .sub-options-label { 
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: #495057;
}

#wppb_wrapper .sub-options-container .radio-button-card-wrapper { margin-top: 2px !important; }

/* Simple suboption styling */
#wppb_wrapper .sub-options-simple {
    flex-flow: row wrap;
    margin-top: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

#wppb_wrapper .sub-option-line {
    gap: 0.5rem;
    border: 1px solid #dee2e6;
    white-space: nowrap;
    display: flex;
    align-items: center;
    padding: 0.5rem;
    background: #f8f9fa;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s ease;
}

#wppb_wrapper .sub-option-line:hover {
    border-color: #adb5bd;
    background: #e9ecef;
}

/* Visual feedback for selected suboptions */
#wppb_wrapper .sub-option-line.selected, #wppb_wrapper .sub-option-line:has(input:checked) {
    background-color: #e3f2fd;
    border-color: #1956BC;
    color: #1565c0;
}

#wppb_wrapper .sub-option-line.selected .sub-option-name, #wppb_wrapper .sub-option-line:has(input:checked) .sub-option-name {
    font-weight: 600;
    color: #1565c0;
}

#wppb_wrapper .sub-option-line.selected .sub-option-price, #wppb_wrapper .sub-option-line:has(input:checked) .sub-option-price {
    color: #1565c0;
    font-weight: 600;
}

/* Make radio buttons and checkboxes visible and properly styled */
#wppb_wrapper .sub-option-line input[type="radio"], #wppb_wrapper .sub-option-line input[type="checkbox"] {
    position: static;
    opacity: 1;
    margin-right: 0.75rem;
    width: 16px;
    height: 16px;
    accent-color: #1956BC;
}

#wppb_wrapper .sub-option-line input {
    margin: 0;
}

#wppb_wrapper .sub-option-name {
    font-size: 0.9rem;
    color: #212529;
    font-weight: 500;
    flex: 1;
}

#wppb_wrapper .sub-option-price {
    font-size: 0.85rem;
    margin-left: 0.5rem;
    color: #6c757d;
    font-weight: 500;
}

/* ===================================================================
   EQUIPMENT SECTION STYLES
   =================================================================== */

/* Category-specific styling for unified cards - borders removed per user request */

/* Hide actual radio and checkbox inputs - entire card is clickable */

#wppb_wrapper .radio-button-card input[type="radio"],
#wppb_wrapper .radio-button-card input[type="checkbox"] {
    position: absolute;
    top: -9999px; /* Move completely off-screen to prevent overlap */
    left: -9999px;
    opacity: 0;
    pointer-events: none;
    width: 1px;
    height: 1px;
}

/* Focus states for accessibility */
#wppb_wrapper .radio-button-card:focus-within {
    outline: 2px solid #1956BC;
    outline-offset: 2px;
}

/* Option Selector */
#wppb_wrapper .option-selector {
    text-align: center;
    margin-top: auto;
}

#wppb_wrapper .quantity-control {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

#wppb_wrapper .quantity-control button {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

#wppb_wrapper .quantity-control input {
    width: 60px !important;
    text-align: center;
}

/* Quantity Input Controls */
#wppb_wrapper .quantity-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
    padding-right: 3rem;
}

#wppb_wrapper .quantity-controls input[type="number"] {
    width: 60px;
    text-align: center;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 0.25rem;
    font-weight: 600;
}

#wppb_wrapper .quantity-controls .btn {
    width: 30px;
    height: 30px;
    border-radius: 4px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
}

/* ===================================================================
   LOADING PLACEHOLDERS
   =================================================================== */

#wppb_wrapper .loading-placeholder {
    text-align: center;
    padding: 2rem;
    color: #6c757d;
    font-style: italic;
}

/* ===================================================================
   SCROLLSPY BOTTOM SPACING
   =================================================================== */

/* Add bottom padding to allow last sections to scroll to top */
#wppb_wrapper #customize-content {
    border-radius: 12px;
    border: 0 solid #dee2e6;
    width: 100%;
    height: auto;
    min-height: 100%;
    scroll-behavior: smooth;
    box-sizing: border-box;
    position: relative;
    overscroll-behavior: contain;
    padding-bottom: 400px !important;
    padding-right: 50px !important;
}

#wppb_wrapper .customize-content {
    padding-bottom: 200vh; /* 60% of viewport height ensures Features can reach the top */
}

/* ===================================================================
   QUICK SUMMARY RESPONSIVE STYLES
   =================================================================== */

/* Base quick summary sidebar styles */
#wppb_wrapper #quick-summary-content-sidebar {
    /* font-size: 0.9rem; */
    line-height: 1.4;
    padding: 1rem 0;
}

#wppb_wrapper .summary-item {
    font-size: inherit;
    margin-bottom: 0.5rem !important; /* Override Bootstrap mb-2 */
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

#wppb_wrapper .summary-item strong {
    font-weight: 600;
    margin-left: 0.5rem !important; /* Override inline margin-left: 8px */
}

/* Gallery button in quick summary */
#wppb_wrapper #quick-summary-content-sidebar #wppb_open_gallery_btn {
    margin-bottom: 0.75rem !important;
}

#wppb_wrapper #quick-summary-content-sidebar #wppb_open_gallery_btn img {
    max-height: 36px; /* Slightly smaller for mobile */
    height: auto;
}

/* ================================
   ScrollSpy / Mobile Responsive (consolidated)
   ================================ */

/* Tablet & down: keep nav above content in the right column */
@media (max-width: 1200px){
  #wppb_wrapper .customize-right{
    grid-template-rows: auto 1fr;
    gap: 1rem;
    max-width: 600px;
  }
  
  /* Improve space utilization on tablet screens */
  #wppb_wrapper .visualizer-section {
    padding: 15px 20px;
  }
  
  #wppb_wrapper .options-section {
    padding: 15px 20px;
  }
}

/* Mobile: single source of truth */
@media (max-width: 768px){
  /* Quick Summary - Tablet responsive */
  #wppb_wrapper #quick-summary-content-sidebar {
    /* font-size: 0.8rem; */
    padding: 0.75rem 0;
  }
  
  #wppb_wrapper .summary-item {
    margin-bottom: 0.4rem !important;
  }
  
  #wppb_wrapper #quick-summary-content-sidebar #wppb_open_gallery_btn img {
    max-height: 32px;
  }

  /* Layout: stack columns, remove sticky offsets on small screens */
  #wppb_wrapper .customize-content-wrapper{
    flex-direction: column;
    gap: 0;
  }

  #wppb_wrapper .visualizer-section,
  #wppb_wrapper .options-section{
    flex: none;
    width: 100%;           /* Explicit full width */
    min-height: auto;
  }
  
  #wppb_wrapper .visualizer-section {
    padding: 10px 15px;    /* Reduced padding for mobile */
  }
  
  #wppb_wrapper .options-section {
    padding: 15px;         /* Consistent mobile padding */
  }
  
  #wppb_wrapper .visualizer-container{
    position: relative;
    top: auto;
  }

  /* Scroll area: let content flow and keep it clear of the bottom bar */
  #wppb_wrapper [data-bs-spy="scroll"]{
    height: auto !important;
    max-height: none !important;
    overflow-y: visible;
    padding-bottom: var(--wppb-bottom-bar-h, 84px) !important;
    scroll-padding-bottom: var(--wppb-bottom-bar-h, 84px);
  }

  /* if your CSS sets big gutters elsewhere, tame them here */
  #wppb_wrapper #customize-content{
    padding-right: 0 !important;

    /* keep if you previously added huge padding-bottom values; the var wins */
    padding-bottom: var(--wppb-bottom-bar-h, 84px) !important;
    height: auto !important;
    min-height: 0 !important;
  }

  #wppb_wrapper .scrollspy-content{
    max-height: none !important;
    height: auto !important;
  }

  /* Nav: horizontal scrolling with sane touch targets (no width caps) */
  #wppb_wrapper .customize-nav{
    position: static;
    width: 100%;
    top: 0.5rem;
  }

  #wppb_wrapper .customize-nav .nav{
    display: flex;
    flex-wrap: nowrap;
    overflow: auto hidden;
    gap: 0.25rem;
    padding: 0.75rem;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    max-width: none !important; /* overrides the old 300/400/500px caps */
  }
  #wppb_wrapper .customize-nav .nav::-webkit-scrollbar{ height: 8px; }

  #wppb_wrapper .customize-nav .nav-link{
    display: inline-block;      /* fix “.nav-link a” mis-selector elsewhere */
    white-space: nowrap;
    margin: 0;
    min-width: 80px;
    min-height: 44px;
    font-size: 0.9rem;
    padding: 0.625rem 1rem;
    line-height: 1.2;
    scroll-snap-align: start;
  }

  /* Sections: remove giant gaps; last section clears the bottom bar */
  #wppb_wrapper .scrollspy-section{
    min-height: auto;
    margin-bottom: 0;
    scroll-margin-top: 72px; /* tweak if your nav is taller */
  }

  #wppb_wrapper .scrollspy-section:last-child{
    margin-bottom: 0;
    padding-bottom: var(--wppb-bottom-bar-h, 84px);
  }

  /* Cards / content density on small screens */
  #wppb_wrapper .radio-button-card-content{
        flex-direction: column;
        align-items: flex-start;
        padding-left: 1.5rem;
        gap: 1rem;
  }

  #wppb_wrapper .option-info{
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem; }

}

/* Desktop & tablet: REMOVE old “forced scrolling via max-width” caps */
#wppb_wrapper .customize-nav .nav{ max-width: none; }  /* replaces the 300/400/500px rules */


/* ================================
   Builder containment (stop right-side overflow)
   ================================ */

/* 1) Contain everything and use border-box so padding/border don’t blow width */
#wppb_wrapper #wppb_customize_container{
    margin: 0 auto !important;
    padding: 0;
    min-height: 100vh;
    display: block;
    left: auto;
    right: auto;
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

#wppb_wrapper #wppb_customize_container, 
#wppb_wrapper #wppb_customize_container *{
  box-sizing: border-box;
}

/* 2) Neutralize Bootstrap .row negative side margins inside the plugin */
#wppb_wrapper #wppb_customize_container .row{
  /* BS5 uses negative margins via --bs-gutter-x; zero them to avoid overflow */
  --bs-gutter-x: 1rem;              /* keep some gutter spacing */
  --bs-gutter-y: 1rem;

  margin-right: 0 !important;
  margin-left: 0 !important;
}

#wppb_wrapper #wppb_customize_container .row > *{
  padding-right: calc(var(--bs-gutter-x)/2);
  padding-left:  calc(var(--bs-gutter-x)/2);
}

/* 3) Flex container + children: allow shrink and cap widths */
#wppb_wrapper #wppb_customize_container .customize-content-wrapper{
  display: flex;                    /* if it isn’t already */
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 16px;
  width: 100%;

  /* Cap the 2-column layout to the shared content width and center it, so the
     full-width breakout doesn't stretch the visualizer/options edge-to-edge.
     width:100% + this max-width => min(container, --wppb-max-width), so it still
     never overflows a narrower container. */
  max-width: var(--wppb-max-width);
  margin-inline: auto;
}

#wppb_wrapper #wppb_customize_container .visualizer-section,
#wppb_wrapper #wppb_customize_container .options-section{
  flex: 1 0;                      /* both columns share space */
  min-width: 0;                     /* CRITICAL: allows shrinking below content width */
  max-width: 100%;
  overflow: visible;
}

/* Ensure common inner blocks never push past the container */
#wppb_wrapper #wppb_customize_container .visualizer-container,
#wppb_wrapper #wppb_customize_container #customize-nav,
#wppb_wrapper #wppb_customize_container #customize-content,
#wppb_wrapper #wppb_customize_container .scrollspy-section,
#wppb_wrapper #wppb_customize_container .section-content,
#wppb_wrapper #wppb_customize_container .options-stack,
#wppb_wrapper #wppb_customize_container .radio-button-card-wrapper,
#wppb_wrapper #wppb_customize_container .radio-button-card,
#wppb_wrapper #wppb_customize_container .size-selector{
  max-width: 100%;
}

/* Images/media always responsive */
#wppb_wrapper #wppb_customize_container img,
#wppb_wrapper #wppb_customize_container video{
  max-width: 100%;
  height: auto;
}

/* Nav list should not demand more than the container can give */
#wppb_wrapper #wppb_customize_container #customize-nav .nav{
  min-width: 0;                     /* lets it shrink inside flex containers */
  max-width: 100%;
}

/* If any inner element uses explicit width + padding, keep it inside */
#wppb_wrapper #wppb_customize_container .section-content,
#wppb_wrapper #wppb_customize_container .radio-button-card-content{
  overflow-wrap: anywhere;
}

/* Mobile stack: prevents side overflow at small widths */
@media (max-width: 768px){
  #wppb_wrapper #wppb_customize_container .customize-content-wrapper{
    flex-direction: column;
    gap: 8px;
  }

  #wppb_wrapper #wppb_customize_container .visualizer-container{
    position: relative !important;  /* cancel sticky on short screens */
    top: auto !important;
  }
}


/* --- Option card layout fixes --- */

/* Base: allow wrapping and shrinking */
#wppb_wrapper .radio-button-card {
    border-radius: 8px;
    border: 1px solid #e9ecef;
    padding: 0.6rem 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    background: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 50px;
    margin-bottom: 0 !important;
    position: relative;
    width: 100%; }

#wppb_wrapper .radio-button-card-content{
  display: flex;              /* keeps your current layout */
  align-items: center;
  flex-wrap: wrap;            /* <— critical: allow wrapping */
  gap: 12px;                  /* nicer spacing when it wraps */
}

/* Let all children shrink if needed */
#wppb_wrapper .radio-button-card-content > *{ min-width: 0; }

/* Qty column: rein in inline min-widths on small screens */
#wppb_wrapper .quantity-control-left{
  min-width: 56px !important; /* overrides inline 70px */
  margin-right: 10px !important;
  flex: 0 0 auto;
}

/* Info block: take remaining width, allow text to wrap */
#wppb_wrapper .option-info{
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex: 1;
    min-width: 0;
}

#wppb_wrapper .option-name{
    margin: 0;
    color: #212529;
    font-size: 0.8rem;
    min-width: 110px;
    font-weight: 600; }

#wppb_wrapper .option-description{
  color: #6c757d;
  overflow-wrap: anywhere;    /* break long words/URLs if any */
}

/* Price/meta: stick to content size; align to the right edge of the row */
#wppb_wrapper .option-meta{
    flex: 0 0 auto;
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

#wppb_wrapper .option-price{
    display: inline-block;
    background: #e7f3ff;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    color: #212529;
    font-size: 0.8rem;
    font-weight: 600;
    margin-left: auto;
    white-space: nowrap; }

/* Small screens: drop price/meta to a new line and right-align */
@media (max-width: 480px){
  /* Quick Summary - Mobile responsive */
  #wppb_wrapper #quick-summary-content-sidebar {
    font-size: 0.75rem;
    line-height: 1.3;
    padding: 0.5rem 0;
  }
  
  #wppb_wrapper .summary-item {
    margin-bottom: 0.3rem !important;
    align-items: flex-start;
    gap: 0.25rem;
  }
  
  #wppb_wrapper .summary-item strong {
    margin-left: 0 !important;
    font-size: 0.8rem;
  }
  
  #wppb_wrapper #quick-summary-content-sidebar #wppb_open_gallery_btn {
    margin-bottom: 0.5rem !important;
  }
  
  #wppb_wrapper #quick-summary-content-sidebar #wppb_open_gallery_btn img {
    max-height: 28px;
  }

  #wppb_wrapper .option-meta{
    flex-basis: 100%;
    justify-content: flex-end;
    margin-left: 0;
  }

  /* Optional: clamp super-long descriptions so cards don’t get too tall */
  #wppb_wrapper .option-description{
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}


/* ===============  Card base  =============== */
#wppb_wrapper .radio-button-card{
  position: relative;
  padding: 16px;   /* left gutter for ::before bullet */
  border-radius: 12px;
}

#wppb_wrapper .radio-button-card-content{
  display: grid !important;
  grid-template-columns: minmax(0,1fr) auto; /* info | meta */
  align-items: start;
  gap: clamp(8px, 2vw, 16px);
  grid-auto-rows: min-content;
}

#wppb_wrapper .radio-button-card-content .option-info{
  min-width: 0; /* allow wrapping */
}

#wppb_wrapper .radio-button-card-content .option-name{
  font-weight: 700;

  /* line-height: 1.25;
  font-size: clamp(1rem, 1.6vw, 1.125rem); */
  margin: 0 0 .125rem;
  overflow-wrap: anywhere;
  hyphens: auto;
}

#wppb_wrapper .radio-button-card-content .option-description{
  margin-top: .25rem;
  color: #6c757d;
}

#wppb_wrapper .radio-button-card-content .option-meta{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  justify-self: end;  /* price/info hugs right edge */
  white-space: nowrap; /* keep price pill on one line */
}

/* ===============  Quantity variant  =============== */

/* tighten the widget and kill inline margins */
#wppb_wrapper .quantity-control-left{
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  margin-right: 0 !important;
}

#wppb_wrapper .quantity-control-left .quantity-input{
  width: 72px !important;
}

/* Mobile (stack nicely: name + price on row 1, qty under name) */
@media (max-width: 480px){
  #wppb_wrapper .radio-button-card-content.with-quantity{
    grid-template-columns: minmax(0,1fr) auto;
    grid-template-areas:
      "info meta"
      "qty  meta";
    row-gap: .5rem;
  }
  #wppb_wrapper .radio-button-card-content.with-quantity .option-info{ grid-area: info; }

  #wppb_wrapper .radio-button-card-content.with-quantity .option-meta {
    grid-area: meta;
    align-self: start;
  }
  #wppb_wrapper .radio-button-card-content.with-quantity .quantity-control-left{ grid-area: qty; }

  /* clamp very long names a bit so the price doesn’t drop */
  #wppb_wrapper .radio-button-card-content.with-quantity .option-name{
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* ≥481px (qty gets its own left column; aligns visually with bullets) */
@media (min-width: 481px){
  #wppb_wrapper .radio-button-card-content.with-quantity{
    grid-template-columns: 84px minmax(0,1fr) auto; /* qty | info | meta */
  }

  #wppb_wrapper .radio-button-card-content.with-quantity .quantity-control-left{
    justify-self: start;
  }
}

/* ============================================================ *
 *  [3/3] Selector buttons — formerly selector-buttons.css
 *        (loaded AFTER scrollspy, so kept LAST to preserve source order)
 * ============================================================ */

/**
 * Selector Buttons CSS
 * 
 * Unified styling for all Pool Builder selector components.
 * This file contains both common multi-selector styles and 
 * specific selector type styles.
 * 
 * @since 1.0.0
 */


/* =====================================================================
   UNIFIED MULTI-SELECTOR BUTTON STYLES
   These classes provide consistent styling across all selector types
   ===================================================================== */

#wppb_wrapper .multi-selector-button {
    display: block;
    width: 100%;
    padding: 8px 14px;
    margin-bottom: 5px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    transition: all 0.3s ease;
}

#wppb_wrapper .multi-selector-button:hover {
    border-left: 4px solid #1956BC;
    border-top: 1px solid #1956BC;
    border-right: 1px solid #1956BC;
    border-bottom: 1px solid #1956BC;
}

#wppb_wrapper .multi-selector-button.selected {
    border-left: 4px solid var(--bs-primary, #1956BC);
    border-top: 1px solid var(--bs-primary, #1956BC);
    border-right: 1px solid var(--bs-primary, #1956BC);
    border-bottom: 1px solid var(--bs-primary, #1956BC);
    background: #fff;
}

#wppb_wrapper .multi-selector-button .selector-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

#wppb_wrapper .multi-selector-button .selector-name {
    font-weight: 600;
    font-size: 16px;
    color: #333;
    flex-grow: 1;
}

#wppb_wrapper .multi-selector-button .selector-name .model-name {
    font-weight: 400;
    font-size: 14px;
    color: #666;
    margin-left: 8px;
    white-space: nowrap;
}


#wppb_wrapper .multi-selector-button .selector-quantity {
    display: flex;
    align-items: center;
    gap: 8px;
}

#wppb_wrapper .multi-selector-button .selector-quantity .form-select {
    min-width: 60px;
    padding: 4px 8px !important;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
}

#wppb_wrapper .multi-selector-button .selector-price {
    font-weight: 600;
    font-size: 16px;
    color: #333;
    white-space: nowrap;
}

#wppb_wrapper .radio-button-card-content.with-quantity {
    padding-left: 0 !important;
}

#wppb_wrapper .form-select.form-select-sm.quantity-input {
    padding: 0.125rem 0.5rem !important;
    padding-left: 0 !important;
}


/* =====================================================================
   RESPONSIVE DESIGN
   ===================================================================== */

@media (max-width: 768px) {
    #wppb_wrapper .multi-selector-button {
        padding: 12px;
    }
    
    #wppb_wrapper .multi-selector-button .selector-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    #wppb_wrapper .multi-selector-button .selector-quantity {
        align-self: flex-end;
    }
}

/* Pool Type Selector */
#wppb_wrapper .type-selector:hover {
    border-left: 4px solid #1956BC;
    border-top: 1px solid #1956BC;
    border-right: 1px solid #1956BC;
    border-bottom: 1px solid #1956BC;
}

#wppb_wrapper .type-selector.selected {
    border-left: 4px solid #1956BC;
    border-top: 1px solid #1956BC;
    border-right: 1px solid #1956BC;
    border-bottom: 1px solid #1956BC;
    background: #fff;
}

/* Series Selector */
#wppb_wrapper .series-selector:hover {
    border-left: 4px solid #1956BC;
    border-top: 1px solid #1956BC;
    border-right: 1px solid #1956BC;
    border-bottom: 1px solid #1956BC;
}

#wppb_wrapper .series-selector.selected {
    border-left: 4px solid #1956BC;
    border-top: 1px solid #1956BC;
    border-right: 1px solid #1956BC;
    border-bottom: 1px solid #1956BC;
    background: #fff;
}


/* Hide price on size selectors */
#wppb_wrapper .size-selector .option-price,
#wppb_wrapper .size-selector .price-display,
#wppb_wrapper .size-selector .price-amount,
#wppb_wrapper .size-selector .price {
    display: none !important;
}

/* Add padding to size selector content for radio indicator */
#wppb_wrapper .size-selector .radio-button-card-content,
#wppb_wrapper .size-selector .option-info,
#wppb_wrapper .size-selector .selector-content {
    padding-left: 2.5rem;
}

/* Size dimensions text */
#wppb_wrapper .selector-dimensions {
    font-size: 0.875rem;
    color: #666;
    margin-top: 4px;
    margin-bottom: 8px;
}

/* Section separator for multiple option types in same section */
#wppb_wrapper .section-separator {
    border-top: 1px solid #e0e0e0;
    padding-top: 1rem;
}

#wppb_wrapper .section-subheader {
    font-weight: 600;
    color: #333;
    margin-bottom: 0.5rem;
}