/* ============================================================
   MibAuto — Виртуален гараж (визия, в тон с тъмната тема на сайта)
   ============================================================ */
:root, .mibauto-garage {
	--mib-blue: #0D84FF;
	--mib-yellow: #FACC15;
	--mib-bg: #0B111E;
	--mib-card: rgba(255, 255, 255, 0.04);
	--mib-border: rgba(255, 255, 255, 0.10);
	--mib-text: #E7ECF3;
	--mib-muted: #97A3B6;
	--mib-danger: #dc2626;
	color: var(--mib-text);
	font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

.mibauto-garage a { color: var(--mib-blue); }

.mibauto-h3 { font-family: 'Chakra Petch', 'Inter', sans-serif; font-size: 1.5rem; margin: 0 0 .4rem; }
.mibauto-h4 { font-family: 'Chakra Petch', 'Inter', sans-serif; font-size: 1.15rem; margin: 1.6rem 0 .8rem; }

.mibauto-garage-intro p { color: var(--mib-muted); margin: .3rem 0; line-height: 1.55; }
.mibauto-garage-intro strong { color: var(--mib-text); }
.mibauto-count { font-size: .95rem; }

/* ---------- Записани автомобили ---------- */
.mibauto-empty {
	background: var(--mib-card);
	border: 1px dashed var(--mib-border);
	border-radius: 14px;
	padding: 1.1rem 1.2rem;
	color: var(--mib-muted);
	margin: 1rem 0;
}

.mibauto-cars {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 1rem;
	margin: 1rem 0 .5rem;
}
.mibauto-car {
	background: var(--mib-card);
	border: 1px solid var(--mib-border);
	border-radius: 16px;
	padding: 1rem 1.1rem;
	backdrop-filter: blur(8px);
}
.mibauto-car-head {
	display: flex; align-items: center; justify-content: space-between;
	gap: .5rem; margin-bottom: .7rem;
}
.mibauto-car-title { font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 1.1rem; }
.mibauto-car-year {
	font-size: .8rem; color: var(--mib-bg); background: var(--mib-yellow);
	padding: .1rem .5rem; border-radius: 999px; font-weight: 600;
}
.mibauto-car-specs { display: grid; gap: .35rem; margin: 0; }
.mibauto-car-specs > div { display: flex; justify-content: space-between; gap: 1rem; }
.mibauto-car-specs dt { color: var(--mib-muted); font-size: .85rem; margin: 0; }
.mibauto-car-specs dd { margin: 0; font-size: .9rem; text-align: right; }
.mibauto-vin { font-family: 'Courier New', monospace; letter-spacing: .5px; }
.mibauto-car-notes {
	margin: .7rem 0 0; font-size: .85rem; color: var(--mib-muted);
	border-top: 1px solid var(--mib-border); padding-top: .6rem;
}
.mibauto-car-actions { margin-top: .8rem; }
.mibauto-inline { display: inline; margin: 0; }
.mibauto-btn-link {
	background: none; border: none; padding: 0; cursor: pointer;
	font: inherit; color: var(--mib-blue); text-decoration: underline;
}
.mibauto-danger { color: var(--mib-danger); }
.mibauto-sep { color: var(--mib-muted); margin: 0 .5rem; }
.mibauto-cancel { margin-left: 1rem; }

/* ---------- Форма ---------- */
.mibauto-form { margin-top: .4rem; }
.mibauto-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem 1.2rem;
}
.mibauto-field { display: flex; flex-direction: column; position: relative; }
.mibauto-field-wide,
.mibauto-field-full { grid-column: 1 / -1; }

.mibauto-label {
	font-size: .9rem; font-weight: 600; margin-bottom: .35rem;
	display: flex; align-items: center; gap: .35rem; flex-wrap: wrap;
}
.mibauto-req { color: var(--mib-yellow); }
.mibauto-optional { color: var(--mib-muted); font-weight: 400; font-size: .8rem; }

