/* VisaBreeze Tools — shared styling.
 *
 * EVERYTHING IS SCOPED UNDER .vb-tool ON PURPOSE.
 *
 * Three traps were hit for real building the chat widget, and all three apply
 * to any component dropped into this theme:
 *
 *   1. Astra and Elementor style bare `button` elements site-wide and beat
 *      single-class selectors, so buttons render as dark rectangles unless the
 *      appearance is re-stated rather than inherited.
 *   2. Elementor's global kit sets `text-shadow: rgba(0,0,0,.3) 0 0 10px` on
 *      every button on the site, which smears small labels.
 *   3. Raising specificity breaks the `hidden` attribute — `.vb-tool .x`
 *      (0,2,0) outranks the UA sheet's `[hidden]{display:none}` (0,0,1,0) — so
 *      the hidden rule has to be re-stated at matching specificity.
 *
 * Colours come from the site: brand blue #467FF7 is its CTA colour, and the
 * body font is inherited (IBM Plex Sans Thai Looped) rather than loaded.
 * Line height is 1.75 because Thai stacks marks above and below the baseline.
 */

.vb-tool {
	/* #3467d6, not the site's #467FF7. The lighter brand blue measures 3.72:1
	 * against white — below WCAG AA (4.5) for the small source links, and for
	 * white button labels in the other direction. This shade is 5.18:1 BOTH
	 * ways and still reads as the same blue. Overridable per page via the
	 * accent setting, which writes this variable inline. */
	--vb-blue: #3467d6;
	--vb-ink: #1b1f2a;
	--vb-muted: #656d7e;
	--vb-line: #e3e6ec;
	--vb-bg: #f7f8fa;
	--vb-card: #fff;
	--vb-ok: #00713b;
	--vb-ok-bg: #edfaef;
	--vb-warn: #8a6300;
	--vb-warn-bg: #fdf8e6;
	--vb-bad: #a5252b;
	--vb-bad-bg: #fdf0f1;

	background: var(--vb-bg);
	border: 1px solid var(--vb-line);
	border-radius: 16px;
	padding: 22px;
	margin: 0 0 26px;
	color: var(--vb-ink);
	font-size: 15px;
	line-height: 1.75;
	/* Thai has no word spaces, so long unbroken runs (a comma-separated country
	 * list) otherwise force horizontal page scroll on mobile. */
	overflow-wrap: break-word;
}

.vb-tool *,
.vb-tool *::before,
.vb-tool *::after { box-sizing: border-box; }

.vb-tool__head { margin-bottom: 18px; }
.vb-tool__title { font-size: 21px; line-height: 1.4; margin: 0 0 6px; }
.vb-tool__blurb { margin: 0; color: var(--vb-muted); font-size: 14px; }
.vb-tool__hint { color: var(--vb-muted); font-size: 14px; margin: 0; }

/* Trap 1 + 2: re-state everything rather than inheriting it. */
.vb-tool button {
	-webkit-appearance: none;
	appearance: none;
	display: inline-block;
	background: var(--vb-blue);
	color: #fff;
	border: 1px solid var(--vb-blue);
	border-radius: 999px;
	padding: 10px 20px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: normal;
	text-transform: none;
	text-shadow: none;
	box-shadow: none;
	cursor: pointer;
	transition: opacity .15s;
}

.vb-tool button:hover { opacity: .88; }
.vb-tool button:focus-visible { outline: 3px solid rgba(70, 127, 247, .45); outline-offset: 2px; }

.vb-tool button.vb-ghost {
	background: var(--vb-card);
	color: var(--vb-blue);
	border-color: var(--vb-line);
}

.vb-tool button.vb-small { padding: 6px 12px; font-size: 13px; }

/* Trap 3: re-state the hidden rule at this specificity. */
.vb-tool [hidden] { display: none !important; }

.vb-tool label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; color: var(--vb-ink); }
.vb-tool .vb-field { margin-bottom: 14px; }
.vb-tool .vb-row { display: flex; gap: 12px; flex-wrap: wrap; }
.vb-tool .vb-row > * { flex: 1 1 190px; min-width: 0; }

.vb-tool input[type="text"],
.vb-tool input[type="number"],
.vb-tool input[type="date"],
.vb-tool input[type="email"],
.vb-tool select {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--vb-line);
	border-radius: 10px;
	background: var(--vb-card);
	font-family: inherit;
	font-size: 15px;
	color: var(--vb-ink);
	line-height: 1.5;
}

.vb-tool input[type="checkbox"] { width: auto; margin-right: 8px; }
.vb-tool .vb-inline { display: flex; align-items: flex-start; gap: 8px; font-weight: 400; }

