Hover over calendar dates to see availability details
`; legendContainer.appendChild(activityLegend); // Center the legend container legendContainer.style.display = 'flex'; legendContainer.style.justifyContent = 'center'; legendContainer.style.alignItems = 'center'; legendContainer.style.textAlign = 'center'; } } // Function to fix mobile viewport and scrolling issues function fixMobileViewport() { // Add meta viewport tag if it doesn't exist let viewportTag = document.querySelector('meta[name="viewport"]'); if (!viewportTag) { viewportTag = document.createElement('meta'); viewportTag.name = 'viewport'; viewportTag.content = 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no'; document.head.appendChild(viewportTag); } else { viewportTag.content = 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no'; } // Force enable scrolling on mobile if (window.innerWidth <= 768) { document.documentElement.style.setProperty('overflow-y', 'auto', 'important'); document.body.style.setProperty('overflow-y', 'auto', 'important'); document.body.style.setProperty('height', 'auto', 'important'); document.body.style.setProperty('min-height', '100vh', 'important'); // Fix any containers that might be restricting height const rootElement = document.getElementById('root'); if (rootElement) { rootElement.style.setProperty('height', 'auto', 'important'); rootElement.style.setProperty('min-height', '100vh', 'important'); rootElement.style.setProperty('overflow', 'visible', 'important'); } const appElement = document.querySelector('.app'); if (appElement) { appElement.style.setProperty('height', 'auto', 'important'); appElement.style.setProperty('min-height', '100vh', 'important'); appElement.style.setProperty('overflow', 'visible', 'important'); } } } // Function to aggressively remove "Add One Per Ticket" buttons function destroyAddButtons() { // Find all buttons that contain "Add One Per Ticket" text const allButtons = document.querySelectorAll('button, .MuiButton-root, .MuiButtonBase-root'); allButtons.forEach(button => { const buttonText = button.textContent || button.innerText || ''; if (buttonText.includes('Add One Per Ticket') || buttonText.includes('Add One Per') || button.classList.contains('aux-button-icon') || button.classList.contains('css-pw0ayo')) { // Multiple destruction methods button.style.display = 'none'; button.style.visibility = 'hidden'; button.style.opacity = '0'; button.style.height = '0'; button.style.width = '0'; button.style.position = 'absolute'; button.style.left = '-99999px'; button.style.zIndex = '-9999'; button.remove(); // Nuclear option - completely remove from DOM } }); // Also check for buttons with the green + icon const addIcons = document.querySelectorAll('svg[data-testid="AddRoundedIcon"]'); addIcons.forEach(icon => { const button = icon.closest('button, .MuiButton-root, .MuiButtonBase-root'); if (button) { const buttonText = button.textContent || ''; if (buttonText.includes('Add One Per') || buttonText.includes('Ticket In Cart')) { button.remove(); } } }); // Target by specific DOM structure const productWrappers = document.querySelectorAll('.MuiBox-root.css-1uty0ys'); productWrappers.forEach(wrapper => { const buttons = wrapper.querySelectorAll('button.MuiButton-text, .MuiButton-textPrimary'); buttons.forEach(button => { if (button.textContent.includes('Add One Per')) { button.remove(); } }); }); } // Function to check if private bonfire is selected function hasPrivateBonfireSelected() { const privateBonfireItems = document.querySelectorAll('[data-section="Bonfire"]'); for (const item of privateBonfireItems) { const nameElement = item.querySelector('.product-item__name'); if (nameElement && nameElement.textContent.includes('Private Bonfire')) { const quantityElement = item.querySelector('.product-item__quantity-text'); if (quantityElement) { const quantity = parseInt(quantityElement.textContent) || 0; if (quantity > 0) { return true; } } } } return false; } // Function to lock/unlock bonfire items function updateBonfireItemsLockStatus() { const hasPrivateBonfire = hasPrivateBonfireSelected(); const bonfireItems = document.querySelectorAll('[data-section="Bonfire"]'); bonfireItems.forEach(item => { const nameElement = item.querySelector('.product-item__name'); if (nameElement) { const itemName = nameElement.textContent.trim(); // Don't lock Private Bonfire itself if (itemName.includes('Private Bonfire')) { item.classList.remove('locked'); return; } // Lock/unlock other bonfire items based on private bonfire selection if (hasPrivateBonfire) { item.classList.remove('locked'); } else { item.classList.add('locked'); // Auto-remove items from cart when Private Bonfire is removed const quantityElement = item.querySelector('.product-item__quantity-text'); if (quantityElement) { const currentQuantity = parseInt(quantityElement.textContent) || 0; if (currentQuantity > 0) { // Find the subtract button and click it until quantity is 0 const subtractButton = item.querySelector('.product-item__quantity-substract'); if (subtractButton) { console.log(`Auto-removing ${itemName} from cart`); for (let i = 0; i < currentQuantity; i++) { setTimeout(() => { subtractButton.click(); }, i * 100); // Small delay between clicks } } } } } } }); } // Function to set up quantity change observers for bonfire items function setupBonfireQuantityObserver() { const bonfireSection = document.querySelector('[data-section="Bonfire"]'); if (!bonfireSection) return; // Create observer to watch for quantity changes const observer = new MutationObserver((mutations) => { mutations.forEach((mutation) => { if (mutation.type === 'childList' || mutation.type === 'characterData') { // Check if the mutation affected quantity text const target = mutation.target; if (target && ( target.classList?.contains('product-item__quantity-text') || target.closest?.('.product-item__quantity-text') || target.querySelector?.('.product-item__quantity-text') )) { setTimeout(updateBonfireItemsLockStatus, 100); } } }); }); // Observe the entire bonfire section for changes observer.observe(document.body, { childList: true, subtree: true, characterData: true }); // Also set up click listeners on quantity buttons const quantityButtons = document.querySelectorAll('[data-section="Bonfire"] .product-item__quantity-add, [data-section="Bonfire"] .product-item__quantity-substract'); quantityButtons.forEach(button => { button.addEventListener('click', () => { setTimeout(updateBonfireItemsLockStatus, 200); }); }); } // Enhanced CSS for better collapsible behavior function addCollapsibleCSS() { const styleEl = document.createElement('style'); styleEl.id = 'collapsible-sections-css'; styleEl.textContent = ` /* Enhanced section header styling */ .section-header { background-color: #F5F1E8 !important; border: 1px solid #85111B !important; border-radius: 8px !important; padding: 12px 16px !important; margin: 16px 0 8px 0 !important; text-align: center !important; box-shadow: 0 2px 6px rgba(133, 17, 27, 0.15) !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; cursor: pointer !important; transition: all 0.3s ease !important; user-select: none !important; position: relative !important; order: -1 !important; /* Ensure headers appear before items */ } .section-header:hover { transform: translateY(-2px) !important; box-shadow: 0 6px 20px rgba(133, 17, 27, 0.25) !important; } .section-header.train-rides { background: linear-gradient(135deg, #7B9A7E 0%, #6B8A6F 100%) !important; border-color: #7B9A7E !important; color: white !important; } .section-header.bonfire { background: linear-gradient(135deg, #85111B 0%, #6D0E17 100%) !important; border-color: #85111B !important; color: white !important; } .section-header.merchandise { background: linear-gradient(135deg, #7B9A7E 0%, #6B8A6F 100%) !important; border-color: #7B9A7E !important; color: white !important; } .section-header-title { font-size: 16px !important; font-weight: 700 !important; margin: 0 !important; text-transform: uppercase !important; letter-spacing: 1px !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important; display: inline-block !important; } .section-header-arrow { font-size: 16px !important; font-weight: 700 !important; margin-left: 8px !important; transition: transform 0.3s ease !important; display: inline-block !important; } .section-header-subtitle { font-size: 11px !important; font-weight: 500 !important; margin: 4px 0 0 0 !important; opacity: 0.9 !important; text-transform: none !important; letter-spacing: 0.5px !important; } /* Enhanced collapsible item behavior with SMOOTHER animations */ .section-item { transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important; overflow: hidden !important; transform-origin: top !important; will-change: transform, opacity, max-height !important; } .section-item.collapsed { max-height: 0px !important; opacity: 0 !important; margin-top: 0px !important; margin-bottom: 0px !important; padding-top: 0px !important; padding-bottom: 0px !important; transform: scaleY(0) !important; border-width: 0 !important; } .section-item:not(.collapsed) { max-height: 500px !important; opacity: 1 !important; transform: scaleY(1) !important; border-width: inherit !important; } /* Add smooth hover effect for section headers */ .section-header { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } .section-header-arrow { transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important; } /* Locked bonfire items styling */ .section-item.locked { opacity: 0.4 !important; pointer-events: none !important; filter: grayscale(60%) !important; position: relative !important; } .section-item.locked::before { content: "🔒 Select Private Bonfire first" !important; position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; background-color: rgba(133, 17, 27, 0.95) !important; color: white !important; padding: 8px 12px !important; border-radius: 6px !important; font-size: 12px !important; font-weight: 600 !important; z-index: 100 !important; white-space: nowrap !important; text-align: center !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important; } /* Add smooth hover effect for section headers */ .section-header { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } .section-header-arrow { transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important; } @media (min-width: 769px) { .section-header { border: 2px solid #85111B !important; border-radius: 12px !important; padding: 16px 24px !important; margin: 24px 0 16px 0 !important; box-shadow: 0 4px 12px rgba(133, 17, 27, 0.2) !important; } .section-header:hover { box-shadow: 0 8px 32px rgba(133, 17, 27, 0.3) !important; } .section-header-title { font-size: 20px !important; letter-spacing: 1.5px !important; } .section-header-arrow { font-size: 20px !important; margin-left: 12px !important; } .section-header-subtitle { font-size: 13px !important; margin: 6px 0 0 0 !important; } .section-item.locked::before { font-size: 14px !important; padding: 12px 16px !important; border-radius: 8px !important; } } `; // Remove existing CSS if present const existingCSS = document.getElementById('collapsible-sections-css'); if (existingCSS) { existingCSS.remove(); } document.head.appendChild(styleEl); } // MUCH SIMPLER AND SAFER: Just use CSS flexbox ordering instead of moving DOM elements function groupAddOns() { console.log('Creating section headers and organizing add-ons...'); const productItems = document.querySelectorAll('.product-item'); console.log('Found product items:', productItems.length); if (productItems.length === 0) return; // Find the container let container = document.querySelector('.ProductGroup .MuiBox-root.css-8atqhb'); if (!container) { container = document.querySelector('.css-8atqhb'); } if (!container && productItems.length > 0) { let parent = productItems[0].parentElement; while (parent && !parent.classList.contains('css-8atqhb')) { parent = parent.parentElement; if (parent === document.body) break; } container = parent; } console.log('Container found:', !!container); if (!container) return; // Categories with better matching const categories = { 'Train Rides': [ 'Train Ride', 'Train Ride Infant', 'Train Ride Infant (Ages 0-3)', 'Train Ride Bundle' ], 'Bonfire': [ 'Private Bonfire', 'VIP Bonfire Upgrade', 'Roasting Board', 'Hot Dog Roasting Box', "Smore's Box" ], 'Merchandise': [ 'Light Glow Beanie', 'Snow Glow Beanie', 'Sonic Wand', '3D Glasses', 'Santa' ] }; // Create a map of items by name const itemMap = new Map(); productItems.forEach(item => { const nameElement = item.querySelector('.product-item__name'); if (nameElement) { const itemName = nameElement.textContent.trim(); const wrapper = item.closest('.MuiBox-root.css-1uty0ys'); if (wrapper) { itemMap.set(itemName, wrapper); console.log('Mapped:', itemName); } } }); // Style the main container container.style.display = 'flex'; container.style.flexDirection = 'column'; container.style.backgroundColor = '#F5F1E8'; container.style.border = '2px solid #85111B'; container.style.borderRadius = '12px'; container.style.padding = '20px'; container.style.margin = '16px 0'; container.style.boxShadow = '0 8px 24px rgba(0, 0, 0, 0.15)'; container.style.width = '100%'; container.style.maxWidth = '100%'; container.style.boxSizing = 'border-box'; // Enhanced mobile styling for container if (window.innerWidth <= 768) { container.style.borderWidth = '1px'; container.style.borderRadius = '6px'; container.style.padding = '8px'; container.style.margin = '4px 0'; container.style.boxShadow = '0 4px 12px rgba(0, 0, 0, 0.1)'; container.style.maxWidth = 'calc(100vw - 8px)'; } // Remove any existing headers const existingHeaders = container.querySelectorAll('.section-header'); existingHeaders.forEach(header => header.remove()); // Simple function to create section header with data attributes function createSectionHeader(categoryName, categoryClass) { const header = document.createElement('div'); header.className = `section-header ${categoryClass}`; header.setAttribute('data-category', categoryName); header.setAttribute('data-state', 'collapsed'); // Use data attribute instead of class header.innerHTML = `${getSectionSubtitle(categoryName)}
`; // Add click event listener for toggle functionality header.addEventListener('click', function() { toggleSection(categoryName); }); return header; } // BULLETPROOF toggle using data attributes instead of CSS classes function toggleSection(categoryName) { console.log('Toggling section:', categoryName); const header = document.querySelector(`.section-header[data-category="${categoryName}"]`); const items = document.querySelectorAll(`[data-section="${categoryName}"]`); if (!header || items.length === 0) { console.log('Header or items not found for:', categoryName); return; } // Use data attribute instead of CSS class (React won't reset this) const isCollapsed = header.getAttribute('data-state') !== 'expanded'; console.log(`${categoryName} is currently collapsed:`, isCollapsed); if (isCollapsed) { // First, collapse all other sections quickly const allHeaders = document.querySelectorAll('.section-header'); allHeaders.forEach(otherHeader => { if (otherHeader !== header && otherHeader.getAttribute('data-state') === 'expanded') { const otherCategoryName = otherHeader.getAttribute('data-category'); const otherItems = document.querySelectorAll(`[data-section="${otherCategoryName}"]`); // Quick collapse otherHeader.setAttribute('data-state', 'collapsed'); otherHeader.querySelector('.section-header-arrow').textContent = '▶'; otherItems.forEach((item) => { item.setAttribute('data-visible', 'false'); item.style.display = 'none'; item.style.visibility = 'hidden'; item.style.opacity = '0'; }); console.log(`Auto-collapsed ${otherCategoryName}`); } }); // Now expand the clicked section header.setAttribute('data-state', 'expanded'); header.querySelector('.section-header-arrow').textContent = '▼'; items.forEach((item) => { item.setAttribute('data-visible', 'true'); item.style.display = 'block'; item.style.visibility = 'visible'; item.style.opacity = '1'; item.style.transform = 'translateY(0)'; }); // Update bonfire lock status when bonfire section is expanded if (categoryName === 'Bonfire') { setTimeout(updateBonfireItemsLockStatus, 100); } console.log(`EXPANDED ${categoryName} - data-state set to expanded`); } else { // Collapse section header.setAttribute('data-state', 'collapsed'); header.querySelector('.section-header-arrow').textContent = '▶'; items.forEach((item) => { item.setAttribute('data-visible', 'false'); item.style.display = 'none'; item.style.visibility = 'hidden'; item.style.opacity = '0'; item.style.transform = 'translateY(-5px)'; }); console.log(`COLLAPSED ${categoryName} - data-state set to collapsed`); } } // Function to get section subtitle function getSectionSubtitle(categoryName) { switch(categoryName) { case 'Train Rides': return 'All aboard for magical adventures'; case 'Bonfire': return 'Cozy fireside experiences and treats'; case 'Merchandise': return 'Take home the magic'; default: return ''; } } // Better item matching function findMatchingItems(categoryItems) { const matchedWrappers = []; categoryItems.forEach(categoryItem => { // Try exact match first let wrapper = itemMap.get(categoryItem); if (wrapper) { matchedWrappers.push(wrapper); return; } // Try partial matches for (const [itemName, itemWrapper] of itemMap.entries()) { if (itemName.toLowerCase().includes(categoryItem.toLowerCase()) || categoryItem.toLowerCase().includes(itemName.toLowerCase())) { if (!matchedWrappers.includes(itemWrapper)) { matchedWrappers.push(itemWrapper); console.log(`Matched "${itemName}" to category item "${categoryItem}"`); } } } }); return matchedWrappers; } // SAFEST APPROACH: Just add headers and use flexbox without moving anything const categoryOrder = ['Train Rides', 'Bonfire', 'Merchandise']; // Set container to use flexbox but preserve all existing content container.style.display = 'flex'; container.style.flexDirection = 'column'; categoryOrder.forEach((categoryName, categoryIndex) => { const categoryItems = categories[categoryName]; const categoryClass = categoryName.toLowerCase().replace(' ', '-'); // Find matching items for this category const matchedWrappers = findMatchingItems(categoryItems); console.log(`${categoryName} matched items:`, matchedWrappers.length); if (matchedWrappers.length > 0) { // Create section header and append to container const sectionHeader = createSectionHeader(categoryName, categoryClass); container.appendChild(sectionHeader); // Just style the existing wrappers in place - don't move them matchedWrappers.forEach((wrapper, itemIndex) => { // Add data attributes for state tracking wrapper.setAttribute('data-section', categoryName); wrapper.setAttribute('data-visible', 'false'); wrapper.classList.add('section-item'); // Initial hidden state wrapper.style.display = 'none'; wrapper.style.visibility = 'hidden'; wrapper.style.opacity = '0'; wrapper.style.transform = 'translateY(-5px)'; const isMobile = window.innerWidth <= 768; // Apply category-specific styling if (categoryName === 'Train Rides') { wrapper.style.background = 'rgba(123, 154, 126, 0.06)'; wrapper.style.borderLeft = `${isMobile ? '2px' : '4px'} solid #7B9A7E`; } else if (categoryName === 'Bonfire') { wrapper.style.background = 'rgba(133, 17, 27, 0.06)'; wrapper.style.borderLeft = `${isMobile ? '2px' : '4px'} solid #85111B`; } else { // Merchandise wrapper.style.background = 'rgba(123, 154, 126, 0.06)'; wrapper.style.borderLeft = `${isMobile ? '2px' : '4px'} solid #7B9A7E`; } // Common styling wrapper.style.borderRadius = isMobile ? '4px' : '8px'; wrapper.style.padding = isMobile ? '6px' : '12px'; wrapper.style.marginBottom = isMobile ? '6px' : '12px'; wrapper.style.width = '100%'; wrapper.style.maxWidth = '100%'; wrapper.style.boxSizing = 'border-box'; console.log(`Styled ${categoryName} item:`, wrapper.querySelector('.product-item__name')?.textContent); }); } }); // Set up bonfire locking logic after organizing add-ons setTimeout(() => { updateBonfireItemsLockStatus(); setupBonfireQuantityObserver(); }, 500); console.log('Section headers and add-on organization completed!'); } function applyCustomTheme() { const styleEl = document.createElement('style'); styleEl.id = 'custom-theme-styles'; styleEl.textContent = ` /* Global background color - Fixed to use correct red */ body, #root, .app, .MuiBox-root.css-1sj5qft, .MuiBox-root.css-1isx0q8 { background: #85111B !important; } /* Enhanced Mobile Viewport and Container Fixes */ html, body { width: 100% !important; max-width: 100vw !important; overflow-x: hidden !important; -webkit-text-size-adjust: 100% !important; -webkit-tap-highlight-color: transparent !important; } @media (max-width: 768px) { html, body { overflow-y: auto !important; height: auto !important; min-height: 100vh !important; -webkit-overflow-scrolling: touch !important; position: relative !important; } #root { height: auto !important; min-height: 100vh !important; overflow: visible !important; width: 100% !important; max-width: 100vw !important; } .app { padding: 0 !important; margin: 0 !important; width: 100% !important; max-width: 100vw !important; height: auto !important; min-height: 100vh !important; overflow: visible !important; box-sizing: border-box !important; } .MuiBox-root.css-1sj5qft, .MuiBox-root.css-1isx0q8 { height: auto !important; min-height: 100vh !important; overflow: visible !important; width: 100% !important; max-width: 100vw !important; } .MuiBox-root.css-d715ct { padding: 2px !important; margin: 0 !important; height: auto !important; overflow: visible !important; padding-bottom: 40px !important; width: 100% !important; max-width: 100vw !important; box-sizing: border-box !important; } .CheckoutSteps { padding: 0 2px !important; margin: 0 !important; height: auto !important; overflow: visible !important; padding-bottom: 20px !important; width: 100% !important; max-width: 100vw !important; box-sizing: border-box !important; } /* Force container widths and prevent overflow */ .ProductGroup, .MuiBox-root.css-8atqhb { width: 100% !important; max-width: calc(100vw - 8px) !important; padding: 8px !important; margin: 4px 0 !important; box-sizing: border-box !important; border-radius: 6px !important; border-width: 1px !important; } /* Force product item containers to stay within bounds */ .MuiBox-root.css-1uty0ys { width: 100% !important; max-width: 100% !important; padding: 6px !important; margin-bottom: 6px !important; box-sizing: border-box !important; border-radius: 4px !important; border-left-width: 2px !important; } /* Force product items to fit */ .product-item { width: 100% !important; max-width: 100% !important; padding: 8px !important; box-sizing: border-box !important; border-radius: 4px !important; border-width: 1px !important; } /* Force product item content layout */ .product-item-product { display: flex !important; flex-direction: column !important; gap: 6px !important; width: 100% !important; } /* Responsive product details */ .product-item-details { flex: 1 !important; min-width: 0 !important; } .product-item__name { font-size: 12px !important; line-height: 1.3 !important; word-wrap: break-word !important; } .product-item__price { margin: 4px 0 !important; } .product-item__price-text { font-size: 14px !important; } /* Mobile quantity controls */ .product-item__quantity { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 6px !important; margin-top: 6px !important; } .product-item__quantity-text-container { min-width: 24px !important; text-align: center !important; } .product-item__quantity-text { font-size: 14px !important; } /* Mobile select dropdowns */ .MuiBox-root.css-164r41r { margin-top: 6px !important; width: 100% !important; } .MuiBox-root.css-164r41r select { width: 100% !important; padding: 4px 6px !important; font-size: 12px !important; border-radius: 3px !important; box-sizing: border-box !important; } } /* Enhanced Card Styling with Mobile Optimization */ .MuiCard-root.step-card { background-color: ${theme.find(t => t.name === 'cardBackground').value} !important; border: 2px solid #85111B !important; border-radius: 12px !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important; opacity: 0; animation: fadeInCard 0.4s ease-in-out 0.3s forwards; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } @media (max-width: 768px) { .MuiCard-root.step-card { margin: 0 0 12px 0 !important; border-radius: 8px !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important; border-width: 1px !important; } .MuiBox-root.css-16lfj6j { padding: 12px 12px 0px 12px !important; } .step-card-section { padding: 0px 12px 12px 12px !important; } } /* Mobile-First Text Scaling */ @media (max-width: 768px) { .step-card__title { font-size: 1rem !important; line-height: 1.3 !important; margin-bottom: 8px !important; } .season-pass-description, .ticket-step__additional-text, .event-summary__time { font-size: 13px !important; line-height: 1.4 !important; } } /* Add faster fade-in to main content cards */ .date-selection-step { opacity: 0; animation: fadeInCard 0.4s ease-in-out 0.4s forwards; } .time-selection-step { opacity: 0; animation: fadeInCard 0.4s ease-in-out 0.5s forwards; } /* Style main headings */ .step-card__title, .event-summary__title, .order-summary__total-title { color: ${theme.find(t => t.name === 'headerText').value} !important; font-weight: 700 !important; } /* Enhanced Mobile Stepper */ @media (max-width: 768px) { .MuiStepper-root { padding: 8px 4px !important; margin: 0 !important; } .MuiStepLabel-label { font-size: 0.7rem !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } .step-badge__box--active, .step-badge__container { width: 20px !important; height: 20px !important; min-width: 20px !important; } .step-badge__text, .step-badge__text--active { font-size: 0.65rem !important; } } /* Style step navigation with correct colors */ .MuiStepLabel-label { color: black !important; font-weight: 600 !important; } /* Style active step indicators */ .step-badge__box--active { background-color: ${theme.find(t => t.name === 'secondaryMain').value} !important; border: 2px solid #F5F1E8 !important; } .step-badge__text--active { color: white !important; font-weight: 700 !important; } /* Style inactive step indicators */ .step-badge__container { background-color: rgba(245, 241, 232, 0.2) !important; border: 2px solid rgba(245, 241, 232, 0.4) !important; } .step-badge__text { color: rgba(245, 241, 232, 0.8) !important; } /* FINAL OVERRIDE - FORCE BLACK TEXT FOR STEPPER AT THE END */ .stepper__container, .stepper__container *, .MuiStepper-root, .MuiStepper-root *, .MuiStep-root, .MuiStep-root *, .MuiStepLabel-root, .MuiStepLabel-root *, .MuiStepLabel-label, .MuiStepLabel-labelContainer, .MuiStepLabel-labelContainer *, .css-algtyj, .css-3b88u5, .css-3b88u5 *, .css-b9pbu3, .css-b9pbu3 *, span.MuiStepLabel-label, div.stepper__container span, .MuiStepLabel-labelContainer span, [class*="MuiStepLabel"], .MuiBox-root.css-ali80x .MuiStepLabel-label, .stepper .MuiStepLabel-label { color: black !important; } /* Style description text */ .ticket-step__additional-text, .event-summary__time { color: ${theme.find(t => t.name === 'descriptionText').value} !important; } /* Enhanced Mobile-First Time Button Styling */ .time-cell { background-color: ${theme.find(t => t.name === 'selectableBackground').value} !important; color: ${theme.find(t => t.name === 'selectableText').value} !important; border: 2px solid ${theme.find(t => t.name === 'primaryMain').value} !important; border-radius: 8px !important; transition: all 0.3s ease !important; min-height: 50px !important; display: flex !important; align-items: center !important; justify-content: center !important; font-weight: 600 !important; font-size: 14px !important; margin: 0 !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } @media (min-width: 769px) { .time-cell { max-width: 250px !important; min-height: 60px !important; font-size: 16px !important; margin: 0 auto !important; } } .time-cell:hover { background-color: #F5F1E8 !important; transform: translateY(-2px) !important; box-shadow: 0 4px 12px rgba(133, 17, 27, 0.3) !important; } /* Enhanced Mobile Time Table Layout */ .time-table { display: flex !important; justify-content: center !important; margin: 16px 0 20px 0 !important; padding: 0 4px !important; } @media (min-width: 769px) { .time-table { margin: 24px 0 32px 0 !important; padding: 0 !important; } } /* Hide the second time cell if it exists */ .time-table .MuiGrid-item:nth-child(2) { display: none !important; } /* Style the grid container properly */ .time-table .MuiGrid-item:first-child { flex: none !important; max-width: none !important; width: 100% !important; padding: 0 !important; } /* Style the time cell content */ .time-cell__children-content { width: 100% !important; text-align: center !important; padding: 0 !important; } .time-cell__children-content .MuiBox-root { font-size: 16px !important; font-weight: 700 !important; color: ${theme.find(t => t.name === 'primaryMain').value} !important; } @media (max-width: 768px) { .time-cell__children-content .MuiBox-root { font-size: 14px !important; } } /* Enhanced Mobile Hours Section */ .time-selection-step .MuiBox-root.css-9rdqbv { padding: 16px 8px !important; } @media (min-width: 769px) { .time-selection-step .MuiBox-root.css-9rdqbv { padding: 24px 16px !important; } } .time-selection-step .step-card-section { padding: 0px 8px 12px 8px !important; } @media (min-width: 769px) { .time-selection-step .step-card-section { padding: 0px 16px 24px 16px !important; } } /* Style the selected calendar day */ .react-calendar__tile--active { background-color: ${theme.find(t => t.name === 'primaryMain').value} !important; color: white !important; border-radius: 8px !important; } /* Style calendar tiles on hover */ .react-calendar__tile:hover { background-color: ${theme.find(t => t.name === 'secondaryMain').value} !important; color: white !important; } /* Enhanced Mobile Button Styling - UPDATED FOR GREEN BUTTONS */ .MuiButton-containedPrimary:not(.Mui-disabled) { background-color: ${theme.find(t => t.name === 'secondaryMain').value} !important; /* Changed to green */ color: white !important; border-radius: 25px !important; font-weight: 700 !important; padding: 10px 20px !important; box-shadow: 0 4px 12px rgba(123, 154, 126, 0.4) !important; /* Green shadow */ font-size: 14px !important; width: 100% !important; max-width: 200px !important; margin: 0 auto !important; } @media (min-width: 769px) { .MuiButton-containedPrimary:not(.Mui-disabled) { padding: 12px 32px !important; font-size: 16px !important; width: auto !important; max-width: none !important; } } /* ENHANCED MOBILE TICKET SELECTION */ /* Mobile-First Quantity Selector Buttons */ .quantity-selector, .ticket-quantity-selector { display: flex !important; align-items: center !important; gap: 8px !important; justify-content: flex-end !important; } @media (min-width: 769px) { .quantity-selector, .ticket-quantity-selector { gap: 12px !important; } } /* Enhanced Mobile Quantity Buttons */ .quantity-selector button, .ticket-quantity-selector button, .MuiIconButton-root, .product-item__quantity-add, .product-item__quantity-substract, .MuiButtonBase-root.MuiIconButton-root { width: 28px !important; height: 28px !important; min-width: 28px !important; max-width: 28px !important; border-radius: 50% !important; background-color: ${theme.find(t => t.name === 'selectableBackground').value} !important; border: 1px solid ${theme.find(t => t.name === 'primaryMain').value} !important; color: ${theme.find(t => t.name === 'primaryMain').value} !important; font-weight: 700 !important; font-size: 14px !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: all 0.2s ease !important; box-shadow: none !important; outline: none !important; padding: 0 !important; margin: 0 !important; } @media (min-width: 769px) { .quantity-selector button, .ticket-quantity-selector button, .MuiIconButton-root, .product-item__quantity-add, .product-item__quantity-substract, .MuiButtonBase-root.MuiIconButton-root { width: 36px !important; height: 36px !important; min-width: 36px !important; max-width: 36px !important; font-size: 18px !important; } } /* Remove ALL styling from nested elements */ .quantity-selector button *, .ticket-quantity-selector button *, .MuiIconButton-root *, .product-item__quantity-add *, .product-item__quantity-substract *, .MuiButtonBase-root.MuiIconButton-root * { border: none !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; outline: none !important; width: auto !important; height: auto !important; padding: 0 !important; margin: 0 !important; } /* Mobile-First SVG Icons */ .quantity-selector button svg, .ticket-quantity-selector button svg, .MuiIconButton-root svg, .product-item__quantity-add svg, .product-item__quantity-substract svg { width: 12px !important; height: 12px !important; fill: currentColor !important; } @media (min-width: 769px) { .quantity-selector button svg, .ticket-quantity-selector button svg, .MuiIconButton-root svg, .product-item__quantity-add svg, .product-item__quantity-substract svg { width: 18px !important; height: 18px !important; } } /* Remove Material-UI's default button styling */ .MuiTouchRipple-root { display: none !important; } .quantity-selector button:hover, .ticket-quantity-selector button:hover, .MuiIconButton-root:hover, .product-item__quantity-add:hover, .product-item__quantity-substract:hover { background-color: ${theme.find(t => t.name === 'primaryMain').value} !important; color: white !important; transform: scale(1.05) !important; box-shadow: 0 2px 6px rgba(133, 17, 27, 0.2) !important; } .quantity-selector button:active, .ticket-quantity-selector button:active, .MuiIconButton-root:active, .product-item__quantity-add:active, .product-item__quantity-substract:active { transform: scale(0.95) !important; } /* Enhanced Mobile Quantity Display */ .quantity-display, .ticket-quantity-display, .quantity-selector span, .ticket-quantity-selector span { font-size: 12px !important; font-weight: 700 !important; color: ${theme.find(t => t.name === 'primaryMain').value} !important; min-width: 16px !important; text-align: center !important; margin: 0 2px !important; flex-shrink: 0 !important; } @media (min-width: 769px) { .quantity-display, .ticket-quantity-display, .quantity-selector span, .ticket-quantity-selector span { font-size: 18px !important; min-width: 24px !important; margin: 0 4px !important; } } /* Enhanced Mobile Ticket Cards */ .ticket-type-card, .MuiPaper-root[data-testid*="ticket"], .ticket-selection-card { background-color: ${theme.find(t => t.name === 'cardBackground').value} !important; border: 1px solid ${theme.find(t => t.name === 'primaryMain').value} !important; border-radius: 8px !important; padding: 12px !important; margin-bottom: 8px !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important; transition: all 0.3s ease !important; } @media (min-width: 769px) { .ticket-type-card, .MuiPaper-root[data-testid*="ticket"], .ticket-selection-card { border-width: 2px !important; border-radius: 12px !important; padding: 20px !important; margin-bottom: 16px !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important; } } .ticket-type-card:hover, .MuiPaper-root[data-testid*="ticket"]:hover, .ticket-selection-card:hover { transform: translateY(-2px) !important; box-shadow: 0 6px 16px rgba(133, 17, 27, 0.2) !important; } /* Mobile-First Ticket Text */ .ticket-title, .ticket-type-title { color: ${theme.find(t => t.name === 'headerText').value} !important; font-weight: 700 !important; font-size: 16px !important; margin-bottom: 6px !important; } @media (min-width: 769px) { .ticket-title, .ticket-type-title { font-size: 20px !important; margin-bottom: 8px !important; } } .ticket-price, .ticket-type-price { color: ${theme.find(t => t.name === 'paymentText').value} !important; font-weight: 700 !important; font-size: 18px !important; } @media (min-width: 769px) { .ticket-price, .ticket-type-price { font-size: 24px !important; } } /* Enhanced Mobile Ticket Layout */ .ticket-row, .ticket-selection-row { display: flex !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; gap: 8px !important; } @media (min-width: 769px) { .ticket-row, .ticket-selection-row { gap: 16px !important; } } .ticket-info, .ticket-details { flex: 1 !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; } .ticket-controls, .ticket-quantity-controls { display: flex !important; align-items: center !important; gap: 6px !important; flex-shrink: 0 !important; } @media (min-width: 769px) { .ticket-controls, .ticket-quantity-controls { gap: 12px !important; } } /* Enhanced Mobile Back Button */ .MuiButton-outlined, .back-button { background-color: transparent !important; color: ${theme.find(t => t.name === 'primaryMain').value} !important; border: 1px solid ${theme.find(t => t.name === 'primaryMain').value} !important; border-radius: 20px !important; font-weight: 600 !important; padding: 8px 16px !important; transition: all 0.3s ease !important; font-size: 12px !important; } @media (min-width: 769px) { .MuiButton-outlined, .back-button { border: 2px solid ${theme.find(t => t.name === 'primaryMain').value} !important; border-radius: 25px !important; padding: 10px 24px !important; font-size: 14px !important; } } .MuiButton-outlined:hover, .back-button:hover { background-color: ${theme.find(t => t.name === 'primaryMain').value} !important; color: white !important; } /* ENHANCED FOOTER BUTTONS - ALIGNED TO MATCH CARD CONTENT */ /* Main footer container - align with card content */ .StepperFooter, .footer-buttons, .button-container, .MuiBox-root.css-k008qs, div.StepperFooter.MuiBox-root.css-k008qs { display: flex !important; justify-content: flex-start !important; align-items: center !important; gap: 8px !important; padding: 16px 0 !important; width: 100% !important; max-width: 100% !important; background: transparent !important; border: none !important; box-shadow: none !important; margin: 0 !important; box-sizing: border-box !important; overflow: visible !important; position: relative !important; } /* Inner button container - no additional margins */ .MuiBox-root.css-hdc1om, div.MuiBox-root.css-hdc1om { display: flex !important; justify-content: flex-start !important; align-items: center !important; gap: 8px !important; width: 100% !important; max-width: 100% !important; background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; box-sizing: border-box !important; overflow: visible !important; } /* Mobile - align with card padding */ @media (max-width: 768px) { .StepperFooter, .footer-buttons, .button-container, .MuiBox-root.css-k008qs, div.StepperFooter.MuiBox-root.css-k008qs { padding: 12px 12px 16px 12px !important; gap: 6px !important; } .MuiBox-root.css-hdc1om, div.MuiBox-root.css-hdc1om { gap: 6px !important; } } /* Desktop - align with card padding */ @media (min-width: 769px) { .StepperFooter, .footer-buttons, .button-container, .MuiBox-root.css-k008qs, div.StepperFooter.MuiBox-root.css-k008qs { gap: 12px !important; padding: 20px 20px 24px 20px !important; } .MuiBox-root.css-hdc1om, div.MuiBox-root.css-hdc1om { gap: 12px !important; } } /* Individual button styling - prevent any overflow */ .StepperFooter button, .footer-buttons button, .button-container button, .MuiBox-root.css-k008qs button, .MuiBox-root.css-hdc1om button { flex-shrink: 1 !important; margin: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; box-sizing: border-box !important; position: relative !important; z-index: 1 !important; } /* Mobile button sizing - very conservative */ @media (max-width: 768px) { .StepperFooter button, .footer-buttons button, .button-container button, .MuiBox-root.css-k008qs button, .MuiBox-root.css-hdc1om button { min-width: 60px !important; max-width: 80px !important; padding: 8px 10px !important; font-size: 11px !important; border-radius: 16px !important; } } /* Desktop button sizing */ @media (min-width: 769px) { .StepperFooter button, .footer-buttons button, .button-container button, .MuiBox-root.css-k008qs button, .MuiBox-root.css-hdc1om button { min-width: 70px !important; max-width: 120px !important; padding: 10px 16px !important; font-size: 13px !important; } } /* Ensure buttons never extend beyond their container */ .StepperFooter, .footer-buttons, .button-container, .MuiBox-root.css-k008qs, .MuiBox-root.css-hdc1om { contain: layout style !important; } /* Individual button styling in footer */ .StepperFooter button, .footer-buttons button, .button-container button, .MuiBox-root.css-k008qs button, .MuiBox-root.css-hdc1om button { flex-shrink: 0 !important; margin: 0 !important; } /* Mobile button sizing */ @media (max-width: 768px) { .StepperFooter button, .footer-buttons button, .button-container button, .MuiBox-root.css-k008qs button, .MuiBox-root.css-hdc1om button { min-width: 80px !important; max-width: 120px !important; padding: 8px 16px !important; font-size: 12px !important; } } /* Desktop button sizing */ @media (min-width: 769px) { .StepperFooter button, .footer-buttons button, .button-container button, .MuiBox-root.css-k008qs button, .MuiBox-root.css-hdc1om button { min-width: 100px !important; padding: 12px 24px !important; font-size: 14px !important; } } /* Override any conflicting flex properties */ .StepperFooter *, .footer-buttons *, .button-container *, .MuiBox-root.css-k008qs *, .MuiBox-root.css-hdc1om * { flex-basis: auto !important; } /* Ensure buttons don't stretch */ .StepperFooter .MuiButton-root, .footer-buttons .MuiButton-root, .button-container .MuiButton-root, .MuiBox-root.css-k008qs .MuiButton-root, .MuiBox-root.css-hdc1om .MuiButton-root { flex-grow: 0 !important; flex-shrink: 0 !important; width: auto !important; max-width: none !important; } /* Style price text */ .order-summary__total-price, .tile-min-price { color: ${theme.find(t => t.name === 'paymentText').value} !important; font-weight: 700 !important; } /* Enhanced Mobile Sidebar */ .MuiBox-root.css-ali80x { background-color: transparent !important; padding: 4px !important; margin-top: 12px !important; } @media (min-width: 769px) { .MuiBox-root.css-ali80x { padding: 8px !important; margin-top: 16px !important; } } .order-summary { background-color: ${theme.find(t => t.name === 'cardBackground').value} !important; border: 1px solid #8B2635 !important; border-radius: 8px !important; padding: 12px !important; margin-bottom: 8px !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important; } @media (min-width: 769px) { .order-summary { border: 2px solid #8B2635 !important; border-radius: 12px !important; padding: 24px !important; margin-bottom: 20px !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important; } } /* Enhanced Mobile Stepper Container */ .stepper__container { background-color: rgba(244, 228, 188, 0.1) !important; border-radius: 8px !important; padding: 8px 4px !important; margin-bottom: 8px !important; border: 1px solid rgba(244, 228, 188, 0.3) !important; } @media (min-width: 769px) { .stepper__container { border-radius: 12px !important; padding: 20px !important; margin-bottom: 20px !important; } } /* Enhanced Mobile Event Summary */ .event-summary { background-color: ${theme.find(t => t.name === 'cardBackground').value} !important; border: 1px solid #8B2635 !important; border-radius: 8px !important; padding: 12px !important; margin-bottom: 8px !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important; } @media (min-width: 769px) { .event-summary { border: 2px solid #8B2635 !important; border-radius: 12px !important; padding: 20px !important; margin-bottom: 20px !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important; } } /* Enhanced Mobile Calendar */ .react-calendar { background-color: rgba(255, 255, 255, 0.95) !important; border: 1px solid #8B2635 !important; border-radius: 8px !important; padding: 8px 4px !important; opacity: 0; animation: fadeInCard 0.4s ease-in-out 0.7s forwards; } @media (min-width: 769px) { .react-calendar { border: 2px solid #8B2635 !important; border-radius: 12px !important; padding: 16px !important; } } .react-calendar__tile { min-height: 32px !important; font-size: 12px !important; } @media (min-width: 769px) { .react-calendar__tile { min-height: 40px !important; font-size: 14px !important; } } .react-calendar__month-view__weekdays__weekday { font-size: 10px !important; } @media (min-width: 769px) { .react-calendar__month-view__weekdays__weekday { font-size: 12px !important; } } .react-calendar__navigation { background-color: #8B2635 !important; border-radius: 6px !important; margin-bottom: 8px !important; } @media (min-width: 769px) { .react-calendar__navigation { border-radius: 8px !important; margin-bottom: 16px !important; } } .react-calendar__navigation button { color: #F4E4BC !important; font-weight: 700 !important; font-size: 12px !important; padding: 6px !important; } @media (min-width: 769px) { .react-calendar__navigation button { font-size: 14px !important; padding: 8px !important; } } /* Override Material-UI CSS variables */ :root { --mui-palette-primary-main: ${theme.find(t => t.name === 'primaryMain').value} !important; --mui-palette-secondary-main: ${theme.find(t => t.name === 'secondaryMain').value} !important; --mui-palette-text-primary: ${theme.find(t => t.name === 'headerText').value} !important; --mui-palette-background-default: #8B2635 !important; --mui-palette-background-paper: ${theme.find(t => t.name === 'cardBackground').value} !important; } /* Enhanced Mobile Activity Dots and Tooltips */ .activity-dot { position: absolute; top: 2px; right: 2px; width: 5px; height: 5px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.8); box-shadow: 0 1px 2px rgba(0,0,0,0.2); z-index: 10; } @media (min-width: 769px) { .activity-dot { top: 4px; right: 4px; width: 8px; height: 8px; } } .activity-tooltip { position: fixed !important; background-color: ${theme.find(t => t.name === 'primaryMain').value}; color: white; padding: 8px 12px; border-radius: 6px; font-size: 12px; font-weight: 600; white-space: nowrap; opacity: 0; visibility: hidden; pointer-events: none; transition: all 0.3s ease; z-index: 99999 !important; box-shadow: 0 4px 12px rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.2); } @media (min-width: 769px) { .activity-tooltip { padding: 8px 12px; border-radius: 6px; font-size: 12px; margin-bottom: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.3); } } .activity-tooltip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 3px solid transparent; border-top-color: ${theme.find(t => t.name === 'primaryMain').value}; } @media (min-width: 769px) { .activity-tooltip::after { border: 5px solid transparent; border-top-color: ${theme.find(t => t.name === 'primaryMain').value}; } } .tooltip-content { display: flex; align-items: center; gap: 2px; } @media (min-width: 769px) { .tooltip-content { gap: 4px; } } .tooltip-text { font-weight: 600; color: white; } .react-calendar__tile:hover .activity-tooltip, .react-calendar__tile.hover .activity-tooltip { opacity: 1 !important; visibility: visible !important; } .react-calendar__tile { position: relative !important; overflow: visible !important; } .react-calendar__month-view__days { position: relative !important; overflow: visible !important; } .react-calendar__month-view__days__day { position: relative !important; overflow: visible !important; } /* Ensure calendar container allows overflow */ .react-calendar { background-color: rgba(255, 255, 255, 0.95) !important; border: 1px solid #8B2635 !important; border-radius: 8px !important; padding: 8px 4px !important; opacity: 0; animation: fadeInCard 0.4s ease-in-out 0.7s forwards; overflow: visible !important; position: relative !important; z-index: 1 !important; } /* Better color matching for existing legend items */ .legend-row__only-a-few-available .content-legend__square, .legend-row__only-a-few-available .content-legend__dot { background-color: #FF6B35 !important; } .legend-row__selling-out .content-legend__square, .legend-row__selling-out .content-legend__dot { background-color: #7B9A7E !important; } .legend-row__available .content-legend__square, .legend-row__available .content-legend__dot { background-color: ${theme.find(t => t.name === 'primaryMain').value} !important; } /* Enhanced Mobile Activity Legend */ .activity-legend { margin: 8px auto; padding: 8px 6px; background-color: ${theme.find(t => t.name === 'selectableBackground').value}; border-radius: 6px; border: 1px solid #E0E0E0; max-width: calc(100vw - 20px); text-align: center; box-sizing: border-box; } @media (min-width: 769px) { .activity-legend { margin: 12px auto; padding: 12px 16px; border-radius: 8px; max-width: 400px; } } .activity-legend-items { display: flex; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; justify-content: center; align-items: center; } @media (min-width: 769px) { .activity-legend-items { gap: 20px; margin-bottom: 8px; } } .activity-legend-item { display: flex; align-items: center; gap: 4px; flex-shrink: 1; min-width: 0; flex: 1 1 auto; } @media (min-width: 769px) { .activity-legend-item { gap: 6px; flex: none; min-width: auto; } } .activity-dot-sample { width: 6px; height: 6px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.8); flex-shrink: 0; } @media (min-width: 769px) { .activity-dot-sample { width: 10px; height: 10px; } } .activity-legend-text { font-size: 9px; color: ${theme.find(t => t.name === 'descriptionText').value}; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } @media (min-width: 400px) { .activity-legend-text { font-size: 10px; } } @media (min-width: 769px) { .activity-legend-text { font-size: 12px; white-space: normal; overflow: visible; text-overflow: initial; } } .legend-note { font-size: 8px; color: #888; margin: 0; font-style: italic; text-align: center; } @media (min-width: 769px) { .legend-note { font-size: 10px; } } /* Hide the original availability legend items */ .legend-row__only-a-few-available, .legend-row__selling-out, .legend-row__available { display: none !important; } /* Enhanced Mobile Season Pass Card */ .season-pass-card { margin-bottom: 12px !important; border: 1px solid #8B2635 !important; border-radius: 8px !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important; opacity: 0; animation: fadeInCard 0.5s ease-in-out 0.3s forwards; background-color: #F5F1E8 !important; } @media (min-width: 769px) { .season-pass-card { margin-bottom: 24px !important; border: 2px solid #8B2635 !important; border-radius: 12px !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important; } } .season-pass-card .MuiBox-root.css-16lfj6j { padding: 12px 12px 0px 12px !important; } @media (min-width: 769px) { .season-pass-card .MuiBox-root.css-16lfj6j { padding: 20px 20px 0px 20px !important; } } .season-pass-card .step-card-section { padding: 0px 12px 12px 12px !important; } @media (min-width: 769px) { .season-pass-card .step-card-section { padding: 0px 20px 20px 20px !important; } } @keyframes fadeInCard { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .season-pass-content { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; text-align: left; padding: 20px; background: linear-gradient(135deg, rgba(123, 154, 126, 0.1) 0%, rgba(133, 17, 27, 0.05) 100%); border-radius: 12px; border: 1px solid rgba(123, 154, 126, 0.2); } @media (max-width: 768px) { .season-pass-content { padding: 16px; border-radius: 8px; } } .season-pass-info { width: 100%; } .season-pass-description { color: ${theme.find(t => t.name === 'descriptionText').value}; font-size: 13px; line-height: 1.5; margin: 0 0 16px 0; font-weight: 500; } @media (min-width: 769px) { .season-pass-description { font-size: 15px; line-height: 1.6; margin: 0 0 18px 0; } } .season-pass-pricing { margin: 0 0 16px 0; text-align: left; } @media (min-width: 769px) { .season-pass-pricing { margin: 0 0 18px 0; } } .season-pass-price { font-size: 16px; font-weight: 800; color: white; background: linear-gradient(135deg, ${theme.find(t => t.name === 'primaryMain').value} 0%, #6D0E17 100%); padding: 6px 12px; border-radius: 20px; border: 2px solid ${theme.find(t => t.name === 'primaryMain').value}; box-shadow: 0 3px 8px rgba(133, 17, 27, 0.3); display: inline-block; text-shadow: 0 1px 2px rgba(0,0,0,0.2); } @media (min-width: 769px) { .season-pass-price { font-size: 20px; padding: 8px 16px; border-radius: 25px; box-shadow: 0 4px 12px rgba(133, 17, 27, 0.4); } } .season-pass-benefits { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-start; margin: 0 0 20px 0; } .benefit-item { display: flex; align-items: center; gap: 6px; flex: 0 1 auto; min-width: 120px; padding: 5px 8px; background: rgba(255, 255, 255, 0.7); border-radius: 15px; border: 1px solid rgba(123, 154, 126, 0.3); box-shadow: 0 1px 3px rgba(0,0,0,0.1); } @media (min-width: 769px) { .benefit-item { gap: 8px; min-width: 140px; padding: 6px 12px; border-radius: 18px; } } .benefit-dot { width: 6px; height: 6px; border-radius: 50%; background-color: ${theme.find(t => t.name === 'secondaryMain').value}; flex-shrink: 0; box-shadow: 0 1px 2px rgba(123, 154, 126, 0.4); } @media (min-width: 769px) { .benefit-dot { width: 8px; height: 8px; box-shadow: 0 2px 4px rgba(123, 154, 126, 0.4); } } .benefit-text { font-size: 10px; color: ${theme.find(t => t.name === 'descriptionText').value}; font-weight: 600; } @media (min-width: 769px) { .benefit-text { font-size: 12px; } } .season-pass-action { width: 100%; display: flex; justify-content: flex-start; align-items: center; text-align: left; gap: 0px; padding: 0px; margin: 0px; background: transparent !important; border-radius: 0px; max-width: none; box-shadow: none; border: none; } .season-pass-button { background-color: ${theme.find(t => t.name === 'secondaryMain').value} !important; /* Green background */ color: white !important; /* White text */ font-weight: 700 !important; padding: 12px 32px !important; border-radius: 25px !important; text-transform: none !important; font-size: 15px !important; box-shadow: 0 4px 12px rgba(123, 154, 126, 0.4) !important; /* Green shadow */ transition: all 0.3s ease !important; border: 2px solid ${theme.find(t => t.name === 'primaryMain').value} !important; /* Red border */ width: auto !important; cursor: pointer !important; min-width: 140px !important; } @media (max-width: 768px) { .season-pass-button { min-width: 120px !important; padding: 10px 24px !important; font-size: 14px !important; } } @media (min-width: 769px) { .season-pass-button { padding: 12px 32px !important; border-radius: 25px !important; font-size: 16px !important; box-shadow: 0 4px 12px rgba(123, 154, 126, 0.4) !important; } } .season-pass-button:hover { background-color: #6B8A6F !important; /* Darker green on hover */ color: white !important; transform: translateY(-2px) !important; box-shadow: 0 6px 16px rgba(123, 154, 126, 0.6) !important; } .season-pass-button:active { transform: translateY(0) !important; } /* Enhanced Mobile Continue/Checkout Buttons - UPDATED FOR GREEN */ .MuiButton-containedPrimary:not(.Mui-disabled), .MuiButton-contained:not(.Mui-disabled), .continue-button:not(.Mui-disabled), .step-card__next-button:not(.Mui-disabled) { background-color: ${theme.find(t => t.name === 'secondaryMain').value} !important; /* Green background */ color: white !important; border-radius: 20px !important; font-weight: 700 !important; padding: 10px 20px !important; box-shadow: 0 3px 8px rgba(123, 154, 126, 0.4) !important; /* Green shadow */ border: none !important; font-size: 14px !important; } @media (min-width: 769px) { .MuiButton-containedPrimary:not(.Mui-disabled), .MuiButton-contained:not(.Mui-disabled), .continue-button:not(.Mui-disabled), .step-card__next-button:not(.Mui-disabled) { border-radius: 25px !important; padding: 12px 32px !important; box-shadow: 0 4px 12px rgba(123, 154, 126, 0.4) !important; /* Green shadow */ font-size: 16px !important; } } .MuiButton-containedPrimary:not(.Mui-disabled):hover, .MuiButton-contained:not(.Mui-disabled):hover, .continue-button:not(.Mui-disabled):hover, .step-card__next-button:not(.Mui-disabled):hover { background-color: #6B8A6F !important; /* Darker green on hover */ transform: translateY(-1px) !important; box-shadow: 0 6px 16px rgba(123, 154, 126, 0.5) !important; } /* Allow disabled buttons to remain disabled naturally */ .MuiButton-containedPrimary.Mui-disabled, .MuiButton-contained.Mui-disabled, .continue-button.Mui-disabled, .step-card__next-button.Mui-disabled { background-color: rgba(0, 0, 0, 0.12) !important; color: rgba(0, 0, 0, 0.26) !important; opacity: 0.6 !important; /* Don't override pointer-events - let the button be naturally disabled */ } `; document.head.appendChild(styleEl); } // Function to inject styles before page load completes function injectBeforeLoad() { // Check if DOM is ready if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', applyCustomTheme); } else { applyCustomTheme(); } } // Function to remove custom theme function removeCustomTheme() { const existingStyle = document.getElementById('custom-theme-styles'); if (existingStyle) { existingStyle.remove(); } } // Function to update theme colors dynamically function updateThemeColor(themeName, newColor) { const themeItem = theme.find(t => t.name === themeName); if (themeItem) { themeItem.value = newColor; removeCustomTheme(); applyCustomTheme(); } } // Function to create season pass card - UPDATED WITH NEW TEXT AND NO PRICE function createSeasonPassCard() { // Try multiple selectors to find the right insertion point const dateSelectionStep = document.querySelector('.date-selection-step') || document.querySelector('.MuiBox-root.css-0') || document.querySelector('.CheckoutSteps .MuiBox-root:first-child'); if (dateSelectionStep && !document.getElementById('season-pass-card')) { console.log('Creating season pass card...'); const seasonPassCard = document.createElement('div'); seasonPassCard.id = 'season-pass-card'; seasonPassCard.className = 'MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root step-card season-pass-card'; seasonPassCard.innerHTML = `Get unlimited access to all activities throughout the season! Perfect for families who want to visit multiple times.
Get unlimited access to all activities throughout the season! Perfect for families who want to visit multiple times.