.recommended-vehicles-page{background:#f8fafc;min-height:100vh;padding-top:80px}.page-header{text-align:center;background:#fff;border-bottom:1px solid #e2e8f0;padding:2rem}.page-title{color:#1e293b;margin-bottom:.5rem;font-size:2.5rem;font-weight:700}.page-subtitle{color:#64748b;font-size:1.125rem;font-weight:400}.mobile-sort-wrapper{justify-content:center;max-width:1400px;margin:0 auto;padding:0 1rem;display:flex}.sort-select-dropdown{color:#fff;cursor:pointer;appearance:none;background:#475569 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='white' d='M6 9L1 4h10z'/%3E%3C/svg%3E") right 1rem center/12px no-repeat;border:none;border-radius:12px;outline:none;width:100%;padding:1rem;font-size:1rem;font-weight:600;transition:all .3s;box-shadow:0 4px 12px #4755694d}.sort-select-dropdown:active{transform:scale(.98)}.desktop-sort-wrapper{display:none}.desktop-sort-select{color:#1e293b;cursor:pointer;appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M6 9L1 4h10z'/%3E%3C/svg%3E") right 1rem center/12px no-repeat;border:2px solid #e2e8f0;border-radius:8px;outline:none;min-width:200px;padding:.75rem 2.5rem .75rem 1rem;font-size:.95rem;font-weight:500;transition:all .3s}.desktop-sort-select:hover{border-color:#1e293b}.desktop-sort-select:focus{border-color:#1e293b;box-shadow:0 0 0 3px #1e293b1a}@media (min-width:769px){.mobile-sort-wrapper{display:none}.desktop-sort-wrapper{justify-content:flex-end;margin-bottom:2rem;display:flex}.vehicles-container{position:relative}}.vehicles-container{max-width:1400px;margin:0 auto;padding:3rem 2rem}.sort-section-vehicles{justify-content:flex-end;margin-bottom:2rem;display:flex}.sort-wrapper-vehicles{align-items:center;gap:.5rem;display:flex;position:relative}.sort-icon-vehicles{color:#64748b;font-size:1rem}.sort-select-vehicles{color:#1e293b;cursor:pointer;appearance:none;background:#fff;border:2px solid #e2e8f0;border-radius:8px;outline:none;min-width:180px;padding:.5rem 2.5rem .5rem 1rem;font-size:.9rem;font-weight:500;transition:all .3s}.sort-select-vehicles:hover{border-color:#1e293b}.sort-select-vehicles:focus{border-color:#1e293b;box-shadow:0 0 0 3px #1e293b1a}.sort-select-icon-vehicles{color:#64748b;pointer-events:none;font-size:.75rem;position:absolute;top:50%;right:1rem;transform:translateY(-50%)}.vehicles-grid-4col{grid-template-columns:repeat(4,1fr);gap:2rem;margin-bottom:3rem;display:grid}.vehicle-card{cursor:pointer;background:#fff;border-radius:12px;flex-direction:column;height:100%;transition:all .3s;display:flex;overflow:hidden;box-shadow:0 4px 12px #00000014}.vehicle-card:hover{transform:translateY(-8px);box-shadow:0 8px 24px #00000026}.vehicle-image-wrapper{width:100%;height:200px;position:relative;overflow:hidden}.vehicle-image{object-fit:cover;width:100%;height:100%}.vehicle-card:hover .vehicle-image{transition:transform .3s;transform:scale(1.1)}.image-nav-button{cursor:pointer;color:#1e293b;opacity:0;z-index:2;background:#ffffffe6;border:none;border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;font-size:1rem;transition:all .3s;display:flex;position:absolute;top:50%;transform:translateY(-50%);box-shadow:0 2px 8px #0003}.vehicle-image-wrapper:hover .image-nav-button{opacity:1}.image-nav-button:hover{background:#fff;transform:translateY(-50%)scale(1.1)}.image-nav-button.prev{left:.75rem}.image-nav-button.next{right:.75rem}.image-indicators{z-index:2;gap:.375rem;display:flex;position:absolute;bottom:.75rem;left:50%;transform:translate(-50%)}.indicator{cursor:pointer;background:#ffffff80;border-radius:50%;width:8px;height:8px;transition:all 50ms}.indicator.active{background:#fff;border-radius:4px;width:24px}.vehicle-info{flex-direction:column;flex:1;padding:1.5rem;display:flex}.vehicle-name{color:#1e293b;margin-bottom:.5rem;font-size:1.25rem;font-weight:600}.vehicle-details{color:#64748b;align-items:center;gap:.5rem;margin-bottom:.75rem;font-size:.9rem;display:flex}.vehicle-details .separator{color:#cbd5e1}.vehicle-accident{color:#10b981;margin:.25rem 0;font-size:.8rem;font-weight:600}.vehicle-accident.accident{color:#ef4444}.vehicle-price{color:#1e293b;margin-bottom:.75rem;font-size:1.125rem;font-weight:700}.vehicle-button{color:#fff;cursor:pointer;background:#1e293b;border:none;border-radius:8px;width:100%;margin-top:auto;padding:.75rem;font-weight:600;transition:all .3s}.vehicle-button:hover{background:#0f172a}.no-results{text-align:center;color:#64748b;padding:4rem 2rem;font-size:1.125rem}.pagination{justify-content:center;align-items:center;gap:.5rem;margin-top:3rem;display:flex}.pagination-button{color:#1e293b;cursor:pointer;background:#fff;border:1px solid #e2e8f0;border-radius:8px;justify-content:center;align-items:center;width:40px;height:40px;transition:all .3s;display:flex}.pagination-button:hover:not(:disabled){color:#fff;background:#1e293b;border-color:#1e293b}.pagination-button:disabled{opacity:.3;cursor:not-allowed}.pagination-number{color:#1e293b;cursor:pointer;background:#fff;border:1px solid #e2e8f0;border-radius:8px;min-width:40px;height:40px;padding:0 .75rem;font-weight:600;transition:all .3s}.pagination-number:hover{background:#f8fafc;border-color:#1e293b}.pagination-number.active{color:#fff;background:#1e293b;border-color:#1e293b}@media (max-width:1400px){.vehicles-grid-4col{grid-template-columns:repeat(3,1fr)}}@media (max-width:1024px){.vehicles-grid-4col{grid-template-columns:repeat(2,1fr)}.page-title{font-size:2rem}}@media (max-width:768px){.recommended-vehicles-page{padding-top:60px}.vehicles-grid-4col{grid-template-columns:1fr;gap:1.5rem}.page-header{padding:1.5rem 1rem}.page-title{font-size:1.75rem}.page-subtitle{font-size:1rem}.vehicles-container{padding:2rem 1rem}.sort-section-vehicles{justify-content:flex-start;margin-bottom:1.5rem}.sort-wrapper-vehicles{width:100%}.sort-select-vehicles{width:100%;min-width:auto}.vehicle-card{height:auto;min-height:420px}.vehicle-info{min-height:180px;padding:1.25rem}.vehicle-name{-webkit-line-clamp:2;-webkit-box-orient:vertical;min-height:2.8rem;margin-bottom:.5rem;font-size:1.125rem;line-height:1.4;display:-webkit-box;overflow:hidden}.vehicle-details{flex-wrap:wrap;gap:.25rem;margin-bottom:0;font-size:.8rem}.vehicle-details .separator{margin:0 .125rem}.vehicle-price{margin-top:.5rem;margin-bottom:.75rem;font-size:1rem}.service-badges-container{gap:3px;top:6px;right:6px}.service-badge{border-radius:10px;padding:3px 8px;font-size:.6rem}.safe6-image-badge{filter:drop-shadow(0 2px 4px #00000026);width:55px;height:auto;bottom:6px;right:3px}}.service-badges-container{z-index:10;flex-direction:column;gap:4px;display:flex;position:absolute;top:10px;right:10px}.service-badge{color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);letter-spacing:-.2px;white-space:nowrap;border-radius:20px;padding:5px 12px;font-size:.75rem;font-weight:700}.service-badge-engine{background:linear-gradient(135deg,#22c55e 0%,#16a34a 100%);box-shadow:0 4px 12px #22c55e66}.service-badge-mission{background:linear-gradient(135deg,#3b82f6 0%,#2563eb 100%);box-shadow:0 4px 12px #3b82f666}.service-badge-repair{background:linear-gradient(135deg,#f97316 0%,#ea580c 100%);box-shadow:0 4px 12px #f9731666}.safe6-image-badge{z-index:10;object-fit:contain;filter:drop-shadow(0 4px 8px #0003);width:75px;height:auto;transition:all .3s;position:absolute;bottom:10px;right:5px}