/* Noran Leads — request form (Design 4: iconic fields on a colored gradient) */
:root{
  --nl-navy:#023047; --nl-navy2:#012a4a; --nl-blue:#0077b6; --nl-blue2:#0096c7; --nl-cyan:#00b4d8;
  --nl-or:#ff9100; --nl-or2:#ff6d00; --nl-ink:#023047; --nl-muted:#5f7187; --nl-line:#e2eef5; --nl-wa:#25d366;
}

/* Request button (default styling; theme can override) */
.nl-request-btn{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  font-family:"Cairo",system-ui,sans-serif;font-weight:800;font-size:.98rem;
  background:linear-gradient(120deg,var(--nl-or),var(--nl-or2));color:#fff;border:none;
  padding:12px 24px;border-radius:999px;transition:transform .2s,box-shadow .2s;
}
.nl-request-btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(255,109,0,.4)}
.nl-request-btn::before{content:"✦";font-size:.85em}

/* Modal shell */
.nl-modal{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;padding:20px}
.nl-modal.is-open{display:flex}
.nl-modal__overlay{position:absolute;inset:0;background:rgba(1,42,74,.6);backdrop-filter:blur(4px);animation:nlFade .25s}

/* Colored gradient dialog */
.nl-modal__dialog{
  position:relative;width:100%;max-width:480px;border-radius:24px;padding:34px 30px 30px;
  background:linear-gradient(150deg,var(--nl-navy2),var(--nl-blue) 60%,var(--nl-cyan));
  box-shadow:0 30px 80px rgba(1,42,74,.5);animation:nlPop .3s cubic-bezier(.2,.9,.3,1.2);overflow:hidden;color:#fff
}
.nl-modal__dialog::after{content:"";position:absolute;width:280px;height:280px;border-radius:50%;border:34px solid rgba(255,255,255,.06);top:-130px;left:-90px;pointer-events:none}
.nl-form--inline{
  position:relative;border-radius:24px;padding:30px;
  background:linear-gradient(150deg,var(--nl-navy2),var(--nl-blue) 60%,var(--nl-cyan));
  color:#fff;box-shadow:0 18px 50px rgba(1,42,74,.28);overflow:hidden
}
.nl-modal__close{position:absolute;top:14px;inset-inline-start:16px;z-index:3;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;font-size:22px;line-height:1;cursor:pointer;border:none;transition:.2s}
.nl-modal__close:hover{background:#fff;color:var(--nl-navy);transform:rotate(90deg)}

/* Head */
.nl-modal__head{text-align:center;margin-bottom:22px;position:relative;z-index:2}
.nl-ring{width:62px;height:62px;border-radius:50%;background:linear-gradient(135deg,var(--nl-or),var(--nl-or2));display:grid;place-items:center;margin:0 auto 12px;box-shadow:0 12px 26px rgba(255,109,0,.4)}
.nl-ring svg{width:30px;height:30px;color:#fff}
.nl-modal__head h3{font-family:"Cairo",system-ui,sans-serif;font-weight:900;color:#fff;font-size:1.5rem;margin:0 0 4px}
.nl-modal__head p{color:rgba(255,255,255,.85);margin:0;font-size:.96rem;font-family:"Tajawal",system-ui,sans-serif}

/* Iconic fields */
.nl-form{position:relative;z-index:2}
.nl-ifield{position:relative;margin-bottom:14px}
.nl-ifield .nl-chip{position:absolute;top:50%;inset-inline-start:8px;transform:translateY(-50%);width:44px;height:44px;border-radius:13px;display:grid;place-items:center;color:#fff;pointer-events:none}
.nl-ifield .nl-chip svg{width:20px;height:20px}
.nl-ifield.nl-c1 .nl-chip{background:var(--nl-blue)}
.nl-ifield.nl-c2 .nl-chip{background:var(--nl-cyan)}
.nl-ifield.nl-c3 .nl-chip{background:var(--nl-or)}
.nl-ifield input,.nl-ifield select{
  width:100%;box-sizing:border-box;font-family:"Tajawal",system-ui,sans-serif;font-size:1rem;font-weight:500;color:var(--nl-ink);
  background:#fff;border:2px solid transparent;border-radius:15px;padding:17px 16px 17px 64px;transition:border-color .2s,box-shadow .2s;
}
.nl-ifield select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236a8295' stroke-width='2.5' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>");background-repeat:no-repeat;background-position:left 18px center}
.nl-ifield input::placeholder{color:var(--nl-muted)}
.nl-ifield input:focus,.nl-ifield select:focus{outline:none;border-color:var(--nl-or);box-shadow:0 0 0 4px rgba(255,145,0,.25)}

/* Submit */
.nl-submit{position:relative;z-index:2;width:100%;margin-top:6px;display:flex;align-items:center;justify-content:center;gap:10px;
  background:linear-gradient(120deg,var(--nl-or),var(--nl-or2));color:#fff;font-family:"Cairo",system-ui,sans-serif;font-weight:800;font-size:1.08rem;
  border:none;border-radius:15px;padding:16px;cursor:pointer;transition:transform .2s,box-shadow .2s;box-shadow:0 12px 28px rgba(255,109,0,.34)}
.nl-submit:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(255,109,0,.46)}
.nl-submit:disabled{opacity:.7;cursor:default;transform:none}
.nl-spinner{width:18px;height:18px;border:2.5px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;animation:nlSpin .7s linear infinite}

/* Feedback */
.nl-feedback{position:relative;z-index:2;margin:14px 0 0;text-align:center;font-family:"Cairo",system-ui,sans-serif;font-weight:700;font-size:.95rem;color:#fff}
.nl-feedback.is-error{color:#ffd5cc}
.nl-feedback.is-success{color:#eafff5;font-size:1.05rem}

/* Honeypot */
.nl-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

@keyframes nlFade{from{opacity:0}to{opacity:1}}
@keyframes nlPop{from{opacity:0;transform:translateY(20px) scale(.97)}to{opacity:1;transform:none}}
@keyframes nlSpin{to{transform:rotate(360deg)}}

@media(max-width:480px){.nl-modal__dialog,.nl-form--inline{padding:26px 20px}}

/* PDPL consent + Turnstile */
.nl-consent{position:relative;z-index:2;margin:12px 0 0;text-align:center;font-size:.78rem;line-height:1.6;color:rgba(255,255,255,.8);font-family:"Tajawal",system-ui,sans-serif}
.nl-consent a{color:#fff;text-decoration:underline}
.cf-turnstile{position:relative;z-index:2;margin:10px 0 4px;display:flex;justify-content:center}