/* ============================================================
   CaribTools — tools.css
   Shared layout for every calculator / tool page
   ============================================================ */

/* ---------- Page hero (top of each tool page) ---------- */
.page-hero {
  position:relative; overflow:hidden;
  padding:8.5rem 0 4.5rem;
  background:var(--hero-grad); background-size:220% 220%;
  animation:heroDrift 18s ease-in-out infinite;
  text-align:center; color:#fff;
}
.page-hero::before {
  content:""; position:absolute; inset:0;
  background:radial-gradient(120% 90% at 15% 10%, rgba(255,255,255,.25), transparent 55%);
  pointer-events:none;
}
.page-hero-inner { position:relative; z-index:2; }
.breadcrumb { display:inline-flex; align-items:center; gap:.5rem; font-size:.85rem; font-weight:600; color:rgba(255,255,255,.85); }
.breadcrumb a:hover { color:#fff; text-decoration:underline; }
.page-hero h1 { font-size:clamp(2rem, 5vw, 3.2rem); margin-top:1rem; text-shadow:0 6px 30px rgba(8,32,30,.35); }
.page-hero p { max-width:640px; margin:.9rem auto 0; color:rgba(255,255,255,.92); font-weight:500; }
.page-hero-wave { position:absolute; left:0; right:0; bottom:-2px; z-index:3; line-height:0; }
.page-hero-wave svg { width:100%; height:80px; fill:var(--bg); }
@media (min-width:900px){ .page-hero-wave svg { height:110px; } }

/* ---------- Tool body ---------- */
.tool-section { padding:4rem 0 5rem; }
.tool-layout {
  display:grid; grid-template-columns:1.4fr .9fr; gap:2rem; align-items:start;
  margin-top:2.5rem;
}
.glass-panel {
  background:var(--card-bg); border:1px solid var(--border);
  border-radius:1.6rem; padding:2rem;
  box-shadow:var(--shadow-md);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
}
.glass-panel h2 { font-size:1.15rem; display:flex; align-items:center; gap:.6rem; }
.glass-panel h2 svg { width:24px; height:24px; color:var(--brand-a); }

/* ---------- Form controls ---------- */
.field { margin-top:1.3rem; }
.field label { display:block; font-size:.85rem; font-weight:700; margin-bottom:.4rem; color:var(--text-soft); }
.field .hint { font-weight:500; font-size:.78rem; opacity:.7; }

.ctl {
  width:100%; padding:.85rem 1rem; border-radius:14px;
  border:1.5px solid var(--border); background:var(--input-bg);
  color:var(--text); font-size:1rem; font-weight:600;
  transition:border-color .3s ease, box-shadow .3s ease;
}
.ctl:focus { outline:none; border-color:var(--brand-a); box-shadow:0 0 0 4px rgba(20,184,166,.15); }
textarea.ctl { resize:vertical; min-height:96px; font-weight:500; }

.amount-wrap { position:relative; }
.amount-wrap .cur-badge {
  position:absolute; right:1rem; top:50%; transform:translateY(-50%);
  font-weight:800; font-size:.82rem; color:var(--brand-a);
  background:var(--chip-bg); padding:.25rem .6rem; border-radius:999px;
}

.row-2 { display:grid; grid-template-columns:1fr auto 1fr; gap:.8rem; align-items:end; }
.row-2 .swap-btn {
  width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center;
  background:linear-gradient(120deg,var(--brand-a),var(--brand-c));
  color:#fff; box-shadow:var(--shadow-sm);
  transition:transform .45s cubic-bezier(.16,1,.3,1), box-shadow .3s ease;
}
.row-2 .swap-btn:hover { transform:rotate(180deg); box-shadow:var(--shadow-md); }
.row-2 .swap-btn svg { width:20px; height:20px; }

.radios { display:flex; gap:.6rem; flex-wrap:wrap; }
.radio-pill { flex:1 1 auto; }
.radio-pill input { position:absolute; opacity:0; pointer-events:none; }
.radio-pill span {
  display:block; text-align:center; padding:.7rem .9rem; border-radius:14px;
  border:1.5px solid var(--border); background:var(--input-bg);
  font-weight:700; font-size:.88rem; cursor:pointer; color:var(--text-soft);
  transition:all .3s ease;
}
.radio-pill input:checked + span {
  border-color:var(--brand-a); color:var(--brand-a);
  background:var(--chip-bg); box-shadow:var(--shadow-sm);
}
.radio-pill input:focus-visible + span { outline:3px solid rgba(20,184,166,.35); }

.big-action {
  margin-top:1.6rem; width:100%; justify-content:center;
  border-radius:16px; padding:1.05rem;
}

/* ---------- Result panel ---------- */
.result-panel {
  margin-top:2rem; border-radius:1.6rem; padding:2rem;
  background:linear-gradient(120deg, rgba(13,148,136,.12), rgba(249,115,22,.12));
  border:1px solid rgba(13,148,136,.28);
  text-align:center; animation:riseIn .5s ease both;
}
.result-panel.is-hidden { display:none; }
.result-panel.pop { animation:riseIn .5s ease both; }
@keyframes riseIn { from{opacity:0; transform:translateY(14px) scale(.98)} to{opacity:1; transform:none} }
.result-label { font-size:.8rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--text-soft); }
.result-value {
  margin-top:.35rem; font-size:clamp(2.1rem,5vw,2.9rem); font-weight:800; letter-spacing:-.02em;
  background:linear-gradient(110deg,var(--brand-a),var(--brand-c));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  word-break:break-word; line-height:1.1;
}
.result-sub { margin-top:.5rem; color:var(--text-soft); font-weight:600; font-size:.92rem; }
.rate-stamp {
  display:inline-flex; align-items:center; gap:.45rem; margin-top:1.1rem;
  font-size:.78rem; font-weight:700; color:var(--text-soft);
  border:1px solid var(--border); background:var(--input-bg);
  padding:.35rem .8rem; border-radius:999px;
}
.rate-stamp svg { width:15px; height:15px; color:var(--brand-b); }

