.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 *//* =========================================================
   VERTEX PACKAGING — CUSTOM MAILER BOX QUOTE POPUP
   Elementor Popup + Fluent Forms

   Required Elementor CSS classes:
   Popup/root container: cmb-quote-popup
   Heading widget:        cmb-popup-title
   Subtitle widget:       cmb-popup-subtitle

   Goals:
   - No internal popup scrollbar
   - No horizontal page scrollbar
   - Compact, responsive layout
   - Optimised for desktop, laptop, tablet and mobile
   - Custom Postal Boxes colours: #19244F + #C38F2D

   ---------------------------------------------------------
   FIX PASS — root causes & what changed
   1. Title/subtitle were rendering at a default heading size
      instead of the clamp() sizes below — a specificity fight
      with Elementor's/theme's own heading CSS, not a typo.
      Every title/subtitle rule is now prefixed with
      "body:not(#_)", a standard trick that adds ID-level
      specificity so ours always wins, without touching the
      widget's own settings.
   2. The description textarea was shorter than its own
      placeholder text, so the browser drew a native scrollbar
      (the up/down arrow buttons in the screenshot). Gave it a
      bit more room and swapped in a slim, on-brand scrollbar.
   3. "Select Unit" showed as full-strength bold text instead
      of reading as a placeholder. Native <select> has no
      ::placeholder, so it's now styled from the empty-value /
      disabled option state instead.
   4. The Upload field's "Choose File" control is Fluent Forms'
      own .ff_upload_btn button, not a plain <input type=file>
      — the old CSS never touched it, which is why it looked
      unstyled. It now gets the same dashed gold/green look as
      the rest of the card.
   5. Darkened the popup's own overlay so page content can no
      longer peek through at the corners.
   ========================================================= */

/* ---------- LOCK BACKGROUND ONLY WHILE THIS POPUP EXISTS ---------- */
html:has(.elementor-popup-modal .cmb-quote-popup),
body:has(.elementor-popup-modal .cmb-quote-popup){
  overflow:hidden !important;
  max-width:100vw !important;
}

/* ---------- ELEMENTOR MODAL / OUTER FRAME ---------- */
.elementor-popup-modal:has(.cmb-quote-popup){
  box-sizing:border-box !important;
  overflow:hidden !important;
  padding:clamp(7px,1.5vw,14px) !important;
}

.elementor-popup-modal:has(.cmb-quote-popup) .dialog-widget-content{
  box-sizing:border-box !important;
  width:min(540px,calc(100vw - 24px)) !important;
  max-width:calc(100vw - 24px) !important;
  max-height:none !important;
  margin:auto !important;
  padding:0 !important;
  overflow:visible !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}

.elementor-popup-modal:has(.cmb-quote-popup) .dialog-message{
  width:100% !important;
  max-width:100% !important;
  max-height:none !important;
  padding:0 !important;
  margin:0 !important;
  overflow:visible !important;
}

/* ---------- OVERLAY / BACKDROP ----------
   Keeps page content from showing through at the edges/corners.
   Scoped so it only affects the backdrop while THIS popup is open. */
.elementor-popup-modal:has(.cmb-quote-popup) .dialog-overlay{
  background:rgba(25,36,79,.55) !important;
  backdrop-filter:blur(2px) !important;
  -webkit-backdrop-filter:blur(2px) !important;
}

/* ---------- MAIN CARD ---------- */
.cmb-quote-popup{
  --cmb-green:#19244F;
  --cmb-green-2:#263664;
  --cmb-gold:#C38F2D;
  --cmb-gold-2:#D9A744;
  --cmb-text:#30384F;
  --cmb-muted:rgba(89,96,113,.68);
  --cmb-field:#F9F5EF;
  --cmb-border:rgba(25,36,79,.13);
  --cmb-ease:cubic-bezier(.22,1,.36,1);

  position:relative !important;
  isolation:isolate !important;
  box-sizing:border-box !important;
  width:100% !important;
  max-width:540px !important;
  max-height:none !important;
  margin:0 auto !important;
  padding:18px clamp(18px,3vw,24px) 20px !important;
  overflow:hidden !important;

  background:#fff !important;
  border:1px solid rgba(25,36,79,.08) !important;
  border-radius:18px !important;
  box-shadow:0 22px 65px rgba(25,36,79,.20) !important;
  font-family:"Inter",Arial,sans-serif !important;
}

/* Premium top accent */
.cmb-quote-popup::before{
  content:"";
  position:absolute;
  z-index:0;
  top:0;
  left:0;
  width:100%;
  height:3px;
  background:linear-gradient(90deg,var(--cmb-green),var(--cmb-gold),var(--cmb-green));
  pointer-events:none;
}

.cmb-quote-popup > *{
  position:relative;
  z-index:1;
}

.cmb-quote-popup,
.cmb-quote-popup *{
  box-sizing:border-box !important;
}

/* ---------- ELEMENTOR DEFAULT SPACING RESET INSIDE CARD ---------- */
.cmb-quote-popup .elementor-widget,
.cmb-quote-popup .elementor-widget-container,
.cmb-quote-popup .e-con,
.cmb-quote-popup .e-con-inner{
  max-width:100% !important;
}

.cmb-quote-popup .elementor-widget-heading,
.cmb-quote-popup .elementor-widget-text-editor{
  margin-block-end:0 !important;
}

/* ---------- TITLE ----------
   body:not(#_) is a specificity hack: :not() with a fake ID adds
   ID-level weight to every .elementor-2336 .elementor-element.elementor-element-93790f3 below, so this reliably beats
   Elementor's/theme's own heading CSS without needing to touch the
   widget's Typography settings. */
