/* ==========================================
   1. DE BASIS VAN DE KAART (CARD BASE)
   ========================================== */
.boat-tile {
  /* CRUCIAAL: Dit zorgt ervoor dat de onzichtbare link BINNEN de kaart blijft */
  position: relative !important; 
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.boat-tile:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15) !important;
  cursor: pointer;
}

/* Ruimte rondom de gehele view container */
.view-boats {
  padding: 20px 15px;
}

/* ==========================================
   2. AFBEELDING STYLING
   ========================================== */
/* Container voor de afbeelding met een vaste hoogte */
.boat-tile .boat-tile-image {
  position: relative;
  width: 100%;
  height: 220px; 
  background-color: #f8f9fa; 
  border-top-left-radius: calc(0.375rem - 1px);
  border-top-right-radius: calc(0.375rem - 1px);
  overflow: hidden;
}

/* Zorgt dat de afbeelding netjes de top van de card vult */
.boat-tile .boat-tile-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover; /* Wijzig naar 'contain' als u de foto niet wilt afsnijden */
  border-top-left-radius: calc(0.375rem - 1px);
  border-top-right-radius: calc(0.375rem - 1px);
}

/* ==========================================
   3. CONFLIKTEN OPLOSSEN (PREVENT CONFLICTS)
   ========================================== */
/* Schakel de originele links van afbeelding en titel UIT zodat ze de stretched-link niet blokkeren */
.boat-tile .boat-tile-image a,
.boat-tile .views-field-field-image a,
.boat-tile .views-field-title a,
.boat-tile h3 a {
  position: static !important;
}

/* Voorkom dat een eventuele 'Lees meer' knop raar reageert */
.boat-tile .btn {
  position: relative;
  z-index: 2; 
  pointer-events: none; 
}

/* ==========================================
   4. DE ONZICHTBARE LINK (THE MAGIC STRETCH)
   ========================================== */
/* Dit trekt de link van de titel als een dwingende, bovenste laag over de héle kaart (.boat-tile) */
.boat-tile .card-link a::after {
  position: absolute !important;
  top: 0 !important; 
  right: 0 !important; 
  bottom: 0 !important; 
  left: 0 !important;
  z-index: 9999 !important; /* Forceert de link naar de allerbovenste laag */
  content: "" !important;
  display: block !important;
  cursor: pointer !important;
}

/* 1. Verwijder de standaard lijst-styling en zet de knoppen in een rij */
.bef-links ul {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px; /* Ruimte tussen de knoppen */
  padding-left: 0 !important;
  margin-bottom: 0 !important;
  list-style: none !important;
}

/* 2. Style de links zodat ze eruitzien als Bootstrap 'btn-outline-primary' knoppen */
.bef-links ul li a.bef-link {
  display: inline-block;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  color: #0d6efd; /* Bootstrap Primary Blauw */
  background-color: transparent;
  border: 1px solid #0d6efd;
  border-radius: 4px;
  text-decoration: none !important;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
}

/* 3. Hover-effect voor de knoppen */
.bef-links ul li a.bef-link:hover {
  color: #ffffff !important;
  background-color: #0b5ed7; /* Iets donkerder blauw */
  border-color: #0b5ed7;
}

/* 4. Actieve / Geselecteerde knop styling (Bootstrap 'btn-primary' effect) */
.bef-links ul li a.bef-link.bef-link--selected {
  color: #ffffff !important;
  background-color: #0d6efd !important;
  border-color: #0d6efd !important;
  font-weight: 600;
  box-shadow: 0 2px 4px rgba(13, 110, 253, 0.2);
}

.bef-exposed-form .form--inline > .form-item, .bef-exposed-form .form--inline .js-form-wrapper > .form-item {
    float: none;
}

/* Optioneel: Verberg de '- Any -' (alle boten) optie als je die niet wilt tonen, 
   of laat deze styling staan zodat hij er ook als knop uitziet */
#edit-field-categorie-value-all {
  /* display: none !important; */ /* Haal de commentaar-slashes weg als je '- Any -' wilt verbergen */
}

.price-tag .old-price {
  text-decoration: line-through;
  color: #6c757d; /* Bootstrap grijs */
}