/* Copyright (c) Hostin Services Private Limited. All rights reserved.
   FLOWS — the step-by-step windows (Add contacts, Add companies) and the
   shared finish every modal in the app now gets: one frame, one primary
   button, one progress bar. Loaded last so the older modals match. */

/* ── every modal: one frame ─────────────────────────────────────────────── */
.opm-overlay{background:rgba(3,7,14,.66);backdrop-filter:blur(8px)}
.opm-box,.ct-box,.imp-box{border:1px solid var(--bdr);border-radius:18px;
  box-shadow:0 30px 80px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.02)}
[data-theme="light"] .opm-box,[data-theme="light"] .ct-box,[data-theme="light"] .imp-box{
  box-shadow:0 24px 64px rgba(16,32,64,.18)}

/* ── one primary button ─────────────────────────────────────────────────── */
.btn{border-radius:9px}
.btn-p,.opm-sbtn{background:linear-gradient(180deg,var(--accent-h),var(--accent));color:#04212a;
  border:0;border-radius:10px;box-shadow:0 6px 18px color-mix(in srgb,var(--accent) 24%,transparent)}
.btn-p:hover,.opm-sbtn:hover:not(:disabled){background:linear-gradient(180deg,var(--accent-h),var(--accent));
  filter:brightness(1.07);color:#04212a}
.opm-sbtn.danger{box-shadow:none}

/* ── the flow window ────────────────────────────────────────────────────── */
.fx-hd{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 24px 0}
.fx-hd h2{margin:0;font-size:18px;font-weight:650;letter-spacing:-.01em;color:var(--tx)}
.fx-x{width:30px;height:30px;border-radius:8px;border:1px solid var(--bdr);background:none;color:var(--txd);
  cursor:pointer;display:grid;place-items:center;font-size:13px}
.fx-x:hover{color:var(--tx);border-color:var(--bdr-str)}
.fx-steps{display:grid;grid-template-columns:repeat(var(--n,4),1fr);gap:6px;padding:14px 24px 0}
.fx-steps span{height:3px;border-radius:2px;background:var(--bdr)}
.fx-steps span.on{background:var(--accent)}
.fx-steps span.done{background:color-mix(in srgb,var(--accent) 45%,var(--bdr))}
.fx-stepl{display:grid;grid-template-columns:repeat(var(--n,4),1fr);gap:6px;padding:6px 24px 0;font-size:11.5px;color:var(--txd)}
.fx-stepl span.on{color:var(--tx);font-weight:550}
.fx-body{padding:22px 24px 24px;overflow-y:auto}
.fx-foot{display:flex;align-items:center;gap:12px;padding:16px 24px;border-top:1px solid var(--bdr);
  background:color-mix(in srgb,var(--card) 70%,var(--bg));border-radius:0 0 18px 18px;flex-wrap:wrap}
.fx-foot .sp{flex:1}
.fx-note{font-size:12.5px;color:var(--txm)}
.fx-foot .btn,.fx-foot .opm-sbtn{height:38px;padding:0 16px;font-size:13.5px;white-space:nowrap}

/* choose a source */
.fx-tiles{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fx-tile{position:relative;text-align:left;padding:22px;border-radius:14px;border:1px solid var(--bdr);
  background:linear-gradient(180deg,var(--card-h),var(--card));color:var(--tx);font:inherit;cursor:pointer;
  transition:border-color .15s,box-shadow .15s}
.fx-tile:hover,.fx-tile:focus-visible{outline:none;border-color:color-mix(in srgb,var(--accent) 60%,var(--bdr));
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 9%,transparent)}
.fx-tile:disabled{opacity:.5;cursor:default;box-shadow:none;border-color:var(--bdr)}
.fx-ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:19px;margin-bottom:16px;
  background:color-mix(in srgb,var(--c) 13%,transparent);color:var(--c)}
.fx-tile h3{margin:0 0 4px;font-size:15.5px;font-weight:650}
.fx-tile p{margin:0;font-size:13px;color:var(--txm);line-height:1.5}
.fx-meta{margin-top:16px;display:flex;gap:8px;flex-wrap:wrap}
.fx-chip{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:999px;font-size:11.5px;
  color:var(--txm);background:color-mix(in srgb,var(--tx) 5%,transparent);border:1px solid var(--bdr);white-space:nowrap}
.fx-chip i{width:6px;height:6px;border-radius:50%;background:var(--c,var(--txd))}
.fx-sub{margin-top:14px;font-size:12px;color:var(--txd);text-align:center}