body:not(#_) .cmb-popup-title,
body:not(#_) .cmb-popup-title *,
body:not(#_) .cmb-popup-title .elementor-heading-title{
  margin:0 !important;
  padding:0 !important;
  color:var(--cmb-green) !important;
  font-family:"Playfair Display","Inter",serif !important;
  font-size:clamp(20px,2.15vw,24px) !important;
  font-weight:800 !important;
  line-height:1.15 !important;
  letter-spacing:-.015em !important;
}

.cmb-popup-title{
  margin-bottom:4px !important;
  padding-right:30px !important;
}

/* ---------- SUBTITLE ---------- */
body:not(#_) .cmb-popup-subtitle,
body:not(#_) .cmb-popup-subtitle *{
  margin:0 !important;
  padding:0 !important;
  color:var(--cmb-muted) !important;
  font-family:"Inter",Arial,sans-serif !important;
  font-size:12px !important;
  font-weight:500 !important;
  line-height:1.4 !important;
}

.cmb-popup-subtitle{
  margin-bottom:11px !important;
}

/* ---------- FLUENT FORM RESET ---------- */
.cmb-quote-popup .fluentform,
.cmb-quote-popup .fluentform form,
.cmb-quote-popup .fluentform .ff-el-group,
.cmb-quote-popup .fluentform .ff-el-input--content{
  width:100% !important;
  max-width:100% !important;
}

.cmb-quote-popup .fluentform{
  margin:0 !important;
  padding:0 !important;
  font-family:"Inter",Arial,sans-serif !important;
}

.cmb-quote-popup .fluentform .ff-el-group{
  margin:0 0 8px !important;
  padding:0 !important;
}

/* Remove accidental last empty spacing before submit */
.cmb-quote-popup .fluentform .ff-el-group:last-child{
  margin-bottom:0 !important;
}

/* ---------- LABELS ---------- */
.cmb-quote-popup .fluentform label,
.cmb-quote-popup .fluentform .ff-el-input--label label{
  display:block !important;
  margin:0 0 4px !important;
  color:var(--cmb-green) !important;
  font-family:"Inter",Arial,sans-serif !important;
  font-size:12px !important;
  font-weight:700 !important;
  line-height:1.25 !important;
}

/* Required asterisk */
.cmb-quote-popup .fluentform .ff-el-input--label.ff-el-is-required.asterisk-right label::after{
  color:var(--cmb-gold) !important;
}

/* ---------- INPUTS / SELECT / TEXTAREA ---------- */
.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 input[type="url"],
.cmb-quote-popup .fluentform select,
.cmb-quote-popup .fluentform textarea{
  width:100% !important;
  max-width:100% !important;
  margin:0 !important;
  padding:8px 11px !important;
  color:var(--cmb-text) !important;
  background:var(--cmb-field) !important;
  border:1px solid var(--cmb-border) !important;
  border-radius:9px !important;
  outline:0 !important;
  box-shadow:none !important;
  font-family:"Inter",Arial,sans-serif !important;
  font-size:13px !important;
  font-weight:500 !important;
  line-height:1.25 !important;
  transition:border-color .18s ease,background .18s ease,box-shadow .18s ease !important;
}

.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 input[type="url"],
.cmb-quote-popup .fluentform select{
  min-height:38px !important;
  height:38px !important;
}

/* Textarea: tall enough for its own placeholder, with a slim
   on-brand scrollbar as a fallback instead of the browser default
   (this is what produced the boxy up/down "arrow" scrollbar). */
.cmb-quote-popup .fluentform textarea{
  min-height:68px !important;
  height:68px !important;
  max-height:68px !important;
  resize:none !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  overflow-wrap:break-word !important;
  word-break:break-word !important;
  scrollbar-width:thin !important;
  scrollbar-color:var(--cmb-gold) var(--cmb-field) !important;
}

.cmb-quote-popup .fluentform textarea::-webkit-scrollbar{
  width:6px !important;
}
.cmb-quote-popup .fluentform textarea::-webkit-scrollbar-track{
  background:var(--cmb-field) !important;
  border-radius:8px !important;
}
.cmb-quote-popup .fluentform textarea::-webkit-scrollbar-thumb{
  background:rgba(195,143,45,.55) !important;
  border-radius:8px !important;
}
.cmb-quote-popup .fluentform textarea::-webkit-scrollbar-thumb:hover{
  background:var(--cmb-gold) !important;
}

.cmb-quote-popup .fluentform ::placeholder{
  color:rgba(89,96,113,.48) !important;
  opacity:1 !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(195,143,45,.50) !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{
  background:#fff !important;
  border-color:var(--cmb-gold) !important;
  box-shadow:0 0 0 3px rgba(195,143,45,.14) !important;
}

/* ---------- SELECT ---------- */
.cmb-quote-popup .fluentform select{
  appearance:none !important;
  -webkit-appearance:none !important;
  padding-right:32px !important;
  color:var(--cmb-text) !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.25 6 6.25 11 1.25' fill='none' stroke='%2319244F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;
  background-position:right 11px center !important;
}

/* "Select Unit" reads like a placeholder until a real unit is
   chosen. Selects can't use ::placeholder, so this keys off the
   empty-value / disabled placeholder option instead — covers the
   common Fluent Forms patterns whether or not the field is marked
   required. */
.cmb-quote-popup .fluentform select:required:invalid,
.cmb-quote-popup .fluentform select:has(option:checked[value=""]),
.cmb-quote-popup .fluentform select:has(option:checked:disabled){
  color:rgba(89,96,113,.48) !important;
  font-weight:400 !important;
}

/* ---------- MULTI-COLUMN FLUENT FORM ROWS ---------- */
.cmb-quote-popup .fluentform .ff-t-container,
.cmb-quote-popup .fluentform .ff-row{
  display:flex !important;
  flex-flow:row nowrap !important;
  align-items:flex-start !important;
  gap:8px !important;
  width:100% !important;
  max-width:100% !important;
  margin:0 !important;
  padding:0 !important;
}

.cmb-quote-popup .fluentform .ff-t-container > *,
.cmb-quote-popup .fluentform .ff-row > *,
.cmb-quote-popup .fluentform .ff-t-cell{
  flex:1 1 0 !important;
  width:auto !important;
  min-width:0 !important;
  max-width:100% !important;
  margin:0 !important;
  padding-left:0 !important;
  padding-right:0 !important;
}

/* ---------- FILE UPLOAD (native <input type="file"> fallback) ----------
   Kept in case your build ever falls back to a bare file input. */
.cmb-quote-popup .fluentform input[type="file"]{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  margin:0 !important;
  padding:3px 0 !important;
  overflow:hidden !important;
  color:var(--cmb-muted) !important;
  background:transparent !important;
  border:0 !important;
  font-family:"Inter",Arial,sans-serif !important;
  font-size:11.5px !important;
  line-height:1.2 !important;
}

.cmb-quote-popup .fluentform input[type="file"]::file-.elementor-2336 .elementor-element.elementor-element-93790f3-button{
  margin:0 8px 0 0 !important;
  padding:6px 11px !important;
  color:var(--cmb-green) !important;
  background:#fff !important;
  border:1px dashed rgba(195,143,45,.70) !important;
  border-radius:8px !important;
  font-family:"Inter",Arial,sans-serif !important;
  font-size:11.5px !important;
  font-weight:700 !important;
  cursor:pointer !important;
  transition:background .18s ease,border-color .18s ease !important;
}

.cmb-quote-popup .fluentform input[type="file"]:hover::file-.elementor-2336 .elementor-element.elementor-element-93790f3-button{
  background:rgba(195,143,45,.09) !important;
  border-color:var(--cmb-gold) !important;
}

.cmb-quote-popup .fluentform .ff-el-group:has(input[type="file"]){
  margin-bottom:7px !important;
}

/* ---------- FILE UPLOAD — FLUENT FORMS' ACTUAL BUTTON ----------
   Fluent Forms' File/Image Upload field renders its own button as
   .ff_upload_btn (often chained with .ff-btn) rather than a plain
   <input type="file">, which is why it was showing the plugin's own
   default look instead of the card's branding. This re-skins it to
   match, plus the file-list/preview it shows after a file is chosen.
   If your install uses different class names, right-click the field
   → Inspect, and send me the outer HTML so I can target it exactly. */
.cmb-quote-popup .fluentform .ff_upload_btn,
.cmb-quote-popup .fluentform .ff_upload_btn.ff-btn,
.cmb-quote-popup .fluentform [class*="upload_btn"],
.cmb-quote-popup .fluentform [class*="upload-btn"]{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  min-height:38px !important;
  margin:0 !important;
  padding:8px 11px !important;
  color:var(--cmb-green) !important;
  background:var(--cmb-field) !important;
  border:1.5px dashed rgba(195,143,45,.55) !important;
  border-radius:9px !important;
  font-family:"Inter",Arial,sans-serif !important;
  font-size:12.5px !important;
  font-weight:700 !important;
  line-height:1.2 !important;
  cursor:pointer !important;
  transition:background .18s ease,border-color .18s ease !important;
}

.cmb-quote-popup .fluentform .ff_upload_btn:hover,
.cmb-quote-popup .fluentform .ff_upload_btn.ff-btn:hover,
.cmb-quote-popup .fluentform [class*="upload_btn"]:hover,
.cmb-quote-popup .fluentform [class*="upload-btn"]:hover{
  background:rgba(195,143,45,.09) !important;
  border-color:var(--cmb-gold) !important;
}

.cmb-quote-popup .fluentform .ff-uploaded-list,
.cmb-quote-popup .fluentform .ff-upload-preview{
  margin-top:6px !important;
  font-family:"Inter",Arial,sans-serif !important;
  font-size:11px !important;
  color:var(--cmb-muted) !important;
}

/* ---------- HELP / ERROR TEXT ---------- */
.cmb-quote-popup .fluentform .ff-el-help-message,
.cmb-quote-popup .fluentform .text-danger,
.cmb-quote-popup .fluentform .error,
.cmb-quote-popup .fluentform .ff-el-is-error .text-danger{
  margin:3px 0 0 !important;
  font-size:10.5px !important;
  line-height:1.2 !important;
}

.cmb-quote-popup .fluentform .ff-el-is-error .ff-el-form-control{
  box-shadow:none !important;
}

/* ---------- SUBMIT ---------- */
.cmb-quote-popup .fluentform .ff-btn-submit,
.cmb-quote-popup .fluentform button[type="submit"],
.cmb-quote-popup .fluentform input[type="submit"]{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  min-height:40px !important;
  margin:2px 0 0 !important;
  padding:9px 16px !important;
  border:0 !important;
  border-radius:999px !important;
  color:#fff !important;
  background:linear-gradient(135deg,var(--cmb-green) 0%,var(--cmb-green-2) 100%) !important;
  box-shadow:0 8px 20px rgba(25,36,79,.20) !important;
  font-family:"Inter",Arial,sans-serif !important;
  font-size:13px !important;
  font-weight:800 !important;
  line-height:1.1 !important;
  letter-spacing:.01em !important;
  cursor:pointer !important;
  transition:transform .2s var(--cmb-ease),box-shadow .2s var(--cmb-ease),background .2s 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{
  color:var(--cmb-green) !important;
  background:linear-gradient(135deg,var(--cmb-gold),var(--cmb-gold-2)) !important;
  box-shadow:0 11px 24px rgba(195,143,45,.27) !important;
  transform:translateY(-1px) !important;
}

.cmb-quote-popup .fluentform .ff-btn-submit:focus-visible,
.cmb-quote-popup .fluentform button[type="submit"]:focus-visible,
.cmb-quote-popup .fluentform input[type="submit"]:focus-visible{
  outline:3px solid rgba(195,143,45,.35) !important;
  outline-offset:2px !important;
}

/* ---------- CLOSE BUTTON ---------- */
.elementor-popup-modal:has(.cmb-quote-popup) .dialog-close-button{
  z-index:20 !important;
  top:10px !important;
  right:10px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:30px !important;
  height:30px !important;
  padding:0 !important;
  color:#19244F !important;
  background:rgba(255,255,255,.94) !important;
  border:1px solid rgba(25,36,79,.10) !important;
  border-radius:50% !important;
  box-shadow:0 4px 14px rgba(25,36,79,.10) !important;
  opacity:1 !important;
  transition:transform .18s ease,background .18s ease,color .18s ease !important;
}

.elementor-popup-modal:has(.cmb-quote-popup) .dialog-close-button:hover{
  color:#19244F !important;
  background:#C38F2D !important;
  transform:rotate(90deg) !important;
}

/* =========================================================
   RESPONSIVE WIDTH
   Keep paired fields side-by-side on normal phones because
   stacking every field makes the popup unnecessarily tall.
   ========================================================= */
@media (max-width:680px){
  .elementor-popup-modal:has(.cmb-quote-popup){
    padding:8px !important;
  }

  .elementor-popup-modal:has(.cmb-quote-popup) .dialog-widget-content{
    width:calc(100vw - 16px) !important;
    max-width:calc(100vw - 16px) !important;
  }

  .cmb-quote-popup{
    max-width:none !important;
    padding:15px 14px 16px !important;
    border-radius:15px !important;
  }

  body:not(#_) .cmb-popup-title,
  body:not(#_) .cmb-popup-title *,
  body:not(#_) .cmb-popup-title .elementor-heading-title{
    font-size:clamp(18px,5.2vw,21px) !important;
  }

  body:not(#_) .cmb-popup-subtitle,
  body:not(#_) .cmb-popup-subtitle *{
    font-size:11.5px !important;
  }

  .cmb-quote-popup .fluentform .ff-t-container,
  .cmb-quote-popup .fluentform .ff-row{
    gap:7px !important;
  }

  .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 input[type="url"],
  .cmb-quote-popup .fluentform select,
  .cmb-quote-popup .fluentform textarea{
    font-size:12.5px !important;
    padding-left:9px !important;
    padding-right:9px !important;
  }
}

/* Very narrow portrait phones can stack paired fields safely
   because their portrait height is normally sufficient. */
@media (max-width:360px) and (min-height:620px){
  .cmb-quote-popup .fluentform .ff-t-container,
  .cmb-quote-popup .fluentform .ff-row{
    flex-direction:column !important;
    gap:0 !important;
  }

  .cmb-quote-popup .fluentform .ff-t-container > *,
  .cmb-quote-popup .fluentform .ff-row > *,
  .cmb-quote-popup .fluentform .ff-t-cell{
    width:100% !important;
    flex-basis:auto !important;
  }
}

/* =========================================================
   RESPONSIVE HEIGHT
   Instead of adding a scrollbar, progressively reduce vertical
   spacing and control heights on short screens.
   ========================================================= */
@media (max-height:760px){
  .cmb-quote-popup{
    padding-top:14px !important;
    padding-bottom:15px !important;
  }

  body:not(#_) .cmb-popup-title,
  body:not(#_) .cmb-popup-title *,
  body:not(#_) .cmb-popup-title .elementor-heading-title{
    font-size:19px !important;
    line-height:1.1 !important;
  }

  .cmb-popup-subtitle{
    margin-bottom:8px !important;
  }

  body:not(#_) .cmb-popup-subtitle,
  body:not(#_) .cmb-popup-subtitle *{
    font-size:11px !important;
    line-height:1.3 !important;
  }

  .cmb-quote-popup .fluentform .ff-el-group{
    margin-bottom:6px !important;
  }

  .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 input[type="url"],
  .cmb-quote-popup .fluentform select{
    min-height:36px !important;
    height:36px !important;
    padding-top:7px !important;
    padding-bottom:7px !important;
  }

  .cmb-quote-popup .fluentform textarea{
    min-height:50px !important;
    height:50px !important;
    max-height:50px !important;
  }

  .cmb-quote-popup .fluentform input[type="file"]{
    padding:1px 0 !important;
  }

  .cmb-quote-popup .fluentform input[type="file"]::file-.elementor-2336 .elementor-element.elementor-element-93790f3-button{
    padding:5px 9px !important;
  }

  .cmb-quote-popup .fluentform .ff-btn-submit,
  .cmb-quote-popup .fluentform button[type="submit"],
  .cmb-quote-popup .fluentform input[type="submit"]{
    min-height:37px !important;
    padding:8px 14px !important;
  }
}

@media (max-height:620px){
  .elementor-popup-modal:has(.cmb-quote-popup){
    padding:5px 8px !important;
  }

  .cmb-quote-popup{
    padding:10px 13px 11px !important;
    border-radius:13px !important;
  }

  .cmb-popup-title{
    margin-bottom:2px !important;
  }

  body:not(#_) .cmb-popup-title,
  body:not(#_) .cmb-popup-title *,
  body:not(#_) .cmb-popup-title .elementor-heading-title{
    font-size:17px !important;
  }

  .cmb-popup-subtitle{
    margin-bottom:5px !important;
  }

  body:not(#_) .cmb-popup-subtitle,
  body:not(#_) .cmb-popup-subtitle *{
    font-size:10.5px !important;
    line-height:1.2 !important;
  }

  .cmb-quote-popup .fluentform .ff-el-group{
    margin-bottom:4px !important;
  }

  .cmb-quote-popup .fluentform label,
  .cmb-quote-popup .fluentform .ff-el-input--label label{
    margin-bottom:2px !important;
    font-size:10.5px !important;
  }

  .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 input[type="url"],
  .cmb-quote-popup .fluentform select{
    min-height:33px !important;
    height:33px !important;
    font-size:11.5px !important;
    padding-top:5px !important;
    padding-bottom:5px !important;
  }

  .cmb-quote-popup .fluentform textarea{
    min-height:44px !important;
    height:44px !important;
    max-height:44px !important;
    font-size:11.5px !important;
    padding-top:6px !important;
    padding-bottom:6px !important;
  }

  .cmb-quote-popup .fluentform input[type="file"],
  .cmb-quote-popup .fluentform input[type="file"]::file-.elementor-2336 .elementor-element.elementor-element-93790f3-button{
    font-size:10.5px !important;
  }

  .cmb-quote-popup .fluentform input[type="file"]::file-.elementor-2336 .elementor-element.elementor-element-93790f3-button{
    padding:4px 8px !important;
  }

  .cmb-quote-popup .fluentform .ff-btn-submit,
  .cmb-quote-popup .fluentform button[type="submit"],
  .cmb-quote-popup .fluentform input[type="submit"]{
    min-height:34px !important;
    padding:6px 12px !important;
    font-size:12px !important;
  }
}

/* Landscape phones / unusually short viewports: never stack rows. */
@media (max-height:520px){
  .cmb-quote-popup .fluentform .ff-t-container,
  .cmb-quote-popup .fluentform .ff-row{
    flex-direction:row !important;
    gap:5px !important;
  }

  .cmb-quote-popup .fluentform .ff-t-container > *,
  .cmb-quote-popup .fluentform .ff-row > *,
  .cmb-quote-popup .fluentform .ff-t-cell{
    flex:1 1 0 !important;
    width:auto !important;
    min-width:0 !important;
  }
}

/* ---------- ACCESSIBILITY / REDUCED MOTION ---------- */
@media (prefers-reduced-motion:reduce){
  .cmb-quote-popup *,
  .elementor-popup-modal:has(.cmb-quote-popup) .dialog-close-button{
    scroll-behavior:auto !important;
    transition:none !important;
    animation:none !important;
  }
}

/* =========================================================
   FINAL RESPONSIVE FIX PASS
   - True vertical spacing between Fluent Forms rows
   - Clear, high-contrast close button
   - Reliable Select Unit arrow + protected text area
   - Better width for the unit .elementor-2336 .elementor-element.elementor-element-93790f3
   - reCAPTCHA / CAPTCHA spacing and responsive fit
   - Keeps the compact/no-internal-scroll behaviour
   ========================================================= */


/* =========================================================
   A. REAL VERTICAL SPACING BETWEEN FORM ROWS
   Fluent Forms uses .ff-t-container / .ff-row for multi-column
   rows. Giving only .ff-el-group a bottom margin does not create
   a reliable gap between those outer rows.
   ========================================================= */

.cmb-quote-popup .fluentform .ff-t-container,
.cmb-quote-popup .fluentform .ff-row{
  margin:0 0 9px !important;
}

/* The row controls the outside spacing; stop nested fields doubling it. */
.cmb-quote-popup .fluentform .ff-t-container .ff-el-group,
.cmb-quote-popup .fluentform .ff-row .ff-el-group{
  margin-bottom:0 !important;
}

/* Standalone fields such as the details field, upload and captcha. */
.cmb-quote-popup .fluentform form > .ff-el-group,
.cmb-quote-popup .fluentform .ff-el-group:not(.ff-t-cell){
  margin-bottom:9px !important;
}

/* Preserve horizontal gaps between fields in the same row. */
.cmb-quote-popup .fluentform .ff-t-container,
.cmb-quote-popup .fluentform .ff-row{
  column-gap:9px !important;
  row-gap:9px !important;
}


/* =========================================================
   B. SELECT UNIT — KEEP WORDING CLEAR + GUARANTEED ARROW
   The arrow is drawn on the input wrapper instead of depending
   on the native select arrow or a background image.
   ========================================================= */

.cmb-quote-popup .fluentform .ff-el-input--content:has(> select),
.cmb-quote-popup .fluentform .ff-el-input--content:has(select){
  position:relative !important;
}

/* Give the unit field slightly more room than Length/Width/Depth. */
.cmb-quote-popup .fluentform .ff-t-container:has(select) > *:has(select),
.cmb-quote-popup .fluentform .ff-row:has(select) > *:has(select),
.cmb-quote-popup .fluentform .ff-t-cell:has(select){
  flex:1.20 1 0 !important;
}

/* Remove competing native/background arrows and reserve space for ours. */
.cmb-quote-popup .fluentform select,
.cmb-quote-popup .fluentform select.ff-el-form-control{
  appearance:none !important;
  -webkit-appearance:none !important;
  -moz-appearance:none !important;

  padding-left:11px !important;
  padding-right:39px !important;

  background-image:none !important;

  white-space:nowrap !important;
  text-overflow:clip !important;
  cursor:pointer !important;
}

/* Deep-green down chevron. */
.cmb-quote-popup .fluentform .ff-el-input--content:has(select)::after{
  content:"" !important;
  position:absolute !important;
  z-index:5 !important;

  top:50% !important;
  right:13px !important;

  width:8px !important;
  height:8px !important;

  border-right:2px solid #19244F !important;
  border-bottom:2px solid #19244F !important;

  transform:translateY(-70%) rotate(45deg) !important;
  transform-origin:center !important;

  pointer-events:none !important;
}

/* Keep Select Unit looking like placeholder text until a real option is chosen. */
.cmb-quote-popup .fluentform select:required:invalid,
.cmb-quote-popup .fluentform select:has(option:checked[value=""]),
.cmb-quote-popup .fluentform select:has(option:checked:disabled){
  color:rgba(89,96,113,.52) !important;
  font-weight:400 !important;
}


/* =========================================================
   C. CLOSE BUTTON — ALWAYS CLEAR AND FULLY INSIDE THE CARD
   Elementor's own icon can be pale/partly hidden depending on
   theme styling, so a clean X is drawn explicitly.
   ========================================================= */

.elementor-popup-modal:has(.cmb-quote-popup) .dialog-close-button{
  position:absolute !important;
  z-index:100 !important;

  top:8px !important;
  right:8px !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  width:34px !important;
  height:34px !important;

  margin:0 !important;
  padding:0 !important;

  color:#fff !important;
  background:#19244F !important;

  border:2px solid #fff !important;
  border-radius:50% !important;

  box-shadow:
    0 5px 16px rgba(25,36,79,.24),
    0 0 0 1px rgba(195,143,45,.55) !important;

  opacity:1 !important;
  overflow:hidden !important;

  font-size:0 !important;
  line-height:1 !important;

  cursor:pointer !important;
}

/* Hide Elementor/theme versions of the close icon to avoid a double X. */
.elementor-popup-modal:has(.cmb-quote-popup) .dialog-close-button i,
.elementor-popup-modal:has(.cmb-quote-popup) .dialog-close-button svg,
.elementor-popup-modal:has(.cmb-quote-popup) .dialog-close-button .eicon-close{
  display:none !important;
}

/* Guaranteed visible close symbol. */
.elementor-popup-modal:has(.cmb-quote-popup) .dialog-close-button::before{
  content:"×" !important;
  display:block !important;

  width:auto !important;
  height:auto !important;

  margin:0 !important;
  padding:0 0 2px !important;

  color:#fff !important;
  background:none !important;
  border:0 !important;

  font-family:Arial,Helvetica,sans-serif !important;
  font-size:25px !important;
  font-weight:400 !important;
  line-height:1 !important;

  transform:none !important;
}

.elementor-popup-modal:has(.cmb-quote-popup) .dialog-close-button:hover{
  color:#19244F !important;
  background:#C38F2D !important;
  transform:rotate(90deg) !important;
}

.elementor-popup-modal:has(.cmb-quote-popup) .dialog-close-button:hover::before{
  color:#19244F !important;
}


/* =========================================================
   D. CAPTCHA / reCAPTCHA
   Supports the common Fluent Forms reCAPTCHA, hCaptcha and
   Turnstile wrappers while leaving the provider itself intact.
   ========================================================= */

/* Give CAPTCHA its own clean breathing room. */
.cmb-quote-popup .fluentform .ff-el-group:has(.g-recaptcha),
.cmb-quote-popup .fluentform .ff-el-group:has(.h-captcha),
.cmb-quote-popup .fluentform .ff-el-group:has(.cf-turnstile),
.cmb-quote-popup .fluentform .ff-el-group:has(iframe[title*="reCAPTCHA"]),
.cmb-quote-popup .fluentform .ff-el-group:has(iframe[title*="challenge"]){
  margin-top:1px !important;
  margin-bottom:9px !important;
}

/* Centre the visible challenge neatly. */
.cmb-quote-popup .fluentform .ff-el-input--content:has(.g-recaptcha),
.cmb-quote-popup .fluentform .ff-el-input--content:has(.h-captcha),
.cmb-quote-popup .fluentform .ff-el-input--content:has(.cf-turnstile),
.cmb-quote-popup .fluentform .ff-el-input--content:has(iframe[title*="reCAPTCHA"]){
  display:flex !important;
  justify-content:center !important;
  align-items:flex-start !important;
  width:100% !important;
  max-width:100% !important;
  overflow:visible !important;
}

/* Normal desktop/tablet CAPTCHA dimensions remain untouched. */
.cmb-quote-popup .fluentform .g-recaptcha,
.cmb-quote-popup .fluentform .h-captcha,
.cmb-quote-popup .fluentform .cf-turnstile{
  max-width:100% !important;
  margin-left:auto !important;
  margin-right:auto !important;
  transform-origin:top left !important;
}


/* =========================================================
   E. MOBILE — 4 DIMENSION CONTROLS BECOME 2 × 2
   This is important because Select Unit needs enough space for
   its wording and arrow on narrow phones.
   ========================================================= */

@media (max-width:480px){

  .cmb-quote-popup .fluentform .ff-t-container:has(select),
  .cmb-quote-popup .fluentform .ff-row:has(select){
    flex-wrap:wrap !important;
    column-gap:8px !important;
    row-gap:8px !important;
  }

  .cmb-quote-popup .fluentform .ff-t-container:has(select) > *,
  .cmb-quote-popup .fluentform .ff-row:has(select) > *,
  .cmb-quote-popup .fluentform .ff-t-cell:has(select){
    flex:0 0 calc(50% - 4px) !important;
    width:calc(50% - 4px) !important;
    max-width:calc(50% - 4px) !important;
  }

  .cmb-quote-popup .fluentform select,
  .cmb-quote-popup .fluentform select.ff-el-form-control{
    padding-right:37px !important;
  }

  .cmb-quote-popup .fluentform .ff-el-input--content:has(select)::after{
    right:12px !important;
  }
}


/* =========================================================
   F. CAPTCHA SCALE FOR VERY NARROW PHONES
   Google checkbox reCAPTCHA is approximately 304px wide.
   Only scale it where a phone is genuinely narrower.
   ========================================================= */

@media (max-width:360px){

  .cmb-quote-popup .fluentform .ff-el-input--content:has(.g-recaptcha){
    display:block !important;
    width:262px !important;
    max-width:100% !important;
    min-height:68px !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  .cmb-quote-popup .fluentform .g-recaptcha{
    width:304px !important;
    max-width:none !important;
    transform:scale(.86) !important;
    transform-origin:top left !important;
  }
}

@media (max-width:320px){

  .cmb-quote-popup .fluentform .ff-el-input--content:has(.g-recaptcha){
    width:244px !important;
    min-height:63px !important;
  }

  .cmb-quote-popup .fluentform .g-recaptcha{
    transform:scale(.80) !important;
  }
}


/* =========================================================
   G. SHORT VIEWPORTS — KEEP THE CAPTCHA AND BUTTON ON-SCREEN
   Compact the new row spacing along with the rest of the form.
   ========================================================= */

@media (max-height:760px){

  .cmb-quote-popup .fluentform .ff-t-container,
  .cmb-quote-popup .fluentform .ff-row{
    margin-bottom:6px !important;
    column-gap:7px !important;
    row-gap:6px !important;
  }

  .cmb-quote-popup .fluentform form > .ff-el-group,
  .cmb-quote-popup .fluentform .ff-el-group:not(.ff-t-cell){
    margin-bottom:6px !important;
  }

  .cmb-quote-popup .fluentform .ff-t-container .ff-el-group,
  .cmb-quote-popup .fluentform .ff-row .ff-el-group{
    margin-bottom:0 !important;
  }

  .cmb-quote-popup .fluentform .ff-el-group:has(.g-recaptcha),
  .cmb-quote-popup .fluentform .ff-el-group:has(.h-captcha),
  .cmb-quote-popup .fluentform .ff-el-group:has(.cf-turnstile),
  .cmb-quote-popup .fluentform .ff-el-group:has(iframe[title*="reCAPTCHA"]){
    margin-bottom:6px !important;
  }
}

@media (max-height:620px){

  .cmb-quote-popup .fluentform .ff-t-container,
  .cmb-quote-popup .fluentform .ff-row{
    margin-bottom:4px !important;
    column-gap:6px !important;
    row-gap:4px !important;
  }

  .cmb-quote-popup .fluentform form > .ff-el-group,
  .cmb-quote-popup .fluentform .ff-el-group:not(.ff-t-cell){
    margin-bottom:4px !important;
  }

  .cmb-quote-popup .fluentform .ff-t-container .ff-el-group,
  .cmb-quote-popup .fluentform .ff-row .ff-el-group{
    margin-bottom:0 !important;
  }

  .elementor-popup-modal:has(.cmb-quote-popup) .dialog-close-button{
    top:6px !important;
    right:6px !important;
    width:30px !important;
    height:30px !important;
  }

  .elementor-popup-modal:has(.cmb-quote-popup) .dialog-close-button::before{
    font-size:22px !important;
  }
}


/* =========================================================
   H. SHORT LANDSCAPE PHONES
   Keep the dimensions in one compact row to save vertical space.
   Landscape width normally gives Select Unit enough room.
   ========================================================= */

@media (max-height:520px){

  .cmb-quote-popup .fluentform .ff-t-container:has(select),
  .cmb-quote-popup .fluentform .ff-row:has(select){
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    gap:5px !important;
  }

  .cmb-quote-popup .fluentform .ff-t-container:has(select) > *,
  .cmb-quote-popup .fluentform .ff-row:has(select) > *{
    flex:1 1 0 !important;
    width:auto !important;
    max-width:100% !important;
    min-width:0 !important;
  }

  .cmb-quote-popup .fluentform .ff-t-container:has(select) > *:has(select),
  .cmb-quote-popup .fluentform .ff-row:has(select) > *:has(select){
    flex:1.22 1 0 !important;
  }
}

/* =========================================================
   FINAL PRECISION PASS — 2026-09-06
   Keeps the approved design, but fixes:
   1) consistent top-to-bottom spacing between form rows
   2) details textarea scrollbar
   3) responsive vertical fit across desktop/tablet/mobile
   ========================================================= */

/* ---------- CONSISTENT VERTICAL RHYTHM ---------- */

/*
   Fluent Forms uses outer row wrappers for multi-column fields.
   Control spacing on those outer blocks, and remove competing
   child margins so every row has the same visible gap.
*/
.cmb-quote-popup .fluentform .ff-t-container,
.cmb-quote-popup .fluentform .ff-row{
  margin-top:0 !important;
  margin-bottom:11px !important;
  column-gap:9px !important;
  row-gap:9px !important;
}

.cmb-quote-popup .fluentform .ff-t-container .ff-el-group,
.cmb-quote-popup .fluentform .ff-row .ff-el-group,
.cmb-quote-popup .fluentform .ff-t-cell .ff-el-group{
  margin-top:0 !important;
  margin-bottom:0 !important;
}

/* Standalone rows: details, upload, captcha and similar fields. */
.cmb-quote-popup .fluentform form > .ff-el-group{
  margin-top:0 !important;
  margin-bottom:11px !important;
}

/* Avoid accidental extra space at the very end of the form. */
.cmb-quote-popup .fluentform form > .ff-el-group:last-child,
.cmb-quote-popup .fluentform form > .ff-t-container:last-child,
.cmb-quote-popup .fluentform form > .ff-row:last-child{
  margin-bottom:0 !important;
}


/* ---------- DETAILS FIELD — NO SCROLLBAR ---------- */

.cmb-quote-popup .fluentform textarea,
.cmb-quote-popup .fluentform textarea.ff-el-form-control{
  min-height:88px !important;
  height:88px !important;
  max-height:88px !important;

  padding:10px 11px !important;

  overflow:hidden !important;
  overflow-x:hidden !important;
  overflow-y:hidden !important;

  resize:none !important;

  scrollbar-width:none !important;
  -ms-overflow-style:none !important;

  line-height:1.38 !important;
  overflow-wrap:anywhere !important;
  word-break:normal !important;
}

.cmb-quote-popup .fluentform textarea::-webkit-scrollbar,
.cmb-quote-popup .fluentform textarea.ff-el-form-control::-webkit-scrollbar{
  display:none !important;
  width:0 !important;
  height:0 !important;
}


/* =========================================================
   RESPONSIVE WIDTH — TABLET / MOBILE
   ========================================================= */

@media (max-width:680px){

  .cmb-quote-popup .fluentform .ff-t-container,
  .cmb-quote-popup .fluentform .ff-row,
  .cmb-quote-popup .fluentform form > .ff-el-group{
    margin-bottom:10px !important;
  }

  .cmb-quote-popup .fluentform .ff-t-container .ff-el-group,
  .cmb-quote-popup .fluentform .ff-row .ff-el-group,
  .cmb-quote-popup .fluentform .ff-t-cell .ff-el-group{
    margin-bottom:0 !important;
  }

  .cmb-quote-popup .fluentform textarea,
  .cmb-quote-popup .fluentform textarea.ff-el-form-control{
    min-height:96px !important;
    height:96px !important;
    max-height:96px !important;
    padding:10px 10px !important;
    line-height:1.4 !important;
  }
}


/* Narrow phones need more textarea height because the placeholder wraps. */
@media (max-width:480px){

  .cmb-quote-popup .fluentform textarea,
  .cmb-quote-popup .fluentform textarea.ff-el-form-control{
    min-height:112px !important;
    height:112px !important;
    max-height:112px !important;
  }

  /* Keep the 2 × 2 dimension/unit layout tidy. */
  .cmb-quote-popup .fluentform .ff-t-container:has(select),
  .cmb-quote-popup .fluentform .ff-row:has(select){
    row-gap:9px !important;
    column-gap:8px !important;
  }
}


/* =========================================================
   RESPONSIVE HEIGHT — MEDIUM / SHORT SCREENS
   Use progressive compaction instead of adding an internal
   popup scrollbar. The field gaps remain clearly visible.
   ========================================================= */

/* Typical smaller laptops / editor previews. */
@media (max-height:850px){

  .elementor-popup-modal:has(.cmb-quote-popup){
    padding-top:7px !important;
    padding-bottom:7px !important;
  }

  .cmb-quote-popup{
    padding-top:14px !important;
    padding-bottom:14px !important;
  }

  .cmb-popup-title{
    margin-bottom:3px !important;
  }

  .cmb-popup-subtitle{
    margin-bottom:8px !important;
  }

  .cmb-quote-popup .fluentform .ff-t-container,
  .cmb-quote-popup .fluentform .ff-row,
  .cmb-quote-popup .fluentform form > .ff-el-group{
    margin-bottom:8px !important;
  }

  .cmb-quote-popup .fluentform .ff-t-container .ff-el-group,
  .cmb-quote-popup .fluentform .ff-row .ff-el-group,
  .cmb-quote-popup .fluentform .ff-t-cell .ff-el-group{
    margin-bottom:0 !important;
  }

  .cmb-quote-popup .fluentform textarea,
  .cmb-quote-popup .fluentform textarea.ff-el-form-control{
    min-height:78px !important;
    height:78px !important;
    max-height:78px !important;
    overflow:hidden !important;
  }

  .cmb-quote-popup .fluentform .ff-el-group:has(input[type="file"]),
  .cmb-quote-popup .fluentform .ff-el-group:has(.ff_upload_btn),
  .cmb-quote-popup .fluentform .ff-el-group:has([class*="upload_btn"]),
  .cmb-quote-popup .fluentform .ff-el-group:has([class*="upload-btn"]){
    margin-bottom:8px !important;
  }

  .cmb-quote-popup .fluentform .ff-el-group:has(.g-recaptcha),
  .cmb-quote-popup .fluentform .ff-el-group:has(.h-captcha),
  .cmb-quote-popup .fluentform .ff-el-group:has(.cf-turnstile),
  .cmb-quote-popup .fluentform .ff-el-group:has(iframe[title*="reCAPTCHA"]),
  .cmb-quote-popup .fluentform .ff-el-group:has(iframe[title*="challenge"]){
    margin-top:0 !important;
    margin-bottom:8px !important;
  }
}


/* Short laptop/tablet landscape. */
@media (max-height:760px){

  .cmb-quote-popup{
    padding-top:12px !important;
    padding-bottom:12px !important;
  }

  .cmb-quote-popup .fluentform .ff-t-container,
  .cmb-quote-popup .fluentform .ff-row,
  .cmb-quote-popup .fluentform form > .ff-el-group{
    margin-bottom:6px !important;
  }

  .cmb-quote-popup .fluentform .ff-t-container .ff-el-group,
  .cmb-quote-popup .fluentform .ff-row .ff-el-group,
  .cmb-quote-popup .fluentform .ff-t-cell .ff-el-group{
    margin-bottom:0 !important;
  }

  .cmb-quote-popup .fluentform textarea,
  .cmb-quote-popup .fluentform textarea.ff-el-form-control{
    min-height:70px !important;
    height:70px !important;
    max-height:70px !important;
    padding-top:7px !important;
    padding-bottom:7px !important;
    font-size:11.5px !important;
    line-height:1.28 !important;
    overflow:hidden !important;
  }

  .cmb-quote-popup .fluentform .ff-el-group:has(.g-recaptcha),
  .cmb-quote-popup .fluentform .ff-el-group:has(.h-captcha),
  .cmb-quote-popup .fluentform .ff-el-group:has(.cf-turnstile),
  .cmb-quote-popup .fluentform .ff-el-group:has(iframe[title*="reCAPTCHA"]){
    margin-bottom:6px !important;
  }
}


/* Very short viewport / landscape phone.
   Preserve usability while keeping everything on-screen. */
@media (max-height:620px){

  .elementor-popup-modal:has(.cmb-quote-popup){
    padding-top:4px !important;
    padding-bottom:4px !important;
  }

  .cmb-quote-popup{
    padding-top:9px !important;
    padding-bottom:9px !important;
  }

  .cmb-quote-popup .fluentform .ff-t-container,
  .cmb-quote-popup .fluentform .ff-row,
  .cmb-quote-popup .fluentform form > .ff-el-group{
    margin-bottom:4px !important;
  }

  .cmb-quote-popup .fluentform .ff-t-container .ff-el-group,
  .cmb-quote-popup .fluentform .ff-row .ff-el-group,
  .cmb-quote-popup .fluentform .ff-t-cell .ff-el-group{
    margin-bottom:0 !important;
  }

  .cmb-quote-popup .fluentform textarea,
  .cmb-quote-popup .fluentform textarea.ff-el-form-control{
    min-height:64px !important;
    height:64px !important;
    max-height:64px !important;
    padding-top:6px !important;
    padding-bottom:6px !important;
    font-size:10.8px !important;
    line-height:1.2 !important;
    overflow:hidden !important;
  }
}


/* =========================================================
   EXTRA SAFETY — NEVER REINTRODUCE TEXTAREA SCROLLBARS
   ========================================================= */

.cmb-quote-popup .fluentform textarea,
.cmb-quote-popup .fluentform textarea:hover,
.cmb-quote-popup .fluentform textarea:focus,
.cmb-quote-popup .fluentform textarea:active{
  overflow:hidden !important;
  overflow-y:hidden !important;
  scrollbar-width:none !important;
}

.cmb-quote-popup .fluentform textarea::-webkit-scrollbar{
  display:none !important;
}/* End custom CSS */