/* ==========================================================
   UK pages — shared pricing cards, FAQ and platform pills.
   Used by Views/Home/Index.en.uk.cshtml and
   Views/Plans/Index.en.uk.cshtml. Colour/spacing variables come
   from whichever page stylesheet loads first (hompage-redesign
   or buyBR-redesign), so everything here has fallbacks.
========================================================== */

.uk-pricing-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: center;
    margin-top: 2.5rem;
}

.uk-price-card {
    background: var(--white, #fff);
    border: 1px solid var(--grey-border, #d7e1ee);
    border-radius: var(--radius-md, 14px);
    padding: 2rem;
    width: 320px;
    max-width: 100%;
    text-align: left;
}

    .uk-price-card.featured {
        border: 2px solid var(--cc--purple, rgb(90, 61, 235));
    }

.uk-price-tag {
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--text-dark, #0E1A33);
    margin: 0.25rem 0 0;
}

    .uk-price-tag span {
        font-size: 1rem;
        font-weight: 400;
        color: var(--text-mid, #4A4F5A);
    }

.uk-price-badge {
    display: inline-block;
    background: var(--cc--purple, rgb(90, 61, 235));
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 999px;
    padding: 0.15rem 0.75rem;
    margin-bottom: 0.75rem;
}

.uk-price-card ul {
    list-style: none;
    padding: 0;
    margin: 1.25rem 0 1.5rem;
    color: var(--text-mid, #4A4F5A);
}

    .uk-price-card ul li {
        padding: 0.3rem 0;
    }

        .uk-price-card ul li::before {
            content: "\2713";
            color: var(--cc--purple, rgb(90, 61, 235));
            font-weight: 700;
            margin-right: 0.5rem;
        }

.uk-pricing-note {
    text-align: center;
    color: var(--text-mid, #4A4F5A);
    margin-top: 1.5rem;
}

.uk-faq {
    max-width: var(--content-width, 900px);
    margin: 0 auto;
}

    .uk-faq details {
        border-bottom: 1px solid var(--grey-border, #d7e1ee);
        padding: 0.9rem 0;
    }

    .uk-faq summary {
        cursor: pointer;
        font-weight: 600;
        color: var(--text-dark, #0E1A33);
        font-size: 1.15rem;
    }

    .uk-faq details p {
        color: var(--text-mid, #4A4F5A);
        margin: 0.6rem 0 0;
    }

/* Platform pills for pages that don't load hompage-redesign.css
   (mirrors .cc-info-pills so the two pages look the same). */
.uk-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 1.5rem 0 0;
}

    .uk-pills li {
        background: var(--grey-bg, #F7F8FA);
        border: 1px solid var(--grey-border, #d7e1ee);
        border-radius: 999px;
        padding: 0.4rem 1.1rem;
        font-weight: 600;
        color: var(--text-dark, #0E1A33);
    }
