/* Nipak Product Downloads - PDF kaartjes */

.npd-product-downloads {
    margin: 16px 0;
}

.npd-downloads-title {
    display: block;
    margin-bottom: 10px;
    font-size: 14px;
    color: #1a2e4a;
}

/* Grid van kaartjes */
.npd-links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* Individueel kaartje */
.npd-download-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100px;
    padding: 14px 10px 12px;
    background: #ffffff;
    border: 2px solid #1a2e4a;
    border-radius: 6px;
    text-decoration: none;
    color: #1a2e4a;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    line-height: 1.3;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    cursor: pointer;
}

.npd-download-card:hover,
.npd-download-card:focus {
    background: #1a2e4a;
    color: #f5c200;
    border-color: #1a2e4a;
    text-decoration: none;
}

/* PDF-icoon SVG */
.npd-download-card .npd-pdf-icon {
    width: 38px;
    height: 46px;
    margin-bottom: 8px;
    flex-shrink: 0;
}

/* De kleur van het icoon wisselt mee bij hover */
.npd-download-card .npd-icon-bg {
    fill: #1a2e4a;
    transition: fill 0.15s;
}
.npd-download-card .npd-icon-badge {
    fill: #f5c200;
    transition: fill 0.15s;
}
.npd-download-card .npd-icon-text {
    fill: #1a2e4a;
    transition: fill 0.15s;
}
.npd-download-card:hover .npd-icon-bg {
    fill: #f5c200;
}
.npd-download-card:hover .npd-icon-badge {
    fill: #1a2e4a;
}
.npd-download-card:hover .npd-icon-text {
    fill: #f5c200;
}

.npd-card-label {
    margin-top: 2px;
    word-break: break-word;
    hyphens: auto;
}

/* Mijn Account tabel aanpassen */
.npd-account-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 8px;
}
.npd-account-table th {
    text-align: left;
    padding: 7px 10px;
    background: #1a2e4a;
    color: #f5c200;
    font-size: 13px;
}
.npd-account-table td {
    padding: 8px 10px;
    border-bottom: 1px solid #e5e5e5;
    vertical-align: middle;
    font-size: 13px;
}
.npd-account-table tr:last-child td {
    border-bottom: none;
}

/* Kleine kaartjes in Mijn Account tabel */
.npd-download-card.npd-card-small {
    width: 72px;
    padding: 10px 8px 8px;
    font-size: 11px;
    border-width: 1px;
}
.npd-download-card.npd-card-small .npd-pdf-icon {
    width: 28px;
    height: 34px;
    margin-bottom: 6px;
}

.npd-login-notice {
    font-size: 13px;
    color: #555;
}

@media (max-width: 480px) {
    .npd-download-card {
        width: 80px;
        font-size: 11px;
    }
}

/* Afbeeldings-kaartje: thumbnail als achtergrond */
.npd-img-thumb {
    display: block;
    width: 100%;
    height: 70px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    border-radius: 3px 3px 0 0;
    position: relative;
    margin-bottom: 8px;
    background-color: #e8edf2;
}

.npd-card-small .npd-img-thumb {
    height: 50px;
}

/* Badge rechtsboven op de afbeelding */
.npd-img-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    background: #1a2e4a;
    color: #f5c200;
    font-size: 9px;
    font-weight: 700;
    font-family: Arial, sans-serif;
    padding: 2px 5px;
    border-radius: 3px;
    line-height: 1.4;
    transition: background 0.15s, color 0.15s;
}

.npd-download-card:hover .npd-img-badge {
    background: #f5c200;
    color: #1a2e4a;
}

/* Zorg dat kaartje met afbeelding iets breder mag */
.npd-download-card:has(.npd-img-thumb) {
    width: 110px;
}
.npd-download-card.npd-card-small:has(.npd-img-thumb) {
    width: 80px;
}