/* ===== YouKids Global Styles ===== */

:root {
    --yk-red: #e63946;
    --yk-dark: #212529;
    --yk-gray: #6c757d;
}

body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    color: var(--yk-dark);
}

/* ===== Video Card ===== */
.video-card {
    transition: transform .18s ease, box-shadow .18s ease;
    cursor: pointer;
    border-radius: 12px !important;
    overflow: hidden;
}
.video-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,.14) !important;
}
.play-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.25);
    opacity: 0;
    transition: opacity .2s;
}
.video-card:hover .play-overlay {
    opacity: 1;
}

/* ===== Related item ===== */
.related-item {
    transition: background .15s;
    border-radius: 8px;
    padding: 4px;
}
.related-item:hover {
    background: #f5f5f5;
}
.play-overlay-sm {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.25);
    border-radius: 4px;
    opacity: 0;
    transition: opacity .15s;
    font-size: 1.4rem;
}
.related-item:hover .play-overlay-sm {
    opacity: 1;
}

/* ===== YouTube Embed Player ===== */
.yt-wrapper {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: #000;
    box-shadow: 0 4px 20px rgba(0,0,0,.18);
}
.yt-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
}
.yt-container iframe {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    border: none;
}

/*
 * Overlay to block the "Watch on YouTube" logo/button area
 * (bottom-right corner of the player)
 */
.yt-block-overlay {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 200px;
    height: 48px;
    background: #000;
    z-index: 10;
    pointer-events: all;
    cursor: default;
}

/* ===== Admin ===== */
.navbar-brand { font-size: 1.3rem; }