.conv-list { margin-top:1.6rem; text-align:left; display:grid; gap:.5rem; }
.conv-row {
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding:.65rem 1rem; border-radius:12px; background:var(--input-bg);
  border:1px solid var(--border); font-weight:700; font-size:.92rem;
}
.conv-row small { font-weight:600; color:var(--text-soft); }

/* ---------- Side notes ---------- */
.side-note { margin-top:1.2rem; }
.side-note h3 { font-size:1rem; }
.side-note ul { margin:.5rem 0 0 1.1rem; display:grid; gap:.3rem; color:var(--text-soft); font-size:.9rem; }
.note-card {
  display:flex; gap:.8rem; padding:.9rem 1rem; border-radius:14px;
  background:var(--input-bg); border:1px solid var(--border);
  font-size:.88rem; color:var(--text-soft); align-items:flex-start;
}
.note-card svg { flex:none; width:18px; height:18px; color:var(--brand-c); margin-top:.15rem; }
.disclaimer {
  font-size:.8rem; color:var(--text-soft); margin-top:2rem;
  padding:1rem 1.2rem; border-left:3px solid var(--brand-c);
  border-radius:0 14px 14px 0; background:var(--input-bg);
}

/* ---------- Quick links to other tools ---------- */
.other-tools { margin-top:4rem; }
.other-tools h2 { text-align:center; font-size:1.6rem; }
.other-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); gap:1.1rem; margin-top:1.8rem; }
.mini-tool {
  display:flex; align-items:center; gap:.9rem;
  padding:1rem 1.1rem; border-radius:1.2rem;
  background:var(--card-bg); border:1px solid var(--border);
  box-shadow:var(--shadow-sm); color:var(--text);
  font-weight:700; font-size:.9rem;
  transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease;
}
.mini-tool:hover { transform:translateY(-5px); box-shadow:var(--shadow-md); }
.mini-tool svg { flex:none; width:24px; height:24px; color:var(--brand-a); }

