/* ═══════════════════════════════════════════════════════════════
   CASHARD ORDER INTAKE v4  ·  Dark Neumorphic · Premium Global
   Scoped under .oi4 — safe for multi-embed
   ═══════════════════════════════════════════════════════════════ */
.oi4 {
  --g:       <?= $_acc ?>;
  --grgb:    255,184,0;
  --grn:     #00c896;
  --grnrgb:  0,200,150;
  --bg0:     #06090f;
  --bg1:     #0c1220;
  --bg2:     #111827;
  --bg3:     #070c14;
  --txt:     #edf0f5;
  --txt2:    #8494a8;
  --dim:     #394557;
  --bdr:     rgba(255,255,255,.055);
  --bdr-g:   rgba(255,184,0,.4);
  --sh-out:  12px 16px 36px rgba(0,0,0,.7), -6px -6px 18px rgba(255,255,255,.018);
  --sh-in:   inset 5px 5px 14px rgba(0,0,0,.75), inset -2px -2px 8px rgba(255,255,255,.022);
  --sh-btn:  0 18px 52px rgba(var(--grgb),.42), 0 6px 18px rgba(0,0,0,.6);
  --r:       24px;
  --rsm:     14px;
  font-family: 'Space Grotesk','Inter',system-ui,sans-serif;
  background:
    radial-gradient(ellipse 120% 60% at 50% -8%, rgba(var(--grgb),.05) 0%, transparent 70%),
    radial-gradient(ellipse 70% 35% at 90% 110%, rgba(var(--grnrgb),.03) 0%,transparent 65%),
    var(--bg0);
  padding: 0 20px 96px;
}

/* ── Widget shell ── */
.oi4-shell {
  max-width: 1060px; margin: 0 auto;
  background: rgba(12, 18, 32, 0.65);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-radius: var(--r);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 24px 64px rgba(0,0,0,0.6), inset 0 1px 1px rgba(255,255,255,0.1);
  position: relative; overflow: hidden;
  animation: oi4Rise .55s cubic-bezier(.16,1,.3,1) both;
}
.oi4-shell::before {
  content:''; position:absolute; inset:0;
  border-radius:inherit;
  background:linear-gradient(135deg, rgba(255,255,255,.06) 0%, transparent 60%);
  pointer-events:none; z-index:0;
}
@keyframes oi4Rise { from{opacity:0;transform:translateY(32px)} to{opacity:1;transform:translateY(0)} }

/* Gold accent bar */
.oi4-bar {
  height:3px; width:100%;
  background:linear-gradient(90deg,transparent 0%,var(--g) 30%,rgba(255,220,60,.55) 65%,transparent 100%);
}

/* Body padding */
.oi4-body { padding:44px 48px 48px; position:relative; z-index:1; }
@media(max-width:700px){ .oi4-body{ padding:24px 18px 30px; } }

/* ── Two-col grid ── */
.oi4-grid {
  display:grid;
  grid-template-columns: 1fr 360px;
  gap:40px; align-items:start;
}
@media(max-width:960px){ .oi4-grid{ grid-template-columns:1fr; gap:32px; } }

/* ─── FIELDS ─── */
.oi4-field { margin-bottom:22px; }
.oi4-lbl {
  display:flex; align-items:center; gap:7px;
  font-size:10.5px; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:var(--txt2); margin-bottom:10px;
}
.oi4-lbl-i { color:var(--g); font-size:10px; }

