/* New css */
/* Basic Reset and Font Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif; /* Switched to Inter for better readability */
    -webkit-tap-highlight-color: transparent; /* Removes blue highlight on mobile tap */
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; /* Smooth Theme Transition */
}

:root {
    /* Brand Colors */
    --primary-color: #e93636; 
    --primary-shadow: rgba(233, 54, 54, 0.3);
    --btn-green: #5cb85c;
    
    /* Light Mode (Default) Variables */
    --body-bg: #f2f4f8;
    --container-bg: #ffffff;
    --header-gradient-start: #ffffff;
    --header-gradient-end: #fafafa;
    --text-dark: #1e272e;
    --text-light: #808e9b;
    --tabs-container-bg: #f1f3f6;
    --tab-content-bg: #f9fbfc;
    --list-item-bg: #f0f2f5;
    --list-item-hover: #f5f5f5;
    --divider-color: #f0f0f0;
    --skeleton-base: #e0e0e0;
    --skeleton-highlight: #f5f5f5;
    --container-shadow: rgba(0,0,0,0.06);
    --modal-bg: #ffffff;
}

/* Dark Mode Override Variables */
.widget-plus.dark-mode{
    --body-bg: #121212;
    --container-bg: #1e1e1e;
    --header-gradient-start: #1e1e1e;
    --header-gradient-end: #2d2d2d; /* Slightly lighter for contrast */
    --text-dark: #ffffff;
    --text-light: #a0a0a0;
    --tabs-container-bg: #0d0d0d; /* Much darker (almost black) to separate from header */
    --tab-content-bg: #181818;
    --list-item-bg: #0d0d0d;
    --list-item-hover: #2a2a2a;
    --divider-color: #333333;
    --skeleton-base: #2c2c2c;
    --skeleton-highlight: #3a3a3a;
    --container-shadow: rgba(0,0,0,0.5);
    --modal-bg: #252525;
}
.widget-plus {
    display: flex;
    justify-content: center;
    background-color: var(--body-bg);
    min-height: 100vh;
    padding: 20px 0;
}

/* FIX 1: Force scrollbar to prevent horizontal layout shift */
html {
    overflow-y: scroll;
}

body {
    background-color: var(--body-bg);
    /* padding: 20px; */
}

.widget-plus-container {
    width: 100%;
    max-width: 500px; /* Optimal mobile width */
    background: var(--container-bg);
    padding: 0; /* Removing padding for a flush look */
    /* box-shadow: 0 20px 40px var(--container-shadow); */
    border-radius: 8px; /* Updated: Minimal/Square radius */
    height: fit-content;
    position: relative;
    overflow: hidden;
    /* border: 1px solid rgba(0,0,0,0.02); */
    min-height: 600px; /* Ensure height during loading */
    margin: 0 auto;
}

.widget-plus.dark-mode .popup-card {
    background-color: var(--tab-content-bg);
    /* box-shadow: 0 15px 35px rgba(255, 255, 255, .25); */
}

.widget-plus.dark-mode .popup-title,
.widget-plus.dark-mode .popup-description,
.widget-plus.dark-mode .progress-info {
    color: #fff;
}
/* --- Theme Toggle Button --- */
.theme-toggle {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    border-radius: 4px; /* Updated: Square look */
    background: var(--tabs-container-bg);
    color: var(--text-dark);
    border: none;
    display: flex; /* flex */
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    font-size: 18px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.theme-toggle:hover {
    transform: scale(1.05); /* Subtle scale instead of large jump */
}

/* --- Header / Video Info Area --- */
.video-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    padding: 30px 25px 20px 25px;
    background: linear-gradient(to bottom, var(--header-gradient-start), var(--header-gradient-end));
}

.video-thumbnail {
    width: 60%;
    aspect-ratio: 16/9;
    border-radius: 6px; /* Updated: Sharper corners */
    margin-top: 15px;
    object-fit: cover;
    background-color: #eee;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
}

.video-title {
    font-size: 18px;
    color: var(--text-dark);
    line-height: 1.4;
    font-weight: 700;
    margin-bottom: 5px;
    padding: 0 5px;
}

/* --- Tabs --- */
.tabs-container {
    display: flex;
    justify-content: center;
    background-color: var(--tabs-container-bg);
    padding: 5px; /* Slightly tighter padding for the pill look */
    margin: 0 25px 20px 25px;
    border-radius: 25px; /* Increased to match the buttons inside */
}

.tab {
    flex: 1;
    justify-content: center;
    padding: 10px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 20px; /* Requested 20px radius */
    color: var(--text-light);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    /* Improved transition: targeted properties + cubic-bezier for smoothness */
    transition: background-color 0.25s cubic-bezier(0.25, 0.8, 0.25, 1), color 0.25s ease;
}

