/* global React */
// ============================================================
// LocalesFlow — faithful HTML/CSS recreation of the Meefi
// "Pago local" wizard (Selecciona contacto → Monto → Revisa).
// Real DOM = crisp vector text + native interaction states.
// An animated cursor drives a hover→click→advance choreography.
// ============================================================
const { useState, useRef, useEffect } = React;

/* ---- tiny icon set (generic line UI icons) ---- */
const Ic = {
  search: (p) => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>),
  plus:   (p) => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}><circle cx="12" cy="12" r="9"/><path d="M12 8v8M8 12h8"/></svg>),
  bank:   (p) => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M3 21h18M4 10h16M5 10V8l7-4 7 4v2M6 10v8M10 10v8M14 10v8M18 10v8"/></svg>),
  card:   (p) => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" {...p}><rect x="2" y="5" width="20" height="14" rx="2.5"/><path d="M2 10h20"/></svg>),
  eye:    (p) => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="2.6"/></svg>),
  eyeOff: (p) => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M9.9 5.1A9.7 9.7 0 0 1 12 5c6.5 0 10 7 10 7a17 17 0 0 1-2.4 3.3M6.5 6.5C3.6 8.2 2 12 2 12s3.5 7 10 7a9.6 9.6 0 0 0 4-.9"/><path d="m2 2 20 20"/></svg>),
  copy:   (p) => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}><rect x="9" y="9" width="11" height="11" rx="2.5"/><path d="M5 15V5a2 2 0 0 1 2-2h8"/></svg>),
  trash:  (p) => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M3 6h18M8 6V4h8v2M6 6l1 14h10l1-14"/></svg>),
  chevDown:(p)=> (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="m6 9 6 6 6-6"/></svg>),
  chevR:  (p) => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="m9 6 6 6-6 6"/></svg>),
  chevL:  (p) => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="m15 6-6 6 6 6"/></svg>),
  check:  (p) => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="m5 12 5 5 9-11"/></svg>),
  send:   (p) => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M22 2 11 13M22 2l-7 20-4-9-9-4 20-7Z"/></svg>),
  cal:    (p) => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}><rect x="3" y="4.5" width="18" height="17" rx="2.5"/><path d="M3 9h18M8 3v3M16 3v3"/></svg>),
  arrowR: (p) => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M5 12h14M13 6l6 6-6 6"/></svg>),
};
const MAvatar = ({ size = 30 }) => (
  <span className="lpf-m" style={{ width: size, height: size }}>m</span>
);

// Fixed design size for the wizard artboard. The whole thing is scaled
// to fit the live stage (contain), so on phones/tablets nothing clips or
// reflows — it's a faithful miniature, exactly like CuentasFlow.
// Height matches the real platform's "Revisa y aprueba" screenshot
// proportions (≈600×730, portrait) so the review window — the tallest
// step — has the same comfortable margins it has in-product instead of
// being crammed edge-to-edge.
const LPF_DES_W = 600;
const LPF_DES_H = 730;

const LPF_CONTACTS = [
  { name: "PRUEBA",          sub: "ASP INTEGRA",       chip: "••0015", icon: "bank" },
  { name: "PRUEBA FICT 4",   sub: "ASP INTEGRA",       chip: "••0011", icon: "bank" },
  { name: "EMILIO DÉBITO",   sub: "Mercado Pago W",    chip: "••2647", icon: "card" },
  { name: "BANCO PRUEBA",    sub: "BANCO FICTICIO 2",  chip: "••0017", icon: "bank" },
  { name: "PRUEBA FICTICIA 3", sub: "ASP INTEGRA",     chip: "••0030", icon: "bank" },
];
const LPF_ACCOUNTS = [
  { name: "Principal",        bal: "$11,136.99", clabe: "USD ••0008" },
  { name: "Operaciones USD",  bal: "$48,920.50", clabe: "USD ••0142" },
  { name: "Nómina",           bal: "$92,415.00", clabe: "USD ••0319" },
  { name: "Proveedores",      bal: "$23,780.25", clabe: "USD ••0001" },
  { name: "Impuestos",        bal: "$15,640.00", clabe: "USD ••0277" },
  { name: "Reserva",          bal: "$120,000.00",clabe: "USD ••0530" },
  { name: "Gastos de viaje",  bal: "$7,310.40",  clabe: "USD ••0688" },
];

