.elementor-kit-10863{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-10863 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* ============================================================================
   DreamLife Recovery — 01. HERO "Verify Insurance Now" card
   Elementor Pro Form widget skin
   ----------------------------------------------------------------------------
   WHERE TO PUT THIS
     Elementor → Site Settings → Custom CSS   (applies site-wide)
     or Appearance → Customize → Additional CSS
     or the page's Advanced → Custom CSS

   HOW TO SWITCH IT ON
     Put the Heading + Text + Form widgets inside one Container, then give
     THAT CONTAINER the CSS class:   dl-verify
     (select the Container → Advanced tab → CSS Classes → type dl-verify)

     Optional classes on the widgets inside it:
       dl-verify__title     the "Verify Insurance Now" Heading widget
       dl-verify__sub       the "100% Confidential · ..." Text Editor widget
       dl-verify__consent   the "By submitting, ..." Text Editor widget

     Putting dl-verify on the Form widget instead also works — you just get
     the card around the form only, with the heading sitting outside it.

   NOTHING CHANGED?
     - The class belongs on the Container, not on the Form widget's parent
       column, and it is typed without a dot: dl-verify
     - Check the CSS actually saved in Site Settings → Custom CSS, then hard
       reload (Elementor caches generated CSS aggressively; Elementor →
       Tools → Regenerate CSS & Data clears it)
     - Set Figtree as the global font, or the card falls back to the theme's

   NOTES ON THE FIELDS
     - "Looking for help for..." is styled for a Radio field and a Checkbox
       field alike, but Radio is the correct one: the two answers are
       mutually exclusive, and a checkbox lets someone tick both.
     - A Textarea field (a Message box, say) is styled to match; it is not
       in the original design, so remove it if you want the design exactly.

   CUSTOMISING
     Everything is driven by the variables in the first block. Change a value
     there and it updates everywhere it is used — no need to hunt through
     the rules below.

     Anything you would rather drive from Elementor's own Style tab: delete
     that rule here. The !important flags exist only because Elementor prints
     its Style-tab defaults at a higher specificity than a stylesheet can
     reach; without them the widget defaults win.
   ========================================================================= */

.dl-verify{
  /* ---- colour ---- */
  --dl-blue:#1B4E8A;            /* headings, focus ring, submit button      */
  --dl-blue-dark:#153E70;       /* submit button hover                      */
  --dl-ink:#182D47;             /* labels and typed text                    */
  --dl-muted:#59687B;           /* the sub-line under the title             */
  --dl-muted-2:#818C9A;         /* consent line                             */
  --dl-placeholder:#A9B1BC;
  --dl-line:#E5E8EC;            /* field border                             */
  --dl-line-hover:#B9C6D8;
  --dl-field-bg:#FFFFFF;
  --dl-card-bg:#FFFFFF;
  --dl-error:#D8503F;

  /* ---- card ---- */
  --dl-card-radius:20px;
  --dl-card-pad:36px 34px 30px;
  --dl-card-shadow:0 18px 48px rgba(10,25,50,.18);

  /* ---- type ---- */
  --dl-font:'Figtree','Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --dl-title-size:26px;
  --dl-title-weight:800;
  --dl-sub-size:15px;
  --dl-label-size:14px;
  --dl-label-weight:700;
  --dl-input-size:15px;
  --dl-button-size:17px;
  --dl-consent-size:13px;

  /* ---- fields ---- */
  --dl-field-radius:12px;
  --dl-field-pad-y:14px;
  --dl-field-pad-x:15px;
  --dl-field-border:1.5px;
  --dl-row-gap:16px;            /* vertical gap between field rows          */
  --dl-col-gap:18px;            /* horizontal gap between two-up fields     */
  --dl-label-gap:8px;           /* label → input                            */
  --dl-form-gap:26px;           /* sub-line → first field                   */

  /* ---- button ---- */
  --dl-button-radius:12px;
  --dl-button-pad:18px 24px;

  /* ---- the card itself ---- */
  background:var(--dl-card-bg);
  border-radius:var(--dl-card-radius);
  padding:var(--dl-card-pad);
  box-shadow:var(--dl-card-shadow);
  font-family:var(--dl-font);
}

/* ---------------------------------------------------------------------------
   1. TITLE / SUB-LINE / CONSENT
   Delete this block if you would rather style these three widgets from the
   Elementor Style tab.
   ------------------------------------------------------------------------ */
.dl-verify .dl-verify__title,
.dl-verify .dl-verify__title .elementor-heading-title{
  font-family:var(--dl-font);
  font-size:var(--dl-title-size);
  font-weight:var(--dl-title-weight);
  line-height:1.2;
  letter-spacing:-.015em;
  color:var(--dl-blue);
  margin:0;
}
.dl-verify .dl-verify__sub,
.dl-verify .dl-verify__sub p{
  font-size:var(--dl-sub-size);
  line-height:1.5;
  color:var(--dl-muted);
  margin:8px 0 0;
}
.dl-verify .elementor-widget-form{
  margin-top:var(--dl-form-gap);
}
.dl-verify .dl-verify__consent,
.dl-verify .dl-verify__consent p{
  font-size:var(--dl-consent-size);
  line-height:1.55;
  color:var(--dl-muted-2);
  margin:16px 0 0;
}

/* ---------------------------------------------------------------------------
   2. FIELD GRID
   Elementor lays fields out with elementor-col-50 / -100. These only set the
   gaps between them; keep using the widget's Column Width control per field.
   ------------------------------------------------------------------------ */
.dl-verify .elementor-form-fields-wrapper{
  margin:0 calc(var(--dl-col-gap) / -2);
  row-gap:var(--dl-row-gap);
}
.dl-verify .elementor-field-group{
  box-sizing:border-box;        /* the 50/50 columns break without this */
  padding-inline:calc(var(--dl-col-gap) / 2);
  margin-bottom:0 !important;   /* row-gap above handles vertical rhythm */
}
.dl-verify .elementor-field-group > *{box-sizing:border-box}
.dl-verify .elementor-field-group > .elementor-field-label{
  font-family:var(--dl-font);
  font-size:var(--dl-label-size) !important;
  font-weight:var(--dl-label-weight) !important;
  line-height:1.3;
  color:var(--dl-ink) !important;
  margin-bottom:var(--dl-label-gap);
  padding:0;
}
/* the required asterisk — Elementor prints it red by default */
.dl-verify .elementor-mark-required .elementor-field-label:after{
  content:'*';
  color:var(--dl-ink);
  padding-inline-start:.25em;
}

/* ---------------------------------------------------------------------------
   3. TEXT / TEL / DATE / EMAIL / TEXTAREA / SELECT
   ------------------------------------------------------------------------ */
.dl-verify .elementor-field-textual{
  width:100%;
  min-height:0;
  padding:var(--dl-field-pad-y) var(--dl-field-pad-x) !important;
  border:var(--dl-field-border) solid var(--dl-line) !important;
  border-radius:var(--dl-field-radius) !important;
  background-color:var(--dl-field-bg) !important;
  font-family:var(--dl-font);
  font-size:var(--dl-input-size) !important;
  line-height:1.4;
  color:var(--dl-ink) !important;
  box-shadow:none;
  transition:border-color .2s cubic-bezier(.4,0,.2,1),
             box-shadow .2s cubic-bezier(.4,0,.2,1),
             background-color .2s cubic-bezier(.4,0,.2,1);
}
.dl-verify .elementor-field-textual::placeholder{
  color:var(--dl-placeholder) !important;
  opacity:1;
}
.dl-verify .elementor-field-textual:hover{
  border-color:var(--dl-line-hover) !important;
}
.dl-verify .elementor-field-textual:focus{
  outline:none;
  border-color:var(--dl-blue) !important;
  box-shadow:0 0 0 3px rgba(27,78,138,.13) !important;
}
.dl-verify textarea.elementor-field-textual{
  min-height:120px;
  resize:vertical;
}

/* select — Elementor wraps it and injects its own arrow, which we hide */
.dl-verify .elementor-select-wrapper{
  position:relative;
  width:100%;
}
.dl-verify .elementor-select-wrapper select{width:100%}
.dl-verify .elementor-select-wrapper::before,
.dl-verify .elementor-select-wrapper .e-font-icon-svg-container,
.dl-verify .elementor-select-wrapper .elementor-select-caret-down-wrapper{
  display:none !important;
}
/* grey until something is chosen, matching the placeholder colour */
.dl-verify .elementor-select-wrapper select:invalid,
.dl-verify .elementor-select-wrapper select:has(option[value='']:checked){
  color:var(--dl-placeholder) !important;
}

/* ---------------------------------------------------------------------------
   4. CHOICE GROUP — "Looking for help for..."
   Turns Elementor's inline options into the two bordered boxes from the design.
   Works for a Radio field or a Checkbox field. Radio is the right one here —
   the two answers are mutually exclusive — so set the field Type to Radio,
   Inline List = Yes, Column Width = 100%.
   ------------------------------------------------------------------------ */
.dl-verify .elementor-field-type-radio .elementor-field-subgroup,
.dl-verify .elementor-field-type-checkbox .elementor-field-subgroup{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  width:100%;
}
.dl-verify .elementor-field-type-radio .elementor-field-option,
.dl-verify .elementor-field-type-checkbox .elementor-field-option{
  position:relative;
  display:block;
  margin:0;
}
.dl-verify .elementor-field-type-radio .elementor-field-option input,
.dl-verify .elementor-field-type-checkbox .elementor-field-option input{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  margin:0;
  opacity:0;
  cursor:pointer;
  z-index:2;
}
.dl-verify .elementor-field-type-radio .elementor-field-option label,
.dl-verify .elementor-field-type-checkbox .elementor-field-option label{
  display:flex;
  align-items:center;
  gap:12px;
  margin:0;
  padding:13px 16px;
  border:var(--dl-field-border) solid var(--dl-line);
  border-radius:var(--dl-field-radius);
  background:#fff;
  font-size:var(--dl-input-size);
  font-weight:700;
  color:var(--dl-ink);
  cursor:pointer;
  transition:border-color .2s cubic-bezier(.4,0,.2,1),
             background-color .2s cubic-bezier(.4,0,.2,1),
             box-shadow .2s cubic-bezier(.4,0,.2,1);
}
/* the ring */
.dl-verify .elementor-field-type-radio .elementor-field-option label:before,
.dl-verify .elementor-field-type-checkbox .elementor-field-option label:before{
  content:'';
  flex:none;
  width:20px;
  height:20px;
  border-radius:50%;
  border:2.5px solid #B9C0CB;
  transition:border-color .2s cubic-bezier(.4,0,.2,1);
}
/* the dot inside it */
.dl-verify .elementor-field-type-radio .elementor-field-option label:after,
.dl-verify .elementor-field-type-checkbox .elementor-field-option label:after{
  content:'';
  position:absolute;
  left:22px;
  top:50%;
  width:11px;
  height:11px;
  margin-top:-5.5px;
  border-radius:50%;
  background:var(--dl-blue);
  transform:scale(0);
  transition:transform .18s cubic-bezier(.4,0,.2,1);
}
.dl-verify .elementor-field-type-radio .elementor-field-option label:hover,
.dl-verify .elementor-field-type-checkbox .elementor-field-option label:hover{
  border-color:var(--dl-line-hover);
  background:#FBFCFE;
}
.dl-verify .elementor-field-type-radio input:checked + label,
.dl-verify .elementor-field-type-checkbox input:checked + label{
  border-color:var(--dl-blue);
  background:#F4F8FD;
  box-shadow:0 0 0 3px rgba(27,78,138,.08);
}
.dl-verify .elementor-field-type-radio input:checked + label:before,
.dl-verify .elementor-field-type-checkbox input:checked + label:before{
  border-color:var(--dl-blue);
}
.dl-verify .elementor-field-type-radio input:checked + label:after,
.dl-verify .elementor-field-type-checkbox input:checked + label:after{
  transform:scale(1);
}
.dl-verify .elementor-field-type-radio input:focus-visible + label,
.dl-verify .elementor-field-type-checkbox input:focus-visible + label{
  outline:3px solid rgba(27,78,138,.45);
  outline-offset:2px;
}

/* ---------------------------------------------------------------------------
   5. SUBMIT BUTTON
   ------------------------------------------------------------------------ */
.dl-verify .elementor-field-type-submit{
  margin-top:8px;
}
.dl-verify .elementor-field-type-submit .elementor-button{
  width:100%;
  justify-content:center;
  padding:var(--dl-button-pad) !important;
  border:0;
  border-radius:var(--dl-button-radius) !important;
  background-color:var(--dl-blue) !important;
  color:#fff !important;
  font-family:var(--dl-font);
  font-size:var(--dl-button-size) !important;
  font-weight:700 !important;
  line-height:1.1;
  letter-spacing:.005em;
  cursor:pointer;
  transition:background-color .22s cubic-bezier(.4,0,.2,1),
             transform .22s cubic-bezier(.4,0,.2,1),
             box-shadow .22s cubic-bezier(.4,0,.2,1);
}
.dl-verify .elementor-field-type-submit .elementor-button:hover{
  background-color:var(--dl-blue-dark) !important;
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(19,45,91,.22);
}
.dl-verify .elementor-field-type-submit .elementor-button:active{
  transform:translateY(0);
  box-shadow:0 3px 10px rgba(19,45,91,.18);
}
/* the arrow, if you add one as the button icon */
.dl-verify .elementor-button-content-wrapper{
  display:flex;
  align-items:center;
  gap:10px;
}
.dl-verify .elementor-align-icon-right{order:2}
.dl-verify .elementor-align-icon-left{order:0}
.dl-verify .elementor-button-icon{
  transition:transform .22s cubic-bezier(.4,0,.2,1);
}
.dl-verify .elementor-button:hover .elementor-button-icon{
  transform:translateX(4px);
}

/* ---------------------------------------------------------------------------
   6. VALIDATION + SUBMIT MESSAGES
   ------------------------------------------------------------------------ */
.dl-verify .elementor-field-group.elementor-error .elementor-field-textual{
  border-color:var(--dl-error) !important;
  background-color:#FEF7F6 !important;
}
.dl-verify .elementor-field-group.elementor-error .elementor-field-textual:focus{
  box-shadow:0 0 0 3px rgba(216,80,63,.14) !important;
}
.dl-verify .elementor-form .elementor-message{
  margin-top:16px;
  padding:14px 16px;
  border-radius:var(--dl-field-radius);
  font-family:var(--dl-font);
  font-size:14px;
  font-weight:600;
  line-height:1.5;
}
.dl-verify .elementor-form .elementor-message.elementor-message-danger{
  background:#FDF0EE;
  border:1px solid #F6D3CD;
  color:#B93A28;
}
.dl-verify .elementor-form .elementor-message.elementor-message-success{
  background:#E9F4EE;
  border:1px solid #C8E4D3;
  color:#1F7A4C;
}
.dl-verify .elementor-form .elementor-message:before{
  display:none;   /* Elementor's icon; the text carries it on its own */
}

/* ---------------------------------------------------------------------------
   7. RESPONSIVE
   Elementor already stacks columns at its own breakpoints — this only
   softens the card padding and drops the radio pair to one per row.
   ------------------------------------------------------------------------ */
@media (max-width:767px){
  .dl-verify{
    --dl-card-pad:28px 22px 26px;
    --dl-title-size:23px;
    --dl-button-size:16px;
  }
  .dl-verify .elementor-field-type-radio .elementor-field-subgroup,
.dl-verify .elementor-field-type-checkbox .elementor-field-subgroup{
    grid-template-columns:1fr;
  }
}

@media (prefers-reduced-motion:reduce){
  .dl-verify *{transition-duration:.01ms !important}
  .dl-verify .elementor-field-type-submit .elementor-button:hover{transform:none}
}

/* Fix Insurance Provider select text / placeholder clipping */
.dl-verify .elementor-select-wrapper select.elementor-field-textual {
    height: 52px !important;
    min-height: 52px !important;
    padding: 0 42px 0 15px !important;
    line-height: 52px !important;
    vertical-align: middle !important;
}

/* Placeholder/default option colour */
.dl-verify .elementor-select-wrapper select:invalid {
    color: var(--dl-placeholder) !important;
}

/* Selected option colour */
.dl-verify .elementor-select-wrapper select:valid {
    color: var(--dl-ink) !important;
}



/* Chat notification bubble - smaller & cleaner */
.ctm-chat-bubble {
    transform: scale(0.78) !important;
    transform-origin: bottom left !important;
    left: 12px !important;
    bottom: 78px !important;
}

/* Mobile */
@media screen and (max-width: 767px) {
    .ctm-chat-bubble {
        transform: scale(0.62) !important;
        transform-origin: bottom left !important;
        left: 8px !important;
        bottom: 70px !important;
    }
}


/* Hide chat widget completely on mobile */
@media screen and (max-width: 767px) {
    .ctm-chat-bubble,
    .ctm-call-widget {
        display: none !important;
    }
}


/* Hide chat + scroll-to-top button on mobile only */
@media screen and (max-width: 767px) {

    .ctm-chat-bubble,
    .ctm-call-widget,
    #ast-scroll-top {
        display: none !important;
    }

}/* End custom CSS */