:root {
    --bs-font-sans-serif: 'Inter', sans-serif;
    --light-blue-bg: #f0f9ff; 
}

body {
    font-family: var(--bs-font-sans-serif);
}

.bg-light-blue {
    background-color: var(--light-blue-bg);
}

/* NEW: Custom border for previews */
.preview-border {
    border: 0.5px solid #000000;
}

/* Gradient Overlay for Video readability */
.gradient-overlay {
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
}

/* Play Button Styling */
.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: rgba(255,255,255,0.25);
    border: 2px solid white;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    transition: background 0.2s ease;
    pointer-events: none; 
}

.searchable-item:hover .play-button {
    background: rgba(255,255,255,0.4);
}

.play-button::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 55%;
    transform: translate(-50%, -50%);
    border-style: solid;
    border-width: 10px 0 10px 16px;
    border-color: transparent transparent transparent white;
}

/* Sizes */
.play-button.large {
    width: 80px;
    height: 80px;
}

.play-button.small {
    width: 40px;
    height: 40px;
    border-width: 1.5px;
}

.play-button.small::after {
    border-width: 6px 0 6px 10px;
}

/* NEW: Custom Ratio for PDFs (16 width : 18 height) */
.ratio-16x18 {
    --bs-aspect-ratio: 112.5%; /* (18 / 16) * 100 */
}


/* Custom margin to align video with PDF inside the modal */
.video-mt {
    margin-top: 2.3em;
}

/* Video Coming Soon Placeholder */
.video-placeholder {
    background-color: #212529; /* Dark background */
    color: #f8f9fa; /* White text */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
}