body {
    font-family: "Suisse Int'l Book";
    font-size: 1rem;
}

section {
    margin-top: 3rem;
}

section > .row  {
    padding: 3rem 0;
}

h4 {
    font-family: 'Foundry Gridnik';
    font-style: normal;
    font-weight: 400;
    font-size: 3rem;
    line-height: 100%;
    margin-bottom: 42px;
}

p {
    line-height: 150%;
}

a:not(.btn-outline-dark,.yellow,.btn) {
    color: black;
    text-decoration: underline !important;
}

.mini {
    font-size: 0.9rem;
}

.supermini {
    font-size: 0.625rem;
}

button,
a.btn[role="button"],
input[type="button"],
input[type="submit"],
.btn-dark {
    border-radius: 10px;
    background-color: black;
    padding: 8px 34px;
    color: white;
}

.btn-light {
    border-radius: 10px;
    background-color: white;
    border: 1px solid black;
    padding: 8px 34px;
    color: black;
}

/* #region select-plan */
    section#select-plan .mobile-only {
        display: none;
    }
    
    section#select-plan .desktop-only {
        display: block;
    }

    .heading p:last-of-type {
        margin-bottom: 24px;
    }

    section#select-plan .hero .image {
        min-width: calc((100% - 2rem)/2);
        max-width: 60%;
    }

    section#select-plan .hero .right-side {
        width: calc((100% - 2rem)/2);
    }

    /* #region products */
        section#select-plan .select-plan .plan_shoutout {
            position: absolute;
            width: 100%;
            top: -22px;
            left: 0rem;
            display: flex;
            justify-content: center;
        }

        section#select-plan .select-plan .plan_shoutout span {
            padding: 0.5rem 2.5rem;
            background: #F1FA70;
            border-radius: 10px;
        }

        section#select-plan .select-plan {
            gap: 23px;
            flex-direction: row;
        }

        section#select-plan .select-plan label.card-body {
            border: 3px solid #f0f0f0;
            border-radius: 15px;
            padding: 0 1rem 0.5rem;
            gap: 1rem;
            justify-content: space-between;
            position: relative;
            min-width: 238px;
            max-width: 320px;
        }

        section#select-plan .select-plan label.card-body:has(input:checked) {
            border: 3px solid #F1FA70;
        }

        section#select-plan .select-plan p.price {
            font-family: "Foundry Gridnik Bold";
            font-size: 3.5rem;
        }

        section#select-plan .select-plan p.price span {
            font-family: "Suisse Int'l Book";
            font-size: 1.12rem;
            vertical-align: super;
        }

        section#select-plan .select-plan label > div {
            justify-content: space-between;
        }

        section#select-plan .select-plan p.title {
            font-size: 1.25rem;
        }

        section#select-plan .select-plan p.italic {
            font-style: italic;
        }

        /* #region radio-style */
        section#select-plan .select-plan label input[type="radio"] {
            opacity: 0;
            cursor: pointer;
            width: 0;
        }

        section#select-plan .select-plan label .radio {
            top: 0;
            left: 0;
            height: 33px;
            width: 33px;
            min-width: 33px;
            background-color: #eee;
            border-radius: 50%;
            margin: 0 1rem;
            position: relative;
        }          
        section#select-plan .select-plan label input:checked ~ .radio {
            background-color: #C4CA75;
        }

        section#select-plan .select-plan label .radio:after {
            content: "";
            position: absolute;
            display: none;
        }
        
        section#select-plan .select-plan label input:checked ~ .radio:after {
            display: block;
        }
        
        section#select-plan .select-plan label  .radio:after {
            top: 18%;
            left: 19%;
            width: 21px;
            height: 21px;
            border-radius: 50%;
            background: #F1FA70;
        }
        @media (max-width: 643px) {
            section#select-plan .select-plan {
                flex-direction: column;
            }
        }
        @media (min-width: 868px) and (max-width: 1200px) {
            section#select-plan .select-plan {
                flex-direction: column;
            }
        }

        /* #endregion radio-style */

        section#select-plan .accessories {
            gap: 5%;
        }

        section#select-plan .accessories .hip_belt {
            width: 33%;
        }

        /* #region carousel */

        .carousel-indicators {
            justify-content: right;
            left: auto;
            background: white;
            border-radius: 10px;
            padding: 4px;
            gap: 4px;
            margin: 0;
            top: 30px;
            bottom: auto;
            right: 30px;
        }

        .carousel-indicators.mobile {
            top: unset; 
            bottom: unset;
            right: unset;
            left: unset;
            width: fit-content;
            margin: auto;
            position: unset;
        }

        .carousel-indicators button {
            height: 10px;
            width: 10px;
            margin: 0;
            border: 0;
            padding: 0px;
            background-color: grey;
        }

        .carousel-indicators button.active {
            background-color: black!important;
        }
        /* #region carousel */

        section#select-plan .accessories .pants .first-para {
            font-size: 1.12rem;
        }

        .hip_belt_size_error,
        .plan_not_selected_error {
            color: darkred;
        }

        section#select-plan h4.faq {
            font-size: 2.5rem;
        }

    /* #endregion products */

    section#select-plan .discount {
        background-image: linear-gradient(0deg, #8D8D8Dee, #8D8D8Dee),  url('/static/members/img/pexels-mikhail-nilov-8942635.jpg');
        background-size: cover;
        padding: 6rem 10%;
        width: 100%;
    }
    
    section#select-plan .discount p {
        font-family: "Suisse Int'l Thin";
        margin-bottom: 2rem;
        font-size: 1.3rem;
        color: white;
    }

    section#select-plan .discount button {
        border-radius: 10px;
    }

    section#select-plan .faq h6 {
        font-family: "Suisse Int'l SemiBold";
    }

    section#select-plan .faq .questionTitle {
        background: none;
        color: black;
        border: none;
        text-align: left;
        padding: 8px 0;
        position: relative;
        display: grid;
        grid-template-columns: 90% auto;
    }

    section#select-plan .faq .questionTitle span {
        word-wrap: break-word;
        white-space: break-spaces;
    }

    section#select-plan .faq .questionTitle::after {
        content: "+";
        position: absolute;
        right: 15px;
        top: 0;
        bottom: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    section#select-plan .faq .questionTitle[aria-expanded="true"]::after {
        content: "—";
    }


