/*
    Ncn_EuWarrantyLabel - rein additive Styles.
    Ausschliesslich eigene Klassen mit Praefix .ncn-, keine Theme-Styles
    ueberschrieben. Dadurch laeuft das Modul unveraendert unter Hyvae und Luma.
*/

/* --- Gewaehrleistungs-Label --- */

.ncn-warranty-label {
    margin: 1rem 0;
}

.ncn-warranty-label-trigger,
.ncn-guarantee-label-full-trigger {
    display: inline-block;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
    vertical-align: baseline;
}

.ncn-warranty-label-trigger:hover,
.ncn-guarantee-label-full-trigger:hover {
    opacity: 0.8;
}

.ncn-guarantee-label-full-trigger {
    margin-top: 0.5rem;
}

.ncn-warranty-label-image {
    display: block;
    width: 100%;
    height: auto;
}

/* Breiten-Varianten der Einstellung "Maximale Breite der EU-Mitteilung"
   (feste Auswahl statt freier CSS-Eingabe) */
.ncn-warranty-label-image--w-sm  { max-width: 300px; }
.ncn-warranty-label-image--w-md  { max-width: 390px; }
.ncn-warranty-label-image--w-lg  { max-width: 480px; }
.ncn-warranty-label-image--w-full { max-width: 100%; }

/* Footer-Platzierung: zentriert im Band vor der Copyright-Leiste.
   Die Klasse sitzt am selben Element wie .ncn-warranty-label, nicht an einem
   Wrapper - deshalb hier die kombinierte Selektion statt einer Verschachtelung. */
