body { font-family: 'Inter Tight', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1 { font-size: 2.5rem; font-weight: 700; } h2 { font-size: 2.2rem; font-weight: 500; } h3 { font-size: 1.8rem; font-weight: 600; } .container-fluid { padding-left: 30px; padding-right: 30px; max-width: 1500px } .small,small { font-size:.825em } .bg-light-gray { background: #F5F5F5 } .bg-dark-gray { background: #5B6671 } .bg-white { background: #FFFFFF } .bg-light-black { background: #363B42 } .bg-black { background: #363D44 } .text-black { color: #363D44 } .text-red { color: #D03C3B } .border-light-dark{--bs-border-opacity:0.5;border-color:rgba(var(--bs-dark-rgb),var(--bs-border-opacity))!important} .btn-danger{--bs-btn-color:#fff;--bs-btn-bg:#D03C3B;--bs-btn-border-color:#D03C3B;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#bb2d3b;--bs-btn-hover-border-color:#b02a37;--bs-btn-focus-shadow-rgb:225,83,97;--bs-btn-active-color:#fff;--bs-btn-active-bg:#b02a37;--bs-btn-active-border-color:#a52834;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#fff;--bs-btn-disabled-bg:#dc3545;--bs-btn-disabled-border-color:#dc3545} .sticky-top { z-index: 1 } .lead { font-size: 1.125rem; } .hide { visibility: hidden; } .d-none { display: none !important; } .interest-rate-badge {position: absolute;bottom: 10px;right: 0;width: 130px;height: 130px;background-color: #000000;color: #fff;border-radius: 50%;display: flex;align-items: center;justify-content: center;text-align: center;font-size: 1rem;line-height: 1.2;box-shadow: 0 5px 15px rgba(0,0,0,0.2);transform: rotate(-10deg);} .interest-rate-badge .rate-value {display: block;font-size: 2.4rem;font-weight: 800;} /* Kontejner musí mít vysoký z-index, aby byl nad vším ostatním */ .toast-container { z-index: 1100; } .custom-toast { margin-top: 0.5rem; padding: 0.7rem 1rem; font-size: 0.8rem; background-color: #363D44; color: #fff; border-radius: 0.375rem; box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); display: flex; align-items: center; opacity: 0; transform: translateX(100%); transition: all 0.4s ease-in-out; } .custom-toast.show { opacity: 1; transform: translateX(0); } .go-top-btn { position: fixed; bottom: 90px; right: 20px; z-index: 1050; width: 44px; height: 44px; font-size: 1.5rem; border-radius: 50%; background-color: #363D44; color: #fff; border: 1px solid #363D44; text-decoration: none; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transform: translateY(20px); transition: all 0.3s ease-in-out; } .go-top-btn.show { opacity: 1; visibility: visible; transform: translateY(0);} .go-top-btn:hover { background-color: #FFFFFF; color: #363D44; border: 1px solid #363D44; } /* ================================================================= STYLY PRO INFO LIŠTU ================================================================= */ .info-bar { position: relative; max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out;background-color: #343a40; } .info-bar-text { padding: 0.75rem 1rem; font-size: 1rem; font-weight: 600; color: #FFCC00; } .info-bar-text p { margin: 0; padding: 0 } .info-bar.show { max-height: 100px; } .info-bar .btn-close { position: absolute; top: 50%; right: 1.5rem; transform: translateY(-50%); opacity: 0.7; filter: invert(1) grayscale(100%) brightness(200%); } .info-bar .btn-close:hover { opacity: 1; } /* ================================================================= VYLEPŠENÍ HLAVIČKY ================================================================= */ .top-bar { background-color: #f8f9fa; padding: 0.25rem 0.75rem; font-size: 0.85rem; } .top-bar-left .phone-link { color: #363D44; text-decoration: none; } .top-bar-left .phone-link:hover { color: #6c757d; } .top-bar-right .top-bar-link {color: #363D44;text-decoration: none;transition: color 0.2s;display: inline-flex;align-items: center;position: relative;padding: 0.25rem;} .top-bar-right .top-bar-link:hover {color: #6c757d;} .top-bar-right .top-bar-link .badge {font-size: 0.7em;vertical-align: top;margin-left: 3px;} .top-bar-right .icon-link {font-size: 1.25rem;} .top-bar-right .icon-link .bi {vertical-align: middle;} .top-bar-right .icon-link .badge {position: absolute;top: -3px;right: -8px;font-size: 0.65em;line-height: 1;padding: 3px 5px;margin-left: 0;} /* --- Styly pro přepínač jazyků --- */ .lang-switcher.dropdown .nav-link { padding: 0.25rem 0.5rem; font-weight: 600; color: #343a40; } .lang-switcher.dropdown .nav-link::after { display: inline-block; margin-left: .255em; vertical-align: .255em; content: ""; border-top: .3em solid; border-right: .3em solid transparent; border-bottom: 0; border-left: .3em solid transparent; } .lang-switcher .dropdown-menu { min-width: auto; font-size: 0.9rem; } .lang-switcher .dropdown-item { display: flex; justify-content: space-between; align-items: center; } .lang-switcher .dropdown-item:focus, .lang-switcher .dropdown-item:hover, .lang-switcher .dropdown-item:active{ color: #343a40; background-color: #F5F5F5; } .lang-switcher .lang-name-full { margin-left: 1rem; font-size: 0.85em; } /* ================================================================= STYLY PRO HLAVNÍ MENU (STICKY + DESKTOP + MOBIL) ================================================================= */ .main-header .navbar { padding: 0; } .main-header .navbar-brand img { height: 45px; width: auto; } #main-navbar-sticky.sticky { position: fixed; top: 0; left: 0; width: 100%; z-index: 1030; animation: slideDown 0.3s ease-out; } @keyframes slideDown { from { transform: translateY(-100%); } to { transform: translateY(0); } } /* --- Desktop Menu --- */ #desktop-menu .nav-link { padding: 1.5rem 0.65rem; font-weight: 400; font-size: 0.95rem; text-transform: uppercase; } @media only screen and (min-width: 992px) and (max-width: 1024px) { #desktop-menu .nav-link { padding: 1.5rem 0.5rem; } } #desktop-menu .nav-link:hover { background-color: #F5F5F5; } .has-desktop-submenu { position: static; } .has-desktop-submenu:not(.megamenu-item) { position: relative; } .submenu-arrow-desktop { font-size: 0.7em; margin-left: 5px; transition: transform 0.3s ease; } .has-desktop-submenu:hover .submenu-arrow-desktop { transform: rotate(180deg); } .desktop-submenu { position: absolute; top: 100%; left: 0; padding: 0.5rem 0; min-width: 240px; opacity: 0; transform: translateY(10px); visibility: hidden; transition: all 0.2s ease; border-radius: 0 0 0.5rem 0.5rem; background-color: #fff; border-top: 1px solid #CCCCCC; box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.1); z-index: 1021; } .desktop-submenu ul { list-style: none; margin: 0; padding: 1rem; } /* --- Klasické a Megamenu --- */ .has-desktop-submenu:hover > .desktop-submenu { opacity: 1; transform: translateY(0); visibility: visible; } .desktop-submenu .submenu-item { display: block; padding: 0.75rem 1.5rem; color: #363D44; text-decoration: none; white-space: nowrap; } .desktop-submenu .submenu-item:hover { background-color: #f8f9fa; } /* --- Specifické styly pro Megamenu --- */ .megamenu { width: 900px; left: 50%; margin-left: -450px; padding: 2rem 1rem; } @media (min-width: 1400px) { .megamenu { width: 1200px; margin-left: -600px; } } .megamenu-links ul { list-style: none; margin: 0; padding: 1rem; } .megamenu-links li { padding: 0; } .megamenu-links h5 { font-weight: 700; margin-bottom: 1.5rem; } .megamenu-links .submenu-item { border-bottom: 1px solid #f0f0f0; } .megamenu-links .submenu-item:last-child { border-bottom: none; } .megamenu-cta { display: flex; align-items: center; justify-content: center; padding: 0; height: 100%; } /* --- Mobilní (Off-Canvas) Menu --- */ .mobile-menu-nav .nav-item { border-bottom: 1px solid #eee; } .mobile-menu-nav .nav-link { display: flex; justify-content: space-between; align-items: center; padding: 1rem 0; font-size: 1.1rem; font-weight: 600; color: #363D44; text-decoration: none; } .submenu-arrow { width: 10px; height: 10px; border-right: 2px solid #363D44; border-bottom: 2px solid #363D44; transform: rotate(45deg); transition: transform 0.3s ease; } .nav-item.open .submenu-arrow { transform: rotate(225deg); } .submenu { padding-left: 1.5rem; max-height: 0; overflow: hidden; transition: max-height 0.4s ease-in-out; } .submenu ul { list-style: none; padding: 0; } .submenu .submenu-item { display: block; padding: 0.8rem 0; color: #555; text-decoration: none; border-bottom: 1px solid #f0f0f0; } .submenu .submenu-item:last-child { border-bottom: none; } /* Když je položka otevřená (má třídu .open), otočíme šipku */ .offcanvas .nav-item.open .dropdown-toggle .dropdown-arrow { transform: rotate(180deg); } /* Podmenu je ve výchozím stavu úplně skryté a nemá žádnou výšku */ .offcanvas .dropdown-menu { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; background-color: transparent; border: none !important; box-shadow: none !important; padding: 0; margin: 0; padding-left: 1.5rem; /} .offcanvas .dropdown-item { padding: 0.75rem 0; border-bottom: 1px solid #f0f0f0; } .offcanvas .dropdown-item:last-child { border-bottom: none; } .offcanvas .dropdown-item:hover, .offcanvas .dropdown-item:focus { background-color: transparent; color: #363D44; } /* V mobilu se Megamenu chová jako normální dropdown, takže tyto styly zůstávají */ .offcanvas .megamenu, .offcanvas .megamenu .container, .offcanvas .megamenu .row { display: block; padding: 0; box-shadow: none; } .offcanvas .megamenu-links, .offcanvas .megamenu-cta { padding: 0; background-color: transparent; } .offcanvas .megamenu-links h5 { display: none; } .offcanvas .megamenu-cta { padding-top: 1rem; margin-top: 1rem; border-top: 1px solid #dee2e6; } /* ================================================================= STYLY PRO HLAVNÍ HERO SLIDER ================================================================= */ .hero-slider { position: relative; height: 500px; color: #fff; } .main-slider { width: 100%; height: 100%; } .swiper-slide { position: relative; overflow: hidden; } .slide-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; } /*.slide-background::after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ''; background: linear-gradient(90deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.1) 60%, rgba(0,0,0,0) 100%); }*/ .slide-content { position: relative; display: flex; flex-direction: column; justify-content: center; height: 100%; padding: 0 100px; z-index: 2; } .slide-content h1 { margin-bottom: 1rem; font-size: 3.2rem; font-weight: 500; } .slide-content p { margin-bottom: 2rem; max-width: 600px; font-size: 1.2rem; } .slide-btn { padding: 0.8rem 2rem; font-weight: 600; border-radius: 50px; } .slider-container .swiper-button-next::after, .slider-container .swiper-button-prev::after { content: ''; } .main-slider-prev, .main-slider-next { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; width: 54px; height: 54px; background-color: rgba(255, 255, 255, 0.9); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #000; font-size: 2rem; cursor: pointer; transition: background-color 0.2s, color 0.2s; } .main-slider-prev:hover, .main-slider-next:hover { background-color: #fff; } .main-slider-prev { left: 30px; } .main-slider-next { right: 30px; } .main-slider-pagination { position: absolute; bottom: 20px; left: 50% !important; transform: translateX(-50%) !important; width: auto !important; } .main-slider-pagination .swiper-pagination-bullet { width: 30px; height: 4px; border-radius: 2px; background-color: rgba(255, 255, 255, 0.5); opacity: 1; transition: background-color 0.2s; } .main-slider-pagination .swiper-pagination-bullet-active { background-color: #fff; } /* --- Responzivita --- */ @media (max-width: 767.98px) { .hero-slider { height: 500px; } .slide-content h1 { font-size: 2.5rem; } .slide-content p { font-size: 1.1rem; } .main-slider-prev { left: 15px; } .main-slider-next { right: 15px; } .slide-badge { width: 100px; height: 100px; bottom: 30px; right: 15px; } .slide-badge .badge-value { font-size: 1.8rem; } } /* ================================================================= STYLY PRO STATICKÝ BANNER (FINÁLNÍ OPRAVENÁ VERZE) ================================================================= */ .banner-container {position: relative;width: 100%;max-height: 220px;color: #fff;overflow: hidden;aspect-ratio: 1920 / 400;} .banner-background-img {position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;z-index: 1;} .banner-overlay {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: linear-gradient(90deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.2) 100%);z-index: 2;} .banner-content {position: relative;height: 100%;display: flex;flex-direction: column;align-items: left;justify-content: center;text-align: left;z-index: 3;padding: 1rem;} .banner-title {margin-left: 20px;font-size: 2.6rem;font-weight: 500;text-shadow: 1px 1px 3px rgba(0,0,0,0.4);animation: fadeInDown 0.8s ease-out both;} .banner-subtitle {font-size: 1.2rem;text-shadow: 1px 1px 2px rgba(0,0,0,0.5);animation: fadeInUp 0.8s ease-out 0.2s both;max-width: 800px;margin-top: 0.5rem;} /* Responzivita pro menší zařízení */ @media (max-width: 767.98px) { .banner-container {} .banner-title { font-size: 2.1rem; } .banner-subtitle { font-size: 1.1rem; } } /* Klíčové snímky pro animace (volitelné, ale hezké) */ @keyframes fadeInDown { from { opacity: 0; transform: translateY(-30px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } /* ================================================================= STYLY PRO VYHLEDÁVACÍ LIŠTU ================================================================= */ .search-bar-wrapper { position: fixed; top: 0; left: 0; width: 100%; background-color: #fff; padding: 1.5rem 0; z-index: 1040; box-shadow: 0 4px 15px rgba(0,0,0,0.1); transform: translateY(-100%); transition: transform 0.3s ease-in-out; } body.search-active .search-bar-wrapper { transform: translateY(0); } body.search-active::after { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); z-index: 1039; } .search-bar-form { display: flex; align-items: center; gap: 1rem; } .search-input.form-control { flex-grow: 1; height: 50px; font-size: 1.1rem; border: none; box-shadow: none !important; background: transparent; } .search-input.form-control:focus { border-bottom: 2px solid #363D44; } .search-close-btn.btn-icon { font-size: 1.5rem; color: #6c757d; background: transparent; border: none; } .search-close-btn.btn-icon:hover { color: #000; } .search-suggestions { margin-top: 1rem; background-color: #fff; border-radius: 0.5rem; overflow: hidden; display: none; box-shadow: 0 10px 30px rgba(0,0,0,0.1); } .suggestions-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; padding: 1.5rem; } @media (min-width: 992px) { .suggestions-grid { grid-template-columns: 300px 1fr; } } .suggestions-categories { border-right: 1px solid #e9ecef; padding-right: 1.5rem; } .suggestions-cars { padding-left: 0.5rem; } @media (max-width: 991px) { .suggestions-categories { border-right: none; border-bottom: 1px solid #e9ecef; padding-right: 0; padding-bottom: 1rem; } .suggestions-cars { padding-left: 0; } } .suggestion-category-item { padding: 0.5rem 0.75rem; border-radius: 0.375rem; transition: background-color 0.2s, color 0.2s; } .suggestion-category-item:hover { background-color: var(--bs-primary); color: #fff !important; } .suggestion-category-item:hover i { color: #fff !important; } .suggestion-item { display: flex; align-items: center; padding: 0.75rem; border-radius: 0.375rem; text-decoration: none; color: #212529; transition: background-color 0.2s; } .suggestion-item:hover { background-color: #f8f9fa;} .suggestion-image { width: 80px; height: 60px; object-fit: cover; border-radius: 0.25rem; margin-right: 1rem;} .suggestion-details { flex-grow: 1;} .suggestion-title { font-weight: 600; margin-bottom: 0; } .suggestion-subtitle { font-size: 0.85rem; color: #6c757d; margin-bottom: 0;} .suggestion-price { font-weight: 700; color: var(--bs-danger); font-size: 1.1rem; margin-left: 1rem;} .search-suggestions strong { color: var(--bs-danger); } .search-suggestions .spinner-border { margin: 2rem auto; display: block; } /* ================================================================= STYLY PRO KARTY ZNAČEK ================================================================= */ .brand-showcase-card { display: block; text-decoration: none; overflow: hidden; transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;} .brand-showcase-card:hover { transform: translateY(-3px); box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.1);} .brand-showcase-card .card-body { display: flex; align-items: flex-end; position: relative; } /* --- Levá část s logem a názvem --- */ .brand-info { flex-grow: 1; margin-top: 1rem; margin-bottom: 1rem;} .brand-info .brand-logo {height: 32px;max-width: 80px;margin-bottom: 0.5rem;} .brand-info .brand-name {margin-left: 0.5rem;font-weight: 600;color: #363D44;font-size: 1rem;display: block;} /* --- Pravá část s autem a počtem --- */ .car-preview-wrapper {position: relative;margin-bottom: 0.5rem;text-align: right;} .car-preview-wrapper .brand-count {position: absolute;top: -25px;right: 0;font-size: 0.9rem;color: #6c757d;font-weight: 500;background-color: rgba(255,255,255,0.7);padding: 0.1rem 0.4rem;border-radius: 5px;} .car-preview-wrapper .brand-thumbs {max-height: 60px; width: auto; max-width: 120px; } .all-brands-links a {font-size: 0.925rem;font-weight: 400;} .all-brands-links a:hover {text-decoration: none;} /* ================================================================= STYLY PRO FEATURE SEKCI (S VLASTNÍMI SVG) ================================================================= */ .feature-section { padding: 50px 0; } .feature-item { display: flex; align-items: center; gap: 20px; } .feature-item:hover .feature-icon-wrapper { transform: translateY(-3px); box-shadow: 0 2px 8px rgba(0,0,0,0.07); } .feature-icon-wrapper { width: 64px; height: 64px; display: flex; justify-content: center; flex-shrink: 0; align-items: center; background-color: #fff; transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; } .feature-icon { width: 64px; height: 64px; color: #000; } .feature-text { margin: 0; font-size: 1rem; font-weight: 500; line-height: 1.4; color: #343a40; } @media (max-width: 767.98px) { .feature-item { flex-direction: column; text-align: center; gap: 10px; } } /* ================================================================= STYLY PRO SERVICES SEKCI (S VLASTNÍMI SVG) ================================================================= */ .services .nav-tabs { --bs-nav-tabs-border-width: 0; } .services .nav-tabs .nav-item { margin: 0 0.2rem; } .services .nav-tabs .nav-link { padding: 1.5rem 2rem; background-color: transparent !important; color: #6c757d; border: 1px solid #FFFFFF !important; display: flex; flex-direction: column; align-items: center; transition: color 0.3s ease; } .services .nav-tabs .nav-link:hover { border: 1px solid #CCCCCC !important; color: #343a40; } .services .nav-tabs .nav-link.active { border: 1px solid #CCCCCC !important; color: #363D44; font-weight: 500; } .services .nav-tabs .nav-link img.services-icon { margin-bottom: 0.5rem; width: 48px; height: 48px; object-fit: contain; } .services .tab-content .tab-pane { min-height: 400px; padding: 0; background-color: #F5F5F5; border-radius: 1rem; } .services .tab-content .tab-pane .img-services.lazy, .services .tab-content .tab-pane .img-services {aspect-ratio: 500 / 324;object-fit: cover;height: 100%;border-top-right-radius: var(--bs-border-radius-lg) !important;border-bottom-right-radius: var(--bs-border-radius-lg) !important;} /* Responzivní úpravy pro menší obrazovky */ @media (max-width: 991.98px) { .tab-content .tab-pane .row { flex-direction: column-reverse; } .services .tab-content .tab-pane .img-services { margin-bottom: 2rem; height: auto; border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; } .tab-content .tab-pane { padding: 2rem; } } @media (max-width: 767.98px) { .services .nav-tabs .nav-item { margin: 0 0.5rem; } .services .nav-tabs .nav-link { padding: 1rem 0.5rem; } } /* --- GRID VIEW --- */ @media (min-width: 992px) { /* VÝCHOZÍ STAV: Filtry jsou viditelné -> 3 sloupce */ #listing-page.filters-visible #cars-list-container.view-grid .col { flex: 0 0 33.333333%; max-width: 33.333333%; } /* STAV PO SKRYTÍ FILTRŮ -> 4 sloupce */ #listing-page.filters-hidden #cars-list-container.view-grid .col { flex: 0 0 25%; max-width: 25%; } } /* --- LIST VIEW --- */ .car-card-list-view { display: none; } #cars-list-container.view-list .car-card-grid-view { display: none; } #cars-list-container.view-list .car-card-list-view { display: block; } /* Pro .view-list přepíšeme chování .col */ #cars-list-container.view-list .col { flex: 0 0 100% !important; max-width: 100% !important; } /* Zajistíme, aby se obrázek v list-view správně roztáhl na výšku */ #cars-list-container.view-list .card-img-top-wrapper, #cars-list-container.view-list .card-img-top-wrapper img { height: 100%;} /* VÝCHOZÍ STAV: Filtry jsou viditelné */ #listing-page.filters-visible #cars-list-container .row { --bs-columns: 3; } /* STAV PO SKRYTÍ FILTRŮ: Zobrazíme více aut */ #listing-page.filters-hidden #cars-list-container .row { --bs-columns: 4; } /* STYLY PRO ZOBRAZENÍ "LIST" (pokud je máte) */ #cars-list-container.view-list .row { --bs-columns: 1; } #listing-page.filters-hidden #filter-panel { display: none; } #listing-page.filters-hidden #show-filters-btn { display: inline-block !important; } #listing-page.filters-hidden #results-panel { width: 100%; } #filter-panel { transition: all 0.3s ease-in-out; overflow: hidden; } #results-panel { transition: width 0.3s ease-in-out; } #listing-page.filters-hidden #filter-panel { width: 0; padding: 0; margin: 0; opacity: 0; } #listing-page.filters-hidden #results-panel { width: 100%; flex: 0 0 100%; max-width: 100%; } .disabled-filter { opacity: 0.5; pointer-events: none; } .disabled-filter label { text-decoration: line-through; } .custom-select-wrapper { position: relative; } .custom-select-wrapper.disabled { opacity: 0.6; pointer-events: none; } .custom-select-header { background: white; border: 1px solid #ced4da; padding: 0.375rem 0.75rem; border-radius: 0.375rem; cursor: pointer; display: flex; justify-content: space-between; align-items: center; } .custom-select-display { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .custom-select-arrow { transition: transform 0.2s ease-in-out; } .custom-select-header.open .custom-select-arrow { transform: rotate(180deg); } .custom-select-header .custom-select-values { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .custom-select-options { display: none; position: absolute; background: white; border: 1px solid #ced4da; top: 100%; left: 0; right: 0; z-index: 1000; max-height: 250px; overflow-y: auto; } .custom-option { display: flex; align-items: center; padding: 0.25rem 0.675rem; font-size: 0.9rem; cursor: pointer; } .custom-option:hover { background-color: #F5F5F5; } .custom-option input { margin-right: 0.5rem; } .form-check-label { font-size: 0.9rem; } .brand-logo { height: 16px; margin-left: 0.5rem; } .model-group-header { font-weight: bold; padding: 0.5rem 0.75rem; background-color: #e9ecef; } /* ================================================================= STYLY PRO HLAVIČKU VÝSLEDKŮ VYHLEDÁVÁNÍ (DESIGN v2) ================================================================= */ .results-header, .results-title-row { margin-top: -1.5rem; margin-bottom: 1rem; } .results-title-row h1 {font-size: 2.3rem; font-weight: 700; } .active-filters-row { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 0.75rem; padding-bottom: 0.5rem; margin-bottom: 0.5rem; border-bottom: none; } .active-filters-label { font-weight: 400; color: #6c757d; } /* Styly pro samotné štítky (pills/badges) */ #active-filters-container .badge { padding: 0.125rem 0.5rem 0.3rem; font-size: 0.75rem; border-radius: 0.5rem; } #active-filters-container .btn-close { opacity: 0.7; } #active-filters-container .badge:hover .btn-close { opacity: 1;} /* Řádek s ovládacími prvky a počtem */ .results-controls-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.3rem; } .results-count { font-weight: 400; } /* Ovládací prvky vpravo */ .view-controls .btn-group, .view-controls .form-select { box-shadow: none; border: 1px solid #dee2e6; } .view-controls .btn-group .btn { background-color: #fff; } .view-controls .btn-group .btn:hover { box-shadow: none; } .view-controls .btn-group .btn.active { background-color: #363D44; color: #fff; } .view-controls .form-select-sm { min-width: 120px; } .card.auta { border: 0; } .card.auta.naceste { background-color: rgba(207, 159, 63, 0.1) } .card.auta .card-header { background-color: transparent; border: none;} .card.auta .card-header .card-title { font-size: 1.1rem; font-weight: 800; letter-spacing: -0.5px; color: #363D44; } .card.auta .card-header .card-subtitle { height: 34px; line-height: 1.2; overflow: hidden; } .card.auta .card-img { background-color: transparent; border-radius: 0; border: none; } .card.auta .card-body { padding: 0.75rem; background-color: transparent; border: none; } .card.auta .card-footer, .card.auta .card-footer:last-child { padding: 0 0.5rem 1rem; background-color: transparent; border: none; } .card-img-top-wrapper { position: relative; overflow: hidden; } .card.auta .ev-value { position: absolute; bottom: 0; left: 0; padding: 0.125rem 0.3rem; background-color: rgba(51, 51, 51, 0.5); color: white; text-transform: uppercase;z-index: 2; border-top-right-radius: 0.25rem;border-bottom-right-radius: 0.25rem;} .card.auta .discount-badge { position: absolute; bottom: 25px;left: 0;background-color: #D03C3B; color: #fff;padding: 0.125rem 0.3rem;text-transform: uppercase;z-index: 2; border-top-right-radius: 0.25rem;border-bottom-right-radius: 0.25rem;} .card.auta .car-card-list-view .discount-badge {font-size: 1.1rem;padding: 0.5rem 1rem;} .card.auta .rezervace-value { position: absolute; top: 10px; left: 5px; padding: 0 5px; background-color: #FF9900; color: white; z-index: 999 } .card.auta .prodano-value { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; z-index: 1; } .card.auta .prodano-value .prodano-text { padding: 0.5rem 1rem; font-size: 2rem; font-weight: bold; line-height: 1.1; background-color: rgba(255, 255, 255, 0.5); color: #D03C3B; border: 1px solid #D03C3B; border-radius: 1rem; transform: rotate(-15deg); } .card.auta .naceste-value { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; z-index: 1; } .card.auta .naceste-value .naceste-text { padding: 0.5rem 1rem; font-size: 2rem; font-weight: bold; line-height: 1.1; background-color: rgba(255, 255, 255, 0.5); color: #000000; border: 1px solid #666666; border-radius: 1rem; transform: rotate(-15deg); } .card.auta .car-card-actions1 { position: absolute; display: flex; top: 3px; right: 5px; gap: 3px; z-index: 999; } .card.auta .car-card-actions2 { position: absolute; display: flex; bottom: 3px; right: 5px; gap: 3px; z-index: 999; } .car-card-actions .btn { border-radius: 50%; width: 28px; height: 28px; padding: 1px 0 0; display: inline-flex; align-items: center; justify-content: center; background-color: rgba(255, 255, 255, 0.875); border: 1px solid rgba(255, 255, 255, 0.875); transition: all 0.2s; } .car-card-actions .btn:hover { background-color: #fff; transform: scale(1.1); } .car-card-actions .btn.active { background-color: #D03C3B; color: #fff; border-color: #D03C3B; } .car-card-actions .remove-favorite-from-list { display: none; } .card-img.lazy, .card-img { aspect-ratio: 377 / 251; object-fit: cover; width: 100%; height: auto; background-color: white; transition: opacity 0.3s ease-in-out; } img.lazy { opacity: 0; } .card-img:not(.lazy) { opacity: 1; } .gallery-track { display: flex; flex-wrap: nowrap; width: 100%; height: 100%; transition: transform 0.3s ease-in-out; will-change: transform; } .gallery-track picture { flex: 0 0 100%; width: 100%; height: 100%; } .card-img-top-wrapper.loading::before { content: ""; position: absolute; top: 50%; left: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border: 3px solid rgba(0, 0, 0, 0.1); border-top-color: #D03C3B; border-radius: 50%; animation: spin 1s linear infinite; z-index: 1; } @keyframes spin { 100% { transform: rotate(360deg); } } .card-img-top-wrapper:hover .gallery-arrow, .card-img-top-wrapper:hover .gallery-dots { opacity: 1; pointer-events: auto;} .gallery-arrow { top: 40%; transform: translateY(- 50%); background: rgba(0, 0, 0, 0.5); color: white; border: none; cursor: pointer; width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; padding: 0; font-size: 1.125rem; } .gallery-arrow, .gallery-dots {position: absolute; opacity: 0; transition: opacity 0.2s ease-in-out; pointer-events: none; z-index: 2; } .gallery-arrow.prev { left: 5px; } .gallery-arrow.next { right: 5px; } .gallery-dots { bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 5px; } .gallery-dots .dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.7); } .gallery-dots .dot.active { background: white; } .card.auta .stat-icon { font-size: 1.2rem; color: #363D44; } .card.auta .stat-label { font-size: 0.65rem; letter-spacing: 0.5px; } .card.auta .stat-value { font-size: 0.8rem; font-weight: 600; color: #363D44; } .card.auta .price-main { font-size: 1.3rem; font-weight: 800; letter-spacing: -1px; color: #363D44; } .card.auta .price-sub { font-size: 0.8rem; line-height: 0.9; } .card.auta img.car-icon-warranty {} /* =================================================================== */ /* Custom styly pro noUiSlider */ /* =================================================================== */ /* 1. Základní lišta (kolejnice) */ .noUi-target { background: #CCCCCC; border-radius: 999px; border: none; box-shadow: none; height: 8px; } /* 2. Spojnice mezi jezdci (vybraný rozsah) */ .noUi-connect { background: #363D44; border-radius: 999px; box-shadow: none; } /* 3. Jezdec (tečka, handle) */ .noUi-handle { background: #363D44; border: 4px solid #FFFFFF; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); border-radius: 50%; width: 28px !important; height: 28px !important; top: -10px !important; right: -11px !important; &::before, &::after { display: none; } } /* Styl pro jezdce, když je aktivní (při tažení myší) */ .noUi-active { box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2); transform: scale(1.1); } .calculator-section .calculator-card { background-color: #FFFFFF; border-radius: 1rem; } .calculator-section .calculator-promo-card { position: relative; } .calculator-section .calculator-car-card { margin-top: 2rem; background-color: #FFFFFF; border-radius: 1rem; } .form-card { background-color: #FFFFFF; border-radius: 1rem; } .form-floating>.form-select { background-color: #F0F3F4; border-color: #F0F3F4; } .form-floating>.form-control { background-color: #F0F3F4; border-color: #F0F3F4; } .form-floating > label::after { background-color: transparent !important; } .form-floating>.form-control:focus { background-color: #FFFFFF; border-color: #F0F3F4; box-shadow: none; } .slider-style-label { font-size: 0.9rem; font-weight: 500; text-transform: uppercase; color: #363D44; } .slider-range-labels { margin-top: 0.5rem; padding: 0 0.5rem; font-size: 0.85rem; color: #6c757d; } .slider-style-value { font-size: 0.8rem; color: #6c757d; } .slider-group .form-label { margin-bottom: 0; font-weight: 500; } .slider-group .slider-value { padding: 0.5rem 1rem 0.325rem; font-weight: 700; background-color: #F0F3F4; border-radius: 50px; } .result-group .monthly-payment-value {background-color: #FFFFFF;color: #D03C3B;padding: 0.5rem 1.5rem;border: 1px solid #363D44;border-radius: 999px;font-size: 1.3rem;font-weight: bold;display: inline-block;} .insurance-check { display: flex; align-items: center; } .insurance-check .form-check-input { margin-top: 0; width: 1.5em; height: 1.5em; flex-shrink: 0; border-color: #363D44; } .insurance-check .form-check-input:checked { background-color: #363D44; border-color: #363D44; } .insurance-check .form-check-input:focus { box-shadow: none; } .insurance-check .form-check-label { margin-left: 0.75rem; line-height: 2em; } .insurance-option { display: flex; align-items: center; } .insurance-option .form-check-input { margin-top: 0; width: 1.5em; height: 1.5em; flex-shrink: 0; border-color: #363D44; } .insurance-option .form-check-input:checked { background-color: #363D44; border-color: #363D44; } .insurance-option .form-check-input:focus { box-shadow: none; } .insurance-option .form-check-label { margin-left: 0.75rem; line-height: 2em; } .insurance-switch { display: flex; align-items: center; } .insurance-switch .form-check-input { margin-top: 0; width: 3em; height: 1.4em; flex-shrink: 0; background-color: #F0F3F4; border-color: #363D44; } .insurance-switch .form-check-input:focus { outline: none; box-shadow: none; } .insurance-switch .form-check-label { margin-left: 0.75rem; line-height: 2em; } .insurance-switch .form-check-input:checked { background-color: #363D44; border-color: #363D44; } /* ================================================================= STYLY PRO FORMULÁŘ VÝKUPU ================================================================= */ #counter-offer-fields {transition: opacity 0.3s ease-in-out, max-height 0.3s ease-in-out;max-height: 500px; overflow: hidden;} #counter-offer-fields.hidden { opacity: 0;max-height: 0;margin-top: 0 !important;padding-top: 0 !important;} /* ================================================================= STYLY PRO CTA BANNER (VYLEPŠENO) ================================================================= */ .cta-banner-section {position: relative;padding: 2.5rem 0; background-color: #212529; color: #fff;overflow: hidden;} .cta-background {position: absolute;top: 0; left: 0;width: 100%; height: 100%;background-size: cover; background-position: center 30%; opacity: 0.2; z-index: 1;} /* Gradientní překryvná vrstva */ .cta-banner-section::before {content: '';position: absolute;top: 0; left: 0; width: 100%; height: 100%;background: linear-gradient(90deg, var(--bs-gray-dark) 0%, rgba(33, 37, 41, 0.8) 60%); z-index: 2;} .cta-container {position: relative;z-index: 3; } .cta-text-content .cta-title {font-size: 2.2rem;font-weight: 600;margin-bottom: 0.5rem;} .cta-text-content .cta-subtitle {font-size: 1.1rem;color: rgba(255,255,255,0.8);max-width: 500px;margin-bottom: 2rem;} .cta-text-content .cta-button {font-size: 1.1rem;} .cta-phone-box {display: flex;align-items: center;justify-content: flex-end; gap: 1.5rem; background-color: rgba(255,255,255,0.1);border: 1px solid rgba(255,255,255,0.2);padding: 1.5rem; border-radius: 1rem;backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);} .cta-phone-box .phone-icon .bi {font-size: 2.5rem;color: #fff;} .cta-phone-box .phone-details .phone-label {display: block;font-size: 1rem;font-weight: 500;text-transform: uppercase;color: rgba(255,255,255,0.7);} .cta-phone-box .phone-details .phone-number {font-size: 1.6rem;font-weight: 700;color: #fff;text-decoration: none;} @media (max-width: 991.98px) { .cta-banner-section {padding: 1.6rem 0;text-align: center;} .cta-text-content .cta-subtitle {margin-left: auto;margin-right: auto;} .cta-phone-box {margin-top: 3rem;justify-content: center;} } /* Styl pro nevalidní formulářové pole */ .form-control.is-invalid, .form-select.is-invalid {border-color: var(--bs-danger) !important;box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25) !important;} .form-honeypot { position: absolute; left: -5000px; top: -5000px; } /* =================================================================== */ /* Custom styly pro Stránkování (Pagination) */ /* =================================================================== */ .pagination .page-link {color: #363D44;background-color: #fff;border: 1px solid #dee2e6;border-radius: 0.25rem;margin: 0 2px;transition: all 0.2s ease-in-out;} .pagination .page-link:hover {background-color: #F5F5F5;color: #000;} .pagination .page-item.active .page-link {color: #fff;background-color: #363D44;border-color: #363D44;font-weight: bold;z-index: 3} .pagination .page-item.disabled .page-link {color: #6c757d;pointer-events: none;background-color: #fff;border-color: #dee2e6;} /* Styly pro šipky "Další/Předchozí" */ .pagination .page-item:first-child .page-link, .pagination .page-item:last-child .page-link {border-radius: 0.25rem;} .pagination .page-link.page-link-no-border {border: none} .pagination .page-link .bi {vertical-align: middle;} #karta-auta .car-info-section { background-color: #FFFFFF; border-radius: 1rem; } #karta-auta .car-info-section .h2 { margin-bottom: 0; font-size: 1.5rem} #karta-auta .car-info-section .alert-soft-warning { background-color: #fff3cd; color: #664d03; border-left: 4px solid #ffc107 !important; } #karta-auta .car-info2-section .video-trigger {cursor: pointer; min-height: 100px; border-radius: 1rem; background-color: #171717;} #karta-auta .car-info2-section .video-trigger:hover img {transform: scale(1.05);} #karta-auta .car-info2-section .video-trigger .video-text {font-size: 0.8rem;} #karta-auta .cebia-pdf-highlight {background-color: #fff; border: 2px solid #e3000f; transition: all 0.3s ease; position: relative; overflow: hidden;} #karta-auta .cebia-pdf-highlight:hover {background-color: #fff5f5; transform: translateY(-3px); box-shadow: 0 2px 5px rgba(227, 0, 15, 0.2) !important;} #karta-auta .cebia-pdf-highlight::after {content: '';position: absolute;top: 0;left: -100%;width: 50%;height: 100%;background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(227,0,15,0.1) 50%, rgba(255,255,255,0) 100%);animation: shine 3s infinite;} @keyframes shine { 0% { left: -100%; } 20% { left: 200%; } 100% { left: 200%; }} #karta-auta .price-container .discount-badge {font-weight: 700;font-size: 0.9rem;text-transform: uppercase;} #karta-auta .price-box {position: relative;transition: transform 0.2s ease;} #karta-auta .price-box.cash {background-color: #fff;border-color: #dee2e6 !important;} #karta-auta .price-box.cash .main-price {font-size: 1.65rem;line-height: 1.1;} #karta-auta .price-box.cash .sub-price {font-size: 0.85rem;} #karta-auta .price-box.finance {box-shadow: 0 2px 5px rgba(220, 53, 69, 0.3);} #karta-auta .price-box.finance .installment-price {font-size: 1.6rem;line-height: 1.1;} @media (max-width: 576px) { #karta-auta .price-box.cash .main-price {font-size: 1.5rem;} #karta-auta .price-box.finance .installment-price {font-size: 1.4rem;} } #karta-auta .gallery-main {width: 100%;border-radius: 0.375rem;overflow: hidden;} #karta-auta .gallery-main .swiper-slide {cursor: pointer;background-color: #F5F5F5;display: flex;align-items: center;justify-content: center;} #karta-auta .gallery-main .swiper-slide a {display: block;width: 100%;height: 100%;} #karta-auta .gallery-main .swiper-slide img {display: block;width: 100%;height: 100%;object-fit: cover;} /* Šipky hlavního slideru */ #karta-auta .gallery-main .gallery-main-next, #karta-auta .gallery-main .gallery-main-prev {color: #fff;background-color: rgba(0,0,0,0.3);border-radius: 50%;width: 44px;height: 44px;} #karta-auta .gallery-main .gallery-main-next::after, #karta-auta .gallery-main .gallery-main-prev::after { font-size: 1.2rem; } .video-slide-link {position: relative;} .video-slide-background {position: absolute;top: 0; left: 0;width: 100%; height: 100%;background-size: cover;background-position: center;transition: transform 0.3s ease;} .video-slide-link:hover .video-slide-background {transform: scale(1.05);} #karta-auta .ev-value { position: absolute; bottom: 5px; left: 0; padding: 2px 5px; background-color: rgba(51, 51, 51, 0.5); color: white; z-index: 999 } #karta-auta .rezervace-value { position: absolute; top: 10px; left: 5px; padding: 0 5px; background-color: #FF9900; color: white; z-index: 999 } #karta-auta .prodano-value { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; z-index: 1; } #karta-auta .prodano-value .prodano-text { padding: 0.5rem 1rem; font-size: 4rem; font-weight: bold; line-height: 1.1; background-color: rgba(255, 255, 255, 0.5); color: #D03C3B; border: 1px solid #D03C3B; border-radius: 1rem; transform: rotate(-15deg); } #karta-auta .naceste-value { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; z-index: 1; } #karta-auta .naceste-value .naceste-text { padding: 0.5rem 1rem; font-size: 4rem; font-weight: bold; line-height: 1.1; background-color: rgba(255, 255, 255, 0.5); color: #000000; border: 1px solid #000000; border-radius: 1rem; transform: rotate(-15deg); } #karta-auta .swiper-container-wrapper { padding: 0; } /* --- Video slide v hlavní galerii --- */ .video-slide-link {display: flex;align-items: center;justify-content: center;width: 100%;height: 100%;text-decoration: none;} .video-slide-content {display: flex;flex-direction: column;align-items: center;color: #343a40;transition: color 0.2s;} .video-slide-link:hover .video-slide-content {color: var(--bs-danger);} .video-slide-content .bi {margin-top: -20%;font-size: 4rem;line-height: 1;} .video-slide-content span {margin-top: 0.5rem;font-weight: 600;} /* Miniatura videa */ #karta-auta .gallery-thumbs .video-thumb {margin-top: -30%;width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;color: #6c757d;font-size: 1.5rem;} /* Aktivní miniatura videa */ .swiper-slide-thumb-active .video-thumb {border-color: #363D44;color: #363D44;} /* Zajistíme, aby VŠECHNY slidy (obrázkové i video) měly stejnou výšku */ #karta-auta .gallery-main .swiper-slide {height: auto;} #karta-auta .gallery-main .swiper-slide a {display: block;height: 100%;} #karta-auta .gallery-main .swiper-slide img {display: block;width: 100%;height: 100%;object-fit: cover;} #karta-auta .gallery-thumbs .swiper-slide {width: 25%;height: 100%;opacity: 0.5;cursor: pointer;transition: opacity 0.2s;border-radius: 0.375rem; overflow: hidden; border: 3px solid transparent;} #karta-auta .gallery-thumbs .swiper-slide-thumb-active {opacity: 1; border: 1px solid #363D44;} #karta-auta .gallery-thumbs .swiper-slide img {display: block;width: 100%;height: 100%;object-fit: cover;} /* Šipky miniatur */ #karta-auta .gallery-thumbs .gallery-thumbs-next, #karta-auta .gallery-thumbs .gallery-thumbs-prev { position: absolute; top: 50%; margin-top: -18px; width: 36px; height: 36px; color: #fff; background-color: rgba(0,0,0,0.3); border-radius: 50%; } #karta-auta .gallery-thumbs .gallery-thumbs-next::after, #karta-auta .gallery-thumbs .gallery-thumbs-prev::after { font-size: 1rem; } #karta-auta .list-group-item { font-size: 0.85rem } #karta-auta .accordion-button:focus {box-shadow: none !important;border-color: rgba(0,0,0,.125);} #karta-auta .accordion-button:not(.collapsed) { color: #212529;background-color: #f8f9fa;box-shadow: none !important;} #karta-auta .accordion-item {border: none;border-bottom: 1px solid #e9ecef;} #karta-auta .calculator-section { background-color: #FFFFFF; border-radius: 1rem; } /* =================================================================== */ /* STYLY PRO TLAČÍTKO SDÍLENÍ NA DETAILU VOZU */ /* =================================================================== */ #karta-auta .share-container { position: relative; } #karta-auta .share-toggle-btn.btn-icon { width: 40px; height: 40px;border-radius: 50%;font-size: 1.1rem;} #karta-auta .share-menu { position: absolute;top: 100%;right: 0;z-index: 10;min-width: 200px;padding: 0.5rem 0;margin-top: 0.5rem;background-color: #fff;border-radius: 0.5rem;box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);border: 1px solid rgba(0, 0, 0, 0.1);opacity: 0;visibility: hidden;transform: translateY(10px);transition: all 0.2s ease-in-out;} #karta-auta .share-menu.show {opacity: 1;visibility: visible;transform: translateY(0);} #karta-auta .share-item {display: flex;align-items: center;width: 100%;padding: 0.75rem 1.25rem;font-weight: 500;color: #212529;text-decoration: none;background: none;border: none;} #karta-auta .share-item:hover {background-color: #f8f9fa;} #karta-auta .share-item i {font-size: 1.2rem;margin-right: 0.75rem;color: #6c757d;} /* === Vlastní styly pro LightGallery === */ .lg-backdrop {} .lg-toolbar, .lg-components .lg-button, .lg-counter { color: #363D44; } .lg-thumb-item.active { border: 2px solid #D03C3B; } /* Šipky pro posun */ .lg-actions .lg-next, .lg-actions .lg-prev { background-color: rgba(0, 0, 0, 0.3); color: #fff; } .lg-actions .lg-next:hover, .lg-actions .lg-prev:hover { background-color: rgba(0, 0, 0, 0.5); color: #fff; } .car-detail-section .section-title { margin-bottom: 0.5rem; padding-bottom: 0.5rem;} .equipment-grid { column-count: 2; column-gap: 2rem; } @media (max-width: 767px) { .equipment-grid { column-count: 1; } } .equipment-category { margin-bottom: 2rem; break-inside: avoid-column; } .equipment-category .category-name { display: inline-block; margin-bottom: 0.75rem; border-bottom: 1px dotted #ccc; padding-bottom: 0.25rem; font-size: 1rem; font-weight: bold; } .equipment-list { list-style: none; padding-left: 0; font-size: 0.9rem; } /* Ve výchozím stavu je tlačítko pro odebrání skryté */ .remove-favorite-from-list {display: none;} /* Na stránce oblíbených... */ .favorites-page .favorite-toggle, .favorites-page .compare-toggle {display: none;} .favorites-page .remove-favorite-from-list {display: inline-block;} /* Chceme tlačítko vpravo nahoře? Žádný problém. */ .favorites-page .car-card-actions { top: 2px; bottom: auto; } .favorites-page .car-card-actions .btn { background-color: #dc3545; color: #fff; border-color: #dc3545; } .compare-wrapper { display: flex; } .compare-features { flex-shrink: 0; width: 250px; background: #fff; z-index: 2;} /* Hlavičky */ .compare-head {position: relative;height: 250px;padding: 0.5rem;text-align: center;border-bottom: 1px solid #dee2e6;} .compare-head-placeholder {border-right: 1px solid #dee2e6;} /* Tabulky */ .compare-wrapper table { margin-bottom: 0; } .compare-wrapper table td, .compare-wrapper table th { height: 40px; vertical-align: middle; white-space: nowrap; font-size: 0.9rem; } .compare-wrapper table td.compare-category-equipment { padding: 0; text-align: center; } .compare-features table td, .compare-features table th { border-right: 1px solid #dee2e6; } .compare-category-header, .compare-category-spacer { height: 40px; padding: 0.5rem; font-weight: bold; background-color: #F5F5F5; } .compare-category-spacer { background-color: transparent; border-bottom: 1px solid #dee2e6; } /* Responzivita pro mobily */ @media (max-width: 767px) { .compare-wrapper {display: block;} .compare-features {display: none;} } .compare-swiper-wrapper { position: relative; flex-grow: 1; overflow: hidden; } /* Zajištění trvalé viditelnosti a pozice šipek */ .compare-swiper-wrapper .swiper-button-next, .compare-swiper-wrapper .swiper-button-prev { position: absolute; top: 110px; /* Polovina výšky hlavičky (220px / 2) */ transform: translateY(-50%); background-color: rgba(0,0,0,0.4); color: white; width: 44px; height: 44px; border-radius: 50%; transition: background-color 0.2s; z-index: 10; } .compare-swiper-wrapper .swiper-button-next:hover, .compare-swiper-wrapper .swiper-button-prev:hover { background-color: rgba(0,0,0,0.6); } .compare-swiper-wrapper .swiper-button-next::after, .compare-swiper-wrapper .swiper-button-prev::after { font-size: 1.2rem; } .compare-swiper-wrapper .swiper-button-prev { left: 15px; } .compare-swiper-wrapper .swiper-button-next { right: 15px; } .remove-compare-item-btn { position: absolute; top: 10px; right: 10px; padding: 0; width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; z-index: 5;} .compare-wrapper .truncate-text { display: inline-block; padding: 0; max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; font-size: 0.9rem; } /* hlidaci-pes */ .filter-checkbox-group { max-height: 150px; overflow-y: auto; border: 1px solid #dee2e6; padding: 0.75rem; border-radius: 0.375rem; background-color: #fff; } /* ================================================================= STYLY PRO SEKCI Čerstvě zlevněno ================================================================= */ .discount-section { position: relative; } .discount-section .swiper-container-wrapper { padding-bottom: 40px; } .discount-section .swiper-button-next::after, .discount-section .swiper-button-prev::after { content: ''; } .discount-slider-prev, .discount-slider-next {position: absolute;top: 50%;transform: translateY(-50%);z-index: 10;width: 44px;height: 44px;background-color: rgba(255, 255, 255, 0.9); border: 1px solid #363D44; border-radius: 50%;display: flex;align-items: center;justify-content: center;color: #000;font-size: 2rem;cursor: pointer;transition: background-color 0.2s, color 0.2s;} .discount-slider-prev:hover, .discount-slider-next:hover { background-color: #fff; } .discount-slider-prev { left: -22px; } .discount-slider-next { right: -22px; } .discount-slider-pagination .swiper-pagination-bullet { background-color: #FFFFFF; border: 1px solid #363D44; opacity: 1; } .discount-slider-pagination .swiper-pagination-bullet-active { background-color: #363D44; border: 1px solid #363D44; opacity: 1; } /* ================================================================= STYLY PRO SEKCI Auta na cestě ================================================================= */ .car-offer-section { position: relative; } .car-offer-section .swiper-container-wrapper { padding-bottom: 40px; } .car-offer-section .swiper-button-next::after, .car-offer-section .swiper-button-prev::after { content: ''; } .car-offer-slider-prev, .car-offer-slider-next {position: absolute;top: 50%;transform: translateY(-50%);z-index: 10;width: 44px;height: 44px;background-color: rgba(255, 255, 255, 0.9); border: 1px solid #363D44; border-radius: 50%;display: flex;align-items: center;justify-content: center;color: #000;font-size: 2rem;cursor: pointer;transition: background-color 0.2s, color 0.2s;} .car-offer-slider-prev:hover, .car-offer-slider-next:hover { background-color: #fff; } .car-offer-slider-prev { left: -22px; } .car-offer-slider-next { right: -22px; } .car-offer-slider-pagination .swiper-pagination-bullet { background-color: #FFFFFF; border: 1px solid #363D44; opacity: 1; } .car-offer-slider-pagination .swiper-pagination-bullet-active { background-color: #363D44; border: 1px solid #363D44; opacity: 1; } /* ================================================================= STYLY PRO STRÁNKU POJIŠTĚNÍ GAP ================================================================= */ .gap-insurance-section {padding: 2rem 0;background-color: #fff;} /* Použijeme a lehce upravíme stávající styly pro benefit-box */ .benefit-box {padding: 2rem;border-radius: 1rem;height: 100%;text-align: center;background-color: #F5F5F5;border: 1px solid #e9ecef;} .benefit-box .benefit-icon {font-size: 2.5rem;color: ;margin-bottom: 1rem;display: inline-block;} .benefit-box .benefit-title {font-size: 1.25rem;font-weight: 600;margin-bottom: 0.75rem;} .benefit-box .benefit-text {color: #555;line-height: 1.6;font-size: 0.95rem;} /* Znovupoužití a lehké doladění stylu pro kroky procesu */ .process-flow {} .process-step {position: relative;text-align: center;padding-top: 2.5rem;} .process-step .step-number {position: absolute;top: 0;left: 50%;transform: translateX(-50%);width: 40px;height: 40px;background-color: var(--bs-danger);color: #fff;border-radius: 50%;font-weight: 700;font-size: 1.2rem;display: flex;align-items: center;justify-content: center;} .process-step .step-title {font-size: 1.25rem;font-weight: 600;margin-bottom: 0.75rem;} /* ================================================================= STYLY PRO SEKCI VÝHOD GPS LOKÁTORU ================================================================= */ .feature-box {background-color: #F5F5F5;padding: 2.5rem;border-radius: 1rem;height: 100%;} .feature-box > h4 {font-size: 1.5rem;font-weight: 600;margin-bottom: 2rem;} .feature-list {display: flex;flex-direction: column;gap: 1.5rem;} .feature-list-item h5 {font-size: 1.1rem;font-weight: 700;margin-bottom: 0.25rem;color: #212529;} .feature-list-item p {color: #555;line-height: 1.6;margin-bottom: 0;} /* ================================================================= STYLY PRO SEKCI "O SPOLEČNOSTI" (KARTY) ================================================================= */ .about-features-section {margin-top: 3rem;background-color: #fff;} .about-features-section .section-title {font-size: 2.5rem;font-weight: 700;margin-bottom: 0.5rem;} .about-features-section .lead {color: #6c757d;max-width: 700px;margin-left: auto;margin-right: auto;} /* Třída pro Bootstrap sloupce, aby se karty roztáhly na celou výšku */ .d-flex.align-items-stretch {display: flex;align-items: stretch;} .feature-card {background-color: #F5F5F5;border-radius: 1rem;overflow: hidden;display: flex;flex-direction: column;width: 100%;} .feature-card .card-content {padding: 2rem;flex-grow: 1;} .feature-card h3 {font-size: 1.8rem;font-weight: 600;margin-bottom: 1rem;} .feature-card p {color: #555;line-height: 1.7;} .feature-card .card-image { width: 100%;height: 250px; object-fit: cover;} /* ================================================================= STYLY PRO SEKCI "O NÁS V MÉDIÍCH" ================================================================= */ .media-list {margin-top: 3rem;display: flex;flex-direction: column;gap: 1.5rem;} .media-item.card {background-color: #F5F5F5;border-color: #F5F5F5;border-radius: 1rem;overflow: hidden;} .media-thumbnail {position: relative;display: block;height: 100%;} .media-thumbnail img {width: 100%;height: 100%;object-fit: cover;transition: transform 0.3s ease;} .media-thumbnail:hover img {transform: scale(1.05);} .media-thumbnail .play-icon { position: absolute; top: 50%;left: 50%;transform: translate(-50%, -50%);font-size: 4rem;color: rgba(255, 255, 255, 0.9);text-shadow: 0 2px 10px rgba(0,0,0,0.5);pointer-events: none;transition: transform 0.3s ease;} .media-thumbnail:hover .play-icon {transform: translate(-50%, -50%) scale(1.1);} .media-item .card-body {padding: 1.5rem;} .media-item .card-title {font-weight: 600;} .media-item .card-meta {font-size: 0.9rem;color: #6c757d;margin-bottom: 1rem;} .media-item .card-text {color: #555;} .media-audio-player {width: 100%;margin-top: 1rem;} /* ================================================================= STYLY PRO SEKCI "ONLINE PROHLÍDKA" ================================================================= */ .online-tour-section {background-color: #fff;} .online-tour-section .section-title {font-size: 2.8rem;font-weight: 800;} .online-tour-section .lead {max-width: 650px;margin-left: auto;margin-right: auto;} /* --- Sekce "Jak to probíhá" --- */ .process-section h2 {font-size: 2rem;font-weight: 700;margin-bottom: 2rem;} .process-step {position: relative;text-align: center;} .step-number {position: absolute;top: -20px;left: 50%;transform: translateX(-50%);width: 40px;height: 40px;background-color: var(--bs-danger);color: #fff;border-radius: 50%;font-weight: 700;display: flex;align-items: center;justify-content: center;border: 2px solid #fff;} .step-icon {width: 150px;height: 150px;margin: 0 auto 1rem auto;background-color: #F5F5F5;border-radius: 50%;display: flex;align-items: center;justify-content: center;} .step-icon img {width: 80px;height: 80px;} .process-step p {color: #555;max-width: 250px;margin-left: auto;margin-right: auto;} .video-play-link {display: inline-flex;align-items: center;gap: 0.5rem;color: var(--bs-danger);font-weight: 600;text-decoration: none;margin-bottom: 1rem;transition: color 0.2s;} .video-play-link:hover {color: #000;} .video-play-link .bi {font-size: 1.2rem;} /* --- Sekce s galerií --- */ .gallery-section {margin-top: 4rem;} .gallery-section .img-fluid {width: 100%;height: 100%;object-fit: cover;} /* ================================================================= STYLY PRO SEKCI "VÝHODNÉ FINANCOVÁNÍ" ================================================================= */ .financing-image-wrapper { position: relative; text-align: center; } /* Responzivita */ @media (max-width: 991.98px) { .financing-image-wrapper { margin-top: 3rem; } } @media (max-width: 767.98px) { .interest-rate-badge { width: 120px; height: 120px; } .interest-rate-badge .rate-value { font-size: 2.2rem; } } /* ================================================================= STYLY PRO SEKCI benefits ================================================================= */ .benefits-section .benefit-card { padding: 1rem; height: 100%; border-radius: 1rem; text-align: center; background-color: #F5F5F5; border: 1px solid #e9ecef; } .benefits-section .benefit-icon { margin-bottom: 1rem; display: inline-block; font-size: 2.5rem; color: #363D44; } .benefits-section .benefit-title { margin-bottom: 0.75rem; font-size: 1.25rem; font-weight: 600; } .benefits-section .benefit-text { color: #555; line-height: 1.6; font-size: 0.95rem; } /* ================================================================= STYLY PRO SEKCI financing-documents ================================================================= */ .financing-documents .nav-tabs { --bs-nav-tabs-border-width: 0; } .financing-documents .nav-tabs .nav-item { margin: 0 0.2rem; } .financing-documents .nav-tabs .nav-link { padding: 1rem 2rem 0.7rem; background-color: transparent !important; color: #6c757d; border: 1px solid #FFFFFF !important; display: flex; flex-direction: column; align-items: center; transition: color 0.3s ease; } .financing-documents .nav-tabs .nav-link:hover { border: 1px solid #e9ecef !important; color: #343a40; } .financing-documents .nav-tabs .nav-link.active { border: 1px solid #e9ecef !important; color: #363D44; font-weight: 500; } .financing-documents .tab-content .tab-pane { padding: 0; min-height: 400px; background-color: #F5F5F5; border: 1px solid #e9ecef; border-radius: 1rem; } .financing-documents .tab-content .tab-pane .img-financing-documents { object-fit: cover; height: 100%; border-top-right-radius: var(--bs-border-radius-lg) !important; border-bottom-right-radius: var(--bs-border-radius-lg) !important; } /* Responzivní úpravy pro menší obrazovky */ @media (max-width: 991.98px) { .tab-content .tab-pane .row {flex-direction: column-reverse;} .financing-documents .tab-content .tab-pane .img-financing-documents {margin-bottom: 2rem;height: auto;border-top-right-radius: 0 !important;border-bottom-right-radius: 0 !important;} .tab-content .tab-pane {padding: 2rem;} } @media (max-width: 767.98px) { .financing-documents .nav-tabs .nav-item {margin: 0 0.5rem;/} .financing-documents .nav-tabs .nav-link {padding: 1rem 0.5rem;} } .financing-questions .tab-content .tab-pane {padding: 0;min-height: 400px;background-color: #F5F5F5;border-radius: 1rem;box-shadow: 0 .5rem 1rem rgba(0,0,0,.08);} /* ================================================================= STYLY PRO STRÁNKU ZÁRUKA PREMIUM ================================================================= */ .hero-text h4 { margin: 0; padding: 0 1.5rem; text-align: left; } .hero-text ul.hero-benefits { list-style: none; margin: 0; padding: 1.5rem; font-size: 1.2rem; text-align: left; } .entry-conditions { margin-top: 1rem; padding: 2rem; background-color: #F5F5F5; border-radius: 1rem; text-align: left; } .entry-conditions h5 { font-weight: 600; } .entry-conditions ul { list-style: none; margin: 0; padding: 0; } .warranty-limits { padding: 1.5rem 0; } .limits-list { list-style: none; padding: 1.5rem; text-align: left; } .limits-list li { position: relative; margin-bottom: 0.5rem; padding-left: 1.5rem; font-size: 1.1rem } .limits-list li::before { position: absolute; content: ''; left: 0; top: 0.5em; width: 10px; height: 10px; background-color: #D03C3B; border-radius: 50%; } .side-note { padding: 1.5rem; background-color: #F5F5F5; border-radius: 1rem; height: 100%; } .section-header-accent { display: inline-block; padding: 0.75rem 2rem; font-size: 1.5rem; font-weight: 700; background-color: #D03C3B; color: #fff; } .section-header-accent.dark { background-color: #343a40; } /* ================================================================= STYLY PRO IKONY KRYTÝCH SOUČÁSTEK ================================================================= */ /* Hlavní kontejner pro jednu položku (ikona + text) */ .warranty-covered-parts { padding: 2rem 0 0.5rem; height: 100%; background-color: #F5F5F5; border-radius: 1rem; } .warranty-covered-parts .part-item {display: flex;flex-direction: column;align-items: center;text-align: center;padding: 0.25rem;min-width: 170px;} .part-item img { height: 48px; margin-bottom: 0.5rem; } .part-item > svg.part-icon {width: 48px !important;height: 48px !important;display: block;flex-shrink: 0;margin-bottom: 0.75rem;color: #363D44;} element.style { width: 24px; } /* Styl pro text pod ikonou */ .part-item > p {display: block;font-weight: 500;line-height: 1.3;font-size: 0.9rem;} /* ================================================================= STYLY PRO DETAIL ZÁRUKY (PŘÍKLADY A VÝLUKY) ================================================================= */ .warranty-details { padding: 3rem 0; background-color: #fff; } .details-intro {text-align: center;max-width: 800px;margin: 0 auto 3rem auto;color: #adb5bd;font-size: 1.1rem;} .details-header-wrapper { position: relative; text-align: center; z-index: 2; } .section-header-accent { display: inline-block; padding: 0.75rem 2rem; font-size: 1.5rem; font-weight: 700; background-color: #D03C3B; color: #fff; border-radius: 0.25rem; } .section-header-accent.dark { background-color: #343a40; } .details-grid { position: relative; } .details-box { padding-top: 2.5rem; padding: 2.5rem; height: 100%; background-color: #F5F5F5; border-radius: 1rem; } .details-category { margin-bottom: 2rem; } .details-category:last-child { margin-bottom: 0; } .details-category h5 { display: flex; align-items: center; margin-bottom: 1rem; font-size: 1.2rem; font-weight: 700; } .details-category h5 .bi { margin-right: 0.75rem; font-size: 1.5rem; color: #D03C3B; } .details-list { padding-left: 0; list-style: none; text-align: left; } .details-list li { position: relative; margin-bottom: 0.5rem; padding-left: 1.5rem; color: #555; } .details-list li::before {content: '';position: absolute;left: 0;top: 0.6em;transform: translateY(-50%);width: 6px;height: 6px;background-color: #ccc;border-radius: 50%;} .details-box.exclusions h5 .bi { color: #343a40; } /* Upravíme seznam pro výluky, aby používal stejné odrážky jako seznam krytých dílů */ .exclusions-list {list-style: none;padding: 0;} .exclusions-list li {margin-bottom: 0.5rem;} /* Zarovnání nadpisu "Výluky" */ .exclusions-grid .details-header-wrapper {margin-top: 4rem;} /* ================================================================= NOVÉ STYLY PRO BANNER STRÁNKY ZÁRUKY ================================================================= */ .warranty-hero-v2 {background-color: #000;color: #fff;padding: 3rem 0;position: relative;overflow: hidden;border-radius: 1.5rem;background-size: contain;background-position: left top;background-repeat: no-repeat;} /*.warranty-hero-v2::before { content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%; background: radial-gradient(circle at 20% 30%, rgba(200, 150, 50, 0.2), transparent 50%), radial-gradient(circle at 80% 60%, rgba(200, 150, 50, 0.1), transparent 60%), linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0.4) 60%, rgba(0,0,0,0.2) 100%);z-index: 1; } */ /* Veškerý obsah (nadpisy, text, boxy) musí být nad překryvnou vrstvou */ .warranty-hero-v2 > .container {position: relative;z-index: 2;} .hero-title-v2 {font-size: 2.5rem;font-weight: 700;margin-bottom: 0.5rem;} .premium-badge-v2 {display: inline-block;background-color: #E3AE6F;color: #000;font-weight: 700;padding: 0.5rem 2rem;border-radius: 50px;font-size: 1.5rem;letter-spacing: 1px;margin-bottom: 1rem;border: 2px solid #000;box-shadow: 0 0 10px rgba(212, 175, 55, 0.5);} .hero-subtitle-v2 {font-size: 1.1rem;color: #adb5bd;max-width: 600px;margin: 0 auto 3rem auto;} .hero-content-v2 {position: relative;z-index: 2;} .hero-cars-img {max-width: 100%;height: auto;margin-bottom: -50px;} .badge-5-let {position: absolute;bottom: 0;right: 0;transform: translateX(-50%);color: #fff;text-transform: uppercase;font-weight: 300;font-size: 1.5rem;display: flex;align-items: center;} .badge-5-let span:first-of-type {font-size: 8rem;font-weight: 700;line-height: 1;margin: 0 0.5rem;color: #E3AE6F;text-shadow: 0 0 15px rgba(212, 175, 55, 0.6);} .badge-5-let .premium-text {background-color: #E3AE6F;color: #000;font-size: 0.8rem;font-weight: 700;padding: 0.2rem 0.5rem;border-radius: 50px;align-self: flex-end;margin-bottom: 1.5rem;margin-left: 0.5rem;} .warranty-benefits-box {text-align: left;} .warranty-benefits-title {font-size: 2rem;font-weight: 700;color: #E3AE6F;line-height: 1.2;margin-bottom: 1.5rem;} .warranty-benefits-list {list-style: none;padding: 0;font-size: 1.1rem;} .warranty-benefits-list li {margin-bottom: 0.5rem;display: flex;align-items: center;} .warranty-benefits-list i {color: #E3AE6F;font-size: 1.5rem;margin-right: 0.5rem;} .entry-conditions-v2 {background-color: #E3AE6F;color: #000;padding: 1.5rem;border-radius: 1rem;height: 100%;} .entry-conditions-v2 h5 {font-weight: 700;} .entry-conditions-v2 ul {list-style: none;padding: 0;margin: 0;} .hero-description-text {padding: 1.5rem;height: 100%;display: flex;align-items: center;} .limits-grid-v2 {display: grid;grid-template-columns: repeat(6, 1fr);gap: 1rem;margin-top: 3rem;} .limit-box-v2 {background-color: #E3AE6F;color: #000;padding: 1rem;border-radius: 1rem;text-align: center;font-size: 0.9rem;display: flex;flex-direction: column;justify-content: center;} .limit-box-v2 strong {display: block;margin-bottom: 0.25rem;} @media (max-width: 991.98px) { .warranty-hero-v2 {background-position: center 50px;} .warranty-benefits-box { text-align: center; } .badge-5-let { position: static; transform: none; justify-content: center; margin-top: 2rem; margin-bottom: 2rem;} .hero-cars-img { margin-bottom: 2rem; } .limits-grid-v2 { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 767.98px) {.limits-grid-v2 { grid-template-columns: repeat(2, 1fr); }} /* ================================================================= NOVÉ STYLY PRO SEKCI KRYTÝCH SOUČÁSTEK ================================================================= */ .parts-grid-v2 {display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.65rem;justify-items: center;} .part-item-v2 {text-align: center;max-width: 150px;} .part-icon-wrapper {width: 100px;height: 100px;background-color: #343a40;border-radius: 1rem;display: flex;align-items: center;justify-content: center;margin: 0 auto 0.3rem auto;transition: background-color 0.3s, transform 0.3s;} .part-item-v2:hover .part-icon-wrapper {background-color: #f8f9fa; transform: translateY(-5px);} .part-icon-wrapper img {width: 60px; height: 60px; filter: invert(1) grayscale(1) brightness(2);} .part-item-v2:hover .part-icon-wrapper img {filter: none;} .part-item-v2 p {color: #f8f9fa; font-size: 0.8rem; font-weight: 500;} @media (max-width: 991.98px) {.parts-grid-v2 {grid-template-columns: repeat(4, 1fr);}} @media (max-width: 767.98px) {.parts-grid-v2 {grid-template-columns: repeat(3, 1fr);}} @media (max-width: 575.98px) {.parts-grid-v2 {grid-template-columns: repeat(2, 1fr);gap: 1rem;}} /* ================================================================= NOVÉ STYLY PRO STRÁNKU ZÁRUKY (dle grafického návrhu) ================================================================= */ .warranty-details-v2 {margin-top: 2.5rem;margin-bottom: 2.5rem;padding: 3rem 0; border-radius: 1rem; background-color: #000;color: #f8f9fa;} .section-title-v2 {text-align: center;font-size: 2.2rem;font-weight: 700;margin-bottom: 2rem;color: #fff;} .details-box-v2 {background-color: #343a40;border: 1px solid #495057;border-radius: 1rem;padding: 2rem;height: 100%;} .details-box-v2 .category-title {display: flex;align-items: center;font-size: 1.1rem;font-weight: 600;margin-bottom: 1rem;color: #fff;} .details-box-v2 .category-title i {font-size: 1.2rem;margin-right: 0.75rem;} .details-list-v2 {list-style: none;padding-left: 0;font-size: 0.9rem;color: #adb5bd;} .details-list-v2 li {position: relative;padding-left: 1.2rem;margin-bottom: 0.5rem;} .details-list-v2 li::before {content: '-';position: absolute;left: 0;top: 0;color: #6c757d;} /* Specifické styly pro sekci Výluky */ .details-box-v2.exclusions {background-color: #343a40;} .details-box-v2.exclusions .category-title i {color: #dc3545;} /* ================================================================= STYLY PRO SEKCI PROCESU PROTIÚČTU ================================================================= */ .buyout-process-section {} .buyout-process-section .buyout-process-section .process-flow .process-step { padding-top: 2.5rem; border-top: 2px dashed #dee2e6; } .buyout-process-section .process-flow .row > div:first-child .process-step { border-top: none; } /* Úprava stylu pro "benefit-box" pro tento kontext */ .buyout-process-section .benefits-grid {} .buyout-process-section .benefits-grid .benefit-box { text-align: left; } .buyout-process-section .benefits-grid .benefit-icon { margin-bottom: 1.5rem; } /* Závěrečné CTA */ .buyout-process-section .buyout-cta {margin-top: 4rem;padding: 2.5rem;background-color: #f8f9fa;border-radius: 1rem;text-align: center;border: 1px solid #e9ecef;} .buyout-process-section .buyout-cta p {color: #555;max-width: 500px;margin: 0.5rem auto 1.5rem auto;} @media (min-width: 768px) { .buyout-process-section .process-flow .process-step {position: relative;border-top: none;} .buyout-process-section .process-flow .row > div:not(:last-child) .process-step::after { content: '\F138';font-family: 'bootstrap-icons';position: absolute;top: 40px;right: -25px;font-size: 1.5rem;color: #dee2e6; } } @media (max-width: 767.98px) { .buyout-process-section .process-flow .row > div {width: 100%;} } /* ================================================================= STYLY PRO STRÁNKU KEY PROTECT ================================================================= */ .key-protect-section .lead {color: #6c757d;max-width: 700px;margin-left: auto;margin-right: auto;font-weight: 500;} .key-protect-section h3 { margin-bottom: 1rem; font-weight: 600; font-size: 1.8rem; } .key-protect-section p { line-height: 1.7; } /* Sekce Klíčové informace */ .key-info-section .info-box { padding: 2rem; border-radius: 1rem; height: 100%; text-align: center; background-color: #F5F5F5; border: 1px solid #e9ecef; } .key-info-section .info-box .bi { margin-bottom: 1rem; display: block; font-size: 2.5rem; color: #363D44; } .key-info-section .info-box span { font-size: 1.1rem; font-weight: 500; } /* Sekce Pojistná nebezpečí (tabulka) */ .risks-section .risks-table-wrapper {max-width: 900px;margin-left: auto;margin-right: auto;} .risks-section .risk-item {display: grid;grid-template-columns: 1fr 2fr 1fr;gap: 1.5rem;align-items: center;padding: 1.5rem 0;border-bottom: 1px solid #e9ecef;} .risks-section .risk-item:last-child { border-bottom: none; } .risks-section .risk-title { font-size: 1.2rem; font-weight: 700; } .risks-section .risk-description {} .risks-section .risk-limit { font-size: 1.5rem; font-weight: 700; color: #D03C3B; text-align: right; } .risks-section .risk-limit small { font-size: 0.8rem; font-weight: 400; color: #6c757d; } /* Závěrečný disclaimer */ .key-protect-footer { margin-top: 2rem; padding-top: 2rem; font-size: 0.8rem; border-top: 1px solid #e9ecef; text-align: center; color: #888; } /* Responzivita pro tabulku */ @media (max-width: 767.98px) { .risks-section .risk-item { grid-template-columns: 1fr; text-align: center; } .risks-section .risk-limit { margin-top: 0.5rem; text-align: center; } } /* ================================================================= STYLY PRO partners ================================================================= */ .partners-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; } .partner-item { display: flex; align-items: center; justify-content: center; padding: 0.1rem; min-height: 100px; transition: box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out; background-color: #fff; border: 1px solid #e9ecef; border-radius: 0.75rem; } .partner-item:hover { transform: translateY(-3px); box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.1);} .partner-item img { max-height: 100px; max-width: 200px; width: auto; filter: grayscale(0%); transition: filter 0.3s, opacity 0.3s; opacity: 1; } .partner-item:hover img { filter: grayscale(100%); opacity: 0.7; } /* ================================================================= STYLY PRO SEKCI "CO BUDETE POTŘEBOVAT" ================================================================= */ .needed-documents-section .documents-box { padding: 2.5rem; border-radius: 1rem; height: 100%; background-color: #F5F5F5; border: 1px solid #e9ecef; } .needed-documents-section .documents-box h4 {font-weight: 600;margin-bottom: 2rem;} .needed-documents-section .documents-list {list-style: none;padding: 0;margin: 0;display: flex;flex-direction: column;gap: 1.5rem;} .needed-documents-section .documents-list li {display: flex;align-items: center;font-size: 1.1rem;} .needed-documents-section .documents-list .icon-wrapper {flex-shrink: 0;width: 48px;height: 48px;background-color: #fff;border-radius: 50%;display: flex;align-items: center;justify-content: center;margin-right: 1rem;color: #363D44;font-size: 1.5rem;border: 1px solid #363D44;} .needed-documents-section .documents-list small {display: block;font-size: 0.85rem;color: #6c757d;} .needed-documents-section .documents-image img {width: 100%;height: auto;border-radius: 1rem;} @media (max-width: 991.98px) { .needed-documents-section .documents-image {margin-top: 2rem;} } /* ================================================================= STYLY PRO FAQ AKORDEON ================================================================= */ .faq-section .accordion-wrapper {} .faq-section .accordion-item { margin-bottom: 0.5rem; background-color: #F5F5F5; border: 1px solid #e9ecef; border-radius: 0.5rem !important; overflow: hidden; } .faq-section .accordion-item:first-of-type, .accordion-item:last-of-type { border-radius: 0.5rem !important; } .faq-section .accordion-header { margin: 0; } .faq-section .accordion-button { padding: 1.5rem; font-size: 1.2rem; font-weight: 600; color: #212529; background-color: #F5F5F5; border: none; box-shadow: none !important; } .faq-section .accordion-button:not(.collapsed) { color: #D03C3B; background-color: #F5F5F5; } .faq-section .accordion-button::after { --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16zM8.5 4.5a.5.5 0 0 0-1 0v3h-3a.5.5 0 0 0 0 1h3v3a.5.5 0 0 0 1 0v-3h3a.5.5 0 0 0 0-1h-3v-3z'/%3e%3c/svg%3e"); --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23dc3545'%3e%3cpath fill-rule='evenodd' d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16zM4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8z'/%3e%3c/svg%3e"); transition: transform 0.2s ease-in-out; } .faq-section .accordion-body { padding: 0 1.5rem 1.5rem 1.5rem; color: #555; line-height: 1.7; } /* ================================================================= STYLY PRO SEKCI RECENZÍ ================================================================= */ .reviews-section { position: relative; } .review-card { padding: 2rem; height: 100%; display: flex; flex-direction: column; background-color: #F5F5F5; border-radius: 1rem; } .review-card-header { position: relative; margin-bottom: 1rem; padding-bottom: 0.5rem; text-align: center; border-bottom: 1px solid #FFFFFF; } .review-car-photo { margin-bottom: 1rem; width: 100px; height: 100px; border-radius: 50%; object-fit: cover; border: 4px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.1); } .review-brand-logo { position: absolute; top: -5px; left: 112px; width: 40px; height: 40px; padding: 5px; border-radius: 50%; } .review-car-name { margin-top: 0.5rem; font-weight: 600; font-size: 1.1rem; } .review-card-body { flex-grow: 1; font-style: italic; color: #555; } .review-card-footer { margin-top: 1.5rem; text-align: right; } .review-author {font-weight: 700; text-transform: uppercase; font-size: 0.9rem; } .review-date { font-size: 0.8rem; color: #888; } a.review-card-link, a.review-card-link:hover { display: block; height: 100%; color: inherit; text-decoration: none; } /* Styly pro Swiper navigaci */ .reviews-section .swiper-button-next::after, .reviews-section .swiper-button-prev::after { content: ''; } .reviews-slider-prev, .reviews-slider-next {position: absolute;top: 50%;transform: translateY(-50%);z-index: 10;width: 44px;height: 44px;background-color: #363D44; color: #fff;border-radius: 50%;display: flex;align-items: center;justify-content: center;font-size: 2rem;cursor: pointer;transition: background-color 0.2s, color 0.2s;} .reviews-slider-prev:hover, .reviews-slider-next:hover { background-color: rgba(54, 61, 68, 0.7); color: #fff; } .reviews-slider-prev { left: -22px; } .reviews-slider-next { right: -22px; } .reviews-slider-pagination .swiper-pagination-bullet { background-color: #FFFFFF; border: 1px solid #363D44; opacity: 1; } .reviews-slider-pagination .swiper-pagination-bullet-active { background-color: #363D44; border: 1px solid #363D44; opacity: 1; } /* ================================================================= STYLY PRO DETAIL RECENZE (MODÁLNÍ OKNO) ================================================================= */ .review-detail-modal {max-width: 1300px;margin: 0 auto;background-color: #fff;} /* --- Levý sloupec s fotkou --- */ .review-detail-photo-wrapper {display: flex;align-items: center;justify-content: center;background-color: #F5F5F5;} .review-detail-photo-wrapper img {width: 100%;height: 100%;object-fit: cover;} .review-detail-photo-wrapper .photo-placeholder {display: flex;flex-direction: column;align-items: center;justify-content: center;color: #ccc;width: 100%;height: 100%;min-height: 400px;} .review-detail-photo-wrapper .photo-placeholder .bi {font-size: 4rem;} /* --- Pravý sloupec s obsahem --- */ .review-detail-content-wrapper {display: flex;flex-direction: column;} .review-detail-header h1 {font-weight: 700;font-size: 1.8rem;margin-bottom: 0.25rem;} .review-detail-header p {font-size: 1rem;color: #6c757d;} .review-detail-car {margin: 1.5rem 0;} .review-detail-car h3 {font-weight: 600;font-size: 1.2rem;text-transform: uppercase;} .review-detail-text {color: #555;line-height: 1.5;flex-grow: 1;} .review-detail-author {margin-top: 2rem;padding-top: 1.5rem;border-top: 1px solid #eee;} .review-detail-author h4 {font-weight: 700;font-size: 1.1rem;margin-bottom: 0.1rem;} .review-detail-author p {color: #888;font-size: 0.9rem;margin: 0;} /* Responzivita pro mobilní zařízení */ @media (max-width: 767.98px) { .review-detail-photo-wrapper {min-height: 250px;} .review-detail-content-wrapper {padding: 1.5rem;} .review-detail-header h2 {font-size: 1.5rem;} } /* ================================================================= STYLY PRO KARTY PRACOVNÍCH POZIC ================================================================= */ .job-card {background-color: #F5F5F5;border-color: #F5F5F5;border-radius: 1rem;display: flex;flex-direction: column;} .job-card .card-body { padding: 2rem; } .job-title {margin-bottom: 1rem;font-size: 1.5rem;font-weight: 600;} .job-description {color: #555;line-height: 1.6;} .job-card-footer {border-top: 1px solid #e0e0e0;padding-top: 1rem;} .job-meta p {display: flex;align-items: center;margin-bottom: 0.5rem;font-size: 0.9rem;} .job-meta .bi {margin-right: 0.75rem;font-size: 1.1rem;} /* Detail pozice */ .job-detail-content .section-title { display: inline-block; margin-bottom: 1.5rem; padding-bottom: 0.5rem; font-weight: 700;border-bottom: 1px solid #e0e0e0;} .hover-scale { transition: transform 0.2s; } .hover-scale:hover { transform: scale(1.05); } /* ================================================================= STYLY PRO SEKCI "AUTOSERVIS" ================================================================= */ .autoservice-section {padding: 4rem 0;background-color: #fff;} .autoservice-section .section-title {font-size: 2.8rem;font-weight: 800;} .autoservice-section .lead {color: #6c757d;} .service-card {background-color: #F5F5F5;border-radius: 1rem;overflow: hidden;display: flex;flex-direction: column;width: 100%;border: 1px solid #e9ecef;} .service-card.with-image .card-content {min-height: 250px;} .service-card .card-content {padding: 2rem;flex-grow: 1;} .service-card h3 {font-size: 1.8rem;font-weight: 600;margin-bottom: 1.5rem;} .service-card h5 {font-size: 1rem;font-weight: 700;text-transform: uppercase;letter-spacing: 0.5px;color: #888;} .contact-list {list-style: none;padding: 0;margin: 0 0 1rem 0;} .contact-list li {display: flex;align-items: center;margin-bottom: 0.5rem;font-weight: 500;} .contact-list a {color: #212529;text-decoration: none;} .contact-list a:hover {color: var(--bs-danger);} .contact-list .bi {margin-right: 0.75rem;font-size: 1.2rem;color: #888;} .service-card .card-image {width: 100%;height: 220px;object-fit: cover;} /* ================================================================= STYLY PRO STRÁNKU GDPR ================================================================= */ .gdpr-section { padding: 2.5rem; background-color: #F5F5F5; border-radius: 1rem; height: 100%; } .gdpr-section2 { padding: 2.5rem; border-radius: 1rem; height: 100%; } .gdpr-title { font-weight: 700; } .gdpr-subtitle { margin-bottom: 1rem; padding-bottom: 0.5rem; font-size: 1.5rem; } .gdpr-section p { margin-bottom: 0; line-height: 1.8;} .gdpr-section2 p { line-height: 1.8;} .gdpr-list {list-style: none;padding-left: 0;} .gdpr-list li {position: relative;padding-left: 25px;margin-bottom: 0.75rem; line-height: 1.8;} .gdpr-list li::before {content: '\F28A';font-family: 'bootstrap-icons';position: absolute;left: 0;top: 0px;color: #363D44;font-weight: bold;} .gdpr-partners {list-style-type: none;padding-left: 0;columns: 2;-webkit-columns: 2;-moz-columns: 2;} @media (max-width: 767.98px) { .gdpr-partners {columns: 1;-webkit-columns: 1;-moz-columns: 1;} } /* Swiper úpravy */ .myArticleSwiper {width: 100%;max-height: 500px;} .myArticleSwiper .swiper-button-next, .myArticleSwiper .swiper-button-prev {color: #fff;text-shadow: 0 0 3px rgba(0,0,0,0.5);} .myArticleSwiper .swiper-pagination-bullet-active {background: #D03C3B;} .bg-gradient-dark {background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);} /* Grid Hover Efekt */ .hover-zoom {transition: transform 0.3s ease;} .hover-overlay {position: absolute;top: 0; left: 0; width: 100%; height: 100%;background: rgba(0,0,0,0.3);opacity: 0;transition: opacity 0.3s ease;} a:hover .hover-zoom {transform: scale(1.05);} a:hover .hover-overlay {opacity: 1;} .banner-section .banner-bg {position: relative;color: #fff;padding: 4rem 2.5rem;border-radius: 1rem;background-size: cover;background-position: center;min-height: 200px;display: flex;flex-direction: column;justify-content: flex-end;} /* PŘIDAT TOTO: Styl pro plovoucí tlačítko */ .ai-assistant-trigger { position: fixed; bottom: 140px; right: 20px; width: 60px; height: 60px; border-radius: 50%; background-color: #0d6efd; /* Bootstrap primary */ color: white; border: none; box-shadow: 0 4px 10px rgba(0,0,0,0.3); z-index: 9999; /* Aby bylo vždy nahoře */ display: flex; align-items: center; justify-content: center; font-size: 24px; cursor: pointer; transition: transform 0.3s ease; } .ai-assistant-trigger:hover { transform: scale(1.1); background-color: #0b5ed7; } .chat-bubble { max-width: 80%; padding: 12px 18px; border-radius: 1rem; margin-bottom: 1rem; position: relative; font-size: 0.95rem; line-height: 1.5; } .chat-bubble-user { background-color: #0d6efd; color: white; margin-left: auto; border-bottom-right-radius: 0.25rem; } .chat-bubble-assistant { background-color: #ffffff; color: #212529; margin-right: auto; border-bottom-left-radius: 0.25rem; box-shadow: 0 2px 5px rgba(0,0,0,0.05); } .chat-bubble-system { background-color: #fff3cd; color: #856404; text-align: center; margin: 0 auto; max-width: 90%; font-size: 0.85rem; } /* NOVÉ STYLY PRO KOMPAKTNÍ KARTY */ .ai-car-card { background: white; border-radius: 12px; /* Větší zaoblení */ overflow: hidden; border: 1px solid #eee; box-shadow: 0 4px 6px rgba(0,0,0,0.05); transition: transform 0.2s, box-shadow 0.2s; /* Důležité pro vertikální vzhled v mřížce */ display: flex; flex-direction: column; } .ai-car-card:hover { transform: translateY(-3px); box-shadow: 0 8px 15px rgba(0,0,0,0.1); cursor: pointer; } .ai-car-img-container { position: relative; width: 100%; height: 180px; /* ZDE SE NASTAVUJE VÝŠKA FOTKY - ZMENŠENO */ } .ai-car-img { width: 100%; height: 100%; background-size: cover; background-position: center; } /* Styl pro odznak s evidenčním číslem */ .ai-stock-badge { position: absolute; top: 10px; left: 10px; background-color: rgba(0, 0, 0, 0.7); /* Poloprůhledná černá */ color: white; padding: 4px 8px; border-radius: 6px; font-size: 0.8rem; font-weight: 600; backdrop-filter: blur(2px); } .ai-car-info { padding: 12px; flex-grow: 1; display: flex; flex-direction: column; justify-content: space-between; } .ai-car-title { font-weight: 700; color: #333; font-size: 1rem; margin-bottom: 5px; line-height: 1.2; } .ai-car-meta { font-size: 0.85rem; color: #6c757d; } .ai-car-price { color: #dc3545; font-weight: 800; font-size: 1.1rem; margin-top: 8px; text-align: right; } .mic-active { animation: pulse-red 1.5s infinite; background-color: #dc3545 !important; color: white !important; } @keyframes pulse-red { 0% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(220, 53, 69, 0); } 100% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0); } } /* ================================================================= STYLY PRO PATIČKU ================================================================= */ .footer-extended { padding: 2rem 0; } .service-banner {position: relative;color: #fff;padding: 4rem 2.5rem;border-radius: 1rem;background-size: cover;background-position: center;min-height: 200px;display: flex;flex-direction: column;justify-content: flex-end;} .service-banner::after {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);border-radius: 1rem;} .service-banner h4, .service-banner p { position: relative; z-index: 2; } .service-banner h4 { font-weight: 500; font-size: 2rem; } /* ================================================================= STYLY PRO SEKCI POBOČEK (PATIČKA) ================================================================= */ .branches-section-wrapper {background-color: #000;border-radius: 1rem;overflow: hidden;margin-top: 2rem;} .branches-map {position: relative;height: 100%;} .branches-map img {width: 100%;height: 100%;object-fit: cover;} .branches-info {position: relative;background-color: #fff;padding: 3rem;height: 100%;} .branches-info h2 { margin-bottom: 2rem; font-weight: 700; } .branch-item { margin-bottom: 2rem; } .branch-item h4 { font-size: 1.5rem; font-weight: 600; margin-bottom: 1rem; } .branch-item .branches-cb, .branch-item .branches-ta { font-size: 1.5rem; font-weight: 600; margin-bottom: 1rem; } .branch-item .branch-label {font-weight: 600;color: #212529;margin-bottom: 0.25rem;} .branch-item p {margin-bottom: 0;line-height: 1.6;} .branch-item .branch-links a { color: #363D44; text-decoration: none; transition: color 0.2s; } .branch-item .branch-links a:hover { color: #99A3AD; } .branch-item .poukaz {border:1px solid #363D44; border-radius: 15px;} .branch-car-image {position: absolute;bottom: 0;right: 0;max-width: 60%;z-index: 999;} .branch-car-image img {max-width: 100%;height: auto;} /* Responzivita */ @media (max-width: 991.98px) { .branches-info { padding: 2rem; } .branch-car-image { display: none; } } .banner-section .banner-image {width: 100%; height: auto; display: block; border-radius: 15px;} .footer-main { font-size: 0.9rem !important; background-color: #000; color: #adb5bd; padding: 4rem 0 1rem 0; } .footer-logo { max-width: 150px; } .footer-main h5 { color: #fff; font-weight: 600; margin-bottom: 1rem; } .footer-links { list-style: none; padding: 0; } .footer-links li { margin-bottom: 0.2rem; } .footer-links a { color: #adb5bd; text-decoration: none; transition: color 0.2s; } .footer-links a:hover { color: #fff; } .company-info {} .footer-bottom { border-top: 1px solid #343a40; text-align: center; padding-top: 1rem; margin-top: 2rem; font-size: 0.8rem; } @media (max-width: 991.98px) { .branches-info { padding-left: 0; margin-top: 2rem; } } .social-links {display: flex;gap: 1rem;} .social-icon {font-size: 1.5rem;color: #adb5bd;transition: color 0.2s, transform 0.2s;} .social-icon:hover {color: #fff;transform: translateY(-2px);} /* SEO Footer Links */ .footer-seo-links a { transition: color 0.2s ease; } .footer-seo-links a:hover { color: #dc3545 !important; }