/* ============================================
   VIDEO PAGE - RECONSTRUCTED & OPTIMIZED
   ============================================ */

/* --- Configuration Variables --- */
:root {
    --card-aspect-ratio: 125%; /* 4:5 for vertical videos */
    --card-transition: transform 0.3s ease, box-shadow 0.3s ease;
    --icon-transition: opacity 0.3s ease, transform 0.3s ease;
}

/* ============================================
   Video Grid & Cards
   ============================================ */

.sample-card {
    position: relative;
    background-color: #1a1a2e; /* Fallback color */
    border-radius: 0.5rem;
    overflow: hidden;
    transition: var(--card-transition);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent; /* Disable tap highlight on mobile */
}

.sample-card:focus,
.sample-card:focus-visible {
    outline: 2px solid var(--accent-color, #00bfff);
    outline-offset: 2px;
    box-shadow: 0 0 15px rgba(0, 191, 255, 0.5);
}

/* --- Card Thumbnail --- */
.sample-thumb {
    position: relative;
    padding-top: var(--card-aspect-ratio);
    background-size: cover;
    background-position: center;
    background-color: #0c1421; /* Placeholder background */
}

.sample-card .thumb-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    transition: opacity 0.4s ease;
}

/* --- Play Icon & Hover/Focus State --- */
.play-icon-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 2;
    opacity: 1;
    transition: var(--icon-transition);
}

.play-icon {
    width: 60px;
    height: 60px;
    background-color: rgba(0, 0, 0, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    color: white;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: inherit;
}

.sample-card:hover, .sample-card.is-focused {
    transform: translateY(-6px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 191, 255, 0.2);
}

.sample-card:hover .play-icon-wrapper,
.sample-card.is-focused .play-icon-wrapper {
    opacity: 0;
}

.sample-card:hover .play-icon,
.sample-card.is-focused .play-icon {
    transform: scale(1.2);
}

/* --- Card Content --- */
.card-content {
    padding: 0.75rem;
    background: rgba(12, 20, 33, 0.5);
    backdrop-filter: blur(4px);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.card-title {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-tags {
    font-size: 0.8rem;
    color: #9ab;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Highlight for search results */
.card-title .highlight, .card-tags .highlight {
    background-color: #00bfff;
    color: #080a13;
    padding: 1px 0;
}


/* ============================================
   Video Preview (on hover)
   ============================================ */

.preview-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0; /* Behind thumbnail and play icon */
    opacity: 0;
    transition: opacity 0.4s ease;
}

/* Logic in JS adds 'is-playing' class to show the video */
.sample-card.is-playing .preview-video {
    opacity: 1;
    z-index: 1;
}

.sample-card.is-playing .thumb-image {
    opacity: 0;
}

/* ============================================
   Popup Player
   ============================================ */

#video-popup {
    transition: opacity 0.3s ease;
}

#video-popup.hidden {
    opacity: 0;
    pointer-events: none;
}

.popup-content-wrapper {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform: scale(0.95);
}

#video-popup:not(.hidden) .popup-content-wrapper {
    transform: scale(1);
}

#video-popup-body iframe,
#video-popup-body video {
    width: 100%;
    height: 100%;
}

/* ============================================
   Controls & Search
   ============================================ */

#category-tabs button[aria-selected="true"] {
    background-color: var(--accent-color, #00bfff);
    color: #080a13;
    font-weight: 600;
}

#search-suggestions .suggestion-item {
    padding: 8px 12px;
    cursor: pointer;
}

#search-suggestions .suggestion-item:hover,
#search-suggestions .suggestion-item.is-active {
    background-color: rgba(255, 255, 255, 0.1);
}

/* ============================================
   Debug Console
   ============================================ */

#debug-console {
    font-family: 'SF Mono', 'Consolas', 'Menlo', monospace;
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}

#debug-console.hidden {
    transform: translateY(20px);
    opacity: 0;
    pointer-events: none;
}

#error-log-container .log-error {
    color: #ff8a8a;
    border-bottom: 1px solid #ff8a8a20;
    padding-bottom: 4px;
    margin-bottom: 4px;
}

#error-log-container .log-warn {
    color: #ffdb8a;
}

/* ============================================
   Courses Section
   ============================================ */

.course-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.course-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 191, 255, 0.2);
}

/* ============================================
   Get Quote Button
   ============================================ */

.get-quote-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    background-color: #25D366;
    color: white;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.get-quote-btn:hover {
    background-color: #128C7E;
}

.whatsapp-icon {
    width: 1rem;
    height: 1rem;
}

/* ============================================
   Task 4: Before/After Slider Styles
   ============================================ */