/* ---------- Responsive (tool pages) ---------- */
@media (max-width:940px){ .tool-layout { grid-template-columns:1fr; } }
@media (max-width:640px){
  .page-hero { padding:7.5rem 0 3.5rem; }
  .glass-panel { padding:1.4rem; }
  .row-2 { grid-template-columns:1fr; }
  .row-2 .swap-btn { justify-self:center; transform:rotate(90deg); }
}
@media (prefers-reduced-motion:reduce){ .page-hero { animation:none; } }

/* ---------- Remittance comparator results ---------- */
.result-zone { margin-top:2.4rem; }
.mid-rate {
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--chip-bg); color:var(--brand-a); font-weight:700; font-size:.85rem;
  padding:.45rem 1rem; border-radius:999px;
}
.compare-summary {
  margin-top:1.2rem; padding:1.1rem 1.4rem; border-radius:1.2rem;
  background:linear-gradient(120deg, rgba(13,148,136,.10), rgba(16,185,129,.10));
  border:1px solid rgba(13,148,136,.25);
  font-size:.92rem; color:var(--text-soft);
  display:flex; gap:.8rem; align-items:flex-start; line-height:1.55;
}
.compare-summary svg { flex:none; width:20px; height:20px; color:var(--brand-b); margin-top:.15rem; }
.compare-summary strong { color:var(--text); }
.compare-summary em { color:var(--brand-a); font-weight:700; font-style:normal; }
.compare-summary.is-hidden { display:none; }

