/* =====================================================================
   BOOTSTRAP PRIMARY COLOR OVERRIDE
   Override Bootstrap's default primary color with our custom blue
   ===================================================================== */
:root {
    --bs-primary: #1956BC !important;
    --bs-primary-rgb: 25, 86, 188 !important;
}
#wppb_customize_container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto !important;
    padding: 0;
    min-height: 100vh;
    display: block;
    position: relative;
    left: auto;
    right: auto;
}

/* #wppb_customize_container .customize-content-wrapper {
    background: linear-gradient(90deg, #FFFFFF 50%, #EFEFEF 50%) !important;
} */
.size-selector.multi-selector-button {
    padding: 12px 20px 12px 5px !important;
    border-top: 1px solid #dddddd;
    border-left: 1px solid #dddddd;
    border-right: 1px solid #dddddd;
    border-bottom: 1px solid #dddddd;
    background-color: #ffffff;
    margin-bottom: 5px;
}
.customize-content-wrapper {
    display: flex;
    gap: 0;
    align-items: flex-start;
    min-height: 90vh;
}

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

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

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

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

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

 .nav-link a {
   text-decoration: none !important;
   text-decoration-thickness: 0px !important;
   text-underline-offset: 0px !important;
   border-radius: 0px !important;
   /* ✅ FIXED: Removed excessive red borders that created vertical lines */
   border-bottom: 3px solid transparent !important;
}

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

a.nav-link.active {
    border-radius: 0px !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_title_section {
    padding: 1rem 0 0.5rem 0;
    background: transparent;
    position: relative;
    z-index: 10;
    margin-bottom: 1rem; /* Space between title and visualizer */
}

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

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


/* Ensure title section flows naturally */
.wppb_title_section {
    position: relative;
    margin-bottom: 1rem;
    /* No special positioning - just normal document flow */
}

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




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


.sub-options-simple {
    display: flex;
    flex-direction: row; /* horizontal inline options */
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}
.sub-option-line {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    background-color: #f8f9fa;
    transition: all 0.2s ease;
    white-space: nowrap;
}
.sub-option-line:hover {
    background-color: #e9ecef;
    border-color: #adb5bd;
}

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

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

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

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

.sub-option-line input { 
    margin: 0; 
}
.sub-option-name { 
    font-size: 0.9rem; 
    color: #212529; 
    font-weight: 500;
}
.sub-option-price {
    font-size: 0.85rem;
    color: #28a745;
    font-weight: 600;
    margin-left: 0.5rem;
}
/**
 * Pool Builder ScrollSpy Styles
 * All styles related to the scrollspy functionality and navigation
 */
div.nav {
    padding-bottom: 10px !important;
}
.title_section p {
    display: none !important;
}
.section-header {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
}
.section-separator small {
    margin-top: 0px !important;
    display: none !important;
}


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

.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 */



.nav-pills .nav-link {
    border-radius: 0px !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 #333333 !important;
    margin-right: 15px;
}

.nav-pills .nav-link:hover {
    color: #1956BC;
    border-radius: 0px !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;
}

.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 {
    position: relative;
    /* REMOVED: max-height: 400px - let content determine height */
    overflow-y: auto; /* Allow vertical scrolling */
    padding: 0 1rem 1rem 1rem;
    flex: 1; /* Take remaining space in grid */
}

/* ScrollSpy Content Area - Only scrollable part of the page */
#customize-content {
    border-radius: 12px;
    border: 0px solid #dee2e6;
    width: 100%;
    height: auto;
    min-height: 100%;
    scroll-behavior: smooth; /* Smooth scrolling for better UX */
    box-sizing: border-box;
    position: relative;
    overscroll-behavior: contain; /* Prevent scroll chaining to page */
    padding-bottom: 400px !important;
    padding-right: 50px !important;
}

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

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

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

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

.scrollspy-content {
    padding: 5px 75px 50px 0px;
    width: 100%;
    max-height: 900px; /* Fixed height to prevent page expansion */
    height: 900px; /* Set fixed height for consistency */
    background-color: #f0f0f0;
    scroll-behavior: smooth; /* Restore smooth scrolling within container */
    box-sizing: border-box;
}

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

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

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

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

