/* Container: het content-blok onder de tabs */
.er-trip-tabs-block{
  background: #fff;
  border-radius: 16px;
  padding: 18px;
  margin-top: 26px;
  border: 1px solid rgba(94, 62, 47, 0.18);
  position: relative;
}

/* Tabs nav als "archief tabs" erboven */
.er-trip-tabs-nav{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  border-bottom: 1px solid rgba(94, 62, 47, 0.18);
  padding: 0 6px;
  margin: -34px -6px 16px -6px; /* trekt de tabs omhoog boven het blok */
}

/* Elke tab als mapje */
.er-trip-tab{
  border: 1px solid rgba(94, 62, 47, 0.25);
  border-bottom: none;               /* belangrijk voor het "tab" effect */
  background: #f9bf9a;
  color: #5e3e2f;
  padding: 10px 14px;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  cursor: pointer;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  line-height: 1;
  position: relative;
  top: 1px; /* laat tabs net over de border vallen */
}

/* Icon kleur */
.er-trip-tab__icon,
.er-trip-tab__icon svg,
.er-trip-tab__icon path{
  fill: #5e3e2f;
  color: #5e3e2f;
}

.er-trip-tab{
  transition: transform .18s ease, box-shadow .18s ease;
}

/* Hover: subtiel omhoog */
.er-trip-tab:hover{
  transform: translateY(-3px);
  box-shadow: 0 4px 10px rgba(94, 62, 47, 0.18);
}

/* Actieve tab blijft op z’n plek */
.er-trip-tab.is-active,
.er-trip-tab.is-active:hover{
  transform: none;
  box-shadow: none;
}

/* Actieve tab: lijkt "verbonden" met content-blok */
.er-trip-tab.is-active{
  background: #fff; /* active tab blendt in met het content-blok */
  color: #5e3e2f;
  border-color: rgba(94, 62, 47, 0.28);
  z-index: 2;
}

/* Geef actieve tab een klein randje zodat die echt bovenop ligt */
.er-trip-tab.is-active::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: #fff; /* maskeert de border-bottom gap */
}

/* Panels */
.er-trip-tabpanel[hidden]{
  display:none !important;
}

/* Itinerary onder tabs */
.er-trip-itinerary-below-tabs{
  margin-top: 28px;
}

/* Kill alle kleurveranderingen op hover */
.er-trip-tab:hover,
.er-trip-tab:hover *,
.er-trip-tab:focus,
.er-trip-tab:focus *{
  background-color: #f9bf9a !important;
  color: #5e3e2f !important;
}

/* Iconen ook vastzetten */
.er-trip-tab:hover svg,
.er-trip-tab:hover path{
  fill: #5e3e2f !important;
  color: #5e3e2f !important;
}

/* Actieve tab blijft wit, ook bij hover */
.er-trip-tab.is-active,
.er-trip-tab.is-active:hover{
  background-color: #fff !important;
  color: #5e3e2f !important;
}