function LocalesFlow() {
  const [step, setStep]       = useState(0);
  const [hoverC, setHoverC]   = useState(false); // contact row hover
  const [open, setOpen]       = useState(false); // dropdown open
  const [btn, setBtn]         = useState(null);   // 'hover' | 'press' on primary btn
  const [cur, setCur]         = useState({ x: 40, y: 60, show: false });
  const [press, setPress]     = useState(false);
  const [click, setClick]     = useState(null);
  const [scale, setScale]     = useState(1);

  const artRef   = useRef(null);
  const contactRef = useRef(null);
  const ddFieldRef = useRef(null);
  const principalRef = useRef(null);
  const primaryRef = useRef(null);
  const lastPos = useRef({ x: 40, y: 60 });

  // Scale the fixed-size artboard to fit the stage (never upscale past 1),
  // re-measuring on resize so it stays contained at any viewport.
  useEffect(() => {
    const st = artRef.current;
    const measure = () => {
      if (!st) return;
      const w = st.clientWidth, h = st.clientHeight;
      setScale(Math.min(w / LPF_DES_W, h / LPF_DES_H, 1));
    };
    measure();
    window.addEventListener("resize", measure);
    return () => window.removeEventListener("resize", measure);
  }, []);

  useEffect(() => {
    const timers = [];
    const at = (ms, fn) => timers.push(setTimeout(fn, ms));
    let k = 0;

    const moveTo = (ref, dx = 0, dy = 0) => {
      const art = artRef.current, el = ref.current;
      if (!art || !el) return;
      const a = art.getBoundingClientRect();
      const r = el.getBoundingClientRect();
      const x = r.left - a.left + r.width / 2 + dx;
      const y = r.top  - a.top  + r.height / 2 + dy;
      lastPos.current = { x, y };
      setCur({ x, y, show: true });
    };
    const pulse = () => {
      const { x, y } = lastPos.current;
      setPress(true); setClick({ x, y, k: ++k });
      timers.push(setTimeout(() => setPress(false), 190));
    };

    // ---------- STEP 0 — Selecciona un contacto ----------
    setStep(0); setCur((c) => ({ ...c, show: false }));
    at(600,  () => moveTo(contactRef, 50, 0));
    at(700,  () => setHoverC(true));
    at(1800, () => pulse());
    at(2600, () => setStep(1));

    // ---------- STEP 1 — Monto / cuenta de salida ----------
    at(2950, () => moveTo(ddFieldRef, 120, 0));
    at(4100, () => { pulse(); setOpen(true); });
    at(4750, () => moveTo(principalRef, 60, 0));
    at(5900, () => { pulse(); });
    at(6250, () => setOpen(false));
    at(6650, () => { moveTo(primaryRef); setBtn("hover"); });
    at(7800, () => { setBtn("press"); pulse(); });
    at(8100, () => setBtn(null));
    at(8400, () => setStep(2));

    // ---------- STEP 2 — Revisa y aprueba ----------
    at(8950, () => { moveTo(primaryRef); setBtn("hover"); });
    // hold on the "Enviar pago" button until the feature rotates away

    return () => timers.forEach(clearTimeout);
  }, []);

  return (
    <div className="lpf-stage" ref={artRef}>
      <div className="lpf-art" style={{ transform: `translate(-50%, -50%) scale(${scale})` }}>
      {/* ---------------- STEP 0 ---------------- */}
      {step === 0 && (
        <div className="lpf-step lpf-narrow">
          <h3 className="lpf-h">Selecciona un contacto</h3>
          <div className="lpf-card lpf-list">
            <div className="lpf-search">
              <span className="lpf-search-ic"><Ic.search width="17" height="17"/></span>
              <span className="lpf-caret" aria-hidden="true"/>
              <span className="lpf-search-ph">Busca un contacto…</span>
            </div>
            <div className="lpf-add">
              <Ic.plus width="19" height="19"/><span>Agregar un nuevo contacto</span>
            </div>
            <div className="lpf-recents">Recientes</div>
            <div className="lpf-rows">
              {LPF_CONTACTS.map((c, i) => {
                const Icon = Ic[c.icon];
                const active = i === 0 && hoverC;
                return (
                  <div key={i} ref={i === 0 ? contactRef : null}
                       className={`lpf-row ${active ? "is-hover" : ""}`}>
                    <div className="lpf-row-l">
                      <span className="lpf-row-name">{c.name}</span>
                      <span className="lpf-row-sub">{c.sub}</span>
                    </div>
                    <div className="lpf-row-r">
                      <span className="lpf-chip"><Icon width="13" height="13"/>{c.chip}</span>
                      {active && (
                        <span className="lpf-row-acts">
                          <Ic.eye width="16" height="16"/>
                          <Ic.copy width="15" height="15"/>
                          <Ic.trash width="15" height="15"/>
                        </span>
                      )}
                    </div>
                  </div>
                );
              })}
            </div>
            <span className="lpf-scrollbar" aria-hidden="true"/>
          </div>
        </div>
      )}

      {/* ---------------- STEP 1 ---------------- */}
      {step === 1 && (
        <>
          <div className="lpf-step lpf-narrow">
            <h3 className="lpf-h">Monto</h3>
            <div className="lpf-label">El receptor recibe</div>
            <div className="lpf-amount">
              <span><span className="lpf-cur">$</span> 7,000</span>
              <span className="lpf-mxn">USD</span>
            </div>
            <div className="lpf-label" style={{ marginTop: 22 }}>Cuenta de salida</div>
            <div className="lpf-dd">
              <div className={`lpf-dd-field ${open ? "is-open" : ""}`} ref={ddFieldRef}>
                <MAvatar/>
                <div className="lpf-dd-meta">
                  <span className="lpf-dd-name">Principal</span>
                  <span className="lpf-dd-sub">$11,136.99 / USD ••0008</span>
                </div>
                <span className={`lpf-dd-caret ${open ? "is-open" : ""}`}><Ic.chevDown width="18" height="18"/></span>
              </div>
              <div className={`lpf-dd-panel ${open ? "is-open" : ""}`}>
                <div className="lpf-dd-scroll">
                  {LPF_ACCOUNTS.map((a, i) => (
                    <div key={i} ref={i === 0 ? principalRef : null}
                         className={`lpf-opt ${i === 0 ? "is-sel" : ""}`}>
                      <MAvatar size={28}/>
                      <div className="lpf-dd-meta">
                        <span className="lpf-dd-name">{a.name}</span>
                        <span className="lpf-dd-sub">{a.bal}{a.clabe !== "Sin CLABE" ? ` / ${a.clabe}` : ""}</span>
                      </div>
                      {i === 0 && <span className="lpf-opt-check"><Ic.check width="17" height="17"/></span>}
                    </div>
                  ))}
                </div>
                <span className="lpf-dd-more"><Ic.chevDown width="16" height="16"/></span>
              </div>
            </div>
          </div>
          <div className="lpf-bar">
            <button className="lpf-btn lpf-btn-ghost"><Ic.chevL width="15" height="15"/>Regresar</button>
            <button ref={primaryRef} className={`lpf-btn lpf-btn-primary ${btn ? "is-" + btn : ""}`}>
              Continuar <Ic.chevR width="15" height="15"/>
            </button>
          </div>
        </>
      )}

      {/* ---------------- STEP 2 ---------------- */}
      {step === 2 && (
        <>
          <div className="lpf-step lpf-narrow">
            <h3 className="lpf-h">Revisa y aprueba</h3>
            <div className="lpf-card lpf-summary">
              <div className="lpf-sum-top">
                <span className="lpf-sum-to">Transferencia a <strong>Prueba</strong></span>
                <span className="lpf-pill"><Ic.send width="13" height="13"/>Inmediato</span>
              </div>
              <div className="lpf-sum-amt">$7,000.00<span className="lpf-cur-tag">USD</span></div>
              <div className="lpf-sum-div"/>
              <div className="lpf-sum-foot">
                <span><Ic.cal width="15" height="15"/> Pagado una vez · 29 mayo 2026</span>
                <span className="lpf-sum-spei"><Ic.arrowR width="15" height="15"/> WIRE</span>
              </div>
            </div>
            <div className="lpf-details">
              <div className="lpf-d-row"><span className="lpf-d-k">Receptor</span><span className="lpf-d-v">Prueba</span></div>
              <div className="lpf-d-row"><span className="lpf-d-k">Banco</span><span className="lpf-d-v">ASP <span className="lpf-blue">INTEGRA</span></span></div>
              <div className="lpf-d-row"><span className="lpf-d-k">Cuenta</span>
                <span className="lpf-d-v"><span className="lpf-d-acct">•••• 0015 <Ic.eyeOff width="15" height="15"/></span><span className="lpf-d-sub">SWIFT</span></span></div>
              <div className="lpf-d-row"><span className="lpf-d-k">De</span>
                <span className="lpf-d-v">Soluciones Integrales Sa<span className="lpf-d-sub">Principal · USD ••0008</span></span></div>
              <div className="lpf-d-row"><span className="lpf-d-k">Concepto</span><span className="lpf-d-v">777</span></div>
            </div>
          </div>
          <div className="lpf-bar">
            <button className="lpf-btn lpf-btn-ghost"><Ic.chevL width="15" height="15"/>Regresar</button>
            <button ref={primaryRef} className={`lpf-btn lpf-btn-primary ${btn ? "is-" + btn : ""}`}>Enviar pago</button>
          </div>
        </>
      )}

      </div>

      {/* cursor + click ripple (children of artboard → exact alignment) */}
      {cur.show && (
        <span className={`lpf-cursor ${press ? "is-press" : ""}`} style={{ left: cur.x, top: cur.y }}>
          <svg width="21" height="21" viewBox="0 0 24 24" fill="#1b1f26" stroke="#ffffff" strokeWidth="1.5" strokeLinejoin="round"><path d="M5.5 2.6 L5.5 19.4 L9.7 15.4 L12.5 21.2 L14.9 20 L12.1 14.3 L17.6 14.3 Z"/></svg>
        </span>
      )}
      {click && <span key={click.k} className="lpf-click" style={{ left: click.x, top: click.y }}/>}

      <style>{LPF_CSS}</style>
    </div>
  );
}