/* Inset neumorphic shell */
.oi4-in {
  border-radius:var(--rsm);
  background:rgba(0,0,0,0.3);
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.5), inset 0 -1px 0 rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,.06);
  transition: all .25s cubic-bezier(.16,1,.3,1);
  position:relative;
}
.oi4-in:focus-within {
  background:rgba(0,0,0,0.5);
  border-color:var(--g);
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.5), 0 0 0 3px rgba(var(--grgb),.15), 0 0 25px rgba(var(--grgb),.15);
  transform: translateY(-1px);
}
.oi4-in-ic {
  position:absolute; left:16px; top:50%; transform:translateY(-50%);
  color:var(--dim); font-size:16px; pointer-events:none; z-index:1;
}
.oi4-inp, .oi4-sel {
  width:100%; padding:16px 16px 16px 44px;
  background:transparent; border:none; color:var(--txt);
  font-size:16px; font-family:inherit; outline:none;
  -webkit-appearance:none; appearance:none;
  border-radius:var(--rsm);
}
.oi4-inp::placeholder { color:var(--dim); }
.oi4-sel option { background:#0c1220; color:#edf0f5; }
.oi4-caret {
  position:absolute; right:14px; top:50%; transform:translateY(-50%);
  color:var(--dim); font-size:10px; pointer-events:none;
}

/* Phone row */
.oi4-phone-row { display:flex; gap:8px; }
.oi4-dial { flex-shrink:0; width:112px; }
.oi4-dial .oi4-in { height:100%; }
.oi4-dial-sel {
  width:100%; height:100%; padding:16px 28px 16px 12px;
  background:transparent; border:none; color:var(--txt);
  font-size:16px; font-family:inherit; outline:none;
  -webkit-appearance:none; appearance:none; font-weight:600;
}
.oi4-dial-sel option { background:#0c1220; color:#edf0f5; }
.oi4-num { flex:1; }

/* Sub-grid (name + phone) */
.oi4-sg { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media(max-width:540px){ .oi4-sg{ grid-template-columns:1fr; } }

/* Skeleton */
.oi4-skel {
  border-radius:var(--rsm); height:48px;
  background:linear-gradient(90deg,var(--bg3) 20%,rgba(255,255,255,.04) 50%,var(--bg3) 80%);
  background-size:300% 100%;
  animation:oi4Shim 1.7s ease infinite;
}
@keyframes oi4Shim { 0%{background-position:100% 50%} 100%{background-position:-100% 50%} }

/* Errors */
.oi4-err { display:none; font-size:11px; color:#f87171; margin-top:5px; }
.oi4-err.on { display:block; }

/* CTA */
.oi4-cta { margin-top:26px; }
@keyframes btnShimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}
.oi4-btn {
  display:flex; align-items:center; justify-content:center;
  gap:10px; width:100%;
  padding:18px 28px; border-radius:999px; border:none;
  cursor:pointer; font-family:inherit; font-size:15px;
  font-weight:800; letter-spacing:-.02em; color:#08090c;
  background: linear-gradient(130deg, var(--g) 0%, #ffd84d 40%, #ffffff 50%, #ffd84d 60%, var(--g) 100%);
  background-size: 200% auto;
  box-shadow: 0 12px 32px rgba(var(--grgb),.3), inset 0 -2px 0 rgba(0,0,0,0.15);
  transition:transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s, opacity .2s;
  position:relative; overflow:hidden;
}
.oi4-btn:hover:not(:disabled) {
  transform:translateY(-4px);
  animation: btnShimmer 2s linear infinite;
  box-shadow: 0 20px 48px rgba(var(--grgb),.5), 0 8px 16px rgba(0,0,0,.3);
}
.oi4-btn:disabled { opacity:.28; cursor:not-allowed; transform:none; }
.oi4-btn .oi4-arr { flex-shrink:0; transition:transform .2s; }
.oi4-btn:hover:not(:disabled) .oi4-arr { transform:translateX(3px); }

/* Privacy note */
.oi4-priv {
  display:flex; align-items:flex-start; gap:7px;
  margin-top:13px; font-size:11px; color:var(--dim); line-height:1.6;
}
.oi4-priv i { color:var(--g); flex-shrink:0; margin-top:1px; }

/* ═══ RIGHT PANEL: ESTIMATOR ═══════════════════════════════════ */
.oi4-est {
  border-radius:var(--rsm);
  background:linear-gradient(160deg, rgba(20,28,40,0.8) 0%, rgba(10,16,26,0.9) 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 32px 64px rgba(0,0,0,0.7), inset 0 1px 1px rgba(255,255,255,0.05);
  overflow:hidden;
  position:sticky; top:80px;
}

/* Estimator header */
.oi4-est-hd {
  padding:18px 22px 16px;
  border-bottom:1px solid var(--bdr);
  background:rgba(255,255,255,.015);
}
.oi4-est-badge {
  display:inline-flex; align-items:center; gap:6px;
  padding:3px 12px; border-radius:999px;
  background:rgba(var(--grnrgb),.08);
  border:1px solid rgba(var(--grnrgb),.22);
  font-size:9.5px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--grn);
}
.oi4-badge-dot {
  width:5px; height:5px; border-radius:50%;
  background:var(--grn); box-shadow:0 0 8px var(--grn);
  animation:oi4Pulse 2s ease infinite;
}
@keyframes oi4Pulse { 0%,100%{opacity:1} 50%{opacity:.3} }
.oi4-est-ttl {
  font-size:16px; font-weight:800; color:var(--txt);
  margin:10px 0 2px; letter-spacing:-.02em;
}
.oi4-est-sub { font-size:11px; color:var(--txt2); }

/* Programme preview — BIGGER logo */
.oi4-prev {
  padding:20px 22px 18px; border-bottom:1px solid var(--bdr);
  display:flex; align-items:center; gap:18px; min-height:90px;
  transition:background .3s;
}
.oi4-prev.has-prog { background:rgba(255,255,255,.012); }
.oi4-logo-wrap {
  width:72px; height:72px; border-radius:16px; flex-shrink:0;
  background:radial-gradient(circle at 40% 40%,rgba(255,255,255,.09),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.09);
  box-shadow:6px 6px 20px rgba(0,0,0,.6),-3px -3px 10px rgba(255,255,255,.025);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; position:relative;
  transition:box-shadow .3s, border-color .3s;
}
.oi4-prev.has-prog .oi4-logo-wrap {
  border-color:rgba(var(--grgb),.2);
  box-shadow:6px 6px 22px rgba(0,0,0,.65),-3px -3px 10px rgba(255,255,255,.025), 0 0 14px rgba(var(--grgb),.1);
}
.oi4-logo-wrap img {
  width:100%; height:100%; object-fit:contain;
  border-radius:14px;
  transition:opacity .3s;
}
.oi4-logo-init {
  font-size:26px; font-weight:900;
  background:linear-gradient(135deg,var(--g),#ffd84d);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}
.oi4-prev-info { flex:1; min-width:0; }
.oi4-prev-name {
  font-size:16px; font-weight:800; color:var(--txt);
  margin-bottom:5px; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
  letter-spacing:-.01em;
}
.oi4-prev-rate {
  font-size:12px; color:var(--txt2);
}
.oi4-prev-rate strong { color:var(--g); }
.oi4-prev-empty { font-size:12px; color:var(--dim); line-height:1.6; }

/* Rate rows */
.oi4-rows { padding:18px 22px 0; }
.oi4-row {
  display:flex; justify-content:space-between; align-items:baseline;
  font-size:12px; color:var(--txt2); margin-bottom:9px;
}
.oi4-row strong { color:var(--txt); font-size:16px; font-weight:700; }
.oi4-row-inr { display:none; }

/* Payout block */
.oi4-payout {
  margin:16px 22px 18px;
  border-radius:18px;
  background:linear-gradient(145deg,rgba(var(--grnrgb),.1),rgba(0,130,100,.04));
  border:1px solid rgba(var(--grnrgb),.18);
  box-shadow:inset 4px 4px 14px rgba(0,0,0,.5),inset -2px -2px 6px rgba(var(--grnrgb),.05);
  padding:22px 20px; text-align:center;
  position:relative; overflow:hidden;
}
.oi4-payout::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 60% 50% at 50% 120%,rgba(var(--grnrgb),.07),transparent);
  pointer-events:none;
}
.oi4-pay-lbl {
  font-size:10px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--grn); margin-bottom:10px;
}
.oi4-pay-val {
  font-size:40px; font-weight:900; letter-spacing:-.06em;
  color:#fff; line-height:1; position:relative;
  transition:color .18s, transform .18s;
}
.oi4-pay-val.pulse {
  color:var(--grn);
  text-shadow:0 0 28px rgba(var(--grnrgb),.45);
  transform:scale(1.03);
}
.oi4-pay-sub {
  font-size:11px; color:var(--txt2); margin-top:6px;
}
.oi4-pay-note {
  font-size:10px; color:var(--dim); margin-top:5px; line-height:1.55;
}

/* Placeholder */
.oi4-placeholder {
  padding:28px 22px; text-align:center;
}
.oi4-placeholder i {
  font-size:38px; color:rgba(255,255,255,.04);
  margin-bottom:12px; display:block;
}
.oi4-placeholder p { font-size:12px; color:var(--txt2); line-height:1.7; margin:0; }

/* Trust chips */
.oi4-chips {
  padding:14px 22px 20px; border-top:1px solid var(--bdr);
  display:flex; flex-wrap:wrap; gap:6px;
}
.oi4-chip {
  display:inline-flex; align-items:center; gap:5px;
  padding:5px 12px; border-radius:999px;
  background:rgba(255,255,255,.028);
  border:1px solid rgba(255,255,255,.05);
  font-size:10px; color:var(--txt2);
  transition:border-color .2s, color .2s;
}
.oi4-chip:hover { border-color:rgba(var(--grnrgb),.22); color:var(--grn); }
.oi4-chip i { color:var(--grn); font-size:9px; }

/* Currency indicator strip */
.oi4-currency-strip {
  padding:10px 22px;
  background:rgba(255,255,255,.012);
  border-top:1px solid var(--bdr);
  display:flex; align-items:center; gap:8px;
  font-size:10.5px; color:var(--txt2);
}
.oi4-currency-flag {
  background:rgba(var(--grnrgb),.08);
  border:1px solid rgba(var(--grnrgb),.18);
  border-radius:999px; padding:2px 10px;
  font-size:10px; font-weight:700; color:var(--grn);
  letter-spacing:.05em;
}
.oi4-currency-change {
  margin-left:auto; font-size:10px; color:var(--dim);
  cursor:pointer; text-decoration:underline dotted;
  background:none; border:none; font-family:inherit;
  padding:0;
}
.oi4-currency-change:hover { color:var(--g); }

/* ═══ SUBMIT LOADING STATE ═════════════════════════════════════ */
.oi4-loading {
  display:none;
  animation:oi4Rise .35s cubic-bezier(.16,1,.3,1) both;
}
.oi4-loading.on { display:block; }
.oi4-loading-inner {
  max-width:480px; margin:0 auto;
  padding:48px 24px; text-align:center;
}
.oi4-loading-ring {
  width:72px; height:72px; border-radius:50%; margin:0 auto 24px;
  border:2px solid rgba(var(--grgb),.15);
  border-top-color:var(--g);
  animation:oi4Spin .9s linear infinite;
  box-shadow:0 0 28px rgba(var(--grgb),.18);
}
@keyframes oi4Spin { to{ transform:rotate(360deg) } }
.oi4-loading-ttl {
  font-size:18px; font-weight:800; color:var(--txt);
  letter-spacing:-.02em; margin-bottom:6px;
}
.oi4-loading-msg {
  font-size:16px; color:var(--txt2); margin-bottom:28px;
}
.oi4-steps {
  display:flex; flex-direction:column; gap:10px;
  margin-bottom:20px; text-align:left;
}
.oi4-step {
  display:flex; align-items:center; gap:12px;
  padding:11px 16px; border-radius:12px;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.04);
  font-size:16px; color:var(--txt2);
  transition:background .3s, border-color .3s, color .3s;
}
.oi4-step.active {
  background:rgba(var(--grgb),.06);
  border-color:rgba(var(--grgb),.2);
  color:var(--txt);
}
.oi4-step.done {
  background:rgba(var(--grnrgb),.06);
  border-color:rgba(var(--grnrgb),.18);
  color:var(--grn);
}
.oi4-step-ic {
  width:26px; height:26px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:11px;
}
.oi4-step .oi4-step-ic { background:rgba(255,255,255,.04); color:var(--dim); }
.oi4-step.active .oi4-step-ic {
  background:rgba(var(--grgb),.15); color:var(--g);
  animation:oi4Pulse .9s ease infinite;
}
.oi4-step.done .oi4-step-ic { background:rgba(var(--grnrgb),.15); color:var(--grn); }
.oi4-loading-note { font-size:11px; color:var(--dim); line-height:1.65; }

/* ═══ SUCCESS STATE ════════════════════════════════════════════ */
.oi4-suc {
  display:none;
  animation:oi4Rise .45s cubic-bezier(.16,1,.3,1) both;
}
.oi4-suc.on { display:block; }

.oi4-suc-ring {
  width:76px; height:76px; border-radius:50%; margin:0 auto 22px;
  background:radial-gradient(circle,rgba(var(--grnrgb),.15),transparent 70%);
  border:2px solid rgba(var(--grnrgb),.35);
  display:flex; align-items:center; justify-content:center;
  animation:oi4Pop .55s cubic-bezier(.16,1,.3,1) both;
}
@keyframes oi4Pop { from{transform:scale(.15);opacity:0} to{transform:scale(1);opacity:1} }
.oi4-suc-ring i { font-size:32px; color:var(--grn); }

.oi4-suc-ttl {
  font-size:clamp(22px,4vw,32px); font-weight:900; letter-spacing:-.04em;
  color:var(--txt); text-align:center; margin-bottom:8px;
}
.oi4-suc-sub {
  font-size:16px; color:var(--txt2); text-align:center; line-height:1.75;
  max-width:480px; margin:0 auto 28px;
}

/* Reference badge */
.oi4-ref-wrap { display:flex; justify-content:center; margin-bottom:28px; }
.oi4-ref {
  display:inline-flex; align-items:center; gap:14px;
  padding:13px 28px; border-radius:999px;
  background:rgba(var(--grgb),.07);
  border:1px solid rgba(var(--grgb),.25);
  box-shadow:inset 3px 3px 10px rgba(0,0,0,.45),inset -1px -1px 5px rgba(var(--grgb),.04);
}
.oi4-ref-lbl { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--txt2); }
.oi4-ref-id  { font-size:18px; font-weight:900; letter-spacing:.05em; color:var(--g); }

/* Summary card */
.oi4-sum-card {
  border-radius:17px; overflow:hidden;
  background:linear-gradient(165deg,#0e1826,#08101e);
  border:1px solid var(--bdr); box-shadow:var(--sh-out);
  margin-bottom:22px;
}
.oi4-sum-head {
  padding:12px 20px; border-bottom:1px solid var(--bdr);
  background:rgba(255,255,255,.018);
  font-size:10px; font-weight:700;
  text-transform:uppercase; letter-spacing:.1em; color:var(--dim);
}
.oi4-sum-row {
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 20px; border-bottom:1px solid rgba(255,255,255,.025);
  font-size:16px;
}
.oi4-sum-row:last-child { border:none; }
.oi4-sum-k { color:var(--txt2); }
.oi4-sum-v { color:var(--txt); font-weight:600; text-align:right; }
.oi4-sum-v.big   { color:var(--grn); font-size:15px; font-weight:900; }
.oi4-sum-v.acc   { color:var(--g); }

/* Action row */
.oi4-acts { display:flex; flex-direction:column; gap:10px; margin-bottom:16px; }
.oi4-wa {
  display:inline-flex; align-items:center; justify-content:center;
  gap:9px; padding:15px 28px; border-radius:999px;
  background:#25d366; color:#fff;
  font-size:16px; font-weight:700; text-decoration:none;
  box-shadow:0 12px 36px rgba(37,211,102,.28);
  transition:transform .2s, box-shadow .2s;
  font-family:inherit; border:none; cursor:pointer;
}
.oi4-wa:hover { transform:translateY(-2px); box-shadow:0 20px 48px rgba(37,211,102,.42); }
.oi4-another {
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px; padding:13px 24px; border-radius:999px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.07);
  color:var(--txt2); font-size:16px; font-weight:600;
  font-family:inherit; cursor:pointer;
  transition:border-color .2s, color .2s;
}
.oi4-another:hover { border-color:rgba(255,255,255,.13); color:var(--txt); }
.oi4-suc-note { font-size:11px; color:var(--dim); text-align:center; line-height:1.65; }

/* Responsive */
@media(max-width:480px){
  .oi4 { padding:0 12px 64px; }
  .oi4-body { padding:20px 14px 26px; }
  .oi4-dial { width:96px; }
  .oi4-logo-wrap { width:56px; height:56px; }
}