/*
 * EU warranty labels (Reg. (EU) 2025/1960) — the one stylesheet the widget has.
 *
 * Loaded for every dealer site from IsaExtension::isaFrontendStylesheets(), because the labels
 * are mandatory on all of them while the themes are per-tenant files nobody may hand-edit.
 * Everything is scoped under .eu-labels and states its own box, so a theme's generic rules for
 * "a img" or floats cannot deform a legally frozen artwork.
 */

.eu-labels {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 16px;
    margin: 16px 0;
    clear: both;
}

/* mix-blend-mode: difference was tried here to auto-contrast against any tenant's
   theme, but it only inverts against a backdrop the browser actually painted —
   on a page where nothing behind this link has an explicit background-color
   (just the default white canvas), there is nothing to blend against and the
   link renders its literal color, which can end up invisible (white-on-white,
   as reported). Since we cannot guarantee every theme paints a real background
   there, give the link its own opaque chip instead: it is legible everywhere
   because it never depends on what happens to be behind it. */
.eu-labels a.external-link {
    text-decoration: underline;
    text-underline-offset: 3px;
    display: inline-block;
    transition: all .3s;
    padding: 2px 8px;
    background: #ffffff;
    color: #1a1a1a;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 3px;
    line-height: 2;
}

.eu-labels a.external-link:hover {
    text-decoration: underline;
    text-underline-offset: 5px;
    background: #f2f2f2;
}

.eu-labels img {
    display: block;
    height: auto;
    max-width: 100%;
    border: 0;
    box-shadow: none;
}

/* The nested strip is 6.5:1; 369 px is its 1x raster, so it is never upscaled. */
.eu-labels__garan img {
    width: 150px;
}

.eu-labels__notice {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

/* The notice thumbnail opens the full poster; 150 px is the agreed size on the details page. */
.eu-labels__notice img {
    width: 150px;
}

.eu-labels__notice-link {
    line-height: normal;
    font-size: 13px;
    text-decoration: underline;
}

/* On an inventory card the strip shares a narrow column, so it scales down with the card. */
.eu-labels--card {
    margin: 8px 0;
    z-index: 10;
    gap: 8px;
}

.eu-labels--card .eu-labels__garan img {
    width: 100%;
    max-width: 150px;
}

@media (max-width: 480px) {
    .eu-labels__garan img {
        width: 100%;
    }
}