/* === CSS styles voor downloads tabellen op de productpagina template === */
.product-downloads {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  background: transparent;
}

/* Head */
.product-downloads thead th {
  text-align: left;
  font-weight: 700;
  padding: 12px 5px;
  border-bottom: 1px solid rgba(175,202,221,.35);
  white-space: nowrap;
}

/* Body */
.product-downloads tbody td {
  padding: 12px 5px;
  border-bottom: 1px solid rgba(175,202,221,.35);
  vertical-align: top;
}

/* Zebra rows */
.product-downloads tbody tr:nth-child(even) td {
  background: rgba(247,250,252,1);
}

/* Hover */
.product-downloads tbody tr:hover td {
  background: var(--bg-surface);
}

/* Zorg dat lege cellen écht leeg blijven */
.product-downloads td:empty::before {
  content: none !important;
}

/* ===== Kolombreedtes ===== */

/* 1) Type */
.product-downloads th:nth-child(1),
.product-downloads td:nth-child(1) {
  width: 240px;
  min-width: 240px;
  white-space: nowrap;
}

/* 2) Document */
.product-downloads th:nth-child(2),
.product-downloads td:nth-child(2) {
  width: 48%;
  min-width: 320px;
}

/* 3) Bestandstype */
.product-downloads th:nth-child(3),
.product-downloads td:nth-child(3) {
  width: 120px;
  white-space: nowrap;
}

/* 4) Grootte */
.product-downloads th:nth-child(4),
.product-downloads td:nth-child(4) {
  width: 90px;
  white-space: nowrap;
}

/* 5) Actie */
.product-downloads th:nth-child(5),
.product-downloads td:nth-child(5) {
  width: 105px;
  white-space: nowrap;
}

/* Document titel afkappen */
.product-downloads .download-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Download / Bekijk link */
.product-downloads .download-link {
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.product-downloads .download-link:hover {
  color: var(--tertiary);
}

.product-downloads .download-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  display: block;
  fill: currentColor;
  opacity: 0.9;
}

/* Specifiek voor Catalogus (Bekijk) */
.product-downloads .view-link {
  color: var(--primary);
}

/* Responsive */
@media (max-width: 767px) {

  .product-downloads {
    width: 100%;
    table-layout: fixed;
  }

  .product-downloads thead th,
  .product-downloads tbody td {
    box-sizing: border-box;
    padding: 10px 8px;
    vertical-align: top;
  }

  /* 1) Type */
  .product-downloads th:nth-child(1),
  .product-downloads td:nth-child(1) {
    width: 34%;
    min-width: 0;
    white-space: normal;
    overflow-wrap: normal;
  }

  /* 2) Document */
  .product-downloads th:nth-child(2),
  .product-downloads td:nth-child(2) {
    width: auto;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  /* 3) File type verbergen */
  .product-downloads th:nth-child(3),
  .product-downloads td:nth-child(3) {
    display: none;
  }

  /* 4) Size verbergen */
  .product-downloads th:nth-child(4),
  .product-downloads td:nth-child(4) {
    display: none;
  }

  /* 5) Action */
  .product-downloads th:nth-child(5),
  .product-downloads td:nth-child(5) {
    width: auto;
    min-width: 0;
    padding-left: 8px;
    padding-right: 8px;
    text-align: right;
    white-space: nowrap;
  }

  /* Documenttitel mag meerdere regels gebruiken */
  .product-downloads .download-title {
    white-space: normal;
    overflow-wrap: anywhere;
    overflow: visible;
    text-overflow: unset;
  }
}

/* Taalfilter boven de dynamx-downloadtabel */
.bp-dynamx-downloads .bp-dynamx-language-options {
  width: 100%;
  box-sizing: border-box;
  padding: 0px 5px;
  /* background: var(--bg-surface);
  border-radius: var(--radius-s); */
}

/* Compactere ruimte op mobiel */
@media (max-width: 767px) {
  .bp-dynamx-downloads .bp-dynamx-language-options {
    padding: 8px 12px;
  }
}

/* Compactere taalkeuze */
.bp-dynamx-downloads .bp-dynamx-language-filter
.bp-dynamx-language-options label {
  font-size: var(--text-s);
  gap: 8px;
}

.bp-dynamx-downloads .bp-dynamx-language-filter
.bp-dynamx-language-options input[type="radio"] {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}