/* Basic styling for the follow/unfollow button (emoji-only) */
.my-content-follower-wrapper {
    margin-top: 15px;
    text-align: right; /* Adjust as needed */
}

.my-content-follower-button {
    /* Remove all background, border, and padding to make it just the emoji */
    background: none; /* No background color */
    border: none;     /* No border */
    padding: 0;       /* No padding */
    color: inherit;   /* Inherit text color from parent, or set a specific color if desired */
    cursor: pointer;
    font-size: 2em; /* Make emojis larger if needed */
    line-height: 1; /* Helps with vertical alignment of emojis */
    display: inline-block; /* Helps with clickable area and alignment */
    /* Remove transition if you don't want any visual change on hover */
    transition: none; /* No transition for hover effects */
}

/* Optional: Slight opacity change on hover to indicate it's clickable */
.my-content-follower-button:hover {
    opacity: 0.7;
}

/* No specific background/color for unfollow state if only emoji is desired */
.my-content-follower-button.unfollow-button {
    /* No specific styling needed here if only the emoji itself changes */
}

.my-content-follower-button:disabled {
    opacity: 0.5; /* Dim button when disabled */
    cursor: not-allowed;
}

/* New styles for individual emoji sizing */
.my-content-follower-button .mcf-pin {
    font-size: 2em; /* Make the pin larger, relative to button's font-size */
    vertical-align: middle; /* Helps align with indicator */
    line-height: 1; /* Keep line height tight for emoji */
    display: inline-block; /* Essential for sizing and margin */
    margin-right: 0.1em; /* Small space between pin and indicator */
}

.my-content-follower-button .mcf-indicator {
    font-size: 0.8em; /* Make the indicator smaller, relative to button's font-size */
    vertical-align: middle; /* Helps align with pin */
    line-height: 1; /* Keep line height tight for emoji */
    display: inline-block; /* Essential for sizing and margin */
}

/* You might need to adjust the overall font-size of the button now */
.my-content-follower-button {
    font-size: 2em; /* This will be the base for .mcf-pin and .mcf-indicator */
}

/* Styling for the login prompt button */
.my-content-follower-button.login-prompt-button {
    /* Example: make it slightly dimmed or have a different hover effect */
    opacity: 0.8;
}

.my-content-follower-button.login-prompt-button:hover {
    opacity: 1; /* Brighten on hover */
    /* You could add a subtle background color or border here if desired */
    /* background-color: rgba(0, 115, 170, 0.1); */
}
/* Styling for the unfollow button on the "My Followed Content" page */
.my-followed-item-unfollow-wrapper {
    margin-left: auto; /* Pushes the unfollow button to the right */
    padding-left: 15px; /* Add some space if needed */
}

/* ------------------------------------------- */
/* --- Cinesist Dashboard Styles --- */
/* ------------------------------------------- */

/* 0. CSS Variables (Color Palette & Typography) */
/* Re-defining here for clarity, but these should ideally be at the very top of your main theme/plugin CSS */
:root {
    --cinesist-black: #000;
    --cinesist-dark-grey: #1a1a1a;
    --cinesist-dark-grey-lighter: #2a2a2a;
    --cinesist-light-grey: #cccccc;
    --cinesist-text-color: #f0f0f0; /* Off-white for general text */
    --cinesist-header-text-color: #f0f0f0; /* Off-white for header text */
    --cinesist-heading-color: #e2b304; /* Cinesist Gold for headings */
    --cinesist-accent-color: #e50914; /* Cinesist Red for accents */
    --cinesist-button-text-color: #f0f0f0; /* White for button text */
    --cinesist-border-color: rgba(255, 255, 255, 0.1); /* Subtle white border */
    --cinesist-box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    --cinesist-purple: #d102d1; /* New: Devil Purple for specific elements */
    --cinesist-orange: #ff6600; 

    /* Typography */
    --cinesist-body-font: 'Montserrat', sans-serif;
    --cinesist-heading-font: 'Oswald', sans-serif;

    /* Spacing */
    --cinesist-spacing-unit: 1.5rem; /* ~24px */

    /* Define --base for general link color consistency (was missing from your root) */
    --base: var(--cinesist-text-color); /* Explicitly set --base to Cinesist Off-white */
}