/* cost, before anything is spent */
.fx-cost{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 12px;border-radius:10px;border:1px solid var(--bdr);
  font-size:12.5px;color:var(--txm);white-space:nowrap}
.fx-cost i{width:8px;height:8px;border-radius:2px;background:var(--c)}
.fx-cost b{color:var(--tx);font-weight:600;font-family:'JetBrains Mono',ui-monospace,monospace}
.fx-cost.short{border-color:color-mix(in srgb,var(--amber) 50%,var(--bdr))}

/* stages, live */
.fx-stages{display:flex;flex-direction:column;gap:18px}
.fx-stage{display:grid;grid-template-columns:30px 1fr;gap:14px;align-items:start}
.fx-dot{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:700;
  border:1px solid var(--bdr);color:var(--txd)}
.fx-stage.ok .fx-dot{background:color-mix(in srgb,var(--green) 16%,transparent);border-color:transparent;color:var(--green)}
.fx-stage.run .fx-dot{border-color:var(--accent);color:var(--accent);box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 9%,transparent)}
.fx-stage.bad .fx-dot{border-color:var(--red);color:var(--red)}
.fx-stage h4{margin:4px 0 0;font-size:14px;font-weight:600;color:var(--tx)}
.fx-stage.wait h4{color:var(--txm)}
.fx-stage p{margin:2px 0 0;font-size:12px;color:var(--txd)}
.fx-bar{height:8px;border-radius:4px;background:color-mix(in srgb,var(--tx) 7%,transparent);overflow:hidden;margin-top:10px;display:flex}
.fx-bar i{display:block;height:100%;transition:width .4s ease}
.fx-cnt{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:10px;font-size:12.5px;color:var(--txm)}
.fx-cnt b{font-family:'JetBrains Mono',ui-monospace,monospace;color:var(--tx);margin-right:4px;font-weight:500}
.fx-cnt i{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px;background:var(--c)}
.fx-cnt .r{margin-left:auto}

/* done */
.fx-done{text-align:center;padding:6px 0 0}
.fx-ring{width:64px;height:64px;border-radius:50%;margin:0 auto 14px;display:grid;place-items:center;font-size:26px;color:var(--green);
  background:radial-gradient(circle,color-mix(in srgb,var(--green) 22%,transparent),transparent 70%);
  border:1px solid color-mix(in srgb,var(--green) 35%,transparent)}
.fx-done h3{margin:0;font-size:22px;font-weight:650;letter-spacing:-.01em;color:var(--tx)}
.fx-done > p{margin:4px 0 0;color:var(--txm);font-size:13.5px}
.fx-res{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:22px 0 0}
.fx-r{padding:14px;border-radius:12px;border:1px solid var(--bdr);text-align:left}
.fx-r span{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--txd);display:flex;align-items:center;gap:7px}
.fx-r span i{width:7px;height:7px;border-radius:50%;background:var(--c)}
.fx-r b{display:block;font-size:24px;font-weight:650;margin-top:6px;font-family:'JetBrains Mono',ui-monospace,monospace;color:var(--tx)}
.fx-r em{font-style:normal;font-size:12px;color:var(--txd)}
.fx-spent{font-size:12px;color:var(--txd);margin-top:14px}

@media(max-width:640px){.fx-tiles,.fx-res{grid-template-columns:1fr}.fx-cnt .r{margin-left:0}}
@media (prefers-reduced-motion:reduce){.fx-bar i{transition:none}}

/* Add contacts › Apollo */
.apf-box{max-width:920px}
/* Two columns that scroll on their own; the window itself never does. */
.apf{display:grid;grid-template-columns:290px 1fr;min-height:440px;margin-top:14px;border-top:1px solid var(--bdr);
  flex:1 1 auto;min-height:0;overflow:hidden}
.apf-flt,.apf-pv{min-height:0;overflow-y:auto;overscroll-behavior:contain}
.apf-flt{padding:18px 18px 18px 24px;border-right:1px solid var(--bdr);display:flex;flex-direction:column;gap:14px;overflow-y:auto}
.apf-f label{display:block;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--txd);margin-bottom:7px}
.apf-tags{display:flex;flex-wrap:wrap;gap:6px;padding:6px;border:1px solid var(--bdr);border-radius:10px;background:var(--ibg);min-height:38px;cursor:text}
.apf-tags:focus-within{border-color:var(--accent);box-shadow:var(--ring)}
.apf-tags input{flex:1;min-width:80px;border:0;background:none;color:var(--tx);font:inherit;font-size:13px;outline:none;padding:2px 4px}
.apf-tag{height:24px;padding:0 4px 0 8px;border-radius:6px;background:color-mix(in srgb,var(--accent) 13%,transparent);
  color:var(--tx);font-size:12px;display:inline-flex;align-items:center;gap:2px}
