/**
 * Season Card Widget Styles
 *
 * External stylesheet for Season Card widget.
 * Replaces inline <style> blocks to eliminate render-blocking CSS.
 *
 * Performance benefits:
 * - Browser can cache this file across pages
 * - No render-blocking inline CSS
 * - Reduces HTML payload size
 * - Supports HTTP/2 multiplexing
 *
 * @package VirtualeaguesSeasonCard
 * @version 2.0
 */

/* ============================================
   Base Styles
   ============================================ */

.season-card {
    position: relative;
    z-index: 5;
    max-width: 18rem;
    min-height: 20rem;
    width: 90%;
    display: grid;
    place-content: center;
    place-items: center;
    text-align: center;
    box-shadow: 1px 12px 25px rgba(0, 0, 0, 0.78);
    border-radius: 2.25rem;
    margin: 1rem auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    transition: none;
    transform: none;
}

/* Border gradient effect using pseudo-element */
.season-card::before {
    position: absolute;
    content: "";
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 2.25rem;
    z-index: -1;
    border: 0.155rem solid transparent;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
}

/* ============================================
   Header Styles
   ============================================ */

.season-card-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.8em 1.5em 0 1.5em;
}

.season-card-date {
    color: #ddd;
    font-size: 0.9rem;
}

.season-card-btn-view {
    color: #fff;
    font-weight: 600;
    padding: 0.3em 1em;
    border-radius: 1em;
    background: rgba(255, 255, 255, 0.1);
    font-size: 0.9rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

.season-card-btn-view:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    text-decoration: none;
}

/* ============================================
   Body Styles
   ============================================ */

.season-card-body {
    position: absolute;
    width: 100%;
    display: block;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0.7em 1.25em 0.5em 1.5em;
}

.season-card-logo {
    margin-bottom: 1rem;
}

.season-card-logo img {
    max-height: 3rem;
    width: auto;
}

.season-card-body h3 {
    color: #fff;
    font-size: 1.375rem;
    margin-top: 0.625em;
    margin-bottom: 0.188em;
    text-transform: capitalize;
    font-weight: 600;
}

.season-card-body p {
    color: #ddd;
    font-size: 1rem;
    letter-spacing: 0.031rem;
    margin-top: 0;
}

/* ============================================
   Progress Bar Styles
   ============================================ */

.season-card-progress {
    margin-top: 0.938rem;
    position: relative;
}

.season-card-progress-bar {
    position: relative;
    width: 80%;
    background: #363636;
    height: 0.313rem;
    display: block;
    border-radius: 3.125rem;
    margin-right: 20%;
}

/* Progress bar fill - uses CSS variable set in template */
.season-card-progress-bar::after {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    height: 100%;
    display: block;
    border-radius: 3.125rem;
    width: var(--progress-width, 0%);
    transition: width 0.3s ease;
}

.season-card-progress span:first-of-type {
    color: #fff;
    text-align: left;
    font-weight: 600;
    width: 100%;
    display: block;
    margin-bottom: 0.313rem;
}

.season-card-progress-value {
    position: absolute;
    top: 0.313rem;
    right: 5%;
    margin-top: 0.313rem;
    text-align: right;
    display: block;
    color: #fff;
    font-size: 0.9rem;
    width: 3rem;
}

/* ============================================
   Footer Styles
   ============================================ */

.season-card-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    border-top: 0.063rem solid #292929;
    display: flex;
    justify-content: space-between;
    padding: 0.7em 1.25em 0.5em 1.5em;
    background: #151419;
    border-bottom-left-radius: 2.25rem;
    border-bottom-right-radius: 2.25rem;
}

/* Team Avatars */
.season-card-teams {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
}

.season-card-teams li {
    list-style-type: none;
    display: flex;
    margin-right: -0.4rem;
    align-items: center;
    justify-content: center;
}

.season-card-teams li img {
    border-radius: 50%;
    width: 1.875rem;
    height: 1.875rem;
    object-fit: cover;
    border: 2px solid #151419;
    display: block;
    flex-shrink: 0;
}

.season-card-btn-add {
    width: 1.875rem;
    height: 1.875rem;
    border-radius: 50%;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 0.2rem;
    font-size: 0.75rem;
    font-weight: bold;
    text-decoration: none;
}

.season-card-btn-add svg {
    width: 1rem;
    height: 1rem;
}

.season-card-btn-countdown {
    background: #222127;
    color: #fff;
    border-radius: 2em;
    padding: 0.625rem 1.5rem;
    transition: all 0.3s ease;
    text-decoration: none;
    font-size: 0.9rem;
}

