/* ============================================================
JVParts OpenCart 3 — Оптимизиран stylesheet.css
Автор: V_kita ❤️
Версия: 1.4 (Увеличено лого, изчистен Info Bar)
============================================================ */

/* ============================================================

ОСНОВНИ НАСТРОЙКИ & BOOTSTRAP FIX
============================================================ */
body {
font-family: 'Open Sans', sans-serif;
font-weight: 400;
color: #666;
font-size: 12px;
line-height: 20px;
width: 100%;
background-image: url('/image/catalog/jv_background.jpg');
}

h1, h2, h3, h4, h5, h6 { color: #0066B1; }
a { color: #23a1d1; text-decoration: none; }
a:hover { text-decoration: none; color: #0066B1; }
legend { font-size: 18px; padding: 7px 0; }
label { font-size: 12px; font-weight: normal; }

.select, textarea, input, .input-group input, .input-group select { font-size: 12px; }
div.required .control-label:before { content: '* '; color: #F00; font-weight: bold; }

/* ============================================================
2. HEADER — Лого, търсачка, количка и червена лента
============================================================ */
#top { display: none !important; }

header {
background: #0d0d0d;
padding: 15px 0 0 0;
box-shadow: 0 3px 6px rgba(0,0,0,0.4);
position: relative;
z-index: 1001;
}

.header-split {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}

/* Лого /
#logo { text-align: left; margin-bottom: 0; }
#logo img {
max-height: 180px; / УВЕЛИЧЕНО ЛОГО (беше 140px) */
transition: all 0.3s ease;
}
#logo img:hover { transform: scale(1.02); filter: drop-shadow(0 0 8px rgba(226,39,24,0.7)); }
.header-left { flex: 0 0 60%; max-width: 60%; text-align: left; }

/* Търсачка & Количка (Дясна част) */
.header-right { flex: 0 0 40%; max-width: 40%; display: flex; justify-content: flex-end; align-items: center; }
.search-cart-wrapper { display: flex; flex-direction: column; width: 100%; max-width: 420px; }

/* Търсачка - Изчистен и стабилен дизайн /
#search {
display: flex;
align-items: stretch; / Разтяга елементите да са с еднаква височина /
width: 100%;
background: #fff;
border-radius: 6px;
box-shadow: 0 0 8px rgba(0,0,0,0.2);
margin-bottom: 8px; / Отстояние от количката /
}
#search .form-control {
flex: 1;
height: 46px;
border: none;
outline: none;
padding: 0 15px;
font-size: 15px;
color: #111;
border-radius: 6px 0 0 6px;
box-shadow: none; / Премахва Bootstrap сянката вътре /
}
#search .input-group-btn {
display: flex;
width: auto;
}
#search .btn {
display: flex;
align-items: center;
justify-content: center;
width: 56px;
height: 46px; / Твърда височина, същата като на input-а /
border: none;
background: #004d99;
color: #fff;
cursor: pointer;
transition: background 0.3s ease;
border-radius: 0 6px 6px 0;
padding: 0;
}
#search .btn:hover {
background: #0066cc;
}
#search .btn i {
font-size: 18px; / Задаваме размер директно на иконата */
}

/* Количка */
#cart { background: transparent; color: inherit; border-radius: 6px; padding: 0; margin-top: 0; display: flex; align-items: center; justify-content: flex-end; width: 100%; box-shadow: none; }
#cart > .btn { display: flex; align-items: center; justify-content: center; width: 100%; height: 46px; border: none; border-radius: 6px; background: #1a1a1a; color: #fff; transition: all 0.3s ease; font-weight: 500; }
#cart > .btn:hover { background: #004d99; color: #fff; }
#cart .fa-shopping-cart { color: #E22718; margin-right: 6px; }
#cart .dropdown-menu { z-index: 2000; position: absolute; }

/* ============================================================
INFO BAR (Изчистена Червена лента само с Телефони)
============================================================ */
.info-bar { background: #111; color: #fff; border-bottom: 2px solid #004d99; width: 100%; padding: 12px 0; }
.info-bar-inner { display: flex; justify-content: center; align-items: center; max-width: 1200px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; }

.phones-wrapper { display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; width: 100%; }
.phone-item { display: flex; align-items: center; background: rgba(255,255,255,0.08); padding: 6px 16px; border-radius: 25px; border: 1px solid rgba(255,255,255,0.1); transition: background 0.3s ease; }
.phone-item:hover { background: rgba(255,255,255,0.15); border-color: #333; }
.phone-item > a.phone-link { color: #fff; font-weight: 600; font-size: 15px; text-decoration: none; margin-right: 12px; padding-right: 12px; border-right: 1px solid rgba(255,255,255,0.2); }
.phone-item > a.phone-link i { color: #E22718; margin-right: 6px; font-size: 14px; }
.phone-item > a.phone-link:hover { color: #E22718; }

.chat-icons { display: flex; gap: 8px; }
.chat-icon { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: #fff; text-decoration: none; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.chat-icon.viber { background: #7360f2; }
.chat-icon.whatsapp { background: #25D366; }
.chat-icon:hover { transform: scale(1.15); color: #fff; box-shadow: 0 0 10px rgba(255,255,255,0.3); }

/* ============================================================
4. ОСНОВНО СЪДЪРЖАНИЕ & FOOTER (Оптимизиран)
============================================================ */
#content { min-height: 600px; background-color: #F5F5F5; border-radius: 4px; padding-top: 15px; padding-bottom: 15px; }

.footer-minimal {
background: #0066b2 !important; /* Твърдо зададено синьо */
color: #fff;
font-size: 14px;
margin-top: 30px;
padding-top: 30px;
border-top: 1px solid rgba(255,255,255,0.1);
}

.footer-minimal a { color: rgba(255,255,255,0.8); text-decoration: none; transition: 0.2s; }
.footer-minimal a:hover { color: #fff; padding-left: 5px; }

.footer-title {
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
margin-bottom: 15px;
color: #fff;
}

.footer-logo-img {
max-height: 60px;
width: auto;
display: block;
filter: brightness(0) invert(1); /* Прави логото бяло */
transition: opacity 0.2s;
}
.footer-logo-img:hover { opacity: 0.8; }

.footer-slogan {
font-size: 12px;
color: rgba(255,255,255,0.7);
line-height: 1.4;
}

.footer-separator {
border: 0;
border-top: 1px solid rgba(255,255,255,0.1);
margin: 20px 0;
}

/* Социални икони - Универсален фикс */
.footer-social-link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border: 1px solid rgba(255,255,255,0.4);
border-radius: 50%;
color: #fff !important;
margin: 0 5px;
transition: all 0.3s ease;
}

.footer-social-link:hover {
background: #fff;
color: #0066b2 !important;
transform: translateY(-3px);
}

.footer-social-link i {
font-size: 18px;
line-height: 36px;
/* Поддръжка за всички версии на FontAwesome */
font-family: "Font Awesome 6 Brands", "Font Awesome 5 Brands", "FontAwesome", sans-serif !important;
font-style: normal;
}

/* Специфичен код за Viber иконата в стара версия на FA */
.footer-social-link[title="Viber"] i::before { content: "\f409"; }

.breadcrumb { margin: 0 0 20px 0; padding: 8px 0; border: 1px solid #ddd; }
.breadcrumb > li { padding: 0 20px; position: relative; white-space: nowrap; }
.breadcrumb > li:after { content: ''; position: absolute; top: -3px; right: -5px; width: 26px; height: 26px; border-right: 1px solid #DDD; border-bottom: 1px solid #DDD; transform: rotate(-45deg); }

/* ============================================================
ИНСТАНТНА ТЪРСАЧКА & ИКОНИ В БУТОНИ
============================================================ */
.custom-search-container { position: relative; z-index: 1050; margin-bottom: 20px; }
.custom-search-container .input-group {
background: #fff; border-radius: 50px; display: flex; align-items: stretch;
box-shadow: 0 8px 25px rgba(0,0,0,0.5); overflow: hidden; border: 2px solid #fff;
}

#search-dropdown {
position: absolute; top: 100%; left: 0; width: 100%; background: #fff;
margin-top: 8px; border-radius: 12px; box-shadow: 0 15px 40px rgba(0,0,0,0.6);
z-index: 9999; overflow: hidden; border: 1px solid #ddd;
}

#search-dropdown .list-group-item {
display: flex !important; align-items: center !important;
padding: 10px 15px !important; color: #333 !important;
border-bottom: 1px solid #f0f0f0; transition: 0.2s;
}
#search-dropdown .list-group-item:hover { background: #f1f8ff !important; color: #0066B1 !important; }

/* Икони в бутони и мета данни */
.btn-fuel i, .mod-meta i { margin-right: 5px; text-align: center; }
.mod-meta i { width: 18px; color: #555; }
.mod-meta strong i { color: #1976d2; }

/* ============================================================
5. ПРОДУКТИ (Мрежа и Карти)
============================================================ */
.product-thumb { border: 1px solid #ddd; margin-bottom: 20px; background-color: #F6F6F6; display: flex; flex-direction: column; height: 100%; }
.product-thumb > div { display: flex; flex-direction: column; flex: 1; }
.product-thumb .image { text-align: center; }
.product-thumb .image img { margin: 0 auto; }
.product-thumb .caption { padding: 10px 15px; flex: 1; }
.product-thumb h4 { font-weight: bold; min-height: 44px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.product-thumb .product-desc { min-height: 60px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.product-thumb .price { color: #444; }
.product-thumb .price-old { color: #999; text-decoration: line-through; margin-left: 10px; }
.product-thumb .button-group { border-top: 1px solid #ddd; background-color: #eee; margin-top: auto; }
.product-thumb .button-group button { width: 33.33%; border: none; background: #eee; color: #888; text-transform: uppercase; font-weight: bold; line-height: 38px; }
.product-thumb .button-group button:hover { background: #ddd; color: #333; cursor: pointer; }
.thumbnails li { list-style: none; }
.price-divider { margin: 0 5px; opacity: .6; }
.price-eur { font-weight: 600; color: #555; }

/* ============================================================
6. ПРОДУКТОВА СТРАНИЦА & БАДЖОВЕ
============================================================ */
.product-master-container { background: #fff; border: 1px solid #e1e1e1; border-radius: 4px; padding: 20px; margin-bottom: 30px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
.original-product-wrapper { position: relative; display: block; }
.main-product-image { width: 100%; height: auto; }

.skv-badge { position: absolute; top: 15px; right: 15px; width: 90px; height: auto; z-index: 5; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.35)); transition: transform 0.3s ease; }
.skv-badge:hover { transform: scale(1.08); }

.product-badge-minimal { position: absolute; top: 5px; right: 20px; width: 100px; height: 100px; z-index: 10; filter: drop-shadow(0 5px 10px rgba(0,0,0,0.4)); transition: transform 0.3s ease; }
.product-badge-minimal:hover { transform: scale(1.05); }

.well-description { margin-top: 20px; padding: 15px; background: #fdfdfd; border-top: 1px solid #eee; font-size: 14px; }
.section-divider { margin: 30px -20px 20px -20px; border: 0; border-top: 1px solid #eee; }
.stock-warning { color: #d9534f; font-size: 11px; margin-top: 8px; text-align: center; }

/* Заместители */
.alt-title { margin-bottom: 15px; color: #333; font-weight: 600; text-transform: uppercase; font-size: 13px; letter-spacing: 0.5px; }
.alt-item { display: flex; justify-content: space-between; align-items: center; border: none !important; border-bottom: 1px solid #f5f5f5 !important; padding: 10px 0 !important; }
.alt-main-info { display: flex; align-items: center; gap: 20px; }
.alt-price { font-weight: bold; font-size: 16px; margin-right: 15px; color: #222; }

/* ============================================================
7. СТРАНИЦА КОНТАКТИ
============================================================ */
#information-contact .section-title { margin-top: 0; margin-bottom: 12px; color: #0066B1; }
.contact-card { border-radius: 6px; }
.contact-store { font-size: 16px; margin-bottom: 10px; }
.contact-line { margin-bottom: 10px; }
.contact-line i { width: 18px; text-align: center; margin-right: 6px; }
.contact-map iframe { box-shadow: 0 4px 12px rgba(0,0,0,0.15); }

/* ============================================================
8. OEM & BRANDS
============================================================ */
.oem-products { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; margin-top: 20px; }
.oem-card { background: #ffffff; border-radius: 12px; padding: 14px 18px; box-shadow: 0 6px 14px rgba(0,0,0,0.25); transition: 0.2s; text-align: center; }
.oem-card:hover { transform: translateY(-4px); box-shadow: 0 8px 18px rgba(0,0,0,0.35); }
.oem-card a { text-decoration: none; }
.oem-name { font-size: 15px; font-weight: 600; color: #2a6db0; }

.oem-header { background: rgba(0,0,0,0.65); padding: 25px; border-radius: 10px; margin-bottom: 25px; color: #fff; }
.oem-header h1 { color: #3ea6ff; margin-bottom: 10px; }
.oem-count { font-weight: 600; margin-bottom: 5px; }
.oem-desc { opacity: 0.9; }
.oem-toggle { cursor: pointer; color: #2a6db0; margin-top: 20px; }
.oem-toggle:hover { text-decoration: underline; }

.brand-hero { background: linear-gradient(rgba(0,0,0,0.85),rgba(0,0,0,0.85)), url('../image/catalog/bg-pattern.png'); padding: 60px 0; color: #fff; text-align: center; }
.brand-header { display: flex; align-items: center; justify-content: center; gap: 20px; margin-bottom: 20px; }
.brand-logo { height: 70px; max-width: 200px; object-fit: contain; margin-bottom: 15px; }
.brand-description { max-width: 800px; margin: auto; font-size: 16px; opacity: 0.9; }

.brand-products { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; margin-top: 40px; }
.brand-card { background: #fff; border-radius: 6px; padding: 15px; text-align: center; box-shadow: 0 2px 6px rgba(0,0,0,0.1); transition: 0.2s; }
.brand-card:hover { transform: translateY(-3px); box-shadow: 0 5px 12px rgba(0,0,0,0.15); }
.brand-card img { max-width: 100%; height: 120px; object-fit: contain; }
.brand-card-title { margin-top: 10px; font-size: 14px; }
.brand-card-price { margin-top: 6px; font-weight: bold; color: #1b6ac9; }

.replacement-img { width: 60px; height: 60px; object-fit: contain; }

/* ============================================================
9. RESPONSIVE (МОБИЛНИ УСТРОЙСТВА)
============================================================ */
@media (max-width: 991px) {
.header-left, .header-right { flex: 0 0 100%; max-width: 100%; text-align: center; }
.header-right { margin-top: 15px; justify-content: center; }
.search-cart-wrapper { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 100%; padding: 0 15px; box-sizing: border-box; }

/* Търсачката да заема 100% от наличното място, но с padding */
#search { width: 100%; max-width: 400px; margin: 0 auto 10px auto; }
#cart > .btn { width: 100%; max-width: 400px; margin: 0 auto; }

/* Info bar mobile fixes */
.info-bar-inner { padding: 8px 10px; }
.phones-wrapper { justify-content: center; width: 100%; gap: 10px; }

#logo { text-align: center; }
#logo img { max-height: 120px; margin: 0 auto; } /* Малко по-голямо лого и на мобилни */


}

@media (max-width: 768px) {
.skv-badge { width: 60px; top: 8px; right: 8px; }
.list-group-item { flex-direction: column !important; align-items: flex-start !important; }
.list-group-item > div { width: 100%; }
.list-group-item .text-right, .list-group-item div[style*="text-align:right"] { width: 100%; text-align: left !important; margin-top: 10px; }
.replacement-img { width: 80px; height: 80px; }
}

@media (max-width: 767px) {
.contact-map { margin-bottom: 20px; }
.replacements-table thead { display: none; }
.replacements-table, .replacements-table tbody, .replacements-table tr, .replacements-table td { display: block; width: 100%; }
.replacements-table tr { border: 1px solid #ddd; margin-bottom: 12px; padding: 10px; background: #fff; }
.replacements-table td { border: none !important; padding: 6px 0 !important; text-align: left !important; }
.replacements-table td:before { content: attr(data-label); display: block; font-weight: 700; color: #555; margin-bottom: 3px; }
.replacements-table td:first-child:before, .replacements-table td:last-child:before { content: ''; margin: 0; }
.replacements-table .btn { width: 100%; }
}

@media (max-width: 480px) {
/* На много малки екрани телефоните падат един под друг */
.phones-wrapper { flex-direction: column; gap: 8px;}
.phone-item { width: 100%; justify-content: center; max-width: 280px; }
}

/* ============================================================
ИНСТАНТНА ТЪРСАЧКА — ФИНАЛЕН ВАРИАНТ
============================================================ /
.custom-search-container {
position: relative;
z-index: 1050; / Да е над всичко останало */
margin-bottom: 20px;
}

.custom-search-container .input-group {
background: #fff;
border-radius: 50px;
display: flex;
align-items: stretch;
box-shadow: 0 8px 25px rgba(0,0,0,0.5);
overflow: hidden;
border: 2px solid #fff;
}

.search-icon-bg {
background: #fff;
padding: 0 20px;
display: flex;
align-items: center;
color: #0066B1;
font-size: 18px;
}

.custom-search-container input[name="instant_search"] {
height: 50px !important;
border: none !important;
padding: 0 15px !important;
font-size: 16px !important;
flex: 1;
outline: none !important;
box-shadow: none !important;
}

/* Резултатите — левият ръб да е подравнен с иконата */
#search-dropdown {
position: absolute;
top: 100%;
left: 0;
width: 100%;
background: #fff;
margin-top: 8px;
border-radius: 12px;
box-shadow: 0 15px 40px rgba(0,0,0,0.6);
z-index: 9999;
overflow: hidden;
border: 1px solid #ddd;
}

#search-dropdown .list-group-item {
color: #333 !important;
padding: 12px 20px;
border: none;
border-bottom: 1px solid #f0f0f0;
font-weight: 500;
transition: 0.2s;
display: block;
}

#search-dropdown .list-group-item:hover {
background: #f1f8ff !important;
padding-left: 28px !important;
color: #0066B1 !important;
}
#search-dropdown .list-group-item {
display: flex !important;
align-items: center !important;
padding: 10px 15px !important;
text-decoration: none;
border-bottom: 1px solid #f0f0f0;
}

#search-dropdown .list-group-item img {
flex-shrink: 0; /* Да не се мачка картинката */
}

#search-dropdown .list-group-item:hover {
background: #f8fbff !important;
}

/* Стил за иконките в бутоните */
.btn-fuel i {
margin-right: 5px;
opacity: 0.8;
}

/* Стил за иконките вътре в картата (mod-meta) /
.mod-meta i {
width: 18px; / Фиксирана ширина, за да са подравнени текстовете */
text-align: center;
margin-right: 5px;
color: #555;
}

/* Специфичен цвят за иконката на горивото в мета данните */
.mod-meta strong i {
color: #1976d2;
}