/*
 * Plugin CSS for Keehan's TwitchCon Partners
 */

#creatorListWrapper.container {
    width: 100%;
    max-width: 900px;
    background-color: rgba(255, 255, 255, 0.8);
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    margin: 40px auto;
    color: #333;
}

#creatorListWrapper h2 {
    text-align: center;
    margin-bottom: 15px; /* Adjusted margin to make space for referral message */
    color: #333;
}

.referral-message {
    text-align: center;
    font-size: 14px !important; /* User's provided size */
    color: #666;
    margin-bottom: 20px;
}
.referral-message a {
    color: #6441a5; /* Twitch purple */
    text-decoration: underline;
}
.referral-message a:hover {
    color: #4b2f82;
}


.search-and-filter-wrapper {
    display: flex;
    flex-wrap: wrap; /* Allows items to wrap on smaller screens */
    gap: 10px; /* Space between search and filter */
    margin-bottom: 20px;
    align-items: center;
    justify-content: center; /* Center items horizontally */
}

#searchInput {
    flex-grow: 1; /* Allows input to take available space */
    min-width: 200px; /* Ensure input doesn't get too small */
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 16px;
    box-sizing: border-box;
    background-color: #fff;
    color: #333;
}

#searchInput::placeholder {
    color: #888;
}

#sortFilter {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #fff;
    color: #333;
    font-size: 16px;
    cursor: pointer;
    outline: none; /* Remove outline on focus */
    -webkit-appearance: none; /* Remove default dropdown arrow on WebKit browsers */
    -moz-appearance: none; /* Remove default dropdown arrow on Firefox */
    appearance: none; /* Remove default dropdown arrow */
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23333%22%20d%3D%22M287%2069.9H5.4c-7.2%200-10.9%208.6-6.4%2014L140%20227.6c4.5%204.5%2012.4%204.5%2016.9%200l140.9-143.7c4.4-5.4.7-14-6.5-14z%22%2F%3E%3C%2Fsvg%3E'); /* Custom arrow */
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px;
    padding-right: 30px; /* Make space for the custom arrow */
}
#sortFilter:focus {
    border-color: #6441a5;
    box-shadow: 0 0 0 2px rgba(100, 65, 165, 0.2);
}


.creator-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 15px;
}

.creator-item {
    background-color: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); /* Keep a subtle initial outer shadow for all items */
    transition: transform 0.2s ease-in-out, box-shadow 0.3s ease, border-color 0.3s ease;
}

/* Standard outer shadow on hover for ALL items (this is the base, overridden by combined shadows below) */
.creator-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* This is the general outer shadow for hover */
}


.creator-item .creator-link-wrapper {
    text-decoration: none;
    color: #333;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.creator-item img {
    width: 80px;
    height: 80px;
    border-radius: 11px;
    object-fit: cover;
    margin-bottom: 10px;
    border: 2px solid #6441a5; /* Keep the purple border on the image */
    transition: box-shadow 0.3s ease;
}
.creator-item:hover img {
    box-shadow: 0 0 15px 5px rgba(100, 65, 165, 0.7);
}

/* Realkeehan Glow (Vivid Violet) */
.creator-item.realkeehan-glow-box {
    border-color: #9400D3; /* Dark Violet */
    box-shadow: inset 0 0 6px 2px rgba(148, 0, 211, 0.6); /* Tighter, vivid violet inner glow */
}
.creator-item.realkeehan-glow-box:hover {
    box-shadow: inset 0 0 11px 5px rgba(148, 0, 211, 0.9), /* Intensified vivid violet inner glow */
                0 15px 5px rgba(100, 65, 165, 0.7); /* ADDED: Standard outer shadow */
}

/* Friend Glow (Fuschia) */
.creator-item.friend-box-glow {
    border-color: #FF00FF; /* Fuschia border for the box */
    box-shadow: inset 0 0 6px 2px rgba(255, 0, 255, 0.6); /* Smaller blur and spread for a tighter glow */
}
.creator-item.friend-box-glow:hover {
    box-shadow: inset 0 0 10px 5px rgba(255, 0, 255, 0.9), /* Intensified but with controlled spread */
                0 4px 12px rgba(0, 0, 0, 0.15); /* ADDED: Standard outer shadow */
}

/* Featured Glow (Blue-Green) */
.creator-item.featured-glow-box {
    border-color: #00CED1; /* Dark Turquoise / Blue-Green */
    box-shadow: inset 0 0 6px 2px rgba(0, 206, 209, 0.6); /* Even smaller, subtle blue-green inner glow */
}
.creator-item.featured-glow-box:hover {
    box-shadow: inset 0 0 10px 4px rgba(0, 206, 209, 0.9), /* Intensified blue-green inner glow */
                0 4px 12px rgba(0, 0, 0, 0.15); /* ADDED: Standard outer shadow */
}


.creator-item a {
    text-decoration: none;
    color: #333;
    font-weight: bold;
    font-size: 1.1em; /* Adjusted to make space for follower count */
    word-break: break-word; /* Ensure long names wrap */
    overflow-wrap: break-word;
}

.creator-item a:hover {
    color: #6441a5;
}

.creator-item .follower-count {
    font-size: 0.85em;
    color: #555;
    margin-top: 5px;
}

.no-results {
    grid-column: 1 / -1;
    text-align: center;
    color: #555;
    padding: 20px;
}

.loading-message {
    grid-column: 1 / -1;
    text-align: center;
    color: #888;
    padding: 20px;
}