/**
 * NLDataGate – Design-Token-basiertes CSS.
 * Alle Werte über CSS-Variablen überschreibbar.
 * Fallbacks passen zum NETZLICHT-Design-System.
 *
 * Design-Token-Override (nach diesem File laden):
 *   :root {
 *     --nl-gate-bg:      #0a0a0a;
 *     --nl-gate-text:    #ffffff;
 *     --nl-gate-accent:  #ff6a1a;
 *   }
 */

:root {
    --nl-gate-bg:            var(--bg, #ffffff);
    --nl-gate-text:          var(--text, #0a0a0a);
    --nl-gate-accent:        var(--accent, #ff6a1a);
    --nl-gate-accent-text:   var(--accent-text, #ffffff);
    --nl-gate-link:          var(--link, #0a0a0a);
    --nl-gate-link-hover:    var(--accent, #ff6a1a);
    --nl-gate-border:        var(--border-color, rgba(10, 10, 10, 0.12));
    --nl-gate-border-radius: var(--border-radius, 0px);
    --nl-gate-shadow:        var(--shadow, 0 4px 24px rgba(0, 0, 0, 0.15));
    --nl-gate-font:          var(--font-family, system-ui, sans-serif);
    --nl-gate-font-size:     var(--font-size-sm, 14px);
    --nl-gate-padding:       1.5rem;
    --nl-gate-gap:           1rem;
    --nl-gate-max-width:     400px;
    --nl-gate-offset:        1.5rem;
    --nl-gate-transition:    transform 300ms ease-out;
}

/* ---------------------------------------------------------------------------
   Base – default position: bottom-right
   --------------------------------------------------------------------------- */
.nl-gate {
    position: fixed;
    bottom: var(--nl-gate-offset);
    right: var(--nl-gate-offset);
    max-width: var(--nl-gate-max-width);
    width: calc(100% - 2 * var(--nl-gate-offset));
    background: var(--nl-gate-bg);
    color: var(--nl-gate-text);
    border: 1px solid var(--nl-gate-border);
    border-radius: var(--nl-gate-border-radius);
    box-shadow: var(--nl-gate-shadow);
    padding: var(--nl-gate-padding);
    font-family: var(--nl-gate-font);
    font-size: var(--nl-gate-font-size);
    line-height: 1.5;
    z-index: 9999;                     /* overridden by JS style.zIndex */
    transform: translateX(calc(100% + var(--nl-gate-offset)));
    transition: var(--nl-gate-transition);
}

.nl-gate--visible {
    transform: translateX(0);
}

/* ---------------------------------------------------------------------------
   Content
   --------------------------------------------------------------------------- */
.nl-gate__content {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.nl-gate__message {
    margin: 0 0 0.5rem 0;
}

.nl-gate__privacy-link {
    display: inline;
    align-self: flex-start;
    color: var(--nl-gate-text);
    text-decoration: underline;
    text-underline-offset: 2px;
    font-size: inherit;
    transition: opacity 150ms ease;
}

@media (hover: hover) and (pointer: fine) {
    .nl-gate__privacy-link:hover {
        opacity: 0.6;
        text-decoration: none;
        color: var(--nl-gate-text);
    }
}
.nl-gate__privacy-link:focus-visible {
    opacity: 0.8;
    text-decoration: underline;
    color: var(--nl-gate-text);
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   Actions
   --------------------------------------------------------------------------- */
.nl-gate__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nl-gate-gap);
    align-items: center;
    margin-top: var(--nl-gate-padding);
}

.nl-gate__button {
    font: inherit;
    font-size: inherit;
    padding: 0.625rem 1.5rem;
    border: none;
    border-radius: var(--nl-gate-border-radius);
    cursor: pointer;
    transition: opacity 150ms ease;
    text-align: center;
    white-space: nowrap;
}

/* Hover-States nur auf echten Hover-Geraeten (kein Sticky-Hover auf Touch). */
@media (hover: hover) and (pointer: fine) {
    .nl-gate__button:hover {
        opacity: 0.85;
        box-shadow: none;
    }
}
.nl-gate__button:focus,
.nl-gate__button:active {
    opacity: 0.85;
    box-shadow: none;
}

.nl-gate__button:focus-visible {
    outline: 2px solid var(--nl-gate-accent);
    outline-offset: 2px;
}

.nl-gate__button--accept {
    background: var(--nl-gate-accent);
    color: var(--nl-gate-accent-text);
    font-weight: 500;
}

.nl-gate__button--reject {
    background: transparent;
    color: var(--nl-gate-text);
    padding-left: 0;
    padding-right: 0;
    text-decoration: underline;
    text-underline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
    .nl-gate__button--reject:hover {
        opacity: 0.6;
        text-decoration: none;
        background: transparent;
        box-shadow: none;
        color: var(--nl-gate-text);
    }
}
.nl-gate__button--reject:focus,
.nl-gate__button--reject:active {
    opacity: 0.6;
    text-decoration: none;
    background: transparent;
    box-shadow: none;
    color: var(--nl-gate-text);
}

/* ---------------------------------------------------------------------------
   Position variants
   --------------------------------------------------------------------------- */

/* bottom-left */
.nl-gate--position-bottom-left {
    right: auto;
    left: var(--nl-gate-offset);
    transform: translateX(calc(-100% - var(--nl-gate-offset)));
}
.nl-gate--position-bottom-left.nl-gate--visible {
    transform: translateX(0);
}

/* bottom-center */
.nl-gate--position-bottom-center {
    right: 50%;
    left: auto;
    transform: translate(50%, calc(100% + var(--nl-gate-offset)));
}
.nl-gate--position-bottom-center.nl-gate--visible {
    transform: translate(50%, 0);
}

/* top-right */
.nl-gate--position-top-right {
    top: var(--nl-gate-offset);
    bottom: auto;
    transform: translateX(calc(100% + var(--nl-gate-offset)));
}
.nl-gate--position-top-right.nl-gate--visible {
    transform: translateX(0);
}

/* top-left */
.nl-gate--position-top-left {
    top: var(--nl-gate-offset);
    bottom: auto;
    right: auto;
    left: var(--nl-gate-offset);
    transform: translateX(calc(-100% - var(--nl-gate-offset)));
}
.nl-gate--position-top-left.nl-gate--visible {
    transform: translateX(0);
}

/* ---------------------------------------------------------------------------
   Mobile – alle Positionen: Slide in von unten, volle Breite
   --------------------------------------------------------------------------- */
@media (max-width: 640px) {
    .nl-gate,
    .nl-gate--position-bottom-left,
    .nl-gate--position-bottom-center,
    .nl-gate--position-top-right,
    .nl-gate--position-top-left {
        left: var(--nl-gate-offset);
        right: var(--nl-gate-offset);
        bottom: var(--nl-gate-offset);
        top: auto;
        max-width: none;
        width: auto;
        transform: translateY(calc(100% + var(--nl-gate-offset)));
    }

    .nl-gate--visible,
    .nl-gate--position-bottom-left.nl-gate--visible,
    .nl-gate--position-bottom-center.nl-gate--visible,
    .nl-gate--position-top-right.nl-gate--visible,
    .nl-gate--position-top-left.nl-gate--visible {
        transform: translateY(0);
    }
}

/* ---------------------------------------------------------------------------
   Reduced motion
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .nl-gate,
    .nl-gate--position-bottom-left,
    .nl-gate--position-bottom-center,
    .nl-gate--position-top-right,
    .nl-gate--position-top-left {
        transition: opacity 150ms ease;
        transform: none !important;
        opacity: 0;
    }

    .nl-gate--visible {
        opacity: 1 !important;
    }
}