/* Visa Docs Display — frontend styles.
   Layout concept: a passport-page spread — each region is a "page" with a
   corner stamp showing its count; destinations list like stamped entries,
   expanding (native <details>) to the full visa-service detail instead of
   the old page's always-open cards.
   Scoped under [data-vdd] / .vdd- so it never leaks into the theme. */

[data-vdd] {
  --vdd-bg: #FBFAF3;
  --vdd-surface: #F3F3EA;
  --vdd-surface-raised: #FFFFFF;
  --vdd-fg: #111507;
  --vdd-fg-muted: #55624F;
  --vdd-border: #D9D6C4;
  --vdd-accent: #19554A;
  --vdd-accent-soft: #C9E5D8;
  --vdd-gold: #A88808;
  --vdd-gold-soft: #F1E6C4;
  --vdd-required: #8A3A1F;
  --vdd-required-soft: #F3E1D6;
  --vdd-not-required: #19554A;
  --vdd-not-required-soft: #DCE9E3;
  --vdd-unknown: #7A7563;
  --vdd-unknown-soft: #EAE7DB;
  --vdd-font-display: 'Fraunces', Georgia, serif;
  --vdd-font-body: 'Public Sans', system-ui, -apple-system, sans-serif;

  font-family: var(--vdd-font-body);
  color: var(--vdd-fg);
  background: var(--vdd-bg);
  width: 100%;
  padding: 24px 20px 60px;
  line-height: 1.5;
}

@media (prefers-color-scheme: dark) {
  [data-vdd] {
    --vdd-bg: #111507; --vdd-surface: #1A2016; --vdd-surface-raised: #1F271B;
    --vdd-fg: #F3F3EA; --vdd-fg-muted: #AEB39F; --vdd-border: #333B2A;
    --vdd-accent: #8FD4B8; --vdd-accent-soft: #233A30; --vdd-gold: #E0BB4C;
    --vdd-gold-soft: #3A2F14; --vdd-required: #E8A685; --vdd-required-soft: #3A2416;
    --vdd-not-required: #8FD4B8; --vdd-not-required-soft: #1D332A;
    --vdd-unknown: #AEB39F; --vdd-unknown-soft: #262A1F;
  }
}

[data-vdd] * { box-sizing: border-box; }
[data-vdd] h2 { font-family: var(--vdd-font-display); font-weight: 600; margin: 0; }
[data-vdd] .vdd-dest-fee,
[data-vdd] .vdd-ccy { font-variant-numeric: tabular-nums; }

/* ---------- Sticky controls ---------- */
[data-vdd] .vdd-controls {
  position: sticky; top: 0; z-index: 5; background: var(--vdd-bg);
  padding: 14px 0 12px; border-bottom: 1px solid var(--vdd-border);
  display: flex; flex-direction: column; gap: 12px;
}
[data-vdd] .vdd-search-row { position: relative; }
[data-vdd] .vdd-search {
  width: 100%; font: inherit; font-size: 15px; padding: 12px 14px 12px 40px;
  border-radius: 10px; border: 1px solid var(--vdd-border);
  background: var(--vdd-surface-raised); color: var(--vdd-fg);
}
[data-vdd] .vdd-search::placeholder { color: var(--vdd-fg-muted); }
[data-vdd] .vdd-search:focus { outline: 2px solid var(--vdd-accent); outline-offset: 1px; }
[data-vdd] .vdd-icon-search {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--vdd-fg-muted); pointer-events: none;
}
[data-vdd] .vdd-chips { display: flex; gap: 8px; flex-wrap: wrap; }
[data-vdd] .vdd-chip {
  font: inherit; font-size: 13px; font-weight: 600; padding: 7px 13px;
  border-radius: 999px; border: 1px solid var(--vdd-border);
  background: var(--vdd-surface-raised); color: var(--vdd-fg-muted); cursor: pointer;
  white-space: nowrap;
}
[data-vdd] .vdd-chip[aria-pressed="true"] {
  background: var(--vdd-accent); border-color: var(--vdd-accent); color: var(--vdd-accent-soft);
}
[data-vdd] .vdd-result-count { font-size: 12.5px; color: var(--vdd-fg-muted); }