/* Base styles for the dashboard container */
.my-content-follower-dashboard {
    background-color: var(--cinesist-dark-grey);
    color: var(--cinesist-text-color);
    padding: var(--cinesist-spacing-unit);
    margin: 0 auto 2rem auto; /* Center and add bottom margin */
    max-width: 1200px; /* Max width for content area */
    border-radius: 8px;
    box-shadow: var(--cinesist-box-shadow);
    font-family: var(--cinesist-body-font);
}

/* Dashboard main title */
.mcf-dashboard-title {
    font-family: var(--cinesist-heading-font);
    color: var(--cinesist-heading-color);
    font-size: clamp(1.8rem, 4vw, 3rem); /* Responsive font size */
    text-align: center;
    margin-bottom: var(--cinesist-spacing-unit);
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--cinesist-accent-color); /* Edgy red underline */
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.mcf-dashboard-title .dashicons {
    color: var(--cinesist-purple); /* Or gold, depending on preference */
    font-size: clamp(1.5rem, 3.5vw, 2.5rem);
    vertical-align: middle;
    margin: 0 0.5rem;
}

/* Grid for followed items */
.mcf-followed-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); /* Responsive columns */
    gap: var(--cinesist-spacing-unit); /* Spacing between cards */
    list-style: none; /* Remove default list styling */
    padding: 0;
    margin: 0;
}

/* Individual followed item card */
.mcf-followed-item-card {
    background-color: var(--cinesist-dark-grey-lighter);
    border: 1px solid var(--cinesist-border-color);
    border-radius: 6px;
    overflow: hidden; /* Ensures image corners are rounded */
    box-shadow: var(--cinesist-box-shadow);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out, border-color 0.2s ease-in-out;
    display: flex; /* Flex container for internal content */
    flex-direction: column;
}

.mcf-followed-item-card:hover {
    transform: translateY(-5px) scale(1.01); /* Lift and slightly enlarge on hover */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
    border-color: var(--cinesist-purple); /* Edgy border highlight on hover */
}

/* Header within the card */
.mcf-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background-color: var(--cinesist-dark-grey); /* Slightly darker header */
    border-bottom: 1px solid var(--cinesist-border-color);
}

/* Content Type Label (e.g., 'Movie', 'Category') */
.mcf-content-type-label {
    background-color: var(--cinesist-purple); /* Devil Purple for type tags */
    color: var(--cinesist-button-text-color);
    padding: 0.25rem 0.6rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Unfollow button inside the card */
.mcf-card-unfollow-btn {
    color: var(--cinesist-button-text-color);
    border: none;
    border-radius: 4px;
    padding: 0.4rem 0.7rem;
    cursor: pointer;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    transition: background-color 0.2s ease-in-out, transform 0.1s ease-in-out;
}

.mcf-card-unfollow-btn:hover {
    transform: scale(1.05); /* Slight pop */
}

/* Pin and indicator emojis within the button */
.mcf-card-unfollow-btn .mcf-pin,
.mcf-card-unfollow-btn .mcf-indicator {
    font-size: 1.1em; /* Adjust size if emojis are too small/large */
    line-height: 1; /* Align text vertically */
}

/* Link covering the card content */
.mcf-card-link {
    text-decoration: none;
    color: inherit; /* Inherit text color from parent card */
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Allows content to take available space */
}

/* Thumbnail wrapper */
.mcf-card-thumbnail {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio (9 / 16 * 100) */
    overflow: hidden;
    background-color: var(--cinesist-dark-grey); /* Fallback background */
    border-bottom: 1px solid var(--cinesist-border-color); /* Separator */
}

.mcf-card-thumbnail img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cover the area, crop if necessary */
    display: block;
    transition: transform 0.3s ease-in-out;
}

.mcf-followed-item-card:hover .mcf-card-thumbnail img {
    transform: scale(1.05); /* Slight zoom on image hover */
}

