/* LEANIO Cookie-Consent – DSGVO-konformer Dialog im LEANIO-Design.
   Einmalig in App.razor eingebunden. Markup wird per cookieconsent.js gesteuert. */

:root {
    --lc-accent: #F2B300;
    --lc-dark: #25282b;
    --lc-dark-2: #2f3337;
}

/* Standardmäßig ausgeblendet – wird per [data-show] eingeblendet. */
.lc-root {
    display: none;
}

.lc-root[data-show] {
    display: block;
}

.lc-root[data-show="banner"] .lc-banner,
.lc-root[data-show="settings"] .lc-settings {
    display: block;
}

.lc-root[data-show] .lc-overlay {
    display: block;
}

/* Abdunkelnder Hintergrund */
.lc-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    z-index: 1080;
    animation: lc-fade .25s ease;
}

/* Dialog-Container (Banner & Einstellungen) */
.lc-banner,
.lc-settings {
    display: none;
    position: fixed;
    z-index: 1090;
    left: 50%;
    bottom: 1.25rem;
    transform: translateX(-50%);
    width: min(680px, calc(100% - 2rem));
    max-height: calc(100vh - 2.5rem);
    overflow-y: auto;
    background: var(--lc-dark);
    color: #fff;
    border-top: 5px solid var(--lc-accent);
    border-radius: 10px;
    box-shadow: 0 18px 50px -10px rgba(0, 0, 0, .7);
    animation: lc-slide .3s ease;
}

.lc-inner {
    padding: 1.5rem 1.75rem;
}

.lc-head {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: .75rem;
}

.lc-head img {
    height: 38px;
    width: auto;
}

.lc-title {
    font-size: 1.35rem;
    font-weight: 700;
    margin: 0;
    color: #fff;
}

.lc-text {
    font-size: .95rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, .85);
    margin-bottom: 1.1rem;
}

.lc-text a {
    color: var(--lc-accent);
    text-decoration: underline;
}

/* Button-Reihe */
.lc-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}

.lc-btn {
    flex: 1 1 auto;
    min-width: 150px;
    padding: .7rem 1.1rem;
    font-size: .95rem;
    font-weight: 600;
    border-radius: 6px;
    border: 2px solid var(--lc-accent);
    cursor: pointer;
    transition: background .2s ease, color .2s ease, transform .15s ease;
    text-align: center;
}

.lc-btn:hover {
    transform: translateY(-1px);
}

/* "Akzeptieren" und "Ablehnen" gleichwertig gestaltet (gleiche Größe/Gewicht). */
.lc-btn--primary {
    background: var(--lc-accent);
    color: #1a1c1e;
}

.lc-btn--primary:hover {
    background: #ffc62b;
}

.lc-btn--secondary {
    background: transparent;
    color: #fff;
}

.lc-btn--secondary:hover {
    background: rgba(255, 255, 255, .12);
}

.lc-btn--ghost {
    background: transparent;
    color: rgba(255, 255, 255, .85);
    border-color: rgba(255, 255, 255, .35);
}

.lc-btn--ghost:hover {
    background: rgba(255, 255, 255, .1);
    color: #fff;
}

/* Einstellungs-Panel: Kategorien */
.lc-category {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 0;
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.lc-category__info {
    flex: 1 1 auto;
}

.lc-category__title {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 .25rem;
    color: #fff;
}

.lc-category__desc {
    font-size: .85rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, .75);
    margin: 0;
}

/* Toggle-Schalter */
.lc-switch {
    position: relative;
    flex: 0 0 auto;
    width: 52px;
    height: 28px;
    margin-top: .15rem;
}

.lc-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.lc-switch__slider {
    position: absolute;
    inset: 0;
    cursor: pointer;
    background: rgba(255, 255, 255, .25);
    border-radius: 28px;
    transition: background .2s ease;
}

.lc-switch__slider::before {
    content: "";
    position: absolute;
    height: 22px;
    width: 22px;
    left: 3px;
    bottom: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform .2s ease;
}

.lc-switch input:checked + .lc-switch__slider {
    background: var(--lc-accent);
}

.lc-switch input:checked + .lc-switch__slider::before {
    transform: translateX(24px);
}

/* Immer-aktiv (notwendig): nicht abwählbar */
.lc-switch input:disabled + .lc-switch__slider {
    background: var(--lc-accent);
    opacity: .55;
    cursor: not-allowed;
}

.lc-settings__footer {
    margin-top: 1.25rem;
}

/* Platzhalter für blockierte externe Inhalte (z. B. Bookings, LinkedIn, Maps) */
.lc-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .9rem;
    text-align: center;
    padding: 2.5rem 1.5rem;
    background: var(--lc-dark-2);
    color: #fff;
    border: 1px dashed rgba(255, 255, 255, .3);
    border-radius: 8px;
}

.lc-placeholder__text {
    max-width: 520px;
    font-size: .95rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, .85);
}

.lc-placeholder__text a {
    color: var(--lc-accent);
    text-decoration: underline;
}

@keyframes lc-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes lc-slide {
    from { opacity: 0; transform: translate(-50%, 20px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

@media (max-width: 520px) {
    .lc-btn {
        flex-basis: 100%;
    }

    .lc-inner {
        padding: 1.25rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lc-overlay,
    .lc-banner,
    .lc-settings {
        animation: none;
    }
}