/* ==========================================================================
   United Press — Enquiry form promo panel (Ninja Form #2, HTML field 12)
   SINGLE SOURCE OF TRUTH for .up-lead-info presentation.

   Desktop (>=761px) : dark navy panel, left column of the two-column card.
   Mobile   (<=760px): burnt-orange promo card stacked above the form fields.

   Supersedes / replaces:
     - the previous contents of this snippet
     - WPCode "Enquiry panel orange background" (JS painter, now disabled)
     - Customizer > Additional CSS  @media(max-width:767px) .up-lead-info rules

   DO NOT reintroduce JavaScript that writes inline styles onto this panel —
   inline !important styles are what made this component unstylable before.
   Form fields, dropdowns, validation, submit and WhatsApp are untouched.
   ========================================================================== */

/* ---------------------------------------------------------------- shared - */
#nf-form-2-cont#nf-form-2-cont .up-lead-info{
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  max-width:100%;
  overflow-x:hidden;
  font-family:"Inter","Helvetica Neue",-apple-system,sans-serif;
}
#nf-form-2-cont#nf-form-2-cont .up-lead-info *{
  box-sizing:border-box;
  max-width:100%;
}

/* press logo strip — row counts are forced per breakpoint further down */
#nf-form-2-cont#nf-form-2-cont .up-lead-press-logos{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
}
#nf-form-2-cont#nf-form-2-cont .up-lead-press-logos img{
  display:block;
  width:100%;
  background:#fff;
  object-fit:contain;
}

/* AI chips — markup carries inline styles, so these need !important */
#nf-form-2-cont#nf-form-2-cont .up-lead-ai > div:last-child{
  display:flex !important;
  flex-wrap:wrap !important;
}
#nf-form-2-cont#nf-form-2-cont .up-lead-ai > div:last-child > span{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:#fff !important;
  border:1px solid #ece2cc !important;
  border-radius:999px !important;
  color:#1b1b1b !important;
  font-weight:600 !important;
  line-height:1 !important;
  white-space:nowrap;
}
#nf-form-2-cont#nf-form-2-cont .up-lead-ai > div:last-child > span img{
  flex:0 0 16px;
  width:16px !important;
  height:16px !important;
}

/* kill the legacy pulsing glow on the "As Featured In" card */
#nf-form-2-cont#nf-form-2-cont .up-lead-press{
  animation:none !important;
}

