/* Yachts Loop Pro (+Icons) стилі */
.yacht-filter {margin-bottom:20px;text-align:center;}
.yacht-filter button {margin:0 5px;padding:8px 16px;border:1px solid #a78769;background:#fff;cursor:pointer;transition:.3s; color:#a78769;}
.yacht-filter button.active,.yacht-filter button:hover {background:#a78769;color:#fff;}

.yachts-grid {display:grid;grid-template-columns:repeat(auto-fill,minmax(350px,1fr));gap:30px;}
.yacht-card {background:#fff;border:0px solid #ddd;border-radius:0px;padding:0px;text-align:center;    box-shadow: 2px 2px 10px 2px rgba(0, 0, 0, 0.5);}

.yacht-thumb img {width:100%;height:250px;object-fit:cover;border-radius:0px;}

.yacht-meta {display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:12px 0;font-size:14px;color:#444;}
.meta-item {display:inline-flex;align-items:center;gap:6px;}
.meta-item:after {
    content: "";
    border-color: #a78769;
    border-width: 0;
    border-inline-start-width: 1px;
    border-style: solid;
    height: 100%;
    inset-inline-end: -8px;
    inset-inline-start: auto;
    position: relative;
    width: auto;
}
.meta-item:last-child:after {
    border: 0px;
}
.ylp-icon {fill:#a78769;display:inline-block;vertical-align:middle;}

.yacht-title {font-size:22px;text-transform:uppercase;margin:10px 0;}
h3.yacht-title {
    font-family: "Montserrat", Sans-serif;
    font-size: 25px;
    font-weight: 700;
    text-transform: uppercase;
}
.yacht-built {margin:8px 0;color:#333; text-transform: uppercase;}

.yacht-info {display:flex;justify-content:space-around;gap:10px;margin:15px 0;flex-wrap:wrap;}
.info-box {display:block;align-items:center;gap:8px;font-size:14px;}
.info-icon {object-fit:contain;object-fit: contain; width: 35px; transition-duration: 0.3s;
    margin: 0 auto;}
.info-label {text-transform: uppercase;display: block;}

.yacht-rates {display:flex;align-items:center;gap:8px;background:#eaeaec;padding:20px;margin:10px;border-radius:0px;justify-content:center;}
.rates-text {
  display: flex;
  flex-direction: column; /* переносимо текст у стовпчик замість <br> */
  line-height: 1.4;
  text-align: left;
}
.info-icon-rates {margin:0}
.yaht-price {
    /* display: block; */
    text-transform: none;
}

.yacht-btn .btn {display:inline-block;padding:10px 20px;border:1px solid #a78769;background:#a78769;color:#fff;text-decoration:none;transition:.3s;width: 100%;}
.yacht-btn .btn:hover {background:#fff;color:#a78769;}

.yacht-pagination {
  text-align: center;
  margin-top: 20px;
}

.yacht-pagination .page-numbers {
  display: inline-block;
  margin: 0 4px;
  padding: 6px 12px;
  color: #8c6239;
  text-decoration: none;
  font-weight: 400;
  border-radius: 4px;
}

.yacht-pagination .page-numbers.current {
  font-weight: 700;
  color: #000;
}

.yacht-pagination .page-numbers:hover {
  color: #000;
}

.yacht-pagination .prev,
.yacht-pagination .next {
  font-weight: 600;
}

.yacht-empty {
  text-align: center;
  padding: 40px 20px;
  background: #f9f9f9;
  border: 1px dashed #ccc;
  border-radius: 8px;
  font-size: 18px;
  color: #555;
  margin: 20px 0;
}

.yacht-layout {
  display: flex;
  gap: 20px;
}

.yacht-sidebar {
  flex: 0 0 280px; /* ширина фільтра */
  background: #f5f5f5;
  padding: 20px;
}

.yacht-content {
  flex: 1;
}
#apply-filters,
#reset-filters {
  display: inline-block;
  margin-top: 10px;
  padding: 8px 14px;
  border: none;
  cursor: pointer;
  border-radius: 4px;
  font-size: 14px;
}

#apply-filters {
  background: #0073aa;
  color: #fff;
}

#reset-filters {
  background: #ccc;
  color: #000;
  margin-left: 6px;
}

.filter-item label

 {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: start;
    text-transform: uppercase;
}

.filter-item {
	margin-bottom: 10px;
	margin-top: 10px;
}

.noUi-connect {
background:#a78769!important;}
	
.noUi-horizontal {
    height: 8px!important;
}
.noUi-horizontal .noUi-handle {
    width: 14px!important;
    height: 14px!important;
    right: -10px!important;
    top: -5px!important;
}


.noUi-handle:after, .noUi-handle:before {
	    height: 0px!important;
    width: 0px!important;
}

.yacht-card.yacht-hidden {
    border: 3px solid #ff0000 !important;
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.3);
    position: relative;
}

.yacht-card.yacht-hidden::after {
    content: "HIDDEN";
    position: absolute;
    top: 8px;
    right: 8px;
    background: #ff0000;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    padding: 4px 6px;
    border-radius: 3px;
}


/* На мобільних (наприклад <768px) */
@media (max-width: 767px) {
  .yacht-layout {
    flex-direction: column;
  }
  
  .yacht-sidebar {
  flex: 0; /* ширина фільтра */

}
   .yacht-filters {
    display: none;
  }
  .yacht-filters.active {
    display: block;
  }

  .filter-title {
    cursor: pointer;
    background: #eee;
    padding: 10px;
    border: 1px solid #ccc;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .filter-title .arrow {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-right: 2px solid #333;
    border-bottom: 2px solid #333;
    transform: rotate(45deg); /* Стрілка вниз */
    transition: transform 0.3s ease;
    margin-left: 8px;
  }

  .filter-title.open .arrow {
    transform: rotate(-135deg); /* Стрілка вгору */
  }

}