/* ==========================================================
   MCP IDE Selection Cards
========================================================== */

.ide-card {

    position: relative;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    width: 100%;

    min-height: 150px;

    padding: 1.25rem;

    border-radius: 1.5rem;

    border: 1px solid transparent;

    background: transparent;

    transition:
        background 300ms ease,
        border-color 300ms ease,
        transform 300ms ease,
        box-shadow 300ms ease;

}


/* Hover */

.ide-card:hover {

    background: rgba(255, 255, 255, 0.03);

    border-color: rgba(255, 255, 255, 0.08);

    transform: translateY(-3px);

}


/* Selected */

.ide-card.active {

    background:
        linear-gradient(
            145deg,
            rgba(45, 212, 191, 0.10),
            rgba(34, 211, 238, 0.04)
        );

    border-color: rgba(45, 212, 191, 0.30);

    box-shadow:
        0 0 0 1px rgba(45, 212, 191, 0.04),
        0 12px 40px rgba(45, 212, 191, 0.08);

}


/* Selected indicator */

.ide-card.active::after {

    content: "";

    position: absolute;

    bottom: 0.5rem;

    left: 30%;

    right: 30%;

    height: 2px;

    border-radius: 999px;

    background: linear-gradient(
        to right,
        #5eead4,
        #67e8f9
    );

    box-shadow:
        0 0 12px rgba(45, 212, 191, 0.7);

}

.ide-card {

    position: relative;

    transition:
        border-color 0.3s ease,
        background 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;

}

.ide-card-selected {

    border-color: rgba(45, 212, 191, 0.8);

    background: rgba(45, 212, 191, 0.08);

    box-shadow:
        0 0 0 1px rgba(45, 212, 191, 0.25),
        0 12px 40px rgba(45, 212, 191, 0.08);

}

.ide-card-selected::after {

    content: "";

    position: absolute;

    left: 20%;
    right: 20%;
    bottom: 8px;

    height: 2px;

    border-radius: 999px;

    background: linear-gradient(
        to right,
        #5eead4,
        #67e8f9
    );

}