:root {

}

body.ev-subscription {

    main {
        color: var(--colour-dark-blue);

        &::before {
            background-color: var(--colour-light-blue-2);
        }
    }
}

.summary {
    text-wrap: balance;

    h2 {
        text-wrap: auto;
    }
}

.button {
    font-weight: bold;
    display: block;
    max-width: 20rem;
    padding: 0.5rem;
    text-align: center;
    text-wrap: balance;
    border-radius: 0.5rem;
    background: var(--colour-light-blue);
}

.product {
    display: flex;
    flex-flow: row wrap;
    gap: 1rem;
    @media screen and (min-width: 32rem) {
        margin-left: 4rem;
    }

    figure {
        flex: 0 1 auto;
    }
}

.product-info {
    flex-grow: 1;
    width: min(30rem, 90%);

    p:has(a) {
        margin-block: 4rem;

        a {
            text-decoration: underline;
        }
    }
}

.ev-subscription h1:first-of-type {
    color: var(--colour-blue);
    margin-block: 2rem;
    @media screen and (min-width: 32rem) {

        position: relative;
        padding-left: 2.5em;

        &::before {
            position: absolute;
            top: calc(50% - 1em);
            left: 0;
            display: block;
            width: 2em;
            content: '';
            background-color: var(--colour-blue);
            mask-image: var(--icon-feature-rose-tick-circle);
            mask-size: contain;
            mask-repeat: no-repeat;
            mask-position: center;
            aspect-ratio: 1 / 1;
        }
    }
}

.ev-subscription-plan {

    h3 {
        margin-bottom: 0.4em;
    }

    p {
        margin: 0;
    }

    .ev-product {
        position: relative;
        max-width: 30rem;
        min-height: 6rem;
        padding-left: 6rem;
        border: 1px solid var(--colour-blue);

        h2 {
            font-size: 1.3rem;
            color: var(--colour-active);

            &::after {
                display: none;
            }
        }


        &::before {
            position: absolute;
            top: 1rem;
            left: 1rem;
            display: block;
            width: 4rem;
            content: '';
            background-color: var(--colour-active);
            mask-image: var(--icon-feature-rose-tick);
            mask-size: contain;
            mask-repeat: no-repeat;
            mask-position: center;
            aspect-ratio: 1 / 1;
        }
    }
}


.variation-features {
    font-weight: bold;
    margin: 0;
    list-style: none;
    padding-inline: 0;

    li {
        font-size: 0.8rem;
        position: relative;
        border-bottom: 0.1rem solid var(--colour-active);
        padding-inline: 3rem 0;
        padding-block: 1rem;
        margin-block: 0;

        &:last-of-type {
            border-bottom: none;
        }

        &::before {
            position: absolute;
            top: calc(50% - 1.25rem);
            left: 0;
            display: block;
            width: 2.5rem;
            content: '';
            background: var(--colour-active);
            aspect-ratio: 1 / 1;
            mask-image: var(--mask-image);
            mask-size: contain;
            mask-position: center;
            mask-repeat: no-repeat;
        }
    }
}

li {
    &.events {
        --mask-image: var(--icon-feature-events);
    }

    &.entries {
        --mask-image: var(--icon-feature-entries);
    }

    &.eventaly {
        --mask-image: var(--icon-feature-ev-tick);
    }

    &.price {
        font-size: 1.3rem;
        --mask-image: var(--icon-feature-tag);

        [data-footnote] {
            font-size: 0.8rem;
            font-weight: normal;
            display: block;
        }
    }
}

.readmore a {
    display: block;
    text-decoration: underline;
    margin-block: 4rem;
}

.xgiMz { /* calculators div */
    margin: 0 !important;
}

.select-frequency {
    font-size: 1.2rem;
    font-weight: bold;
    display: flex;
    width: max-content;
    margin: auto;
    padding: 0;
    color: var(--colour-white);

    input {
        position: absolute;
        overflow: hidden;
        width: 1px;
        height: 1px;

        &:checked + label {
            background-color: var(--colour-blue);

        }
    }

    label {
        padding: 0.5rem;
        cursor: pointer;
        transition: background-color 0.25s ease-in-out;
        background-color: var(--colour-grey);
        padding-inline: 1rem;

        &:first-of-type {
            border-radius: 1rem 0 0 1rem;
            padding-inline-start: 0.5rem;
        }

        &:last-of-type {
            border-radius: 0 1rem 1rem 0;
            padding-inline-end: 0.5rem;
        }
    }

}

.hidden {
    display: none;
}


[data-footnote] {
    position: relative;

    &::after {
        display: inline;
        padding-left: 0.2em;
        content: attr(data-footnote);
        vertical-align: top;
    }
}