/**
 * Vertical Scoring CSS
 *
 * Styles for vertical-enriched score source attribution buttons
 *
 * @package PalomarrVerticalScoring
 * @since 1.0.0
 */

/* Score with sources wrapper (inline-right positioning) */
.score-with-sources {
    position: relative;
    display: inline-block;
    margin: 0 0 1rem !important;
}

/* Flex container for Support, Cost, Implementation scores */
.scores-flex-container {
    display: grid;
    margin: 16px 0;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    justify-content: space-between;
    width: 100%;
}

/* Individual score item wrapper (contains score + source button) */
.score-item-wrapper {
    position: relative;
    flex: 1.5;
    min-width: 0;
    white-space: nowrap;
    /* Allows flex items to shrink below content size */
}

.score-item-wrapper:nth-of-type(2) {
    flex: 1;
}

/* Source button base styles */
.card-source-button {
    font-size: 0.8rem;
    color: var(--color-green-faded);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 2px 6px;
    transition: 0.3s all ease;
    white-space: nowrap;
    opacity: 0;
    pointer-events: auto;
}

.card-source-button:hover {
    opacity: 1;
}

/* Source count styling */
.card-source-button .source-count {
    text-decoration: none;
    margin-left: 2px;
    transition: 0.3s all ease;
}

.source-button-inline-right {
    margin-left: 1rem;
}

@media (max-width: 640px) {
    .source-button-inline-right {
        margin-left: 0;
    }
}

/* Below positioning (Support/Implementation/Cost) */
.source-button-below {
    display: block;
    margin-top: 4px;
    text-align: left;
}

/* Show button on hover of score wrapper (inline buttons) */
.score-with-sources:hover .card-source-button {
    opacity: 1;
}

/* Keep button visible when hovering the button itself */
.card-source-button:hover {
    opacity: 1;
}

/* For below-positioned buttons, show when hovering the score-item-wrapper */
.score-item-wrapper:hover .source-button-below {
    opacity: 1;
}

/* Accessibility - always show on focus */
.card-source-button:focus {
    opacity: 1 !important;
}

/* Mobile: stack vertically */
@media (max-width: 768px) {

    .content-card .supplier-title {
        width: 75%;
    }

    .score-with-sources {
        position: relative;
        display: inline-flex;
        margin-bottom: 0px !important;
        width: 20%;
    }

    .scores-flex-container {
        display: block;
        gap: 12px;
    }

    .score-item-wrapper {
        display: flex;
        align-items: center;
    }

    .score-item-wrapper>* {
        margin: 0 !important;
    }

    .card-source-button {
        font-size: 0;
        cursor: pointer;
        opacity: 60%;
        z-index: 999;
    }

    .card-source-button::hover {
        opacity: 0;
    }

    .card-source-button .source-count {
        display: none;
    }

    .source-button-inline-right::before {
        content: "";
        display: inline-block;
        width: 18px;
        height: 24px;
        margin-left: 8px;
        opacity: 60%;
        background: url(/wp-content/uploads/2025/12/icon-info-g.svg) center / contain no-repeat;
    }

    .source-button-below::before {
        content: "";
        display: inline-block;
        width: 16px;
        height: 24px;
        margin-left: 8px;
        opacity: 60%;
        background: url(/wp-content/uploads/2025/12/icon-info-g.svg) center / contain no-repeat;
    }

    .card-source-button .source-count {
        display: none;
    }

    .content-card .supplier-score {
        top: 0px;
    }

    .supplier-column .divider-wrap .divider {
        height: 20px !important;
    }

    .supplier-card.no-score .card-action-row,
    .content-card-container.card-order .card-action-row {
        z-index: -1;
    }
}