/* Content Placeholders */
.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 */
.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 */
}

.scrollspy-section:last-child {
    margin-bottom: 100px; /* Extra space at bottom for scrolling */
    padding-bottom: 100px;
}
.radio-button-card {
    /* min-width: 340px; */
    width: 100%;
}
/* Martin's Styles - Removed custom quantity-input styles to use Bootstrap defaults */
#unified-options-container {
    padding-bottom: 200px;
}




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

/* SUBCATEGORY SELECTOR */

.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;
}
.subcategory-header p {
    display: none !important;
}


/* Category Info */
.category-info {
    display: none !important;
    margin: 0px !important;
    padding: 0px !important;
}
/* Category Info */
.category-info small {
    display: block;
}

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

/* Checkmark positioning and styling */
.category-checkmark {
    display: inline-block;
    margin-left: 8px;
    /* position: relative;
    top: -1px;
    opacity: 0;
    transition: opacity 0.2s ease-in-out; */
}

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

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

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

/* Universal Radio Button Card Styling - All cards use radio-button-card classes */
.radio-button-card {
    position: relative;
    border-radius: 8px;
    border: 1px solid #e9ecef;
    padding: 0.6rem 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    background: white;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 50px;
    margin-bottom: 0px !important;
}

/* Size card base styling for specific contexts */
/* Size-specific radio button cards */
.wppb_size_single .radio-button-card,
.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_size_single .size-selector::before,
.wppb_size_selection .radio-button-card::before,
#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_size_single .size-selector.selected::before,
.wppb_size_single .size-selector.auto-selected::before,
.wppb_size_selection .radio-button-card.selected::before,
.wppb_size_single .radio-button-card.auto-selected::before {
    background: #1956BC;
    border-color: #1956BC;
}

.wppb_size_single .size-selector.selected::after,
.wppb_size_single .size-selector.auto-selected::after,
.wppb_size_selection .radio-button-card.selected::after,
.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 */
}

.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: #ffffff;
}

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

/* Auto-selected size card styling - Updated for unified size-selector structure */
.wppb_size_single .size-selector.auto-selected,
.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: #ffffff;
}

.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: #ffffff;
}

.radio-button-card[type="checkbox"] input {
    border-radius: 0px !important;
}
.radio-button-card-wrapper {
    width: 100%;
    /* Remove rigid width constraints to allow responsive layouts */
    margin-bottom: 5px !important;
    margin-top: 0px !important;
}

/* Universal Radio Button Visual Indicator - Fixed to match working size selector pattern */
.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 */
}

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

.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 */
.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 */
}

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

.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 */
.radio-button-card.quantity-card::before,
.radio-button-card.quantity-card::after {
    display: none !important;
}

/* Card Content Layout - Clean horizontal layout */
.radio-button-card-content,
.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_size_single .radio-button-card .option-price,
.wppb_size_selection .radio-button-card .option-price,
.wppb_size_single .radio-button-card .price-display,
.wppb_size_selection .radio-button-card .price-display,
.wppb_size_single .radio-button-card .price-amount,
.wppb_size_selection .radio-button-card .price-amount,
.wppb_size_single .radio-button-card .price,
.wppb_size_selection .radio-button-card .price,
#size-section .option-price,
#size-section .price-display,
#size-section .price-amount,
#size-section .price {
    display: none !important;
}

/* Ensure size selector content has proper spacing for radio indicators - Updated for unified structure */
.wppb_size_single .selector-content,
.wppb_size_single .radio-button-card-content,
.wppb_size_selection .radio-button-card-content,
#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_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_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: #ffffff;
}

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

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

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

/* Ensure radio inputs are completely hidden on size selectors */
.size-selector input[type="radio"],
.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 */
.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 */
}

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

.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 */
.single-option-note {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    z-index: 1;
    background: white;
    padding: 0 10px;
}

.option-info,
.option-info {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex: 1;
}

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

.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 */
.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 */
.option-info .option-description {
    display: none !important;
}