/* Placeholder images/icons for missing thumbnails */
.mcf-placeholder-image {
    background-color: var(--cinesist-dark-grey);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3rem; /* For icon placeholders if you switch to them */
    color: var(--cinesist-light-grey);
}

.mcf-placeholder-tax {
    /* Specific styling for taxonomy placeholders if different */
    background-color: var(--cinesist-dark-grey);
    /* For a more edgy look, you could use a distressed film strip image as a background or a subtle grid pattern */
}


/* Card Title */
.mcf-card-title {
    font-family: var(--cinesist-heading-font);
    color: var(--cinesist-heading-color); /* Gold for titles */
    font-size: clamp(1.1rem, 2.5vw, 1.5rem); /* Responsive title font size */
    margin: 1rem 1rem 0.5rem 1rem;
    line-height: 1.3;
    flex-grow: 1; /* Ensures title pushes unfollow button down if it's below */
    text-align: center;
    text-transform: uppercase;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Limit to 2 lines */
    -webkit-box-orient: vertical;
}

.mcf-card-title:hover {
    text-decoration: underline var(--cinesist-purple); /* Underline on hover with purple */
}

/* "No Content" Message Styling */
.mcf-no-content-message {
    text-align: center;
    padding: var(--cinesist-spacing-unit) 2rem;
    font-size: 1.1rem;
    line-height: 1.6;
    background-color: var(--cinesist-dark-grey-lighter);
    border: 1px solid var(--cinesist-accent-color); /* Red border for a "warning" feel */
    border-radius: 8px;
    margin-top: var(--cinesist-spacing-unit);
    box-shadow: var(--cinesist-box-shadow);
}

.mcf-no-content-message p {
    margin-bottom: 1rem;
    color: var(--cinesist-text-color);
}

.mcf-no-content-message a {
    color: var(--cinesist-heading-color); /* Gold links */
    text-decoration: none;
    font-weight: bold;
    transition: color 0.2s ease-in-out, text-decoration 0.2s ease-in-out;
}

.mcf-no-content-message a:hover {
    color: var(--cinesist-purple); /* Purple on hover */
    text-decoration: underline;
}

.mcf-no-content-hint {
    font-size: 0.9em;
    color: var(--cinesist-light-grey);
    font-style: italic;
    margin-top: 1.5rem;
}

.mcf-pin-icon-text {
    font-size: 1.2em; /* Make the pin emoji slightly larger */
    color: var(--cinesist-heading-color); /* Gold pin */
}

/* Logged out message */
.mcf-dashboard-logged-out {
    text-align: center;
    padding: var(--cinesist-spacing-unit) 2rem;
    background-color: var(--cinesist-dark-grey-lighter);
    border: 1px solid var(--cinesist-purple); /* Purple border for "intrigue" */
    border-radius: 8px;
    margin-top: var(--cinesist-spacing-unit);
    box-shadow: var(--cinesist-box-shadow);
    color: var(--cinesist-text-color);
}

.mcf-login-button {
    display: inline-block;
    background-color: var(--cinesist-orange); /* Orange for login button */
    color: var(--cinesist-button-text-color);
    padding: 0.8rem 1.5rem;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.2s ease-in-out, transform 0.1s ease-in-out;
    margin-top: 1rem;
}

.mcf-login-button:hover {
    background-color: #e65c00; /* Darker orange on hover */
    transform: translateY(-2px);
}

/* Responsive adjustments */
@media (max-width: 992px) {
    .mcf-followed-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* 2 columns on tablets */
        gap: 1.25rem;
    }
}

@media (max-width: 768px) {
    .mcf-dashboard-title {
        font-size: clamp(1.5rem, 6vw, 2.5rem);
    }
    .mcf-followed-grid {
        grid-template-columns: 1fr; /* Single column on mobile */
        gap: 1rem;
    }
    .my-content-follower-dashboard {
        padding: 1rem;
        margin: 0 auto 1.5rem auto;
    }
    .mcf-no-content-message {
        padding: 1.5rem 1rem;
        font-size: 1rem;
    }
}