.apf-tag button{border:0;background:none;color:var(--txd);cursor:pointer;font-size:10px;padding:2px 4px;border-radius:4px}
.apf-tag button:hover{color:var(--tx)}
.apf-tg{display:flex;flex-wrap:wrap;gap:6px}
.apf-tg button{height:28px;padding:0 10px;border-radius:8px;border:1px solid var(--bdr);background:var(--ibg);color:var(--txm);font:inherit;font-size:12px;cursor:pointer}
.apf-tg button.on{border-color:color-mix(in srgb,var(--accent) 60%,var(--bdr));color:var(--tx);background:color-mix(in srgb,var(--accent) 10%,transparent)}
.apf-pv{padding:18px 24px;display:flex;flex-direction:column;gap:14px;min-width:0}
.apf-empty{margin:auto;color:var(--txd);font-size:13px;text-align:center;max-width:36ch}
.apf-big{display:flex;align-items:baseline;gap:22px;transition:opacity .2s}
.apf-big.dim{opacity:.5}
.apf-big b{display:block;font-size:30px;font-weight:650;letter-spacing:-.02em;color:var(--tx)}
.apf-big span{font-size:12px;color:var(--txd)}
.apf-big .apf-free{margin-left:auto;align-self:center;color:var(--green);font-size:11.5px}
.apf-t{width:100%;border-collapse:collapse;font-size:13px}
.apf-t th{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--txd);font-weight:600;text-align:left;padding:0 8px 8px}
/* Pinned to the very top of the scrolling pane, over its 18px padding:
   pinned below it, the rows scrolled through that gap above the header and
   read as written over it. */
.apf-pv .apf-t thead th{top:-18px;padding-top:18px;background:var(--card);z-index:3;box-shadow:0 1px 0 var(--bdr)}
.apf-t td{padding:8px;border-top:1px solid color-mix(in srgb,var(--bdr) 70%,transparent);vertical-align:middle}
.apf-av{width:26px;height:26px;border-radius:50%;display:inline-grid;place-items:center;font-size:10.5px;font-weight:650;margin-right:10px;
  vertical-align:middle;background:color-mix(in srgb,var(--c) 20%,transparent);color:var(--c)}
.apf-n{font-weight:550;color:var(--tx)}
.apf-s{font-size:12px;color:var(--txd);margin-left:36px}
.apf-e{font-size:12px;color:var(--txd);text-align:right;white-space:nowrap}
.apf-hint{font-size:12px;color:var(--txd);text-align:center}
.apf-how{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:auto;padding-top:14px;border-top:1px solid var(--bdr);font-size:13px;color:var(--txm)}
.apf-seg{display:inline-flex;padding:3px;border-radius:10px;background:var(--ibg);border:1px solid var(--bdr)}
.apf-seg button{border:0;background:none;padding:5px 11px;border-radius:7px;font:inherit;font-size:12.5px;color:var(--txm);cursor:pointer;white-space:nowrap}
.apf-seg button.on{background:var(--card-h);color:var(--tx);box-shadow:0 1px 2px rgba(0,0,0,.35)}
.apf-num{width:90px;height:34px;border-radius:9px;border:1px solid var(--bdr);background:var(--ibg);color:var(--tx);text-align:center;font-size:13px}
.apf-num:focus{outline:none;border-color:var(--accent)}
.apf-meta{display:flex;gap:12px;flex-wrap:wrap}
.apf-meta label{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--txd)}
.apf-meta input,.apf-meta select{height:32px;border-radius:8px;border:1px solid var(--bdr);background:var(--ibg);color:var(--tx);font:inherit;font-size:12.5px;padding:0 10px}
.apf-meta input{width:220px}
@media(max-width:760px){.apf{grid-template-columns:1fr;overflow-y:auto}.apf-flt,.apf-pv{overflow:visible}
  .apf-flt{border-right:0;border-bottom:1px solid var(--bdr)}}

/* presets in the flow windows */
.apf-pre{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.apf-pre.col{grid-template-columns:1fr}
.apf-pre button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;padding:9px 10px;border-radius:10px;
  border:1px solid var(--bdr);background:linear-gradient(180deg,var(--card-h),var(--card));color:var(--tx);font:inherit;cursor:pointer;
  transition:border-color .15s,box-shadow .15s}