.mibauto-input {
	width: 100%;
	background: rgba(255,255,255,0.05);
	border: 1px solid var(--mib-border);
	border-radius: 12px;
	padding: .7rem .85rem;
	color: var(--mib-text);
	font: inherit;
	transition: border-color .15s, box-shadow .15s;
	box-sizing: border-box;
}
.mibauto-input:focus {
	outline: none;
	border-color: var(--mib-blue);
	box-shadow: 0 0 0 3px rgba(13,132,255,0.20);
}
select.mibauto-input { appearance: none; cursor: pointer; }
select.mibauto-input option { background: #161D2B; color: var(--mib-text); }
.mibauto-input::placeholder { color: var(--mib-muted); opacity: .8; }
.mibauto-textarea { resize: vertical; min-height: 84px; line-height: 1.5; }

.mibauto-vin-input { font-family: 'Courier New', monospace; letter-spacing: 1.5px; text-transform: uppercase; }
.mibauto-vin-input.mibauto-vin-ok { border-color: #2ecc71; }
.mibauto-vin-input.mibauto-vin-error { border-color: var(--mib-danger); box-shadow: 0 0 0 3px rgba(220,38,38,0.18); }

.mibauto-help { font-size: .78rem; color: var(--mib-muted); margin-top: .3rem; }
.mibauto-help-error { color: var(--mib-danger); }
.mibauto-vin-ok + .mibauto-help,
.mibauto-vin-count { font-variant-numeric: tabular-nums; }

/* ---------- Информационно балонче ---------- */
.mibauto-tip { position: relative; display: inline-flex; cursor: pointer; }
.mibauto-tip-icon {
	width: 22px; height: 22px; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	background: rgba(250,204,21,0.14); color: var(--mib-yellow);
	border: 1.5px solid var(--mib-yellow);
	font-size: 13px; font-weight: 700; font-style: italic;
	font-family: Georgia, 'Times New Roman', serif;
	line-height: 1;
	box-sizing: border-box;
}
.mibauto-tip-bubble {
	position: absolute;
	bottom: calc(100% + 10px);
	left: 50%;
	transform: translateX(-50%) translateY(4px);
	width: min(300px, 78vw);
	background: #0f1626;
	color: var(--mib-text);
	border: 1px solid var(--mib-border);
	border-radius: 12px;
	padding: .7rem .85rem;
	font-size: .82rem;
	font-weight: 400;
	line-height: 1.5;
	box-shadow: 0 12px 30px rgba(0,0,0,.5);
	opacity: 0; visibility: hidden;
	transition: opacity .15s, transform .15s, visibility .15s;
	z-index: 50;
	white-space: normal;
	text-align: left;
}
.mibauto-tip-bubble::after {
	content: "";
	position: absolute;
	top: 100%; left: 50%; transform: translateX(-50%);
	border: 7px solid transparent;
	border-top-color: #0f1626;
}
.mibauto-tip:hover .mibauto-tip-bubble,
.mibauto-tip:focus .mibauto-tip-bubble,
.mibauto-tip.is-open .mibauto-tip-bubble {
	opacity: 1; visibility: visible;
	transform: translateX(-50%) translateY(0);
}
/* Примерната стойност — различен, наклонен шрифт */
.mibauto-example {
	font-family: 'Courier New', Georgia, serif;
	font-style: italic;
	font-weight: 600;
	color: var(--mib-yellow);
	letter-spacing: .3px;
	white-space: nowrap;
}

/* ---------- Бутони ---------- */
.mibauto-form-actions { margin-top: 1.3rem; }
.mibauto-btn {
	display: inline-flex; align-items: center; justify-content: center;
	border: none; border-radius: 12px; cursor: pointer;
	font-family: 'Chakra Petch', sans-serif; font-weight: 700;
	padding: .8rem 1.6rem; font-size: 1rem;
	transition: transform .12s, filter .12s;
}
.mibauto-btn:hover { transform: translateY(-1px); filter: brightness(1.05); }
.mibauto-btn-cta { background: var(--mib-yellow); color: #0B111E; }

/* ---------- Предложение при регистрация ---------- */
.mibauto-register-offer {
	margin: 1rem 0 .4rem;
	background: rgba(13,132,255,0.08);
	border: 1px solid rgba(13,132,255,0.30);
	border-radius: 12px;
	padding: .9rem 1rem;
}
.mibauto-checkbox {
	display: flex; gap: .6rem; align-items: flex-start;
	font-size: .9rem; line-height: 1.5; cursor: pointer;
}
.mibauto-checkbox input { margin-top: .25rem; width: 18px; height: 18px; accent-color: #0D84FF; flex: 0 0 auto; }

/* ---------- Бранд бейджове / лога на марките ---------- */
.mibauto-brand {
	display: inline-flex; align-items: center; justify-content: center;
	flex: 0 0 auto; border-radius: 50%;
	color: #fff; font-weight: 800; overflow: hidden;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14);
	line-height: 1;
}
.mibauto-brand img { width: 100%; height: 100%; object-fit: contain; display: block; padding: 12%; box-sizing: border-box; background: #fff; }
.mibauto-brand-txt { font-family: 'Chakra Petch', 'Inter', sans-serif; letter-spacing: .02em; }
.mibauto-brand-lg { width: 46px; height: 46px; font-size: 1rem; }
.mibauto-brand-md { width: 34px; height: 34px; font-size: .82rem; }
.mibauto-brand-empty { background: rgba(255,255,255,0.06); color: var(--mib-muted); box-shadow: inset 0 0 0 1px var(--mib-border); }

/* Ред „бейдж + падащо меню" за марката */
.mibauto-make-row { display: flex; align-items: center; gap: .6rem; }
.mibauto-make-row .mibauto-input { flex: 1 1 auto; }

/* Бейдж в картата: група вляво, годината вдясно */
.mibauto-car-head { justify-content: flex-start; }
.mibauto-car-head .mibauto-car-title { margin-right: auto; }

/* Скрито поле (поколение при некурирани модели) */
.mibauto-hidden { display: none !important; }

/* ---------- Адаптивност ---------- */
@media (max-width: 560px) {
	.mibauto-grid { grid-template-columns: 1fr; }
	.mibauto-car-specs dd { text-align: left; }
}


/* ---------- Реал-тайм валидация: грешки при задължителни полета (2026) ---------- */
.mibauto-input.mibauto-field-error,
select.mibauto-input.mibauto-field-error {
	border-color: var(--mib-danger) !important;
	box-shadow: 0 0 0 3px rgba(220,38,38,0.18);
}

.mibauto-error-bubble {
	position: absolute;
	bottom: calc(100% + 8px);
	left: 0;
	z-index: 30;
	max-width: 280px;
	background: #2a1414;
	color: #ffd7d7;
	border: 1px solid var(--mib-danger);
	border-radius: 10px;
	padding: .55rem .8rem;
	font-size: .82rem;
	line-height: 1.4;
	box-shadow: 0 10px 28px rgba(0,0,0,0.4);
	opacity: 0;
	transform: translateY(4px);
	animation: mibErrorPop .16s ease-out forwards;
	pointer-events: none;
}
.mibauto-error-bubble::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 18px;
	border: 6px solid transparent;
	border-top-color: var(--mib-danger);
}
@keyframes mibErrorPop {
	from { opacity: 0; transform: translateY(4px); }
	to   { opacity: 1; transform: translateY(0); }
}


/* ---------- Покана за регистрация / виртуален гараж след успешно запитване (2026) ---------- */
.mib-garage-invite-overlay{
	position:fixed;inset:0;background:rgba(5,8,14,0.72);
	display:flex;align-items:center;justify-content:center;
	z-index:9999;opacity:0;transition:opacity .22s ease;
	padding:20px;box-sizing:border-box;
}
.mib-garage-invite-overlay.mib-garage-invite-show{opacity:1;}
.mib-garage-invite-modal{
	background:#11151c;border:1px solid #232a35;border-radius:16px;
	max-width:420px;width:100%;padding:32px 28px 28px;
	text-align:center;position:relative;
	transform:translateY(12px) scale(.98);transition:transform .22s ease;
	box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.mib-garage-invite-overlay.mib-garage-invite-show .mib-garage-invite-modal{transform:translateY(0) scale(1);}
.mib-garage-invite-close{
	position:absolute;top:14px;right:14px;width:30px;height:30px;
	border-radius:50%;border:1px solid var(--mib-border,rgba(255,255,255,.1));
	background:transparent;color:var(--mib-muted);font-size:20px;
	line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.mib-garage-invite-close:hover{color:var(--mib-text);border-color:var(--mib-muted);}
.mib-garage-invite-icon{font-size:2.4em;margin-bottom:10px;}
.mib-garage-invite-modal h3{margin:0 0 12px;color:#fff;font-size:1.3em;}
.mib-garage-invite-modal p{margin:0 0 22px;color:var(--mib-muted);font-size:.98em;line-height:1.55;}
.mib-garage-invite-actions{display:flex;flex-direction:column;gap:10px;}
.mib-garage-invite-cta{
	display:inline-block;background:var(--mib-yellow) !important;color:#1a1300 !important;
	font-weight:700;text-decoration:none !important;padding:.85rem 1.2rem;border-radius:12px;
	transition:filter .15s;
}
.mib-garage-invite-cta:hover{filter:brightness(1.08);}
.mib-garage-invite-dismiss{
	background:none;border:none;color:var(--mib-muted);font-size:.9em;
	cursor:pointer;padding:.4rem;text-decoration:underline;
}
.mib-garage-invite-dismiss:hover{color:var(--mib-text);}
@media (max-width:480px){.mib-garage-invite-modal{padding:26px 20px 22px;}}