@import '../vars.css';
/* Yacht Carousel Styles */
.featured-section-wrapper {
  max-width: 1060px;
  margin: 0 auto;
  padding: 0 20px;

  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
}

.section-header {
  display: flex;
  gap: 16px;
  justify-content: space-between;
  align-items: center;
}

.section-title {
  color: #0f1a3a;
  font-family: var(--font-saol);
  font-size: 25px;
  font-style: normal;
  font-weight: 400;
  line-height: 130%; /* 32.5px */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.section-buttons .left-btn svg {
  transform: rotate(180deg);
  color: #0f1a3a;
}

.section-buttons .disabled svg {
  color: rgba(15, 26, 58, 0.05);
}

.section-buttons {
  display: flex;
  align-items: center;
  gap: 32px;
}

.section-buttons .left-btn:hover,
.section-buttons .right-btn:hover {
  cursor: pointer;
  transform: scale(1.1);
}

.section-buttons span {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.yacht-carousel {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(15, 26, 58, 0.05);
}

.yacht-carousel--no-border {
  border-bottom: 0;
}

.yacht-scroll-container {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 4px 4px 20px 0;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

.yacht-scroll-container::-webkit-scrollbar {
  display: none;
}

.yacht-card {
  min-width: 220px;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
  cursor: pointer;
}

.yacht-image-container {
  position: relative;
  height: 153px;
  overflow: hidden;
  border-radius: 8px;
}

.yacht-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease-in-out;
  border-radius: 8px;
}

.yacht-card .yacht-image-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
  border-radius: 8px;
  transition: background-color 0.3s ease-in-out;
  z-index: 1;
}

.yacht-card:hover .yacht-image-container img {
  transform: scale(1.05);
}

.yacht-card:hover .yacht-image-container::before {
  background-color: rgba(0, 0, 0, 0.2);
}

.yacht-info {
  padding: 8px;
}

.yacht-name {
  color: #0f1a3a;
  font-family: var(--font-saol);
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 38px; /* 190% */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.yacht-rating {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 8px;
}

.stars {
  color: #ffc107;
  font-size: 14px;
}

.rating-score {
  font-size: 14px;
  color: #666;
}

.yacht-location,
.yacht-specs {
  color: #37405b;
  font-family: var(--font-whyte);
  font-size: 14px;
  font-style: normal;
  font-weight: 300;
  line-height: 24px; /* 171.429% */
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.yacht-location span {
  max-width: 220px; 
  overflow: hidden;
   text-overflow: ellipsis; 
   white-space: nowrap;
     font-family: var(--font-whyte);
  font-size: 14px;
  font-style: normal;
  font-weight: 300;
  line-height: 24px; /* 171.429% */
}

.yacht-location svg {
  width: 12px;
  min-width: 12px;
  height: 12px;
}

.spec-separator {
  font-size: 6px;
}

.yacht-price {
  display: flex;
  align-items: normal;
  gap: 4px;
}

.price-amount {
  color: #0f1a3a;
  font-family: var(--font-saol);
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 30px; /* 150% */
}

.price-period {
  color: #37405b;
  font-family: var(--font-whyte);
  font-size: 14px;
  font-style: normal;
  font-weight: 300;
  line-height: 24px; /* 171.429% */
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
}

.price-period:hover + .price-info span {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(-16px);
}

.price-info {
      position: relative;
      display: inline-flex;
      align-items: center;
      cursor: pointer;
    transition: all 0.3s ease;
        }

        
        .price-info span {
            opacity: 0;
            visibility: hidden;
            position: absolute;
            bottom: 75%;
            left: 50%;
            transform: translateX(-50%) translateY(-8px);
            background: #0F1A3A;
            color: #F6F4E7;
            padding: 8px 12px;
            border-radius: 8px;
            white-space: nowrap;
            font-family: var(--font-whyte);
            font-size: 12px;
            font-style: normal;
            font-weight: 500;
            line-height: 24px; /* 200% */
            letter-spacing: 0.12px;
            pointer-events: none;
            transition: all 0.3s ease;
            z-index: 10;
        }

        .price-info span::after {
            content: '';
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            border: 6px solid transparent;
            border-top-color: #333;
        }

        .price-info:hover span {
            opacity: 1;
            visibility: visible;
            transform: translateX(-50%) translateY(-16px);
        }

        .price-info svg {
            color: #6c757d;
            transition: color 0.3s ease;
            position: relative;
            top: -2px;
        }

        .price-info:hover svg {
            color: #495057;
        }

        .info-tooltip {
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.info-tooltip.visible {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(-16px);
}

.price-info svg {
  width: 13px;
  height: 13px;
  color: #0f1a3a;
}

@media (min-width: 1024px) {
  .featured-section-wrapper {
    padding: 0;
  }

  .yacht-card {
    min-width: 253px;
  }
  .yacht-image-container{
    height: 176px;
  }
}

.yacht-special {
  position: absolute;
  top: 8px;
  right: 8px;
  border-radius: 4px;
  background: #FCFBF7;
  width: 156px;
  min-height: 28px;
  overflow: hidden;
  color: #26428B;
  text-align: center;
  text-overflow: ellipsis;
  font-family: var(--font-whyte);
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 27px; /* 200% */
  letter-spacing: 0.12px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  z-index: 5;
}

.yacht-special b,
.yacht-special strong {
  font-weight: 500;
}