/* =============================================================== DESKTOP == */
@media (min-width:761px){

  #nf-form-2-cont#nf-form-2-cont .up-lead-info{
    background:#c2410c !important;
    color:#f5f0e6 !important;
    justify-content:center;
    height:100% !important;
    padding:22px 24px !important;
    gap:13px;
  }

  /* top badge */
  #nf-form-2-cont#nf-form-2-cont .up-lead-info .up-lead-badge{
    align-self:flex-start;
    display:inline-block;
    margin:0 !important;
    padding:7px 12px !important;
    white-space:nowrap !important;
    border-radius:999px;
    background:#0c1120 !important;
    color:#e9c884 !important;
    font-size:12px !important;
    font-weight:800 !important;
    letter-spacing:.10em !important;
    text-transform:uppercase;
    line-height:1.2;
    box-shadow:0 2px 10px rgba(0,0,0,.35);
  }

  /* heading + supporting copy */
  #nf-form-2-cont#nf-form-2-cont .up-lead-info h3.up-lead-heading{
    margin:0 !important;
    color:#fff !important;
    font-size:20px !important;
    line-height:1.25 !important;
    white-space:nowrap !important;
    overflow-wrap:normal !important;
    word-break:normal !important;
    font-weight:800 !important;
    letter-spacing:-.015em !important;
  }
  #nf-form-2-cont#nf-form-2-cont .up-lead-info.up-lead-info p.up-lead-sub{
    display:block !important;
    margin:0 !important;
    max-width:52ch;
    color:#c3ccdf !important;
    font-size:14px !important;
    line-height:1.55 !important;
    font-weight:400 !important;
  }

  /* "As Featured In" card */
  #nf-form-2-cont#nf-form-2-cont .up-lead-info .up-lead-press{
    margin:0 !important;
    padding:13px 12px !important;
    border:1.5px solid rgba(212,169,87,.40) !important;
    border-radius:10px !important;
    background:rgba(212,169,87,.08) !important;
    box-shadow:none !important;
  }
  #nf-form-2-cont#nf-form-2-cont .up-lead-press-label{
    display:block;
    margin:0 0 10px !important;
    color:#e9c884 !important;
    font-size:13px !important;
    font-weight:800 !important;
    letter-spacing:.12em !important;
    text-transform:uppercase;
  }
  #nf-form-2-cont#nf-form-2-cont .up-lead-press-logos{
    gap:7px;
    justify-content:flex-start;
  }
  /* row 1 = 4 logos, row 2 = 3 logos (matches target) */
  #nf-form-2-cont#nf-form-2-cont .up-lead-press-logos img{
    flex:0 0 calc((100% - 24px) / 4);
    height:48px !important;
    min-width:0 !important;
    max-width:none !important;
    padding:7px 7px !important;
    border-radius:6px !important;
    box-shadow:0 2px 6px rgba(0,0,0,.16) !important;
  }
  #nf-form-2-cont#nf-form-2-cont .up-lead-press-logos img:nth-child(n+5){
    flex-basis:calc((100% - 17px) / 3);
  }

  /* "Visible Across AI Search" */
  #nf-form-2-cont#nf-form-2-cont .up-lead-ai{
    margin:2px 0 0 !important;
  }
  #nf-form-2-cont#nf-form-2-cont .up-lead-ai > div:first-child{
    margin:0 0 10px !important;
    color:#e9c884 !important;
    font-size:12.5px !important;
    font-weight:800 !important;
    letter-spacing:.14em !important;
    text-transform:uppercase;
  }
  #nf-form-2-cont#nf-form-2-cont .up-lead-ai > div:last-child{
    gap:7px !important;
  }
  /* row 1 = 4 chips, row 2 = 3 chips (matches target) */
  #nf-form-2-cont#nf-form-2-cont .up-lead-ai > div:last-child > span{
    flex:0 0 calc((100% - 24px) / 4);
    padding:10px 7px !important;
    gap:5px !important;
    font-size:13px !important;
  }
  #nf-form-2-cont#nf-form-2-cont .up-lead-ai > div:last-child > span:nth-child(n+5){
    flex-basis:calc((100% - 17px) / 3);
  }

  /* 1 / 2 / 3 process steps */
  #nf-form-2-cont#nf-form-2-cont .up-lead-steps{
    display:flex !important;
    flex-direction:column;
    gap:12px !important;
    margin:2px 0 0 !important;
  }
  #nf-form-2-cont#nf-form-2-cont .up-lead-step{
    display:flex;
    align-items:flex-start;
    gap:11px;
  }
  #nf-form-2-cont#nf-form-2-cont .up-step-num{
    flex:0 0 24px;
    width:24px;
    height:24px;
    border-radius:50%;
    background:#d4a957 !important;
    background-image:none !important;
    color:#0a0e1a !important;
    font-size:12.5px !important;
    font-weight:800;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  #nf-form-2-cont#nf-form-2-cont .up-step-text{
    display:flex;
    flex-direction:column;
    gap:1px;
  }
  #nf-form-2-cont#nf-form-2-cont .up-step-text strong,
  #nf-form-2-cont#nf-form-2-cont .up-step-text b{
    color:#fff !important;
    font-size:15.5px !important;
    font-weight:700 !important;
    line-height:1.25;
  }
  #nf-form-2-cont#nf-form-2-cont .up-step-text span,
  #nf-form-2-cont#nf-form-2-cont .up-step-text small{
    color:#9aa0b5 !important;
    font-size:13.5px !important;
    font-weight:500 !important;
    line-height:1.25;
  }

  /* bottom trust line */
  #nf-form-2-cont#nf-form-2-cont .up-lead-risk{
    margin:4px 0 0 !important;
    padding-top:11px !important;
    border-top:1px solid rgba(255,255,255,.10);
    color:#9aa0b5 !important;
    font-size:13px !important;
    font-weight:500 !important;
  }
}