/* Make the button on the follows page a bit smaller if desired */
.my-followed-item-unfollow-wrapper .my-content-follower-button {
    font-size: 1.5em; /* Adjust size relative to regular button */
    /* You might want a slight border or background to make it stand out on the list */
    /* border: 1px solid #ccc; */
    /* background-color: #f9f9f9; */
    /* border-radius: 50%; /* Make it round if you like */
    /* width: 40px; height: 40px; */
    /* display: flex; align-items: center; justify-content: center; */
}

/* ------------------------------------------- */
/* --- Cinesist Dashboard Tab Styles --- */
/* ------------------------------------------- */

/* Tab Navigation Container */
.mcf-tabs-navigation {
    display: flex;
    flex-wrap: wrap; /* Allow tabs to wrap to next line on smaller screens */
    justify-content: center;
    gap: 0.75rem; /* Spacing between tab buttons */
    margin-top: var(--cinesist-spacing-unit);
    margin-bottom: var(--cinesist-spacing-unit); /* Space below tabs */
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--cinesist-border-color); /* Subtle separator */
}

/* Individual Tab Button */
.mcf-tab-button {
    background-color: var(--cinesist-dark-grey-lighter);
    color: var(--cinesist-light-grey); /* Inactive text color */
    border: 1px solid var(--cinesist-border-color);
    padding: 0.6rem 1.2rem;
    border-radius: 5px;
    cursor: pointer;
    font-family: var(--cinesist-body-font);
    font-size: 0.95rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out, transform 0.1s ease-in-out;
    flex-shrink: 0; /* Prevent buttons from shrinking */
}

.mcf-tab-button:hover:not(.active) {
    background-color: #3a3a3a; /* Slightly darker on hover for inactive tabs */
    color: var(--cinesist-text-color); /* Brighter on hover */
    border-color: var(--cinesist-purple); /* Purple highlight on hover */
    transform: translateY(-2px); /* Slight lift */
}

/* Active Tab Button */
.mcf-tab-button.active {
    background-color: var(--cinesist-heading-color); /* Cinesist Gold for active tab */
    color: var(--cinesist-dark-grey); /* Dark text on gold */
    border-color: var(--cinesist-heading-color); /* Gold border for active */
    cursor: default; /* No pointer cursor on active tab */
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3); /* Subtle shadow for active tab */
}

.mcf-tab-button.active:hover {
    background-color: var(--cinesist-heading-color); /* Keep gold on hover for active */
    color: var(--cinesist-dark-grey);
    transform: none; /* No lift on active hover */
}

/* Tab Content Wrapper (optional, if you want specific styling around the grid itself inside tabs) */
.mcf-tab-content-wrapper {
    /* Add padding, border, or background if you want to visually separate the content area */
    padding-top: 1rem; /* Space between tabs and content grid */
}

/* Responsive adjustments for tabs */
@media (max-width: 768px) {
    .mcf-tabs-navigation {
        justify-content: flex-start; /* Align tabs to the left on small screens */
        gap: 0.5rem;
        overflow-x: auto; /* Enable horizontal scrolling if too many tabs */
        padding-bottom: 0.75rem; /* More padding if scrollbar is present */
        -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
        white-space: nowrap; /* Prevent buttons from breaking onto new lines within a scrollable area */
    }

    .mcf-tab-button {
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
    }
}

/*
// --- Background Image/Emoji Styling (Commented Out) ---
// If you want to use background images for your emojis instead of text:
.my-content-follower-button.follow-button {
    text-indent: -9999px; // Hides the text, but keeps it for screen readers
    overflow: hidden;
    background-image: url('path/to/your/thumbtack-plus.png'); // Replace with your image path
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 30px; // Adjust width/height for your image
    height: 30px;
    padding: 0; // Remove padding if using fixed width/height
    background-color: transparent; // No background color if image is full
    border: none;
    box-shadow: none;
}

.my-content-follower-button.unfollow-button {
    text-indent: -9999px;
    overflow: hidden;
    background-image: url('path/to/your/thumbtack-minus.png'); // Replace with your image path
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 30px;
    height: 30px;
    padding: 0;
    background-color: transparent;
    border: none;
    box-shadow: none;
}
*/