/* TraveleSIM compatibility checker. Uses the travel theme's colours when present. */
.tcompat-trigger {
	display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px;
	border: 1px solid var(--tesim-line, #DEDFD7); border-radius: 100px; background: var(--tesim-white, #FFF);
	color: var(--tesim-ink, #161A1E); font: inherit; font-size: .88rem; font-weight: 700; line-height: 1; cursor: pointer;
	text-transform: none; letter-spacing: 0; box-shadow: none; transition: border-color .15s, background .15s;
}
.tcompat-trigger:hover, .tcompat-trigger:focus-visible { border-color: var(--tesim-brand, #CA1617); background: var(--tesim-brand-soft, #FBEDEC); color: var(--tesim-ink, #161A1E); }
.tcompat-trigger svg { width: 18px; height: 18px; fill: none; stroke: var(--tesim-brand, #CA1617); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

html.tcompat-open { overflow: hidden; }
.tcompat { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 16px; }
.tcompat[hidden] { display: none !important; }
.tcompat-backdrop { position: absolute; inset: 0; background: rgba(16, 20, 24, .55); }
.tcompat-panel {
	position: relative; display: flex; flex-direction: column; width: 100%; max-width: 620px; max-height: min(86vh, 760px);
	padding: 24px 24px 18px; border-radius: 18px; background: #FFF; color: var(--tesim-ink, #161A1E);
	box-shadow: 0 24px 60px rgba(0, 0, 0, .25); overflow: hidden;
}
.tcompat-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.tcompat-eyebrow { margin: 0 0 4px; font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--tesim-brand, #CA1617); }
.tcompat h2 { margin: 0; font-size: 1.45rem; line-height: 1.2; letter-spacing: -.03em; color: var(--tesim-ink, #161A1E); }
.tcompat-close {
	flex: none; width: 40px; height: 40px; min-height: 0; padding: 0; border: 1px solid var(--tesim-line, #DEDFD7); border-radius: 50%;
	background: #FFF; color: var(--tesim-ink, #161A1E); font-size: 1.4rem; line-height: 1; cursor: pointer; box-shadow: none;
}
.tcompat-quick { display: flex; flex-direction: column; gap: 3px; margin: 0 0 16px; padding: 12px 14px; border-radius: 12px; background: var(--tesim-band, #EDEEE8); font-size: .86rem; line-height: 1.45; }
.tcompat-quick span { color: var(--tesim-muted, #606763); }
.tcompat-label { display: block; margin: 0 0 6px; font-size: .82rem; font-weight: 700; }
.tcompat-search { position: relative; }
.tcompat-search svg { position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); fill: none; stroke: var(--tesim-muted, #606763); stroke-width: 2; }
.tcompat .tcompat-search input {
	width: 100%; height: 48px; margin: 0; padding: 0 14px 0 42px; border: 1px solid var(--tesim-line, #DEDFD7); border-radius: 12px;
	background: #FFF; color: var(--tesim-ink, #161A1E); font: inherit; font-size: 1rem; box-shadow: none; box-sizing: border-box;
}
.tcompat .tcompat-search input:focus { border-color: var(--tesim-ink, #161A1E); outline: none; }
.tcompat-brands { display: flex; gap: 6px; margin: 12px 0 4px; padding-bottom: 4px; overflow-x: auto; scrollbar-width: thin; }
.tcompat .tcompat-chip {
	flex: none; min-height: 0; padding: 6px 12px; border: 1px solid var(--tesim-line, #DEDFD7); border-radius: 100px; background: #FFF;
	color: var(--tesim-ink, #161A1E); font: inherit; font-size: .78rem; font-weight: 600; text-transform: none; letter-spacing: 0; cursor: pointer; box-shadow: none;
}
.tcompat .tcompat-chip[aria-pressed="true"] { background: var(--tesim-ink, #161A1E); border-color: var(--tesim-ink, #161A1E); color: #FFF; }
.tcompat-status { margin: 8px 0 6px; font-size: .8rem; color: var(--tesim-muted, #606763); min-height: 1.2em; }
.tcompat-results { flex: 1 1 auto; min-height: 120px; overflow-y: auto; border-top: 1px solid var(--tesim-line, #DEDFD7); }
.tcompat-results ul { margin: 0; padding: 0; list-style: none; }
.tcompat-results li { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; padding: 10px 2px; border-bottom: 1px solid var(--tesim-line, #DEDFD7); }
.tcompat-model { display: flex; flex-direction: column; min-width: 0; }
.tcompat-model strong { font-size: .92rem; }
.tcompat-model small { font-size: .74rem; color: var(--tesim-muted, #606763); }
.tcompat-ok { flex: none; padding: 4px 10px; border-radius: 100px; background: #E9F3EC; color: #22674D; font-size: .72rem; font-weight: 700; }
.tcompat-notes { margin-top: 12px; font-size: .78rem; line-height: 1.5; color: var(--tesim-muted, #606763); }
.tcompat-notes p { margin: 0 0 4px; }
.tcompat-notes a { color: var(--tesim-brand, #CA1617); font-weight: 700; }

@media (max-width: 600px) {
	.tcompat { align-items: flex-end; padding: 0; }
	.tcompat-panel { max-height: 92vh; border-radius: 18px 18px 0 0; padding: 20px 16px calc(14px + env(safe-area-inset-bottom, 0px)); }
	.tcompat h2 { font-size: 1.25rem; }
}
/* Theme-proof close button and chips (themes often style every <button>). */
.tcompat button.tcompat-close { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; text-transform: none; letter-spacing: 0; background: #FFF; color: var(--tesim-ink, #161A1E); }
.tcompat button.tcompat-close:hover { border-color: var(--tesim-ink, #161A1E); background: #FFF; }
@media (min-width: 601px) {
	.tcompat-brands { flex-wrap: wrap; overflow: visible; }
}