/**
 * cm-kurs-builder/after-video — Frontend-Styles
 *
 * Default-Zustand: Inhalt versteckt, Hinweis sichtbar.
 * Unlocked (CSS-Klasse cmkb-after-video--unlocked): Hinweis weg, Inhalt sichtbar.
 */

.cmkb-after-video {
    margin: 25px 0;
}

.cmkb-after-video__hint {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 22px;
    background: #f5ecf0;
    border-left: 4px solid #5C003A;
    border-radius: 6px;
    color: #4a4a4a;
    font-size: 15px;
    line-height: 1.5;
}

.cmkb-after-video__lock {
    font-size: 22px;
    line-height: 1;
    flex-shrink: 0;
}

.cmkb-after-video__hint-text {
    flex: 1;
}

.cmkb-after-video__content {
    display: none;
}

/* Entsperrt: Hinweis weg, Inhalt sichtbar (mit kurzer Einblend-Animation) */
.cmkb-after-video--unlocked .cmkb-after-video__hint {
    display: none;
}

.cmkb-after-video--unlocked .cmkb-after-video__content {
    display: block;
    animation: cmkb-after-video-fadein 0.4s ease-out;
}

@keyframes cmkb-after-video-fadein {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}