.ncn-warranty-label-footer {
    text-align: center;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.ncn-warranty-label-footer.ncn-warranty-label {
    margin: 0.5rem auto;
}

.ncn-warranty-label-checkout,
.ncn-warranty-label-pdp {
    margin-top: 1.5rem;
}

/* Wartet darauf, vom JS unter die Zustimmungserklaerungen verschoben zu werden.
   Bis dahin unsichtbar, sonst blitzt das Label kurz unten auf der Seite auf. */
.ncn-warranty-label--awaiting-move {
    display: none;
}

/* Als letzter Punkt bei den Zustimmungserklaerungen: kompakter als im Content,
   damit es sich in die Liste der Erklaerungen einfuegt. Das Ziel liegt je nach
   Theme in der schmalen Checkout-Sidebar, deshalb nie breiter als der Platz. */
.checkout-agreements .ncn-warranty-label,
.checkout-agreement .ncn-warranty-label {
    margin-top: 0.75rem;
    margin-bottom: 0;
}


.checkout-index-index .ncn-warranty-label button:hover,.checkout-index-index .ncn-warranty-label button:active,.checkout-index-index .ncn-warranty-label button:focus {
    border: 0;
    background: none;
    color: initial;
}

/* Rechte Warenkorb-Spalte: schmale Spalte unter der Coupon-Form.
   Trennlinie nach oben, weil das Label dort sonst an den Summen klebt. */
.ncn-warranty-label-summary {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e0e0e0;
    font-size: 0.9375rem;
}

/* In der schmalen Spalte darf das eingebettete Label nie ueberlaufen -
   die feste Breiten-Auswahl wird hier bewusst ueberstimmt. */
.ncn-warranty-label-summary .ncn-warranty-label-image,
.ncn-warranty-label-summary .ncn-warranty-label-banner-trigger {
    max-width: 100%;
}

/* Banner-Vorschau (oberes Band der amtlichen Mitteilung) als Modal-Trigger.
   Feste Breite statt nur max-width: Ein <button> schrumpft auf seinen Inhalt,
   und das Banner-Bild ist lazy geladen. Ohne feste Breite kollabiert der Button
   vor dem Laden auf 0x0 und die Seite springt beim Nachladen. */
.ncn-warranty-label-banner-trigger {
    display: block;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    width: 280px;
    max-width: 100%;
    transition: opacity 0.15s ease-in-out;
}

/* Seitenverhaeltnis der amtlichen Banner-Grafik (1170x310) - reserviert die
   Hoehe, solange das Bild noch nicht geladen ist. */
.ncn-warranty-label-banner {
    aspect-ratio: 1170 / 310;
}

.ncn-warranty-label-banner-trigger:hover {
    opacity: 0.85;
}

.ncn-warranty-label-banner-trigger:focus-visible,
.ncn-guarantee-label-official-trigger:focus-visible {
    outline: 2px solid #003399;
    outline-offset: 2px;
}

.ncn-warranty-label-banner {
    display: block;
    width: 100%;
    height: auto;
}

/* Einbindung in der Buy-Box (unter der Produktnummer) */
.ncn-warranty-label-buywidget,
.ncn-guarantee-label-buywidget {
    margin-top: 1rem;
}

.ncn-warranty-label-buywidget .ncn-warranty-label,
.ncn-guarantee-label-buywidget .ncn-guarantee-label {
    margin: 0;
}

.ncn-warranty-label-headline,
.ncn-guarantee-label-headline {
    margin-bottom: 0.25rem;
    font-weight: 700;
}

.ncn-warranty-label-pdf-link {
    display: inline-block;
    margin-top: 0.5rem;
    text-decoration: underline;
}

/* --- Garantie-Label (GARAN) --- */

.ncn-guarantee-label {
    margin-top: 1.5rem;
}

/* Amtliches GARAN-Label als Inline-SVG (nested = kompakter Streifen,
   complete = vollstaendiges Label mit QR und Sprachlegende) */
.ncn-guarantee-label-official svg {
    display: block;
    width: 100%;
    max-width: 370px;
    height: auto;
}

button.ncn-guarantee-label-official-trigger {
    display: block;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    width: 100%;
    max-width: 370px;
    text-align: left;
    transition: opacity 0.15s ease-in-out;
}

button.ncn-guarantee-label-official-trigger:hover {
    opacity: 0.85;
}

.ncn-guarantee-label-complete svg {
    max-width: 390px;
}

/* --- Fallback-Karte (nur wenn die amtliche Vorlage fehlt) --- */

.ncn-guarantee-label-card {
    max-width: 390px;
    padding: 1rem;
    border: 2px solid #003399;
    border-radius: 0.25rem;
    background: #fff;
}

.ncn-guarantee-label-title {
    margin-bottom: 0.25rem;
    font-size: 1.1rem;
    font-weight: 800;
}

.ncn-guarantee-label-duration {
    margin-bottom: 0.75rem;
    font-size: 1.4rem;
    font-weight: 800;
}

.ncn-guarantee-label-meta {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0 0.75rem;
    margin-bottom: 0.75rem;
}

.ncn-guarantee-label-meta dt {
    font-weight: 600;
}

.ncn-guarantee-label-meta dd {
    margin: 0 0 0.25rem;
}

.ncn-guarantee-label-qr-hint {
    margin-top: 0.5rem;
    margin-bottom: 0;
    font-size: 0.875rem;
}

/* --- Modal (natives <dialog>) --- */

dialog.ncn-modal {
    width: auto;
    max-width: min(92vw, 560px);
    max-height: 90vh;
    padding: 0;
    border: 0;
    border-radius: 0.375rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    color: inherit;
    background: #fff;
}

dialog.ncn-modal::backdrop {
    background: rgba(0, 0, 0, 0.5);
}

.ncn-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #e0e0e0;
}

.ncn-modal-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
}

.ncn-modal-close {
    padding: 0 0.25rem;
    border: 0;
    background: none;
    font-size: 3.5rem;
    line-height: 1;
    cursor: pointer;
    color: inherit;
}

.ncn-modal-body {
    display: flex;
    justify-content: center;
    padding: 1rem;
    overflow-y: auto;
    max-height: calc(90vh - 7rem);
}

.ncn-modal-footer {
    padding: 0.75rem 1rem;
    border-top: 1px solid #e0e0e0;
    text-align: right;
}

.ncn-warranty-label:has(button[data-ncn-modal-open="ncnWarrantyLabelModalPdp"]) > .ncn-warranty-label-trigger {
    display: none !important;
}

.ncn-guarantee-label:has(button[data-ncn-modal-open="ncnGuaranteeLabelModalPdp"]) > .ncn-guarantee-label-full-trigger {
    display: none !important;
}

/* Mobile: Karte volle Breite */
@media (max-width: 575px) {
    .ncn-guarantee-label-card {
        max-width: 100%;
    }
}