/*
 * /auto-katalogas: modern responsive layout on top of main.css.
 * Loaded only on catalog pages (modules/auto-katalogas.php), so it may restyle shared classes.
 */
:root {
	--cat-navy: #3a536d;
	--cat-blue: #577ba2;
	--cat-line: #e1e7ef;
	--cat-soft: #f4f7fb;
	--cat-text: #1f2933;
	--cat-muted: #6b7785;
	--cat-radius: 12px;
	--cat-shadow: 0 1px 2px rgba(31, 41, 51, .05), 0 4px 16px rgba(31, 41, 51, .05);
}

/* ---------- page frame ---------- */
.main_width {max-width: 1440px; padding: 0 20px; box-sizing: border-box}
.main .content-full {display: flex; align-items: flex-start; gap: 20px; width: auto}
.main .content-full > .sidenav {float: none; flex: 0 0 280px; width: 280px; margin: 0;
	position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow-y: auto; scrollbar-width: thin}
.main .content-full > .content {float: none; flex: 1 1 auto; width: auto; min-width: 0;
	font-size: 14px; line-height: 1.5; text-align: left; color: var(--cat-text)}
.main .content-full .box {border: 1px solid var(--cat-line); border-radius: var(--cat-radius);
	box-shadow: var(--cat-shadow); padding: 20px 24px; font-size: 14px}
.main .content-full .full-height {min-height: 0}

/* ---------- sidebar ---------- */
.main .sidenav .box {padding: 16px 12px; text-align: left}
.main .sidenav h1, .main .sidenav h2 {font-size: 15px; font-weight: 500; color: var(--cat-navy);
	border: 0; margin: 4px 8px 8px; padding: 0}
.main .sidenav ul.side-catalog-list {margin: 0 0 16px; padding: 0}
.main .sidenav ul.side-catalog-list li {border: 0}
.main .sidenav ul.side-catalog-list li a {font-size: 13px; color: #44515f; padding: 5px 10px; border-radius: 6px;
	background: none; line-height: 1.35}