.vb-tool .vb-panel {
	background: var(--vb-card);
	border: 1px solid var(--vb-line);
	border-radius: 12px;
	padding: 18px;
	margin-top: 16px;
}

.vb-tool .vb-big { font-size: 27px; font-weight: 700; line-height: 1.3; margin: 0 0 4px; }
.vb-tool .vb-big.is-warn { color: var(--vb-warn); }
.vb-tool .vb-big.is-bad { color: var(--vb-bad); }

.vb-tool .vb-hint { font-size: 13.5px; color: var(--vb-muted); margin: 0 0 8px; }

.vb-tool .vb-note { border-radius: 10px; padding: 12px 14px; font-size: 14px; margin-top: 12px; }
.vb-tool .vb-note.ok { background: var(--vb-ok-bg); color: var(--vb-ok); }
.vb-tool .vb-note.warn { background: var(--vb-warn-bg); color: var(--vb-warn); }
.vb-tool .vb-note.bad { background: var(--vb-bad-bg); color: var(--vb-bad); }

.vb-tool .vb-pill {
	display: inline-block; font-size: 11.5px; font-weight: 600;
	padding: 2px 9px; border-radius: 999px; margin-left: 6px;
	background: var(--vb-ok-bg); color: var(--vb-ok); vertical-align: middle;
}
.vb-tool .vb-pill.warn { background: var(--vb-warn-bg); color: var(--vb-warn); }
.vb-tool .vb-pill.bad { background: var(--vb-bad-bg); color: var(--vb-bad); }

/* Tables scroll inside their own box; the page never scrolls sideways. */
.vb-tool .vb-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.vb-tool table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.vb-tool table th,
.vb-tool table td { text-align: left; padding: 9px 8px; border-bottom: 1px solid var(--vb-line); vertical-align: top; }
.vb-tool table th { font-size: 12.5px; color: var(--vb-muted); font-weight: 600; }
.vb-tool table td.num, .vb-tool table th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.vb-tool table tr.total td { font-weight: 700; border-top: 2px solid var(--vb-line); border-bottom: none; }

.vb-tool ul.vb-list { list-style: none; margin: 0; padding: 0; }
.vb-tool ul.vb-list li { padding: 10px 0 10px 24px; border-bottom: 1px solid var(--vb-line); position: relative; }
.vb-tool ul.vb-list li::before { content: "•"; position: absolute; left: 6px; color: var(--vb-blue); font-weight: 700; }
.vb-tool ul.vb-list li:last-child { border-bottom: none; }

.vb-tool ul.vb-checklist { list-style: none; margin: 0 0 6px; padding: 0; }
.vb-tool ul.vb-checklist li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--vb-line); }
.vb-tool ul.vb-checklist li:last-child { border-bottom: none; }
.vb-tool ul.vb-checklist input { margin-top: 5px; flex: 0 0 auto; }
.vb-tool ul.vb-checklist label { font-weight: 400; cursor: pointer; margin: 0; }
.vb-tool ul.vb-checklist strong { font-weight: 600; }
.vb-tool ul.vb-checklist input:checked + label { opacity: .5; }
.vb-tool ul.vb-checklist input:checked + label strong { text-decoration: line-through; }

.vb-tool .vb-why { display: block; font-size: 13px; color: var(--vb-muted); margin-top: 3px; }

.vb-tool .vb-meter { height: 10px; border-radius: 999px; background: var(--vb-line); overflow: hidden; margin: 10px 0 6px; }
.vb-tool .vb-meter > span { display: block; height: 100%; background: var(--vb-blue); transition: width .25s; }
.vb-tool .vb-meter.is-warn > span { background: var(--vb-warn); }
.vb-tool .vb-meter.is-bad > span { background: var(--vb-bad); }

.vb-tool .vb-bar { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; margin-bottom: 12px; font-size: 14px; }
.vb-tool .vb-bar .track { grid-column: 1 / -1; height: 8px; border-radius: 999px; background: var(--vb-line); overflow: hidden; }
.vb-tool .vb-bar .track > span { display: block; height: 100%; background: var(--vb-blue); }
.vb-tool .vb-bar .amt { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

.vb-tool ol.vb-timeline { list-style: none; margin: 0; padding: 0 0 0 26px; position: relative; }
.vb-tool ol.vb-timeline::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: var(--vb-line); }
.vb-tool ol.vb-timeline li { position: relative; padding: 0 0 20px; }
.vb-tool ol.vb-timeline li::before { content: ""; position: absolute; left: -25px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--vb-blue); border: 2px solid var(--vb-card); }
.vb-tool ol.vb-timeline li.is-past::before { background: var(--vb-muted); }
.vb-tool ol.vb-timeline .when { font-weight: 600; }
.vb-tool ol.vb-timeline .what { color: var(--vb-muted); font-size: 13.5px; display: block; margin-top: 2px; }