.apf-pre button:hover{border-color:var(--bdr-str)}
.apf-pre button.on{border-color:color-mix(in srgb,var(--accent) 65%,var(--bdr));box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 9%,transparent)}
.apf-pre b{font-size:12.5px;font-weight:600;line-height:1.3}
.apf-pre span{font-size:11px;color:var(--txd);line-height:1.35}
.apf-div{display:flex;align-items:center;gap:10px;font-size:11px;color:var(--txd);letter-spacing:.04em}
.apf-div::before,.apf-div::after{content:"";flex:1;height:1px;background:var(--bdr)}
.apf-nudge{padding:10px 12px;border-radius:10px;font-size:12.5px;line-height:1.5;color:var(--txm);
  background:color-mix(in srgb,var(--amber) 8%,transparent);border:1px solid color-mix(in srgb,var(--amber) 25%,transparent)}
.apf-nudge b{color:var(--tx)}
.cof-rec{margin-top:6px}
.cof-rec-t{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--txd);margin-bottom:6px}

/* Find people › At: the companies picked on Companies */
.apf-at{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;
  border:1px solid color-mix(in srgb,var(--accent) 55%,var(--bdr));
  background:color-mix(in srgb,var(--accent) 6%,var(--card));box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 7%,transparent)}
.apf-at>b{font-size:20px;font-weight:600;line-height:1}
.apf-at>span{display:flex;flex-direction:column;font-size:12.5px;color:var(--tx);flex:1;min-width:0}
.apf-at em{font-style:normal;font-size:11.5px;color:var(--txd)}
.apf-at button{border:0;background:none;color:var(--txd);cursor:pointer;font-size:12px;padding:4px;border-radius:6px}
.apf-at button:hover{color:var(--tx);background:var(--card-h)}

/* Find companies › details now or later */
.cof-det{display:flex;gap:10px;align-items:flex-start;margin-top:12px;padding:10px 12px;border-radius:10px;
  border:1px solid var(--bdr);background:color-mix(in srgb,var(--tx) 3%,transparent);cursor:pointer;font-size:12.5px;color:var(--tx)}
.cof-det input{margin-top:2px;accent-color:var(--accent)}
.cof-det b{font-weight:600}
.cof-det em{display:block;font-style:normal;color:var(--txd);margin-top:2px}
/* A line of help under a field: what it takes, and where the full list is. */
.apf-sub{margin:-4px 0 12px;font-size:11.5px;line-height:1.45;color:var(--txd)}
.apf-sub a{color:var(--accent);text-decoration:none;white-space:nowrap}
.apf-sub a:hover{text-decoration:underline}

/* Get phones (22-flow.js phOpen) */
.ph-box{max-width:720px;width:100%}
.ph-lede{margin:0 0 14px;font-size:13.5px;line-height:1.55;color:var(--txm)}
.ph-t td{vertical-align:top}
.ph-num{font-size:13px;color:var(--tx);white-space:nowrap}
.ph-st{font-size:12.5px;color:var(--txd);white-space:nowrap}
.ph-wait{display:inline-flex;align-items:center;gap:7px;color:var(--amber)}
.ph-spin{width:11px;height:11px;border-radius:50%;border:2px solid color-mix(in srgb,var(--amber) 30%,transparent);
  border-top-color:var(--amber);animation:phSpin .8s linear infinite}
@keyframes phSpin{to{transform:rotate(360deg)}}
.ph-cost{margin-top:16px;padding:12px 14px;border:1px solid var(--bdr);border-radius:10px;background:var(--ibg);
  display:grid;gap:4px;font-size:12.5px;color:var(--txm)}
.ph-cost b{color:var(--tx);font-weight:600}
.ph-cost-t{color:var(--txd);font-size:12px}
.ph-done{padding:6px 0 16px}
.ph-scroll{max-height:min(46vh,420px);overflow-y:auto;overscroll-behavior:contain}
.ph-scroll .apf-t thead th{position:sticky;top:0;background:var(--card);z-index:2;box-shadow:0 1px 0 var(--bdr)}
.ph-warn{margin-top:12px;padding:10px 12px;border-radius:10px;font-size:12.5px;line-height:1.5;
  color:var(--amber);background:color-mix(in srgb,var(--amber) 10%,transparent);border:1px solid color-mix(in srgb,var(--amber) 30%,transparent)}
.ph-warn.bad{color:var(--red);background:color-mix(in srgb,var(--red) 10%,transparent);border-color:color-mix(in srgb,var(--red) 30%,transparent)}