/* =================================== V7 - BWB "App Mode" Fullscreen Logic (The "It Actually Works" Build) =================================== */ /* This class gets added to the by our JS */ body.bwb-wizard-fullscreen-active { overflow: hidden; /* Prevents scrolling the page behind the wizard */ } /* This targets the Divi header and footer */ body.bwb-wizard-fullscreen-active header.et-l--header { transform: translateY(-100%); transition: transform 0.5s ease-in-out; } /* This brings the footer back from the bottom */ body.bwb-wizard-fullscreen-active footer.et-l--footer { transform: translateY(150%); transition: transform 0.5s ease-in-out; } /* The Wizard itself transitions to full screen */ .bwb-wizard { /* Standard state */ position: relative; overflow: hidden; /* Clips the step L/R animation */ min-height: 500px; max-width: 700px; margin: 40px auto; background: #ffffff; border: 1px solid #ddd; border-radius: 16px; box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08); padding: 20px 30px 80px 30px; /* Space for nav */ transition: all 0.5s ease-in-out; z-index: 100; } /* === YOUR FULLSCREEN FIX === */ body.bwb-wizard-fullscreen-active .bwb-wizard { display: flex; /* Use Flexbox for the whole wizard */ flex-direction: column; /* Stack header, content, nav */ position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: calc(100vh - 80px); /* Fill the whole viewport */ border-radius: 0; border: none; z-index: 99999; padding: 20px 30px 100px 30px; /* New padding for nav */ } /* === THE NEW "SCROLLING STEP" LOGIC === */ body.bwb-wizard-fullscreen-active .bwb-step.active { flex-grow: 1; /* This is the magic! Makes the step content fill the available space */ display: flex; /* Uses flex */ flex-direction: column; /* Stacks the content */ overflow-y: auto; /* THIS is now the ONE AND ONLY scroll container */ padding: 10px; /* Your padding fix for animations */ } /* This is the inner container for *all* steps */ .bwb-step-content { /* NO MORE flex-grow */ /* NO MORE overflow: hidden */ /* NO MORE justify-content */ /* It's just a simple container now! */ padding-bottom: 20px; /* Breathing room at the bottom */ } /* =================================== Brandwerk Wizard - Header & Progress =================================== */ .bwb-wizard-header { text-align: center; margin-bottom: 20px; flex-shrink: 0; /* Prevents header from shrinking */ } .bwb-wizard-header h2 { font-size: 24px; font-weight: 600; color: #333; margin: 0 0 10px 0; } .bwb-progress-bar { width: 100%; height: 8px; background: #f0f0f0; border-radius: 4px; margin-bottom: 20px; overflow: hidden; flex-shrink: 0; } .bwb-progress-bar-inner { width: 0%; height: 100%; background: #0073e6; /* Divi Blue */ transition: width 0.4s ease, background-color 0.4s ease; } /* =================================== Step Animation =================================== */ .bwb-step { position: absolute; left: 30px; right: 30px; width: auto; /* Will be 100% of parent in fullscreen */ opacity: 0; transform: translateX(15px); transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out; display: none; } .bwb-step h2 { display: none; } .bwb-step.active { display: block; /* Will be overridden by flex in fullscreen */ position: relative; left: 0; right: 0; opacity: 1; transform: translateX(0); } .bwb-step.exiting { display: block !important; position: absolute; left: 30px; /* Match padding */ right: 30px; opacity: 0; transform: translateX(-30px); } /* =================================== Step 1: Icon Grid (Project Type) =================================== */ .bwb-grid { display: grid; gap: 20px; } .bwb-grid-3 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .bwb-option { border: 2px solid #ddd; border-radius: 12px; padding: 20px; text-align: center; cursor: pointer; transition: all 0.2s ease; } .bwb-option:hover { border-color: #0073e6; background: #f8f8f8; transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); } .bwb-option.selected { border-color: #0073e6; background: #e8e9ea; box-shadow: 0 5px 15px rgba(0, 115, 230, 0.2); } .bwb-option img { height: 48px; width: 48px; margin-bottom: 15px; } .bwb-option span { font-size: 14px; font-weight: 600; color: #444; } /* =================================== Steps 2 & 4: Custom Image Tiles =================================== */ .bwb-material-group, .bwb-complexity-group { display: flex; flex-direction: column; gap: 15px; /* This is all we need! */ } /* Hide the actual radio button */ .bwb-material-group input[type="radio"], .bwb-complexity-group input[type="radio"] { display: none; } .bwb-material-group .bwb-tile, .bwb-complexity-group .bwb-tile { display: block; border: 3px solid #ddd; border-radius: 20px; overflow: hidden; cursor: pointer; transition: all 0.2s ease-out; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); line-height: 0; max-width: 100%; } .bwb-material-group .bwb-tile img, .bwb-complexity-group .bwb-tile img { display: block; width: 100%; height: auto; object-fit: cover; } /* We still use max-height, but it won't be clipped by a parent */ .bwb-material-group .bwb-tile img { max-height: 120px; } .bwb-complexity-group .bwb-tile img { max-height: 180px; } /* HOVER State */ .bwb-material-group label:not(.selected) .bwb-tile:hover, .bwb-complexity-group label:not(.selected) .bwb-tile:hover { transform: scale(1.02); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); border-color: #aaa; } /* SELECTED State */ .bwb-radio-group input[type="radio"]:checked + .bwb-tile { border-color: #0073e6; background: #e8e9ea; box-shadow: 0 8px 20px rgba(0, 115, 230, 0.25); transform: scale(1.02); } /* =================================== Steps 3 & 5: Standard Radio List =================================== */ .bwb-radio-group { display: flex; flex-direction: column; gap: 10px; } .bwb-radio-group input[type="radio"] { display: none; } .bwb-radio-group .bwb-radio-label { display: block; border: 2px solid #ddd; border-radius: 8px; padding: 15px 20px; cursor: pointer; transition: all 0.2s ease; line-height: 1.5; } .bwb-radio-group .bwb-radio-label:hover { border-color: #aaa; background: #f8f8f8; } .bwb-radio-group input[type="radio"]:checked + .bwb-radio-label { border-color: #0073e6; background: #e8e9ea; box-shadow: 0 5px 10px rgba(0, 115, 230, 0.1); } .bwb-radio-label small { display: block; font-size: 13px; color: #555; margin-top: 4px; } /* =================================== Step 6: Finale / Form (FIXED) =================================== */ .bwb-finale-content { /* No flex magic, just a container */ } .bwb-summary { background: #f9f9f9; border: 1px solid #eee; border-radius: 8px; padding: 10px 20px; margin-bottom: 20px; } .bwb-summary p { margin: 10px 0; font-weight: 600; } .bwb-summary ul { list-style-type: none; padding-left: 0; margin: 10px 0; } .bwb-summary li { font-size: 14px; color: #333; margin-bottom: 5px; } .bwb-summary li strong { color: #000; } .bwb-finale-content h3 { text-align: center; font-size: 18px; margin-top: 20px; margin-bottom: 15px; } .bwb-form-fields { display: flex; flex-direction: column; gap: 15px; margin-bottom: 20px; } .bwb-form-fields input { width: 100%; padding: 14px; border: 2px solid #ccc; border-radius: 8px; font-size: 16px; transition: border-color 0.2s ease; -webkit-appearance: none; } .bwb-form-fields input:focus { border-color: #0073e6; outline: none; } .bwb-form-fields input.invalid { border-color: #D63638; background: #fff8f8; } /* === THIS IS THE MISSING BUTTON CSS === */ .bwb-cta-choice { display: grid; grid-template-columns: 1fr; /* Mobile-first: stacked */ gap: 15px; margin-top: 10px; } /* Desktop: 2-column layout */ @media (min-width: 768px) { .bwb-cta-choice { grid-template-columns: 1fr 1fr; } } .bwb-button { display: inline-block; padding: 15px 20px; border-radius: 8px; font-size: 16px; font-weight: bold; text-align: center; text-decoration: none; cursor: pointer; transition: all 0.3s ease; border: none; } .bwb-button.wa { background: #25D366; color: #fff !important; } .bwb-button.wa:hover { background: #128C7E; transform: translateY(-3px); box-shadow: 0 5px 10px rgba(0,0,0,0.1); } .bwb-button.email { background: #555; color: #fff !important; } .bwb-button.email:hover { background: #333; transform: translateY(-3px); box-shadow: 0 5px 10px rgba(0,0,0,0.1); } .bwb-button.disabled, .bwb-button:disabled { background: #aaa !important; cursor: not-allowed; transform: none; box-shadow: none; } /* === END OF MISSING BUTTON CSS === */ /* =================================== Notices & Navigation =================================== */ .bwb-notice { text-align: center; padding: 15px; border-radius: 8px; margin-top: 20px; font-size: 14px; line-height: 1.5; } .bwb-notice.warn { display: block; background: #fff8e1; border: 1px solid #ffe57f; color: #66582c; } .bwb-notice.error { display: block; background: #fde8e8; border: 1px solid #f9c6c6; color: #a94442; } .bwb-notice.success { display: block; background: #e8f5e9; border: 1px solid #c8e6c9; color: #2e7d32; text-align: center; /* This will fill the "success" step */ flex-grow: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; } .bwb-notice.success h2 { display: block !important; font-size: 22px; margin-bottom: 10px; color: #2e7d32; } .bwb-notice.success p { font-size: 16px; } .bwb-navigation { position: absolute; bottom: 20px; left: 30px; right: 30px; display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; } body.bwb-wizard-fullscreen-active .bwb-navigation { bottom: 30px; /* More padding at the bottom */ } .bwb-navigation button { padding: 10px 20px; background: #0073e6; color: #fff; border: none; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; transition: background 0.2s ease; } .bwb-navigation button:hover { background: #005bb5; } .bwb-navigation #bwb-prev-btn { background: #777; } .bwb-navigation #bwb-prev-btn:hover { background: #555; } /* === THE SCROLLBAR FIX === */ /* We only want scrollbars on the active step in fullscreen mode */ body.bwb-wizard-fullscreen-active .bwb-step.active::-webkit-scrollbar { width: 8px; } body.bwb-wizard-fullscreen-active .bwb-step.active::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 4px; } body.bwb-wizard-fullscreen-active .bwb-step.active::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; } body.bwb-wizard-fullscreen-active .bwb-step.active::-webkit-scrollbar-thumb:hover { background: #999; } /* =================================== WhatsApp Success Modal =================================== */ .bwb-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); /* Dim background */ backdrop-filter: blur(4px); /* Sleek blur effect */ z-index: 100000; /* Higher than app mode (99999) */ display: flex; justify-content: center; align-items: center; opacity: 0; transition: opacity 0.3s ease; } /* When JS sets display:flex, we toggle this class to fade in */ .bwb-modal-overlay.visible { opacity: 1; } .bwb-modal-content { background: #fff; width: 90%; max-width: 450px; padding: 30px; border-radius: 16px; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,0.2); transform: translateY(20px); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .bwb-modal-overlay.visible .bwb-modal-content { transform: translateY(0); } .bwb-icon-circle { font-size: 40px; margin-bottom: 15px; display: inline-block; animation: popIn 0.5s ease; } .bwb-modal-header h2 { font-size: 24px; color: #333; margin: 0 0 10px 0; } .bwb-modal-body p { font-size: 16px; color: #666; line-height: 1.5; margin-bottom: 15px; } .bwb-modal-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 25px; } /* Buttons inside Modal */ .bwb-button.wa-success { background: #25D366; color: #fff !important; border: none; width: 100%; } .bwb-button.wa-success:hover { background: #128C7E; } .bwb-button.email-backup { background: transparent; border: 2px solid #ddd; color: #777 !important; width: 100%; } .bwb-button.email-backup:hover { border-color: #aaa; color: #333 !important; background: #f9f9f9; } @keyframes popIn { 0% { transform: scale(0); } 80% { transform: scale(1.1); } 100% { transform: scale(1); } } /* =================================== NEW: Material Modal Styles =================================== */ .bwb-modal-disclaimer { background: #fff8e1; /* Light yellow */ border: 1px solid #ffe57f; border-radius: 8px; padding: 15px; margin: 15px 0; text-align: center; } .bwb-modal-disclaimer strong { color: #D63638; /* Red */ font-size: 16px; display: block; } .bwb-modal-disclaimer p { font-size: 14px !important; color: #66582c !important; margin-bottom: 0 !important; margin-top: 5px; } #bwb-material-other-input { width: 100%; min-height: 80px; padding: 12px; border: 2px solid #ccc; border-radius: 8px; font-size: 16px; margin-top: 10px; -webkit-appearance: none; } #bwb-material-other-input:focus { border-color: #0073e6; outline: none; } .bwb-button.exit-btn { background: #777; color: #fff !important; border: none; width: 100%; } .bwb-button.exit-btn:hover { background: #555; } .bwb-modal-feedback { margin-top: 10px; font-size: 14px; color: #D63638; } /* =================================== NEW: Pronounced Scrollbar =================================== */ body.bwb-wizard-fullscreen-active .bwb-step.active::-webkit-scrollbar { width: 10px; /* Slightly wider */ } body.bwb-wizard-fullscreen-active .bwb-step.active::-webkit-scrollbar-track { background: #e0e0e0; /* Darker track */ border-radius: 5px; } body.bwb-wizard-fullscreen-active .bwb-step.active::-webkit-scrollbar-thumb { background: #0073e6; /* Divi Blue */ border-radius: 5px; border: 2px solid #e0e0e0; /* Creates padding */ } body.bwb-wizard-fullscreen-active .bwb-step.active::-webkit-scrollbar-thumb:hover { background: #005bb5; /* Divi Dark Blue */ }