.tab.active {
    color: #fff;
    background: var(--primary-color); /* Single solid color */
    box-shadow: none; 
}

/* --- New List Design (Grouped Style) --- */
.tab-content {
    background: var(--tab-content-bg); /* Subtle contrast for the list area */
    padding: 20px 0;
    /* FIX 2: Increased min-height to match Video list height, preventing vertical layout jump */
    min-height: 500px; 
}

.content-pane {
    display: none;
    /* Using a simple fade to avoid layout recalculation glitches */
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.content-pane.active {
    display: block;
}

.download-list {
    display: flex;
    flex-direction: column;
    background: transparent; /* Transparent background for separated items */
    margin: 0; 
    padding: 0 25px; /* Side padding to align with rest of design */
    border: none;
    gap: 12px; /* Space between items */
}

/* The List Item - Row Style */
.download-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: var(--list-item-bg);
    cursor: pointer;
    position: relative;
    transition: background-color 0.2s ease, transform 0.2s ease;
    border-radius: 12px; /* Added Border Radius */
    border: 1px solid var(--divider-color); /* Added Border for definition */
}

/* Divider Line - REMOVED since items are separated */
.download-item::after {
    display: none;
}

/* Touch interaction state */
.download-item:active, .download-item:hover {
    background-color: var(--list-item-hover);
    transform: scale(0.99); /* Subtle press effect */
}

/* Left Side */
.item-left {
    display: flex;
    align-items: center;
}

.item-details {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.item-res {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-dark);
}

.item-meta {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-light);
    display: flex;
    align-items: center;
    gap: 6px;
}

.dot {
    width: 3px;
    height: 3px;
    background-color: var(--text-light);
    border-radius: 50%;
    opacity: 0.5;
}

/* Right Side: Action Button */
.download-action-btn {
    padding: 10px 24px;
    border-radius: 6px; /* Reduced radius for a cleaner, squarer look */
    background: var(--primary-color);
    border: none;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    /* Removed transition and box-shadow for a flat, solid look */
}

.download-action-btn:hover {
    background-color: #d63031;
    /* Removed transform and box-shadow hover effects */
}

/* Removed :active state transform */

/* --- Modal Popup (Clean) --- */
/* Modal Overlay */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(2px);
    opacity: 1;
    transition: opacity 0.3s ease;
}

/* The Card Container */
.popup-card {
    background-color: #ffffff;
    width: 100%;
    max-width: 800px;
    border-radius: 12px;
    padding: 50px 40px;
    text-align: center;
    position: relative;
    /* box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25); */
    transform: scale(1);
    animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    min-height: 350px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Close Button */
.close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    cursor: pointer;
    color: #999;
    transition: color 0.2s;
    padding: 5px;
    display: none; /* Hidden by default */
}

.close-btn:hover {
    color: #555;
    background: unset;
}

/* Typography */
.popup-title {
    color: #444444;
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.2;
    width: 100%;
    white-space: normal; 
    overflow: hidden;
    text-overflow: ellipsis;
}
.overlay.error .popup-title {
    color: var(--primary-color);
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.2;
    transition: color 0.3s ease;
}
.overlay.error #badgeIcon, .overlay.error #badgeText{
    color: var(--primary-color);
}
.popup-description {
    color: #555555;
    font-size: 18px;
    font-weight: 400;
    margin-bottom: 30px;
    line-height: 1.5;
    max-width: 90%;
}

/* Quality Indicator */
.quality-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 30px; 
    color: #89d843;
}

.quality-text {
    font-size: 20px;
    font-weight: 500;
}

