/* ==========================================================================
   Bonauto — pagrindiniai stiliai (header, footer, bendri komponentai)
   ========================================================================== */

/* ---- Bazė ---- */
.bn-header *,
.bn-footer *,
.bn-main * { box-sizing: border-box; }

body {
	font-family: var(--font-base);
	color: var(--c-text);
}

.bn-header a,
.bn-footer a { text-decoration: none; }

/* Bendri komponentai ------------------------------------------------------ */
.bn-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 25px;
	height: 25px;
	padding: 0 6px;
	border-radius: var(--radius-pill);
	font-weight: var(--fw-bold);
	font-size: 12px;
	line-height: 1;
}
.bn-badge--red  { background: var(--c-red); color: #fff; }
.bn-badge--blue { background: var(--c-blue-50); color: var(--c-navy); }

.bn-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 20px;
	border-radius: var(--radius-pill);
	font-weight: var(--fw-bold);
	font-size: var(--fs-14);
	line-height: 1;
	cursor: pointer;
	border: 1px solid transparent;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
	white-space: nowrap;
}
.bn-btn--primary { background: var(--c-primary); color: #fff; }
.bn-btn--primary:hover { background: var(--c-primary-dark); color: #fff; }
.bn-btn--outline { background: transparent; color: var(--c-navy); border-color: #cdd9ef; }
.bn-btn--outline:hover { border-color: var(--c-primary); color: var(--c-primary); }

/* ==========================================================================
   HEADER
   ========================================================================== */
.bn-header {
	background: var(--c-white);
	box-shadow: var(--shadow-header);
	position: sticky;
	top: 0;
	z-index: 100;
}
.bn-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	max-width: calc(var(--container-max) + 2 * var(--container-pad));
	margin: 0 auto;
	padding: 16px var(--container-pad);
}
.bn-header__left { display: flex; align-items: center; gap: 24px; }
.bn-header__right { display: flex; align-items: center; gap: 8px; }
.bn-logo { display: inline-flex; align-items: center; }
.bn-logo img { display: block; height: 16px; width: auto; }

.bn-nav { display: flex; align-items: center; }
.bn-nav__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	border-radius: var(--radius-pill);
	font-weight: var(--fw-medium);
	font-size: var(--fs-14);
	color: var(--c-text);
	white-space: nowrap;
	transition: background-color .15s ease, color .15s ease;
}
.bn-nav__link:hover { background: var(--c-blue-bg); color: var(--c-navy); }
.bn-nav__link.current,
.bn-nav__link:first-child { color: var(--c-navy); }

.bn-action {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	border-radius: var(--radius-pill);
	font-weight: var(--fw-medium);
	font-size: var(--fs-14);
	white-space: nowrap;
}
.bn-action--compare { color: var(--c-navy); }
.bn-action--compare svg { color: var(--c-navy); }
.bn-action--phone { color: var(--c-primary); }
.bn-action:hover { background: var(--c-blue-bg); }

/* Mobilus burgeris ir nav */
.bn-burger {
	display: none;
	flex-direction: column;
	gap: 5px;
	width: 40px;
	height: 40px;
	padding: 9px;
	background: none;
	border: 0;
	cursor: pointer;
}
.bn-burger span { display: block; height: 2px; width: 100%; background: var(--c-navy); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
.bn-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.bn-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.bn-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.bn-mobile-nav {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 8px var(--container-pad) 24px;
	border-top: 1px solid var(--c-card-border);
}
.bn-mobile-nav[hidden] { display: none; }
.bn-mobile-nav__link {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 8px;
	font-weight: var(--fw-medium);
	font-size: 16px;
	color: var(--c-navy);
	border-bottom: 1px solid var(--c-card-border);
}
.bn-mobile-nav .bn-btn,
.bn-mobile-nav .bn-action { margin-top: 8px; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.bn-footer {
	background: var(--c-navy);
	color: #fff;
	border-top: 1px solid var(--c-border);
}
.bn-footer__inner {
	max-width: calc(var(--container-max) + 2 * var(--container-pad));
	margin: 0 auto;
	padding: 64px var(--container-pad);
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.bn-footer__top {
	display: grid;
	grid-template-columns: minmax(280px, 1.4fr) 1fr 1fr 1fr;
	gap: 56px 80px;
}
.bn-footer__logo { display: inline-block; margin-bottom: 32px; }
.bn-footer__logo img { display: block; height: 29px; width: auto; }
.bn-footer__desc { font-size: var(--fs-14); line-height: 1.5; color: #fff; max-width: 331px; margin: 0 0 16px; }
.bn-footer__line { font-size: var(--fs-14); margin: 0 0 12px; color: #fff; }
.bn-footer__line strong { font-weight: var(--fw-bold); }
.bn-footer__contact {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: var(--fs-14);
	font-weight: var(--fw-medium);
	color: #fff;
	margin-bottom: 8px;
}
.bn-footer__contact:hover { color: var(--c-blue-50); }
.bn-footer__social {
	display: inline-flex;
	margin-top: 16px;
	color: #fff;
}
.bn-footer__social:hover { color: var(--c-blue-50); }

.bn-footer__col { display: flex; flex-direction: column; gap: 8px; }
.bn-footer__title { font-size: var(--fs-16); font-weight: var(--fw-bold); color: #fff; margin: 0 0 8px; }
.bn-footer__col a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: var(--fs-14);
	font-weight: var(--fw-medium);
	color: #fff;
	padding: 6px 0;
}
.bn-footer__col a:hover { color: var(--c-blue-50); }

.bn-footer__bottom {
	padding-top: 8px;
}
.bn-footer__bottom p { font-size: var(--fs-14); color: var(--c-text-muted); margin: 0; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1100px) {
	.bn-nav,
	.bn-header__right { display: none; }
	.bn-burger { display: flex; }
}
@media (max-width: 900px) {
	.bn-footer__top { grid-template-columns: 1fr 1fr; gap: 40px; }
}
@media (max-width: 560px) {
	.bn-footer__top { grid-template-columns: 1fr; gap: 32px; }
	.bn-footer__inner { padding: 40px var(--container-pad); }
}

/* ==========================================================================
   HERO (pagrindinis puslapis)
   ========================================================================== */
.bn-hero {
	position: relative;
	background: linear-gradient(180deg, #eaf1fe 0%, #f5f9ff 70%, #ffffff 100%);
	overflow: hidden;
}
.bn-hero__bg {
	position: absolute;
	inset: 0;
	pointer-events: none;
}
.bn-hero__skyline {
	position: absolute;
	top: 10px;
	right: max(calc((100% - var(--container-max)) / 2), 24px);
	width: 560px;
	max-width: 46%;
	opacity: .4;
}
.bn-hero__inner {
	position: relative;
	max-width: calc(var(--container-max) + 2 * var(--container-pad));
	margin: 0 auto;
	padding: 64px var(--container-pad) 70px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 24px;
}
.bn-hero__content { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }

/* Google rating */
.bn-rating {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #fff;
	padding: 7px;
	border-radius: 7px;
	box-shadow: 0 4px 16px rgba(10,30,65,.06);
}
.bn-rating__google { width: 40px; height: 40px; display: block; }
.bn-rating__detail { display: flex; flex-direction: column; gap: 2px; line-height: 1; }
.bn-rating__label { font-size: 9px; font-weight: 600; color: #1a1a1a; }
.bn-rating__row { display: flex; align-items: center; gap: 4px; }
.bn-rating__score { font-size: 16px; font-weight: 700; color: #ffb300; }
.bn-rating__stars { color: #ffb300; font-size: 11px; letter-spacing: 1px; }
.bn-rating__link { font-size: 8px; color: rgba(0,0,0,.5); }

/* Antraštė */
.bn-hero__title { margin: 0; display: flex; flex-direction: column; font-family: "Clash Display", var(--font-base); color: var(--c-navy); }
.bn-hero__title-1 { font-size: 40px; font-weight: 500; line-height: 1.05; }
.bn-hero__title-2 { font-size: 65px; font-weight: 600; line-height: 1; letter-spacing: -.5px; }

/* Privalumai */
.bn-hero__bullets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; max-width: 360px; }
.bn-hero__bullets li { display: flex; align-items: flex-start; gap: 8px; font-size: var(--fs-14); font-weight: var(--fw-medium); color: var(--c-navy); }
.bn-check { flex-shrink: 0; margin-top: 1px; }

.bn-hero__cta { display: flex; gap: 16px; flex-wrap: wrap; }
.bn-btn--lg { padding: 16px 24px; font-size: 16px; }
.bn-btn--outline.bn-btn--lg { border-width: 2px; border-color: var(--c-navy); }

/* Vizualas (siluetas gale + vėliava + automobilis priekyje) */
.bn-hero__visual { position: relative; display: flex; align-items: flex-end; justify-content: center; min-height: 400px; }
.bn-hero__flag { position: absolute; top: -10px; right: 0; width: 38%; max-width: 260px; height: auto; z-index: 3; mix-blend-mode: multiply; }
.bn-hero__car { position: relative; z-index: 2; width: 100%; max-width: 600px; height: auto; mix-blend-mode: multiply; }

/* ---- Paieška ---- */
.bn-search {
	position: relative;
	max-width: var(--container-max);
	margin: -10px auto 56px;
	left: 0; right: 0;
	width: calc(100% - 2 * var(--container-pad));
	display: flex;
	align-items: stretch;
	background: #fff;
	border: 1px solid #dde9ff;
	border-radius: 8px;
	box-shadow: 0 4px 24px rgba(10,30,65,.06);
}
.bn-search__head {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0 40px;
	border-right: 1px dashed #e5ebf8;
	flex-shrink: 0;
}
.bn-search__title { font-weight: var(--fw-bold); color: var(--c-navy); font-size: 16px; white-space: nowrap; }
.bn-search__fields {
	display: flex;
	align-items: center;
	gap: 16px;
	flex: 1;
	padding: 20px 24px;
	flex-wrap: wrap;
}
.bn-search__select {
	flex: 1;
	min-width: 150px;
	height: 39px;
	/* Motors tema slepia native selektus — priverstinai grąžinam */
	visibility: visible !important;
	opacity: 1 !important;
	position: static !important;
	padding: 8px 32px 8px 16px;
	background: #f7faff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='m6 9 6 6 6-6' stroke='%230a1e41' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center;
	border: 1px solid #e9ecf3;
	border-radius: 4px;
	font-family: var(--font-base);
	font-weight: var(--fw-bold);
	font-size: 12px;
	color: var(--c-navy);
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
}
.bn-search__submit { flex-shrink: 0; white-space: nowrap; height: 39px; padding: 10px 24px; }

@media (max-width: 1100px) {
	.bn-hero__title-2 { font-size: 52px; }
}
@media (max-width: 900px) {
	.bn-hero__inner { grid-template-columns: 1fr; }
	.bn-hero__visual { order: -1; min-height: 240px; }
	.bn-hero__skyline { width: 80%; max-width: none; right: 0; }
	.bn-search { flex-direction: column; }
	.bn-search__head { border-right: 0; border-bottom: 1px dashed #e5ebf8; padding: 16px 24px; justify-content: center; }
	.bn-search__fields { padding: 16px; }
	.bn-search__select { width: 100%; flex-basis: 100%; }
}
@media (max-width: 560px) {
	.bn-hero__title-1 { font-size: 30px; }
	.bn-hero__title-2 { font-size: 40px; }
	.bn-hero__cta { width: 100%; }
	.bn-hero__cta .bn-btn { flex: 1; }
}

/* ==========================================================================
   BENDRI SEKCIJU ELEMENTAI
   ========================================================================== */
.bn-section { padding: 64px 0; }
.bn-container { max-width: calc(var(--container-max) + 2 * var(--container-pad)); margin: 0 auto; padding: 0 var(--container-pad); }
.bn-h2 { font-family: "Clash Display", var(--font-base); font-weight: 500; font-size: 40px; line-height: 1.1; color: var(--c-navy); margin: 0 0 32px; }
.bn-h2--accent { color: var(--c-primary); font-weight: 600; }

/* ==========================================================================
   PARDUODAMI AUTOMOBILIAI (listings tinklelis)
   ========================================================================== */
.bn-cars { background: #f2f7ff; }
.bn-cars__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 32px;
}
.bn-car-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid #f0f5fe;
	border-radius: 8px;
	overflow: hidden;
	text-decoration: none;
	transition: box-shadow .18s ease, transform .18s ease;
}
.bn-car-card:hover { box-shadow: 0 12px 28px rgba(10,30,65,.1); transform: translateY(-3px); }
.bn-car-card__media { position: relative; aspect-ratio: 280 / 220; background: #f7faff; padding: 10px; }
.bn-car-card__img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; display: block; }
.bn-car-card__img--empty { background: linear-gradient(135deg,#eaf1fe,#f7faff); }
.bn-car-card__monthly {
	position: absolute;
	top: 18px; left: 18px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #d7ffdd;
	color: #407148;
	font-weight: var(--fw-bold);
	font-size: 12px;
	padding: 5px 10px;
	border-radius: 50px;
}
.bn-dot { width: 7px; height: 7px; border-radius: 50%; background: #2bbb4e; }

.bn-car-card__body { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 16px; }
.bn-car-card__gallery { display: flex; align-items: center; gap: 6px; }
.bn-dash { width: 22px; height: 2px; border-radius: 30px; background: #e5ebf8; }
.bn-dash--on { background: var(--c-primary); }

.bn-car-card__title-row { display: flex; flex-direction: column; gap: 2px; }
.bn-car-card__title { font-weight: var(--fw-bold); font-size: 14px; color: var(--c-navy); }
.bn-car-card__engine { font-size: 14px; color: #676a72; }

.bn-car-card__specs { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.bn-car-card__year { font-weight: var(--fw-medium); font-size: 14px; color: var(--c-navy); }
.bn-car-card__fuel { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--fw-medium); font-size: 14px; color: var(--c-navy); }
.bn-car-card__fuel img { width: 16px; height: 16px; }
.bn-car-card__price {
	margin-left: auto;
	background: var(--c-primary);
	color: #fff;
	font-weight: var(--fw-bold);
	font-size: 14px;
	padding: 5px 10px;
	border-radius: 50px;
}
.bn-car-card__meta { display: flex; align-items: center; gap: 16px; padding-top: 10px; border-top: 1px solid #f0f5fe; }
.bn-car-card__meta-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #676a72; }
.bn-car-card__meta-item img { width: 16px; height: 16px; opacity: .7; }

.bn-cars__more { display: flex; justify-content: center; margin-top: 40px; }
.bn-cars__more .bn-btn { padding: 16px 28px; font-size: 16px; }

@media (max-width: 1100px) { .bn-cars__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px)  { .bn-cars__grid { grid-template-columns: repeat(2, 1fr); } .bn-h2 { font-size: 32px; } }
@media (max-width: 480px)  { .bn-cars__grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   PRIVALUMAI (3 kortelės)
   ========================================================================== */
.bn-benefits { background: #fff; }
.bn-benefits__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; }
.bn-benefit {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 24px;
	min-height: 460px;
	padding: 32px 24px 20px;
	border-radius: 16px;
	background: linear-gradient(126deg, #ebf5ff 47%, #cfe0ff 100%);
	border: 1px solid #dbe8ff;
}
.bn-benefit__title { font-family: "Clash Display", var(--font-base); font-weight: 600; font-size: 24px; line-height: 1.15; color: var(--c-navy); margin: 0 0 8px; }
.bn-benefit__desc { font-size: 14px; line-height: 1.5; color: #3a4a66; margin: 0; }
.bn-benefit__media { display: flex; align-items: flex-end; justify-content: center; min-height: 240px; }
.bn-benefit__media img { max-width: 100%; max-height: 280px; height: auto; object-fit: contain; }
.bn-benefits__cta { display: flex; justify-content: center; margin-top: 40px; }

/* ==========================================================================
   HORIZONTALIOS JUOSTOS (gamintojai / tipai)
   ========================================================================== */
.bn-strip {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	padding: 8px 2px;
	scrollbar-width: thin;
}
.bn-strip::-webkit-scrollbar { height: 6px; }
.bn-strip::-webkit-scrollbar-thumb { background: #dbe4f5; border-radius: 10px; }

/* Gamintojai */
.bn-make-card {
	flex: 0 0 auto;
	min-width: 132px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 16px;
	background: #fbfdff;
	border: 1px solid #eef3fc;
	border-radius: 8px;
	text-decoration: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.bn-make-card:hover { border-color: var(--c-primary); box-shadow: 0 8px 20px rgba(10,30,65,.08); }
.bn-make-card__logo-wrap { height: 56px; display: flex; align-items: center; justify-content: center; }
.bn-make-card__logo { max-height: 56px; max-width: 110px; width: auto; height: auto; object-fit: contain; }
.bn-make-card__logo--text { font-weight: var(--fw-bold); color: var(--c-navy); }
.bn-make-card__name { font-weight: var(--fw-medium); font-size: 14px; color: var(--c-navy); }

/* Tipai */
.bn-strip--types { gap: 32px; }
.bn-type-card {
	flex: 0 0 auto;
	min-width: 120px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 16px;
	border-radius: 8px;
	text-decoration: none;
	transition: background-color .15s ease;
}
.bn-type-card:hover { background: #f2f7ff; }
.bn-type-card__icon { height: 60px; display: flex; align-items: center; justify-content: center; }
.bn-type-card__icon img { width: 56px; height: 56px; object-fit: contain; }
.bn-type-card__name { font-weight: var(--fw-medium); font-size: 14px; color: var(--c-navy); }

@media (max-width: 820px) {
	.bn-benefits__grid { grid-template-columns: 1fr; gap: 24px; }
	.bn-benefit { min-height: auto; }
}