const LPF_CSS = `
.lpf-stage,.lpf-stage *{font-family:'Montserrat',sans-serif !important;box-sizing:border-box;}
.lpf-stage{position:absolute;inset:0;background:#fff;overflow:hidden;
  color:#2b3140;-webkit-font-smoothing:antialiased;}
.lpf-art{position:absolute;left:50%;top:50%;width:600px;height:730px;
  transform-origin:center center;display:flex;flex-direction:column;}
.lpf-step{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:clamp(28px,5%,60px) clamp(32px,6%,72px) 18px;
  animation:lpfIn .55s cubic-bezier(.22,.61,.36,1) both;}
@keyframes lpfIn{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
.lpf-narrow>*{max-width:560px;width:100%;}
.lpf-h{font-weight:400;font-size:clamp(22px,2.4vw,29px);
  color:#2a3344;letter-spacing:-.01em;margin:0 0 22px;}
.lpf-label{font-size:13.5px;color:#9099a8;margin-bottom:9px;}

/* ---- m avatar ---- */
.lpf-m{display:inline-flex;align-items:center;justify-content:center;flex:none;border-radius:999px;
  background:#e9edfb;color:#3a5bd9;font-weight:700;font-size:14px;line-height:1;}

/* ---- step 0 list ---- */
.lpf-card{background:#fff;border:1px solid #e8eaef;border-radius:14px;
  box-shadow:0 18px 44px -26px rgba(15,23,42,.28);overflow:hidden;}
.lpf-list{position:relative;}
.lpf-search{display:flex;align-items:center;gap:9px;padding:15px 18px;border-bottom:1px solid #eef0f3;}
.lpf-search-ic{color:#9aa2b1;display:flex;}
.lpf-caret{width:1px;height:17px;background:#3a4250;margin-right:-7px;animation:lpfBlink 1.1s steps(1) infinite;}
@keyframes lpfBlink{0%,50%{opacity:1;}51%,100%{opacity:0;}}
.lpf-search-ph{color:#aeb4c0;font-size:15px;}
.lpf-add{display:flex;align-items:center;gap:11px;padding:14px 18px;border-bottom:1px solid #eef0f3;
  color:#3a4250;font-size:14.5px;}
.lpf-add svg{color:#69728a;}
.lpf-recents{padding:13px 18px 7px;color:#9aa2b1;font-size:13px;font-weight:500;}
.lpf-rows{}
.lpf-row{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 18px;transition:background .2s ease;}
.lpf-row.is-hover{background:#f4f6f9;}
.lpf-row-l{display:flex;flex-direction:column;gap:2px;min-width:0;}
.lpf-row-name{font-size:14.5px;font-weight:500;color:#2b3240;white-space:nowrap;letter-spacing:.01em;}
.lpf-row-sub{font-size:12px;color:#9aa2b1;white-space:nowrap;letter-spacing:.02em;}
.lpf-row-r{display:flex;align-items:center;gap:13px;}
.lpf-row-acts{display:flex;align-items:center;gap:14px;color:#7c8698;}
.lpf-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border:1px solid #e3e7ef;
  border-radius:999px;font-size:12.5px;font-weight:500;color:#5c6678;white-space:nowrap;background:#fff;}
.lpf-chip svg{color:#8893a6;}
.lpf-scrollbar{position:absolute;top:112px;bottom:9px;right:7px;width:5px;border-radius:999px;
  background:linear-gradient(#cdd4e0,#cdd4e0) no-repeat;background-size:100% 40%;background-position:0 30%;}

/* ---- step 1 amount + dropdown ---- */
.lpf-amount{display:flex;align-items:center;justify-content:space-between;background:#f7f9fc;
  border:1px solid #e6eaf1;border-radius:12px;padding:14px 16px;font-size:16px;color:#2b3240;}
.lpf-cur{color:#3a4250;font-weight:500;margin-right:1px;}
.lpf-mxn{color:#9aa2b1;font-size:13px;font-weight:600;letter-spacing:.04em;}
.lpf-dd{position:relative;}
.lpf-dd-field{display:flex;align-items:center;gap:12px;border:1px solid #e6eaf1;border-radius:12px;
  padding:11px 14px;background:#fff;transition:border-color .2s,box-shadow .2s;}
.lpf-dd-field.is-open{border-color:#c3cdf2;box-shadow:0 0 0 3px rgba(90,116,236,.12);}
.lpf-dd-meta{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0;}
.lpf-dd-name{font-size:14.5px;font-weight:600;color:#2a3a8f;}
.lpf-dd-sub{font-size:12.5px;color:#9aa2b1;white-space:nowrap;}
.lpf-dd-caret{color:#9aa2b1;display:flex;transition:transform .25s ease;}
.lpf-dd-caret.is-open{transform:rotate(180deg);}
.lpf-dd-panel{position:absolute;left:0;right:0;top:calc(100% + 8px);background:#fff;border:1px solid #e6eaf1;
  border-radius:14px;box-shadow:0 26px 60px -28px rgba(15,23,42,.4);overflow:hidden;z-index:5;
  opacity:0;transform:translateY(-6px) scaleY(.98);transform-origin:top;pointer-events:none;
  transition:opacity .32s ease,transform .32s cubic-bezier(.2,.7,.2,1);}
.lpf-dd-panel.is-open{opacity:1;transform:none;pointer-events:auto;}
.lpf-dd-scroll{max-height:300px;overflow:hidden;}
.lpf-opt{display:flex;align-items:center;gap:12px;padding:11px 16px;transition:background .18s ease;}
.lpf-opt.is-sel{background:#eef2f9;}
.lpf-opt .lpf-dd-name{color:#2b3240;}
.lpf-opt-check{margin-left:auto;color:#2b3a64;display:flex;}
.lpf-dd-more{display:flex;justify-content:center;padding:6px 0 9px;color:#aab2c2;border-top:1px solid #f1f3f6;}

/* ---- step 2 summary ---- */
.lpf-summary{padding:20px;}
.lpf-sum-top{display:flex;align-items:center;justify-content:space-between;}
.lpf-sum-to{color:#8a93a3;font-size:13.5px;}
.lpf-sum-to strong{color:#3a4250;font-weight:600;}
.lpf-pill{display:inline-flex;align-items:center;gap:6px;background:#eef1f6;color:#3a4250;
  font-size:12.5px;padding:5px 11px;border-radius:999px;}
.lpf-pill svg{color:#5c6678;}
.lpf-sum-amt{font-weight:300;font-size:34px;color:#222a37;
  letter-spacing:-.02em;margin:8px 0 14px;display:flex;align-items:baseline;gap:10px;}
.lpf-cur-tag{font-size:13px;font-weight:600;letter-spacing:.04em;color:#9aa2b1;}
.lpf-sum-div{height:1px;background:#eef0f3;margin:0 0 12px;}
.lpf-sum-foot{display:flex;align-items:center;justify-content:space-between;color:#8a93a3;font-size:13px;}
.lpf-sum-foot>span{display:inline-flex;align-items:center;gap:7px;}
.lpf-sum-foot svg{color:#aab2c2;}
.lpf-details{margin-top:14px;}
.lpf-d-row{display:grid;grid-template-columns:190px 1fr;gap:16px;align-items:start;
  padding:15px 0;border-bottom:1px solid #eef0f3;}
.lpf-d-k{color:#9099a8;font-size:14px;}
.lpf-d-v{color:#2b3240;font-size:14.5px;display:flex;flex-direction:column;gap:3px;}
.lpf-blue{color:#3a5bd9;}
.lpf-d-acct{display:inline-flex;align-items:center;gap:8px;}
.lpf-d-acct svg{color:#9aa2b1;}
.lpf-d-sub{color:#9aa2b1;font-size:12.5px;}

/* ---- bottom action bar ---- */
.lpf-bar{display:flex;align-items:center;justify-content:flex-end;gap:12px;
  padding:15px clamp(40px,9%,104px);border-top:1px solid #ececf0;background:#fff;}
.lpf-btn{display:inline-flex;align-items:center;gap:7px;border-radius:999px;font-size:14.5px;
  font-weight:500;cursor:default;border:1px solid transparent;padding:10px 20px;
  transition:transform .12s ease,background .18s ease,box-shadow .18s ease;}
.lpf-btn-ghost{background:#fff;border-color:#dfe2ea;color:#3a4250;}
.lpf-btn-ghost svg{color:#8893a6;}
.lpf-btn-primary{background:#1f3cd6;color:#fff;box-shadow:0 8px 20px -8px rgba(31,60,214,.55);}
.lpf-btn-primary.is-hover{background:#1a34bd;}
.lpf-btn-primary.is-press{transform:scale(.96);background:#172da6;}

/* ---- cursor ---- */
.lpf-cursor{position:absolute;width:22px;height:22px;margin:-1px 0 0 -1px;z-index:30;pointer-events:none;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.32));
  transition:left 1s cubic-bezier(.33,0,.2,1),top 1s cubic-bezier(.33,0,.2,1),transform .18s ease;}
.lpf-cursor.is-press{transform:scale(.8);}
.lpf-click{position:absolute;width:30px;height:30px;margin:-15px 0 0 -15px;z-index:25;pointer-events:none;
  border-radius:50%;border:2px solid rgba(31,60,214,.5);animation:lpfClick .6s cubic-bezier(.2,.7,.2,1) forwards;}
@keyframes lpfClick{0%{opacity:.85;transform:scale(.3);}100%{opacity:0;transform:scale(1.5);}}
`;

window.LocalesFlow = LocalesFlow;