/* #endregion select-plan */

/* #region account */
section#account .form-group.row.checkbox {
    padding-left: 15px;
}

form.membership-style label,
form.membership-style label,
section#account .col-form-label {
    /* screen reader only label */
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;

    width: 1px;
}

section#account .col-form-label + div.col-md-9 {
    max-width: 100%;
    flex: 0 0 100%;
}

section#account input[type="text"],
section#account input[type="password"],
form.membership-style input[type="text"],
form.membership-style input[type="password"] {
    border: none;
    border-bottom: 1px solid #000000;
    border-radius: 0px;
    padding: 14px 0px;
    height: auto;
    background: transparent;
}

form.membership-style input[type="text"]::placeholder,
form.membership-style input[type="password"]::placeholder,
section#account input[type="text"]::placeholder,
section#account input[type="password"]::placeholder {
    color: black;
    font-size: 1rem;
}

form.membership-style .form-group::after,
section#account .col-form-label + div.col-md-9::after {
    content: "→";
    position: absolute;
    right: 15px;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* #endregion account */


@media (max-width: 868px) {
    section#select-plan .mobile-only {
        display: block;
    }
    section#select-plan .desktop-only {
        display: none;
    }

    section > .row {
        width: 80%;
        margin: auto;
        padding: 2rem 0;
    }

    section .row.buttons {
        flex-direction: column-reverse!important;
        flex-wrap: unset;
    }

    h4 {
        font-size: 2rem;
        margin: 0;
    }

    section#select-plan h4 {
        margin-bottom: 1rem;
    }

    section#select-plan .heading p:last-of-type {
        margin-bottom: 14px;
    }

    /* #region product */
    section#select-plan .product-card {
        background-color: #f0f0f0;
        border-radius: 30px;
        padding: 2rem 1rem 1rem;
    }

    section#select-plan .select-plan p.price {
        font-size: 3rem;
    }

    /* #endregion product */

    ul {
        padding-left: 20px;
    }
}