/* UK Visa From Thailand — reusable tool library styles
   Mobile-first, self-contained, themeable via CSS variables. */
:root{
  /* THEME: Sukhothai Warm (Pack 2) */
  --ukv-navy:#16323a;        /* deep green ink — headings */
  --ukv-navy-2:#126b73;      /* teal — links / secondary */
  --ukv-accent:#c9472f;      /* warm coral — CTAs */
  --ukv-accent-2:#126b73;    /* teal */
  --ukv-accent-ink:#ffffff;  /* text on the CTA */
  --ukv-gold:#C9A227;
  --ukv-ink:#2f4a4f;         /* warm charcoal body text */
  --ukv-muted:#5e6b66;
  --ukv-line:#e6ddcf;        /* warm hairline */
  --ukv-bg:#ffffff;          /* near-white cream card */
  --ukv-bg-soft:#fdf3e6;     /* warm soft surface */
  --ukv-ok:#1d7874;
  --ukv-warn:#b06a16;
  --ukv-radius:16px;
  --ukv-shadow:0 1px 2px rgba(23,63,51,.06),0 10px 26px rgba(23,63,51,.08);
  --ukv-hfont:"Baloo Thai 2","Noto Sans Thai",sans-serif;
  --ukv-font:"Sarabun","Noto Sans Thai","Segoe UI",system-ui,-apple-system,sans-serif;
}
.ukv{font-family:var(--ukv-font);color:var(--ukv-ink);line-height:1.55;box-sizing:border-box}
.ukv *,.ukv *::before,.ukv *::after{box-sizing:inherit}
.ukv-card{background:var(--ukv-bg);border:1px solid var(--ukv-line);border-radius:var(--ukv-radius);box-shadow:var(--ukv-shadow);padding:20px;margin:0 0 22px}
.ukv-card h3{margin:0 0 4px;font-size:1.18rem;color:var(--ukv-navy);letter-spacing:-.01em;font-family:var(--ukv-hfont)}
.ukv-sub{color:var(--ukv-muted);font-size:.9rem;margin:0 0 16px}
.ukv-row{display:flex;flex-wrap:wrap;gap:14px}
.ukv-row>*{flex:1 1 180px;min-width:0}
.ukv-field{margin:0 0 14px}
.ukv-field label{display:block;font-weight:600;font-size:.86rem;margin:0 0 6px;color:var(--ukv-navy-2)}
.ukv-field select,.ukv-field input[type=number],.ukv-field input[type=date],.ukv-field input[type=text]{
  width:100%;padding:11px 12px;border:1px solid var(--ukv-line);border-radius:10px;font:inherit;background:#fff;color:var(--ukv-ink)}
.ukv-field select:focus,.ukv-field input:focus{outline:2px solid var(--ukv-accent-2);outline-offset:1px;border-color:var(--ukv-accent-2)}
.ukv-toggles{display:flex;flex-wrap:wrap;gap:10px;margin:6px 0 14px}
.ukv-chip-toggle{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--ukv-line);border-radius:999px;cursor:pointer;font-size:.86rem;background:#fff;user-select:none}
.ukv-chip-toggle input{accent-color:var(--ukv-accent-2)}
.ukv-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--ukv-accent);color:var(--ukv-accent-ink,#fff);border:0;border-radius:999px;padding:12px 20px;font:inherit;font-weight:700;cursor:pointer;text-decoration:none}
.ukv-btn:hover{filter:brightness(1.06)}
.ukv-btn.secondary{background:var(--ukv-navy)}
.ukv-btn.ghost{background:#fff;color:var(--ukv-navy);border:1px solid var(--ukv-line)}
.ukv-btn.block{width:100%}
.ukv-result{background:var(--ukv-bg-soft);border:1px solid var(--ukv-line);border-radius:12px;padding:16px;margin:14px 0 0}
.ukv-line{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px dashed var(--ukv-line);font-size:.94rem}
.ukv-line:last-of-type{border-bottom:0}
.ukv-line .lbl{color:var(--ukv-muted)}
.ukv-line .val{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
.ukv-total{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:10px;padding-top:12px;border-top:2px solid var(--ukv-navy)}
.ukv-total .t-thb{font-size:1.55rem;font-weight:800;color:var(--ukv-navy)}
.ukv-total .t-gbp{font-size:1rem;color:var(--ukv-muted)}
.ukv-note{font-size:.78rem;color:var(--ukv-muted);margin:8px 0 0}
.ukv-callout{display:flex;gap:10px;align-items:flex-start;background:#fff7e6;border:1px solid #f0d9a3;border-radius:10px;padding:11px 12px;margin:12px 0 0;font-size:.84rem;color:#5e4708}
.ukv-callout.info{background:#eef6f6;border-color:#bcdedd;color:#0e4f4c}
.ukv-disclaimer{display:flex;gap:8px;align-items:flex-start;font-size:.76rem;color:var(--ukv-muted);background:#fbfcfe;border:1px dashed var(--ukv-line);border-radius:8px;padding:9px 11px;margin:12px 0 0}
.ukv-disclaimer b{color:var(--ukv-navy-2)}
/* checklist */
.ukv-check{list-style:none;margin:0;padding:0}
.ukv-check li{display:flex;gap:11px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--ukv-line)}
.ukv-check li:last-child{border-bottom:0}
.ukv-check input[type=checkbox]{width:20px;height:20px;margin-top:2px;accent-color:var(--ukv-accent-2);flex:0 0 auto}
.ukv-check .ci-main{font-weight:600;font-size:.92rem}
.ukv-check .ci-hint{font-size:.78rem;color:var(--ukv-muted);margin-top:2px}
.ukv-tag{display:inline-block;font-size:.68rem;font-weight:700;padding:2px 7px;border-radius:999px;background:#eef2f7;color:var(--ukv-navy-2);margin-left:6px;vertical-align:middle}
.ukv-tag.translate{background:#fdeef0;color:var(--ukv-accent)}
.ukv-progress{display:flex;align-items:center;gap:12px;margin:4px 0 14px}
.ukv-progress .bar{flex:1;height:10px;background:var(--ukv-line);border-radius:999px;overflow:hidden}
.ukv-progress .bar>i{display:block;height:100%;background:var(--ukv-accent-2);width:0;transition:width .25s ease}
.ukv-progress .count{font-weight:700;font-size:.9rem;color:var(--ukv-navy);white-space:nowrap}
/* router results */
.ukv-routes{display:grid;gap:10px;margin:14px 0 0}
.ukv-route{border:1px solid var(--ukv-line);border-radius:10px;padding:12px 14px;background:#fff}
.ukv-route h4{margin:0 0 3px;font-size:.98rem;color:var(--ukv-navy)}
.ukv-route p{margin:0;font-size:.84rem;color:var(--ukv-muted)}
.ukv-route a{color:var(--ukv-accent);font-weight:600;text-decoration:none;font-size:.84rem}
/* neutral compare badge (NOT pass/fail) */
.ukv-compare{display:inline-block;padding:4px 10px;border-radius:8px;font-weight:700;font-size:.84rem;background:#eef2f7;color:var(--ukv-navy-2)}
.ukv-tiers{display:grid;grid-template-columns:1fr;gap:10px;margin:10px 0 0}
@media(min-width:560px){.ukv-tiers{grid-template-columns:repeat(3,1fr)}}
.ukv-tier{border:1px solid var(--ukv-line);border-radius:10px;padding:6px 4px;text-align:center;cursor:pointer;font-size:.8rem}
.ukv-tier input{display:block;margin:0 auto 4px}
.ukv-tier.sel{border-color:var(--ukv-accent-2);background:#eef6f6}
.ukv-lang{display:inline-flex;border:1px solid var(--ukv-line);border-radius:999px;overflow:hidden}
.ukv-lang button{border:0;background:#fff;padding:6px 14px;font:inherit;font-weight:700;cursor:pointer;color:var(--ukv-muted)}
.ukv-lang button.on{background:var(--ukv-navy);color:#fff}