h1,h2,p {text-align:center;padding-left:10px;padding-right:10px;margin-left:auto;margin-right:auto;max-width:1000px;display:block;}
	.fig {max-width:800px;display:block;margin-left:auto;margin-right:auto;}
	.subb {font-size: 70%;line-height:normal;}
	.supp {font-size: 70%;line-height:normal;position:relative;top:-3px;}
	.countrytitle {width:85%;text-align:center;font-size:120%}
	.details {width:85%;text-align:center;font-size:70%}
	.options {width:85%;text-align:center;font-size:70%;margin-top:5px;margin-bottom:25px}

#countrySelector {
  width: 100%;
}

.pure-g {
  display: flex;
  flex-wrap: wrap;
}

/* While the loading class is on the body, the selectors are untouchable */
body.loading-active .selector-container {
    pointer-events: none !important;
    cursor: wait;
    opacity: 0.7; /* Optional: gives a visual hint that they are locked */
}

/* TOM SELECT */
/* --- UNIVERSAL SELECTOR STYLE --- */
.ts-control {
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    padding: 8px 12px !important;
    background-color: #fff !important;
    cursor: pointer;
	box-sizing: border-box;
	min-height: 40px !important;
}

/* Ensure the search input doesn't create extra height/width when empty */
.ts-wrapper .ts-control input {
    width: auto !important;
    max-width: 100%;
    margin: 0 4px !important;
}

/* Ensure the dropdown results update instantly without ghosting */
.ts-dropdown {
    transition: none !important;
}
/* Ensure selected items stay visible in the dropdown for single-selects (Lang, Freq, etc) */
.ts-control:not(.multi) + .ts-dropdown .option.selected {
    display: block !important;
    background: #f0f7ff;
    color: #0078e7;
    font-weight: bold;
}

/* For the Country Selector (Multi-select): 
   Hide selected countries from the list so they don't duplicate, 
   BUT ALWAYS KEEP "All Countries" visible in the list. */
.multi + .ts-dropdown .option.selected:not([data-value="all"]) {
    display: none !important;
}

/* --- 3. Country Selector (Vertical Growth) --- */
#countrySelector + .ts-wrapper .ts-control {
    display: flex;
    flex-wrap: wrap; /* This forces pills to next line */
    gap: 4px;
    min-height: 40px;
    max-height: 150px; /* Limits how far it can grow vertically */
    overflow-y: auto; /* Adds scrollbar if it exceeds max-height */
	align-items: flex-start;
}

/* Keep the pill style ONLY for the country selector */
#countrySelector + .ts-wrapper .ts-control .item {
    background-color: #f0f0f0 !important;
    border: 1px solid #ccc !important;
    border-radius: 3px !important;
    padding: 2px 8px !important;
    font-size: 0.85em;
	margin: 0 !important;
}

.selector {
    /* Set a standard width for the single-choice dropdowns */
    width: 180px; 
}

/* Specific rule for the Country Selector to be wider but capped */
.selector:last-child {
    width: 100%;
    max-width: 500px;
}
/* --- SINGLE-SELECT ONLY (Plain Text) --- */
.selector:not(:last-child) .ts-control {
    display: block !important; /* Switch from flex to block to prevent wrapping */
    white-space: nowrap;       /* Prevent text from ever breaking into two lines */
    overflow: hidden;
    text-overflow: ellipsis;    /* If it's too long, it will just cut off gracefully */
    height: 40px;              /* Fix the height so it can't grow */
    line-height: 22px;         /* Vertically centers the text */
}

.selector:not(:last-child) .ts-control .item {
    display: inline !important; /* Force it to act like regular text */
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Ensure the input (search cursor) doesn't push things around */
.selector:not(:last-child) .ts-control input {
    display: none !important; 
}


/* vehicle updates table */
#updates-container {
	margin-top: 10px;
	display: none; /* Starts hidden */
	text-align: center; 
}
.toggle-button {
	cursor: pointer;
	color: blue;
	text-decoration: underline;
	display: inline-block;
	margin-top: 0;
}
#toggle-updates-button::before {
    content: "📅 ";
    display: inline-block;
}
#toggle-notes-button::before {
    content: "💡 ";
    display: inline-block;
}
#controls-container {
	text-align: center;
}
#updates-table {
	border-collapse: collapse; 
	width: 100%;
	max-width: 600px;
	margin: 0 auto; 
}
#updates-table th, #updates-table td {
	border: 1px solid #ddd;
	padding: 4px 8px;
	text-align: left;
}
#updates-table th {
	background-color: #f2f2f2;
}
#notes-container p {
    text-align: left;
	max-width: 800px;
}
#notes-container ul {
    max-width: 800px; 
    margin-left: auto;
    margin-right: auto;
    padding-left: 80px;
    padding-right: 10px;
    display: block; 
}

.selector-container {
    display: flex;
    justify-content: center;
    align-items: flex-start; /* CRITICAL: Aligns all boxes to the top line */
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 30px;
}

.selector {
    display: flex;
    flex-direction: column; /* Keeps label above the box */
    min-width: 150px;
    vertical-align: top;
}

.selector label {
    display: block;
    font-size: 0.9em;
    font-weight: bold;
    margin-bottom: 5px;
    color: #444;
    text-align: left;
}
.selector label {
  display: block;
  font-size: 0.85em;
  font-weight: bold;
  margin-bottom: 5px;
  text-align: left; /* Better for grouping */
}

/* translation icon */
.icon-translate:before {
    content: "文/A "; /* The two-script symbol */
    font-family: sans-serif;
    font-weight: bold;
    margin-right: 5px;
    color: #555;
}


/* Hints to the browser not to keep decoded images in long-term cache */
.fig {
    image-rendering: auto;
    content-visibility: auto;
}