/* ---------- Region "page" ---------- */
[data-vdd] .vdd-region { margin-top: 36px; }
[data-vdd] .vdd-region-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding-bottom: 10px; border-bottom: 2px solid var(--vdd-fg); margin-bottom: 4px;
}
[data-vdd] .vdd-region-head h2 { font-size: 21px; }
[data-vdd] .vdd-region-stamp {
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em; color: var(--vdd-fg-muted);
  text-transform: uppercase; white-space: nowrap;
}

/* ---------- Destination row (native <details>/<summary>) ---------- */
[data-vdd] .vdd-dest { border-bottom: 1px solid var(--vdd-border); }
[data-vdd] .vdd-dest:last-child { border-bottom: none; }
[data-vdd] .vdd-dest-row {
  display: flex; align-items: center; gap: 14px; padding: 14px 2px;
  list-style: none; cursor: pointer;
}
[data-vdd] .vdd-dest-row::-webkit-details-marker { display: none; }
[data-vdd] .vdd-dest-flag {
  width: 28px; height: 28px; border-radius: 50%; object-fit: cover;
  flex-shrink: 0; background: var(--vdd-border);
}
[data-vdd] .vdd-dest-flag-placeholder { display: inline-block; }
[data-vdd] .vdd-dest-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
[data-vdd] .vdd-dest-name { font-weight: 600; font-size: 15px; }
[data-vdd] .vdd-dest-sub { font-size: 12.5px; color: var(--vdd-fg-muted); }
[data-vdd] .vdd-dest-fee { font-weight: 700; font-size: 15px; white-space: nowrap; }
[data-vdd] .vdd-ccy { font-size: 11px; font-weight: 600; color: var(--vdd-fg-muted); margin-right: 2px; }
[data-vdd] .vdd-chev { width: 16px; height: 16px; flex: none; color: var(--vdd-fg-muted); transition: transform .15s ease; }
[data-vdd] .vdd-dest[open] .vdd-chev { transform: rotate(90deg); }

[data-vdd] .vdd-dest-detail { padding: 0 2px 18px 2px; }
[data-vdd] .vdd-detail-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px; margin-bottom: 12px;
}
[data-vdd] .vdd-detail-item { background: var(--vdd-surface); border-radius: 8px; padding: 10px 12px; }
[data-vdd] .vdd-k { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--vdd-fg-muted); margin-bottom: 3px; }
[data-vdd] .vdd-v { font-size: 13.5px; font-weight: 600; }
[data-vdd] .vdd-status-pill {
  display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600;
  padding: 3px 9px; border-radius: 999px;
}
[data-vdd] .vdd-status-pill.required { background: var(--vdd-required-soft); color: var(--vdd-required); }
[data-vdd] .vdd-status-pill.not-required { background: var(--vdd-not-required-soft); color: var(--vdd-not-required); }
[data-vdd] .vdd-status-pill.conditional { background: var(--vdd-gold-soft); color: var(--vdd-gold); }
[data-vdd] .vdd-status-pill.unknown { background: var(--vdd-unknown-soft); color: var(--vdd-unknown); }
[data-vdd] .vdd-includes { font-size: 13px; color: var(--vdd-fg-muted); margin: 0 0 4px; }
[data-vdd] .vdd-includes b { color: var(--vdd-fg); font-weight: 600; }
[data-vdd] .vdd-notes { font-style: italic; }

[data-vdd] .vdd-empty-state { text-align: center; padding: 60px 20px; color: var(--vdd-fg-muted); }
[data-vdd] .vdd-empty-state h3 { font-family: var(--vdd-font-display); color: var(--vdd-fg); margin: 0 0 6px; font-size: 17px; }
[data-vdd] .vdd-empty-state p { margin: 0; }

@media (max-width: 480px) {
  [data-vdd] { padding: 20px 16px 50px; }
  [data-vdd] .vdd-dest-fee { font-size: 13.5px; }
}