/* Skin Header Details - Desktop Only */

/* Hide by default on all devices */
.skin-header-details {
    display: none !important;
}

/* Explicitly hide on mobile and tablet */
@media (max-width: 768px) {
    .skin-header-details {
        display: none !important;
    }

    .player-card-section .skin-series-banner[data-banner-type="unique"] {
        display: none !important;
    }

    .boost-expiration-content {
        display: none !important;
    }
}

/* Only show on desktop when unique skin background is applied */
@media (min-width: 769px) {
    .player-card-main-container.unique-skin-bg .skin-header-details {
        display: block !important;
        margin: 3px 0px 0px 25px;
    }

    /* Skin Details Container - simplified without image */
    .skin-header-details .skin-details {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .player-card-section .skin-series-banner[data-banner-type="unique"] {
        margin-bottom: 15px;
        border-radius: 8px;
        overflow: hidden;
    }

    /* Skin Attributes Section */
    .skin-header-details .skin-attributes {
        display: flex;
        flex-direction: column;
        gap: 0px;
    }

    .skin-header-details .attributes-section h4,
    .skin-header-details .skin-skills-section h4,
    .skin-header-details .skin-other-section h4,
    .skin-header-details .availability-heading {
        font-family: var(--wp--preset--font-family--big-shoulders-display);
        text-transform: uppercase;
        color: var(--color-text);
        font-weight: 600;
        font-size: 1em;
        margin: 15px 0px 5px 0px;
    }

    /* Attribute Cards */
    .skin-header-details .attribute-cards {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 12px;
    }

    .no-skills-message,
    .no-other-boosts-message {
        font-size: 0.7em;
        color: #ffffffa1;
        border: 1px solid #ffffff14;
        padding: 10px 20px;
        border-radius: 8px;
    }

    .skin-header-details .attribute-card {
        background: rgba(var(--color-surface-rgb, 255, 255, 255), 0.1);
        border-radius: 8px;
        padding: 12px;
        min-width: 80px;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        backdrop-filter: blur(20px);
        border: 1px solid #ffffff14;
    }

    .skin-header-details .attribute-value {
        font-size: 1.2rem;
        font-weight: bold;
        color: var(--color-success);
        margin-bottom: 4px;
    }

    .skin-header-details .attribute-value.temp-boost-active {
        color: var(--color-success);
    }

    .skin-header-details .attribute-name {
        font-size: 0.8rem;
        color: var(--color-text);
        text-transform: uppercase;
        font-weight: 600;
    }

    /* Points Breakdown */
    .skin-header-details .points-breakdown {
        display: flex;
        flex-direction: column;
        gap: 4px;
        margin-top: 8px;
    }

    .skin-header-details .pill {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding: 2px 6px;
        border-radius: 12px;
        font-size: 0.7rem;
        font-weight: 600;
    }

    .skin-header-details .pill.permanent-pill {
        background: rgba(var(--color-warning-rgb, 255, 193, 7), 0.2);
        color: var(--color-warning);
        border: 1px solid var(--color-warning);
    }

    .skin-header-details .pill.boost-pill {
        background: rgba(var(--color-success-rgb, 40, 167, 69), 0.2);
        color: var(--color-success);
        border: 1px solid var(--color-success);
    }

    /* Inactive boost pills - greyed out when not active */
    .skin-header-details .pill.inactive-boost {
        background: rgba(128, 128, 128, 0.1) !important;
        color: #888 !important;
        border: 1px solid #666 !important;
        opacity: 0.6;
    }

    .skin-header-details .pill-label {
        font-size: 0.6rem;
        opacity: 0.8;
    }

    .skin-header-details .pill-value {
        font-weight: bold;
    }

    /* Skin Skills Section */
    .skin-header-details .skin-skill-cards {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
    }

    .skin-header-details .skin-skill-card {
        background: rgba(var(--color-surface-rgb, 255, 255, 255), 0.1);
        border-radius: 8px;
        padding: 12px;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        backdrop-filter: blur(20px);
        border: 1px solid #ffffff14;
        min-width: 120px;
    }

    .skin-header-details .skin-skill-name {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        margin-bottom: 8px;
        font-size: 0.8rem;
        color: var(--color-text);
        font-weight: 600;
    }

    .skin-header-details .skin-skill-icon {
        width: 48px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .skin-header-details .skin-skill-icon svg {
        width: 100%;
        height: 100%;
        fill: var(--color-text);
    }

    .skin-header-details .skin-skill-icon.event-skill svg {
        fill: var(--color-success);
    }

    .skin-header-details .skin-skill-value {
        font-size: 1rem;
        font-weight: bold;
        color: var(--color-success);
    }

    .skin-header-details .skin-skill-value.event {
        color: var(--color-success);
    }

    /* Two-Column Layout */
    .skin-header-details .skin-two-column-section {
        display: flex;
        gap: 20px;
        margin-top: 20px;
    }

    .skin-header-details .skin-skills-column {
        flex: 0 1 auto; /* Take only the space needed */
        min-width: 0;
    }

    .skin-header-details .skin-other-column {
        flex: 1; /* Take remaining space */
        min-width: 0;
    }

    .skin-header-details .skin-skills-section h4,
    .skin-header-details .skin-other-section h4 {
        font-weight: 600;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        color: var(--color-text);
        font-size: 1em;
        margin: 0px 0px 10px 0px;
    }

    /* Other Boosts Section */
    .skin-header-details .skin-other-boosts {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(80px, 200px));
        gap: 12px;
    }

    .skin-header-details .skin-other-boost-item {
        background: rgba(var(--color-surface-rgb, 255, 255, 255), 0.1);
        border-radius: 8px;
        padding: 12px;
        min-width: 80px;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        backdrop-filter: blur(20px);
        border: 1px solid #ffffff14;
    }

    .skin-header-details .skin-other-boost-value {
        font-size: 1.2rem;
        font-weight: bold;
        color: var(--color-success);
        margin-bottom: 4px;
    }

    .skin-header-details .skin-other-boost-label {
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: var(--color-text);
        opacity: 0.8;
    }

    /* Legacy Other Boosts Section (for backward compatibility) */
    .skin-header-details .other-boosts {
        margin-top: 20px;
    }

    .skin-header-details .boosts-content {
        background: rgba(var(--color-surface-rgb, 255, 255, 255), 0.1);
        padding: 12px;
        border-radius: 6px;
        color: var(--color-text);
        font-size: 0.9rem;
        backdrop-filter: blur(20px);
        border: 1px solid #ffffff14;
    }

    /* Skin Boost Expiration Section */

    .boost-expiration-content h4 {
        font-weight: 600;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        color: var(--color-text);
        font-size: 1em;
        margin: 0px 0px 10px 0px;
        font-family: var(--wp--preset--font-family--big-shoulders-display) !important;
    }

    .expiration-text {
        background: var(--color-surface);
        border-radius: 8px;
        padding: 10px 20px;
        border: 1px solid var(--color-border);
        overflow: hidden;
        font-size: 14px;
        color: var(--color-text-secondary);
        line-height: 1.4;
    }
}