/* =====================================================================
   DREAM VISA — application flow ("Consular" system, reuses style.css tokens)
   Front-end prototype: service selector, AI eligibility, requirements +
   cost, account, payment and the progress-tracking dashboard.
   ===================================================================== */

.app-body{background:var(--paper-2);min-height:100vh}

/* top bar */
.app-top{position:sticky;top:0;z-index:40;background:rgba(246,244,239,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.app-top .wrap{display:flex;align-items:center;justify-content:space-between;padding-block:14px}
.app-top .logo{font-size:1.2rem}
.app-top .r{display:flex;align-items:center;gap:8px}

/* stepper */
.stepper{background:var(--card);border-bottom:1px solid var(--line)}
.stepper .wrap{display:flex;gap:6px;padding-block:14px;overflow-x:auto}
.step{display:flex;align-items:center;gap:10px;padding:6px 14px 6px 6px;border-radius:40px;flex:none;
  color:var(--muted);font-size:.86rem;font-family:var(--sans);border:1px solid transparent;transition:.25s}
.step .num{width:24px;height:24px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;
  font-family:var(--mono);font-size:11px;flex:none}
.step.active{color:var(--ink);border-color:var(--line-2);background:var(--paper)}
.step.active .num{border-color:var(--stamp);color:var(--stamp)}
.step.done{color:var(--valid)}
.step.done .num{border-color:var(--valid);color:var(--valid)}
.step.clickable{cursor:pointer}
.step.clickable:hover{color:var(--ink)}

/* layout */
.app-main{padding-block:clamp(28px,5vw,56px)}
.app-main .wrap{max-width:1000px}
.view{display:none;animation:fade .4s var(--ease)}
.view.on{display:block}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.vhead{margin-bottom:26px}
.vhead .eyebrow{margin-bottom:12px}
.vhead h1{font-size:clamp(1.7rem,3.6vw,2.6rem);font-weight:600}
.vhead p{color:var(--ink-soft);margin-top:10px;max-width:60ch}
.two{display:grid;grid-template-columns:1.6fr .9fr;gap:24px;align-items:start}
@media(max-width:820px){.two{grid-template-columns:1fr}}

/* tabs */
.tabs{display:inline-flex;background:var(--card);border:1px solid var(--line);border-radius:40px;padding:4px;margin-bottom:24px}
.tabs button{padding:8px 20px;border-radius:40px;font-size:.9rem;color:var(--muted);font-weight:500}
.tabs button.on{background:var(--ink);color:var(--paper)}

/* service cards */
.svc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media(max-width:640px){.svc-grid{grid-template-columns:1fr}}
.scard{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:22px;cursor:pointer;
  transition:border-color .25s,box-shadow .25s,transform .25s;position:relative;text-align:left}
.scard:hover{border-color:var(--line-2);box-shadow:0 16px 30px -22px rgba(20,34,63,.3);transform:translateY(-2px)}
.scard.sel{border-color:var(--stamp);box-shadow:0 0 0 1px var(--stamp)}
.scard .ico{width:34px;height:34px;margin-bottom:12px}
.scard .ico svg{width:100%;height:100%;stroke:var(--ink);fill:none;stroke-width:1.3}
.scard h3{font-size:1.15rem;font-weight:600;margin-bottom:6px}
.scard p{color:var(--muted);font-size:.9rem}
.scard .from{margin-top:12px;font-family:var(--mono);font-size:11px;color:var(--stamp);letter-spacing:.04em}
.scard .chk{position:absolute;top:16px;right:16px;width:22px;height:22px;border-radius:50%;background:var(--stamp);
  color:var(--paper);display:none;place-items:center;font-size:12px}
.scard.sel .chk{display:grid}

/* field / select */
.field{margin-bottom:18px}
.field label{display:block;font-size:.85rem;font-weight:500;color:var(--ink-soft);margin-bottom:7px}
.field input,.field select,.field textarea{width:100%;padding:12px 14px;border:1px solid var(--line-2);border-radius:4px;
  background:var(--card);font-family:var(--sans);font-size:.95rem;color:var(--ink);transition:border-color .2s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--stamp)}
.field .hint{font-size:.78rem;color:var(--muted);margin-top:6px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:560px){.row2{grid-template-columns:1fr}}

/* options (radio pills) */
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opt{border:1px solid var(--line-2);border-radius:40px;padding:9px 16px;font-size:.9rem;cursor:pointer;
  color:var(--ink-soft);background:var(--card);transition:.2s;user-select:none}
.opt:hover{border-color:var(--muted)}
.opt.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.q{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:20px 22px;margin-bottom:14px}
.q .qt{font-family:var(--serif);font-size:1.08rem;font-weight:600;margin-bottom:14px}
.q .qt .qn{font-family:var(--mono);font-size:.8rem;color:var(--stamp);margin-right:8px}

/* panel / aside */
.panel{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:24px;position:sticky;top:150px}
.panel h4{font-size:1.1rem;font-weight:600;margin-bottom:4px}
.panel .sub{font-family:var(--mono);font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;margin-bottom:16px}
.cost{width:100%;border-collapse:collapse;margin:4px 0 8px}
.cost td{padding:9px 0;font-size:.92rem;border-bottom:1px dotted var(--line-2)}
.cost td:last-child{text-align:right;font-family:var(--mono)}
.cost tr.total td{border-bottom:none;border-top:2px solid var(--ink);padding-top:14px;font-weight:600;font-size:1.05rem}
.cost tr.total td:last-child{color:var(--stamp)}
.pill-time{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;color:var(--ink-soft);
  background:var(--paper-2);border-radius:40px;padding:7px 14px;margin-top:6px}

/* eligibility result */
.result{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:28px;display:grid;
  grid-template-columns:auto 1fr;gap:26px;align-items:center}
@media(max-width:560px){.result{grid-template-columns:1fr;text-align:center}}
.gauge{width:132px;height:132px;position:relative;margin:auto}
.gauge svg{transform:rotate(-90deg)}
.gauge .val{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.gauge .val b{font-family:var(--serif);font-size:2.1rem;font-weight:600;line-height:1}
.gauge .val span{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.result .verdict{font-family:var(--serif);font-size:1.5rem;font-weight:600;margin-bottom:6px}
.result .reasons{margin-top:14px;display:grid;gap:8px}
.result .reasons .rz{display:flex;gap:10px;align-items:flex-start;font-size:.92rem;color:var(--ink-soft)}
.result .reasons .rz .b{width:16px;height:16px;flex:none;margin-top:3px}
.result .reasons .rz.pos .b{color:var(--valid)} .result .reasons .rz.neg .b{color:var(--stamp)}
.ai-note{font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:16px;display:flex;gap:8px;align-items:center}

/* checklist */
.clist{background:var(--card);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.clist .ci{display:flex;gap:14px;align-items:center;padding:15px 20px;border-bottom:1px solid var(--line);cursor:pointer}
.clist .ci:last-child{border-bottom:none}
.clist .ci .box{width:22px;height:22px;border:1px solid var(--line-2);border-radius:5px;flex:none;display:grid;place-items:center;
  color:transparent;transition:.2s}
.clist .ci.on .box{background:var(--valid);border-color:var(--valid);color:#fff}
.clist .ci .tx{flex:1}.clist .ci .tx b{font-weight:500;display:block;font-size:.96rem}
.clist .ci .tx span{font-size:.82rem;color:var(--muted)}
.clist .ci .up{font-family:var(--mono);font-size:11px;color:var(--stamp);border:1px solid var(--line-2);border-radius:4px;
  padding:5px 10px;transition:.2s}
.clist .ci .up:hover{border-color:var(--stamp)}
.clist .ci.up-done .up{color:var(--valid);border-color:var(--valid)}

/* dashboard */
.dash-grid{display:grid;grid-template-columns:1fr;gap:20px}
.appcard{background:var(--card);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.appcard .ah{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center;padding:22px 26px;border-bottom:1px solid var(--line);background:var(--paper)}
.appcard .ah h3{font-size:1.25rem;font-weight:600}
.appcard .ah .ref{font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.08em}
.badge-st{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:6px 12px;border-radius:40px}
.badge-st.review{background:#FBF3E6;color:#8a6d1f} .badge-st.approved{background:#E7F2EC;color:var(--valid)}
.badge-st.submitted{background:#EAEEF6;color:var(--ink)}
.track{padding:30px 26px}
.track .line{display:grid;grid-template-columns:repeat(4,1fr);position:relative}
.track .line::before{content:"";position:absolute;top:15px;left:12%;right:12%;height:2px;background:var(--line-2)}
.track .line .fill{position:absolute;top:15px;left:12%;height:2px;background:var(--valid);transition:width .6s var(--ease)}
.tnode{text-align:center;position:relative;z-index:1}
.tnode .dot{width:32px;height:32px;border-radius:50%;background:var(--card);border:2px solid var(--line-2);margin:0 auto 10px;
  display:grid;place-items:center;font-family:var(--mono);font-size:12px;color:var(--muted)}
.tnode.done .dot{border-color:var(--valid);background:var(--valid);color:#fff}
.tnode.current .dot{border-color:var(--stamp);color:var(--stamp);box-shadow:0 0 0 4px rgba(142,42,42,.12)}
.tnode .tl{font-size:.82rem;color:var(--ink-soft)}
.tnode.done .tl,.tnode.current .tl{color:var(--ink);font-weight:500}
.docstat{padding:0 26px 24px;display:grid;gap:8px}
.docstat .d{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px dotted var(--line-2);font-size:.9rem}
.docstat .d .s{font-family:var(--mono);font-size:11px;letter-spacing:.05em}
.docstat .d .s.ver{color:var(--valid)} .docstat .d .s.pend{color:#8a6d1f}
.timeline{padding:22px 26px;border-top:1px solid var(--line);background:var(--paper)}
.timeline .t{display:flex;gap:14px;padding:8px 0;font-size:.9rem}
.timeline .t .dt{font-family:var(--mono);font-size:11px;color:var(--muted);flex:none;width:96px}

/* actions */
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.note-box{background:#FBF7EC;border:1px solid #EADFBF;border-radius:6px;padding:14px 16px;font-size:.86rem;color:#6b5a2a;
  display:flex;gap:10px;margin-top:20px}
.note-box svg{width:18px;height:18px;flex:none;stroke:#b08d2e;fill:none;stroke-width:1.5;margin-top:1px}
.empty{text-align:center;padding:60px 20px;color:var(--muted)}