.elementor-2336 .elementor-element.elementor-element-de3609a{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-widget-fluent-form-widget .fluentform-widget-description{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-fluent-form-widget .ff-el-progress-status{color:var( --e-global-color-primary );font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-fluent-form-widget .ff-el-progress-bar span{color:var( --e-global-color-primary );}.elementor-widget-fluent-form-widget .step-nav button{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-2336 .elementor-element.elementor-element-93790f3 .fluentform-widget-description{color:#676767;font-family:"Playfair Display", Sans-serif;font-weight:500;}.elementor-2336 .elementor-element.elementor-element-93790f3 .fluentform-widget-wrapper .ff_upload_btn.ff-btn{padding:8px 8px 8px 8px;}.elementor-2336 .elementor-element.elementor-element-93790f3 .fluentform-widget-wrapper .ff-el-group .ff-btn-submit{background-color:#0F2D3A !important;color:#ffffff !important;}.elementor-2336 .elementor-element.elementor-element-93790f3 .fluentform-widget-wrapper .ff-el-group .ff-btn-submit:hover{background-color:#FFCD00 !important;color:#0F2D3A !important;border-color:#0EA5A6;}#elementor-popup-modal-2336 .dialog-widget-content{animation-duration:1.2s;border-radius:15px 15px 15px 15px;box-shadow:2px 8px 23px 3px rgba(0,0,0,0.2);}#elementor-popup-modal-2336{background-color:rgba(0,0,0,.8);justify-content:center;align-items:center;pointer-events:all;}#elementor-popup-modal-2336 .dialog-message{width:730px;height:auto;padding:10px 10px 10px 10px;}#elementor-popup-modal-2336 .dialog-close-button{display:flex;background-color:var( --e-global-color-primary );font-size:24px;}body:not(.rtl) #elementor-popup-modal-2336 .dialog-close-button{right:4%;}body.rtl #elementor-popup-modal-2336 .dialog-close-button{left:4%;}#elementor-popup-modal-2336 .dialog-close-button i{color:var( --e-global-color-728f78b );}#elementor-popup-modal-2336 .dialog-close-button svg{fill:var( --e-global-color-728f78b );}/* Start custom CSS for fluent-form-widget, class: .elementor-element-93790f3 *//* ========================================================= CMBUK — Custom Mailer Box Quote Popup Styles the Elementor Popup + Fluent Forms (id="6") Brand-matched (green/gold). Rebuilt to be compact and fit in a single viewport frame with NO internal scrollbar and NO site-wide horizontal scroll. WHAT WAS WRONG BEFORE AND WHY THIS VERSION FIXES IT: 1) Vertical scrollbar inside the popup The old version kept full-size padding, full-size field height (12px top/bottom + line-height 1.4), full-size textarea (min-height 96px), and normal gaps between every row. Stacked together (title + subtitle + 4 field rows + textarea + upload + button) that easily passes 88vh on a normal laptop screen, so the browser was forced to show a scrollbar. Every size below has been reduced specifically so the whole form fits inside roughly 86vh on a standard 1366x768 or 1440x900 screen without scrolling. 2) Site-wide horizontal scroll Elementor popups are appended to the end of the page DOM. If the popup or any element inside it computes wider than 100vw at any point (here, the previous 600px max-width combined with browser scrollbar gutter reservation), the whole page gets a horizontal scrollbar, because popups sit in normal document flow until JS hides/positions them, and some Elementor popup templates do not set overflow-x on / by default. This version adds an explicit / overflow-x safeguard scoped only to when the popup is open (via the body class Elementor adds), so nothing else on the site is affected, plus switches the popup itself to box-sizing: border-box with a safer width formula. 3) Empty white space on the right of the popup This was Elementor's OWN outer popup frame (a separate wrapper it generates automatically, outside of anything this stylesheet controls) being wider than the inner content box. Section 0B below forces that outer frame to shrink-wrap to the inner box's width. As a belt-and-braces second step, it is also worth opening the popup in Elementor → clicking the popup settings (not the widget inside it) → Layout tab → checking the "Width" field there and setting it to "Auto" or matching it to 520px, so Elementor's own setting agrees with this stylesheet rather than relying on CSS to override it. ========================================================= */ /* --------------------------------------------------------- SETUP — two CSS classes you need to add in Elementor: 1) Open the Popup in Elementor. 2) Click the top-level "Popup" container (the root element in the left-hand Navigator) → Advanced tab → CSS Classes → add: cmb-quote-popup 3) Click your Heading widget ("Request your custom mailer boxes quote") → Advanced → CSS Classes → add: cmb-popup-title 4) Click your subtitle Text widget ("Share your size, quantity...") → Advanced → CSS Classes → add: cmb-popup-subtitle That's it — everything below attaches to those three classes plus the Fluent Forms markup itself (which always carries the .fluentform class, so that part needs no setup). --------------------------------------------------------- */ :root{ --cmb-green: #062F25; --cmb-green2: #0B4638; --cmb-gold: #C79B45; --cmb-gold2: #DDBD78; --cmb-text: #243A34; --cmb-mut: rgba(36,58,52,.62); --cmb-field: #F7F4ED; --cmb-border: rgba(6,47,37,0.12); --cmb-ease: cubic-bezier(.4,0,.2,1); } /* ========================================================= 0. PREVENT SITE-WIDE HORIZONTAL SCROLL WHILE POPUP IS OPEN Elementor adds "elementor-popup-modal-open" (or similar, depending on version) to while a popup is showing. This is a safe, scoped guard: it only forces overflow-x hidden while that class is present, so it can never affect normal page scrolling the rest of the time. ========================================================= */ html:has(.cmb-quote-popup), body:has(.cmb-quote-popup){ overflow-x: hidden !important; max-width: 100vw !important; } /* ========================================================= 0B. FIX THE EMPTY SPACE ON THE RIGHT OF THE POPUP Why it happened: .cmb-quote-popup is the class on the widget INSIDE the popup, but Elementor's actual popup frame is a separate outer wrapper (the dialog widget it generates automatically — typically .dialog-widget-content, .dialog-message, .elementor-popup-modal, or .elementor-popup-modal__content). That outer wrapper has its own Width set in Elementor's Popup → Layout panel, completely independent from any CSS class you add to the widget inside it. If that Elementor-side width is wider than our inner width: min(92vw, 520px), the inner box sits centred or left-aligned inside a wider frame, leaving a blank gap (with the scrollbar track floating in the middle of it, since the scrollbar belongs to the outer frame, not the inner box). Fix: target Elementor's real outer wrapper classes directly and force them to shrink-wrap to the inner content's width, so the visible white box and the actual popup frame are always exactly the same size. This is written defensively across every class name Elementor has used for this wrapper across versions, so it works regardless of your Elementor version. Harmless if a .elementor-2336 .elementor-element.elementor-element-93790f3 doesn't exist on your setup. ========================================================= */ .elementor-popup-modal .dialog-widget-content, .elementor-popup-modal .dialog-message, .elementor-popup-modal .elementor-popup-modal__content, .dialog-widget:has(.cmb-quote-popup) .dialog-widget-content, .dialog-widget:has(.cmb-quote-popup) .dialog-message{ width: auto !important; max-width: 100% !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; display: flex !important; justify-content: center !important; } /* If Elementor's outer dialog uses a fixed pixel width inline style, this targets the same element by its data attribute (present on every Elementor popup regardless of version) as a second safety net */ [data-element_type="container"].dialog-widget-content, .elementor-element[data-widget_type] .dialog-widget-content{ width: auto !important; } /* ========================================================= 1. POPUP CONTAINER — compact, capped height, NO scrollbar under normal conditions. width uses border-box so padding is included in the 92vw/600px calculation, never pushing past the viewport edge. This is now the ONLY element that determines the popup's visible width — the outer Elementor wrapper above shrink-wraps to match it exactly. ========================================================= */ .cmb-quote-popup{ box-sizing: border-box !important; width: min(92vw, 520px) !important; max-width: 100% !important; max-height: 86vh !important; margin: 0 auto !important; overflow-y: auto !important; overflow-x: hidden !important; padding: 20px clamp(18px, 3vw, 26px) 22px !important; border-radius: 18px !important; background: #FFFFFF !important; box-shadow: 0 30px 80px rgba(6,47,37,0.22) !important; font-family: "Inter", Arial, sans-serif !important; /* Thin brand-coloured scrollbar — only ever visible as a last resort on very short screens (e.g. landscape phones) */ scrollbar-width: thin; scrollbar-color: var(--cmb-gold) transparent; } .cmb-quote-popup *{ box-sizing: border-box !important; } .cmb-quote-popup::-webkit-scrollbar{ width: 5px; } .cmb-quote-popup::-webkit-scrollbar-track{ background: transparent; } .cmb-quote-popup::-webkit-scrollbar-thumb{ background: var(--cmb-gold); border-radius: 10px; } /* ========================================================= 2. TITLE + SUBTITLE — smaller and tighter so they take up noticeably less vertical space, leaving more room for the form itself before any scrolling could ever be needed ========================================================= */ .cmb-popup-title, .cmb-popup-title *{ font-family: "Playfair Display", "Inter", serif !important; font-weight: 800 !important; color: var(--cmb-green) !important; font-size: clamp(19px, 2.2vw, 23px) !important; line-height: 1.18 !important; letter-spacing: -.01em !important; margin: 0 0 4px !important; } .cmb-popup-subtitle, .cmb-popup-subtitle *{ font-family: "Inter", Arial, sans-serif !important; font-weight: 500 !important; color: var(--cmb-mut) !important; font-size: 12.5px !important; line-height: 1.45 !important; margin: 0 0 12px !important; } /* ========================================================= 3. FLUENT FORMS — base reset + tight spacing ========================================================= */ .cmb-quote-popup .fluentform, .cmb-quote-popup .fluentform *{ box-sizing: border-box !important; } .cmb-quote-popup .fluentform{ font-family: "Inter", Arial, sans-serif !important; width: 100% !important; max-width: 100% !important; } /* Field wrapper spacing — tightened further so 4 stacked rows plus textarea plus upload plus button fit in one frame */ .cmb-quote-popup .fluentform .ff-el-group{ margin-bottom: 9px !important; max-width: 100% !important; } /* Labels (used by the file upload field, and any field where you've set label position to "above" rather than placeholder) */ .cmb-quote-popup .fluentform label, .cmb-quote-popup .fluentform .ff-el-input--label label{ font-family: "Inter", Arial, sans-serif !important; font-weight: 700 !important; font-size: 12.5px !important; color: var(--cmb-green) !important; margin-bottom: 4px !important; display: block !important; } /* ========================================================= 4. INPUTS, SELECTS, TEXTAREA .ff-el-form-control is the class Fluent Forms applies directly to every input/select/textarea it renders, so this single rule covers all of them consistently. Padding and font-size reduced to shrink overall height. ========================================================= */ .cmb-quote-popup .fluentform .ff-el-form-control, .cmb-quote-popup .fluentform input[type="text"], .cmb-quote-popup .fluentform input[type="email"], .cmb-quote-popup .fluentform input[type="tel"], .cmb-quote-popup .fluentform input[type="number"], .cmb-quote-popup .fluentform select, .cmb-quote-popup .fluentform textarea{ width: 100% !important; max-width: 100% !important; font-family: "Inter", Arial, sans-serif !important; font-size: 13.5px !important; font-weight: 500 !important; color: var(--cmb-text) !important; background: var(--cmb-field) !important; border: 1px solid var(--cmb-border) !important; border-radius: 9px !important; padding: 9px 12px !important; line-height: 1.35 !important; transition: border-color .2s var(--cmb-ease), box-shadow .2s var(--cmb-ease), background .2s var(--cmb-ease) !important; } .cmb-quote-popup .fluentform textarea{ min-height: 64px !important; max-height: 100px !important; resize: vertical !important; } .cmb-quote-popup .fluentform ::placeholder{ color: rgba(36,58,52,.42) !important; font-weight: 400 !important; } .cmb-quote-popup .fluentform .ff-el-form-control:hover, .cmb-quote-popup .fluentform input:hover, .cmb-quote-popup .fluentform select:hover, .cmb-quote-popup .fluentform textarea:hover{ border-color: rgba(199,155,69,.45) !important; } .cmb-quote-popup .fluentform .ff-el-form-control:focus, .cmb-quote-popup .fluentform input:focus, .cmb-quote-popup .fluentform select:focus, .cmb-quote-popup .fluentform textarea:focus{ outline: none !important; background: #FFFFFF !important; border-color: var(--cmb-gold) !important; box-shadow: 0 0 0 3px rgba(199,155,69,.22) !important; } /* Select arrow — replace the default browser one with a brand-coloured chevron so it doesn't look unstyled */ .cmb-quote-popup .fluentform select{ appearance: none !important; -webkit-appearance: none !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23062F25' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 12px center !important; padding-right: 32px !important; } /* ========================================================= 5. SIDE-BY-SIDE FIELD ROWS (Full Name + Email, etc.) Tighter gap, and an explicit width fix so two or more fields sharing a row can never combine to exceed 100% of the popup's inner width (the most common hidden cause of a horizontal scrollbar appearing specifically inside a form, separate from the page-level issue fixed in #0). ========================================================= */ .cmb-quote-popup .fluentform .ff-t-container, .cmb-quote-popup .fluentform .ff-row{ display: flex !important; flex-wrap: wrap !important; gap: 9px !important; width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } .cmb-quote-popup .fluentform .ff-t-container > *, .cmb-quote-popup .fluentform .ff-row > *{ flex: 1 1 0 !important; min-width: 0 !important; } /* ========================================================= 6. FILE UPLOAD FIELD ========================================================= */ .cmb-quote-popup .fluentform input[type="file"]{ width: 100% !important; font-family: "Inter", Arial, sans-serif !important; font-size: 12.5px !important; color: var(--cmb-mut) !important; padding: 7px 0 !important; } /* Restyle the native "Choose File" button itself (supported in Chrome, Edge, Safari 14.1+ and Firefox 82+) */ .cmb-quote-popup .fluentform input[type="file"]::file-.elementor-2336 .elementor-element.elementor-element-93790f3-button{ font-family: "Inter", Arial, sans-serif !important; font-weight: 700 !important; font-size: 12.5px !important; color: var(--cmb-green) !important; background: #FFFFFF !important; border: 1.5px dashed rgba(199,155,69,.55) !important; border-radius: 8px !important; padding: 7px 14px !important; margin-right: 10px !important; cursor: pointer !important; transition: border-color .2s var(--cmb-ease), background .2s var(--cmb-ease) !important; } .cmb-quote-popup .fluentform input[type="file"]:hover::file-.elementor-2336 .elementor-element.elementor-element-93790f3-button{ background: rgba(199,155,69,.08) !important; border-color: var(--cmb-gold) !important; } /* ========================================================= 7. SUBMIT BUTTON — slightly smaller so it doesn't add extra height that pushes the form past one screen ========================================================= */ .cmb-quote-popup .fluentform .ff-btn-submit, .cmb-quote-popup .fluentform button[type="submit"], .cmb-quote-popup .fluentform input[type="submit"]{ width: 100% !important; margin-top: 4px !important; padding: 11px 18px !important; border: none !important; border-radius: 999px !important; background: linear-gradient(135deg, var(--cmb-green) 0%, var(--cmb-green2) 100%) !important; color: #FFFFFF !important; font-family: "Inter", Arial, sans-serif !important; font-weight: 800 !important; font-size: 14px !important; letter-spacing: .01em !important; box-shadow: 0 10px 22px rgba(6,47,37,.22) !important; transition: transform .22s var(--cmb-ease), box-shadow .22s var(--cmb-ease), background .22s var(--cmb-ease) !important; } .cmb-quote-popup .fluentform .ff-btn-submit:hover, .cmb-quote-popup .fluentform button[type="submit"]:hover, .cmb-quote-popup .fluentform input[type="submit"]:hover{ background: linear-gradient(135deg, var(--cmb-gold) 0%, var(--cmb-gold2) 100%) !important; color: var(--cmb-green) !important; transform: translateY(-2px) !important; box-shadow: 0 14px 28px rgba(199,155,69,.30) !important; } /* ========================================================= 8. UPLOAD LABEL SPACING TIGHTENED ========================================================= */ .cmb-quote-popup .fluentform .ff-el-group:has(input[type="file"]){ margin-bottom: 9px !important; } /* ========================================================= 9. RESPONSIVE ========================================================= */ @media (max-width: 640px){ .cmb-quote-popup{ width: min(94vw, 480px) !important; max-height: 90vh !important; padding: 16px 16px 18px !important; border-radius: 14px !important; } .cmb-popup-title, .cmb-popup-title *{ font-size: clamp(17px, 5.4vw, 20px) !important; } .cmb-popup-subtitle, .cmb-popup-subtitle *{ font-size: 11.5px !important; margin-bottom: 10px !important; } /* Stack side-by-side fields on small screens so nothing gets cramped or forces horizontal overflow */ .cmb-quote-popup .fluentform .ff-t-container, .cmb-quote-popup .fluentform .ff-row{ flex-direction: column !important; } .cmb-quote-popup .fluentform .ff-el-form-control, .cmb-quote-popup .fluentform input, .cmb-quote-popup .fluentform select, .cmb-quote-popup .fluentform textarea{ font-size: 13px !important; padding: 9px 11px !important; } .cmb-quote-popup .fluentform textarea{ min-height: 56px !important; max-height: 84px !important; } } @media (max-width: 380px){ .cmb-quote-popup{ padding: 14px 12px 16px !important; } } /* Short-height screens (laptops with small vertical resolution, landscape phones/tablets) — shrink further so the form still has the best chance of fitting without scrolling */ @media (max-height: 700px){ .cmb-quote-popup{ max-height: 94vh !important; padding-top: 14px !important; padding-bottom: 16px !important; } .cmb-popup-title, .cmb-popup-title *{ font-size: 18px !important; margin-bottom: 3px !important; } .cmb-popup-subtitle, .cmb-popup-subtitle *{ font-size: 11.5px !important; margin-bottom: 8px !important; } .cmb-quote-popup .fluentform .ff-el-group{ margin-bottom: 6px !important; } .cmb-quote-popup .fluentform textarea{ min-height: 48px !important; max-height: 70px !important; } } /* ========================================================= 10. REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce){ .cmb-quote-popup .fluentform .ff-btn-submit, .cmb-quote-popup .fluentform button[type="submit"], .cmb-quote-popup .fluentform input[type="submit"]{ transition: none !important; } }/* End custom CSS */