/*
 * Compiled stylesheet: youtube_newyoutube.css
 * Shared by views:
 *   - app/Views/front/youtube/newyoutube.php
 */

/* ===== DESIGN VARIABLES ===== */
    :root {
        --saffron:       #E87722;
        --saffron-light: #F5A24B;
        --saffron-dark:  #C4620F;
        --gold:          #D4A838;
        --gold-light:    #F0D06A;
        --maroon:        #6B1A1A;
        --maroon-light:  #8B2222;
        --forest:        #1C3A28;
        --cream:         #FBF7EE;
        --warm-off:      #FAF5E9;
        --text-dark:     #231008;
        --text-body:     #4A3728;
        --text-muted:    #8A7060;
        --border:        rgba(212,168,56,0.28);
        --shadow-warm:   0 12px 48px rgba(232,119,34,0.14);
        --shadow-card:   0 4px 28px rgba(35,16,8,0.10);
        --radius:        16px;
        --radius-sm:     10px;
    }

    body {
        background: var(--cream);
        font-family: 'Poppins', sans-serif;
        color: var(--text-dark);
    }

    h1, h2, h3, h4, h5, h6 {
        font-family: 'Playfair Display', serif;
    }

    .main-container {
        max-width: 1200px;
        margin: 3rem auto;
        padding: 0 1.5rem;
    }

    /* Video Player Section */
    .video-player-section {
        background: #000;
        border-radius: var(--radius);
        overflow: hidden;
        margin-bottom: 2rem;
        box-shadow: var(--shadow-warm);
    }

    .active-video-container {
        position: relative;
        width: 100%;
        background: #000;
    }

    #youtube-player {
        width: 100%;
        aspect-ratio: 16/9;
    }

    .playlist-controls {
        background: linear-gradient(135deg, var(--saffron), var(--saffron-dark));
        padding: 1rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 1rem;
    }

    .playlist-info {
        color: #fff;
    }

    .playlist-info h3 {
        margin: 0;
        font-size: 1.1rem;
    }

    .playlist-info p {
        margin: 5px 0 0;
        font-size: 0.85rem;
        opacity: 0.9;
    }

    .control-buttons {
        display: flex;
        gap: 0.8rem;
        flex-wrap: wrap;
    }

    .control-btn {
        background: rgba(255,255,255,0.2);
        border: none;
        color: #fff;
        padding: 0.5rem 1rem;
        border-radius: 8px;
        cursor: pointer;
        transition: 0.2s;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.9rem;
    }

    .control-btn:hover {
        background: rgba(255,255,255,0.3);
        transform: translateY(-2px);
    }

    .gap-select {
        background: rgba(255,255,255,0.2);
        border: none;
        color: #fff;
        padding: 0.5rem 1rem;
        border-radius: 8px;
        cursor: pointer;
        font-size: 0.9rem;
    }

    .gap-select option {
        background: var(--saffron-dark);
        color: #fff;
    }

    /* Page header */
    .page-header {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin-bottom: 2rem;
        padding-bottom: 1rem;
        border-bottom: 2px solid var(--saffron);
    }

    .page-header-icon {
        background: linear-gradient(135deg, var(--saffron), var(--saffron-dark));
        width: 60px;
        height: 60px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 1.8rem;
    }

    .page-header-text h1 {
        font-size: 2rem;
        font-weight: 700;
        color: var(--text-dark);
        margin: 0;
    }

    .page-header-text p {
        font-size: 0.95rem;
        color: var(--text-muted);
        margin: 0;
    }

    /* Video grid */
    .youtube-grid-enhanced {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 1.5rem;
    }

    .youtube-card {
        background: #fff;
        border: 1px solid var(--border);
        border-radius: var(--radius);
        overflow: hidden;
        transition: 0.2s;
        cursor: pointer;
        box-shadow: var(--shadow-card);
        position: relative;
    }

    .youtube-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-warm);
    }

    .youtube-card.currently-playing {
        border: 3px solid var(--saffron);
        transform: scale(1.02);
        box-shadow: var(--shadow-warm);
    }

    .playing-indicator {
        position: absolute;
        top: 10px;
        right: 10px;
        background: var(--saffron);
        color: #fff;
        padding: 4px 8px;
        border-radius: 20px;
        font-size: 0.7rem;
        font-weight: bold;
        z-index: 10;
        animation: pulse 1.5s infinite;
    }

    @keyframes pulse {
        0% { opacity: 1; }
        50% { opacity: 0.6; }
        100% { opacity: 1; }
    }

    .video-thumbnail-container {
        position: relative;
        aspect-ratio: 16/9;
        background: var(--cream);
    }

    .video-thumbnail {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .play-button-overlay {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: rgba(255,255,255,0.9);
        border-radius: 50%;
        width: 50px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--saffron-dark);
        font-size: 2rem;
        opacity: 0;
        transition: 0.2s;
    }

    .youtube-card:hover .play-button-overlay {
        opacity: 1;
    }

    .video-duration {
        position: absolute;
        bottom: 8px;
        right: 8px;
        background: rgba(0,0,0,0.7);
        color: #fff;
        padding: 0.2rem 0.5rem;
        border-radius: 4px;
        font-size: 0.75rem;
        font-weight: 600;
    }

    .video-content {
        padding: 1rem;
    }

    .video-title {
        font-size: 1rem;
        font-weight: 700;
        color: var(--text-dark);
        margin: 0 0 0.5rem 0;
        line-height: 1.4;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .video-meta {
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
    }

    .video-channel {
        display: flex;
        align-items: center;
        gap: 0.3rem;
        color: var(--text-muted);
        font-size: 0.8rem;
    }

    .video-stats {
        display: flex;
        gap: 1rem;
        flex-wrap: wrap;
        font-size: 0.75rem;
        color: var(--text-muted);
    }

    .stat-item {
        display: flex;
        align-items: center;
        gap: 0.3rem;
    }

    /* Error / empty states */
    .error-state,
    .empty-videos-state {
        text-align: center;
        padding: 4rem 2rem;
        background: #fff;
        border: 1px solid var(--border);
        border-radius: var(--radius);
        box-shadow: var(--shadow-card);
        max-width: 500px;
        margin: 2rem auto;
    }

    .error-icon,
    .empty-icon {
        font-size: 4rem;
        color: var(--saffron-light);
        opacity: 0.6;
        margin-bottom: 1rem;
    }

    .error-state h3,
    .empty-videos-state h3 {
        font-size: 1.5rem;
        color: var(--text-dark);
        margin-bottom: 0.5rem;
    }

    .error-state p,
    .empty-videos-state p {
        color: var(--text-muted);
        margin-bottom: 1.5rem;
    }

    .btn-primary {
        background: linear-gradient(135deg, var(--saffron), var(--saffron-dark));
        color: #fff;
        border: none;
        border-radius: 40px;
        padding: 0.6rem 2rem;
        font-weight: 700;
        cursor: pointer;
        transition: 0.2s;
        box-shadow: 0 4px 12px rgba(232,119,34,0.3);
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
    }

    .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(232,119,34,0.4);
    }

    .toast-notification {
        position: fixed;
        bottom: 20px;
        right: 20px;
        background: var(--saffron-dark);
        color: #fff;
        padding: 12px 20px;
        border-radius: 8px;
        z-index: 1000;
        animation: slideIn 0.3s ease-out;
    }

    @keyframes slideIn {
        from {
            transform: translateX(100%);
            opacity: 0;
        }
        to {
            transform: translateX(0);
            opacity: 1;
        }
    }

    /* Responsive */
    @media (max-width: 768px) {
        .youtube-grid-enhanced {
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        }
        .page-header-icon {
            width: 50px;
            height: 50px;
            font-size: 1.5rem;
        }
        .page-header-text h1 {
            font-size: 1.5rem;
        }
        .control-buttons {
            justify-content: center;
        }
    }