/* ======================================================
   GLOBAL LOGO & IMAGES
   ====================================================== */
@import url("/themes/custom/b5subtheme/css/views/admin_uitgelicht/views.mijn_uitlichtingen.admin.css");


.site-logo img,
.site-branding__logo img,
.navbar-brand img {
  max-height: 48px;
  height: auto !important;
  width: auto;
}

/* voorkom height:100% op alle afbeeldingen */
img {
  height: auto;
}

/* Gespecialiseerde foto’s in schepen-views */
.view-schepen .mmsi-card__photo img,
.view-missing-mmsi .mmsi-card__photo img,
.node--type-schepen-scr-feed .schepen-photos img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ======================================================
   NAVBAR / HEADER
   ====================================================== */

.navbar .container.d-flex {
  align-items: center;
}

/* Desktop: altijd uitgebreide navigatie, geen hamburger */
@media (min-width: 992px) {
  .navbar .navbar-collapse {
    display: flex !important;
  }

  .navbar .navbar-toggler {
    display: none !important;
  }

  #navbarSupportedContent .region-nav-main {
    display: flex;
    align-items: center;
    width: 100%;
  }

  #navbarSupportedContent .region-nav-main nav.menu--main {
    margin-right: auto;
  }

  #navbarSupportedContent .region-nav-main nav.menu--account {
    margin-left: auto;
  }

  #navbarSupportedContent .region-nav-main .navbar-nav {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    margin: 0;
  }

  .region-nav-branding {
    margin-right: 16px;
  }
}

/* Mobiel: menu-items onder elkaar in hamburger */
@media (max-width: 991.98px) {
  #navbarSupportedContent .region-nav-main .navbar-nav {
    flex-direction: column;
    gap: 0.25rem;
    margin: 0;
    padding: 0.5rem 0;
  }

  /* LET OP: mag afbreken, anders kan de pagina breder worden dan het scherm */
  #navbarSupportedContent .region-nav-main .nav-link {
    white-space: normal;
  }
}

.region-nav-branding img.img-fluid {
  margin-right: 12px;
}

.region-nav-branding img {
  max-height: 64px;
  width: auto;
  height: auto;
}

/* ======================================================
   OVER SHIP2BUY BLOK
   ====================================================== */

.s2b-about {
  background: #f8fafc;
  color: #111;
  padding: 2.5rem 1rem;
  border-top: 1px solid #e5e7eb;
}