.season-card-btn-countdown:hover {
    color: #fff;
    text-decoration: none;
}

/* Disable transform on hover/focus/active */
.season-card:hover,
.season-card:focus,
.season-card:active {
    transform: none !important;
    transition: none !important;
}

/* ============================================
   Color Schemes
   ============================================ */

/* Dark Nebula (Purple) */
.season-card-dark-nebula {
    background: radial-gradient(ellipse at right top, #271b52ed 0%, #151419 47%, #151419 100%);
}

.season-card-dark-nebula::before {
    background: linear-gradient(45deg, #232228, #232228, #232228, #232228, #8044d3) border-box;
}

.season-card-dark-nebula .season-card-btn-add {
    background: #8044d3;
}

.season-card-dark-nebula .season-card-progress-bar::after {
    background: #8044d3;
}

.season-card-dark-nebula .season-card-btn-countdown:hover {
    background: #8044d3;
}

/* Midnight Tech (Blue) */
.season-card-midnight-tech {
    background: radial-gradient(ellipse at right top, #00008bed 0%, #151419 47%, #151419 100%);
}

.season-card-midnight-tech::before {
    background: linear-gradient(45deg, #232228, #232228, #232228, #232228, #4169e1) border-box;
}

.season-card-midnight-tech .season-card-btn-add {
    background: #4169e1;
}

.season-card-midnight-tech .season-card-progress-bar::after {
    background: #4169e1;
}

.season-card-midnight-tech .season-card-btn-countdown:hover {
    background: #0000cd;
}

/* Crimson Void (Red) */
.season-card-crimson-void {
    background: radial-gradient(ellipse at right top, #3d0d14ed 0%, #151419 47%, #151419 100%);
}

.season-card-crimson-void::before {
    background: linear-gradient(45deg, #232228, #232228, #232228, #232228, #ff3e4d) border-box;
}

.season-card-crimson-void .season-card-btn-add {
    background: #ff3e4d;
}

.season-card-crimson-void .season-card-progress-bar::after {
    background: #ff3e4d;
}

.season-card-crimson-void .season-card-btn-countdown:hover {
    background: #ff3e4d;
}

/* Toxic Glow (Green) */
.season-card-toxic-glow {
    background: radial-gradient(ellipse at right top, #192e1aed 0%, #151419 47%, #151419 100%);
}

.season-card-toxic-glow::before {
    background: linear-gradient(45deg, #232228, #232228, #232228, #232228, #3ef254) border-box;
}

.season-card-toxic-glow .season-card-btn-add {
    background: #3ef254;
}

.season-card-toxic-glow .season-card-progress-bar::after {
    background: #3ef254;
}

.season-card-toxic-glow .season-card-btn-countdown:hover {
    background: #3ef254;
}

/* Cyber Orange */
.season-card-cyber-orange {
    background: radial-gradient(ellipse at right top, #3d2207ed 0%, #151419 47%, #151419 100%);
}

.season-card-cyber-orange::before {
    background: linear-gradient(45deg, #232228, #232228, #232228, #232228, #ff9b00) border-box;
}

.season-card-cyber-orange .season-card-btn-add {
    background: #ff9b00;
}

.season-card-cyber-orange .season-card-progress-bar::after {
    background: #ff9b00;
}

.season-card-cyber-orange .season-card-btn-countdown:hover {
    background: #ff9b00;
}

/* Arctic Mint (Teal) */
.season-card-arctic-mint {
    background: radial-gradient(ellipse at right top, #0d3b3bed 0%, #151419 47%, #151419 100%);
}

.season-card-arctic-mint::before {
    background: linear-gradient(45deg, #232228, #232228, #232228, #232228, #00f0c7) border-box;
}

.season-card-arctic-mint .season-card-btn-add {
    background: #00f0c7;
}

.season-card-arctic-mint .season-card-progress-bar::after {
    background: #00f0c7;
}

.season-card-arctic-mint .season-card-btn-countdown:hover {
    background: #00f0c7;
}

/* Magenta Pulse */
.season-card-magenta-pulse {
    background: radial-gradient(ellipse at right top, #380a2ced 0%, #151419 47%, #151419 100%);
}

.season-card-magenta-pulse::before {
    background: linear-gradient(45deg, #232228, #232228, #232228, #232228, #ff39c2) border-box;
}

.season-card-magenta-pulse .season-card-btn-add {
    background: #ff39c2;
}

.season-card-magenta-pulse .season-card-progress-bar::after {
    background: #ff39c2;
}

.season-card-magenta-pulse .season-card-btn-countdown:hover {
    background: #ff39c2;
}

/* Carbon Gray */
.season-card-carbon-gray {
    background: radial-gradient(ellipse at right top, #262626ed 0%, #151419 47%, #151419 100%);
}

.season-card-carbon-gray::before {
    background: linear-gradient(45deg, #232228, #232228, #232228, #232228, #8c8c8c) border-box;
}

.season-card-carbon-gray .season-card-btn-add {
    background: #8c8c8c;
}

.season-card-carbon-gray .season-card-progress-bar::after {
    background: #8c8c8c;
}

.season-card-carbon-gray .season-card-btn-countdown:hover {
    background: #8c8c8c;
}

/* Volt Yellow */
.season-card-volt-yellow {
    background: radial-gradient(ellipse at right top, #3d3d0aed 0%, #151419 47%, #151419 100%);
}

.season-card-volt-yellow::before {
    background: linear-gradient(45deg, #232228, #232228, #232228, #232228, #FFFF00) border-box;
}

.season-card-volt-yellow .season-card-btn-add {
    background: #FFFF00;
}

.season-card-volt-yellow .season-card-progress-bar::after {
    background: #FFFF00;
}

.season-card-volt-yellow .season-card-btn-countdown:hover {
    background: #FFFF00;
}

/* Copper Core */
.season-card-copper-core {
    background: radial-gradient(ellipse at right top, #3d1e07ed 0%, #151419 47%, #151419 100%);
}

.season-card-copper-core::before {
    background: linear-gradient(45deg, #232228, #232228, #232228, #232228, #E67E22) border-box;
}

.season-card-copper-core .season-card-btn-add {
    background: #E67E22;
}

.season-card-copper-core .season-card-progress-bar::after {
    background: #E67E22;
}

.season-card-copper-core .season-card-btn-countdown:hover {
    background: #E67E22;
}

/* Frost White */
.season-card-frost-white {
    background: radial-gradient(ellipse at right top, #262e3ded 0%, #151419 47%, #151419 100%);
}

.season-card-frost-white::before {
    background: linear-gradient(45deg, #232228, #232228, #232228, #232228, #F0FFFF) border-box;
}

.season-card-frost-white .season-card-btn-add {
    background: #F0FFFF;
    color: #151419;
}

.season-card-frost-white .season-card-progress-bar::after {
    background: #F0FFFF;
}

.season-card-frost-white .season-card-btn-countdown:hover {
    background: #F0FFFF;
    color: #151419;
}

/* Lime Surge */
.season-card-lime-surge {
    background: radial-gradient(ellipse at right top, #2e3d0aed 0%, #151419 47%, #151419 100%);
}

.season-card-lime-surge::before {
    background: linear-gradient(45deg, #232228, #232228, #232228, #232228, #CCFF00) border-box;
}

.season-card-lime-surge .season-card-btn-add {
    background: #CCFF00;
    color: #151419;
}

.season-card-lime-surge .season-card-progress-bar::after {
    background: #CCFF00;
}

.season-card-lime-surge .season-card-btn-countdown:hover {
    background: #CCFF00;
    color: #151419;
}

/* Neon Sand */
.season-card-neon-sand {
    background: radial-gradient(ellipse at right top, #3d2e1aed 0%, #151419 47%, #151419 100%);
}

.season-card-neon-sand::before {
    background: linear-gradient(45deg, #232228, #232228, #232228, #232228, #FFE4B5) border-box;
}

.season-card-neon-sand .season-card-btn-add {
    background: #FFE4B5;
    color: #151419;
}

.season-card-neon-sand .season-card-progress-bar::after {
    background: #FFE4B5;
}

.season-card-neon-sand .season-card-btn-countdown:hover {
    background: #FFE4B5;
    color: #151419;
}

/* Coral Burn */
.season-card-coral-burn {
    background: radial-gradient(ellipse at right top, #3d1f14ed 0%, #151419 47%, #151419 100%);
}

.season-card-coral-burn::before {
    background: linear-gradient(45deg, #232228, #232228, #232228, #232228, #FF7F50) border-box;
}

.season-card-coral-burn .season-card-btn-add {
    background: #FF7F50;
}

.season-card-coral-burn .season-card-progress-bar::after {
    background: #FF7F50;
}

.season-card-coral-burn .season-card-btn-countdown:hover {
    background: #FF7F50;
}

/* Gold Rush */
.season-card-gold-rush {
    background: radial-gradient(ellipse at right top, #3d3207ed 0%, #151419 47%, #151419 100%);
}

.season-card-gold-rush::before {
    background: linear-gradient(45deg, #232228, #232228, #232228, #232228, #FFD700) border-box;
}

.season-card-gold-rush .season-card-btn-add {
    background: #FFD700;
    color: #151419;
}

.season-card-gold-rush .season-card-progress-bar::after {
    background: #FFD700;
}

.season-card-gold-rush .season-card-btn-countdown:hover {
    background: #FFD700;
    color: #151419;
}

/* Chrome Edge */
.season-card-chrome-edge {
    background: radial-gradient(ellipse at right top, #2e2e2eed 0%, #151419 47%, #151419 100%);
}

.season-card-chrome-edge::before {
    background: linear-gradient(45deg, #232228, #232228, #232228, #232228, #E8E8E8) border-box;
}

.season-card-chrome-edge .season-card-btn-add {
    background: #E8E8E8;
    color: #151419;
}

.season-card-chrome-edge .season-card-progress-bar::after {
    background: #E8E8E8;
}

.season-card-chrome-edge .season-card-btn-countdown:hover {
    background: #E8E8E8;
    color: #151419;
}

/* Earth Pulse */
.season-card-earth-pulse {
    background: radial-gradient(ellipse at right top, #2e1a0ded 0%, #151419 47%, #151419 100%);
}

.season-card-earth-pulse::before {
    background: linear-gradient(45deg, #232228, #232228, #232228, #232228, #8B4513) border-box;
}

.season-card-earth-pulse .season-card-btn-add {
    background: #8B4513;
}

.season-card-earth-pulse .season-card-progress-bar::after {
    background: #8B4513;
}

.season-card-earth-pulse .season-card-btn-countdown:hover {
    background: #8B4513;
}

/* Rose Shock */
.season-card-rose-shock {
    background: radial-gradient(ellipse at right top, #3d1a2eed 0%, #151419 47%, #151419 100%);
}

.season-card-rose-shock::before {
    background: linear-gradient(45deg, #232228, #232228, #232228, #232228, #FF66CC) border-box;
}

.season-card-rose-shock .season-card-btn-add {
    background: #FF66CC;
}

.season-card-rose-shock .season-card-progress-bar::after {
    background: #FF66CC;
}

.season-card-rose-shock .season-card-btn-countdown:hover {
    background: #FF66CC;
}

/* ============================================
   Team Expanded View Modal
   ============================================ */

.season-card-teams-expanded {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    padding: 1rem;
    overflow: hidden;
}

.season-card-teams-expanded.active {
    opacity: 1;
    visibility: visible;
}

.season-card-teams-content {
    max-width: 800px;
    width: 90%;
    max-height: 80vh;
    background: #151419;
    border-radius: 1rem;
    padding: 2rem;
    position: relative;
    overflow-y: auto;
}

.season-card-teams-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    z-index: 1;
}

.season-card-teams-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
    padding-bottom: 1rem;
}

.season-card-team-item {
    text-align: center;
}

.season-card-team-item img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 0.5rem;
}

.season-card-team-item span {
    color: #fff;
    font-size: 0.75rem;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Pagination for large team sets */
.season-card-teams-pagination {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
    gap: 0.5rem;
}

.season-card-teams-pagination a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-radius: 50%;
    text-decoration: none;
    transition: all 0.3s ease;
}

.season-card-teams-pagination a:hover,
.season-card-teams-pagination a.active {
    background: rgba(255, 255, 255, 0.3);
}

/* ============================================
   Responsive Adjustments
   ============================================ */

@media (max-width: 768px) {
    .season-card {
        max-width: 95%;
        width: 95%;
        margin: 1rem auto;
        z-index: 5;
    }

    .season-card-header,
    .season-card-body,
    .season-card-footer {
        padding-left: 1.25em;
        padding-right: 1.25em;
    }

    .season-card-teams li {
        margin-right: -0.3rem;
    }

    .season-card-progress-bar {
        width: 75%;
        margin-right: 25%;
    }

    .season-card-progress-value {
        right: 8%;
    }

    /* Fix overlap with mobile menus */
    body.menu-is-open .season-card {
        transform: translateX(200px);
        transition: transform 0.3s ease;
    }

    /* Team expansion modal adjustments */
    .season-card-teams-content {
        width: 95%;
        padding: 1.5rem;
        max-height: 85vh;
    }

    .season-card-teams-grid {
        grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
        gap: 0.75rem;
    }
}

/* Handle menu interactions */
body.mobile-menu-active .season-card,
.open-panel .season-card,
.panel-open .season-card,
.menu-open .season-card,
.side-menu-open .season-card {
    z-index: 1;
}