/* ================================================================ MOBILE == */
/* NOTE: the inline background that used to be hard-coded on .up-lead-info in
   the Ninja Forms HTML field is now stripped at render time by the PHP snippet
   "United Press - Strip inline background from enquiry panel (form 2)".
   If that snippet is ever disabled, the panel reverts to navy on mobile. */

@media (max-width:760px){

  /* keep the reassurance line under the button on ONE line (mobile only) */
  #nf-form-2-cont#nf-form-2-cont .up-below-btn-trust{
    display:flex !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    justify-content:center !important;
    gap:6px !important;
    white-space:nowrap !important;
    font-size:clamp(11px, 3.25vw, 14px) !important;
    line-height:1.4 !important;
    padding:0 4px 12px !important;
  }
  #nf-form-2-cont#nf-form-2-cont .up-below-btn-trust img.emoji{
    width:1em !important;
    height:1em !important;
    vertical-align:-0.12em !important;
  }

  /* tighter vertical rhythm between form fields on mobile (labels/inputs unchanged) */
  #nf-form-2-cont#nf-form-2-cont nf-fields-wrap > nf-field{
    padding:8px 18px !important;
  }

  /* let the promo card sit closer to the card edges, like the target */
  #nf-form-2-cont#nf-form-2-cont nf-fields-wrap > nf-field:has(.up-lead-info){
    padding:10px 10px 2px !important;
  }

  #nf-form-2-cont#nf-form-2-cont .up-lead-info{
    background:#c2410c !important;
    background-image:none !important;
    border-radius:16px !important;
    height:auto !important;
    padding:16px 14px 18px !important;
    gap:12px;
    color:#fff !important;
  }
  /* no !important here: AI chips keep their dark inline colour */
  #nf-form-2-cont#nf-form-2-cont .up-lead-info *{
    color:#fff;
  }

  /* top badge stays visible on mobile (target design) */
  #nf-form-2-cont#nf-form-2-cont .up-lead-info .up-lead-badge{
    display:inline-flex !important;
    align-self:flex-start;
    margin:0 !important;
    padding:6px 10px !important;
    white-space:nowrap !important;
    border-radius:999px;
    background:#0c1120 !important;
    color:#e9c884 !important;
    font-size:min(11px, 2.3vw) !important;
    font-weight:800 !important;
    letter-spacing:.04em !important;
    text-transform:uppercase;
    line-height:1.3;
  }

  #nf-form-2-cont#nf-form-2-cont .up-lead-info h3.up-lead-heading{
    margin:0 !important;
    color:#fff !important;
    font-size:min(20px, 3.8vw) !important;
    line-height:1.3 !important;
    white-space:nowrap !important;
    overflow-wrap:normal !important;
    word-break:normal !important;
    font-weight:800 !important;
    letter-spacing:-.01em !important;
  }
  /* target mobile goes straight from heading to the press card */
  #nf-form-2-cont#nf-form-2-cont .up-lead-info.up-lead-info p.up-lead-sub{
    display:none !important;
  }

  /* "As Featured In" card — translucent on the orange */
  #nf-form-2-cont#nf-form-2-cont .up-lead-info .up-lead-press{
    margin:0 !important;
    padding:12px 10px 14px !important;
    border:1px solid rgba(255,255,255,.30) !important;
    border-radius:14px !important;
    background:rgba(255,255,255,.12) !important;
    box-shadow:none !important;
  }
  #nf-form-2-cont#nf-form-2-cont .up-lead-press-label{
    display:block;
    margin:0 0 12px !important;
    color:#fff !important;
    font-size:15px !important;
    font-weight:700 !important;
    letter-spacing:0 !important;
    text-transform:none !important;
  }
  #nf-form-2-cont#nf-form-2-cont .up-lead-press-label::before{
    content:"📰 ";
  }
  #nf-form-2-cont#nf-form-2-cont .up-lead-press-logos{
    gap:8px;
    justify-content:flex-start;
  }
  /* row 1 = 3 logos, then rows of 2 (matches target) */
  #nf-form-2-cont#nf-form-2-cont .up-lead-press-logos img{
    flex:0 0 auto !important;
    width:auto !important;
    height:52px !important;
    max-height:none !important;
    max-width:none !important;
    padding:8px 10px !important;
    border-radius:10px !important;
    box-shadow:0 2px 8px rgba(0,0,0,.14) !important;
  }
  #nf-form-2-cont#nf-form-2-cont .up-lead-press-logos img:nth-child(n+4){
    flex-basis:auto;
  }

  /* "Visible Across AI Search" */
  #nf-form-2-cont#nf-form-2-cont .up-lead-ai{
    margin:0 !important;
  }
  #nf-form-2-cont#nf-form-2-cont .up-lead-ai > div:first-child{
    margin:0 0 10px !important;
    color:#ffd9a0 !important;
    font-size:12px !important;
    font-weight:800 !important;
    letter-spacing:.14em !important;
    text-transform:uppercase;
  }
  #nf-form-2-cont#nf-form-2-cont .up-lead-ai > div:last-child{
    gap:7px !important;
  }
  /* rows of 3 (matches target) */
  #nf-form-2-cont#nf-form-2-cont .up-lead-ai > div:last-child > span{
    flex:0 0 auto !important;
    padding:9px 11px !important;
    gap:6px !important;
    font-size:12px !important;
  }

  /* process steps are desktop-only in the target design */
  #nf-form-2-cont#nf-form-2-cont .up-lead-steps{
    display:none !important;
  }

  #nf-form-2-cont#nf-form-2-cont .up-lead-risk{
    margin:0 !important;
    padding-top:10px !important;
    border-top:1px solid rgba(255,255,255,.30) !important;
    color:#fff !important;
    font-size:11.5px !important;
    font-weight:600 !important;
    line-height:1.45;
  }
  #nf-form-2-cont#nf-form-2-cont .up-lead-risk::before{
    content:"✅ ";
  }
}

