/* --- Gradient Gallery Page Styles --- */

/* This creates the 2-column layout, making cards wider */
.gradient-gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
}

/* Responsive: On smaller screens, go back to 1 column */
@media (max-width: 900px) {
    .gradient-gallery-grid {
        grid-template-columns: 1fr;
    }
}

/* --- New Wide Card Styles --- */
.gg-card {
    background: var(--card);
    border-radius: 16px;
    box-shadow: var(--shadow);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.gg-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0,0,0,0.15);
}

.gg-card-preview {
    display: flex;
    height: 200px; /* Taller preview area */
    border-bottom: 1px solid var(--border);
    overflow: hidden; /* Ensures steps don't break layout */
}

/* --- Styles for Gradient Hover Effect (from gradient-style.css) --- */
.gg-card-step {
    flex-grow: 1;
    transition: flex-grow 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), 
                background-color 0.3s; 
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
}

.gg-card-step:hover {
    flex-grow: 3;
}

.gg-hex-code {
    /* --- NEW POSITIONING --- */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none; /* Prevents text from stealing the mouse hover */
    /* --- END NEW --- */
    
    font-weight: 700;
    font-size: 14px;
    color: #ffffff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    white-space: nowrap;
}

.gg-card-step:hover .gg-hex-code {
    opacity: 1;
}

.gg-card-step.is-light-bg .gg-hex-code {
    color: #1a1a1a;
    text-shadow: none;
}


.gg-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    cursor: pointer;
}

.gg-card-actions {
    display: flex;
    align-items: center;
    gap: 12px; /* Space between like and share */
}

.gg-card-time {
    font-size: 13px;
    color: var(--muted);
}

/* --- Correct Like Button (Pill Style) --- */
.gg-like-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--chip);
    padding: 6px 12px;
    border-radius: 20px;
    cursor: pointer;
    border: 1px solid var(--border);
    transition: background-color 0.2s;
    /* Reset button defaults */
    font-family: Inter, system-ui;
}

.gg-like-btn:hover {
    background-color: var(--bg);
}

.gg-heart-icon {
    width: 18px;
    height: 18px;
    stroke: var(--accent-color); /* Uses the dynamic accent color */
    stroke-width: 2;
    fill: none;
    transition: fill 0.2s ease, stroke 0.2s ease;
}

.gg-like-btn.liked .gg-heart-icon {
    fill: var(--accent-color);
    stroke: var(--accent-color);
}

.gg-like-count {
    font-weight: 700;
    font-size: 13px;
    color: var(--fg);
}

/* --- Correct Share Button (Icon + Text Style) --- */
.gg-share-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 700;
    color: var(--muted);
    cursor: pointer;
    transition: color 0.2s ease;
    /* Reset button defaults */
    background: none;
    border: none;
    padding: 0;
    font-family: Inter, system-ui;
}

.gg-share-btn:hover {
    color: #3498db; /* Blue hover from palettes-style.css */
}

.gg-share-icon {
    fill: none;
    stroke: currentColor; /* Use text color for stroke */
    width: 16px; 
    height: 16px;
    stroke-width: 2.5px; 
}

/* The share count should inherit the button's color */
.gg-share-count {
    font-weight: 700;
    font-size: 13px;
    color: inherit; 
}

/* Re-using the icon button styles from the main page */
.icon-btn {
    background: none;
    border: none;
    padding: 5px;
    cursor: pointer;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 6px;
    transition: color 0.2s, background-color 0.2s;
}

.icon-btn:hover {
    color: var(--fg);
    background: var(--chip);
}

.icon-btn.like-btn.liked {
    color: var(--accent-color);
}

.icon-btn.like-btn.liked svg {
    fill: var(--accent-color);
}

/* --- Load More Button (from style.css) --- */
.load-more-container {
    text-align: center;
    margin-top: 30px;
}
.action-btn-outline {
    height: 40px;
    padding: 0 30px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    border: 1px solid var(--border);
    transition: background-color 0.2s, color 0.2s;
    font-family: Inter, system-ui;
    background: transparent;
    color: var(--fg);
}
.action-btn-outline:hover {
    background: var(--chip);
}
.hidden {
    display: none;
}

/* Style for the Share icon */
.icon-btn[data-action="share"] svg {
    fill: currentColor;
}

/* Styles for the Like icon (makes it outlined by default)
*/
.icon-btn.like-btn svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 2px;
}

/* Styles for the Liked icon (fills it in)
*/
.icon-btn.like-btn.liked svg {
    fill: currentColor;
    stroke: currentColor;
}

/* --- Styles for Palette Filters (from palettes-style.css) --- */
.palette-filters {
    display: flex;
    justify-content: space-between; /* Pushes button to the right */
    align-items: center; /* Vertically aligns items */
    gap: 10px;
    background: var(--chip);
    padding: 6px;
    
    margin-bottom: 30px;
    border-radius: 20px;
}

/* Groups the left-side filter buttons */
.palette-filters > div {
    display: flex;
    gap: 10px;
}

.filter-btn {
    background: transparent;
    border: none;
    color: var(--muted);
    padding: 8px 16px;
    border-radius: 16px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    font-family: Inter;
}

.filter-btn.active {
    background: var(--card);
    color: var(--fg);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* --- New Styles for Avatar and Footer Alignment --- */

/* Group the time and avatar */
.gg-time-avatar-group {
    display: flex;
    align-items: center;
    gap: 8px; /* Space between the time and the avatar */
}

/* Style the generated avatar */
.gg-user-avatar {
    width: 32px; /* Consistent size */
    height: 32px;
    border-radius: 50%; /* Make it round */
    border: 1px solid var(--border);
    background: var(--bg);
    flex-shrink: 0;
}

/* --- New Generate Button Style --- */
.filter-generate-btn {
    background: var(--accent-color);
    color: #fff;
    padding: 8px 16px;
    border-radius: 16px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    font-family: Inter, sans-serif;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
}

.filter-generate-btn:hover {
    filter: brightness(1.1);
}

.filter-generate-btn svg {
    width: 16px;
    height: 16px;
}