/* Show data-size-display value in place of option-description */
.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;
}


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

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

/* Price styling */
.option-price,
.option-price {
    color: #212529;
    font-size: 0.8rem;
    font-weight: 600;
    margin-left: auto;
}

/* Right-side meta container (price + info icon) */
.option-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: auto;
}

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

/* Sub-options styling */
/* Sub-options: force full-width row under the main line */
.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 */
.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);
    }
}

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

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

/* Simple suboption styling */
.sub-options-simple {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.sub-option-line {
    display: flex;
    align-items: center;
    padding: 0.5rem;
    background: #f8f9fa;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.sub-option-line:hover {
    background: #e9ecef;
}

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

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

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

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

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

.sub-option-name {
    flex: 1;
}

.sub-option-price {
    color: #6c757d;
    font-weight: 500;
}

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

/* Equipment Options Container */
/* .equipment-options-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.5rem !important;
    width: 100% !important;
    transition: all 0.2s ease !important;
}

.equipment-options-container {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
} */

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

/* Hide actual radio and checkbox inputs - entire card is clickable */
.radio-button-card {
    position: relative; /* Ensure positioning context */
}

.radio-button-card input[type="radio"],
.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 */
.radio-button-card:focus-within {
    outline: 2px solid #1956BC;
    outline-offset: 2px;
}

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

/* .select-lighting-btn {
    width: 100%;
} */

/* Lighting Controls
.lighting-controls {
    background: #f8f9fa;
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid #dee2e6;
}

.lighting-controls label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: #333;
} */

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

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

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

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

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

.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
   =================================================================== */

.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 */
#customize-content {
    padding-bottom: 400px !important;
    padding-right: 50px !important;
}
.customize-content {
    padding-bottom: 200vh; /* 60% of viewport height ensures Features can reach the top */
}

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

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

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

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

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

#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){
  .customize-right{
    grid-template-rows: auto 1fr;
    gap: 1rem;
    max-width: 600px;
  }
  
  /* Improve space utilization on tablet screens */
  .visualizer-section {
    padding: 15px 20px;
  }
  
  .options-section {
    padding: 15px 20px;
  }
}

/* Mobile: single source of truth */
@media (max-width: 768px){

  /* Quick Summary - Tablet responsive */
  #quick-summary-content-sidebar {
    /* font-size: 0.8rem; */
    padding: 0.75rem 0;
  }
  
  .summary-item {
    margin-bottom: 0.4rem !important;
  }
  
  #quick-summary-content-sidebar #wppb_open_gallery_btn img {
    max-height: 32px;
  }

  /* Layout: stack columns, remove sticky offsets on small screens */
  .customize-content-wrapper{
    flex-direction: column;
    gap: 0;
  }
  .visualizer-section,
  .options-section{
    flex: none;
    width: 100%;           /* Explicit full width */
    min-height: auto;
  }
  
  .visualizer-section {
    padding: 10px 15px;    /* Reduced padding for mobile */
  }
  
  .options-section {
    padding: 15px;         /* Consistent mobile padding */
  }
  
  .visualizer-container{
    position: relative;
    top: auto;
  }

  /* Scroll area: let content flow and keep it clear of the bottom bar */
  [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 */
  #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;
  }
  .scrollspy-content{
    max-height: none !important;
    height: auto !important;
  }

  /* Nav: horizontal scrolling with sane touch targets (no width caps) */
  .customize-nav{
    position: static;
    width: 100%;
    top: 0.5rem;
  }
  .customize-nav .nav{
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: 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 */
  }
  .customize-nav .nav::-webkit-scrollbar{ height: 8px; }
  .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 */
  .scrollspy-section{
    min-height: auto;
    margin-bottom: 0;
    scroll-margin-top: 72px; /* tweak if your nav is taller */
  }
  .scrollspy-section:last-child{
    margin-bottom: 0;
    padding-bottom: var(--wppb-bottom-bar-h, 84px);
  }

  /* Cards / content density on small screens */
  .radio-button-card-content{
    /* padding-right: 2rem; */
    gap: 1rem;
  }
  .option-info{ gap: 1rem; }

  /* Modal: comfortable margins and stacked columns */
  #wppbOptionInfoModal .modal-dialog{
    margin: 1rem;
    max-width: calc(100% - 2rem);
  }
  #wppbOptionImageContainer img{ max-height: 200px; }
  #wppbOptionInfoModal .col-md-6{ margin-bottom: 1rem; }
}

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