.provider-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:1.1rem; margin-top:1.6rem; }
.provider-card {
  position:relative; display:flex; flex-direction:column; gap:.5rem;
  padding:1.35rem; border-radius:1.3rem; background:var(--card-bg);
  border:1px solid var(--border); box-shadow:var(--shadow-sm);
  animation:riseIn .45s ease both;
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.provider-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-md); }
.provider-card.is-best { border-color:var(--brand-b); box-shadow:0 0 0 3px rgba(16,185,129,.22), var(--shadow-md); }
.best-ribbon {
  position:absolute; top:-12px; left:1rem; padding:.28rem .75rem; border-radius:999px;
  font-size:.66rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:#fff; background:linear-gradient(120deg,var(--palm-500),var(--aqua-600));
  box-shadow:var(--shadow-sm);
}
.provider-top { display:flex; align-items:center; justify-content:space-between; gap:.6rem; }
.provider-top h3 { font-size:1.02rem; }
.provider-logo { width:38px; height:38px; border-radius:10px; display:grid; place-items:center; color:#fff; font-weight:800; font-size:.85rem; box-shadow:var(--shadow-sm); }
.received-value { font-size:1.55rem; font-weight:800; letter-spacing:-.02em; }
.received-value em { font-style:normal; font-size:.78rem; font-weight:700; color:var(--text-soft); margin-left:.3rem; }
.provider-tags { display:flex; gap:.4rem; flex-wrap:wrap; }
.provider-tags span { font-size:.68rem; font-weight:700; padding:.24rem .6rem; border-radius:999px; background:var(--chip-bg); color:var(--brand-a); }
.provider-metrics { display:grid; gap:.28rem; font-size:.8rem; color:var(--text-soft); border-top:1px dashed var(--border); padding-top:.7rem; }
.provider-metrics strong { color:var(--text); }
.loss-line { font-weight:700; }
.loss-line.neg { color:var(--brand-c); }
.empty-note { color:var(--text-soft); padding:.4rem 0; font-weight:600; }

/* two-column field row without a swap button */
.row-2.plain { grid-template-columns:1fr 1fr; }
@media (max-width:640px){ .row-2.plain { grid-template-columns:1fr; } }

/* ---------- Generic helpers ---------- */
.is-hidden { display:none !important; }

/* ---------- Cost of living results ---------- */
.col-meta {
  display:inline-flex; align-items:center; gap:.5rem; margin-top:1.6rem;
  background:var(--chip-bg); color:var(--brand-a); font-weight:700; font-size:.85rem;
  padding:.45rem 1rem; border-radius:999px;
}
.col-result { margin-top:1.6rem; display:grid; grid-template-columns:1.05fr .95fr; gap:1.6rem; align-items:start; }
.col-panel {
  background:var(--card-bg); border:1px solid var(--border);
  border-radius:1.4rem; padding:1.7rem; box-shadow:var(--shadow-md);
}
.col-hero { text-align:center; }
.col-hero .flag-big { font-size:2.3rem; }
.col-total {
  margin-top:.4rem; font-size:clamp(2rem, 5vw, 2.8rem); font-weight:800; letter-spacing:-.02em;
  background:linear-gradient(110deg,var(--brand-a),var(--brand-c));
  -webkit-background-clip:text; background-clip:text; color:transparent; line-height:1.15;
}
.col-total-sub { color:var(--text-soft); font-weight:700; margin-top:.3rem; }
.col-city { font-size:.85rem; color:var(--text-soft); font-weight:600; margin-top:.7rem; }
.col-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(128px,1fr)); gap:.8rem; margin-top:1.4rem; }
.col-stat { background:var(--input-bg); border:1px solid var(--border); border-radius:1rem; padding:.85rem 1rem; text-align:left; }
.col-stat small { display:block; font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--text-soft); }
.col-stat strong { display:block; font-size:1.2rem; margin-top:.15rem; }
.col-bars-title { font-weight:800; font-size:.95rem; margin-bottom:.2rem; }
.col-bars { display:grid; gap:.85rem; margin-top:1.1rem; }
.col-bar-row { display:grid; grid-template-columns:96px 1fr 108px; gap:.75rem; align-items:center; font-size:.83rem; font-weight:700; }
.col-bar { height:10px; border-radius:999px; background:var(--input-bg); overflow:hidden; }
.col-bar i {
  display:block; height:100%; border-radius:999px;
  background:linear-gradient(90deg, var(--bar-a), var(--bar-b));
  transform-origin:left; animation:barFill .9s cubic-bezier(.16,1,.3,1) both;
}
@keyframes barFill { from{transform:scaleX(0)} to{transform:scaleX(1)} }
.col-bar-val { text-align:right; color:var(--text-soft); font-variant-numeric:tabular-nums; }
.col-bar-val em { font-style:normal; color:var(--brand-a); font-weight:800; }
.col-note {
  margin-top:1.3rem; font-size:.83rem; color:var(--text-soft);
  display:flex; gap:.6rem; align-items:flex-start; line-height:1.5;
}
.col-note svg { flex:none; width:17px; height:17px; color:var(--brand-c); margin-top:.1rem; }
@media (max-width:940px){ .col-result { grid-template-columns:1fr; } }
@media (max-width:560px){
  .col-bar-row { grid-template-columns:78px 1fr 92px; gap:.5rem; }
  .col-stats { grid-template-columns:repeat(2, 1fr); }
}

