/** * Components — Bottom Bar * Fixed bottom navigation bar: sticky container, price + financing display, * back/continue buttons, and the slide-up / fade-in animations. * Migrated verbatim from pb-sections.css (scope-first decomposition). */ /* ===================================================================== BOTTOM BAR CONTAINERS ===================================================================== */ #wppb_wrapper .wppb-bottom-bar-container { /* Merged from a second .wppb-bottom-bar-container block lower in the file (all !important, later in source) — its width/max-width/margin/padding won, so block-1's padding:0 and margin-top never applied. Effective values kept. */ width: 100% !important; max-width: var(--wppb-max-width) !important; display: flex; flex-direction: row; justify-content: space-between; align-items: center; background-color: var(--wppb-white); margin: 0 auto !important; padding: 1rem 2rem !important; } #wppb_wrapper .wppb-financing-custom { font-size: 0.8rem; color: var(--wppb-muted); letter-spacing: 0.05rem; } /* =================================================================== FIXED BOTTOM NAVIGATION BAR =================================================================== */ @keyframes slideUpBottom { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* ========================================================================== */ /* WPPB Fixed bottom bar */ /* ========================================================================== */ /* Bottom bar main container — FIXED to the viewport bottom so it pins regardless of the host theme's scroll model. position:sticky only pins relative to the theme's scrolling ancestor, so themes that scroll an inner container with body{overflow:hidden} (e.g. pools-today, which scrolls #main) broke it. Fixed is theme-independent. Content clearance comes from the wrapper's bottom margin (03-elements.wordpress.css) + --wppb-bottom-bar-h scroll padding. */ #wppb_wrapper #wppb_bottom_bar { position: fixed; left: 0; bottom: 0; /* Full-bleed bar. Subtract the vertical scrollbar width (--wppb-sbw, set on by the scrollbar setter in pool-builder-app.js) so the 100vw width doesn't overshoot and spawn a phantom horizontal scrollbar on classic- scrollbar platforms. --wppb-sbw defaults to 0px (collapses to 100vw). */ width: calc(100vw - var(--wppb-sbw, 0px)) !important; margin: 0 !important; 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 */ } #wppb_wrapper .wppb-bottom-bar-left, #wppb_wrapper .wppb-bottom-bar-right { flex: 0 0 auto; display: flex; align-items: center; gap: 1rem; /* Add gap between price and button */ } #wppb_wrapper .wppb-bottom-bar-center { flex: 1; display: flex; justify-content: center; align-items: center; } #wppb_wrapper .wppb-price-display { text-align: right; /* Align text to the right */ padding: 0 1rem; } #wppb_wrapper .wppb-price-label { font-size: 0.875rem; color: var(--wppb-muted); margin-bottom: 0.25rem; font-weight: 500; } #wppb_wrapper .wppb-price-main { display: flex; align-items: baseline; justify-content: flex-end; /* Align to the right */ gap: 0.5rem; margin-bottom: 0.25rem; } #wppb_wrapper .wppb-price-amount { font-size: 1.5rem; font-weight: 700; color: var(--wppb-success); transition: transform 0.15s ease; } #wppb_wrapper .wppb-financing-amount { display: flex; align-items: baseline; gap: 0.25rem; font-size: 1rem; color: var(--wppb-gray-medium); font-weight: 600; animation: fadeIn 0.3s ease-in; } #wppb_wrapper .wppb-financing-slash { font-size: 1.25rem; color: var(--wppb-gray-medium); margin: 0 0.125rem; } #wppb_wrapper .wppb-financing-monthly { font-size: 1.1rem; font-weight: 600; } #wppb_wrapper .wppb-financing-note { font-size: 0.75rem; color: var(--wppb-gray-medium); font-weight: 400; font-style: italic; } #wppb_wrapper .wppb-price-note { font-size: 0.75rem; color: var(--wppb-gray-medium); font-style: italic; } @keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } } #wppb_wrapper #wppb_continue_btn { color: var(--wppb-white) !important; background-color: var(--wppb-primary) !important; border-color: var(--wppb-primary); border-width: 2px; border-style: solid; transition: all 0.3s ease; } /* Hover state for better UX */ #wppb_wrapper #wppb_continue_btn:hover:not(:disabled) { background-color: var(--wppb-primary-hover) !important; border-color: var(--wppb-primary-hover); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3); } /* Disabled state */ #wppb_wrapper #wppb_continue_btn:disabled { color: var(--wppb-muted) !important; background-color: var(--wppb-gray) !important; border-color: var(--wppb-border); opacity: 0.65; cursor: not-allowed; transform: none; box-shadow: none; } #wppb_wrapper #wppb_continue_btn:active { color: var(--wppb-white); background-color: var(--wppb-primary) !important; border-style: solid; border-color: var(--wppb-primary); border-width: 2px; } /* WPPB Responsive Design */ @media (max-width: 768px) { #wppb_wrapper .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_wrapper .wppb-bottom-bar-center { order: -1; flex: 1 1 100%; text-align: center; } #wppb_wrapper .wppb-price-display { margin-bottom: 0.25rem; } /* Buttons row */ #wppb_wrapper .wppb-bottom-bar-left, #wppb_wrapper .wppb-bottom-bar-right { flex: 1 1 45%; display: flex; } #wppb_wrapper #wppb_back_btn, #wppb_wrapper #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_wrapper .wppb-bottom-bar-container:not(:has(#wppb_back_btn:not([style*="display: none"]))) .wppb-bottom-bar-right { flex-basis: 100%; } #wppb_wrapper .wppb-price-main { justify-content: center; gap: 0.25rem; align-items: center; } #wppb_wrapper .wppb-price-label { font-size: 0.675rem; margin-bottom: 0; } #wppb_wrapper .wppb-price-amount { font-size: 1.25rem; } #wppb_wrapper .wppb-financing-amount { font-size: 0.8rem; } #wppb_wrapper .wppb-financing-slash { font-size: 1rem; } #wppb_wrapper .wppb-financing-monthly { font-size: 1rem; } #wppb_wrapper .wppb-financing-note { font-size: 0.75rem; } } @media (max-width: 480px) { #wppb_wrapper .wppb-bottom-bar-container { /* flex-direction: column; */ gap: 0.5rem; padding: 1rem; min-height: auto; } #wppb_wrapper .wppb-bottom-bar-left, #wppb_wrapper .wppb-bottom-bar-center, #wppb_wrapper .wppb-bottom-bar-right { width: 100%; justify-content: center; } }