.ba-slider-container {
    background-color: #000;
    position: relative;
}

/* Ensure the inner image always fills the container width, 
   even when the wrapper is clipped */
.ba-before-img {
    width: 100%; 
    /* Fallback if JS sync fails, though JS isn't strictly needed for width if using container queries, but here we rely on standard CSS behavior. 
       Actually, for the 'reveal' effect, the image inside the wrapper must be the full width of the slider container.
       We use a simple trick: width: 100vw (on mobile) or max-width of container. 
       Better approach: The HTML structure uses object-fit: cover on absolute positioning. 
       To prevent squashing, we need the image to be the size of the PARENT container. 
       Since we can't reference parent width easily in pure CSS without hardcoding, 
       we will rely on the object-fit: cover and absolute positioning to handle it mostly, 
       but strictly speaking, the image needs to be width: [container-width]. 
       For this implementation, we use a high width to ensure coverage or rely on the aspect-ratio. */
    width: 100%; 
    height: 100%;
}

/* Fix for the image inside the clipped wrapper to not shrink */
#ba-before-wrapper img {
    width: 100%; 
    /* This is tricky in pure CSS without knowing container width. 
       However, since we are using 'object-fit: cover', it might just crop. 
       But if width is 50%, object-fit covers 50%. We want it to cover 100%. 
       We will use a CSS variable or a simple hack: width: 200% when wrapper is 50%? No. 
       We will use the fact that it is an img tag. 
       Actually, the best pure CSS way for this specific slider type is setting the image width to the container's width.
       We will handle this by setting the image width to the container width in JS or using vw units. 
       For now, let's add a rule that forces it to be wide enough. */
    min-width: 100%; 
    width: auto;
    max-width: none;
}

@media (min-width: 896px) {
    #ba-before-wrapper img {
        width: 896px; /* Max width of container (max-w-4xl) */
    }
}
/* On smaller screens, we can approximate or let JS handle exact pixel width if needed, 
   but object-fit usually handles the visual aspect well enough if dimensions match. */

/* ============================================
   Task 4: High-End Course Grid Styles
   ============================================ */

#course-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 1rem 0;
}

@media (min-width: 768px) {
    #course-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    #course-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.course-card-new {
    background: #0f172a; /* Dark cyberpunk bg */
    border: 1px solid rgba(0, 191, 255, 0.1);
    border-radius: 1rem;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    position: relative;
}

.course-card-new:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 191, 255, 0.15);
    border-color: rgba(0, 191, 255, 0.4);
}

/* Top: Image & Badge */
.course-header {
    position: relative;
    height: 180px;
    overflow: hidden;
    background-color: #020617;
}

.course-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.course-card-new:hover .course-img {
    transform: scale(1.05);
}

.course-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(0, 0, 0, 0.75);
    color: #00bfff;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    backdrop-filter: blur(4px);
    border: 1px solid rgba(0, 191, 255, 0.2);
    z-index: 10;
}

/* Middle: Content */
.course-body {
    padding: 1.5rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.course-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #f8fafc;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.course-desc {
    font-size: 0.9rem;
    color: #94a3b8;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.course-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.85rem;
    margin-top: 0.25rem;
}

.course-rating {
    color: #fbbf24; /* Gold */
    font-weight: 700;
}

.course-students {
    color: #64748b;
}

.course-author {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.course-author img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.course-author span {
    font-size: 0.9rem;
    font-weight: 500;
    color: #e2e8f0;
}

/* Bottom: Price & Action */
.course-footer {
    padding: 1.25rem 1.5rem;
    background: rgba(2, 6, 23, 0.5);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.course-price {
    font-size: 1.5rem;
    font-weight: 800;
    color: #00bfff; /* Neon Blue */
    text-shadow: 0 0 10px rgba(0, 191, 255, 0.3);
}

.course-enroll-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    background: linear-gradient(90deg, #00bfff, #0080ff);
    color: #020617;
    font-weight: 700;
    padding: 0.85rem;
    border-radius: 0.5rem;
    text-decoration: none;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.9rem;
}

.course-enroll-btn:hover {
    filter: brightness(1.15);
    box-shadow: 0 0 15px rgba(0, 191, 255, 0.4);
    transform: translateY(-1px);
}

/* ============================================
   Task: Video Background for Courses
   ============================================ */

.course-video-bg {
    position: relative;
    overflow: hidden;
    padding: 2rem 0;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    transform: translateX(0);
}

.bg-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.bg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1;
}

.course-video-bg h2,
.course-video-bg #course-grid {
    position: relative;
    z-index: 2;
}