/* Start custom CSS for shortcode, class: .elementor-element-846deb0 *//* ==========================================
   CLEVER FIRMS - MOBILE QUIZ INTRO FIX
   Client Reference Layout
   Mobile only - Desktop unchanged
========================================== */

@media (max-width: 700px) {

  /* Main intro container */
  .cfq-app .cfq-intro {
    width: 100% !important;
    max-width: 440px !important;
    margin: 0 auto !important;
    padding: 28px 20px 32px !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  /* Main heading */
  .cfq-app .cfq-intro h1 {
    width: 100% !important;
    max-width: 365px !important;
    margin: 0 auto 17px !important;
    padding: 0 !important;

    font-family: "League Spartan", sans-serif !important;
    font-size: 30px !important;
    font-weight: 800 !important;
    line-height: 1.12 !important;
    letter-spacing: -0.5px !important;
    text-align: center !important;
  }

  /* Remove forced desktop line break */
  .cfq-app .cfq-desktop-break {
    display: none !important;
  }

  /* Subtitle */
  .cfq-app .cfq-intro-sub {
    max-width: 365px !important;
    margin: 0 auto !important;
    padding: 0 !important;

    font-family: "Plus Jakarta Sans", sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    text-align: center !important;
    color: #595470 !important;
  }

  /* Three feature rows */
  .cfq-app .cfq-benefits {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;

    gap: 14px !important;
    margin: 28px auto 27px !important;
    padding: 0 !important;
  }

  /* Individual benefit */
  .cfq-app .cfq-benefit {
    display: grid !important;
    grid-template-columns: 58px minmax(0, 1fr) !important;
    align-items: center !important;
    column-gap: 16px !important;

    width: 100% !important;
    min-height: 58px !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
  }

  /* Icon boxes */
  .cfq-app .cfq-benefit-icon {
    display: grid !important;
    place-items: center !important;

    width: 58px !important;
    height: 58px !important;

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

    background: #F0EAFE !important;
    border-radius: 16px !important;
    color: #6D28D9 !important;
  }

  /* Icon size */
  .cfq-app .cfq-benefit-icon .cfq-svg {
    width: 30px !important;
    height: 30px !important;
  }

  /* Benefit descriptions */
  .cfq-app .cfq-benefit p {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;

    font-family: "Plus Jakarta Sans", sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;

    text-align: left !important;
    color: #211C3D !important;
    overflow-wrap: normal !important;
  }

  /* Natural text wrapping */
  .cfq-app .cfq-benefit p br {
    display: none !important;
  }

  /* Get Started button */
  .cfq-app .cfq-intro .cfq-start {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    max-width: 100% !important;
    min-height: 58px !important;

    margin: 0 auto !important;
    padding: 14px 18px !important;

    background: #6D28D9 !important;
    color: #FFFFFF !important;

    border: 0 !important;
    border-radius: 12px !important;

    font-family: "Plus Jakarta Sans", sans-serif !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;

    text-align: center !important;
    box-shadow: 0 8px 18px rgba(109,40,217,.16) !important;
  }

  /* Remove extra space from intro children */
  .cfq-app .cfq-intro > *:last-child {
    margin-bottom: 0 !important;
  }
}

/* Small mobile devices */
@media (max-width: 359px) {

  .cfq-app .cfq-intro {
    padding: 24px 17px 30px !important;
  }

  .cfq-app .cfq-intro h1 {
    font-size: 27px !important;
  }

  .cfq-app .cfq-intro-sub {
    font-size: 14px !important;
  }

  .cfq-app .cfq-benefit {
    grid-template-columns: 54px minmax(0, 1fr) !important;
    column-gap: 12px !important;
  }

  .cfq-app .cfq-benefit-icon {
    width: 54px !important;
    height: 54px !important;
  }

  .cfq-app .cfq-benefit p {
    font-size: 14px !important;
  }
}

/* CLEVER FIRMS - STEP 4 FOCUS BORDER FIX */

.elementor-31 .elementor-element.elementor-element-846deb0 .cfq-app .cfq-step-4 textarea:focus,
.elementor-31 .elementor-element.elementor-element-846deb0 .cfq-app .cfq-step-4 textarea:focus-visible {
    outline: none !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    border-color: transparent !important;
}

/* Remove extra focus ring from textarea wrapper */
.elementor-31 .elementor-element.elementor-element-846deb0 .cfq-app .cfq-step-4
div:has(> textarea:focus) {
    outline: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    border-color: transparent !important;
}

/* ==========================================
   CLEVER FIRMS - EXIT POPUP CLOSE BUTTON
   Client Feedback #25
========================================== */

/* Position relative to popup */
.elementor-31 .elementor-element.elementor-element-846deb0 .cfq-app .cfq-modal {
    position: relative !important;
}

/* Small, clean X in upper-right corner */
.elementor-31 .elementor-element.elementor-element-846deb0 .cfq-app .cfq-modal .cfq-modal-close {
    position: absolute !important;

    top: 26px !important;
    right: 26px !important;
    left: auto !important;
    bottom: auto !important;

    transform: none !important;
    translate: none !important;

    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;

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

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

    font-size: 20px !important;
    font-weight: 400 !important;
    line-height: 1 !important;

    color: #4B426B !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    cursor: pointer !important;
    z-index: 10 !important;
}

/* If close icon uses an SVG */
.elementor-31 .elementor-element.elementor-element-846deb0 .cfq-app .cfq-modal .cfq-modal-close svg {
    width: 18px !important;
    height: 18px !important;
    stroke: currentColor !important;
}

/* Prevent heading overlapping X */
.elementor-31 .elementor-element.elementor-element-846deb0 .cfq-app .cfq-modal h2 {
    padding-right: 40px !important;
}

/* Mobile */
@media (max-width: 700px) {

    .elementor-31 .elementor-element.elementor-element-846deb0 .cfq-app .cfq-modal .cfq-modal-close {
        top: 20px !important;
        right: 18px !important;

        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        min-height: 24px !important;

        font-size: 19px !important;
    }

    .elementor-31 .elementor-element.elementor-element-846deb0 .cfq-app .cfq-modal h2 {
        padding-right: 34px !important;
    }
}/* End custom CSS */