/* ============================================== TABLET / INTERMEDIATE ===== */
/* Between 761px and 980px the navy column is narrow — drop the logo and chip
   grids to 3-up so nothing is squeezed or forced to overflow.               */
@media (min-width:761px) and (max-width:980px){
  #nf-form-2-cont#nf-form-2-cont .up-lead-info{
    padding:14px 16px !important;
    gap:8px;
  }
  #nf-form-2-cont#nf-form-2-cont .up-lead-info h3.up-lead-heading{
    font-size:clamp(14px, 2.1vw, 20px) !important;
    white-space:nowrap !important;
  }
  #nf-form-2-cont#nf-form-2-cont .up-lead-info.up-lead-info p.up-lead-sub{
    font-size:12px !important;
  }
  #nf-form-2-cont#nf-form-2-cont .up-lead-press-logos img,
  #nf-form-2-cont#nf-form-2-cont .up-lead-press-logos img:nth-child(n+5){
    flex-basis:calc((100% - 17px) / 3);
    height:30px !important;
  }
  #nf-form-2-cont#nf-form-2-cont .up-lead-ai > div:last-child > span,
  #nf-form-2-cont#nf-form-2-cont .up-lead-ai > div:last-child > span:nth-child(n+5){
    flex-basis:calc((100% - 17px) / 3);
    font-size:11px !important;
    padding:7px 4px !important;
  }
}


/* up-lead-textfix: readable panel text on orange (desktop only) */
@media (min-width:761px){
#nf-form-2-cont#nf-form-2-cont .up-lead-info.up-lead-info p.up-lead-sub{color:#ffffff !important;}
#nf-form-2-cont#nf-form-2-cont .up-lead-info .up-step-text span{color:rgba(255,255,255,.92) !important;}
#nf-form-2-cont#nf-form-2-cont .up-lead-info.up-lead-info .up-lead-risk{color:rgba(255,255,255,.85) !important;}
}