.main .sidenav ul.side-catalog-list li a:hover {background: var(--cat-soft); color: var(--cat-navy); font-weight: normal}
.main .sidenav ul.side-catalog-list li a.active {background: #e8eef6; color: var(--cat-navy); font-weight: 500}
.main .sidenav h3.side-section-title {display: flex; align-items: center; gap: 6px; margin: 12px 8px 4px; padding: 0;
	font-size: 12px; font-weight: 500; letter-spacing: .02em; color: var(--cat-muted)}
.main .sidenav h3.side-section-title a {color: inherit}
.main .sidenav h3.side-section-title a:hover {color: var(--cat-navy); text-decoration: none}
.main .sidenav h3.side-section-title span {font-size: 11px; letter-spacing: 0; padding: 0 6px; border-radius: 999px; background: var(--cat-soft)}
.main .sidenav h3.side-section-title + ul.side-catalog-list {margin-bottom: 4px}
/* random cars on the makes page */
.main .sidenav .catalog-popular-models {margin-bottom: 14px; text-align: left}
.main .sidenav .catalog-popular-models + br {display: none}
.main .sidenav .catalog-popular-models img {display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
	border: 0; border-radius: 8px; margin-bottom: 6px}
.main .sidenav .catalog-popular-models a.blue {font-size: 14px; font-weight: 500}

/* ---------- breadcrumbs, headings ---------- */
.main .content .tree {display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; font-size: 15px; line-height: 1.4;
	padding-bottom: 16px; color: var(--cat-muted)}
.main .content .tree a {font-size: 15px; padding: 2px 6px; margin: 0 -2px; border-radius: 6px; color: var(--cat-blue)}
.main .content .tree a:hover {background: var(--cat-soft); text-decoration: none}
.main .content .tree > a:first-child {padding-left: 0; margin-left: 0}
.main .content .tree span {display: inline-flex; align-items: center}
.main .content .tree span:before {content: '\203A'; margin: 0 6px; color: #9aa5b1; font-size: 18px; line-height: 1}
.main .content .tree span.last {padding: 2px 4px; font-weight: 500; color: var(--cat-text)}
.main .content .make-logo-img {width: 48px; height: 48px; line-height: 48px; display: flex; align-items: center}
.main .content .make-logo-img img {max-width: 44px; max-height: 44px}
.main .content .make-logo-title {height: auto; min-height: 48px; line-height: 1.25; width: auto; max-width: calc(100% - 60px);
	padding-left: 12px; display: flex; align-items: center}
.main .content .make-logo-title + .clear + br, .main .content .make-logo-title + .clear + .clear + br {display: none}
.main .content .make-logo-title h1 {font-size: 24px; font-weight: 500; color: var(--cat-navy); margin: 0; padding: 0; line-height: 1.25; float: none}
.main .content h3[id^="generation_"] {clear: both; font-size: 18px; font-weight: 500; color: var(--cat-navy);
	margin: 22px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--cat-line); scroll-margin-top: 16px}
.main .content h3[id^="generation_"] a {color: inherit}

/* ---------- model / body cards ---------- */
.main .content .catalog-list {text-align: left; padding: 0}
.main .content .catalog-list ul {display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	gap: 16px; margin: 0; padding: 0}
.main .content .catalog-list li {display: flex; flex-direction: column; width: auto; padding: 0; margin: 0;
	background: #fff; border: 1px solid var(--cat-line); border-radius: 10px; overflow: hidden;
	transition: box-shadow .15s, transform .15s}
.main .content .catalog-list li:hover {box-shadow: 0 8px 24px rgba(31, 41, 51, .12); transform: translateY(-2px)}
.main .content .catalog-list .photo-thumb a {display: block}
.main .content .catalog-list img {display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
	border: 0; background: var(--cat-soft)}
.main .content .catalog-list a.link-title {display: block; padding: 10px 12px 12px; font-size: 15px; font-weight: 500;
	line-height: 1.35; color: var(--cat-navy)}
.main .content .catalog-list a.link-title:hover {color: var(--cat-blue)}
.main .content div.clear + .catalog-list, .main .content .catalog-list + .clear {clear: both}

/* ---------- models grouped by production period (models_page.php) ---------- */
.main .content .catalog-sections {display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px}
.main .content .catalog-sections a {display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px;
	background: var(--cat-soft); border: 1px solid var(--cat-line); color: var(--cat-navy); font-size: 14px; font-weight: 500}
.main .content .catalog-sections a:hover {background: #e8eef6; text-decoration: none}
.main .content .catalog-sections span, .main .content .catalog-section-title span {font-size: 12px; font-weight: 500;
	color: var(--cat-muted); background: #fff; border: 1px solid var(--cat-line); border-radius: 999px; padding: 0 7px; line-height: 18px}
.main .content h3.catalog-section-title {clear: both; display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 500;
	color: var(--cat-navy); margin: 26px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--cat-line); scroll-margin-top: 16px}
.main .content .catalog-list a.link-title .card-years {display: block; margin-top: 2px; font-size: 13px; font-weight: 400; color: var(--cat-muted)}

/* ---------- makes list: logo cards ---------- */
.main .content ul.catalog-makes-list {display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
	gap: 10px; margin: 6px 0 0; padding: 0}
.main .content ul.catalog-makes-list li {float: none; width: auto; height: auto; margin: 0; display: flex; flex-direction: column;
	align-items: center; justify-content: center; gap: 8px; padding: 14px 8px 12px; background: #fff;
	border: 1px solid var(--cat-line); border-radius: 10px; transition: border-color .15s, box-shadow .15s, transform .15s}
.main .content ul.catalog-makes-list li:hover {border-color: #c3d2e4; box-shadow: 0 6px 18px rgba(31, 41, 51, .08); transform: translateY(-1px)}
.main .content ul.catalog-makes-list li.clear, .main .content ul.catalog-makes-list .clear {display: none}
.main .content ul.catalog-makes-list .make-logo {float: none; width: 100%; height: 56px; line-height: 0; display: flex;
	align-items: center; justify-content: center}
.main .content ul.catalog-makes-list .make-logo a {display: flex; align-items: center; justify-content: center; width: 100%; height: 100%}
.main .content ul.catalog-makes-list .make-logo img {max-width: 84px; max-height: 56px; width: auto; height: auto}
.main .content ul.catalog-makes-list .make-logo-title {float: none; width: 100%; height: auto; line-height: 1.25; padding: 0;
	text-align: center; white-space: normal; overflow: visible; display: block; min-height: 0}
.main .content ul.catalog-makes-list .make-logo-title span {height: auto; font-size: 15px; font-weight: 500; color: var(--cat-navy)}
.main .content ul.catalog-makes-list .make-logo-title a:hover {text-decoration: none}
.main .content ul.catalog-makes-list li:hover span {color: var(--cat-blue)}

/* ---------- tabs ---------- */
.main .content .nav-tabs.review {border-bottom: 1px solid var(--cat-line); margin-bottom: 0}
.main .content .tab-content.review-container {border: 0; padding: 20px 0 0}

/* ---------- generation / modification header ---------- */
.main .content .generation-header {display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: flex-start}
.main .content .generation-header > div:first-child {flex: 1 1 100%}
.main .content .generation-header h1 {font-size: 20px; font-weight: 500; color: var(--cat-navy); line-height: 1.25; margin: 0}
.main .content .generation-header .make-logo-title h1 {font-size: 22px}
.main .content .generation-header .photo-container {float: none; flex: 0 0 auto}
.main .content .generation-header .photo-container img {width: 360px; max-width: 100%; height: auto; border-radius: 10px; display: block}
.main .content .generation-header .generation-summary {float: none; flex: 1 1 280px; min-width: 0}
.main .content .generation-header > .clear {display: none}
.main .content .generation-header, .main .content .generation-header * {text-align: left}
.main .content .generation-header .submit-button, .main .content .generation-header .submit-button *, .main .content .generation-header input[type=submit] {text-align: center}

/* ---------- modifications table (group page) ---------- */
.main .content table.catalog-generations-table {width: 100%; border-collapse: separate; border-spacing: 0;
	border: 1px solid var(--cat-line); border-radius: 10px; overflow: hidden}
.main .content .catalog-generations-table tr td, .main .content .catalog-generations-table tr th {font-size: 14px;
	padding: 10px 12px; border-bottom: 1px solid var(--cat-line); width: auto}
.main .content .catalog-generations-table th {background: var(--cat-navy); text-align: left; font-weight: 500}
.main .content .catalog-generations-table .odd {background: #fff}
.main .content .catalog-generations-table .even {background: #fafbfd}
.main .content .catalog-generations-table tr:hover td {background: var(--cat-soft)}
.main .content .catalog-generations-table a {font-size: 14px; font-weight: 500}
.main .content .catalog-generations-table td.gen-power {white-space: nowrap}

/* ---------- specification tables (modification page) ---------- */
.main .content .catalog-spec-grid {columns: 2 380px; column-gap: 24px; margin-top: 20px}
.main .content .catalog-spec-grid > br {display: none}
.main .content .catalog-spec-grid ins.adsbygoogle {column-span: all; margin: 8px 0 20px}
.main .content table.catalog-modification-table {width: 100%; padding: 0; margin: 0 0 20px; break-inside: avoid;
	border-collapse: separate; border-spacing: 0; border: 1px solid var(--cat-line); border-radius: 10px; overflow: hidden;
	display: table}
.main .content .catalog-modification-table th {background: var(--cat-navy); text-align: left; font-size: 14px;
	font-weight: 500; padding: 10px 14px; letter-spacing: .02em}
.main .content .catalog-modification-table td {padding: 8px 14px; font-size: 14px; border-top: 1px solid var(--cat-line)}
.main .content .catalog-modification-table .odd, .main .content .catalog-modification-table .even {background: #fff}
.main .content .catalog-modification-table .caption {width: 50%; color: var(--cat-muted)}
.main .content .catalog-modification-table .value {font-weight: 500}

/* ---------- tablet ---------- */
@media (max-width: 1100px) {
	.main .content-full > .sidenav {flex-basis: 230px; width: 230px}
	.main .content-full .box {padding: 16px}
}

/* ---------- phone / small tablet: sidebar below the content ---------- */
@media (max-width: 860px) {
	.main_width {padding: 0}
	.main .content-full {flex-direction: column; gap: 12px}
	.main .content-full > .content {order: 1; width: 100%}
	.main .content-full > .sidenav {order: 2; position: static; flex: none; width: auto; max-height: none; align-self: stretch}
	.main .content-full .box {border-radius: 0; border-left: 0; border-right: 0; margin: 0 0 10px; padding: 14px}
	.main .sidenav ul.side-catalog-list {display: flex; flex-wrap: wrap; gap: 6px}
	.main .sidenav ul.side-catalog-list li a {background: var(--cat-soft); padding: 6px 10px}
	.main .sidenav .box.center {display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px}
	.main .sidenav .box.center > h1, .main .sidenav .box.center > h2, .main .sidenav .box.center > h3, .main .sidenav .box.center > ul {grid-column: 1 / -1}
	.main .content .catalog-list ul {grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px}
	.main .content .make-logo-img {width: 38px; height: 38px; line-height: 38px}
	.main .content .make-logo-img img {max-width: 36px; max-height: 36px}
	.main .content .make-logo-title {min-height: 38px; padding-left: 10px; max-width: calc(100% - 48px)}
	.main .content .make-logo-title h1, .main .content .generation-header .make-logo-title h1 {font-size: 18px; line-height: 1.3}
	/* catalog tabs as one-row segmented control */
	.main .content #graphs_tabs.nav-tabs.review {display: flex; gap: 4px; width: auto; margin: 0 0 12px; padding: 4px;
		background: var(--cat-soft); border: 1px solid var(--cat-line); border-radius: 10px; overflow: visible}
	.main .content #graphs_tabs.nav-tabs.review > li {float: none; flex: 1 1 0; min-width: 0; width: auto; margin: 0; padding: 0}
	.main .content #graphs_tabs.nav-tabs.review > li.tabs-like-button, .main .content #graphs_tabs.nav-tabs.review > li:empty {display: none}
	.main .content #graphs_tabs.nav-tabs.review > li > a, .main .content #graphs_tabs.nav-tabs.review > li > a:hover,
	.main .content #graphs_tabs.nav-tabs.review > li > a:focus {display: flex; align-items: center; justify-content: center; height: 100%;
		min-height: 40px; padding: 6px 4px; border: 0; border-radius: 7px; background: transparent; color: var(--cat-navy);
		font-size: 13px; font-weight: 500; line-height: 1.2; text-align: center; white-space: normal}
	.main .content #graphs_tabs.nav-tabs.review > li.active > a, .main .content #graphs_tabs.nav-tabs.review > li.active > a:hover,
	.main .content #graphs_tabs.nav-tabs.review > li.active > a:focus {background: #fff; color: var(--cat-navy);
		box-shadow: 0 1px 3px rgba(31, 41, 51, .15)}
	.main .content .tree {font-size: 14px; padding-bottom: 10px}
	.main .content .catalog-sections {flex-wrap: nowrap; overflow-x: auto; margin: 0 -14px; padding: 2px 14px 6px; scrollbar-width: none}
	.main .content .catalog-sections a {flex: none}
	.main .content .tree a {font-size: 14px}
	.main .content .tree .last {display: inline-flex}
	.main .content .tree span.crumb-0:before {content: '\203A'}
	.main .content .generation-header .photo-container {flex: 1 1 100%}
	.main .content .generation-header .photo-container img {width: 100%}
	/* main.css turns this table into cards on phones; only fix its English labels */
	.main .content .catalog-generations-table tr td {font-size: 14px; padding: 8px 12px; border-bottom: 0}
	.main .content .catalog-generations-table thead {display: none}
	.main .content table.catalog-generations-table {border: 0; border-radius: 0; overflow: visible}
	.main .content .catalog-generations-table tbody tr {display: block; margin-bottom: 12px; border: 1px solid var(--cat-line);
		border-radius: 10px; overflow: hidden; background: #fff}
	.main .content .catalog-generations-table tbody tr:hover td {background: inherit}
	.main .content .catalog-generations-table td.gen-title {background: var(--cat-navy); text-align: left; padding: 10px 12px}
	.main .content .catalog-generations-table td.gen-title a {color: #fff; font-size: 15px}
	.main .content .catalog-generations-table td + td {border-top: 1px solid var(--cat-line)}
	.main .content .filter-table td.gen-power::before {content: 'Galia: '; font-size: 14px}
	.main .content .filter-table td.gen-gearbox::before {content: 'Pavarų dėžė: '}
	.main .content .filter-table td.gen-to-100::before, .main .content .filter-table td.gen-wheels::before {font-size: 14px}
	.main .content .filter-table td.gen-power {font-size: 14px}
	.main .content .catalog-spec-grid {columns: 1}
}

@media (max-width: 480px) {
	.main .content .catalog-list ul {grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px}
	.main .content .catalog-list a.link-title {font-size: 13px; padding: 8px 10px 10px}
	.main .content ul.catalog-makes-list {grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px}
	.main .content ul.catalog-makes-list li {padding: 10px 4px 9px; gap: 6px}
	.main .content ul.catalog-makes-list .make-logo {height: 44px}
	.main .content ul.catalog-makes-list .make-logo img {max-width: 64px; max-height: 44px}
	.main .content ul.catalog-makes-list .make-logo-title span {font-size: 13px}
	.main .content .catalog-modification-table td {font-size: 13px; padding: 7px 10px}
}