/* =========================================================
   FLOORDEKHO BUSINESS PLAN SELECTOR
========================================================= */

.fd-plan-selector {
    margin: 30px 0;
}

.fd-plan-selector h3 {
    margin-bottom: 25px;
}


/* =========================================================
   PLAN GRID
========================================================= */

.fd-plan-grid {
    display: grid;
    grid-template-columns: repeat(
        auto-fit,
        minmax(260px, 1fr)
    );
    gap: 20px;
}


/* =========================================================
   PLAN CARD
========================================================= */

.fd-plan-card {
    position: relative;

    background: #fff;

    border: 2px solid #e5e5e5;

    border-radius: 12px;

    padding: 25px;

    cursor: pointer;

    transition:
        border-color .25s ease,
        box-shadow .25s ease,
        transform .25s ease;

    box-sizing: border-box;
}


/* Hover */

.fd-plan-card:hover {
    border-color: #2271b1;

    transform: translateY(-3px);

    box-shadow:
        0 8px 25px rgba(0,0,0,.08);
}


/* =========================================================
   SELECTED PLAN
========================================================= */

.fd-plan-card.fd-plan-selected {
    border-color: #2271b1;

    background: #f5fbff;

    box-shadow:
        0 8px 30px rgba(34,113,177,.18);

    transform: translateY(-3px);
}


/* =========================================================
   PLAN TITLE
========================================================= */

.fd-plan-card h4 {
    font-size: 22px;

    font-weight: 700;

    margin: 0 0 10px 0;
}


/* =========================================================
   PRICE
========================================================= */

.fd-plan-price {
    font-size: 30px;

    font-weight: 700;

    color: #2271b1;

    margin-bottom: 20px;
}


/* =========================================================
   FEATURES
========================================================= */

.fd-plan-features {
    list-style: none;

    margin: 0 0 20px 0;

    padding: 0;
}

.fd-plan-features li {
    padding: 8px 0;

    border-bottom: 1px solid #eee;

    line-height: 1.5;
}

.fd-plan-features li:last-child {
    border-bottom: none;
}


/* =========================================================
   SELECT BUTTON
========================================================= */

.fd-select-plan {
    width: 100%;

    padding: 12px 18px;

    border: none;

    border-radius: 8px;

    background: #2271b1;

    color: #fff;

    font-size: 15px;

    font-weight: 600;

    cursor: pointer;

    transition:
        background .25s ease,
        transform .15s ease;
}

.fd-select-plan:hover {
    background: #195a8d;

    color: #fff;
}

.fd-select-plan:active {
    transform: scale(.98);
}


/* =========================================================
   SELECTED BUTTON
========================================================= */

.fd-select-plan.fd-selected-button {
    background: #198754;

    color: #fff;
}

.fd-select-plan.fd-selected-button:hover {
    background: #157347;

    color: #fff;
}


/* =========================================================
   SELECTED BADGE
========================================================= */

.fd-selected-badge {
    position: absolute;

    top: 12px;

    right: 12px;

    background: #2271b1;

    color: #fff;

    padding: 6px 11px;

    border-radius: 20px;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: .3px;

    z-index: 5;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .fd-plan-grid {
        grid-template-columns: 1fr;
    }

    .fd-plan-card {
        padding: 20px;
    }

    .fd-plan-price {
        font-size: 26px;
    }

}