/* ---------- Import duty results ---------- */
.duty-meta {
  display:inline-flex; align-items:center; gap:.5rem; margin-top:1.6rem;
  background:var(--chip-bg); color:var(--brand-a); font-weight:700; font-size:.85rem;
  padding:.45rem 1rem; border-radius:999px;
}
.duty-result { margin-top:1.2rem; display:grid; grid-template-columns:minmax(0, 340px) 1fr; gap:1.6rem; align-items:stretch; }
.duty-hero {
  display:flex; flex-direction:column; justify-content:center; text-align:center;
  background:linear-gradient(130deg, rgba(13,148,136,.14), rgba(249,115,22,.14));
  border:1px solid rgba(13,148,136,.30); border-radius:1.4rem; padding:2rem;
}
.duty-hero .big-local {
  font-size:clamp(1.7rem,4.5vw,2.5rem); font-weight:800; letter-spacing:-.02em; line-height:1.15;
  background:linear-gradient(110deg,var(--brand-a),var(--brand-c));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.duty-hero .big-usd { color:var(--text-soft); font-weight:700; margin-top:.4rem; }
.duty-rows { display:grid; gap:.45rem; }
.duty-rows .conv-row { font-size:.88rem; }
.duty-notes { margin-top:1rem; font-size:.82rem; color:var(--text-soft); display:flex; gap:.55rem; align-items:flex-start; line-height:1.5; }
.duty-notes svg { flex:none; width:16px; height:16px; color:var(--brand-c); margin-top:.12rem; }
@media (max-width:860px){ .duty-result { grid-template-columns:1fr; } }
.duty-rows .total-cell { font-weight:800; color:var(--brand-c); }

/* ---------- Citizenship by investment ---------- */
.cbi-meta {
  display:inline-flex; align-items:center; gap:.5rem; margin-top:1.6rem;
  background:var(--chip-bg); color:var(--brand-a); font-weight:700; font-size:.85rem;
  padding:.45rem 1rem; border-radius:999px;
}
.cbi-result { margin-top:1.2rem; display:grid; grid-template-columns:minmax(0, 340px) 1fr; gap:1.6rem; align-items:stretch; }
.cbi-hero { text-align:center; }
.cbi-facts { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:.7rem; margin-top:1.4rem; }
.prog-fact { background:var(--input-bg); border:1px solid var(--border); border-radius:1rem; padding:.8rem .9rem; }
.prog-fact small { display:block; font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.07em; color:var(--text-soft); }
.prog-fact strong { font-size:1.05rem; }
.prog-blurb { margin-top:1.1rem; font-size:.88rem; color:var(--text-soft); border-left:3px solid var(--brand-c); padding-left:.8rem; }
.prog-summary { margin-top:.9rem; font-size:.85rem; color:var(--text-soft); line-height:1.5; }
.cbi-compare { margin-top:1.3rem; }
.cbi-compare h3 { font-size:.9rem; margin-bottom:.7rem; color:var(--text-soft); }
@media (max-width:860px){ .cbi-result { grid-template-columns:1fr; } }

/* ---------- Flight distance & time ---------- */
.flight-result { margin-top:1.5rem; text-align:center; }
.flight-result .result-value { font-size:clamp(1.9rem, 5vw, 2.6rem); }
.flight-metrics { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1rem; margin-top:1.6rem; }
.flight-metric { background:var(--input-bg); border:1px solid var(--border); border-radius:1.2rem; padding:1.1rem 1rem; }
.flight-metric small { display:block; font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--text-soft); }
.flight-metric strong { display:block; font-size:1.5rem; margin-top:.2rem; letter-spacing:-.02em; background:linear-gradient(110deg,var(--brand-a),var(--brand-c)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.flight-metric .tag { font-size:.72rem; color:var(--text-soft); font-weight:700; margin-top:.1rem; }
.flight-sub { margin-top:1.2rem; font-size:.86rem; color:var(--text-soft); }
.flight-top { margin-top:1rem; font-size:.82rem; color:var(--text-soft); display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; }
.flight-top span { background:var(--chip-bg); color:var(--brand-a); border-radius:999px; padding:.3rem .8rem; font-weight:700; }

/* ---------- USD conversion example table ---------- */
.example-table { margin: 1.2rem 0 0; }
.example-table p { color: var(--text-soft); margin-bottom: 1rem; }
.example-rows { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .6rem; }
.example-row { display: flex; justify-content: space-between; align-items: center; background: var(--input-bg); border: 1px solid var(--border); border-radius: .8rem; padding: .7rem .9rem; }
.example-row span { color: var(--text-soft); font-weight: 600; }
.example-row strong { font-weight: 700; }