/*
 * Centered Two-column Layout: Main content + Sidebar
 * This file provides a robust, centered two-column layout.
 */
*, *::before, *::after {
    box-sizing: border-box;
}

.page-wrapper {
    display: flex;
    justify-content: center; /* Center the flex items */
    align-items: flex-start;
    gap: 2rem; /* 32px */
    padding: 2rem; /* Add more generous padding around the content */
    max-width: 1550px; /* Accommodates content + padding */
    margin: 0 auto; /* Center the entire layout on the page */
}

/*
 * Main content area.
 */
.page-wrapper > .container {
    flex: 0 1 1200px;  /* Don't grow, allow shrinking, base width 1200px */
    min-width: 0;      /* A critical fix for flex items to prevent them from overflowing */
    max-width: 1200px; /* Increased max-width */
}

/*
 * Sidebar for enhancement tools.
 */
.sidebar {
    flex: 0 0 280px; /* Prevent the sidebar from growing or shrinking */
    width: 280px;
    position: sticky; /* Make it stick to the top on scroll */
    top: 2rem; /* Match the wrapper's padding */

    /* Card-like styles to match the main container */
    backdrop-filter: saturate(140%) blur(12px);
    background: linear-gradient(180deg, #ffffffcc 0%, #ffffffb3 100%);
    border: 1px solid rgba(255, 255, 255, .6);
    border-radius: var(--radius-lg, 22px);
    box-shadow: var(--shadow, 0 10px 30px rgba(15, 23, 42, 0.06));
    padding: 20px 18px;
}

/*
 * Sidebar-specific component styles
 */

/* Styling for the enhancement tool buttons in the sidebar */
.sidebar .enhancement-options {
    display: flex;
    flex-direction: column;
    gap: 12px; /* Add vertical space between buttons */
    margin-top: 20px; /* Add space above the button group */
}

.sidebar .enhancement-options .download-btn {
    display: flex; /* Align icon and text */
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 10px 12px;
    font-size: 0.95rem;
    font-weight: 600;
    border: 1px solid transparent;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.2s ease;
}

/* Individual button colors */

/* 1. Browser Plugin (Chrome-like blue) */
.sidebar .enhancement-options a:nth-of-type(1) {
    background: linear-gradient(135deg, #4285F4, #3b78e7);
    color: white;
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 6px 16px rgba(66, 133, 244, 0.25);
}
.sidebar .enhancement-options a:nth-of-type(1):hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
    box-shadow: 0 8px 20px rgba(66, 133, 244, 0.3);
}


/* 2. Tampermonkey Script (Greyscale/dark) */
.sidebar .enhancement-options a:nth-of-type(2) {
    background: linear-gradient(135deg, #424242, #333333);
    color: white;
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}
.sidebar .enhancement-options a:nth-of-type(2):hover {
    transform: translateY(-1px);
    filter: brightness(1.1);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

/* 3. Install Tutorial (Green for help/info) */
.sidebar .enhancement-options a:nth-of-type(3) {
    background: linear-gradient(135deg, #34A853, #2e964a);
    color: white;
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 6px 16px rgba(52, 168, 83, 0.25);
}
.sidebar .enhancement-options a:nth-of-type(3):hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
    box-shadow: 0 8px 20px rgba(52, 168, 83, 0.3);
}


/*
 * Responsive behavior: On screens smaller than the two-column layout,
 * stack the main content and sidebar vertically.
 */
@media (max-width: 1550px) { /* Adjusted breakpoint for wider container */
    .page-wrapper {
        flex-direction: column;
        align-items: center; /* Center the items when stacked */
        padding: 1rem; /* Reduce padding on smaller screens */
    }

    /* Ensure the container takes full width in stacked view */
    .page-wrapper > .container {
        width: 100%;
        flex-basis: auto; /* Reset flex-basis */
    }

    .sidebar {
        position: static; /* Remove stickiness on smaller screens */
        width: 100%;
        max-width: 1200px; /* Match the container's max-width for a consistent look */
        margin-top: 2rem;
    }
}