.s2b-about__inner {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.s2b-about h2 {
  font-size: clamp(1.6rem, 4vw, 2rem);
  font-weight: 700;
  margin-bottom: 1rem;
  color: #0f172a;
}

.s2b-about p {
  font-size: 1.05rem;
  line-height: 1.65;
  color: #334155;
  margin-bottom: 1.2rem;
}

/* ======================================================
   GENERIEKE SECTIONS
   ====================================================== */

.s2b-section--dark {
  --bg: #0b1220;
  --fg: #e6e9f0;
  --muted: #b7c0d1;
  --bd: rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, #0a0f1a 0%, #0b1220 100%);
  color: var(--fg);
  padding: 2.25rem 1rem;
  border-top: 1px solid var(--bd);
  border-bottom: 1px solid var(--bd);
}

.s2b-section--light {
  --bg: #f6f8fb;
  --fg: #1f2937;
  --bd: rgba(0, 0, 0, 0.06);
  background: var(--bg);
  color: var(--fg);
  padding: 2.25rem 1rem;
  border-top: 1px solid var(--bd);
  border-bottom: 1px solid var(--bd);
}

.s2b-section--random {
  background: #f6f8fb;
  color: #1f2937;
  padding: 2.25rem 1rem;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.s2b-section__inner {
  max-width: 1200px;
  margin: 0 auto;
}

.s2b-h2 {
  font-size: clamp(1.3rem, 3.2vw, 1.6rem);
  margin: 0 0 1rem;
  color: #fff;
}

/* Titels in lichte blokken donkerder */
.s2b-section--light .s2b-h2,
.s2b-section--random .s2b-h2,
section.s2b-section--light .s2b-section__inner .s2b-h2 {
  color: #0f172a;
  font-weight: 600;
  letter-spacing: 0.2px;
}

/* ======================================================
   MEEST BEKEKEN SLIDER
   ====================================================== */

.schepen-slider .s2b-cards--featured {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  gap: 1rem;
  padding-bottom: 0.5rem;
  scrollbar-width: none;
  cursor: grab;
}

.schepen-slider .s2b-cards--featured::-webkit-scrollbar {
  display: none;
}

.schepen-slider .s2b-cards--featured.is-dragging {
  cursor: grabbing;
}

/* Mobiel: 1 hele + stukje volgende */
@media (max-width: 768px) {
  .schepen-slider .s2b-card--featured {
    flex: 0 0 calc(100% / 1.5);
    max-width: 100%;
    scroll-snap-align: start;
  }
}

/* Tablet: ±2 kaarten */
@media (min-width: 769px) and (max-width: 1199px) {
  .schepen-slider .s2b-card--featured {
    flex: 0 0 45%;
    max-width: 420px;
    scroll-snap-align: start;
  }
}

/* Desktop: ±3 kaarten */
@media (min-width: 1200px) {
  .schepen-slider .s2b-card--featured {
    flex: 0 0 30%;
    max-width: 380px;
    scroll-snap-align: start;
  }
}

/* Verticale ruimte resetten in slider */
.schepen-slider,
.schepen-slider .view-content,
.schepen-slider .s2b-section,
.schepen-slider .s2b-section--featured,
.schepen-slider .s2b-section__inner,
.schepen-slider .s2b-cards,
.schepen-slider .s2b-cards--featured {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.schepen-slider {
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
}

.schepen-slider #mv-title {
  font-size: 1.4rem;
  font-weight: 600;
  margin: 0 0 0.75rem 0 !important;
}

.schepen-slider .s2b-slider-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.schepen-slider .s2b-slider-nav {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

/* Mooie ronde pijltjes */
.schepen-slider .s2b-slider__arrow {
  border-radius: 999px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  font-size: 1.15rem;
  line-height: 1;
  border: 1px solid rgba(148, 163, 184, 0.55);
  background: radial-gradient(circle at 30% 20%, #1f2937, #020617 85%);
  color: #e5e7eb;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.6);
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.15s ease,
    opacity 0.15s ease;
}

.schepen-slider .s2b-slider__arrow:hover:not(:disabled) {
  background: radial-gradient(circle at 30% 20%, #1d4ed8, #020617 90%);
  border-color: #60a5fa;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.85);
  transform: translateY(-1px) scale(1.03);
}

.schepen-slider .s2b-slider__arrow:active:not(:disabled) {
  transform: translateY(0) scale(0.97);
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.7);
}

/* Disabled = subtiel */
.schepen-slider .s2b-slider__arrow:disabled {
  opacity: 0.35;
  cursor: default;
  box-shadow: none;
  transform: none;
}

/* Geen pijltjes op tablet + mobiel */
@media (max-width: 991.98px) {
  .schepen-slider .s2b-slider-nav {
    display: none;
  }
}

/* ======================================================
   VIEWCOUNT PILL
   ====================================================== */

.s2b-viewcount {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
  padding: 0.2rem 0.8rem !important;
  border-radius: 999px !important;
  background-color: #ffffff !important;
  color: #0b1120 !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  box-shadow:
    0 0 0 1px rgba(15, 23, 42, 0.08),
    0 6px 16px rgba(15, 23, 42, 0.25) !important;
}

/* Binnen pill alles zelfde kleur */
.s2b-viewcount *,
.s2b-viewcount .bi,
.s2b-viewcount svg {
  color: inherit !important;
  fill: currentColor !important;
}

/* ======================================================
   BROKER LOGO (makelaar cards)
   ====================================================== */

.broker-card .bc-logo {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.5rem 0;
}

.broker-card .broker-logo-img {
  width: 100%;
  max-width: 50%;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .broker-card .broker-logo-img {
    max-width: 60%;
  }
}

/* ======================================================
   ULTRA ADS – SIDEBAR BLOCKS (block_1 & block_2)
   ====================================================== */

/* Kaart-stijl voor sidebar-blocks */
#block-b5subtheme-views-block-ultra-ads-block-1 .s2b-ultra-ads-item a,
#block-b5subtheme-views-block-ultra-ads-block-2 .s2b-ultra-ads-item a,
.view-ultra-ads.view-display-id-block_2 .s2b-ultra-ads-item a {
  display: block;
  background: #fff;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.16);
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.16);
}

#block-b5subtheme-views-block-ultra-ads-block-1 .s2b-ultra-ads-item img,
#block-b5subtheme-views-block-ultra-ads-block-2 .s2b-ultra-ads-item img,
.view-ultra-ads.view-display-id-block_2 .s2b-ultra-ads-item img {
  display: block;
  width: 100% !important;
  height: 120px !important;     /* pas aan 100–150 naar smaak */
  object-fit: contain !important;
  object-position: center;
  background: #ffffff;
}

/* Sidebar-blocks uit op mobiel/tablet */
@media (max-width: 991.98px) {
  #block-b5subtheme-views-block-ultra-ads-block-1,
  #block-b5subtheme-views-block-ultra-ads-block-2,
  .view-ultra-ads.view-display-id-block_1 {
    display: none !important;
  }
}

/* ======================================================
   ULTRA ADS – INLINE IN NODE (.s2b-node-ad)
   ====================================================== */

.s2b-node-ad {
  margin: 14px 0 18px;
}

/* view-wrappers binnen node: geen extra margins/padding */
.s2b-node-ad .view-ultra-ads,
.s2b-node-ad .view-ultra-ads .view-content,
.s2b-node-ad .view-ultra-ads .views-row {
  margin: 0 !important;
  padding: 0 !important;
}

/* kaart / container binnen node */
.s2b-node-ad .s2b-ultra-ads-item a {
  display: block;
  background: #fff;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.16);
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.16);
}

/* logo-afbeelding inline in node */
.s2b-node-ad .s2b-ultra-ads-item img {
  display: block;
  width: 100%;
  height: 70px;
  object-fit: cover;
  object-position: center;
}

@media (min-width: 992px) {
  .s2b-node-ad .s2b-ultra-ads-item img {
    height: 90px;
  }
}

/* inline ads ALLEEN op mobiel/tablet */
@media (min-width: 992px) {
  .s2b-node-ad {
    display: none !important;
  }
}

/* ======================================================
   ULTRA ADS – IMPRESSION PIXEL (neemt geen ruimte)
   ====================================================== */

.s2b-imp-pixel {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* veld in Ultra Ads view / node dat alleen de pixel bevat */
.view-ultra-ads .views-field-nothing-1,
.view-ultra-ads .views-field-nothing-1 .field-content,
.s2b-node-ad .views-field-nothing-1,
.s2b-node-ad .views-field-nothing-1 .field-content {
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
  font-size: 0 !important;
  border: 0 !important;
}

/* ======================================================
   ULTRA ADS – INLINE ADS LOGICA IN SCHEPEN-OVERZICHT
   (view-schepen-verkoop--inline-ads)
   ====================================================== */

/* Basis: kaart en advertentie vullen hun gridcel */
.view-schepen-verkoop--inline-ads .s2b-ship-row,
.view-schepen-verkoop--inline-ads .s2b-ads-inline {
  width: 100%;
  max-width: 100%;
}

/* Advertenties nemen altijd een volledige rij in het grid */
.view-schepen-verkoop--inline-ads .s2b-ads-inline {
  grid-column: 1 / -1;
  margin: 0.5rem 0 1rem;
}

/* < 576px: na ELK schip een advertentie tonen */
@media (max-width: 575.98px) {
  .view-schepen-verkoop--inline-ads .s2b-ads-inline {
    display: block !important;
  }
}

/* 576–991px: alleen ads na even schepen (2,4,6,...) */
@media (min-width: 576px) and (max-width: 991.98px) {
  /* eerst alles uit */
  .view-schepen-verkoop--inline-ads .s2b-ads-inline {
    display: none !important;
  }

  /* dan specifiek de even-advertenties weer aan */
  .view-schepen-verkoop--inline-ads .s2b-ads-inline.s2b-ads--after-even {
    display: block !important;
  }
}

/* Vanaf 992px: inline ads uit, sidebar neemt over */
@media (min-width: 992px) {
  .view-schepen-verkoop--inline-ads .s2b-ads-inline {
    display: none !important;
  }
}

/* ======================================================
   ULTRA ADS – GENERIEKE WRAPPER (buiten node / views)
   + FRONT-PAGE SLIDER
   ====================================================== */

/* Basis: wrapper verticaal stapelen (bijv. in sidebars / inline) */
.s2b-ultra-ads-wrapper {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.s2b-ultra-ads-wrapper .views-row {
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  padding: 8px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.s2b-ultra-ads-wrapper img {
  display: block;
  max-width: 100%;
  max-height: 120px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Frontpage slider: horizontale rij (gebruik class .s2b-ads-slider op de view) */
.s2b-ads-slider .s2b-ultra-ads-wrapper,
.s2b-ultra-ads-wrapper.s2b-ads-slider {
  flex-direction: row;
}

.s2b-ads-slider {
  margin: 1.5rem 0 2rem;
}

/* ======================================================
   ULTRA ADS – SIDEBAR LAYOUT (.s2b-ads-sidebar)
   ====================================================== */

.s2b-ads-sidebar {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Elk advertentiekaartje in de sidebar */
.s2b-ads-sidebar .views-row {
  border: 1px solid rgba(0, 0, 0, 0.08);  /* lichte rand */
  border-radius: 12px;
  padding: 8px;
  margin-bottom: 0;                        /* gap regelt afstand */
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Logo netjes gecentreerd */
.s2b-ads-sidebar .views-row img {
  display: block;
  margin: 0 auto;
}

/* ======================================================
   MarineTraffic kaart hoogte
   ====================================================== */

.marinetraffic-frame {
  height: 800px;          /* hier speel je mee: 400 / 600 / 800 / 1000 */
}

.marinetraffic-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* ==== Ultra Ads slider (block_3) – responsive breedtes ==== */

/* Mobiel: 1,5 banner in beeld */
@media (max-width: 575.98px) {
  .view-id-ultra_ads.view-display-id-block_3 .view-content {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: 1rem;
    padding: 0 1rem;
    scrollbar-width: none;
  }

  .view-id-ultra_ads.view-display-id-block_3 .view-content::-webkit-scrollbar {
    display: none;
  }

  .view-id-ultra_ads.view-display-id-block_3 .view-content > .views-row {
    flex: 0 0 calc(100% / 1.5);  /* 1 hele + stukje volgende */
    scroll-snap-align: start;
  }
}

/* Tablet: ~4,5 banners in beeld */
@media (min-width: 576px) and (max-width: 991.98px) {
  .view-id-ultra_ads.view-display-id-block_3 .view-content {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: 1rem;
    padding: 0 1rem;
    scrollbar-width: none;
  }

  .view-id-ultra_ads.view-display-id-block_3 .view-content::-webkit-scrollbar {
    display: none;
  }

  .view-id-ultra_ads.view-display-id-block_3 .view-content > .views-row {
    flex: 0 0 calc(100% / 4.5);  /* 4 hele + stukje van de 5e */
    scroll-snap-align: start;
  }
}

/* Desktop: slider verbergen (je hebt daar sidebar-ads) */
@media (min-width: 992px) {
  .view-id-ultra_ads.view-display-id-block_3 {
    display: none !important;
  }
}

/* ============================================
   Ultra Ads – mobiele/ tablet slider
   voor .s2b-ads-front-mobile (block_2)
   ============================================ */

/* Basiskaartjes: zelfde stijl als sidebar, maar straks horizontaal */
.s2b-ads-front-mobile .view-content > .views-row {
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  padding: 8px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.s2b-ads-front-mobile .view-content > .views-row img {
  display: block;
  max-width: 100%;
  max-height: 120px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* === MOBIEL: 1,5 advertentie in beeld === */
@media (max-width: 575.98px) {
  .s2b-ads-front-mobile .view-content {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: 1rem;
    padding: 0 1rem;
    scrollbar-width: none;
  }

  .s2b-ads-front-mobile .view-content::-webkit-scrollbar {
    display: none;
  }

  .s2b-ads-front-mobile .view-content > .views-row {
    flex: 0 0 calc(100% / 1.5);  /* 1 hele + stukje volgende */
    scroll-snap-align: start;
  }
}

/* === TABLET: ~4,5 advertenties in beeld === */
@media (min-width: 576px) and (max-width: 991.98px) {
  .s2b-ads-front-mobile .view-content {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: 1rem;
    padding: 0 1rem;
    scrollbar-width: none;
  }

  .s2b-ads-front-mobile .view-content::-webkit-scrollbar {
    display: none;
  }

  .s2b-ads-front-mobile .view-content > .views-row {
    flex: 0 0 calc(100% / 3.5);  /* 4 hele + stukje 5e */
    scroll-snap-align: start;
  }
}

/* === DESKTOP: als je deze variant alleen voor mobiel/tablet wilt === */
@media (min-width: 992px) {
  .s2b-ads-front-mobile {
    display: none !important;
  }
}

/* ============================================
   INLINE ULTRA ADS TUSSEN SCHEPEN = SLIDER
   (view-schepen-verkoop--inline-ads)
   ============================================ */

/* Advertentie-blok → hele rij in het grid */
.view-schepen-verkoop--inline-ads .s2b-ads-inline {
  grid-column: 1 / -1;
  margin: 8px 0;
}

/* Binnen inline-blok: Ultra Ads view-kaartjes */
.view-schepen-verkoop--inline-ads .s2b-ads-inline .view-ultra-ads .view-content > .views-row {
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  padding: 8px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.view-schepen-verkoop--inline-ads .s2b-ads-inline .view-ultra-ads .view-content > .views-row img {
  display: block;
  max-width: 100%;
  max-height: 120px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* MOBIEL: 1,5 banner in beeld */
@media (max-width: 575.98px) {
  .view-schepen-verkoop--inline-ads .s2b-ads-inline .view-ultra-ads .view-content {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: 1rem;
    padding: 0 1rem;
    scrollbar-width: none;
  }

  .view-schepen-verkoop--inline-ads .s2b-ads-inline .view-ultra-ads .view-content::-webkit-scrollbar {
    display: none;
  }

  .view-schepen-verkoop--inline-ads .s2b-ads-inline .view-ultra-ads .view-content > .views-row {
    flex: 0 0 calc(100% / 1.5);
    scroll-snap-align: start;
  }
}

/* TABLET: ~4,5 banners */
@media (min-width: 576px) and (max-width: 991.98px) {
  .view-schepen-verkoop--inline-ads .s2b-ads-inline .view-ultra-ads .view-content {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: 1rem;
    padding: 0 1rem;
    scrollbar-width: none;
  }

  .view-schepen-verkoop--inline-ads .s2b-ads-inline .view-ultra-ads .view-content::-webkit-scrollbar {
    display: none;
  }

  .view-schepen-verkoop--inline-ads .s2b-ads-inline .view-ultra-ads .view-content > .views-row {
    flex: 0 0 calc(100% / 3.5);
    scroll-snap-align: start;
  }
}

/* DESKTOP: inline ads uit (sidebar neemt over) */
@media (min-width: 992px) {
  .view-schepen-verkoop--inline-ads .s2b-ads-inline {
    display: none !important;
  }
}

/* ============================================
   DARK MODE – Exposed filter buttons leesbaar
   Alleen knoppen: Wis filters / Meer filters
   ============================================ */

.is-dark .s2b-exposed .btn-outline-secondary,
.is-dark .s2b-exposed .s2b-actions .btn-outline-secondary,
.is-dark .s2b-exposed .s2b-actions .s2b-theme-toggle,
.is-dark .s2b-exposed .s2b-actions .js-s2b-theme-toggle {
  background-color: #0f172a !important; /* donker blauw/zwart */
  color: #e5e7eb !important;            /* lichte tekst */
  border-color: #334155 !important;     /* iets lichtere rand */
}

/* Hover/focus: iets lichter knopje */
.is-dark .s2b-exposed .btn-outline-secondary:hover,
.is-dark .s2b-exposed .btn-outline-secondary:focus,
.is-dark .s2b-exposed .s2b-actions .btn-outline-secondary:hover,
.is-dark .s2b-exposed .s2b-actions .btn-outline-secondary:focus,
.is-dark .s2b-exposed .s2b-actions .s2b-theme-toggle:hover,
.is-dark .s2b-exposed .s2b-actions .s2b-theme-toggle:focus,
.is-dark .s2b-exposed .s2b-actions .js-s2b-theme-toggle:hover,
.is-dark .s2b-exposed .s2b-actions .js-s2b-theme-toggle:focus {
  background-color: #1e293b !important;
  border-color: #475569 !important;
  color: #f9fafb !important;
}

/* ============================================
   DARK MODE – "Meer/Minder filters" knop
   (btn-outline-primary s2b-toggle)
   ============================================ */

.is-dark .s2b-toggle.btn-outline-primary,
.is-dark .s2b-toggle.btn-outline-primary:hover,
.is-dark .s2b-toggle.btn-outline-primary:focus {
  background-color: #0f172a !important;  /* donker knopvlak */
  color: #e5e7eb !important;             /* lichte tekst */
  border-color: #334155 !important;      /* nette rand */
}

/* ============================================
   FAVORIET HARTJE
   ============================================ */

.s2b-heart-btn {
  background: none;
  border: none;
  padding: 0;
  margin-left: 0.5rem;
  cursor: pointer;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}

/* Voor eigen SVG-icoon */
.s2b-heart-btn .s2b-heart {
  width: 20px;
  height: 20px;
  display: inline-block;
}

.s2b-heart-btn .s2b-heart path {
  fill: currentColor;
}

/* Voor Bootstrap icon .bi-heart, als je die gebruikt */
.s2b-heart-btn .bi-heart {
  font-size: 1.1rem;
}

/* In de card-actiebar: rood hartje */
.mmsi-card__actions .s2b-heart-btn {
  color: #dc3545;
}

/* ============================================
   LOGIN POPUP OVERLAY
   ============================================ */

/* LOCK SCROLL ALS LOGIN-POPUP OPEN IS */
html.s2b-no-scroll,
body.s2b-no-scroll {
  overflow: hidden !important;
  width: 100%;
  overscroll-behavior: contain;
}

/* LOGIN POPUP OVERLAY – DEFINITIEF */

.s2b-login-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 16px;                 /* ruimte tot de randen */
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.6);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.s2b-login-overlay.is-active {
  display: flex;
}

/* Popup zelf – altijd binnen de viewport, geen horizontale overflow */
.s2b-login-dialog {
  box-sizing: border-box;
  width: 100%;
  max-width: 480px;              /* breedte op desktop */
  max-height: 100vh;             /* nooit hoger dan het scherm */
  margin: 0;
  background: #ffffff;
  border-radius: 16px;
  padding: 20px 18px 16px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
  position: relative;
  overflow-y: auto;              /* inhoud scrollt binnen de popup */
}

/* Kleine schermen: iets compacter, maar nog steeds binnen het scherm */
@media (max-width: 576px) {
  .s2b-login-overlay {
    padding: 10px;
  }

  .s2b-login-dialog {
    max-width: 100%;
    border-radius: 12px;
    padding: 16px 14px 12px;
  }
}

/* Sluit-knop (X) */
.s2b-login-close {
  position: absolute;
  right: 10px;
  top: 6px;
  border: none;
  background: transparent;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}

.s2b-login-dialog h5 {
  margin-bottom: 0.75rem;
}

.s2b-login-dialog p {
  margin-bottom: 0.5rem;
}

.s2b-login-register-text a {
  font-weight: 500;
}

.s2b-login-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

/* ============================================
   Hartje op node-pagina (boven de content)
   ============================================ */

.s2b-node-heart-wrapper {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0.5rem;
}

/* ============================================
   ANONIEM FAVORIET-HARTJE (login-popup)
   Altijd rood, ook in dark mode
   ============================================ */

.s2b-heart-btn--login {
  background: none;
  border: none;
  padding: 0;
  margin-left: 0.5rem;
  cursor: pointer;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Grootte icoon (SVG of .bi-heart) */
.s2b-heart-btn--login .s2b-heart,
.s2b-heart-btn--login .bi-heart {
  width: 20px;
  height: 20px;
  font-size: 1.1rem;
}

/* Kleur alleen voor anonieme hartjes */
.s2b-heart-btn--login,
.s2b-heart-btn--login .s2b-heart,
.s2b-heart-btn--login .s2b-heart path,
.s2b-heart-btn--login .bi-heart {
  color: #dc3545 !important;
  fill: #dc3545 !important;
}

/* Klein hover-effect (optioneel) */
.s2b-heart-btn--login:hover {
  transform: scale(1.05);
}

/* ===== OVERRIDE: makelaarslogo groter op scheeps-node ===== */
/* Plak dit blok ONDERAAN je CSS. Dit overschrijft alles erboven. */

:root{
  /* Grotere logo-hoogte + bredere logokolom op desktop */
  --logo-d: 150px;           /* hoogte makelaarslogo (speel met 140/160/180) */
  --broker-logo-col-w: 240px;/* breedte logokolom in brede layout */
}

/* Basis: logo overal wat royaler */
.node--type-schepen .broker-logo-img{
  display: block;
  margin-inline: auto;
  height: var(--logo-d) !important;
  max-height: var(--logo-d) !important;
  width: auto !important;
  max-width: 100% !important;
  object-fit: contain;
  background: color-mix(in oklab, var(--card, #fff), #fff 4%);
  border: 1px solid var(--line, #e6e6e6);
  border-radius: 10px;
  padding: 8px;
}

/* Desktop: kolom mag niet knijpen en logo mag lekker groot zijn */
@media (min-width: 992px){
  .node--type-schepen .bc-logo{
    max-height: none !important;
    height: auto !important;
    text-align: left !important;
    align-self: flex-start !important;
  }

  .node--type-schepen .bc-logo .broker-logo-img{
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: var(--logo-d) !important;
    object-fit: contain;
    margin-inline: 0 !important;
  }
}

/* ===========================================
   Social Media Platform Links – alleen iconen
   kleiner + gecentreerd in het block
   =========================================== */

/* Bloktitel "Social Media Platforms" verbergen */
.region-social-media-platform-links .block-title,
.region-social-media-platform-links h2 {
  display: none !important;
}

/* Labeltekst (LinkedIn, X, etc.) verbergen */
.social-media-platforms__label {
  display: none !important;
}

/* Hele block centreren */
.region-social-media-platform-links,
.region-social-media-platform-links .block {
  text-align: center !important;
}

/* Container: flex + centreren + kleine afstand */
.social-media-platforms__container {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center !important;
  align-items: center !important;
  gap: 3px !important;   /* afstand tussen de iconen */
}

/* Links zo compact mogelijk */
.social-media-platforms__link {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}

/* Afbeelding-iconen kleiner maken */
.social-media-platforms__icon {
  width: 40px !important;   /* pas dit aan als je ze kleiner/groter wilt */
  height: 40px !important;
  max-width: none !important;
  display: inline-block !important;
}

/* Font-iconen (<i>) voor het geval dat */
.social-media-platforms__link i {
  font-size: 18px !important;
  line-height: 1 !important;
}

/* ======================================================
   MOBIEL & TABLET – GEEN HORIZONTALE SCROLL
   ====================================================== */

@media (max-width: 991.98px){
  html,
  body{
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  /* Belangrijkste wrappers mogen nooit breder worden dan het scherm */
  .layout-container,
  .page,
  .main-content,
  .region-content,
  .schepen-container,
  .s2b-section__inner,
  .view-content{
    max-width: 100%;
    overflow-x: hidden;
  }

  /* Iframes en grote blokken mogen het scherm niet oprekken */
  iframe{
    max-width: 100%;
  }
}
/* ============================================
   MOBIEL & TABLET – GEEN HORIZONTALE PAGE-SCROLL,
   MAAR SLIDERS MOGEN WÉL HORIZONTAAL SLIDEN
   ============================================ */

@media (max-width: 991.98px){

  /* Pagina zelf mag niet breder zijn dan het scherm */
  html,
  body{
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    position: relative;
  }

  /* Belangrijkste wrappers: geen horizontale scroll */
  .layout-container,
  .page,
  .main-content,
  .region-content,
  .region-main,
  .schepen-container{
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* Bootstrap rows: negatieve marges eruit */
  .row{
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Grote blokken binnen de schepen-pagina netjes binnen het scherm houden */
  .schepen-container .s2b-node-ad,
  .schepen-container .marinetraffic,
  .schepen-container .marinetraffic-body,
  .schepen-container .marinetraffic-frame{
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* Afbeeldingen & iframes nooit breder dan het scherm */
  img,
  iframe{
    max-width: 100% !important;
    height: auto;
  }

  /* Tabellen: lange woorden/URLs mogen afbreken */
  table{
    width: 100% !important;
    max-width: 100% !important;
  }

  th,
  td,
  .table-schepen th,
  .table-schepen td,
  .sell-value{
    word-wrap: break-word;
    overflow-wrap: anywhere;
  }

  /* ===== SLIDERS: HIER MAG JE WÉL HORIZONTAAL SLIDEN ===== */

  /* Meest-bekeken schepen slider */
  .schepen-slider .s2b-cards--featured{
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Ultra Ads slider (block_3) */
  .view-id-ultra_ads.view-display-id-block_3 .view-content{
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Frontpage mobiele ads slider (s2b-ads-front-mobile) */
  .s2b-ads-front-mobile .view-content{
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Inline ads slider in schepen-verkoop -- inline-ads */
  .view-schepen-verkoop--inline-ads
    .s2b-ads-inline
    .view-ultra-ads
    .view-content{
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}
/* ===========================================
   Ship2Buy Social Media blok – kaartje + titel
   =========================================== */

/* Hele regio centreren */
.region-social-media-platform-links {
  text-align: center !important;
}

/* De container wordt een mooi kaartje */
.region-social-media-platform-links .social-media-platforms__container {
  display: inline-flex !important;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4px;
  padding: 10px 14px 8px;
  border-radius: 14px;
  box-sizing: border-box;

  /* Ship2Buy-look */
  background: radial-gradient(circle at 20% 0, #1d4ed8, #020617 80%);
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.35);
  max-width: 260px;
  width: 100%;
  position: relative;
}

/* Tekst boven de logo's via ::before */
.region-social-media-platform-links .social-media-platforms__container::before {
  content: "Volg Ship2Buy op";
  display: block;
  width: 100%;
  text-align: center;
  margin-bottom: 6px;

  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: #e5e7eb;
}

/* Links compact houden */
.region-social-media-platform-links .social-media-platforms__link {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}

/* Afbeelding-iconen */
.region-social-media-platform-links .social-media-platforms__icon {
  width: 32px !important;
  height: 32px !important;
  max-width: none !important;
  display: inline-block !important;
}

/* Eventuele tekst-labels verbergen */
.region-social-media-platform-links .social-media-platforms__label {
  display: none !important;
}

/* Font-icon fallback */
.region-social-media-platform-links .social-media-platforms__link i {
  font-size: 18px !important;
  line-height: 1 !important;
}

/* =========================================
   Ship2Buy – Checkout voortgang
   ========================================= */

.s2b-checkout-progress {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
}

.s2b-checkout-step {
  flex: 1 1 0;
  min-width: 120px;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem .8rem;
  border-radius: 999px;
  background: #f3f4f6;
  color: #6b7280;
  font-size: .9rem;
  font-weight: 500;
  position: relative;
}

.s2b-checkout-step__index {
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #e5e7eb;
  color: #4b5563;
  font-size: .85rem;
  font-weight: 600;
}

.s2b-checkout-step__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Huidige stap */
.s2b-checkout-step.is-current {
  background: #e0ecff;
  color: #1d4ed8;
}

.s2b-checkout-step.is-current .s2b-checkout-step__index {
  background: #2563eb;
  color: #fff;
}

/* Afgeronde stappen */
.s2b-checkout-step.is-complete {
  background: #e6f7ec;
  color: #166534;
}

.s2b-checkout-step.is-complete .s2b-checkout-step__index {
  background: #22c55e;
  color: #fff;
}

/* Mobile: stapjes onder elkaar als het moet */
@media (max-width: 576px) {
  .s2b-checkout-step {
    flex: 1 1 100%;
  }
}
/* =========================================
   Ship2Buy – Checkout layout
   ========================================= */

.page-checkout .layout-main,
.path-checkout .layout-main {
  max-width: 960px;
  margin: 0 auto;
}

/* Hoofdcontainer rond de checkout-formulieren */
.commerce-checkout-flow,
.checkout-pane {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
}

/* Pane-titels */
.checkout-pane__title {
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: .75rem;
}

/* Knoppen onderaan de checkout */
.checkout-pane__actions .button,
.checkout-pane__actions button,
.form-actions .button--primary {
  border-radius: 999px;
  padding: .6rem 1.4rem;
  font-weight: 600;
}

/* Primaire knop in Ship2Buy blauw */
.form-actions .button--primary,
.checkout-pane__actions .button--primary {
  background-color: #0d6efd;
  border-color: #0d6efd;
}

.form-actions .button--primary:hover,
.checkout-pane__actions .button--primary:hover {
  background-color: #0b5ed7;
  border-color: #0a58ca;
}

/* Secundaire / Terug-knop wat rustiger */
.form-actions .button:not(.button--primary),
.checkout-pane__actions .button:not(.button--primary) {
  background-color: #f3f4f6;
  border-color: #e5e7eb;
  color: #374151;
}
/* Ship2Buy – BTW notitie kaartje */

.s2b-btw-note {
  max-width: 480px;
  margin-top: 1rem;
  margin-bottom: 2rem;
  padding: 1.1rem 1.4rem;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
}

.s2b-btw-note .s2b-highlight-title {
  font-size: 1.05rem;
  margin-bottom: 0.4rem;
}

.s2b-btw-note .s2b-highlight-intro {
  font-size: .9rem;
  margin-bottom: 0;
}

/* Compacte balk onder de foto: titel + prijs op 1 regel */
.s2b-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.4rem 0.85rem 0.45rem;
  background: rgba(3, 7, 18, 0.96); /* minder hoog / geen dikke gradient */
}

.s2b-card__title {
  margin: 0;
  font-weight: 600;
  font-size: 0.9rem;
  color: #ffffff;
  flex: 1;
  min-width: 0;                 /* nodig voor ellipsis */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.s2b-card__price {
  margin-left: 0.6rem;
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
  color: var(--accent, #0d6efd);
  line-height: 1.2;
}
/* Zorg dat de wrapper de overlay kan positioneren */
.schepen-slider .s2b-card__imagewrap {
  position: relative;
  overflow: hidden;
  border-radius: 22px; /* of gelijk aan de card */
}

/* Afbeelding vult de kaart netjes */
.schepen-slider .s2b-card__imagewrap img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Overlaybalk onder in de foto */
.schepen-slider .s2b-card__overlay {
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  pointer-events: none; /* hele kaart blijft klikbaar */
}

/* Basisstijl voor de badges (naam + prijs) */
.schepen-slider .s2b-card__badge {
  display: inline-flex;
  align-items: center;
  max-width: 65%;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #ffffff;
  background: rgba(15, 23, 42, 0.82);
  backdrop-filter: blur(6px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Naam-badge iets breder toegestaan */
.schepen-slider .s2b-card__badge--name {
  max-width: 80%;
}

/* Prijs-badge met accentkleur */
.schepen-slider .s2b-card__badge--price {
  justify-content: center;
  max-width: 45%;
  background: rgba(8, 47, 73, 0.9);
  color: var(--accent, #38bdf8);
}

/* Verborgen titel voor SEO (als je sr-only nog niet had) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* First seen + Uitgelicht – imagewrap klaar maken voor overlay */
.s2b-card__link--firstseen .s2b-card__imagewrap,
.schepen-slider .s2b-card__imagewrap {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
}

/* Afbeelding netjes vullen */
.s2b-card__link--firstseen .s2b-card__imagewrap img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Overlay onderin de foto */
.s2b-card__link--firstseen .s2b-card__overlay {
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  pointer-events: none; /* hele kaart blijft klikbaar */
}

/* Basisbadge (zelfde als Uitgelicht) */
.s2b-card__badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #ffffff;
  background: rgba(15, 23, 42, 0.82);
  backdrop-filter: blur(6px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.s2b-card__badge--name {
  max-width: 60%;
}

.s2b-card__badge--price {
  justify-content: center;
  max-width: 40%;
  background: rgba(8, 47, 73, 0.9);
  color: var(--accent, #38bdf8); /* mooi blauw accent */
}

/* sr-only helper (als je die nog niet hebt) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* Meest bekeken schepen – imagewrap klaar voor overlay */
.view-meest-bekeken-schepen .s2b-card__imagewrap,
.s2b-card__link--mostviewed .s2b-card__imagewrap {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
}

/* Afbeelding netjes vullen */
.s2b-card__link--mostviewed .s2b-card__imagewrap img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Overlay onderin de foto */
.s2b-card__link--mostviewed .s2b-card__overlay {
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  pointer-events: none;
}

/* Basis badge-stijl (gelijk aan Uitgelicht) */
.s2b-card__badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #ffffff;
  background: rgba(15, 23, 42, 0.82);
  backdrop-filter: blur(6px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.s2b-card__badge--name {
  max-width: 60%;
}

.s2b-card__badge--price {
  justify-content: center;
  max-width: 40%;
  background: rgba(8, 47, 73, 0.9);
  color: var(--accent, #38bdf8);
}

/* sr-only helper als je die nog niet hebt */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===========================================
   Ship2Buy Social Media blok – definitieve versie
   (OVERRIDE – NIET HOGER IN HET BESTAND PLAKKEN)
   =========================================== */

/* Kaart-stijl voor het hele blok (zet class "s2b-social-block" op het blok) */
.s2b-social-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;

  padding: 0.75rem 0.9rem;
  margin: 0;
  box-sizing: border-box;

  border-radius: 18px;
  background: #020617;
  border: 1px solid rgba(148, 163, 184, 0.16);
  box-shadow: 0 18px 30px rgba(0, 0, 0, 0.45);
}

/* Optionele titel in je blok (bv. <div class="s2b-social-title">Volg Ship2Buy</div>) */
.s2b-social-title {
  display: flex;
  align-items: center;
  gap: 0.45rem;

  margin: 0 0 0.45rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #e5e7eb;
}

.s2b-social-title::before {
  content: "";
  width: 4px;
  height: 14px;
  border-radius: 999px;
  background: var(--accent, #0ea5e9);
}

/* Container met iconen – netjes gecentreerd */
.s2b-social-block .social-media-platforms__container {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center !important;
  align-items: center !important;
  gap: 0.4rem !important;

  padding: 0;
  margin: 0;
}

/* Tekstlabels weghalen: alleen de logo’s */
.s2b-social-block .social-media-platforms__label {
  display: none !important;
}

/* Rondjes om de iconen – vaste maat, lichtgrijs */
.s2b-social-block .social-media-platforms__link {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  width: 36px;
  height: 36px;
  border-radius: 999px;

  background: #e5e7eb;
  box-shadow: 0 6px 14px rgba(148, 163, 184, 0.6);

  margin: 0;
  padding: 0;
  line-height: 1;
  text-decoration: none;
  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease,
    background 0.16s ease;
}

/* Logo’s in de rondjes – groter en donker (ook X goed zichtbaar) */
.s2b-social-block .social-media-platforms__icon,
.s2b-social-block .social-media-platforms__link i,
.s2b-social-block .social-media-platforms__link svg,
.s2b-social-block .social-media-platforms__link img {
  width: 24px !important;
  height: 24px !important;
  font-size: 24px !important;
  object-fit: contain;

  color: #020617 !important;
  fill: #020617 !important;
  stroke: #020617 !important;
  filter: none !important;
}

/* Hover: blauwe cirkel + wit logo */
.s2b-social-block .social-media-platforms__link:hover {
  background: var(--accent, #0ea5e9);
  box-shadow: 0 10px 20px rgba(37, 99, 235, 0.75);
  transform: translateY(-2px);
}

.s2b-social-block .social-media-platforms__link:hover i,
.s2b-social-block .social-media-platforms__link:hover svg,
.s2b-social-block .social-media-platforms__link:hover img {
  color: #ffffff !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
}

}

/* Logo’s in de rondjes – groter en donker (ook X goed zichtbaar) */
.s2b-social-block .social-media-platforms__icon,
.s2b-social-block .social-media-platforms__link i,
.s2b-social-block .social-media-platforms__link svg,
.s2b-social-block .social-media-platforms__link img {
  width: 24px !important;
  height: 24px !important;
  font-size: 24px !important;
  object-fit: contain;

  color: #020617 !important;
  fill: #020617 !important;
  stroke: #020617 !important;
  filter: none !important;
}

/* Hover: blauwe cirkel + wit logo */
.s2b-social-block .social-media-platforms__link:hover {
  background: var(--accent, #0ea5e9);
  box-shadow: 0 10px 20px rgba(37, 99, 235, 0.75);
  transform: translateY(-2px);
}

.s2b-social-block .social-media-platforms__link:hover i,
.s2b-social-block .social-media-platforms__link:hover svg,
.s2b-social-block .social-media-platforms__link:hover img {
  color: #ffffff !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
}
/* ===========================================
   Ship2Buy checkout progress (status kleuren)
   =========================================== */

/* De rij met stappen */
.s2b-checkout-progress {
  display: flex;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
}

/* Basis-stijl voor elke stap */
.s2b-checkout-step {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;

  padding: 0.4rem 0.6rem;
  border-radius: 999px;
  background: #f1f3f5;
  color: #495057;
  border: 1px solid #dee2e6;
  font-size: 0.9rem;
}

/* Nummer-rondje */
.s2b-checkout-step__index {
  min-width: 22px;
  height: 22px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 600;
  background: #e9ecef;
  color: #495057;
}

/* Label */
.s2b-checkout-step__label {
  font-weight: 500;
}

/* ========== Status op basis van step.position ========== */

/* Vorige stappen (position = 'previous') → groen */
.s2b-checkout-step--previous {
  background: #d1e7dd;
  color: #0f5132;
  border-color: #badbcc;
}

.s2b-checkout-step--previous .s2b-checkout-step__index {
  background: rgba(15, 81, 50, 0.08);
  color: #0f5132;
}

/* Huidige stap (position = 'current') → blauw */
.s2b-checkout-step--current {
  background: #0d6efd;
  color: #fff;
  border-color: #0d6efd;
  font-weight: 600;
}

.s2b-checkout-step--current .s2b-checkout-step__index {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
}

/* Volgende stappen (position = 'next') → lichter grijs */
.s2b-checkout-step--next {
  background: #f8f9fa;
  color: #6c757d;
  border-color: #e9ecef;
  opacity: 0.9;
}


/* ======================================================
   Views — Schepen verkoop: exposed filter "omhulzing"
   ====================================================== */

/* Pak de juiste view(s) + als fallback op path */
.view-schepen-verkoop .views-exposed-form,
.view-schepen-verkoop-makelaar .views-exposed-form,
body.path-schepen-verkoop .views-exposed-form,
body.path-schepen-verkoop-makelaar .views-exposed-form {
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 18px;
  padding: 14px 14px 10px;
  margin: 0 0 1rem 0;
  box-shadow: 0 8px 22px rgba(0,0,0,.06);
}

/* Nettere binnen-spacing (inline exposed form) */
.view-schepen-verkoop .views-exposed-form form,
.view-schepen-verkoop-makelaar .views-exposed-form form {
  margin: 0;
}

.view-schepen-verkoop .views-exposed-form .form--inline,
.view-schepen-verkoop-makelaar .views-exposed-form .form--inline {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem .8rem;
  align-items: end;
}

.view-schepen-verkoop .views-exposed-form .form-actions,
.view-schepen-verkoop-makelaar .views-exposed-form .form-actions {
  margin: 0;
}

/* Dark mode (werkt op meerdere varianten) */
html[data-theme="dark"] .view-schepen-verkoop .views-exposed-form,
html[data-theme="dark"] .view-schepen-verkoop-makelaar .views-exposed-form,
body.theme-dark .view-schepen-verkoop .views-exposed-form,
body.theme-dark .view-schepen-verkoop-makelaar .views-exposed-form {
  background: #0f172a;
  border-color: rgba(255,255,255,.12);
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
}
/* ======================================================
   Schepen verkoop — exposed filter: iets donkerder + knoppen weer blauw
   ====================================================== */

/* Donkerder (licht theme) wrapper */
.view-schepen-verkoop .views-exposed-form,
.view-schepen-verkoop-makelaar .views-exposed-form,
body.path-schepen-verkoop .views-exposed-form,
body.path-schepen-verkoop-makelaar .views-exposed-form {
  background: #f1f3f5;                 /* donkerder dan wit */
  border-color: #d8dde3;
}

/* Inputs iets helderder op donkere wrapper */
.view-schepen-verkoop .views-exposed-form input,
.view-schepen-verkoop .views-exposed-form select,
.view-schepen-verkoop-makelaar .views-exposed-form input,
.view-schepen-verkoop-makelaar .views-exposed-form select {
  background: #ffffff;
}

/* Forceer Bootstrap “primary blue” terug voor buttons in dit filter */
.view-schepen-verkoop .views-exposed-form .btn-outline-primary,
.view-schepen-verkoop-makelaar .views-exposed-form .btn-outline-primary,
body.path-schepen-verkoop .views-exposed-form .btn-outline-primary,
body.path-schepen-verkoop-makelaar .views-exposed-form .btn-outline-primary {
  color: #0d6efd !important;
  border-color: #0d6efd !important;
  background: transparent !important;
}

.view-schepen-verkoop .views-exposed-form .btn-outline-primary:hover,
.view-schepen-verkoop-makelaar .views-exposed-form .btn-outline-primary:hover,
body.path-schepen-verkoop .views-exposed-form .btn-outline-primary:hover,
body.path-schepen-verkoop-makelaar .views-exposed-form .btn-outline-primary:hover {
  background: #0d6efd !important;
  color: #fff !important;
}

/* Meer/Minder filters knop (jouw .s2b-toggle) idem */
.view-schepen-verkoop .views-exposed-form .s2b-toggle,
.view-schepen-verkoop-makelaar .views-exposed-form .s2b-toggle,
body.path-schepen-verkoop .views-exposed-form .s2b-toggle,
body.path-schepen-verkoop-makelaar .views-exposed-form .s2b-toggle {
  color: #0d6efd !important;
  border-color: #0d6efd !important;
}

/* Aantal “badge” in die knop: probeer alle gangbare classnames mee te pakken */
.view-schepen-verkoop .views-exposed-form .s2b-toggle .badge,
.view-schepen-verkoop .views-exposed-form .s2b-toggle__count,
.view-schepen-verkoop-makelaar .views-exposed-form .s2b-toggle .badge,
.view-schepen-verkoop-makelaar .views-exposed-form .s2b-toggle__count {
  background: #0d6efd !important;
  color: #fff !important;
  border-radius: 999px;
  padding: 0 .45rem;
  margin-left: .4rem;
  font-size: .75rem;
  line-height: 1.4;
}
/* ======================================================
   Schepen verkoop — Zoek/Apply knop weer "mooi blauw"
   ====================================================== */

/* 1) Zet Bootstrap primary terug (lokaal, alleen in dit filter) */
.view-schepen-verkoop .views-exposed-form,
.view-schepen-verkoop-makelaar .views-exposed-form,
body.path-schepen-verkoop .views-exposed-form,
body.path-schepen-verkoop-makelaar .views-exposed-form {
  --bs-primary: #0d6efd;
  --bs-primary-rgb: 13,110,253;
}

/* 2) Forceer de submit (Zoek/Apply) knop */
.view-schepen-verkoop .views-exposed-form .form-actions :is(
  input[type="submit"],
  button[type="submit"],
  .button,
  .form-submit,
  .btn,
  .btn-primary
),
.view-schepen-verkoop-makelaar .views-exposed-form .form-actions :is(
  input[type="submit"],
  button[type="submit"],
  .button,
  .form-submit,
  .btn,
  .btn-primary
),
body.path-schepen-verkoop .views-exposed-form .form-actions :is(
  input[type="submit"],
  button[type="submit"],
  .button,
  .form-submit,
  .btn,
  .btn-primary
),
body.path-schepen-verkoop-makelaar .views-exposed-form .form-actions :is(
  input[type="submit"],
  button[type="submit"],
  .button,
  .form-submit,
  .btn,
  .btn-primary
) {
  background: #0d6efd !important;
  border-color: #0d6efd !important;
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(13,110,253,.25);
}

/* Hover/focus */
.view-schepen-verkoop .views-exposed-form .form-actions :is(input[type="submit"],button[type="submit"],.button,.form-submit,.btn,.btn-primary):hover,
.view-schepen-verkoop-makelaar .views-exposed-form .form-actions :is(input[type="submit"],button[type="submit"],.button,.form-submit,.btn,.btn-primary):hover,
body.path-schepen-verkoop .views-exposed-form .form-actions :is(input[type="submit"],button[type="submit"],.button,.form-submit,.btn,.btn-primary):hover,
body.path-schepen-verkoop-makelaar .views-exposed-form .form-actions :is(input[type="submit"],button[type="submit"],.button,.form-submit,.btn,.btn-primary):hover {
  background: #0b5ed7 !important;
  border-color: #0b5ed7 !important;
}
/* ======================================================
   Schepen verkoop — knoppen dezelfde maat (Zoek/Wis/Meer)
   ====================================================== */

.view-schepen-verkoop .views-exposed-form .form-actions :is(.btn, .button, .form-submit, input[type="submit"], input[type="reset"], button),
.view-schepen-verkoop-makelaar .views-exposed-form .form-actions :is(.btn, .button, .form-submit, input[type="submit"], input[type="reset"], button),
body.path-schepen-verkoop .views-exposed-form .form-actions :is(.btn, .button, .form-submit, input[type="submit"], input[type="reset"], button),
body.path-schepen-verkoop-makelaar .views-exposed-form .form-actions :is(.btn, .button, .form-submit, input[type="submit"], input[type="reset"], button),
/* Meer/Minder filters knop */
.view-schepen-verkoop .views-exposed-form .s2b-toggle,
.view-schepen-verkoop-makelaar .views-exposed-form .s2b-toggle,
body.path-schepen-verkoop .views-exposed-form .s2b-toggle,
body.path-schepen-verkoop-makelaar .views-exposed-form .s2b-toggle {
  height: 36px !important;
  padding: 0 .75rem !important;
  font-size: .875rem !important;
  line-height: 34px !important;  /* 36px - 2px borders */
  border-radius: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
}

/* Als één knop toch nog hoger is door default min-height */
.view-schepen-verkoop .views-exposed-form .form-actions .btn,
.view-schepen-verkoop-makelaar .views-exposed-form .form-actions .btn {
  min-height: 36px !important;
}

/* ======================================================
   Verkochte schepen — exposed filter: omhulzing + knoppen blauw + gelijke maat
   ====================================================== */

/* Wrapper (iets donkerder) */
.view-verkochte-schepen .views-exposed-form,
.view-schepen-verkocht .views-exposed-form,
body.path-verkochte-schepen .views-exposed-form,
body.path-schepen-verkocht .views-exposed-form {
  background: #f1f3f5;
  border: 1px solid #d8dde3;
  border-radius: 18px;
  padding: 14px 14px 10px;
  margin: 0 0 1rem 0;
  box-shadow: 0 8px 22px rgba(0,0,0,.06);

  /* primary terug */
  --bs-primary: #0d6efd;
  --bs-primary-rgb: 13,110,253;
}

/* Inputs op donkere wrapper */
.view-verkochte-schepen .views-exposed-form input,
.view-verkochte-schepen .views-exposed-form select,
.view-schepen-verkocht .views-exposed-form input,
.view-schepen-verkocht .views-exposed-form select {
  background: #fff;
}

/* Zoek/Apply knop weer blauw */
.view-verkochte-schepen .views-exposed-form .form-actions :is(input[type="submit"], button[type="submit"], .button, .form-submit, .btn, .btn-primary),
.view-schepen-verkocht .views-exposed-form .form-actions :is(input[type="submit"], button[type="submit"], .button, .form-submit, .btn, .btn-primary),
body.path-verkochte-schepen .views-exposed-form .form-actions :is(input[type="submit"], button[type="submit"], .button, .form-submit, .btn, .btn-primary),
body.path-schepen-verkocht .views-exposed-form .form-actions :is(input[type="submit"], button[type="submit"], .button, .form-submit, .btn, .btn-primary) {
  background: #0d6efd !important;
  border-color: #0d6efd !important;
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(13,110,253,.25);
}
.view-verkochte-schepen .views-exposed-form .form-actions :is(input[type="submit"],button[type="submit"],.button,.form-submit,.btn,.btn-primary):hover,
.view-schepen-verkocht .views-exposed-form .form-actions :is(input[type="submit"],button[type="submit"],.button,.form-submit,.btn,.btn-primary):hover {
  background: #0b5ed7 !important;
  border-color: #0b5ed7 !important;
}

/* Meer/Minder filters + outline knoppen weer blauw */
.view-verkochte-schepen .views-exposed-form .btn-outline-primary,
.view-schepen-verkocht .views-exposed-form .btn-outline-primary,
body.path-verkochte-schepen .views-exposed-form .btn-outline-primary,
body.path-schepen-verkocht .views-exposed-form .btn-outline-primary,
.view-verkochte-schepen .views-exposed-form .s2b-toggle,
.view-schepen-verkocht .views-exposed-form .s2b-toggle,
body.path-verkochte-schepen .views-exposed-form .s2b-toggle,
body.path-schepen-verkocht .views-exposed-form .s2b-toggle {
  color: #0d6efd !important;
  border-color: #0d6efd !important;
}

/* Knoppen allemaal exact dezelfde maat */
.view-verkochte-schepen .views-exposed-form .form-actions :is(.btn, .button, .form-submit, input[type="submit"], input[type="reset"], button),
.view-schepen-verkocht .views-exposed-form .form-actions :is(.btn, .button, .form-submit, input[type="submit"], input[type="reset"], button),
body.path-verkochte-schepen .views-exposed-form .form-actions :is(.btn, .button, .form-submit, input[type="submit"], input[type="reset"], button),
body.path-schepen-verkocht .views-exposed-form .form-actions :is(.btn, .button, .form-submit, input[type="submit"], input[type="reset"], button),
.view-verkochte-schepen .views-exposed-form .s2b-toggle,
.view-schepen-verkocht .views-exposed-form .s2b-toggle,
body.path-verkochte-schepen .views-exposed-form .s2b-toggle,
body.path-schepen-verkocht .views-exposed-form .s2b-toggle {
  height: 36px !important;
  padding: 0 .75rem !important;
  font-size: .875rem !important;
  line-height: 34px !important;
  border-radius: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
}

/* Sterretje linksboven op uitgelichte/advertentie-kaarten */
.s2b-card__imagewrap {
  position: relative; /* nodig voor absolute positionering van het sterretje */
}

.s2b-card__star {
  position: absolute;
  top: 6px;
  left: 6px;
  font-size: 20px;
  line-height: 1;
  color: #fbbf24;              /* goudgeel */
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
  z-index: 10;
}
.s2b-card__imagewrap {
  position: relative;
}

.s2b-card__star {
  position: absolute;
  top: 6px;
  left: 6px;
  font-size: 20px;
  line-height: 1;
  color: #fbbf24;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
  z-index: 10;
}

.mmsi-card__photo {
  position: relative;
}


/* === FIX: S2B ABOUT altijd licht (productie) === */
.s2b-about{
  background: #f8fafc !important;
  color: #0f172a !important;
}
.s2b-about h2{ color: #0f172a !important; }
.s2b-about p{ color: #334155 !important; }
.s2b-about strong{ color: #0f172a !important; }

/* === FIX: Featured slider - alle slides boven uitlijnen (eerste niet "anders") === */
  align-items: flex-start !important;
}
  align-self: flex-start !important;
}

/* === Hotfix: About-sectie altijd leesbaar (alleen .s2b-about) === */
.s2b-about{
  background:#f8fafc;
  color:#0f172a;
}
.s2b-about h1,.s2b-about h2,.s2b-about h3{ color:#0f172a; }
.s2b-about p{ color:#334155; }
.s2b-about a{ color:#0d6efd; }

/* === Hotfix: schepen-slider - eerste slide niet hoger (top-align + remove spacing) === */
  align-items:flex-start !important;
}
  align-self:flex-start !important;
  height:auto !important;
}

/* Alleen de eerste: kill elke extra top spacing die ergens vandaan komt */
  margin-top:0 !important;
  padding-top:0 !important;
  transform:none !important;
}

/* Als er een onzichtbare “spacer” of leeg element bovenin zit */
  display:none !important;
}

/* === HOTFIX: schepen-slider altijd top-align (voorkomt 1 slide die "zweeft") === */
  align-items: flex-start !important;
}
  align-self: flex-start !important;
}

/* === FIX: Meest bekeken schepen (geen Swiper) - alle cards exact gelijk uitlijnen === */
.schepen-slider .s2b-slider-track-wrapper{
  overflow: hidden; /* safety */
}

/* De "track" is flex: zorg dat items niet gecentreerd/zwevend worden */
.schepen-slider .s2b-cards--featured{
  display: flex;
  align-items: stretch !important;   /* BELANGRIJK: alle cards zelfde top/bottom */
}

/* Elke card zelf ook stretchen en geen rare top-margins */
.schepen-slider .s2b-cards--featured > .s2b-card{
  align-self: stretch !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* En specifiek: als er tóch iets alleen op de eerste gebeurt */
.schepen-slider .s2b-cards--featured > .s2b-card:first-child{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Afbeelding altijd exact dezelfde hoogte via aspect-ratio */
.schepen-slider .s2b-card__imagewrap{
  aspect-ratio: 16 / 9;
  width: 100%;
}

/* IMG vult wrap altijd identiek */
.schepen-slider .s2b-card__imagewrap img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* === FIX: Meest bekeken schepen (geen Swiper) - alle cards exact gelijk uitlijnen === */
.schepen-slider .s2b-cards--featured{
  display: flex;
  align-items: stretch !important;
}

.schepen-slider .s2b-cards--featured > .s2b-card{
  align-self: stretch !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.schepen-slider .s2b-cards--featured > .s2b-card:first-child{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* vaste beeldverhouding zodat elke foto exact dezelfde "box" heeft */
.schepen-slider .s2b-card__imagewrap{
  aspect-ratio: 16 / 9;
  width: 100%;
}

/* img vult de box altijd */
.schepen-slider .s2b-card__imagewrap img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* === FIX: Meest bekeken schepen (geen Swiper) - alle cards exact gelijk uitlijnen === */
.schepen-slider .s2b-cards--featured{
  display: flex;
  align-items: stretch !important;
}

.schepen-slider .s2b-cards--featured > .s2b-card{
  align-self: stretch !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.schepen-slider .s2b-cards--featured > .s2b-card:first-child{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* vaste beeldverhouding zodat elke foto exact dezelfde "box" heeft */
.schepen-slider .s2b-card__imagewrap{
  aspect-ratio: 16 / 9;
  width: 100%;
}

/* img vult de box altijd */
.schepen-slider .s2b-card__imagewrap img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* === FIX: Hero strak (geen ronde hoeken) === */
.s2b-hero,
.s2b-hero__overlay,
.s2b-hero__inner{
  border-radius: 0 !important;
}

/* === GLOBAL: alle slider foto-boxen iets hoger === */
.schepen-slider .s2b-card__imagewrap{
  aspect-ratio: 16 / 10;
}

/* === MOBIEL: slider-foto zelfde hoogte als desktop + schip iets hoger === */
@media (max-width: 767.98px){
  .schepen-slider .s2b-card__imagewrap{
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
  }

  .schepen-slider .s2b-card__imagewrap img{
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 30% !important;
  }
}

/* === MOBIEL: slider-foto echt hoger maken (zichtbaar effect) === */
@media (max-width: 767.98px){

  /* imagebox zelf hoger */
  .schepen-slider .s2b-card__imagewrap{
    aspect-ratio: 4 / 3 !important; /* was 16/9 */
  }

  /* foto vult box netjes */
  .schepen-slider .s2b-card__imagewrap img{
    object-fit: cover !important;
    object-position: center 35% !important;
  }

  /* overlay iets lager zodat schip vrijer zichtbaar is */
  .schepen-slider .s2b-card__overlay{
    padding-top: 1.25rem !important;
  }
}

/* === TEST: zie ik dit op echte mobiel? (moet een dikke rode rand geven) === */
@media (max-width: 767.98px){
  .schepen-slider .s2b-card__imagewrap{
  }
}

/* === Slider schepen: desktop mooi (cover), mobiel volledig (contain) === */
@media (min-width: 768px){
  .schepen-slider .s2b-card__imagewrap img{
    object-fit: cover;
    object-position: center 45%; /* iets hoger zodat schip boven badges beter zichtbaar is */
  }
}

@media (max-width: 767.98px){
  .schepen-slider .s2b-card__imagewrap{
    background: #0f172a; /* of #eef2f6 als je licht wilt */
  }
  .schepen-slider .s2b-card__imagewrap img{
    object-fit: contain;      /* hierdoor zie je kop + kont */
    object-position: center;  /* midden houden */
  }
}

/* === FIX: sliders - geen rode/ronde hoeken op fotos
/* cachebust: 2026-02-05_131433 */