.vb-tool .vb-source {
	font-size: 13px; color: var(--vb-muted); margin-top: 14px;
	padding-top: 12px; border-top: 1px solid var(--vb-line);
}
.vb-tool .vb-source a { color: var(--vb-blue); }

.vb-tool .vb-drop {
	border: 2px dashed var(--vb-line); border-radius: 12px; padding: 26px 18px;
	text-align: center; color: var(--vb-muted); cursor: pointer; background: var(--vb-card);
}
.vb-tool .vb-drop.is-over { border-color: var(--vb-blue); background: #eef4ff; }
.vb-tool .vb-preview { max-width: 210px; border-radius: 10px; display: block; margin: 16px auto 0; }

/* Static reference content rendered server-side. Not inside .vb-tool, because
 * the optimizer's post_content sync reads it as ordinary page markup. */
.vb-tool-seo { margin: 0 0 26px; }
.vb-tool-seo table { width: 100%; border-collapse: collapse; }
.vb-tool-seo th, .vb-tool-seo td { text-align: left; padding: 8px; border-bottom: 1px solid #e3e6ec; }

@media (max-width: 600px) {
	.vb-tool { padding: 16px; border-radius: 12px; }
	.vb-tool__title { font-size: 19px; }
	.vb-tool .vb-big { font-size: 23px; }
	.vb-tool .vb-row > * { flex: 1 1 100%; }

	/* 16px minimum, or iOS Safari zooms the whole page the moment a field is
	 * focused — which on the country picker means the layout lurches exactly
	 * as the visitor starts typing. */
	.vb-tool input[type="text"],
	.vb-tool input[type="number"],
	.vb-tool input[type="date"],
	.vb-tool input[type="email"],
	.vb-tool select,
	.vb-tool .vb-combo__input { font-size: 16px; }

	/* Keep the dropdown usable on a short screen. */
	.vb-tool .vb-combo__list { max-height: 50vh; }
}

@media print {
	.vb-tool { background: #fff; border: none; padding: 0; }
	.vb-tool button, .vb-tool .vb-noprint { display: none !important; }
}

/* Searchable country picker (T.combo).
 *
 * Replaces a 198-option <select>, which is unusable on a phone. The list is
 * absolutely positioned so it overlays following content instead of pushing the
 * layout around as the visitor types. */
.vb-tool .vb-combo { position: relative; }

.vb-tool .vb-combo__input {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--vb-line);
	border-radius: 10px;
	background: var(--vb-card);
	font-family: inherit;
	font-size: 15px;
	color: var(--vb-ink);
	line-height: 1.5;
}

.vb-tool .vb-combo__input:focus-visible {
	outline: 3px solid rgba(70, 127, 247, .45);
	outline-offset: 1px;
}

.vb-tool .vb-combo__list {
	position: absolute;
	z-index: 40;
	left: 0;
	right: 0;
	top: calc(100% + 4px);
	max-height: 280px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	margin: 0;
	padding: 4px;
	list-style: none;
	background: var(--vb-card);
	border: 1px solid var(--vb-line);
	border-radius: 12px;
	box-shadow: 0 12px 28px rgba(27, 31, 42, .14);
}

.vb-tool .vb-combo__opt {
	display: flex;
	align-items: baseline;
	gap: 8px;
	flex-wrap: wrap;
	padding: 9px 10px;
	border-radius: 8px;
	cursor: pointer;
	font-size: 15px;
}

.vb-tool .vb-combo__opt:hover,
.vb-tool .vb-combo__opt.is-active { background: #eef4ff; }
.vb-tool .vb-combo__opt[aria-selected="true"] .vb-combo__label { font-weight: 700; }
.vb-tool .vb-combo__sub { font-size: 12.5px; color: var(--vb-muted); }
.vb-tool .vb-combo__none { padding: 12px 10px; color: var(--vb-muted); font-size: 14px; }

/* Re-state the hidden rule: .vb-tool .vb-combo__list (0,2,0) outranks the UA
 * sheet's [hidden]{display:none} (0,0,1,0), so `list.hidden = true` would
 * otherwise stop hiding anything — the exact trap the chat widget hit. */
.vb-tool .vb-combo__list[hidden] { display: none !important; }

/* ---------------------------------------------------------------- tool pages
 *
 * DO NOT put bare element selectors under `body.vb-tool-page`. That is scoped
 * to the page but NOT to the article, so `body.vb-tool-page img` restyles the
 * header and footer logo and `body.vb-tool-page ul` restyles the nav — both of
 * which happened. Page design belongs on the page (Elementor), not in a
 * stylesheet reaching across the whole document.
 *
 * What is left here is limited to the tool's own card and the small helper
 * class the tool itself emits.
 */
.vb-tool .vb-hint,
.vb-tool-seo .vb-hint { font-size: 13.5px; color: #656d7e; }

/* ------------------------------------------------------- tool-page hero
 *
 * Rendered by VB_Tools_Hero, matched to the Elementor hero on /about/
 * (section "Hero" on page 14): min-height 540px desktop / 330px tablet,
 * image cover from top center, a 183deg #FFFFFF -> #000000 gradient veil at
 * 0.75 opacity, and a centred white H1 with a shadow and a 1px dark stroke.
 *
 * LAYOUT. Hello Elementor constrains `.site-main` (500/600/800/1140 at
 * 576/768/992/1200). A hero inside that would sit in the text column, so the
 * constraint is moved off `.site-main` and onto the wrapper the hero renderer
 * puts around the body. That keeps the hero full-bleed WITHOUT a `100vw`
 * breakout, which overflows by the scrollbar width and would reintroduce the
 * horizontal-scroll bug the August layout audit spent a binary search finding.
 *
 * Every selector here is class-scoped. Per the note above, a bare element
 * selector under `body.vb-tool-page` reaches the site header and footer too.
 */
body.vb-tool-page .site-main,
body.vb-tool-page .page-content { max-width: none; padding-inline: 0; }

.vb-tool-page__body { width: 100%; margin-inline: auto; padding-inline: 10px; }
@media (min-width: 576px)  { .vb-tool-page__body { max-width: 500px; } }
@media (min-width: 768px)  { .vb-tool-page__body { max-width: 600px; } }
@media (min-width: 992px)  { .vb-tool-page__body { max-width: 800px; } }
@media (min-width: 1200px) { .vb-tool-page__body { max-width: 1140px; } }

.vb-hero {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 330px;
	margin: 0 0 30px;
	overflow: hidden;
	isolation: isolate;
}
@media (min-width: 1025px) { .vb-hero { min-height: 540px; } }

.vb-hero__img {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
	object-position: top center;
}

.vb-hero__veil {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(183deg, #fff, #000);
	opacity: .75;
}

.vb-hero__in {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 1140px;
	margin-inline: auto;
	padding: 40px 18px;
	text-align: center;
}

/* 80px matches the reference hero's 5rem.
 *
 * SPECIFICITY: this MUST out-rank `.elementor-kit-6503 h1 { font-size: 74px }`,
 * which Elementor's global kit applies to every h1 on the site at (0,1,1). A
 * single class is (0,1,0) and loses, which pinned the hero title at a fixed
 * 74px on a 390px phone and pushed the hero to 660px tall. Scoping it under
 * .vb-hero makes it (0,2,0) and wins without !important. Same family of trap as
 * the kit's button text-shadow noted at the top of this file. */
.vb-hero .vb-hero__title {
	margin: 0;
	color: #fff;
	font-weight: 700;
	/* 1.3, not the 1.12 a Latin display face would take. Thai stacks vowel and
	 * tone marks ABOVE the ascender and below the baseline, and at 80px a 1.12
	 * line box visibly clipped the marks on the upper line (checked on
	 * "เช็กรายประเทศ"). Same reason the tool body runs at 1.75. */
	line-height: 1.3;
	font-size: clamp(30px, 6.2vw, 80px);
	letter-spacing: -.02em;
	text-wrap: balance;
	text-shadow: 0 1px 4px rgba(0, 0, 0, .35);
	-webkit-text-stroke: 1px rgba(0, 0, 0, .52);
}

.vb-hero .vb-hero__sub {
	margin: 12px auto 0;
	max-width: 62ch;
	color: #fff;
	font-size: clamp(15px, 2.2vw, 20px);
	line-height: 1.6;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}

@media print {
	.vb-hero { min-height: 0; margin-bottom: 12px; }
	.vb-hero__img, .vb-hero__veil { display: none; }
	.vb-hero__in { padding: 0; text-align: left; }
	.vb-hero .vb-hero__title, .vb-hero .vb-hero__sub {
		color: #000; text-shadow: none; -webkit-text-stroke: 0;
	}
	.vb-hero .vb-hero__title { font-size: 24px; }
}