.hero-section-optimized {
 background: linear-gradient(135deg, #205844 0%, #2d3748 100%);
 color: white;
 padding: 60px 0;
 position: relative;
 overflow: hidden;
 min-height: 500px;
}

.hero-breadcrumb {
 background: rgba(255, 255, 255, 0.1);
 backdrop-filter: blur(10px);
 border-radius: 25px;
 padding: 0.5rem 1rem;
 margin-bottom: 1.5rem;
 font-size: 0.9rem;
 border: 1px solid rgba(255, 255, 255, 0.2);
}

.hero-breadcrumb a {
 color: rgba(255, 255, 255, 0.9);
 text-decoration: none;
 transition: color 0.3s ease;
}

.hero-breadcrumb a:hover {
 color: white;
}

.hero-breadcrumb .active {
 color: white;
 font-weight: 600;
}

.hero-title {
 font-size: 2.5rem;
 font-weight: 800;
 line-height: 1.2;
 margin-bottom: 1.5rem;
 color: white;
 text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.hero-specs-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
 gap: 1.5rem;
 margin-bottom: 2rem;
}

.spec-item {
 background: rgba(255, 255, 255, 0.1);
 backdrop-filter: blur(10px);
 border-radius: 12px;
 padding: 1.25rem;
 border: 1px solid rgba(255, 255, 255, 0.2);
 display: flex;
 align-items: center;
 transition: all 0.3s ease;
}

.spec-item:hover {
 background: rgba(255, 255, 255, 0.15);
 transform: translateY(-2px);
}

.spec-icon {
 width: 50px;
 height: 50px;
 background: rgba(255, 255, 255, 0.2);
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 margin-right: 1rem;
 flex-shrink: 0;
}

.spec-icon i {
 font-size: 1.2rem;
 color: white;
}

.spec-content {
 flex: 1;
}

.spec-value {
 font-size: 1.4rem;
 font-weight: 700;
 color: white;
 margin-bottom: 0.25rem;
 line-height: 1.1;
}

.spec-label {
 font-size: 0.85rem;
 color: rgba(255, 255, 255, 0.9);
 opacity: 0.9;
}

.hero-actions {
 display: flex;
 gap: 1rem;
 margin-top: 2rem;
 flex-wrap: wrap;
}

.btn-compare, .btn-dealers {
 padding: 1rem 2rem;
 border-radius: 12px;
 border: none;
 font-weight: 600;
 text-decoration: none;
 display: inline-flex;
 align-items: center;
 gap: 0.5rem;
 transition: all 0.3s ease;
 font-size: 0.95rem;
}

.btn-compare {
 background: rgba(255, 255, 255, 0.2);
 color: white;
 border: 1px solid rgba(255, 255, 255, 0.3);
}

.btn-compare:hover {
 background: white;
 color: #667eea;
 text-decoration: none;
 transform: translateY(-2px);
}

.btn-dealers {
 background: white;
 color: #667eea;
}

.btn-dealers:hover {
 background: rgba(255, 255, 255, 0.9);
 text-decoration: none;
 transform: translateY(-2px);
}

.hero-image-container-legacy {
 text-align: center;
 position: relative;
 padding: 1rem;
}

.hero-image-legacy {
 max-width: 100%;
 width: 100%;
 height: auto;
 max-height: 400px;
 object-fit: contain;
 border-radius: 12px;
 box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
 transition: transform 0.3s ease;
}

.hero-image-legacy:hover {
 transform: scale(1.02);
}

.brand-thumbnail {
 position: absolute;
 top: 1.5rem;
 right: 1.5rem;
 width: 60px;
 height: 60px;
 background: white;
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
 z-index: 10;
}

.brand-logo {
 width: 35px;
 height: 35px;
 object-fit: contain;
}


@media (max-width: 768px) {
 .hero-section-optimized {
 padding: 30px 0;
 min-height: auto;
}
 
 .hero-title {
 font-size: 1.9rem;
 text-align: center;
 margin-bottom: 1rem;
}
}
 
 .hero-specs-grid {
 grid-template-columns: 1fr;
 gap: 1rem;
 margin-bottom: 1.5rem;
}
 
 .hero-actions {
 flex-direction: column;
 align-items: center;
 margin-top: 1.5rem;
}
 
 .btn-compare, .btn-dealers {
 width: 100%;
 justify-content: center;
 max-width: 300px;
}
 
 .hero-image-legacy {
 max-height: 300px;
}
 
 .brand-thumbnail {
 top: 1rem;
 right: 1rem;
 width: 50px;
 height: 50px;
}
 
 .brand-logo {
 width: 30px;
 height: 30px;
}


@media (max-width: 576px) {
 .hero-section-optimized {
 padding: 20px 0;
}
 
 .hero-title {
 font-size: 1.6rem;
}
 
 .spec-item {
 padding: 1rem;
}
 
 .spec-icon {
 width: 40px;
 height: 40px;
 margin-right: 0.75rem;
}
 
 .spec-value {
 font-size: 1.2rem;
}
 
 .spec-label {
 font-size: 0.8rem;
}
 
 .btn-compare, .btn-dealers {
 padding: 0.875rem 1.5rem;
 font-size: 0.9rem;
}
}


@media (max-width: 767px) {
 .mobile-specs-actions {
 display: none !important;
}
}

.nav-pills .nav-link:hover:not(.active) {
 background: #f8f9fa;
 color: #205844;
}


.service-type-sales {
 background-color: #e3f2fd;
 color: #1976d2;
}

.service-type-service {
 background-color: #f3e5f5;
 color: #7b1fa2;
}

.service-type-both {
 background-color: #e8f5e8;
 color: #388e3c;
}

.service-type-showroom {
 background-color: #e3f2fd;
 color: #1976d2;
}

/* Fixed Motorcycle Comparison Section Styles */
.motorcycle-comparisons-horizontal-grid {
 display: flex;
 overflow-x: auto;
 scroll-snap-type: x mandatory;
 gap: 24px;
 padding: 20px 24px 20px 0;
 scrollbar-width: none;
 -ms-overflow-style: none;
}

/* Hide scrollbars on mobile, show on desktop */
@media (max-width: 768px) {
 .motorcycle-comparisons-horizontal-grid {
  scrollbar-width: none;
  -ms-overflow-style: none;
 }
 
 .motorcycle-comparisons-horizontal-grid::-webkit-scrollbar {
  display: none;
 }
}

/* Show styled scrollbars on desktop */
@media (min-width: 769px) {
 .motorcycle-comparisons-horizontal-grid {
  scrollbar-width: thin;
  scrollbar-color: #205844 #f1f1f1;
 }
 
 .motorcycle-comparisons-horizontal-grid::-webkit-scrollbar {
  height: 8px;
 }
 
 .motorcycle-comparisons-horizontal-grid::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
 }
 
 .motorcycle-comparisons-horizontal-grid::-webkit-scrollbar-thumb {
  background: #205844;
  border-radius: 4px;
 }
 
 .motorcycle-comparisons-horizontal-grid::-webkit-scrollbar-thumb:hover {
  background: #1a4a3a;
 }
}

.motorcycle-comparison-card {
 flex: 0 0 400px;
 scroll-snap-align: start;
 background: white;
 border-radius: 20px;
 overflow: visible;
 box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
 transition: all 0.3s ease;
 border: 2px solid #f0f0f0;
 position: relative;
}

.motorcycle-comparison-card:hover {
 transform: translateY(-5px);
 box-shadow: 0 15px 40px rgba(32, 88, 68, 0.2);
 border-color: #205844;
}

/* Hide any header elements */
.motorcycle-comparison-header {
 display: none !important;
}