/* --- Action Wrapper (Prevents Layout Shift) --- */
.action-area {
    width: 100%;
    height: 80px; 
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- Progress Bar Styles (Updated for Infinite) --- */
.progress-container {
    width: 100%;
    max-width: 100%; 
    margin: 0 auto;
    text-align: left;
    display: block;
}

.progress-track {
    width: 100%;
    height: 14px;
    background-color: #e0e0e0;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #89d843, #7ac43b);
    border-radius: 10px;
    position: absolute;
    left: -40%;
    width: 40%; /* Shorter bar for the moving effect */
    box-shadow: 0 0 10px rgba(137, 216, 67, 0.4);
    animation: indeterminateSlide 1.5s infinite ease-in-out;
}

@keyframes indeterminateSlide {
    0% { left: -40%; width: 40%; }
    50% { width: 60%; } /* Stretches slightly in middle */
    100% { left: 100%; width: 40%; }
}
.close-btn-custom {
    position: unset;
    background: #fe0000;
    color: white;
    border: none;
    padding: 20px 60px;
    font-size: 24px;
    font-weight: 700;
    border-radius: 12px;
    cursor: pointer;
    width: auto;
    min-width: 280px;
    display: none;
    margin: 0;
    justify-content: center;
    align-items: center;
    box-shadow: none;
    text-decoration: none;
}
.close-btn-custom:hover, .close-btn-custom:active, .close-btn-custom:focus, .download-btn:hover, .download-btn:active, .download-btn:focus{
    text-decoration: none;
    color: white;
}
.quality-badge-error {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 30px;
}
/* --- Download Button Styles --- */
.download-btn {
    background: linear-gradient(180deg, #89d843 0%, #7ac43b 100%);
    color: white;
    border: none;
    padding: 20px 60px;
    font-size: 24px;
    font-weight: 700;
    border-radius: 12px;
    cursor: pointer;
    width: auto;
    min-width: 280px;
    display: none; 
    margin: 0;
    text-decoration: none;
    justify-content: center;
    align-items: center;
    gap: 0; 
    box-shadow: none;
}
#downloadBtn:hover {
    text-decoration: none;
}
/* Animations */
@keyframes popIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

/* --- RESPONSIVE DESIGN --- */
@media (max-width: 380px) {
    .download-list {
        padding: 5px;
    }
    .download-item {
        padding: 10px 5px;
    }
    .download-btn, .close-btn-custom{
        min-width: 100%;
    }
}
/* --- RESPONSIVE DESIGN --- */
@media (max-width: 768px) {
    .popup-card {
        padding: 40px 25px;
        max-width: 90%;
    }
    .popup-title { font-size: 28px; }
    .overlay.error .popup-title { font-size: 28px; }
    .popup-description { font-size: 16px; max-width: 100%; }
    .download-btn { padding: 16px 40px; font-size: 20px; width: 100%; }
}

@media (max-width: 480px) {
    .popup-card { padding: 30px 20px; border-radius: 16px; }
    .close-btn { top: 15px; right: 15px; }
    .popup-title { font-size: 22px; margin-bottom: 15px; }
    .overlay.error .popup-title { font-size: 22px; margin-bottom: 15px; }
    .popup-description { font-size: 14px; margin-bottom: 25px; }
    .quality-badge { margin-bottom: 25px; }
    .quality-text { font-size: 18px; }
    .download-btn { width: 100%; padding: 18px 0; font-size: 18px; }
    .progress-container { width: 100%; }
}

/* video */
.progress-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 16px;
    color: #666;
    font-weight: 500;
}

.progress-track {
    width: 100%;
    height: 14px;
    background-color: #e0e0e0;
    border-radius: 10px;
    overflow: hidden;
}

.progressfill {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, #89d843, #7ac43b);
    border-radius: 10px;
    transition: width 0.15s ease-out;
    box-shadow: 0 0 10px rgba(137, 216, 67, 0.4);
}

/* --- SKELETON LOADING STYLES --- */
.skeleton-wrapper {
    display: block; /* Visible by default */
    width: 100%;
    height: 100%;
}

.real-content-wrapper {
    display: none; /* Hidden by default */
}

.skeleton {
    background: var(--skeleton-base);
    /* Gradient adapted for variable colors is tricky in CSS vars directly, so keeping basic or ensuring update on class change. 
        We will use opacity to make it work on dark mode roughly. */
    background: linear-gradient(90deg, var(--skeleton-base) 8%, var(--skeleton-highlight) 18%, var(--skeleton-base) 33%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite linear;
    border-radius: 4px; /* Square skeleton blocks */
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* NEW: Wrapper for title lines to center them */
.sk-title-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px; /* Gap between title lines */
    margin-bottom: 5px;
}

.sk-title-line {
    height: 18px; /* Slightly smaller than 24px for text lines */
    border-radius: 4px;
}
.sk-title-1 { width: 90%; }
.sk-title-2 { width: 60%; }

.sk-thumb {
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: 6px; /* Square */
    margin-top: 15px;
}

/* NEW: Mimic the tab-content background */
.sk-content-wrapper {
    background: var(--tab-content-bg);
    padding: 20px 0;
    min-height: 500px;
    /* Match the real content animation or layout shift prevention */
}

.sk-list-container {
    border: none;
    padding: 0 25px; /* Match download-list padding exactly */
    display: flex;
    flex-direction: column;
    gap: 12px; /* Match download-list gap */
}

.sk-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border: 1px solid var(--divider-color); /* Match download-item border */
    border-radius: 12px; /* Match download-item radius */
    background: var(--list-item-bg);
}

.sk-left {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 50%;
}

.sk-line-1 {
    height: 18px;
    width: 80%;
    border-radius: 4px;
}

.sk-line-2 {
    height: 14px;
    width: 50%;
    border-radius: 4px;
}

.sk-btn {
    width: 100px;
    height: 36px;
    border-radius: 6px; /* Match new button shape */
}