/* ===================================================================
   Option Info Modal Styles
   =================================================================== */

/* Enhanced modal styling for better media display */
#wppbOptionInfoModal .modal-dialog {
    max-width: 600px; /* Slightly larger modal for better media display */
}

#wppbOptionInfoModal .modal-body {
    padding: 1.5rem;
}

/* Video styling - full width layout */
#wppbOptionVideoContainer video {
    width: 100%;
    height: auto;
    border-radius: 0.375rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

/* Image styling - better proportions */
#wppbOptionImageContainer img {
    width: 100%;
    height: auto;
    max-height: 250px;
    object-fit: cover;
    border-radius: 0.375rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

/* Description styling */
#wppbOptionDescription {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #495057;
}


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

/* 1) Contain everything and use border-box so padding/border don’t blow width */
#wppb_customize_container{
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;               /* clip horizontal overflow at the root */
}
#wppb_customize_container, 
#wppb_customize_container *{
  box-sizing: border-box;
}

/* 2) Neutralize Bootstrap .row negative side margins inside the plugin */
#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_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_customize_container .customize-content-wrapper{
  display: flex;                    /* if it isn’t already */
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
  max-width: 100%;
}

#wppb_customize_container .visualizer-section,
#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_customize_container .visualizer-container,
#wppb_customize_container #customize-nav,
#wppb_customize_container #customize-content,
#wppb_customize_container .scrollspy-section,
#wppb_customize_container .section-content,
#wppb_customize_container .options-stack,
#wppb_customize_container .radio-button-card-wrapper,
#wppb_customize_container .radio-button-card,
#wppb_customize_container .size-selector{
  max-width: 100%;
}

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

/* Nav list should not demand more than the container can give */
#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_customize_container .section-content,
#wppb_customize_container .radio-button-card-content{
  overflow-wrap: anywhere;
}

/* Mobile stack: prevents side overflow at small widths */
@media (max-width: 768px){
  #wppb_customize_container .customize-content-wrapper{
    flex-direction: column;
    gap: 8px;
  }
  #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 */
.radio-button-card { width: 100%; }

.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 */
.radio-button-card-content > *{ min-width: 0; }

/* Qty column: rein in inline min-widths on small screens */
.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 */
.option-info{
  /* flex: 1 1 220px;            grows, but can shrink */
  min-width: 0;               /* <— critical so it doesn't force overflow */
}
.option-name{ font-weight: 600; }
.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 */
.option-meta{
  flex: 0 0 auto;
  margin-left: auto;          /* right-align in the row when there's room */
  display: flex;
  align-items: center;
  gap: 8px;
}
.option-price{ white-space: nowrap; }

/* Small screens: drop price/meta to a new line and right-align */
@media (max-width: 480px){

  /* Quick Summary - Mobile responsive */
  #quick-summary-content-sidebar {
    font-size: 0.75rem;
    line-height: 1.3;
    padding: 0.5rem 0;
  }
  
  .summary-item {
    margin-bottom: 0.3rem !important;
    align-items: flex-start;
    gap: 0.25rem;
  }
  
  .summary-item strong {
    margin-left: 0 !important;
    font-size: 0.8rem;
  }
  
  #quick-summary-content-sidebar #wppb_open_gallery_btn {
    margin-bottom: 0.5rem !important;
  }
  
  #quick-summary-content-sidebar #wppb_open_gallery_btn img {
    max-height: 28px;
  }
  .option-meta{
    flex-basis: 100%;
    justify-content: flex-end;
    margin-left: 0;
  }

  /* Optional: clamp super-long descriptions so cards don’t get too tall */
  .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 16px 16px 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 0;
  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;
  }
}