/* Main bikes container with perfect centering */
.motorcycle-bikes-container {
 display: grid;
 grid-template-columns: 1fr auto 1fr;
 align-items: flex-start;
 padding: 30px 20px;
 background: linear-gradient(135deg, #fafbfc 0%, #f8f9fa 100%);
 min-height: 220px;
 gap: 15px;
}

/* Individual bike sections */
.motorcycle-bike-section {
 display: flex;
 flex-direction: column;
 align-items: center;
 text-align: center;
 padding: 0 5px;
 width: 100%;
}

/* Bike image containers */
.motorcycle-bike-image {
 width: 150px;
 height: 120px;
 margin: 0 auto 15px;
 background: white;
 border-radius: 16px;
 display: flex;
 align-items: center;
 justify-content: center;
 overflow: hidden;
 padding: 12px;
 box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
 border: 2px solid #f1f5f9;
 transition: all 0.3s ease;
}

.motorcycle-bike-image img {
 width: 100%;
 height: 100%;
 object-fit: contain;
 transition: transform 0.3s ease;
}

.motorcycle-comparison-card:hover .motorcycle-bike-image {
 box-shadow: 0 8px 20px rgba(32, 88, 68, 0.15);
 border-color: #205844;
}

.motorcycle-comparison-card:hover .motorcycle-bike-image img {
 transform: scale(1.05);
}

/* Bike information styling */
.motorcycle-bike-info {
 text-align: center;
 width: 100%;
}

.motorcycle-brand-name {
 color: #205844;
 font-size: 0.8rem;
 font-weight: 700;
 text-transform: uppercase;
 letter-spacing: 1px;
 margin-bottom: 8px;
}

.motorcycle-bike-name {
 color: #2c3e50;
 font-size: 1rem;
 font-weight: 800;
 margin-bottom: 10px;
 line-height: 1.3;
 word-wrap: break-word;
 text-align: center;
 min-height: auto;
}

.motorcycle-bike-price {
 color: #205844;
 font-size: 1.2rem;
 font-weight: 800;
}

/* VS Circle in center */
.motorcycle-vs-divider {
 display: flex;
 align-items: center;
 justify-content: center;
 align-self: center;
 padding: 0 10px;
}

.motorcycle-vs-circle {
 width: 50px;
 height: 50px;
 background: linear-gradient(135deg, #205844 0%, #1a4a3a 100%);
 border: 4px solid white;
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 font-weight: 800;
 color: white;
 font-size: 1rem;
 box-shadow: 0 6px 20px rgba(32, 88, 68, 0.3);
 transition: all 0.3s ease;
 z-index: 10;
}

.motorcycle-comparison-card:hover .motorcycle-vs-circle {
 transform: scale(1.1);
 box-shadow: 0 8px 25px rgba(32, 88, 68, 0.4);
}

/* Action button */
.motorcycle-comparison-action {
 padding: 0 20px 25px;
 background: white;
}

.motorcycle-compare-btn {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 10px;
 width: 100%;
 padding: 16px 20px;
 background: linear-gradient(135deg, #205844 0%, #1a4a3a 100%);
 color: white;
 text-decoration: none;
 border-radius: 16px;
 font-weight: 700;
 font-size: 0.9rem;
 transition: all 0.3s ease;
 border: none;
 cursor: pointer;
 white-space: nowrap;
 box-shadow: 0 4px 15px rgba(32, 88, 68, 0.2);
}

.motorcycle-compare-btn:hover {
 background: linear-gradient(135deg, #1a4a3a 0%, #164238 100%);
 color: white;
 transform: translateY(-2px);
 box-shadow: 0 6px 20px rgba(32, 88, 68, 0.3);
 text-decoration: none;
}

/* Mobile Responsive Design - Fixed Layout */
@media (max-width: 768px) {
 .motorcycle-comparison-card {
  flex: 0 0 350px;
 }
 
 .motorcycle-bikes-container {
  padding: 25px 15px;
  min-height: 200px;
  gap: 10px;
 }
 
 .motorcycle-bike-image {
  width: 130px;
  height: 100px;
  margin-bottom: 12px;
  padding: 10px;
 }
 
 .motorcycle-vs-circle {
  width: 45px;
  height: 45px;
  font-size: 0.9rem;
 }
 
 .motorcycle-bike-name {
  font-size: 0.9rem;
  min-height: auto;
  word-wrap: break-word;
 }
 
 .motorcycle-bike-price {
  font-size: 1.1rem;
 }
 
 .motorcycle-compare-btn {
  padding: 14px 16px;
  font-size: 0.85rem;
 }
 
 .motorcycle-section-buttons {
  padding: 25px 0 0 0;
 }
 
 .motorcycle-action-btn {
  padding: 12px 20px;
  font-size: 0.9rem;
  min-width: 180px;
 }
}

@media (max-width: 480px) {
 .motorcycle-comparison-card {
  flex: 0 0 320px;
 }
 
 .motorcycle-bikes-container {
  padding: 20px 12px;
  min-height: 180px;
  gap: 8px;
 }
 
 .motorcycle-bike-image {
  width: 115px;
  height: 90px;
  margin-bottom: 10px;
  padding: 8px;
 }
 
 .motorcycle-vs-circle {
  width: 40px;
  height: 40px;
  font-size: 0.8rem;
  border-width: 3px;
 }
 
 .motorcycle-bike-name {
  font-size: 0.85rem;
  min-height: auto;
  word-wrap: break-word;
  line-height: 1.2;
 }
 
 .motorcycle-bike-price {
  font-size: 1rem;
 }
 
 .motorcycle-compare-btn {
  padding: 12px 14px;
  font-size: 0.8rem;
 }
 
 .motorcycle-section-buttons {
  padding: 20px 0 0 0;
 }
 
 .motorcycle-action-btn {
  padding: 10px 16px;
  font-size: 0.85rem;
  min-width: 160px;
 }
}

/* Section Action Buttons */
.motorcycle-section-buttons {
 padding: 30px 0 0 0;
 text-align: center;
}

.motorcycle-action-btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 padding: 14px 28px;
 border-radius: 25px;
 font-weight: 700;
 font-size: 0.95rem;
 transition: all 0.3s ease;
 text-decoration: none;
 border: 2px solid transparent;
 min-width: 200px;
}

.motorcycle-action-btn-primary {
 background: linear-gradient(135deg, #205844 0%, #1a4a3a 100%);
 color: white;
 box-shadow: 0 4px 15px rgba(32, 88, 68, 0.3);
}

.motorcycle-action-btn-primary:hover {
 background: linear-gradient(135deg, #1a4a3a 0%, #164238 100%);
 color: white;
 transform: translateY(-2px);
 box-shadow: 0 6px 20px rgba(32, 88, 68, 0.4);
 text-decoration: none;
}

.motorcycle-action-btn-outline {
 background: white;
 color: #205844;
 border-color: #205844;
 box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.motorcycle-action-btn-outline:hover {
 background: #205844;
 color: white;
 border-color: #205844;
 transform: translateY(-2px);
 box-shadow: 0 6px 20px rgba(32, 88, 68, 0.3);
 text-decoration: none;
}

/* Empty State */
.motorcycle-empty-state-card {
 background: white;
 border-radius: 16px;
 padding: 40px 20px;
 text-align: center;
 box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
 border: 1px solid #f0f0f0;
 margin: 20px 0;
}

.motorcycle-empty-icon {
 font-size: 3rem;
 margin-bottom: 20px;
 opacity: 0.5;
}

.motorcycle-empty-state-card h4 {
 color: #495057;
 margin-bottom: 10px;
}

.motorcycle-empty-state-card p {
 color: #6c757d;
 margin: 0;
}


.section-header {
 background: linear-gradient(135deg, #205844 0%, #1a4a3a 100%);
 border-radius: 12px 12px 0 0;
 padding: 20px 25px;
 margin-bottom: 0;
 border-bottom: none;
 color: white;
}

.section-title {
 color: white;
 font-weight: 600;
 font-size: 1.8rem;
 margin-bottom: 0;
 display: flex;
 align-items: center;
}

.section-title i {
 color: white;
 margin-right: 12px;
 font-size: 1.6rem;
}


.content-section .card {
 border-radius: 0 0 12px 12px;
 border-top: none;
}

.content-section .card-body {
 padding: 25px;
}


.dealer-search-container {
 background: #E6EFFD;
 border-radius: 10px;
 padding: 20px;
 margin-bottom: 25px;
}

.dealer-card {
 border: 1px solid #e0e6ed;
 border-radius: 10px;
 padding: 20px;
 margin-bottom: 15px;
 transition: all 0.3s ease;
 background: white;
}

.dealer-card:hover {
 box-shadow: 0 5px 15px rgba(0,0,0,0.1);
 transform: translateY(-2px);
}

.dealer-card.featured {
 border-color: #205844;
 box-shadow: 0 3px 10px rgba(32, 88, 68, 0.2);
}

.featured-badge {
 background: linear-gradient(45deg, #205844, #1a4a3a);
 color: white;
 padding: 4px 12px;
 border-radius: 20px;
 font-size: 0.8rem;
 font-weight: 600;
 margin-bottom: 10px;
 display: inline-block;
}

.service-type-badge {
 font-size: 0.75rem;
 padding: 4px 8px;
 border-radius: 12px;
 font-weight: 500;
}


.main-image-container {
 position: relative;
 text-align: center;
}

.main-display-image {
 max-height: 500px;
 object-fit: contain;
 cursor: zoom-in;
 border: 2px solid #e9ecef;
 transition: all 0.3s ease;
}

.main-display-image:hover {
 border-color: #205844;
 box-shadow: 0 4px 15px rgba(32, 88, 68, 0.2);
}

.zoom-indicator {
 position: absolute;
 top: 15px;
 right: 15px;
 background: rgba(0, 0, 0, 0.7);
 color: white;
 padding: 8px 12px;
 border-radius: 20px;
 font-size: 0.9rem;
 opacity: 0;
 transition: opacity 0.3s ease;
 pointer-events: none;
}

.main-image-container:hover .zoom-indicator {
 opacity: 1;
}


.color-variant-card {
 border: 2px solid #e9ecef;
 border-radius: 12px;
 padding: 15px;
 cursor: pointer;
 transition: all 0.3s ease;
 background: white;
 height: 100%;
}

.color-variant-card:hover {
 border-color: #205844;
 box-shadow: 0 5px 15px rgba(32, 88, 68, 0.15);
 transform: translateY(-2px);
}

.color-variant-card.active {
 border-color: #205844;
 background: #f8f9ff;
 box-shadow: 0 5px 15px rgba(32, 88, 68, 0.2);
}

.color-thumbnail {
 width: 100%;
 height: 120px;
 object-fit: contain;
 border-radius: 8px;
 transition: transform 0.3s ease;
 background: white;
}

.color-variant-card:hover .color-thumbnail {
 transform: scale(1.05);
}

.color-name {
 font-size: 0.9rem;
 font-weight: 600;
 color: #333;
 margin-bottom: 4px;
}

.color-variant-card.active .color-name {
 color: #205844;
}


.gallery-grid {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
 gap: 8px;
 max-height: 200px;
 overflow-y: auto;
}

.gallery-item {
 position: relative;
 cursor: pointer;
 border-radius: 8px;
 overflow: hidden;
 transition: transform 0.3s ease;
}

.gallery-item:hover {
 transform: scale(1.05);
}

.gallery-thumb {
 width: 100%;
 height: 70px;
 object-fit: cover;
 transition: opacity 0.3s ease;
}

.gallery-overlay {
 position: absolute;
 inset: 0;
 background: rgba(0, 123, 255, 0.8);
 display: flex;
 align-items: center;
 justify-content: center;
 color: white;
 opacity: 0;
 transition: opacity 0.3s ease;
}

.gallery-item:hover .gallery-overlay {
 opacity: 1;
}


.view360-preview-card {
 cursor: pointer;
 border-radius: 12px;
 overflow: hidden;
 position: relative;
 transition: transform 0.3s ease;
}

.view360-preview-card:hover {
 transform: translateY(-3px);
 box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.view360-thumb {
 width: 100%;
 height: 150px;
 object-fit: cover;
}

.view360-overlay {
 position: absolute;
 inset: 0;
 background: linear-gradient(45deg, rgba(23, 162, 184, 0.9), rgba(0, 123, 255, 0.9));
 display: flex;
 align-items: center;
 justify-content: center;
 opacity: 0;
 transition: all 0.3s ease;
}

.view360-preview-card:hover .view360-overlay {
 opacity: 1;
}


.video-preview-card {
 cursor: pointer;
 border-radius: 12px;
 overflow: hidden;
 position: relative;
 transition: all 0.3s ease;
}

.video-preview-card:hover {
 transform: translateY(-3px);
 box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.video-thumb {
 width: 100%;
 height: 150px;
 object-fit: cover;
}

.video-overlay {
 position: absolute;
 inset: 0;
 background: linear-gradient(45deg, rgba(220, 53, 69, 0.9), rgba(255, 0, 0, 0.8));
 display: flex;
 align-items: center;
 justify-content: center;
 opacity: 0;
 transition: all 0.3s ease;
}

.video-preview-card:hover .video-overlay {
 opacity: 1;
}

.play-button-large {
 width: 60px;
 height: 60px;
 background: rgba(255, 255, 255, 0.9);
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 24px;
 color: #dc3545;
 margin: 0 auto;
 transition: all 0.3s ease;
}

.video-preview-card:hover .play-button-large {
 transform: scale(1.1);
 background: white;
}


.image-zoom-modal {
 display: none;
 position: fixed;
 z-index: 10000 !important;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 background-color: rgba(0, 0, 0, 0.9);
 cursor: zoom-out;
}

.image-zoom-header {
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
 padding: 20px;
 display: flex;
 justify-content: space-between;
 align-items: center;
 z-index: 10001 !important;
}

.zoom-controls {
 display: flex;
 gap: 8px;
 z-index: 10002 !important;
 position: relative;
}

.zoom-controls .btn {
 pointer-events: auto !important;
 z-index: 10003 !important;
 position: relative;
}

.image-zoom-container {
 display: flex;
 justify-content: center;
 align-items: center;
 height: 100%;
 position: relative;
 overflow: hidden;
 z-index: 9999;
 pointer-events: none;
}

.image-zoom-container * {
 pointer-events: auto;
}

.zoomed-image {
 max-width: 90%;
 max-height: 90%;
 object-fit: contain;
 cursor: grab;
 transition: transform 0.2s ease;
}

.zoomed-image:active {
 cursor: grabbing;
}

.zoom-level-indicator {
 position: absolute;
 bottom: 20px;
 left: 20px;
 background: rgba(0, 0, 0, 0.7);
 color: white;
 padding: 8px 12px;
 border-radius: 4px;
 font-size: 14px;
 z-index: 10000;
 pointer-events: none;
}

.zoom-instructions {
 position: absolute;
 bottom: 20px;
 right: 20px;
 background: rgba(0, 0, 0, 0.7);
 color: white;
 padding: 8px 12px;
 border-radius: 4px;
 font-size: 12px;
 z-index: 10000;
 pointer-events: none;
}


.verdict-header {
 background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
 border-radius: 8px;
 padding: 15px;
 border-left: 4px solid #205844;
}

.bb-avatar {
 width: 40px;
 height: 40px;
 background: linear-gradient(135deg, #205844 0%, #1a4a3a 100%);
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 box-shadow: 0 3px 8px rgba(32, 88, 68, 0.3);
}

.bb-logo {
 font-weight: 900;
 font-size: 16px;
 color: white;
 text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

.verdict-rating-display .rating-badge {
 font-size: 16px;
 font-weight: 700;
 padding: 6px 12px;
 border-radius: 8px;
 min-width: 60px;
 text-align: center;
 box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.pros-cons-container {
 background: #f8f9fa;
 border-radius: 10px;
 padding: 15px;
 height: 100%;
}

.verdict-pros, .verdict-cons {
 background: white;
 border-radius: 8px;
 padding: 12px;
 border-left: 3px solid;
}

.verdict-pros {
 border-left-color: #205844;
}

.verdict-cons {
 border-left-color: #dc3545;
}

.pros-list, .cons-list {
 list-style: none;
 padding: 0;
 margin: 0;
}

.pros-list li, .cons-list li {
 display: flex;
 align-items: flex-start;
 gap: 8px;
 padding: 4px 0;
 font-size: 0.9rem;
 line-height: 1.4;
}

.pros-list li i {
 margin-top: 2px;
 flex-shrink: 0;
 font-size: 12px;
}

.cons-list li i {
 margin-top: 2px;
 flex-shrink: 0;
 font-size: 12px;
}

.metrics-grid {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 10px;
}

.metric-item {
 background: white;
 border: 1px solid #e9ecef;
 border-radius: 8px;
 padding: 12px;
 display: flex;
 align-items: center;
 gap: 10px;
 transition: all 0.3s ease;
}

.metric-item:hover {
 border-color: #205844;
 box-shadow: 0 3px 8px rgba(32, 88, 68, 0.15);
 transform: translateY(-1px);
}

.metric-item i {
 font-size: 16px;
 width: 20px;
 text-align: center;
 flex-shrink: 0;
}

.metric-item div {
 flex: 1;
 min-width: 0;
}

.metric-label {
 display: block;
 font-size: 0.75rem;
 color: #6c757d;
 margin-bottom: 2px;
 font-weight: 500;
}

.metric-value {
 display: block;
 font-size: 0.9rem;
 font-weight: 600;
 color: #333;
}


.calculator-container {
 background: #f8f9fa;
 border-radius: 12px;
 padding: 20px;
}

.calculator-tabs {
 display: none;
}

.calculator-result {
 background: linear-gradient(135deg, #205844, #1a4a3a);
 color: white;
 padding: 15px;
 border-radius: 10px;
 text-align: center;
 margin-top: 15px;
}

.result-value {
 font-size: 1.8rem;
 font-weight: bold;
 margin-bottom: 5px;
}

.result-label {
 font-size: 0.9rem;
 opacity: 0.9;
}


@media (max-width: 991px) {
 .calculator-tabs {
 display: flex;
 background: #e9ecef;
 border-radius: 25px;
 padding: 4px;
 margin-bottom: 20px;
}
 
 .calculator-tab {
 flex: 1;
 padding: 10px 15px;
 text-align: center;
 border-radius: 20px;
 cursor: pointer;
 transition: all 0.3s ease;
 font-weight: 500;
}
 
 .calculator-tab.active {
 background: linear-gradient(135deg, #205844, #1a4a3a);
 color: white;
}
 
 #fuel-calculator {
 display: none;
}
}

@media (max-width: 768px) {
 .main-display-image {
 max-height: 300px;
}
 
 .view360-image-enhanced {
 height: 250px;
}
 
 .dealer-card {
 padding: 15px;
}
 
 .calculator-container {
 padding: 15px;
}
 
 .metrics-grid {
 grid-template-columns: repeat(2, 1fr);
 gap: 10px;
}
 
 .metric-item {
 padding: 12px;
}
 
 .vs-badge {
 width: 40px;
 height: 40px;
 font-size: 1rem;
 margin: 0 10px;
}
}

@media (max-width: 576px) {
 .section-header {
 padding: 15px 20px;
}
 
 .content-section .card-body {
 padding: 20px;
}
 
 .gallery-grid {
 grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
 gap: 6px;
}
 
 .gallery-thumb {
 height: 50px;
}
 
 .metrics-grid {
 grid-template-columns: 1fr;
}
 
 
 .main-image-display {
 max-height: 250px;
}
 
 .image-panel {
 max-height: none;
 margin-top: 20px;
}
 
 .colors-grid {
 grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
 gap: 8px;
}
 
 .color-thumb {
 height: 50px;
}
 
 .gallery-thumbs {
 grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
 gap: 6px;
}
 
 .gallery-thumb {
 height: 40px;
}
 
 .feature-btn {
 padding: 10px 6px;
}
 
 .btn-zoom, .btn-360, .btn-video {
 width: 35px;
 height: 35px;
 z-index: 101 !important;
 position: relative !important;
 pointer-events: auto !important;
}
 
 .image-actions-overlay {
 gap: 6px;
}
}


.modal-backdrop {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: rgba(0, 0, 0, 0.9);
 z-index: 9999;
 display: none;
 animation: fadeIn 0.3s ease;
}

.modal-backdrop.show {
 display: block;
}

@keyframes fadeIn {
 from {opacity: 0;}
 to {opacity: 1;}
}

.modal-content {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 max-width: 95%;
 max-height: 95%;
}

.modal-image {
 max-width: 100%;
 max-height: 100%;
 border-radius: 8px;
}

.modal-close {
 position: absolute;
 top: 20px;
 right: 30px;
 color: white;
 font-size: 35px;
 cursor: pointer;
 z-index: 10000;
 transition: color 0.3s ease;
}

.modal-close:hover {
 color: #205844;
}


#view360Modal {
 display: none;
}

#view360Modal.show {
 display: block;
}

.view360-modal-content {
 background: white;
 border-radius: 15px;
 padding: 25px;
 text-align: center;
 max-width: 900px;
 width: 95%;
 max-height: 95vh;
 overflow-y: auto;
}

.view360-display-enhanced {
 position: relative;
 margin: 20px 0;
 background: #f8f9fa;
 border-radius: 15px;
 padding: 20px;
 box-shadow: inset 0 2px 10px rgba(0,0,0,0.1);
}

.view360-image-container {
 position: relative;
 display: inline-block;
 background: white;
 border-radius: 10px;
 overflow: hidden;
 box-shadow: 0 4px 20px rgba(0,0,0,0.2);
 width: 100%;
 text-align: center;
}

.view360-image-enhanced {
 max-width: 100%;
 max-height: 500px;
 min-height: 350px;
 width: auto;
 height: auto;
 object-fit: contain;
 border-radius: 10px;
 touch-action: pan-x;
 cursor: grab;
 transition: transform 0.2s ease;
 background: white;
 display: block;
 margin: 0 auto;
}

.view360-image-enhanced:active {
 cursor: grabbing;
}

.view360-loading {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 background: rgba(255, 255, 255, 0.9);
 padding: 20px;
 border-radius: 10px;
 display: none;
 z-index: 10;
}

.angle-indicator {
 position: absolute;
 top: 10px;
 right: 10px;
 background: rgba(0, 0, 0, 0.8);
 color: white;
 padding: 8px 12px;
 border-radius: 20px;
 font-weight: 600;
 font-size: 0.9rem;
 z-index: 5;
}

.view360-slider-container {
 margin: 20px 0;
 position: relative;
}

.view360-slider-enhanced {
 width: 100%;
 height: 8px;
 background: #e9ecef;
 border-radius: 5px;
 outline: none;
 -webkit-appearance: none;
}

.view360-slider-enhanced::-webkit-slider-thumb {
 -webkit-appearance: none;
 appearance: none;
 width: 20px;
 height: 20px;
 background: #205844;
 border-radius: 50%;
 cursor: pointer;
 border: 3px solid white;
 box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

.view360-slider-enhanced::-moz-range-thumb {
 width: 20px;
 height: 20px;
 background: #205844;
 border-radius: 50%;
 cursor: pointer;
 border: 3px solid white;
 box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

.slider-labels {
 display: flex;
 justify-content: space-between;
 margin-top: 5px;
 font-size: 0.8rem;
 color: #666;
}

.view360-info {
 margin: 15px 0;
 padding: 10px;
 background: #f8f9fa;
 border-radius: 8px;
 border-left: 4px solid #205844;
}

.view360-controls-enhanced {
 display: flex;
 justify-content: center;
 gap: 10px;
 margin-top: 20px;
 flex-wrap: wrap;
}

.view360-controls-enhanced .btn {
 min-width: 60px;
 font-weight: 600;
 border-radius: 8px;
 transition: all 0.3s ease;
}

.view360-controls-enhanced .btn:hover {
 transform: translateY(-2px);
 box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

#autoRotateBtn.active {
 background: #dc3545;
 border-color: #dc3545;
 color: white;
}


.video-modal-content {
 width: 90%;
 max-width: 900px;
}

.video-wrapper {
 position: relative;
 width: 100%;
 height: 0;
 padding-bottom: 56.25%;
 border-radius: 10px;
 overflow: hidden;
}

.video-wrapper iframe,
.video-wrapper video {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}


.main-image-wrapper {
 border-radius: 15px;
 overflow: hidden;
 background: #f8f9fa;
 padding: 15px;
}

.main-image-display {
 width: 100%;
 max-height: 400px;
 object-fit: contain;
 cursor: zoom-in;
 transition: transform 0.3s ease;
 border-radius: 10px;
}

.main-image-display:hover {
 transform: scale(1.02);
}

.image-overlay-info {
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 opacity: 0;
 transition: opacity 0.3s ease;
 background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, transparent 30%, transparent 70%, rgba(0,0,0,0.1) 100%);
 border-radius: 10px;
 display: flex;
 justify-content: space-between;
 align-items: flex-start;
 padding: 15px;
 pointer-events: none; /* Prevent overlay from blocking button clicks */
}

.main-image-wrapper:hover .image-overlay-info {
 opacity: 1;
}

.image-label {
 background: rgba(0, 0, 0, 0.8);
 color: white;
 padding: 8px 12px;
 border-radius: 20px;
 font-size: 0.85rem;
 backdrop-filter: blur(10px);
 pointer-events: auto; /* Allow label to be interactive */
}

.image-actions-overlay {
 display: flex;
 gap: 8px;
 position: absolute;
 top: 10px;
 right: 10px;
 z-index: 100;
}

.btn-zoom, .btn-360, .btn-video {
 width: 40px;
 height: 40px;
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 backdrop-filter: blur(10px);
 border: none;
 transition: all 0.3s ease;
 cursor: pointer;
 background: rgba(255, 255, 255, 0.9);
 color: #333;
 z-index: 101;
 position: relative;
 pointer-events: auto !important;
}

.btn-zoom:hover, .btn-360:hover, .btn-video:hover {
 transform: scale(1.1);
 background: rgba(255, 255, 255, 1);
 box-shadow: 0 2px 8px rgba(0,0,0,0.2);
 z-index: 102 !important;
}


.image-panel {
 height: 100%;
 max-height: 450px;
 overflow-y: auto;
 padding: 15px;
 background: white;
 border-radius: 15px;
}

.section-subtitle {
 font-size: 0.9rem;
 font-weight: 600;
 color: #333;
 margin-bottom: 10px;
 display: flex;
 align-items: center;
 justify-content: space-between;
}


.colors-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
 gap: 10px;
 margin-bottom: 0;
}

.color-option {
 cursor: pointer;
 transition: all 0.3s ease;
 text-align: center;
 padding: 8px;
 border-radius: 10px;
 background: white;
 border: 2px solid transparent;
}

.color-option:hover {
 border-color: #205844;
 box-shadow: 0 3px 10px rgba(32, 88, 68, 0.2);
 transform: translateY(-2px);
}

.color-option.active {
 border-color: #205844;
 background: #f0f7ff;
}

.color-thumb-wrapper {
 position: relative;
 margin-bottom: 5px;
}

.color-thumb {
 width: 100%;
 height: 60px;
 object-fit: contain;
 border-radius: 8px;
 transition: transform 0.3s ease;
 background: white;
}

.color-option:hover .color-thumb {
 transform: scale(1.05);
}

.color-swatch {
 position: absolute;
 bottom: -3px;
 right: -3px;
 width: 18px;
 height: 18px;
 border: 3px solid white;
 border-radius: 50%;
 box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

.color-name {
 font-size: 0.75rem;
 font-weight: 600;
 color: #555;
 margin: 0;
}

.color-option.active .color-name {
 color: #205844;
}


.gallery-thumbs {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
 gap: 8px;
}

.gallery-thumb-item {
 position: relative;
 cursor: pointer;
 border-radius: 8px;
 overflow: hidden;
 transition: transform 0.3s ease;
}

.gallery-thumb-item:hover {
 transform: scale(1.05);
}

.gallery-thumb {
 width: 100%;
 height: 50px;
 object-fit: cover;
 transition: opacity 0.3s ease;
}

.thumb-overlay {
 position: absolute;
 inset: 0;
 background: rgba(0, 123, 255, 0.8);
 display: flex;
 align-items: center;
 justify-content: center;
 color: white;
 opacity: 0;
 transition: opacity 0.3s ease;
 font-size: 0.9rem;
}

.gallery-thumb-item:hover .thumb-overlay {
 opacity: 1;
}


.feature-btn {
 padding: 12px 8px;
 text-align: center;
 transition: all 0.3s ease;
 border-radius: 10px;
 position: relative;
 overflow: hidden;
}

.feature-btn:hover {
 transform: translateY(-2px);
 box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.feature-btn small {
 font-size: 0.7rem;
 line-height: 1;
 opacity: 0.8;
}


.qa-list {
 max-height: none;
}

.qa-header-controls {
 display: flex;
 justify-content: space-between;
 align-items: center;
 margin-bottom: 1rem;
 gap: 15px;
}

.qa-tabs {
 flex: 1;
 margin: 0;
}

.qa-action-button {
 flex-shrink: 0;
}

.qa-item {
 border: 1px solid #e9ecef;
 border-radius: 8px;
 padding: 12px 15px;
 margin-bottom: 10px;
 background: #ffffff;
 transition: all 0.3s ease;
}

.qa-item:hover {
 border-color: #205844;
 box-shadow: 0 2px 8px rgba(32, 88, 68, 0.1);
 transform: translateY(-1px);
}

.qa-item .question {
 display: flex;
 align-items: flex-start;
 margin-bottom: 8px;
 font-size: 0.95rem;
 line-height: 1.4;
}

.qa-item .question i {
 margin-top: 2px;
 flex-shrink: 0;
}

.qa-item .answer {
 display: flex;
 align-items: flex-start;
 font-size: 0.9rem;
 color: #6c757d;
 line-height: 1.4;
 padding-left: 24px;
}

.qa-item .answer i {
 margin-top: 2px;
 flex-shrink: 0;
}

.qa-item.user-question {
 background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
}

.empty-state {
 text-align: center;
 padding: 30px 20px;
 color: #6c757d;
}

.empty-state i {
 font-size: 2.5rem;
 margin-bottom: 15px;
 display: block;
}

.empty-state p {
 margin: 0;
 font-size: 0.9rem;
}

#qaTab .nav-link {
 border-radius: 20px;
 padding: 8px 16px;
 font-size: 0.9rem;
 font-weight: 500;
 color: #6c757d;
 border: 1px solid #e9ecef;
 background: #ffffff;
 margin-right: 8px;
 transition: all 0.3s ease;
 white-space: nowrap;
}

#qaTab .nav-link:hover {
 color: #205844;
 border-color: #205844;
 background: rgba(32, 88, 68, 0.05);
}

#qaTab .nav-link.active {
 color: #ffffff !important;
 background: #205844;
 border-color: #205844;
}

#qaTab .nav-link.active i {
 color: #ffffff !important;
}


.calculator-card.compact {
 background-color: white;
 padding: 8px;
 border-radius: 6px;
 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 border: 1px solid #e9ecef;
}

.calculator-title h6.small {
 font-size: 0.85rem;
 border-bottom: 1px solid #e9ecef;
 padding-bottom: 4px;
}

.calculator-inputs .form-label.tiny {
 font-size: 0.7rem;
 font-weight: 600;
 color: #495057;
 margin-bottom: 1px;
 line-height: 1.2;
}

.calculator-inputs .form-control.compact,
.calculator-inputs .form-select.compact {
 font-size: 0.75rem;
 padding: 3px 6px;
 border-radius: 4px;
 height: auto;
 line-height: 1.2;
}

.calculator-inputs .btn.compact-btn {
 padding: 4px 8px;
 font-size: 0.75rem;
 font-weight: 600;
 height: auto;
}

.result-card.compact {
 background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
 padding: 6px !important;
 border-radius: 4px;
 margin-top: 8px;
 border: 1px solid #dee2e6;
}

.result-card .h6 {
 font-size: 0.9rem;
 font-weight: 700;
 line-height: 1.1;
}

.result-card .fw-bold.tiny {
 font-size: 0.7rem;
 font-weight: 600;
}

.result-card tiny {
 font-size: 0.6rem;
 color: #6c757d;
 line-height: 1;
}


.calculator-tabs .nav-link {
 font-size: 0.75rem;
 padding: 6px 4px;
}


.calculator-section-spacer {
 height: 20px;
 clear: both;
}

#calculator-section {
 overflow: hidden;
 position: relative;
 z-index: 1;
}

#calculator-section::after {
 content: "";
 display: table;
 clear: both;
}


.comparison-scroll-container {
 overflow-x: auto;
 white-space: nowrap;
 padding: 10px 0;
 scrollbar-width: thin;
 scrollbar-color: #c1c1c1 #f1f1f1;
}

.comparison-scroll-container::-webkit-scrollbar {
 height: 8px;
}

.comparison-scroll-container::-webkit-scrollbar-track {
 background: #f1f1f1;
 border-radius: 4px;
}

.comparison-scroll-container::-webkit-scrollbar-thumb {
 background: #c1c1c1;
 border-radius: 4px;
}

.comparison-scroll-container::-webkit-scrollbar-thumb:hover {
 background: #a8a8a8;
}

.comparison-grid {
 display: inline-flex;
 gap: 15px;
 padding: 5px;
}

.comparison-item {
 flex: 0 0 auto;
 white-space: normal;
}

.comparison-card-compact {
 background: white;
 border: 1px solid #e9ecef;
 border-radius: 12px;
 padding: 15px;
 transition: all 0.3s ease;
 height: 100%;
}

.comparison-card-compact:hover {
 border-color: #205844;
 box-shadow: 0 5px 15px rgba(32, 88, 68, 0.15);
 transform: translateY(-2px);
}

.bike-vs-layout {
 display: flex;
 align-items: center;
 justify-content: space-between;
 margin-bottom: 15px;
}

.bike-item {
 text-align: center;
 flex: 1;
}

.bike-image img {
 width: 80px;
 height: 60px;
 object-fit: contain;
 margin-bottom: 8px;
}

.bike-name {
 font-size: 0.9rem;
 font-weight: 600;
 margin-bottom: 2px;
}

.brand-name {
 font-size: 0.75rem;
 color: #6c757d;
 margin-bottom: 4px;
}

.price {
 font-size: 0.85rem;
 font-weight: 600;
 color: #205844;
}

.vs-badge-compact {
 background: linear-gradient(45deg, #205844, #1a4a3a);
 color: white;
 border-radius: 50%;
 width: 35px;
 height: 35px;
 display: flex;
 align-items: center;
 justify-content: center;
 font-weight: bold;
 font-size: 0.9rem;
 margin: 0 10px;
 flex-shrink: 0;
}

.comparison-action {
 text-align: center;
 margin-top: 15px;
}


@media (max-width: 768px) {
 .verdict-header {
 flex-direction: column;
 text-align: center;
 gap: 15px;
 padding: 12px;
}
 
 .verdict-header .d-flex {
 justify-content: center;
}
 
 .bb-avatar {
 width: 35px;
 height: 35px;
}
 
 .bb-logo {
 font-size: 14px;
}
 
 .verdict-rating-display .rating-badge {
 font-size: 14px;
 padding: 5px 10px;
 min-width: 55px;
}
 
 .pros-cons-container {
 padding: 12px;
 margin-bottom: 15px;
}
 
 .verdict-pros, .verdict-cons {
 padding: 10px;
}
 
 .pros-list li, .cons-list li {
 font-size: 0.85rem;
}
 
 .metrics-grid {
 grid-template-columns: 1fr;
 gap: 8px;
}
 
 .metric-item {
 padding: 10px;
}
 
 .final-verdict {
 padding: 20px;
}
 
 .view360-modal-content {
 width: 95%;
 max-width: none;
 padding: 20px;
 max-height: 90vh;
}
 
 .view360-image-enhanced {
 max-height: 300px;
 min-height: 250px;
}
 
 .view360-controls-enhanced {
 flex-direction: column;
 gap: 8px;
}
 
 .view360-controls-enhanced .btn {
 width: 100%;
 max-width: 200px;
 margin: 0 auto;
}
}


@media (max-width: 576px) {
 .verdict-header {
 padding: 10px;
 flex-direction: column;
 text-align: center;
 gap: 10px;
}
 
 .verdict-rating-display {
 align-self: center;
}
 
 .metric-item {
 padding: 8px;
 gap: 8px;
}
 
 .metric-item i {
 font-size: 14px;
}
 
 .metric-label {
 font-size: 0.7rem;
}
 
 .metric-value {
 font-size: 0.8rem;
}
 
 .final-verdict {
 padding: 15px;
}
}


.final-verdict {
 background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
 border-radius: 10px;
 padding: 30px;
 border-left: 4px solid #205844;
}

.verdict-title {
 color: #205844;
 font-size: 0.95rem;
 font-weight: 600;
 margin-bottom: 10px;
}

.verdict-content p {
 font-size: 0.9rem;
 line-height: 1.5;
 color: #495057;
 text-align: justify;
}

.read-more-link, .read-less-link {
 color: #205844;
 text-decoration: none;
 font-size: 0.85rem;
 font-weight: 600;
 margin-top: 8px;
 display: inline-block;
}

.read-more-link:hover, .read-less-link:hover {
 color: #0056b3;
 text-decoration: underline;
}


.rating-excellent {
 background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
 color: #155724;
 border: 1px solid #c3e6cb;
}

.rating-very-good {
 background: linear-gradient(135deg, #d1ecf1 0%, #bee5eb 100%);
 color: #0c5460;
 border: 1px solid #bee5eb;
}

.rating-good {
 background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
 color: #856404;
 border: 1px solid #ffeaa7;
}

.rating-average {
 background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
 color: #721c24;
 border: 1px solid #f5c6cb;
}

.rating-poor {
 background: linear-gradient(135deg, #f5c6cb 0%, #dc3545 100%);
 color: white;
 border: 1px solid #dc3545;
}


.compact-specs-container {
 padding: 20px;
}

.compact-specs-container .specs-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
 gap: 15px;
 margin-bottom: 30px;
}

.compact-specs-container .spec-item {
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 15px 20px;
 background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
 border-radius: 10px;
 border-left: 4px solid #205844;
 transition: all 0.3s ease;
 box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.compact-specs-container .spec-item:hover {
 transform: translateY(-2px);
 box-shadow: 0 4px 15px rgba(0,0,0,0.1);
 border-left-color: #1a4a3a;
}

.compact-specs-container .spec-label {
 font-weight: 600;
 color: #495057;
 font-size: 0.9rem;
 display: flex;
 align-items: center;
}

.compact-specs-container .spec-label i {
 color: #205844;
 width: 16px;
 margin-right: 8px;
}

.compact-specs-container .spec-value {
 font-weight: 700;
 color: #212529;
 font-size: 0.95rem;
 text-align: right;
}

.compact-specs-container .spec-value.text-success {
 color: #205844 !important;
}


@media (max-width: 768px) {
 .compact-specs-container {
 padding: 15px;
}
 
 .compact-specs-container .specs-grid {
 grid-template-columns: 1fr 1fr;
 gap: 8px;
 margin-bottom: 20px;
}
 
 .compact-specs-container .spec-item {
 padding: 8px 12px;
 flex-direction: column;
 align-items: flex-start;
 gap: 4px;
 text-align: left;
 border-radius: 8px;
}
 
 .compact-specs-container .spec-label {
 font-size: 0.75rem;
 margin-bottom: 0;
 line-height: 1.2;
}
 
 .compact-specs-container .spec-label i {
 font-size: 0.7rem;
 width: 12px;
}
 
 .compact-specs-container .spec-value {
 font-size: 0.8rem;
 text-align: left;
 width: 100%;
 padding-top: 3px;
 border-top: 1px solid rgba(0,0,0,0.1);
 line-height: 1.2;
 font-weight: 600;
}
 
 .btn-lg {
 font-size: 1rem;
 padding: 12px 24px;
 width: 100%;
 max-width: 300px;
}
}

@media (max-width: 576px) {
 .compact-specs-container {
 padding: 8px;
}
 
 .compact-specs-container .specs-grid {
 grid-template-columns: 1fr 1fr;
 gap: 6px;
 margin-bottom: 15px;
}
 
 .compact-specs-container .spec-item {
 padding: 6px 8px;
 border-radius: 6px;
 gap: 3px;
}
 
 .compact-specs-container .spec-label {
 font-size: 0.7rem;
 line-height: 1.1;
}
 
 .compact-specs-container .spec-label i {
 font-size: 0.65rem;
 width: 10px;
 margin-right: 4px !important;
}
 
 .compact-specs-container .spec-value {
 font-size: 0.75rem;
 padding-top: 2px;
 line-height: 1.1;
 font-weight: 600;
}
 
 .btn-lg {
 font-size: 0.9rem;
 padding: 10px 20px;
}
 
 
 .section-title {
 font-size: 1.2rem;
 margin-bottom: 15px;
}
 
 .section-title i {
 font-size: 1rem;
}
}


@media (max-width: 400px) {
 .compact-specs-container .specs-grid {
 grid-template-columns: 1fr 1fr;
 gap: 4px;
}
 
 .compact-specs-container .spec-item {
 padding: 5px 6px;
 border-radius: 5px;
 gap: 2px;
}
 
 .compact-specs-container .spec-label {
 font-size: 0.65rem;
 line-height: 1;
}
 
 .compact-specs-container .spec-label i {
 font-size: 0.6rem;
 width: 8px;
 margin-right: 3px !important;
}
 
 .compact-specs-container .spec-value {
 font-size: 0.7rem;
 padding-top: 1px;
 line-height: 1;
}
 
 .compact-specs-container {
 padding: 5px;
}
 
 .section-title {
 font-size: 1.1rem;
 margin-bottom: 10px;
}
}


@keyframes slideInRight {
 from {
 transform: translateX(100%);
 opacity: 0;
}
 to {
 transform: translateX(0);
 opacity: 1;
}
}

@keyframes slideOutRight {
 from {
 transform: translateX(0);
 opacity: 1;
}
 to {
 transform: translateX(100%);
 opacity: 0;
}
}

.qa-notification {
 animation: slideInRight 0.3s ease-out;
}


.hidden-questions {
 display: none;
}

.auth-prompt .dropdown-menu {
 min-width: 280px;
 border-radius: 12px;
 box-shadow: 0 4px 20px rgba(0,0,0,0.15);
 border: 1px solid #e9ecef;
 padding: 8px;
}

.auth-prompt .dropdown-item {
 border-radius: 8px;
 padding: 10px 15px;
 margin-bottom: 2px;
 transition: all 0.3s ease;
}

.auth-prompt .dropdown-item:hover {
 background: linear-gradient(135deg, #0d6efd 0%, #0056b3 100%);
 color: white;
 transform: translateY(-1px);
}

.auth-prompt .dropdown-item i {
 width: 20px;
 text-align: center;
}

.auth-prompt .dropdown-item-text {
 background: rgba(13, 110, 253, 0.05);
 border-radius: 6px;
 padding: 8px 12px;
 font-style: italic;
 white-space: normal;
 line-height: 1.4;
}

.auth-prompt button {
 border-radius: 20px;
 font-weight: 500;
 transition: all 0.3s ease;
}

.auth-prompt button:hover {
 transform: translateY(-2px);
 box-shadow: 0 4px 12px rgba(13, 110, 253, 0.3);
}

#guestPromptCard .card-body {
 background: linear-gradient(135deg, #f8f9ff 0%, #ffffff 100%);
 border-radius: 12px;
}

#guestPromptCard .btn {
 border-radius: 20px;
 font-weight: 500;
 padding: 8px 20px;
 transition: all 0.3s ease;
}

#guestPromptCard .btn:hover {
 transform: translateY(-2px);
 box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

#guestPromptCard .fa-user-lock {
 opacity: 0.8;
}

#guestPromptCard small {
 background: rgba(25, 135, 84, 0.05);
 padding: 8px 15px;
 border-radius: 20px;
 display: inline-block;
}


@media (max-width: 768px) {
 .qa-header-controls {
 flex-direction: column;
 gap: 10px;
 align-items: stretch;
}
 
 .qa-tabs {
 order: 2;
}
 
 .qa-action-button {
 order: 1;
 align-self: center;
}
 
 .qa-notification {
 left: 10px;
 right: 10px;
 max-width: none;
}
 
 .qa-header-controls {
 flex-direction: column;
 align-items: stretch;
 gap: 12px;
 margin-bottom: 15px;
}
 
 .qa-tabs {
 order: 1;
}
 
 .qa-action-button {
 order: 2;
 align-self: center;
}
 
 #qaTab {
 justify-content: center;
 gap: 8px;
}
 
 #qaTab .nav-link {
 margin-right: 0;
 padding: 10px 16px;
 font-size: 0.85rem;
 border-radius: 25px;
 min-width: 120px;
 text-align: center;
}
 
 .qa-action-button .btn {
 border-radius: 25px;
 padding: 10px 20px;
 font-size: 0.85rem;
 font-weight: 600;
}
 
 .auth-prompt button {
 font-size: 0.85rem;
 padding: 10px 16px;
 border-radius: 25px;
}
 
 .qa-item {
 padding: 10px 12px;
 margin-bottom: 8px;
}
 
 .qa-item .question {
 font-size: 0.9rem;
 margin-bottom: 6px;
}
 
 .qa-item .answer {
 font-size: 0.85rem;
 padding-left: 20px;
}
 
 .empty-state {
 padding: 20px 15px;
}
 
 .empty-state i {
 font-size: 2rem;
 margin-bottom: 10px;
}
 
 .auth-prompt .dropdown-menu {
 min-width: 260px;
}
}

@media (max-width: 576px) {
 .qa-header-controls {
 gap: 10px;
}
 
 #qaTab .nav-link {
 padding: 8px 12px;
 font-size: 0.8rem;
 min-width: 100px;
}
 
 .qa-action-button .btn {
 padding: 8px 16px;
 font-size: 0.8rem;
}
 
 .auth-prompt button {
 font-size: 0.8rem;
 padding: 8px 12px;
}
 
 .qa-item .question {
 flex-direction: column;
 gap: 4px;
}
 
 .qa-item .question small {
 margin-left: 20px !important;
 font-size: 0.75rem;
}
 
 .qa-item .answer {
 padding-left: 0;
 margin-left: 20px;
}
 
 .auth-prompt .dropdown-menu {
 min-width: 240px;
 left: 50% !important;
 transform: translateX(-50%) !important;
}
}


.reviews-summary {
 background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
 border-radius: 12px;
 padding: 20px;
 margin-bottom: 25px;
}

.overall-rating {
 text-align: center;
}

.rating-number {
 font-size: 3rem;
 font-weight: bold;
 color: #ffc107;
 line-height: 1;
}

.rating-stars {
 font-size: 1.5rem;
 margin: 10px 0;
}

.rating-breakdown {
 padding-left: 20px;
}

.rating-row {
 margin-bottom: 8px;
 align-items: center;
}

.rating-label {
 min-width: 60px;
 font-size: 0.9rem;
 color: #6c757d;
}

.rating-bar {
 flex: 1;
 height: 8px;
 background-color: #e9ecef;
 border-radius: 4px;
 overflow: hidden;
 position: relative;
}

.rating-fill {
 height: 100%;
 background: linear-gradient(90deg, #ffc107 0%, #ffb300 100%);
 transition: width 0.3s ease;
}

.rating-count {
 min-width: 30px;
 text-align: right;
 font-size: 0.9rem;
 color: #6c757d;
}


.star-rating-input {
 text-align: center;
 padding: 15px;
 background: #f8f9fa;
 border-radius: 8px;
}

.stars-input {
 font-size: 2rem;
 margin-bottom: 10px;
}

.stars-input i {
 cursor: pointer;
 margin: 0 3px;
 transition: all 0.2s ease;
}

.stars-input i:hover {
 transform: scale(1.1);
}

.rating-text {
 font-weight: 500;
 color: #495057;
}


.review-item {
 border: 1px solid #e9ecef;
 border-radius: 12px;
 padding: 20px;
 margin-bottom: 20px;
 background: #fff;
 transition: box-shadow 0.3s ease;
}

.review-item:hover {
 box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.review-header {
 display: flex;
 justify-content: space-between;
 align-items: flex-start;
 margin-bottom: 15px;
}

.reviewer-info {
 display: flex;
 align-items: center;
}

.reviewer-avatar {
 width: 50px;
 height: 50px;
 border-radius: 50%;
 background: linear-gradient(135deg, #007bff, #0056b3);
 color: white;
 display: flex;
 align-items: center;
 justify-content: center;
 font-weight: bold;
 font-size: 1.2rem;
 margin-right: 15px;
}

.reviewer-details h6 {
 margin: 0;
 font-weight: 600;
 color: #212529;
}

.review-meta {
 display: flex;
 align-items: center;
 gap: 15px;
 margin-top: 5px;
}

.review-rating {
 display: flex;
 align-items: center;
 gap: 5px;
}

.rating-value {
 font-weight: 500;
 color: #6c757d;
 font-size: 0.9rem;
}

.review-date {
 color: #6c757d;
 font-size: 0.85rem;
}

.review-content {
 margin-bottom: 15px;
}

.review-title {
 font-weight: 600;
 color: #212529;
 margin-bottom: 10px;
}

.review-text {
 color: #495057;
 line-height: 1.6;
 margin-bottom: 15px;
}


.pros-cons-section {
 margin-top: 15px;
}

.pros, .cons {
 margin-bottom: 15px;
}

.pros h6, .cons h6 {
 font-size: 0.95rem;
 margin-bottom: 8px;
}

.pros-list, .cons-list {
 list-style: none;
 padding: 0;
 margin: 0;
}

.pros-list li, .cons-list li {
 padding: 5px 0;
 padding-left: 20px;
 position: relative;
 font-size: 0.9rem;
 color: #495057;
}

.pros-list li:before {
 content: "✓";
 position: absolute;
 left: 0;
 color: #28a745;
 font-weight: bold;
}

.cons-list li:before {
 content: "✗";
 position: absolute;
 left: 0;
 color: #ffc107;
 font-weight: bold;
}


.review-actions {
 border-top: 1px solid #e9ecef;
 padding-top: 15px;
}

.review-votes {
 display: flex;
 align-items: center;
 gap: 10px;
}

.helpful-text {
 color: #6c757d;
 font-size: 0.9rem;
 margin-right: 10px;
}

.vote-btn {
 font-size: 0.85rem;
 padding: 5px 12px;
 border-radius: 20px;
 transition: all 0.2s ease;
}

.vote-btn:hover:not(.disabled) {
 transform: translateY(-1px);
}

.vote-btn.disabled {
 opacity: 0.6 !important;
 cursor: not-allowed !important;
 pointer-events: none;
 background-color: #f8f9fa !important;
 border-color: #dee2e6 !important;
 color: #6c757d !important;
}

.vote-btn.disabled:hover {
 transform: none !important;
 background-color: #f8f9fa !important;
 border-color: #dee2e6 !important;
 color: #6c757d !important;
}


.auth-prompt-review .dropdown-menu {
 min-width: 280px;
 border-radius: 12px;
 box-shadow: 0 4px 20px rgba(0,0,0,0.15);
 border: 1px solid #e9ecef;
 padding: 8px;
}

.auth-prompt-review .dropdown-item {
 border-radius: 8px;
 padding: 10px 15px;
 margin-bottom: 2px;
 transition: all 0.3s ease;
}

.auth-prompt-review .dropdown-item:hover {
 background: linear-gradient(135deg, #0d6efd 0%, #0056b3 100%);
 color: white;
 transform: translateY(-1px);
}

.auth-prompt-review .dropdown-item i {
 width: 20px;
 text-align: center;
}

.auth-prompt-review .dropdown-item-text {
 background: rgba(13, 110, 253, 0.05);
 border-radius: 6px;
 padding: 8px 12px;
 font-style: italic;
 white-space: normal;
 line-height: 1.4;
}

.auth-prompt-review button {
 border-radius: 20px;
 font-weight: 500;
 transition: all 0.3s ease;
}

.auth-prompt-review button:hover {
 transform: translateY(-2px);
 box-shadow: 0 4px 12px rgba(13, 110, 253, 0.3);
}

#guestReviewPromptCard .card-body {
 background: linear-gradient(135deg, #f8f9ff 0%, #ffffff 100%);
 border-radius: 12px;
}

#guestReviewPromptCard .btn {
 border-radius: 20px;
 font-weight: 500;
 padding: 8px 20px;
 transition: all 0.3s ease;
}

#guestReviewPromptCard .btn:hover {
 transform: translateY(-2px);
 box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

#guestReviewPromptCard .fa-star-half-alt {
 opacity: 0.8;
}

#guestReviewPromptCard small {
 background: rgba(25, 135, 84, 0.05);
 padding: 8px 15px;
 border-radius: 20px;
 display: inline-block;
}


.no-reviews {
 background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
 border-radius: 12px;
 padding: 40px 20px;
}


#reviewFormCard {
 border: 2px solid #007bff;
 box-shadow: 0 4px 12px rgba(0,123,255,0.15);
}

#reviewFormCard .card-body {
 background: linear-gradient(135deg, #fff 0%, #f8f9ff 100%);
}


@media (max-width: 768px) {
 .reviews-summary .row {
 text-align: center;
}
 
 .rating-breakdown {
 padding-left: 0;
 margin-top: 20px;
}
 
 .review-header {
 flex-direction: column;
 align-items: flex-start;
 gap: 10px;
}
 
 .review-meta {
 flex-direction: column;
 align-items: flex-start;
 gap: 5px;
}
 
 .review-votes {
 flex-wrap: wrap;
 gap: 8px;
}
 
 .helpful-text {
 width: 100%;
 margin-bottom: 5px;
}
 
 .auth-prompt-review .dropdown-menu {
 min-width: 260px;
}
}


.btn:disabled {
 opacity: 0.6;
 cursor: not-allowed;
}


.btn-success:disabled {
 opacity: 0.8;
}


@media (min-width: 992px) {
 .mobile-calculator-container {
 display: flex;
 align-items: stretch;
}
 
 .mobile-calculator-container .col-lg-6 {
 display: flex;
 flex-direction: column;
}
 
 .calculator-card.compact {
 flex: 1;
 display: flex;
 flex-direction: column;
 min-height: 320px;
}
 
 .calculator-inputs {
 flex: 1;
}
 
 .calculator-results {
 margin-top: auto;
}
}


.calculator-card.compact {
 padding: 12px;
 border-radius: 8px;
 box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.calculator-title h6.small {
 font-size: 0.9rem;
 border-bottom: 2px solid #e9ecef;
 padding-bottom: 6px;
 margin-bottom: 10px;
}

.calculator-inputs .form-label.tiny {
 font-size: 0.75rem;
 margin-bottom: 2px;
}

.calculator-inputs .form-control.compact,
.calculator-inputs .form-select.compact {
 font-size: 0.8rem;
 padding: 5px 8px;
 border-radius: 6px;
}

.calculator-inputs .btn.compact-btn {
 padding: 6px 12px;
 font-size: 0.8rem;
 margin-top: 8px;
}

.result-card.compact {
 padding: 12px !important;
 border-radius: 8px;
 box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.result-card .h6 {
 font-size: 1rem;
 margin-bottom: 2px;
}

.result-card .fw-bold.tiny {
 font-size: 0.75rem;
}

.result-card tiny {
 font-size: 0.65rem;
 display: block;
 margin-top: 2px;
}


@media (max-width: 991px) {
 .calculator-tabs .nav-pills {
 background-color: #f8f9fa;
 border-radius: 6px;
 padding: 2px;
 width: 100%;
}
 
 .calculator-tabs .nav-link {
 border-radius: 4px;
 border: none;
 font-size: 0.75rem;
 padding: 8px 12px;
 color: #6c757d;
 background: none;
 transition: all 0.3s ease;
 flex: 1;
 text-align: center;
}
 
 .calculator-tabs .nav-link.active {
 background-color: #205844;
 color: white;
 box-shadow: 0 1px 3px rgba(32, 88, 68, 0.2);
}
 
 .mobile-calculator-container {
 min-height: 380px;
}
 
 .calculator-card.compact {
 min-height: 350px;
}
}


@media (max-width: 576px) {
 #images-section .card {
 margin: 0 5px;
 border-radius: 12px;
 overflow: hidden;
}
 
 #images-section .card-body {
 padding: 15px;
}
 
 #images-section .row.g-3 {
 margin: 0;
}
 
 #images-section .col-lg-7,
 #images-section .col-lg-5 {
 padding-left: 5px;
 padding-right: 5px;
}
 
 .gallery-grid {
 grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
 gap: 6px;
}
 
 .gallery-thumb {
 height: 50px;
}
}


@media (max-width: 768px) {
 .comparison-card {
 min-width: 280px;
 max-width: 320px;
 padding: 0.8rem;
}
 
 .sports-bike-badge {
 top: 8px;
 right: 8px;
 padding: 0.25rem 0.5rem;
 font-size: 0.65rem;
}
 
 .motorcycle-image {
 height: 80px;
 margin-bottom: 0.6rem;
}
 
 .bikes-container {
 gap: 0.6rem;
 margin-bottom: 0.8rem;
}
 
 .brand-rating {
 margin-bottom: 0.3rem;
}
 
 .brand-name {
 font-size: 0.65rem;
}
 
 .bike-name {
 font-size: 0.85rem;
 margin-bottom: 0.3rem;
}
 
 .bike-price {
 font-size: 0.75rem;
}
 
 .rating-value {
 font-size: 0.65rem;
}
 
 .vs-divider {
 width: 40px;
 height: 40px;
 font-size: 0.7rem;
}
 
 .comparison-footer {
 padding: 0.6rem;
}
 
 .btn-see-compare {
 font-size: 0.75rem;
 padding: 0.4rem 0.8rem;
}
 
 .comparison-grid {
 gap: 10px;
}
}

@media (max-width: 576px) {
 .comparison-card {
 min-width: 260px;
 max-width: 300px;
 padding: 0.6rem;
}
 
 .motorcycle-image {
 height: 70px;
 margin-bottom: 0.5rem;
}
 
 .bikes-container {
 gap: 0.5rem;
 margin-bottom: 0.6rem;
}
 
 .bike-name {
 font-size: 0.8rem;
 margin-bottom: 0.2rem;
}
 
 .brand-name,
 .bike-price,
 .rating-value {
 font-size: 0.7rem;
}
 
 .vs-divider {
 width: 35px;
 height: 35px;
 font-size: 0.65rem;
}
 
 .btn-see-compare {
 font-size: 0.7rem;
 padding: 0.3rem 0.6rem;
}
 
 .comparison-grid {
 gap: 8px;
 padding: 3px;
}
}


.price-chart-container {
 background: white;
 border-radius: 12px;
 border: 1px solid #e5e7eb;
 padding: 1rem;
 margin-bottom: 1rem;
}

.chart-header {
 border-bottom: 1px solid #f3f4f6;
 padding-bottom: 0.75rem;
 margin-bottom: 1rem;
}

.chart-header h6 {
 font-weight: 600;
 color: #374151;
 margin: 0;
}

.chart-wrapper {
 position: relative;
 background: #fafafa;
 border-radius: 8px;
 padding: 1rem;
 border: 1px solid #f0f0f0;
}

.price-insights {
 background: white;
 border-radius: 12px;
 border: 1px solid #e5e7eb;
 padding: 1rem;
}

.insights-header {
 border-bottom: 1px solid #f3f4f6;
 padding-bottom: 0.75rem;
}

.insights-header h6 {
 font-weight: 600;
 color: #374151;
 margin: 0;
}

.insight-card {
 transition: transform 0.2s ease, box-shadow 0.2s ease;
 border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.insight-card:hover {
 transform: translateY(-2px);
 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.insight-label {
 font-weight: 500;
 text-transform: uppercase;
 letter-spacing: 0.5px;
}

.insight-value {
 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 letter-spacing: 0.5px;
}


#priceChart {
 max-width: 100%;
 height: auto !important;
}


@media (max-width: 768px) {
 .price-chart-container,
 .price-insights {
 padding: 0.75rem;
 margin-bottom: 0.75rem;
}
 
 .chart-wrapper {
 height: 220px !important;
 padding: 0.75rem;
}
 
 .insight-card {
 padding: 0.75rem !important;
 margin-bottom: 0.5rem !important;
}
 
 .insight-label {
 font-size: 0.7rem !important;
}
 
 .insight-value {
 font-size: 0.9rem !important;
}
 
 .chart-header h6 {
 font-size: 0.9rem;
}
 
 .insights-header h6 {
 font-size: 0.9rem;
}
}

@media (max-width: 576px) {
 .price-chart-container,
 .price-insights {
 padding: 0.5rem;
 margin-bottom: 0.5rem;
}
 
 .chart-wrapper {
 height: 200px !important;
 padding: 0.5rem;
}
 
 .insight-card {
 padding: 0.5rem !important;
 margin-bottom: 0.4rem !important;
}
 
 .insight-label {
 font-size: 0.65rem !important;
}
 
 .insight-value {
 font-size: 0.8rem !important;
}
 
 .chart-header,
 .insights-header {
 margin-bottom: 0.75rem;
 padding-bottom: 0.5rem;
}
 
 .chart-header h6,
 .insights-header h6 {
 font-size: 0.85rem;
}
}


.chart-loading {
 display: flex;
 align-items: center;
 justify-content: center;
 height: 280px;
 background: #f8f9fa;
 border-radius: 8px;
 border: 1px dashed #dee2e6;
}

.chart-loading i {
 color: #6c757d;
 margin-bottom: 1rem;
}


.insight-card.current-price {
 background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}

.insight-card.price-change-positive {
 background: linear-gradient(135deg, #dc3545 0%, #c82333 100%) !important;
}

.insight-card.price-change-negative {
 background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
}

.insight-card.highest-price {
 background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%) !important;
}

.insight-card.lowest-price {
 background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%) !important;
}


.similar-bikes-grid {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(280px, 300px));
 gap: 1.5rem;
 padding: 0;
 justify-content: start;
}

@media (max-width: 767px) {
 .similar-bikes-grid {
 display: none !important;
}
 
 .similar-bikes-mobile {
 display: block !important;
}
}

@media (min-width: 768px) {
 .similar-bikes-grid {
 display: grid !important;
 grid-template-columns: repeat(auto-fill, minmax(280px, 300px));
 justify-content: start;
}
 
 .similar-bikes-mobile {
 display: none !important;
}
}

.similar-bike-card {
 flex: 1;
 min-width: 200px;
 max-width: 250px;
 background: white;
 border-radius: 12px;
 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 transition: transform 0.3s ease, box-shadow 0.3s ease;
 border: 1px solid #f0f0f0;
 overflow: hidden;
 position: relative;
}

.similar-bike-card:hover {
 transform: translateY(-4px);
 box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.bike-card-inner {
 padding: 1rem;
 height: 100%;
 display: flex;
 flex-direction: column;
}

.sports-bike-badge {
 position: absolute;
 top: 10px;
 right: 10px;
 background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
 color: white;
 padding: 0.3rem 0.6rem;
 border-radius: 15px;
 font-size: 0.75rem;
 font-weight: 600;
 z-index: 10;
}

.bike-image-container {
 width: 100%;
 height: 150px;
 background: #ffffff;
 border-radius: 8px;
 overflow: hidden;
 margin-bottom: 1rem;
 display: flex;
 align-items: center;
 justify-content: center;
}

.bike-image {
 width: 100%;
 height: 100%;
 object-fit: contain;
}

.bike-info-section {
 flex: 1;
 display: flex;
 flex-direction: column;
}

.brand-rating-row {
 margin-bottom: 0.5rem;
}

.brand-info {
 display: flex;
 justify-content: space-between;
 align-items: center;
}

.brand-name {
 color: #22c55e;
 font-size: 0.8rem;
 font-weight: 600;
}

.rating-display {
 display: flex;
 align-items: center;
 gap: 0.2rem;
 font-size: 0.75rem;
}

.star-icon {
 color: #fbbf24;
}

.rating-value {
 font-weight: 600;
 color: #374151;
}

.no-rating {
 color: #9ca3af;
 font-size: 0.7rem;
}

.bike-name {
 font-size: 1rem;
 font-weight: 700;
 color: #1f2937;
 margin: 0 0 0.5rem 0;
 line-height: 1.2;
}

.bike-price {
 margin-bottom: 1rem;
}

.price-amount {
 color: #22c55e;
 font-size: 1.1rem;
 font-weight: 700;
}

.card-action {
 margin-top: auto;
}

.btn-view-bike {
 display: block;
 width: 100%;
 background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
 color: white;
 text-align: center;
 padding: 0.6rem 1rem;
 text-decoration: none;
 border-radius: 6px;
 font-weight: 600;
 font-size: 0.85rem;
 transition: all 0.3s ease;
}

.btn-view-bike:hover {
 background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
 color: white;
 transform: translateY(-1px);
}


.similar-bikes-mobile {
 display: block;
}

.mobile-scroll-container {
 display: flex;
 gap: 1rem;
 overflow-x: auto;
 padding-bottom: 1rem;
 scroll-snap-type: x mandatory;
}

.mobile-bike-card {
 flex: 0 0 220px;
 background: white;
 border-radius: 10px;
 border: 1px solid #f0f0f0;
 overflow: hidden;
 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 scroll-snap-align: start;
}

.mobile-card-inner {
 padding: 0.8rem;
}

.mobile-sports-badge {
 background: #22c55e;
 color: white;
 padding: 0.2rem 0.5rem;
 border-radius: 10px;
 font-size: 0.7rem;
 font-weight: 600;
 display: inline-block;
 margin-bottom: 0.5rem;
}

.mobile-bike-image {
 width: 100%;
 height: 100px;
 background: #ffffff;
 border-radius: 6px;
 overflow: hidden;
 margin-bottom: 0.5rem;
 display: flex;
 align-items: center;
 justify-content: center;
}

.mobile-bike-image img {
 width: 100%;
 height: 100%;
 object-fit: contain;
}

.mobile-bike-info {
 text-align: center;
}

.mobile-brand {
 color: #22c55e;
 font-size: 0.7rem;
 font-weight: 600;
 margin-bottom: 0.3rem;
}

.mobile-rating {
 font-size: 0.7rem;
 color: #6b7280;
 margin-bottom: 0.3rem;
}

.mobile-bike-name {
 font-size: 0.85rem;
 font-weight: 700;
 color: #1f2937;
 margin: 0 0 0.3rem 0;
 line-height: 1.2;
}

.mobile-price {
 color: #22c55e;
 font-size: 0.9rem;
 font-weight: 700;
 margin-bottom: 0.5rem;
}

.mobile-view-btn {
 display: block;
 background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
 color: white;
 text-align: center;
 padding: 0.5rem 0.6rem;
 text-decoration: none;
 border-radius: 4px;
 font-weight: 600;
 font-size: 0.7rem;
 white-space: nowrap;
}

.mobile-view-btn:hover {
 background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
 color: white;
}


@media (max-width: 767px) {
 .similar-bikes-grid {
 display: none !important;
}
 
 .similar-bikes-mobile {
 display: block !important;
}
}

@media (min-width: 768px) {
 .similar-bikes-grid {
 display: grid;
}
 
 .similar-bikes-mobile {
 display: none;
}
}


.hero-specs-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
 gap: 1.5rem;
 margin-bottom: 2.5rem;
 contain: layout;
}

.spec-item {
 position: relative;
 display: flex;
 align-items: center;
 background: rgba(255, 255, 255, 0.1);
 backdrop-filter: blur(15px);
 border-radius: 16px;
 padding: 1.25rem;
 border: 1px solid rgba(255, 255, 255, 0.2);
 transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 transform: translateZ(0);
 overflow: hidden;
}

.spec-item::before {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
 opacity: 0;
 transition: opacity 0.3s ease;
}

.spec-item:hover::before {
 opacity: 1;
}

.spec-item:hover {
 background: rgba(255, 255, 255, 0.2);
 transform: translateY(-4px) scale(1.02);
 box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.spec-accent {
 position: absolute;
 top: 0;
 left: 0;
 width: 4px;
 height: 100%;
 background: linear-gradient(180deg, #ff6b6b 0%, #4ecdc4 50%, #45b7d1 100%);
 border-radius: 0 2px 2px 0;
 opacity: 0;
 transition: opacity 0.3s ease;
}

.spec-item:hover .spec-accent {
 opacity: 1;
}

.spec-icon {
 width: 50px;
 height: 50px;
 display: flex;
 align-items: center;
 justify-content: center;
 background: rgba(255, 255, 255, 0.2);
 border-radius: 50%;
 margin-right: 1rem;
 flex-shrink: 0;
 position: relative;
 overflow: hidden;
}

.spec-icon::before {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.3) 50%, transparent 70%);
 transform: translateX(-100%);
 transition: transform 0.6s ease;
}

.spec-item:hover .spec-icon::before {
 transform: translateX(100%);
}

.spec-icon i {
 font-size: 1.3rem;
 color: white;
 text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.spec-content {
 flex: 1;
}

.spec-value {
 font-size: 1.4rem;
 font-weight: 700;
 line-height: 1.2;
 margin-bottom: 0.25rem;
 color: white;
 text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.spec-label {
 font-size: 0.85rem;
 opacity: 0.95;
 font-weight: 500;
 color: rgba(255, 255, 255, 0.9);
}


.price-spec .spec-icon {
 background: linear-gradient(135deg, #ff6b6b 0%, #ff8e8e 100%);
}

.mileage-spec .spec-icon {
 background: linear-gradient(135deg, #4ecdc4 0%, #7ee8e0 100%);
}

.cc-spec .spec-icon {
 background: linear-gradient(135deg, #45b7d1 0%, #74c7e3 100%);
}

.availability-spec .spec-icon {
 background: linear-gradient(135deg, #96ceb4 0%, #b8e6d1 100%);
}


.hero-actions {
 display: flex;
 gap: 1.25rem;
 flex-wrap: wrap;
}

.btn-compare,
.btn-dealers {
 position: relative;
 padding: 1rem 2rem;
 border-radius: 12px;
 font-weight: 600;
 text-decoration: none;
 display: inline-flex;
 align-items: center;
 gap: 0.75rem;
 transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 border: 2px solid transparent;
 overflow: hidden;
 backdrop-filter: blur(15px);
 font-size: 0.95rem;
}

.btn-shine {
 position: absolute;
 top: 0;
 left: -100%;
 width: 100%;
 height: 100%;
 background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
 transition: left 0.5s ease;
}

.btn-compare:hover .btn-shine,
.btn-dealers:hover .btn-shine {
 left: 100%;
}

.btn-compare {
 background: rgba(255, 255, 255, 0.15);
 color: white;
 border-color: rgba(255, 255, 255, 0.3);
}

.btn-compare:hover {
 background: white;
 color: #667eea;
 transform: translateY(-2px);
 box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.btn-dealers {
 background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 1) 100%);
 color: #667eea;
 box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.btn-dealers:hover {
 background: white;
 transform: translateY(-2px);
 box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}




/* Share Icon Container (replacing brand thumbnail) */
.share-icon-container {
 position: absolute;
 top: 20px;
 right: 20px;
 z-index: 10;
}

.share-icon-btn {
 width: 50px;
 height: 50px;
 border-radius: 50%;
 background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 border: 2px solid rgba(255, 255, 255, 0.8);
 color: white;
 display: flex;
 align-items: center;
 justify-content: center;
 cursor: pointer;
 transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
 backdrop-filter: blur(10px);
}

.share-icon-btn:hover {
 background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
 transform: translateY(-2px) scale(1.05);
 box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
 border-color: rgba(255, 255, 255, 1);
}

.share-icon-btn i {
 font-size: 18px;
 color: white;
}

.share-icon-btn:active {
 transform: translateY(0) scale(0.98);
}




.brand-thumbnail {
 position: absolute;
 top: 1.5rem;
 right: 1.5rem;
 width: 60px;
 height: 60px;
 background: white;
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
 border: 3px solid rgba(255, 255, 255, 0.9);
 z-index: 3;
 overflow: hidden;
}

.brand-thumbnail-glow {
 position: absolute;
 top: -2px;
 left: -2px;
 right: -2px;
 bottom: -2px;
 background: linear-gradient(45deg, #667eea, #764ba2, #f093fb);
 border-radius: 50%;
 z-index: -1;
 animation: rotate 3s linear infinite;
}

@keyframes rotate {
 0% {transform: rotate(0deg);}
 100% {transform: rotate(360deg);}
}

.brand-logo {
 width: 35px;
 height: 35px;
 object-fit: contain;
 filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}






 
 .hero-title {
 font-size: 2.2rem;
 margin-bottom: 1.5rem;
}
 
 .hero-specs-grid {
 grid-template-columns: repeat(2, 1fr);
 gap: 1rem;
 margin-bottom: 2rem;
}
 
 .spec-item {
 padding: 1rem;
}
 
 .spec-icon {
 width: 40px;
 height: 40px;
 margin-right: 0.75rem;
}
 
 .spec-value {
 font-size: 1.2rem;
}
 
 .spec-label {
 font-size: 0.8rem;
}


@media (max-width: 768px) {
 .hero-section-optimized {
 padding: 30px 0;
 min-height: auto;
}
 
 .hero-breadcrumb {
 padding: 0.375rem 0.75rem;
 font-size: 0.8rem;
 margin-bottom: 1rem;
}


 
 .hero-title {
 font-size: 1.9rem;
 margin-bottom: 1rem;
 text-align: left;
}
 
 .hero-title-section {
 margin-bottom: 0;
}
 
 .brand-badge {
 padding: 0.375rem 0.75rem;
 margin-bottom: 0.75rem;
}
 
 
 .body .hero-section-optimized .col-lg-7 .hero-specs-grid {
 display: none !important;
}
 
.body .hero-section-optimized .col-lg-7 .hero-actions {
 display: none !important;
}
 
 
 .mobile-specs-actions .hero-specs-grid {
 grid-template-columns: 1fr;
 gap: 0.875rem;
 margin-bottom: 1.5rem;
 margin-top: 1.5rem;
 display: grid !important;
}
 
 .mobile-specs-actions .spec-item {
 padding: 1rem;
 border-radius: 12px;
}
 
 .mobile-specs-actions .spec-icon {
 width: 42px;
 height: 42px;
 margin-right: 0.875rem;
}
 
 .mobile-specs-actions .spec-value {
 font-size: 1.25rem;
 font-weight: 700;
}
 
 .mobile-specs-actions .spec-label {
 font-size: 0.8rem;
}
 
 .mobile-specs-actions .hero-actions {
 justify-content: flex-start;
 gap: 1rem;
 margin-top: 1rem;
 margin-bottom: 0;
 display: flex !important;
}
 
 .mobile-specs-actions .btn-compare,
 .mobile-specs-actions .btn-dealers {
 padding: 0.875rem 1.5rem;
 font-size: 0.9rem;
 font-weight: 600;
}
 
 
 body .hero-section-optimized .container .row {
 display: flex !important;
 flex-direction: column !important;
}
 
 
 body .hero-section-optimized .container .row .col-lg-7 {
 order: 1 !important;
 width: 100% !important;
 max-width: 100% !important;
 flex: none !important;
}
 
 
 body .hero-section-optimized .container .row .col-lg-5 {
 order: 2 !important;
 width: 100% !important;
 max-width: 100% !important;
 flex: none !important;
 margin-top: 0 !important;
 margin-bottom: 1.5rem !important;
}
 
 

 
 .brand-thumbnail {
 top: 1rem;
 right: 1rem;
 width: 50px;
 height: 50px;
}
 
 .brand-logo {
 width: 30px;
 height: 30px;
}
}

@media (max-width: 576px) {
 .hero-section-optimized {
 padding: 25px 0;
}
 
 .hero-breadcrumb {
 font-size: 0.75rem;
 padding: 0.25rem 0.5rem;
}
 
 .hero-title {
 font-size: 1.6rem;
 margin-bottom: 1rem;
 line-height: 1.3;
}
 
 .brand-badge {
 padding: 0.25rem 0.5rem;
 font-size: 0.8rem;
}
 
 .hero-specs-grid {
 gap: 0.75rem;
 margin-bottom: 1.25rem;
}
 
 .spec-item {
 padding: 0.875rem;
 border-radius: 10px;
}
 
 .spec-icon {
 width: 36px;
 height: 36px;
 margin-right: 0.75rem;
}
 
 .spec-icon i {
 font-size: 1.1rem;
}
 
 .spec-value {
 font-size: 1.1rem;
}
 
 .spec-label {
 font-size: 0.75rem;
}
 
 .hero-actions {
 flex-direction: column;
 align-items: stretch;
 gap: 0.875rem;
 margin-bottom: 1.5rem;
}
 
 .btn-compare,
 .btn-dealers {
 width: 100%;
 justify-content: center;
 padding: 0.875rem;
 font-size: 0.9rem;
}
 

 
 .brand-thumbnail {
 top: 0.75rem;
 right: 0.75rem;
 width: 45px;
 height: 45px;
}
 
 .brand-logo {
 width: 28px;
 height: 28px;
}
}


.hero-section-optimized,
.hero-title,
.hero-specs-grid {
 visibility: visible;
 opacity: 1;
}





body .hero-section-optimized .container .row {
 display: flex !important;
 flex-direction: column !important;
 flex-wrap: nowrap !important;
}

body .hero-section-optimized .container .row .col-lg-7 {
 order: 1 !important;
 width: 100% !important;
 max-width: 100% !important;
 flex: 0 0 auto !important;
 margin-bottom: 0 !important;
 display: flex !important;
 flex-direction: column !important;
}


body .hero-section-optimized .container .row .col-lg-5 {
 order: 2 !important;
 width: 100% !important;
 max-width: 100% !important;
 flex: 0 0 auto !important;
 margin-top: 0 !important;
 margin-bottom: 1.5rem !important;
 position: relative !important;
}


body .hero-section-optimized .col-lg-7 nav {
 order: 1 !important;
}

body .hero-section-optimized .col-lg-7 .hero-title-section {
 order: 2 !important;
 margin-bottom: 0 !important;
}


body .hero-section-optimized .col-lg-7 .hero-specs-grid {
 order: 99 !important;
 margin-top: 1.5rem !important;
}

body .hero-section-optimized .col-lg-7 .hero-actions {
 order: 100 !important;
}




@media (min-width: 992px) {
 
 .mobile-specs-actions {
 display: none !important;
}
 
 
 body .hero-section-optimized .col-lg-7 .hero-specs-grid {
 display: grid !important;
}
 
 body .hero-section-optimized .col-lg-7 .hero-actions {
 display: flex !important;
}
 
 
 body .hero-section-optimized .container .row {
 display: flex !important;
 flex-direction: row !important;
 flex-wrap: wrap !important;
}
 
 body .hero-section-optimized .container .row .col-lg-7 {
 order: 0 !important;
 flex: 0 0 58.333333% !important;
 max-width: 58.333333% !important;
}
 
 body .hero-section-optimized .container .row .col-lg-5 {
 order: 0 !important;
 flex: 0 0 41.666667% !important;
 max-width: 41.666667% !important;
}
}




/* ALL OLD CONFLICTING CSS REMOVED */

/* BIKERSBUDDY MODERN NAVIGATION - COMPLETELY REDESIGNED */

/* Desktop Navigation - Default static position, becomes sticky when scrolling */
@media (min-width: 769px) {
    .bb-modern-nav-wrapper {
        position: relative; /* Default: static position above overview */
        top: auto;
        left: auto;
        right: auto;
        z-index: 990;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-bottom: 2px solid #e2e8f0;
        margin: 0 0 20px 0; /* Add margin below when static */
        padding: 0;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 1; /* Always visible by default */
        visibility: visible;
        transform: translateY(0);
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 0 2px 20px rgba(0,0,0,0.1);
    }

    /* When sticky mode is triggered */
    .bb-modern-nav-wrapper.bb-show-nav {
        position: fixed !important;
        top: 120px !important; /* Below header + main nav */
        left: 0 !important;
        right: 0 !important;
        margin: 0 !important;
        z-index: 990;
    }

    /* Adjust body padding when desktop tabs become sticky */
    body.bb-desktop-tabs-visible {
        padding-top: 180px !important; /* Header (70px) + main nav (50px) + tabs (60px) */
    }

    .bb-nav-container {
        background: transparent;
        padding: 0 20px;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-behavior: smooth;
        scrollbar-width: none;
        -ms-overflow-style: none;
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        flex-wrap: nowrap; /* Force single line */
        list-style: none;
    }

    .bb-nav-container::-webkit-scrollbar {
        display: none;
    }

    .bb-nav-item {
        flex: 0 0 auto;
        margin: 0;
    }

    .bb-nav-link {
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        color: #64748b;
        padding: 8px 16px;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 600;
        text-decoration: none;
        transition: all 0.3s ease;
        white-space: nowrap;
        min-width: 90px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }

    .bb-nav-link:hover {
        background: #f1f5f9;
        border-color: #1D513F;
        color: #1D513F;
        text-decoration: none;
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(29, 81, 63, 0.2);
    }

    .bb-nav-link.bb-active {
        background: #1D513F !important;
        border-color: #1D513F !important;
        color: white !important;
        font-weight: 700;
        transform: translateY(-1px);
        box-shadow: 0 3px 12px rgba(29, 81, 63, 0.4) !important;
    }
}

/* Mobile Navigation - Horizontal scroll single line */
@media (max-width: 768px) {
    .bb-modern-nav-wrapper {
        position: fixed;
        top: 60px; /* Below mobile header */
        left: 0;
        right: 0;
        z-index: 990;
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-bottom: 1px solid #e2e8f0;
        margin: 0;
        padding: 0;
        height: 50px; /* Compact mobile height */
        display: flex;
        align-items: center;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-100%);
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 0 2px 15px rgba(0,0,0,0.08);
    }

    .bb-modern-nav-wrapper.bb-show-nav {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    /* Adjust body padding when mobile tabs are visible */
    body.bb-mobile-tabs-visible {
        padding-top: 110px !important; /* 60px header + 50px tabs */
    }

    .bb-nav-container {
        background: transparent;
        padding: 0 15px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 6px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-behavior: smooth;
        scrollbar-width: none;
        -ms-overflow-style: none;
        width: 100%;
        flex-wrap: nowrap; /* Force single line with scroll */
        list-style: none;
        margin: 0;
    }

    .bb-nav-container::-webkit-scrollbar {
        display: none;
    }

    .bb-nav-item {
        flex: 0 0 auto;
        margin: 0;
    }

    .bb-nav-link {
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        color: #64748b;
        padding: 6px 12px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 600;
        text-decoration: none;
        transition: all 0.3s ease;
        white-space: nowrap;
        min-width: 70px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        flex-shrink: 0; /* Prevent shrinking */
    }

    .bb-nav-link:hover {
        background: #f1f5f9;
        border-color: #1D513F;
        color: #1D513F;
        text-decoration: none;
        transform: scale(1.02);
    }

    .bb-nav-link.bb-active {
        background: #1D513F !important;
        border-color: #1D513F !important;
        color: white !important;
        font-weight: 700;
        transform: scale(1.02);
        box-shadow: 0 2px 8px rgba(29, 81, 63, 0.3) !important;
    }
}

/* Very small screens */
@media (max-width: 480px) {
    .bb-modern-nav-wrapper {
        top: 56px;
        height: 48px;
    }

    .bb-nav-container {
        height: 48px;
        padding: 0 12px;
        gap: 4px;
    }

    .bb-nav-link {
        padding: 5px 10px;
        font-size: 11px;
        min-width: 65px;
        height: 30px;
        border-radius: 18px;
    }

    body.bb-mobile-tabs-visible {
        padding-top: 104px !important; /* 56px header + 48px tabs */
    }
}

/* Brands Page Specific Styles - Fixed CSS Specificity */
.brands-page {
    background: #f8f9fa !important;
    min-height: 100vh !important;
}

.brands-hero {
    background: linear-gradient(135deg, #205844 0%, #e3f2fd 100%) !important;
    color: white !important;
    padding: 4rem 0 !important;
    text-align: center !important;
}

.brands-page .hero-content h1 {
    font-size: 3rem !important;
    margin-bottom: 1rem !important;
    font-weight: 700 !important;
    color: white !important;
}

.brands-page .hero-content p {
    font-size: 1.2rem !important;
    margin-bottom: 2rem !important;
    opacity: 0.9 !important;
    color: white !important;
}

.brands-search {
    max-width: 500px !important;
    margin: 0 auto !important;
}

.brands-page .search-container {
    position: relative !important;
}

.brands-page .search-input {
    width: 100% !important;
    padding: 1rem 1.5rem 1rem 3rem !important;
    border: none !important;
    border-radius: 50px !important;
    font-size: 1rem !important;
    outline: none !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
}

.brands-page .search-icon {
    position: absolute !important;
    left: 1rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 1.2rem !important;
    color: #666 !important;
}

.top-brands-section {
    padding: 3rem 0 2rem 0 !important;
    background: #fff !important;
}

.brands-page .section-title {
    text-align: center !important;
    font-size: 2.5rem !important;
    font-weight: 700 !important;
    color: #2c3e50 !important;
    margin-bottom: 3rem !important;
    position: relative !important;
}

.brands-page .section-title::after {
    content: '' !important;
    position: absolute !important;
    bottom: -10px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 80px !important;
    height: 4px !important;
    background: linear-gradient(135deg, #205844 0%, #1a4a3a 100%) !important;
    border-radius: 2px !important;
}

.brands-page .brand-logo:not(.brand-logo-large) {
    width: 100px !important;
    height: 100px !important;
    margin: 0 auto 1.5rem !important;
    border-radius: 15px !important;
    overflow: hidden !important;
    background: #f8f9fa !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.brands-page .brand-logo:not(.brand-logo-large) img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    padding: 1rem !important;
}

.brands-page .brand-placeholder {
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(135deg, #22A359 0%, #1e8f4f 100%) !important;
    color: white !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: bold !important;
    font-size: 1.2rem !important;
    border-radius: 10px !important;
}

/* Mobile brands page responsive */
@media (max-width: 768px) {
    .brands-page .hero-content h1 {
        font-size: 2rem !important;
    }
    
    .brands-page .hero-content p {
        font-size: 1rem !important;
        line-height: 1.6 !important;
    }
    
    .brands-page .section-title {
        font-size: 2rem !important;
        margin-bottom: 2rem !important;
    }
    
    .brands-page .brand-logo:not(.brand-logo-large) {
        width: 80px !important;
        height: 80px !important;
    }
    
    /* Enhanced mobile search visibility */
    .brands-search {
        max-width: 90% !important;
        margin: 0 auto !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .brands-page .search-container {
        position: relative !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .brands-page .search-input {
        padding: 0.8rem 1rem 0.8rem 2.5rem !important;
        font-size: 0.9rem !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        background: white !important;
        color: #333 !important;
        border: 1px solid #e2e8f0 !important;
    }
    
    .brands-page .search-icon {
        left: 0.8rem !important;
        font-size: 1rem !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        z-index: 10 !important;
    }
}

/* Extra small mobile screens */
@media (max-width: 480px) {
    .brands-search {
        max-width: 95% !important;
        margin: 0 auto !important;
        padding: 0 10px !important;
    }
    
    .brands-page .search-input {
        padding: 0.7rem 0.8rem 0.7rem 2.2rem !important;
        font-size: 0.85rem !important;
        border-radius: 40px !important;
    }
    
    .brands-page .search-icon {
        left: 0.7rem !important;
        font-size: 0.9rem !important;
    }
    
    .brands-hero {
        padding: 3rem 0 !important;
    }
    
    .brands-page .hero-content h1 {
        font-size: 1.7rem !important;
        margin-bottom: 0.8rem !important;
    }
    
    .brands-page .hero-content p {
        font-size: 0.9rem !important;
        padding: 0 10px !important;
        margin-bottom: 1.5rem !important;
    }
}

/* Unified Horizontal Similar Bikes Styles */
.similar-bikes-horizontal-scroll {
    width: 100%;
    position: relative;
}

.horizontal-scroll-container {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 1rem 0.5rem;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e0 #f7fafc;
    -webkit-overflow-scrolling: touch;
}

.horizontal-scroll-container::-webkit-scrollbar {
    height: 8px;
}

.horizontal-scroll-container::-webkit-scrollbar-track {
    background: #f7fafc;
    border-radius: 4px;
}

.horizontal-scroll-container::-webkit-scrollbar-thumb {
    background: #cbd5e0;
    border-radius: 4px;
    transition: background 0.3s ease;
}

.horizontal-scroll-container::-webkit-scrollbar-thumb:hover {
    background: #a0aec0;
}

.horizontal-bike-card {
    flex: 0 0 auto;
    width: 280px;
    background: white;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.horizontal-bike-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    border-color: #205844;
}

.bike-type-badge {
    background: #205844;
    color: white;
    padding: 6px 12px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    margin: 0 0 8px 0;
    display: inline-block;
}

.bike-card-content {
    padding: 1rem;
}

.bike-image-section {
    width: 100%;
    height: 140px;
    margin: 0 0 1rem 0;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    border-radius: 8px;
}

.bike-image-horizontal {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.horizontal-bike-card:hover .bike-image-horizontal {
    transform: scale(1.05);
}

.bike-info-horizontal {
    padding: 0;
}

.brand-rating-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.brand-name-horizontal {
    color: #205844;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

.rating-horizontal {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.star-icon-horizontal {
    color: #fbbf24;
    font-size: 12px;
}

.rating-value-horizontal {
    color: #374151;
    font-size: 12px;
    font-weight: 600;
}

.no-rating-horizontal {
    color: #9ca3af;
    font-size: 11px;
}

.bike-name-horizontal {
    font-size: 16px;
    font-weight: 700;
    color: #1f2937;
    margin: 0.5rem 0;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bike-price-horizontal {
    margin: 0.75rem 0;
}

.price-amount-horizontal {
    font-size: 18px;
    font-weight: 700;
    color: #205844;
}

.card-action-horizontal {
    margin-top: 1rem;
}

.btn-view-horizontal {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, #205844, #1a4a3a);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.3s ease;
    border: none;
    width: 100%;
    justify-content: center;
}

.btn-view-horizontal:hover {
    background: linear-gradient(135deg, #1a4a3a, #205844);
    color: white;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(32, 88, 68, 0.3);
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .horizontal-bike-card {
        width: 240px;
    }
    
    .bike-image-section {
        height: 120px;
    }
    
    .bike-type-badge {
        padding: 5px 10px;
        font-size: 10px;
        margin: 0 0 6px 0;
    }
    
    .bike-name-horizontal {
        font-size: 14px;
    }
    
    .price-amount-horizontal {
        font-size: 16px;
    }
    
    .horizontal-scroll-container {
        gap: 1rem;
        padding: 0.75rem 0.25rem;
    }
}

@media (max-width: 480px) {
    .horizontal-bike-card {
        width: 200px;
    }
    
    .bike-image-section {
        height: 100px;
    }
    
    .bike-card-content {
        padding: 0.75rem;
    }
    
    .bike-type-badge {
        padding: 4px 8px;
        font-size: 9px;
        margin: 0 0 4px 0;
    }
    
    .bike-name-horizontal {
        font-size: 13px;
    }
    
    .price-amount-horizontal {
        font-size: 15px;
    }
}

/* Clean Hero Image CSS - Optimized & Layout Shift Free */
.hero-image-container {
    position: relative;
    width: 100%;
    height: 420px;
    background: #ffffff;
    border-radius: 24px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.hero-image:hover {
    transform: scale(1.02);
}

/* Mobile optimizations */
@media (max-width: 768px) {
    .hero-image-container {
        height: 300px;
        margin: 0 auto 1.5rem auto;
        max-width: 400px;
    }
}

@media (max-width: 576px) {
    .hero-image-container {
        height: 250px;
        max-width: 350px;
    }
}