/* Travel tools (site/flights, site/visa) — logical properties only, RTL-safe. */

.tool-shell { display: grid; gap: 1.5rem; }
.tool-shell > * { min-inline-size: 0; }
@media (min-width: 64rem) {
  .tool-shell { grid-template-columns: 6fr 5fr; gap: 2rem; align-items: start; }
  .tool-result { position: sticky; inset-block-start: 6rem; }
}

.tool-form { display: grid; gap: 1.5rem; padding: 1.5rem; border-radius: var(--r-xl); background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
@media (min-width: 40rem) { .tool-form { padding: 2rem; } }
.tool-form__title { font-size: 1.25rem; margin: 0; }
.tool-fieldset { display: grid; gap: .75rem; margin: 0; padding: 0; border: 0; min-inline-size: 0; }
.tool-fieldset legend { padding: 0; margin-block-end: .75rem; font-weight: 700; color: var(--ink); }
.tool-fieldset .hint { margin: 0; }

.tool-origins { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.tool-origin { display: flex; align-items: center; gap: .75rem; padding: .5rem .5rem .5rem .75rem; padding-inline: .75rem .5rem; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); }
.tool-origin__name { display: flex; align-items: center; gap: .625rem; flex: 1 1 auto; min-inline-size: 0; color: var(--ink); }
.tool-origin__name strong { overflow-wrap: anywhere; }
.tool-num { inline-size: 5.5rem; flex: none; text-align: center; -moz-appearance: textfield; }
.tool-num::-webkit-inner-spin-button, .tool-num::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.tool-remove { flex: none; }
.tool-add { display: grid; gap: .75rem; align-items: end; grid-template-columns: 1fr auto; }
.tool-add .field:first-child { grid-column: 1 / -1; }
@media (min-width: 40rem) { .tool-add { grid-template-columns: 1fr auto auto; } .tool-add .field:first-child { grid-column: auto; } }
.tool-add .btn { white-space: nowrap; }

.tool-result { display: grid; gap: 1rem; min-inline-size: 0; }
.tool-total > p, .tool-compare > p { margin: 0; }
.tool-total.is-busy, .tool-compare.is-busy { opacity: .65; transition: opacity .15s; }
.tool-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 0; }
.tool-kpis > div { min-inline-size: 0; }
.tool-kpis .span-2 { grid-column: 1 / -1; }
.tool-kpis dt { font-size: var(--fs-sm); color: var(--mute); }
.tool-kpis dd { margin: .25rem 0 0; font-weight: 800; font-size: 1.125rem; color: var(--ink); overflow-wrap: anywhere; }
.tool-kpis dd.price { font-family: var(--font-display); font-size: clamp(1.4rem, 4.5vw, 1.875rem); letter-spacing: -0.03em; }

.tool-table-wrap { overflow-x: visible; }
table.rooms.tool-table { min-inline-size: 0; table-layout: auto; }
table.rooms.tool-table th, table.rooms.tool-table td { padding: .75rem; vertical-align: top; }
table.rooms.tool-table td:first-child { white-space: normal; }
table.rooms.tool-table td:not(:first-child) { font-variant-numeric: tabular-nums; }
.tool-meta { display: block; margin-block: .2rem .35rem; }

.tool-badge { display: inline-flex; align-items: center; gap: .25rem; padding: .15rem .55rem; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 700; background: var(--slate-100); color: var(--slate-700); white-space: nowrap; }
.tool-badge--direct { background: var(--teal-50); color: var(--teal-700); }
.tool-badge--stop { background: var(--blue-50); color: var(--blue-700); }

.tool-compare__title { font-size: 1.25rem; margin: 0; }
.tool-rank { display: grid; gap: .75rem; margin: 0; padding: 0; list-style: none; }
.tool-rank__item { display: flex; gap: .875rem; align-items: flex-start; padding: 1rem; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); }
.tool-rank__item:first-child { border-color: var(--blue-200); background: var(--blue-50); }
.tool-rank__pos { flex: none; display: grid; place-items: center; inline-size: 2rem; block-size: 2rem; border-radius: 50%; background: var(--navy-900); color: var(--white); font-weight: 800; font-size: var(--fs-sm); }
.tool-rank__item:first-child .tool-rank__pos { background: var(--blue); }
.tool-rank__body { display: grid; gap: .35rem; min-inline-size: 0; }
.tool-rank__body p { margin: 0; }
.tool-rank__name { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; color: var(--ink); }
.tool-rank__actions { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; margin-block-start: .25rem !important; }

/* Visa statuses: teal only for "no visa needed". */
.tool-counts { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.visa-pill { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .6rem; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 700; line-height: 1.4; white-space: nowrap; border: 1px solid transparent; }
.visa-pill .ico { inline-size: .875rem; block-size: .875rem; flex: none; }
.visa-pill--free { background: var(--teal-50); color: var(--teal-700); border-color: var(--teal-100); }
.visa-pill--voa { background: var(--blue-50); color: var(--blue-700); border-color: var(--blue-100); }
.visa-pill--evisa { background: var(--blue-100); color: var(--navy-900); border-color: var(--blue-200); }
.visa-pill--required { background: var(--navy-900); color: var(--white); }
.visa-pill--check { background: var(--white); color: var(--ink); border: 1px dashed var(--slate-400); }
.visa-pill--home { background: var(--slate-100); color: var(--slate-700); }
.visa-note { display: block; margin-block-start: .35rem; font-size: var(--fs-xs); color: var(--mute); white-space: normal; max-inline-size: 14rem; }
.tool-warn { font-weight: 700; color: var(--ink); text-decoration: underline dotted; text-underline-offset: 3px; }

.tool-matrix { margin-block-start: 2rem; display: grid; gap: .75rem; }
.tool-matrix h3 { margin: 0; font-size: 1.25rem; }
.visa-table-wrap { overflow-x: auto; border-radius: var(--r-lg); }
table.rooms.visa-table th, table.rooms.visa-table td { padding: .65rem .75rem; vertical-align: top; }
table.rooms.visa-table tbody th { text-align: start; white-space: nowrap; font-weight: 700; color: var(--ink); background: var(--white); position: sticky; inset-inline-start: 0; z-index: 1; }
table.rooms.visa-table thead th { white-space: nowrap; }

.tool-disclaimer { margin-block-end: 1.5rem; border: 1px solid var(--blue-200); }
.tool-disclaimer p { margin: 0; }
.tool-disclaimer > div { display: grid; gap: .35rem; }

.tool-footnotes { margin-block-start: 2rem; padding: 1.25rem 1.5rem; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.tool-footnotes p { margin: 0 0 .5rem; color: var(--ink); }
.tool-footnotes ol { margin: 0; padding-inline-start: 1.25rem; display: grid; gap: .35rem; }

.tool-sources { margin-block-start: 2.5rem; display: grid; gap: .75rem; }
.tool-sources h3, .tool-sources p { margin: 0; }
.tool-source-list { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 48rem) { .tool-source-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tool-source-list li { display: flex; flex-wrap: wrap; gap: .25rem .75rem; padding: .875rem 1rem; border-radius: var(--r-md); background: var(--white); border: 1px solid var(--line); font-size: var(--fs-sm); }
.tool-source-list strong { inline-size: 100%; color: var(--ink); }
.tool-source-list a { overflow-wrap: anywhere; }

@media (max-width: 30rem) {
  table.rooms.tool-table { font-size: var(--fs-xs); }
  table.rooms.tool-table th, table.rooms.tool-table td { padding: .6rem .45rem; }
  .tool-num { inline-size: 4.5rem; }
}