/* ============================================================
   Filer Pakistan — Universal Registration Step Form (wizard)
   Namespaced .fpw-* so it never collides with page styles.
   ============================================================ */
.fpw-root{--fpw-green:#0E7A4E;--fpw-dark:#095C3A;--fpw-glow:#5EE8A4;--fpw-ink:#0C0D0F;--fpw-ink2:#4A4F5A;--fpw-ink3:#8A909B;--fpw-line:#E4E6EA;--fpw-light:#E8F5EE;--fpw-grad:linear-gradient(135deg,#1A9E66,#0E7A4E 60%,#095C3A);font-family:'Inter',system-ui,sans-serif}

/* overlay */
.fpw-overlay{position:fixed;inset:0;z-index:5000;background:rgba(6,20,13,.55);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;visibility:hidden;transition:opacity .28s ease,visibility .28s}
.fpw-overlay.open{opacity:1;visibility:visible}

/* modal card */
.fpw-modal{position:relative;width:100%;max-width:920px;max-height:92vh;background:#fff;border-radius:22px;overflow:hidden;display:grid;grid-template-columns:260px 1fr;box-shadow:0 40px 100px rgba(0,0,0,.4);transform:translateY(24px) scale(.98);opacity:0;transition:transform .32s cubic-bezier(.22,1,.36,1),opacity .32s}
.fpw-overlay.open .fpw-modal{transform:none;opacity:1}

/* left rail */
.fpw-rail{background:#06140D;color:#fff;padding:28px 24px;position:relative;overflow:hidden;display:flex;flex-direction:column}
.fpw-rail::before{content:'';position:absolute;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(14,122,78,.6),transparent 70%);top:-120px;left:-80px}
.fpw-rail-brand{font-family:'Bricolage Grotesque','Inter',sans-serif;font-weight:700;font-size:17px;position:relative;z-index:1;margin-bottom:30px;display:flex;align-items:center;gap:7px}
.fpw-rail-brand em{color:var(--fpw-glow);font-style:normal}
.fpw-steps{position:relative;z-index:1;display:flex;flex-direction:column;gap:4px;flex:1}
.fpw-srow{display:flex;align-items:center;gap:12px;padding:9px 0;opacity:.5;transition:opacity .25s}
.fpw-srow.active,.fpw-srow.done{opacity:1}
.fpw-sdot{width:30px;height:30px;border-radius:50%;border:1.5px solid rgba(255,255,255,.3);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0;transition:all .25s;font-family:'Bricolage Grotesque','Inter',sans-serif}
.fpw-srow.active .fpw-sdot{background:var(--fpw-grad);border-color:transparent}
.fpw-srow.done .fpw-sdot{background:var(--fpw-glow);border-color:transparent;color:#06140D}
.fpw-slabel{font-size:13.5px;font-weight:500;color:rgba(255,255,255,.85)}
.fpw-rail-foot{position:relative;z-index:1;margin-top:20px;border-top:1px solid rgba(255,255,255,.1);padding-top:16px}
.fpw-trust{display:flex;align-items:center;gap:8px;font-size:12px;color:rgba(255,255,255,.55);margin-bottom:8px}
.fpw-trust span{color:var(--fpw-glow)}

/* right body */
.fpw-body{display:flex;flex-direction:column;overflow:hidden}
.fpw-progress{height:4px;background:var(--fpw-line);flex-shrink:0}
.fpw-progress-fill{height:100%;background:var(--fpw-grad);width:25%;transition:width .35s cubic-bezier(.22,1,.36,1)}
.fpw-close{position:absolute;top:16px;right:18px;z-index:3;background:rgba(255,255,255,.9);border:1px solid var(--fpw-line);width:34px;height:34px;border-radius:50%;cursor:pointer;font-size:18px;line-height:1;color:var(--fpw-ink2);display:flex;align-items:center;justify-content:center;transition:all .15s}
.fpw-close:hover{background:#fff;color:var(--fpw-ink);transform:rotate(90deg)}
.fpw-scroll{padding:34px 36px 28px;overflow-y:auto}
.fpw-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.fpw-stepno{font-size:12px;font-weight:700;color:var(--fpw-green);letter-spacing:.4px}
.fpw-reassure{font-size:12px;color:var(--fpw-ink3)}
.fpw-h{font-family:'Bricolage Grotesque','Inter',sans-serif;font-size:23px;font-weight:700;letter-spacing:-.02em;line-height:1.2;margin-bottom:6px;color:var(--fpw-ink)}
.fpw-sub{font-size:14px;color:var(--fpw-ink3);margin-bottom:22px;line-height:1.6}

/* step panes slide */
.fpw-pane{display:none;animation:fpwSlide .35s cubic-bezier(.22,1,.36,1)}
.fpw-pane.show{display:block}
@keyframes fpwSlide{from{opacity:0;transform:translateX(22px)}to{opacity:1;transform:none}}
@keyframes fpwSlideBack{from{opacity:0;transform:translateX(-22px)}to{opacity:1;transform:none}}
.fpw-pane.back{animation:fpwSlideBack .35s cubic-bezier(.22,1,.36,1)}

/* option cards */
.fpw-opts{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:8px}
.fpw-opt{border:1.5px solid var(--fpw-line);border-radius:14px;padding:18px 16px;cursor:pointer;display:flex;align-items:center;gap:13px;transition:all .18s;background:#fff;text-align:left;position:relative}
.fpw-opt:hover{border-color:var(--fpw-green);transform:translateY(-2px);box-shadow:0 8px 22px rgba(14,122,78,.12)}
.fpw-opt.sel{border-color:var(--fpw-green);background:var(--fpw-light)}
.fpw-opt.sel::after{content:'✓';position:absolute;top:10px;right:12px;width:20px;height:20px;background:var(--fpw-grad);color:#fff;border-radius:50%;font-size:12px;display:flex;align-items:center;justify-content:center;font-weight:700}
.fpw-opt-ico{font-size:26px;flex-shrink:0}
.fpw-opt-t{font-size:14.5px;font-weight:600;color:var(--fpw-ink)}
.fpw-opt-p{font-size:12.5px;color:var(--fpw-ink3);margin-top:1px}

/* fields */
.fpw-field{margin-bottom:16px}
.fpw-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fpw-field label{display:block;font-size:12px;font-weight:600;color:var(--fpw-ink2);text-transform:uppercase;letter-spacing:.3px;margin-bottom:6px}
.fpw-field input,.fpw-field select,.fpw-field textarea{width:100%;padding:12px 14px;border:1.5px solid var(--fpw-line);border-radius:10px;font-size:14.5px;font-family:inherit;color:var(--fpw-ink);background:#fff;outline:none;transition:border .15s,box-shadow .15s}
.fpw-field input:focus,.fpw-field select:focus,.fpw-field textarea:focus{border-color:var(--fpw-green);box-shadow:0 0 0 3px rgba(14,122,78,.12)}
.fpw-field input.ok{border-color:var(--fpw-green)}
.fpw-field input.bad{border-color:#DC2626}
.fpw-field textarea{resize:vertical;min-height:84px}
.fpw-err{display:none;font-size:12px;color:#DC2626;margin-top:5px}
.fpw-err.show{display:block}
.fpw-hint{font-size:11.5px;color:var(--fpw-ink3);text-align:center;margin-top:6px}
.fpw-optional{font-size:12px;font-weight:600;color:var(--fpw-ink3);text-transform:none}

/* review */
.fpw-summary{background:var(--fpw-light);border:1px solid #C8E6D4;border-radius:14px;padding:18px;margin-bottom:18px}
.fpw-srow2{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid #C8E6D4;font-size:14px}
.fpw-srow2:last-child{border-bottom:none}
.fpw-srow2 .k{color:var(--fpw-ink2)}
.fpw-srow2 .v{font-weight:600;color:var(--fpw-ink);text-align:right}
.fpw-srow2 .v.price{font-size:17px;color:var(--fpw-green);font-family:'Bricolage Grotesque','Inter',sans-serif}

/* footer buttons */
.fpw-foot{display:flex;gap:10px;align-items:center;margin-top:8px}
.fpw-btn{padding:13px 22px;border-radius:11px;font-size:14.5px;font-weight:600;cursor:pointer;font-family:inherit;border:none;transition:all .18s;display:inline-flex;align-items:center;gap:7px;justify-content:center}
.fpw-next{background:var(--fpw-grad);color:#fff;flex:1;box-shadow:0 8px 22px rgba(14,122,78,.28)}
.fpw-next:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(14,122,78,.38)}
.fpw-back{background:#fff;border:1.5px solid var(--fpw-line);color:var(--fpw-ink2)}
.fpw-back:hover{border-color:var(--fpw-ink3);color:var(--fpw-ink)}
.fpw-skip{display:block;text-align:center;font-size:13px;color:var(--fpw-ink3);text-decoration:underline;margin-top:14px;cursor:pointer;background:none;border:none;width:100%;font-family:inherit}
.fpw-wa{display:block;text-align:center;margin-top:14px;padding-top:14px;border-top:1px solid var(--fpw-line);font-size:13px;font-weight:600;color:#128C7E;text-decoration:none}

/* success */
.fpw-success{text-align:center;padding:14px 0}
.fpw-check{width:78px;height:78px;margin:0 auto 18px}
.fpw-check circle{stroke:var(--fpw-green);stroke-width:3;fill:none;stroke-dasharray:170;stroke-dashoffset:170;animation:fpwDraw .6s ease forwards}
.fpw-check path{stroke:var(--fpw-green);stroke-width:4;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:50;stroke-dashoffset:50;animation:fpwDraw .4s .5s ease forwards}
@keyframes fpwDraw{to{stroke-dashoffset:0}}
.fpw-timeline{text-align:left;max-width:320px;margin:20px auto 0;display:flex;flex-direction:column;gap:0}
.fpw-tl{display:flex;gap:12px;align-items:flex-start;padding:10px 0}
.fpw-tl-dot{width:22px;height:22px;border-radius:50%;background:var(--fpw-light);color:var(--fpw-green);font-size:11px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-weight:700;border:1px solid #C8E6D4}
.fpw-tl-t{font-size:13.5px;font-weight:600;color:var(--fpw-ink)}
.fpw-tl-d{font-size:12.5px;color:var(--fpw-ink3)}

@media(max-width:760px){
  .fpw-overlay{padding:0}
  .fpw-modal{grid-template-columns:1fr;max-width:100%;max-height:100vh;height:100vh;border-radius:0}
  .fpw-rail{display:none}
  .fpw-scroll{padding:26px 22px}
  .fpw-opts{grid-template-columns:1fr}
  .fpw-row{grid-template-columns:1fr}
  .fpw-h{font-size:21px}
}

/* ---- shared mobile nav: make Sign in / Get started reachable via hamburger ---- */
@media(max-width:600px){
  nav#mainNav.fpnav-open{height:auto;flex-wrap:wrap;padding-bottom:14px}
  nav#mainNav.fpnav-open .nav-links{display:flex!important;flex-direction:column;width:100%;gap:2px;margin-top:10px;order:3;list-style:none}
  nav#mainNav.fpnav-open .nav-links a{display:block;padding:11px 10px;border-radius:8px}
  nav#mainNav.fpnav-open .nav-actions{display:flex!important;width:100%;gap:10px;margin-top:10px;order:4}
  nav#mainNav.fpnav-open .nav-actions .btn-ghost,nav#mainNav.fpnav-open .nav-actions .btn-cta{flex:1;text-align:center;padding:12px}
}