* {
    margin: 0;
    padding: 0;
    line-height: 1;
    font-size: 100%;
    border: 0 none;
    box-sizing: border-box;
    min-height: 0;
    min-width: 0;
    font-weight: 400
}

::-moz-placeholder {
    color: inherit;
    opacity: .65
}

::placeholder {
    color: inherit;
    opacity: .65
}

a {
    color: inherit
}

strong {
    font-weight: 700
}

input,
textarea,
button {
    font-family: inherit
}

button {
    cursor: pointer;
    background: none;
    color: inherit
}

img {
    max-width: 100%;
    height: auto
}

html.p7-spinner-active {
    position: relative
}

@keyframes p7-on-auto-fill-start {
	from {}
	to {}
}

.p7-location-search:-webkit-autofill,
.p7-address-capture input:-webkit-autofill {
	animation-name: p7-on-auto-fill-start;
	animation-duration: 0.01s
}

.p7-address-capture {
	position: absolute;
	left: -10000px;
	width: 200px;
	height: auto;
	overflow: hidden;
	pointer-events: none
}

.p7-address-capture input {
	width: 8px;
	height: 8px
}

html.p7-spinner-active .p7-spinner {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 100000;
    background: rgb(0 0 0 / .85) url(../assets/spinner.svg) no-repeat center;
    background-size: 50px;
    background-attachment: fixed
}

:root {
    --color-brand: #0f7db7;
    --color-brand-light: #62c9ff;
    --color-offwhite: #959595;
    --color-gray: #707070;
    --color-dark-gray: #272727
}

html {
    scroll-behavior: smooth
}

body {
    background: #000;
    color: #fff;
    font-family: "Nunito Sans", sans-serif;
    font-size: 16px;
    text-align: center;
    max-width: 1300px;
    margin: 0 auto
}

.app-header {
    margin: 30px
}

.app-header h1 {
    display: flex;
    justify-content: center;
    gap: 35px
}

.app-header h1 span {
    display: block;
    margin: 15px 0;
    font-size: 24px;
    letter-spacing: .3em;
    font-weight: 600;
    text-transform: uppercase
}

@media (max-width:700px) {
    .app-header h1 span {
        display: none
    }
}

.app-footer {
    padding: 50vh 0 200px;
    text-align: center
}

.button,
.group-button {
    display: inline-block;
    padding: 12px 32px;
    border-radius: 12px;
    background: var(--color-brand);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em
}

.swal-button,
.swal-button:hover {
    background: var(--color-brand) !important;
    border-radius: 12px
}

.swal-modal {
    background: #272727;
    color: #fff;
    box-shadow: 0 0 8px 0 #fff
}

.swal-title,
.swal-text,
.swal-content,
.swal-content__body,
.swal-content * {
    color: #fff !important
}

@media (max-width:810px) {

    .button,
    .group-button {
        padding: 15px 10px;
        font-size: 11px
    }
}

.input {
    padding: 6px;
    border-radius: 4px;
    background: #444;
    color: #fff;
    border: .5px solid #fff;
    font-size: 16px
}

.headline {
    position: relative;
    font-size: 18px;
    letter-spacing: .25em;
    font-weight: 700;
    text-transform: uppercase
}

.headline:before {
    content: " ";
    width: 80px;
    height: 1px;
    background: #fff;
    display: block;
    margin: 0 auto 15px
}

.headline:after {
    content: " ";
    width: 80px;
    height: 1px;
    background: #fff;
    display: block;
    margin: 15px auto 0
}

#welcome .module {
    position: relative
}

#welcome .module .background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    z-index: 1
}

#welcome .module .content {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 2;
    padding: 50px;
    min-height: 80vh
}

#welcome .module .content .welcome-content {
    flex: 0 0 30%;
    margin: 0 50px;
    background: rgb(0 0 0 / .5);
    padding: 30px;
    border-radius: 12px
}

#welcome .module .content .welcome-content>* {
    margin: 0 0 1em
}

#welcome .module .content .welcome-content>*:last-child {
    margin-bottom: 0
}

#welcome .module .content .welcome-content h1 {
    font-size: 32px;
    font-weight: 700
}

#welcome .module .content .welcome-content h2 {
    font-size: 24px;
    font-weight: 700
}

#welcome .module .content .welcome-content p {
    font-size: 14px;
    line-height: 1.4em
}

#welcome .module .content form {
    flex: 0 0 30%;
    margin: 0 50px;
    padding: 30px;
    background: var(--color-dark-gray);
    border-radius: 12px;
    display: flex;
    flex-direction: column
}

#welcome .module .content form label {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 24px
}

#welcome .module .content form .input {
    margin-bottom: 16px
}

@media (max-width:810px) {
    #welcome .module .content {
        display: block;
        min-height: auto;
        padding: 35px
    }

    #welcome .module .content .welcome-content {
        margin: 0 0 30px
    }

    #welcome .module .content form {
        margin: 0
    }

    #welcome .module .content form .input {
        background: #fff;
        color: #000;
        border-color: var(--color-brand-light);
        border-radius: 12px;
        padding: 8px 12px
    }
}

#navbar .bars {
    display: flex;
    margin: 0;
    justify-content: space-between;
    padding: 0 35px 35px
}

#navbar .bars .bar {
    border-bottom: 3px solid var(--color-offwhite);
    flex: 0 0 calc(25% - 35px);
    margin: 0 17.5px;
    padding: 12px;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-weight: 600;
    color: var(--color-offwhite);
    cursor: pointer
}

#navbar .bars .bar.completed {
    border-color: var(--color-brand-light);
    color: var(--color-brand-light)
}

#navbar .bars .bar.active {
    color: #fff
}

@media (max-width:810px) {
    #navbar .bars {
        padding: 0 10px 10px
    }

    #navbar .bars .bar {
        font-size: 10px;
        padding: 0 0 8px;
        margin: 0 5px;
        flex-basis: calc(25% - 10px)
    }
}


#select_club .module {
    background: #2c2c2c
}

#select_club .form {
    display: flex;
    align-items: center;
    padding: 20px 47px 20px 35px
}

#select_club .form h2 {
    font-size: 24px;
    margin-right: 20px
}

#select_club .form input {
    margin-right: 15px;
    flex-basis: 25%
}

#select_club .mobile-tabs {
    display: none
}

#select_club .clubs-map {
    display: flex;
    padding: 0 0 50px
}

#select_club .clubs-map .clubs {
    flex: 0 0 50%;
    padding: 0 35px;
    text-align: left;
    max-height: 60vh;
    overflow-y: scroll;
    overflow-x: hidden
}

#select_club .clubs-map .clubs .club {
    border-bottom: 1px solid #fff;
    padding: 20px 0
}

#select_club .clubs-map .clubs .club .top {
    display: flex;
    align-items: center
}

#select_club .clubs-map .clubs .club .top .club-icon {
    margin-right: 20px
}

#select_club .clubs-map .clubs .club .top .name {
    margin-right: 20px;
    flex-basis: 45%
}

#select_club .clubs-map .clubs .club .top .name h3 {
    font-size: 18px;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 5px;
    letter-spacing: .1em
}

#select_club .clubs-map .clubs .club .top .name .signature {
    color: var(--color-brand-light);
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 700
}

#select_club .clubs-map .clubs .club .top .name p {
    font-size: 16px;
    line-height: 1.4em
}

#select_club .clubs-map .clubs .club .top .details-btn {
    margin: 0 20px 0 auto;
    display: flex
}

#select_club .clubs-map .clubs .club .top .details-btn .label {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-brand-light);
    text-transform: uppercase;
    letter-spacing: .1em
}

#select_club .clubs-map .clubs .club .top .details-btn .icon-collapsed {
    content: url(../assets/triangle-right-blue.svg);
    display: block;
    margin-left: 10px
}

#select_club .clubs-map .clubs .club .top .details-btn .icon-expanded {
    content: url(../assets/triangle-down-blue.svg);
    display: block;
    margin-left: 10px
}

#select_club .clubs-map .clubs .club .top .button {
    padding: 12px
}

#select_club .clubs-map .clubs .club .bottom {
    padding: 20px 0 0 44px;
    display: flex
}

#select_club .clubs-map .clubs .club .bottom .info {
    flex: 0 0 60%
}

#select_club .clubs-map .clubs .club .bottom .info h3 {
    font-weight: 700;
    color: var(--color-brand-light);
    letter-spacing: .1em;
    margin-bottom: 5px;
    text-transform: uppercase
}

#select_club .clubs-map .clubs .club .bottom .info .hours,
#select_club .clubs-map .clubs .club .bottom .info .phone {
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: .1em;
    line-height: 1.6em
}

#select_club .clubs-map .clubs .club .bottom .info .hours p {
    line-height: 1.4em
}

#select_club .clubs-map .map {
    background: #ccc;
    flex: 0 0 50%;
    min-height: 60vh
}

#select_club .clubs-map .map .p7-pin {
    color: #000;
    padding: 5px
}

#select_club .clubs-map .map .p7-pin .name {
    font-size: 16px;
    margin-bottom: 5px;
    text-transform: uppercase
}

#select_club .clubs-map .map .p7-pin .signature {
    color: var(--color-brand-light);
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 5px
}

#select_club .clubs-map .map .p7-pin .address {
    font-size: 12px;
    color: var(--color-gray)
}

#select_club .clubs-map .map .p7-pin .distance {
    font-size: 12px;
    color: var(--color-gray);
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 10px
}

@media (max-width:1080px) {
    #select_club .clubs-map .clubs .club .top .details-btn {
        display: none
    }
}

@media (max-width:810px) {
    #select_club .module {
        margin: 13px;
        border-radius: 18px;
        border: 1px solid #646464
    }

    #select_club .form {
        justify-content: center;
        padding: 20px 10px 0
    }

    #select_club .form h2 {
        display: none
    }

    #select_club .form input {
        flex-basis: 50%;
        border-color: var(--color-brand-light);
        border-radius: 12px;
        padding: 8px;
        background: #fff;
        color: #000
    }

    #select_club .mobile-tabs {
        display: flex;
        padding: 25px;
        justify-content: center
    }

    #select_club .mobile-tabs button {
        font-size: 17px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .3em;
        margin-right: 20px;
        border-bottom: 3px solid #fff;
        padding: 8px 20px
    }

    #select_club .mobile-tabs button.active {
        color: var(--color-brand-light);
        border-color: var(--color-brand-light)
    }

    #select_club .clubs-map {
        display: block
    }

    #select_club .clubs-map .clubs {
        display: none
    }

    #select_club .clubs-map.show-clubs .clubs {
        display: block;
        max-height: 100%;
        padding: 0 20px
    }

    #select_club .clubs-map .clubs .club {
        border: 1px solid #fff;
        margin-bottom: 25px;
        border-radius: 13px;
        padding: 15px
    }

    #select_club .clubs-map .clubs .club .top {
        align-items: flex-start;
        flex-wrap: wrap
    }

    #select_club .clubs-map .clubs .club .top .club-icon {
        flex-basis: 23px;
        margin-right: 15px
    }

    #select_club .clubs-map .clubs .club .top .name {
        flex-basis: calc(100% - 23px - 15px);
        margin: 0 0 15px
    }

    #select_club .clubs-map .clubs .club .top .name p .distance {
        display: block
    }

    #select_club .clubs-map .clubs .club .main-btn-wrapper {
        margin-left: 35px
    }

    #select_club .clubs-map.show-map .map {
        display: block;
        height: 70vh
    }
}

#select_plan .club-promo {
    background: var(--color-dark-gray);
    margin: 0 auto 65px;
    padding: 15px;
    border-radius: 18px;
    font-size: 18px;
    max-width: 70ch
}

#select_plan .club-promo>* {
    margin-top: .5em
}

#select_plan .club-promo>*:first-child {
    margin-top: 0
}

#select_plan .club-promo p {
    font-size: 18px;
    line-height: 1.2em
}

#select_plan .club-promo h1 {
    font-size: 26px;
    line-height: 1.1em
}

#select_plan .club-promo h2 {
    font-size: 24px;
    line-height: 1.1em
}

#select_plan .club-promo h3 {
    font-size: 20px;
    line-height: 1.1em
}

#select_plan .top-cards {
    display: flex;
    margin: 15px 0 0;
    padding: 0 35px;
    flex-wrap: wrap; /* Allow next row */
    gap: 20px; 
    justify-content: center;
    margin-bottom: 35px
}

#select_plan .top-cards .club-card {
    flex: 0 0 calc(25% - 28px);
    margin: 0 10.5px;
    padding: 35px;
    background: var(--color-dark-gray);
    border-radius: 18px
}

#select_plan .top-cards .club-card .headline {
    margin-bottom: 35px
}

#select_plan .top-cards .club-card h3 {
    margin-bottom: 35px
}

#select_plan .top-cards .club-card h3 span {
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase
}

#select_plan .top-cards .club-card h3 .pin {
    display: block;
    margin: 0 auto 10px
}

#select_plan .top-cards .club-card .details-btn {
    display: none
}

#select_plan .top-cards .plan-card {
    flex: 1 0 calc(24% - 28px);
    margin: 0 7.5px;
    border: 1px solid #fff;
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    position: relative
}

#select_plan .top-cards .plan-card.is-preferred:before {
    content: "Most Popular";
    background: #d1701b;
    color: #fff;
    border-radius: 14px 14px 0 0;
    font-size: 14px;
    letter-spacing: .075em;
    position: absolute;
    top: -35px;
    left: 50%;
    transform: translateX(-50%);
    padding: 10px 35px;
    text-transform: uppercase
}

#select_plan .top-cards .plan-card.is-preferred:after {
    content: "";
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    height: 100%;
    width: 100%;
    position: absolute;
    border-radius: 23px;
    background: #fff0;
    border-style: inset;
    border: 5px solid #d1701b
}

#select_plan .top-cards .plan-card.is-preferred {
    position: relative
}

#select_plan .top-cards .plan-card.is-preferred .button {
    position: relative;
    z-index: 1;
    background: #d1701b
}

#select_plan .top-cards .plan-card .name {
    padding: 15px;
    background: #fff;
    color: #000;
    font-size: 16px;
    letter-spacing: .15em;
    text-transform: uppercase;
    margin-bottom: 30px;
    border-radius: 17px 17px 0 0
}

#select_plan .top-cards .plan-card .monthly {
    color: var(--color-brand-light);
    display: flex;
    justify-content: center;
    font-weight: 200;
    border-bottom: 1px solid #fff;
    max-width: 90%;
    padding-bottom: 15px;
    margin: 0 auto 15px
}

#select_plan .top-cards .plan-card .monthly .dollars {
    display: flex
}

#select_plan .top-cards .plan-card .monthly .dollars .sign {
    font-size: 48px;
    margin-top: 15px
}

#select_plan .top-cards .plan-card .monthly .dollars .number {
    font-size: 88px;
    letter-spacing: -.06em
}

#select_plan .top-cards .plan-card .monthly .cents {
    margin: 10px 0 0 10px
}

#select_plan .top-cards .plan-card .monthly .cents .number {
    display: block;
    font-size: 40px;
    text-align: left
}

#select_plan .top-cards .plan-card .monthly .cents .mo {
    display: block;
    font-size: 30px;
    text-transform: uppercase
}

#select_plan .top-cards .plan-card .one-time {
    padding: 0 5px
}

#select_plan .top-cards .plan-card .one-time .promo {
    font-size: 48px;
    font-weight: 300;
    color: var(--color-brand-light);
    margin-bottom: 10px
}

#select_plan .top-cards .plan-card .one-time .label {
    font-size: 16px;
    text-transform: uppercase;
    color: var(--color-brand-light);
    letter-spacing: .02em;
    margin-bottom: 10px
}

#select_plan .top-cards .plan-card.no-monthly .one-time {
    margin: auto 0
}

#select_plan .top-cards .plan-card.no-monthly .one-time .promo {
    font-size: 72px;
    font-weight: 700
}

#select_plan .top-cards .plan-card.no-monthly .one-time .label {
    font-size: 24px
}

#select_plan .top-cards .plan-card .one-time .list {
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: .02em;
    text-decoration: line-through;
    margin-bottom: 5px
}

#select_plan .top-cards .plan-card .button {
    margin: auto 30px 35px
}

@media (max-width:1300px) {
    #select_plan .top-cards .plan-card .monthly .dollars .sign {
        font-size: 28px;
        margin-top: 8px
    }

    #select_plan .top-cards .plan-card .monthly .dollars .number {
        font-size: 74px
    }

    #select_plan .top-cards .plan-card .monthly .cents .number {
        font-size: 32px
    }

    #select_plan .top-cards .plan-card .monthly .cents .mo {
        font-size: 24px
    }
}

@media (max-width:1020px) {
    #select_plan .club-promo {
        margin: 10px auto;
        max-width: calc(100% - 20px)
    }

    #select_plan .top-cards {
        padding: 0 10px;
        flex-wrap: wrap;
        column-gap: 12px;
        row-gap: 48px;
        justify-content: space-between
    }

    #select_plan .top-cards .club-card {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
        margin: 0 0 15px;
        padding: 30px
    }

    #select_plan .top-cards .club-card .headline {
        margin-bottom: 30px
    }

    #select_plan .top-cards .club-card h3 {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 30px
    }

    #select_plan .top-cards .club-card h3 .pin {
        margin: 0 10px 0 0;
        width: 20px
    }

    #select_plan .top-cards .club-card .details-btn {
        margin: 0 auto 15px;
        display: flex
    }

    #select_plan .top-cards .club-card .details-btn .label {
        color: var(--color-brand-light);
        font-size: 14px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .1em
    }

    #select_plan .top-cards .club-card .details-btn .icon {
        content: url(../assets/triangle-down-blue.svg);
        display: block;
        margin-left: 5px
    }

    #select_plan .top-cards .club-card .club-details {
        display: none
    }

    #select_plan .top-cards .club-card .club-details.expanded {
        display: block
    }

    #select_plan .top-cards .club-card .club-details p {
        margin-bottom: 1em
    }

    /* Force 2 plan cards per row at tablet/mobile widths */
    #select_plan .top-cards .plan-card,
    #select_plan .top-cards.more-than-3-plans .plan-card {
        flex: 0 0 calc((100% - 12px) / 2);
        width: calc((100% - 12px) / 2);
        max-width: calc((100% - 12px) / 2);
        margin: 0;
        border-radius: 10px;
        box-sizing: border-box
    }

    /* Odd plan count: last card full width (club-card is first child) */
    #select_plan .top-cards .plan-card:last-child:nth-child(even),
    #select_plan .top-cards.more-than-3-plans .plan-card:last-child:nth-child(even) {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%
    }

    #select_plan .top-cards .plan-card.is-preferred {
        margin-top: 18px
    }

    #select_plan .top-cards .plan-card.is-preferred:before {
        border-radius: 5px 5px 0 0;
        font-size: 11px;
        letter-spacing: 0;
        padding: 8px 0;
        top: -18px;
        width: 76%;
        position: absolute;
        left: 50%;
        transform: translate(-50%, -50%)
    }

    #select_plan .top-cards .plan-card .name {
        padding: 5px;
        font-size: 12px;
        margin-bottom: 15px;
        border-radius: 9px 9px 0 0
    }

    #select_plan .top-cards .plan-card .monthly {
        align-items: flex-start;
        max-width: 100%;
        padding: 0 6px 10px;
        gap: 1px
    }

    #select_plan .top-cards .plan-card .monthly .dollars .sign {
        font-size: 13px;
        margin-top: 5px
    }

    #select_plan .top-cards .plan-card .monthly .dollars .number {
        font-size: 28px;
        letter-spacing: -0.02em
    }

    #select_plan .top-cards .plan-card .monthly .cents {
        margin: 1px 0 0 0;
        flex-shrink: 0;
        line-height: 1.05
    }

    #select_plan .top-cards .plan-card .monthly .cents .number {
        font-size: 13px;
        line-height: 1.1
    }

    #select_plan .top-cards .plan-card .monthly .cents .mo {
        font-size: 10px;
        line-height: 1.1
    }

    #select_plan .top-cards .plan-card .one-time .promo {
        font-size: 22px
    }

    #select_plan .top-cards .plan-card .one-time .label {
        font-size: 11px;
        padding: 0 10px
    }

    #select_plan .top-cards .plan-card .one-time .list {
        font-size: 14px;
        margin-bottom: 10px
    }

    #select_plan .top-cards .plan-card .button {
        margin: auto 10px 10px
    }
}

@media (max-width:700px) {
    .modal.renewal-modal{
        width: 80%;
    }
}

#select_plan .sticky {
    position: -webkit-sticky;
    position: sticky;
    padding: 0 50px;
    top: 0
}

#select_plan .sticky table {
    border-collapse: collapse;
    border-radius: 18px;
    width: 100%;
    background: var(--color-dark-gray);
    margin: 0 0 35px;
    box-shadow: 0 10px 10px #000
}

#select_plan .sticky table td {
    padding: 20px 5px;
    width: 19%
}

#select_plan .sticky table td:first-child {
    border-left: 0 none;
    width: 25% !important
}

#select_plan .sticky table td:last-child {
    border-right: 0 none
}

#select_plan .sticky table.cols-2 td {
    width: calc(50% - 25% / 2)
}

#select_plan .sticky table.cols-3 td {
    width: 25%
}

@media (max-width:810px) {
    #select_plan .sticky {
        padding: 0 20px
    }

    #select_plan .sticky table td {
        padding: 10px
    }
}

@media (max-width:700px) {
    #select_plan .sticky {
        padding: 0 5px
    }

    #select_plan .sticky table {
        margin: 0 0 10px
    }

    #select_plan .sticky table td {
        font-size: 11px;
        padding: 10px 5px
    }
}

@media screen and (min-width: 1021px) {
    #select_plan .top-cards .plan-card {
        flex: 0 0 calc(24% - 28px);
    }
}

/* When there are more than 3 plans, show 3 cards per row (desktop only) */
@media screen and (min-width: 1021px) {
    #select_plan .top-cards.more-than-3-plans .club-card {
        flex: 0 0 calc(33% - 28px);
    }

    #select_plan .top-cards.more-than-3-plans .plan-card {
        flex: 0 0 calc(33% - 28px);
    }
}

#select_plan .features {
    padding: 0 50px
}

#select_plan .features table {
    border-collapse: collapse;
    border-radius: 18px;
    background: var(--color-dark-gray);
    width: 100%
}

#select_plan .features table th,
#select_plan .features table td {
    padding: 20px;
    border: 1px solid #707070;
    border-width: 0 1px
}

#select_plan .features table th.club-features-label {
    text-transform: uppercase;
    letter-spacing: .1em;
    text-align: left;
    font-weight: 700
}

#select_plan .features table th:first-child,
#select_plan .features table td:first-child {
    border-left: 0 none
}

#select_plan .features table th:last-child,
#select_plan .features table td:last-child {
    border-right: 0 none
}

#select_plan .features table th button.info {
    background: var(--color-brand);
    font-size: 10px;
    border-radius: 100%;
    height: 20px;
    width: 20px;
    margin-left: 5px
}

#select_plan .features table .label {
    text-align: left;
    width: 25%
}

#select_plan .features table tr:hover td {
    background: rgb(0 0 0 / .2)
}

#select_plan .features table.cols-3 td {
    width: 25%
}

@media (max-width:810px) {
    #select_plan .features {
        padding: 0 20px
    }

    #select_plan .features table th,
    #select_plan .features table td {
        padding: 10px;
        font-size: 12px
    }
}

@media (max-width:700px) {
    #select_plan .features {
        padding: 0 5px
    }

    #select_plan .features table th,
    #select_plan .features table td {
        padding: 10px 5px;
        font-size: 11px
    }
}

#select_plan .bottom-buttons {
    display: flex;
    justify-content: flex-end;
    padding: 0 35px
}

#select_plan .bottom-buttons .spacer {
    flex: 0 0 25%
}

#select_plan .bottom-buttons .button-wrapper {
    flex: 1 0 25%;
    padding: 15px 35px
}

@media (max-width:810px) {
    #select_plan .bottom-buttons {
        padding: 0 10px
    }

    #select_plan .bottom-buttons .button-wrapper {
        padding: 15px 5px
    }
}

@media (max-width:700px) {
    #select_plan .bottom-buttons .button-wrapper {
        padding: 10px 5px;
        overflow: hidden
    }
}

#select_plan .ach-disclaimer {
    margin: 35px
}

#personal_info .headline {
    margin-bottom: 35px
}

#personal_info .wrapper {
    background: var(--color-dark-gray);
    padding: 35px;
    border-radius: 18px;
    margin: 0 35px
}

#personal_info .bottom-nav {
    justify-content: space-between
}

@media (max-width:810px) {
    #personal_info .headline {
        margin-bottom: 30px
    }

    #personal_info .wrapper {
        margin: 0 10px;
        padding: 20px
    }
}

.form-fields {
    max-width: 800px;
    margin: 0 auto;
    text-align: left
}

.form-fields hr {
    height: 35px
}

.form-fields .field {
    margin-bottom: 15px
}

.form-fields .field label {
    display: block;
    font-size: 18px;
    font-weight: 300;
    text-align: left;
    letter-spacing: .02em;
    margin-bottom: 10px
}

.form-fields .field label.radio {
    display: inline-block;
    margin: 0 10px 10px 0
}

.form-fields .field .input {
    width: 100%
}

.form-fields .fields-row {
    display: flex;
    margin: 0 -5px 15px
}

.form-fields .fields-row .field {
    flex: 0 0 calc(50% - 10px);
    margin: 0 5px
}

.form-fields .fields-row-address {
    display: flex;
    margin: 0 -5px 15px
}

.form-fields .fields-row-address .field {
    margin: 0 5px
}

.form-fields .fields-row-address .field.address_city {
    flex: 0 0 calc(50% - 10px)
}

.form-fields .fields-row-address .field.address_state {
    flex: 0 0 calc(20% - 10px)
}

.form-fields .fields-row-address .field.address_zipcode {
    flex: 0 0 calc(30% - 10px)
}

@media (max-width:700px) {
    .form-fields .field label {
        font-size: 16px
    }
}

.bottom-nav {
    margin-top: 30px
}

.wrapper .bottom-nav {
    border-top: 1px solid rgb(255 255 255 / .25);
    padding-top: 10px
}

.bottom-nav .nav-btn {
    display: flex;
    padding: 10px 20px;
    border-radius: 12px;
    color: #fff;
    border: 1px solid rgb(255 255 255 / .4);
    margin: 15px auto
}

.bottom-nav .nav-btn .label {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase
}

.bottom-nav .nav-btn .icon {
    content: url(../assets/triangle-left-white.svg);
    margin-top: 2px
}

.bottom-nav .nav-btn.continue {
    background: var(--color-brand);
    color: #fff;
    border-color: var(--color-brand-light);
    padding: 15px 40px
}

.bottom-nav .nav-btn.continue .label {
    font-size: 16px;
    font-weight: 800
}

.bottom-nav .total {
    margin: 30px auto;
    color: var(--color-brand-light);
    position: relative;
    display: flex;
    justify-content: center
}

.bottom-nav .total .today-monthly {
    display: flex
}

.bottom-nav .total .today-monthly .today {
    padding-right: 15px
}

.bottom-nav .total .today-monthly .monthly {
    border-left: 1px solid rgb(255 255 255 / .5);
    padding-left: 15px
}

.bottom-nav .total .today-monthly .label {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
    cursor: pointer
}

.bottom-nav .total .today-monthly .label .icon {
    content: url(../assets/cart-icon.svg);
    margin-right: 5px
}

.bottom-nav .total .today-monthly .label .text {
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .075em
}

.bottom-nav .total .today-monthly .number {
    font-size: 24px;
    font-weight: 800;
    cursor: pointer
}

.bottom-nav .total>.popup {
    position: absolute;
    bottom: 70px;
    left: 50%;
    transform: translateX(-50%);
    background: #000;
    border: 1px solid var(--color-brand-light);
    padding: 15px;
    min-width: 500px;
    border-radius: 10px;
    display: flex
}

.bottom-nav .total>.popup:after {
    width: 0;
    height: 0;
    content: " ";
    border-style: solid;
    border-width: 20px 20px 0 20px;
    border-color: var(--color-brand-light) #fff0 #fff0 #fff0;
    position: absolute;
    bottom: -20px;
    left: calc(50% - 20px)
}

.bottom-nav .total>.popup .table {
    margin: 0 10px
}

.bottom-nav .total>.popup .table .text {
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 5px;
    text-transform: uppercase
}

.bottom-nav .total>.popup .table table {
    border-collapse: collapse;
    table-layout: auto;
    width: 250px
}

.bottom-nav .total>.popup .table table tr td {
    padding: 10px;
    border: 1px solid rgb(255 255 255 / .5);
    font-size: 14px
}

.bottom-nav .total>.popup .table table tr td:first-child {
    border-left: 0 none;
    text-align: right
}

.bottom-nav .total>.popup .table table tr td:last-child {
    border-right: 0 none;
    text-align: right
}

.bottom-nav .total>.popup .table table tr:first-child td {
    border-top: 0 none
}

.bottom-nav .total>.popup .table table tr:last-child td {
    border-bottom: 0 none
}

@media (max-width:810px) {
    .bottom-nav {
        padding: 15px
    }
}

@media (max-width:700px) {
    .bottom-nav {
        padding: 10px
    }

    .bottom-nav .nav-btn {
        padding: 10px
    }

    .bottom-nav .total .today-monthly .today {
        padding-right: 5px
    }

    .bottom-nav .total .today-monthly .monthly {
        padding-left: 5px
    }

    .bottom-nav .total .today-monthly .today .label {
        justify-content: flex-end
    }

    .bottom-nav .total .today-monthly .label .icon {
        display: none
    }

    .bottom-nav .total .today-monthly .label .text span {
        display: none
    }

    .bottom-nav .total .today-monthly .label .text {
        font-size: 10px
    }

    .bottom-nav .total .today-monthly .number {
        font-size: 16px
    }

    .bottom-nav .total>.popup {
        display: block;
        min-width: 0
    }

    .bottom-nav .total>.popup .table {
        margin: 0
    }

    .bottom-nav .total>.popup .table:last-child {
        margin-top: 30px
    }

    .bottom-nav .total>.popup .table table tr td {
        font-size: 14px;
        padding: 5px
    }
}

#additional_members .headline {
    margin-bottom: 35px
}

#additional_members .wrapper {
    background: var(--color-dark-gray);
    padding: 35px;
    border-radius: 18px;
    margin: 0 35px
}

#additional_members .add-member .member-group {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px
}

#additional_members .add-member .member-group label {
    flex: 0 0 50%;
    text-align: right;
    padding: 0 15px
}

#additional_members .add-member .member-group label .name {
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-brand-light)
}

#additional_members .add-member .member-group label .age {
    font-size: 16px;
    color: var(--color-brand-light)
}

#additional_members .add-member .member-group .button-wrapper {
    flex: 0 0 50%
}

#additional_members .add-member .member-group .group-button {
    display: flex
}

#additional_members .add-member .member-group .group-button:disabled {
    opacity: .5
}

#additional_members .add-member .member-group .group-button .icon {
    content: url(../assets/icon-plus.svg);
    margin-right: 5px
}

#additional_members .add-member .member-group .group-button .label {
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em
}

#additional_members .members {
    max-width: 800px;
    margin: 0 auto
}

#additional_members .members .member {
    margin-top: 35px;
    border-top: 1px solid #fff;
    padding: 35px
}

#additional_members .members .member .group-name {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px
}

#additional_members .members .member .group-name .text {
    font-size: 18px;
    font-weight: 800;
    text-transform: uppercase
}

#additional_members .members .member .group-name .remove-btn {
    border: 1px solid #fff;
    padding: 5px 10px;
    text-transform: uppercase;
    border-radius: 12px;
    font-size: 12px;
    opacity: .7
}

@media (max-width:810px) {
    #additional_members .headline {
        margin-bottom: 30px
    }

    #additional_members .wrapper {
        margin: 0 10px;
        padding: 20px
    }

    #additional_members .add-member .member-group {
        padding: 10px 0
    }

    #additional_members .add-member .member-group label {
        padding: 0 10px 0 0;
        flex-basis: 45%
    }

    #additional_members .add-member .member-group label .age {
        display: block
    }

    #additional_members .add-member .member-group .button-wrapper {
        flex-basis: 55%
    }

    #additional_members .add-member .member-group .group-button .icon {
        flex: 0 0 10px
    }

    #additional_members .add-member .member-group .group-button .label {
        font-size: 14px
    }

    #additional_members .members .member {
        padding: 30px 0
    }

    #additional_members .members .member .group-name .text {
        font-size: 16px
    }

    #additional_members .members .member .group-name .remove-btn {
        font-size: 9px
    }
}

#optional_amenities .headline {
    margin-bottom: 35px
}

#optional_amenities .wrapper {
    background: var(--color-dark-gray);
    padding: 35px;
    border-radius: 18px;
    margin: 0 35px
}

#optional_amenities .optional-amenity {
    padding: 35px 0;
    border-bottom: 1px solid rgb(255 255 255 / .5);
    max-width: 800px;
    margin: 0 auto
}

#optional_amenities .optional-amenity:last-child {
    border-bottom: 0 none
}

#optional_amenities .optional-amenity .top {
    display: flex;
    align-items: center;
    margin-bottom: 15px
}

#optional_amenities .optional-amenity .top .amenity-name {
    flex: 0 0 calc(100% - 120px);
    font-size: 22px;
    text-align: left;
    padding-right: 20px
}

#optional_amenities .optional-amenity .top .amenity-price {
    flex: 0 0 120px;
    font-size: 32px;
    color: var(--color-brand-light);
    font-weight: 700;
    text-align: right
}

#optional_amenities .optional-amenity .bottom .member {
    display: flex;
    align-items: center;
    margin-bottom: 5px
}

#optional_amenities .optional-amenity .bottom .member .button-wrapper {
    margin-right: 10px
}

@media (max-width:810px) {
    #optional_amenities .headline {
        margin-bottom: 30px
    }

    #optional_amenities .wrapper {
        margin: 0 10px;
        padding: 20px
    }

    #optional_amenities .optional-amenity .top .amenity-name {
        font-size: 16px
    }

    #optional_amenities .optional-amenity .top .amenity-price {
        font-size: 24px;
        flex-basis: auto;
        margin-left: auto
    }
}

#payment_information .headline {
    margin-bottom: 35px
}

#payment_information .wrapper {
    background: var(--color-dark-gray);
    padding: 35px;
    border-radius: 18px;
    margin: 0 35px
}

#payment_information .sections {
    display: flex;
    margin: 0 -17.5px;
    text-align: left
}

#payment_information .sections .section-type {
    flex: 0 0 calc(20% - 35px);
    margin: 0 17.5px;
    display: flex;
    flex-direction: column
}
.main-section.section-type {
    flex: 0 0 calc(100%);
    /* margin: 0 17.5px; */
    display: flex;
    flex-direction: column
}

#payment_information .sections .section-type .form-fields, .main-section.section-type .form-fields {
    margin-left: 0
}

#payment_information .sections .section-type .form-fields label, .main-section.section-type .form-fields label {
    display: block
}

#payment_information .sections .section-type .info, .main-section.section-type .info {
    margin-top: 15px
}

#payment_information .sections .section-type .info p {
    max-width: 24ch;
    line-height: 1.1em
}

.main-section.section-type .info p {
    text-align: left;
    line-height: 1.1em
}

.main-section.section-type {
    padding-bottom: 8%;
}

.main-section.section-type .form-fields .field {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  flex-wrap: wrap;
  flex: 100%; /* roughly 3 per row with spacing */
  width: 100%;
}

.main-section.section-type .info p, .main-section.section-type .info button
{
    text-align: center !important;
}

.main-section.section-type .info button {
    display: inline !important;
}

.main-section.section-type .form-fields .field label.radio {
    flex: 32%;
    /* min-width: 30%; */
    padding: 12px;
    text-align: center;
}

.main-section.section-type .form-fields {
    width: 100%;
    margin: 0px !important;
    max-width: 100% !important;
}

#payment_information .sections .section-type .info button, .main-section.section-type .info button {
    color: var(--color-brand-light);
    display: flex;
    text-align: left;
    margin-top: 30px;
    font-size: 12px
}

#payment_information .sections .section-type .info button img, .main-section.section-type .info button img {
    display: inline-block;
    width: 35px;
    margin-right: 5px
}

#payment_information .sections .section-ach {
    flex: 0 0 calc(50% - 35px);
    margin: 0 17.5px;
    padding-right: 15px
}

#payment_information .sections .section-card {
    flex: 0 0 calc(50% - 35px);
    margin: 0 17.5px
}

#payment_information .sections .section-card .form-fields {
    margin-left: 0
}

#payment_information .sections .section-card .headline {
    color: var(--color-brand-light);
    margin-bottom: 30px
}

#payment_information .sections .section-card .headline.presale {
    margin-top: 65px
}

#payment_information .sections .section-card .headline span {
    font-size: 16px;
    font-weight: 800
}

#payment_information .sections .section-card .headline:before,
#payment_information .sections .section-card .headline:after {
    margin-left: 0;
    width: 54px
}

#payment_information .sections .section-card .headline:before {
    margin-bottom: 10px
}

#payment_information .sections .section-card .headline:after {
    margin-top: 10px
}

#payment_information .sections .section-card p {
    margin-bottom: 35px;
    max-width: 24ch;
    line-height: 1.1em
}

#payment_information .sections .section-card .fields-row-card {
    display: flex;
    margin: 0 -10px 15px
}

#payment_information .sections .section-card .fields-row-card .field {
    margin: 0 10px
}

#payment_information .sections .section-card .fields-row-card .field-cc_number {
    flex: 0 0 calc(80% - 20px)
}

#payment_information .sections .section-card .fields-row-card .field-cc_verification {
    flex: 0 0 calc(20% - 20px)
}

#payment_information .sections .section-card .fields-row-card .field-cc_name {
    flex: 0 0 calc(40% - 20px)
}

#payment_information .sections .section-card .fields-row-card .field-cc_zipcode {
    flex: 0 0 calc(20% - 20px)
}

#payment_information .sections .section-card .fields-row-card .field-cc_exp_month {
    flex: 0 0 calc(20% - 20px)
}

#payment_information .sections .section-card .fields-row-card .field-cc_exp_year {
    flex: 0 0 calc(20% - 20px)
}

@media (max-width:1080px) {
    #payment_information .sections {
        flex-wrap: wrap
    }

    #payment_information .sections .section-type {
        flex-basis: calc(40% - 35px)
    }

    #payment_information .sections .section-ach {
        flex-basis: calc(60% - 35px)
    }

    #payment_information .sections .section-card {
        flex-basis: calc(100% - 35px);
        margin-top: 100px
    }

    #payment_information .sections .section-card .form-fields {
        max-width: 100%
    }
}

@media (max-width:810px) {
    #payment_information .headline {
        margin-bottom: 30px
    }

    #payment_information .wrapper {
        margin: 0 10px;
        padding: 20px
    }
}

@media (max-width:700px) {
    #payment_information .sections {
        display: block
    }

    #payment_information .sections .section-type .info {
        margin-bottom: 35px
    }

    #payment_information .sections .section-type .info p {
        max-width: 100%
    }

    #payment_information .sections .section-ach {
        margin-right: 0
    }

    #payment_information .sections .section-card {
        margin-top: 50px
    }

    #payment_information .sections .section-card .headline {
        margin-bottom: 15px
    }

    #payment_information .sections .section-card p {
        max-width: 100%;
        margin-bottom: 15px
    }

    #payment_information .sections .section-card .fields-row-card {
        flex-wrap: wrap;
        margin: 0 -10px
    }

    #payment_information .sections .section-card .fields-row-card .field {
        margin: 0 10px 10px
    }

    #payment_information .sections .section-card .fields-row-card .field-cc_number {
        flex: 0 0 calc(70% - 20px)
    }

    #payment_information .sections .section-card .fields-row-card .field-cc_verification {
        flex: 0 0 calc(30% - 20px)
    }

    #payment_information .sections .section-card .fields-row-card .field-cc_name {
        flex: 0 0 calc(100% - 20px)
    }

    #payment_information .sections .section-card .fields-row-card .field-cc_zipcode {
        flex: 0 0 calc(33.33% - 20px)
    }

    #payment_information .sections .section-card .fields-row-card .field-cc_exp_month {
        flex: 0 0 calc(33.33% - 20px)
    }

    #payment_information .sections .section-card .fields-row-card .field-cc_exp_year {
        flex: 0 0 calc(33.33% - 20px)
    }
}

#check_modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    padding: 35px;
    background: rgb(0 0 0 / .9);
    flex-direction: column;
    justify-content: center;
    display: none
}

#check_modal.active {
    display: flex
}

#check_modal .modal-content {
    max-width: 500px;
    margin: auto
}

#check_modal .modal-content .close-btn {
    background: var(--color-brand);
    color: #fff;
    border-radius: 100%;
    width: 35px;
    height: 35px;
    margin: 0 0 15px auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
}

@media (max-width:810px) {
    #check_modal {
        padding: 20px
    }
}

#review_order .headline {
    margin: 35px 0
}

#review_order .club-summary {
    border: 1px solid #fff;
    padding: 5px 10px;
    border-radius: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 35px 35px
}

#review_order .club-summary h3 {
    display: flex;
    align-items: center
}

#review_order .club-summary h3 img {
    flex: 0 0 18px;
    margin-right: 5px
}

#review_order .club-summary h3 span {
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em
}

#review_order .sections {
    display: flex;
    margin: 0 25px 35px;
    justify-content: center
}

#review_order .section {
    background: #000;
    border-radius: 18px;
    margin: 0 10px;
    padding: 35px;
    display: flex;
    flex-direction: column;
    flex: 1 0 calc(25% - 20px);
    text-align: center;
}

#review_order .section h3 {
    color: var(--color-brand-light);
    font-size: 22px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    margin-bottom: 15px
}

#review_order .section .note {
    margin: -12px auto 15px;
    max-width: 20ch
}

#review_order .section .edit-btn {
    border: 1px solid #fff;
    padding: 5px 15px;
    font-size: 14px;
    border-radius: 15px
}

#review_order .section .info {
    line-height: 1.4em;
    margin-bottom: 35px
}

#review_order .section .info:last-child {
    margin-bottom: 0
}

#review_order .section table {
    border-collapse: collapse;
    /* margin-top: auto */
}

#review_order .section table tr td {
    border: 1px solid #fff;
    padding: 10px
}

#review_order .section table tr:first-child td {
    border-top: 0 none
}

#review_order .section table tr td:first-child {
    border-left: 0 none;
    padding-left: 0 !important
}

#review_order .section table tr td:last-child {
    border-right: 0 none;
    padding-right: 0 !important
}

#review_order .section table tr td.label {
    text-align: left
}

#review_order .section table tr td.value {
    text-align: right
}

#review_order .section table tr.total td {
    font-weight: 700
}

#review_order .terms {
    margin: 0 35px
}

#review_order .terms .term {
    text-align: left;
    margin-bottom: 15px
}

#review_order .terms .term label {
    display: flex
}

#review_order .terms .term label .check {
    flex: 0 0 25px
}

#review_order .terms .term label .agree p {
    font-size: 14px;
    line-height: 1.2em
}

#review_order .terms .term label button {
    position: relative;
    top: 2px
}

#review_order .terms .term label button img {
    width: 12px
}

#review_order .terms .term .content {
    padding-left: 25px;
    margin-top: 15px
}

#review_order .terms .term .content p {
    font-size: 14px;
    line-height: 1.2em
}

.terms-payment .terms {
    margin: 0 35px 0px 0px;
}

.terms-payment .terms .term {
    text-align: left;
    margin-bottom: 15px
}

.terms-payment .terms .term label {
    display: flex
}

.terms-payment .terms .term label .check {
    flex: 0 0 25px
}

.terms-payment .terms .term label .agree p {
    font-size: 14px;
    line-height: 1.2em
}

.terms-payment .terms .term label button {
    position: relative;
    top: 2px
}

.terms-payment .terms .term label button img {
    width: 12px
}

.terms-payment .terms .term .content {
    padding-left: 25px;
    margin-top: 15px
}

.terms-payment .terms .term .content p {
    font-size: 14px;
    line-height: 1.2em
}

@media (max-width:1080px) {
    #review_order .sections {
        flex-wrap: wrap
    }

    #review_order .section {
        flex-basis: calc(50% - 20px);
        margin: 0 10px 35px
    }
}

@media (max-width:700px) {
    #review_order .club-summary {
        display: block;
        padding: 20px
    }

    #review_order .club-summary h3 {
        display: block;
        margin-bottom: 15px
    }

    #review_order .club-summary h3 img {
        display: block;
        margin: 0 auto 10px;
        width: 20px
    }

    #review_order .club-summary h3 span {
        display: block
    }

    #review_order .sections {
        display: block
    }
}

#confirmation .thankyou-image {
    position: relative;
    height: 50vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 35px
}

#confirmation .thankyou-image img {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: top right;
    object-position: top right
}

#confirmation .thankyou-image .overlay {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: .75
}

#confirmation .thankyou-image .headline {
    position: relative;
    z-index: 3
}

#confirmation .thankyou-content {
    padding: 35px;
    max-width: 600px;
    margin: 0 auto;
    background: var(--color-dark-gray);
    border-radius: 18px
}

#confirmation .thankyou-content .content {
    margin-top: 35px
}

#confirmation .thankyou-content .content:first-child {
    margin-top: 0
}

#confirmation .thankyou-content p {
    line-height: 1.2em
}

#confirmation .barcode {
    font-family: "Libre Barcode 39", cursive;
    font-size: 72px;
    background: #fff;
    color: #000;
    display: inline-block;
    padding: 10px
}

#confirmation h4 {
    margin-bottom: 1rem;
}

#confirmation .mobile-app-btns {
    margin: 2rem 0;
    display: flex;
    align-items: center;
    gap: 1rem;
}

@media (max-width:700px) {
    #confirmation .thankyou-image {
        height: 30vh
    }

    #confirmation .thankyou-content {
        margin: 0 35px
    }
}

#presale_options .headline {
    margin-bottom: 35px
}

#presale_options .wrapper {
    background: var(--color-dark-gray);
    padding: 35px;
    border-radius: 18px;
    margin: 0 35px
}

#presale_options .bottom-nav {
    justify-content: space-between
}

@media (max-width:810px) {
    #presale_options .headline {
        margin-bottom: 30px
    }

    #presale_options .wrapper {
        margin: 0 10px;
        padding: 20px
    }
}

#termsCheckboxLabel {
    display: flex;
    align-items: start;
    justify-content: center;
    gap: 10px
}

#termsCheckbox {
    width: 45px;
    height: 18px
}

.modal {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .4rem;
    width: 80%;
    padding: 1.3rem;
    min-height: 250px;
    position: fixed;
    background: #272727;
    color: #fff;
    box-shadow: 0 0 8px 0 #fff;
    border: 1px solid #444;
    border-radius: 15px;
    z-index: 2;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.modal.renewal-modal{
	width: 50%;
}

.mt-3 {
    margin-top: 1rem
}

.terms-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    color: #fff
}

.modal-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #fff
}

.terms-modal-content {
	max-height: 80vh;
	overflow-y: auto;
	color: #fff;
	text-align: left;
	padding-right: 0.5rem
}

.terms-modal-content p {
	font-size: 0.95rem;
	line-height: 1.7;
	margin: 0 0 1rem
}

.terms-modal-content p strong {
	display: inline-block;
	margin-top: 0.75rem;
	margin-bottom: 0.15rem;
	line-height: 1.4
}

.terms-modal-content p:first-child strong {
	margin-top: 0
}

.terms-modal-content ul {
	margin: 0.25rem 0 1.25rem 1.25rem;
	padding-left: 1.25rem;
	list-style-type: disc
}

.terms-modal-content ul li {
	margin-bottom: 0.65rem;
	line-height: 1.6
}

.terms-modal-content a {
	color: #1E8DC7;
	text-decoration: underline
}

.terms-modal-content a:hover {
	text-decoration: none
}

.terms-modal-content ol li {
    margin-bottom: 2rem
}

.renewal-modal-content ol li {
    margin-bottom: 0.5rem !important;
}

.text-center {
    text-align: center
}

.font-bold {
    font-weight: 700
}

.terms-modal-content * {
    line-height: 1.7
}

.terms-modal-content {
    scrollbar-width: thin;
    scrollbar-color: #ddd #fff0
}

.terms-modal-content::-webkit-scrollbar {
    width: 10px
}

.terms-modal-content::-webkit-scrollbar-thumb {
    background-color: #ddd;
    border-radius: 10px
}

.modal input {
    padding: .7rem 1rem;
    border: 1px solid #666;
    border-radius: 5px;
    font-size: .9em;
    background: #1a1a1a;
    color: #fff
}

.modal p {
    font-size: .9rem;
    margin: .4rem 0 .2rem;
    color: #fff
}

.modal .terms-modal-content p {
	font-size: 0.95rem;
	line-height: 1.7;
	margin: 0 0 1rem
}

.modal .terms-modal-content p strong {
	display: inline-block;
	margin-top: 0.75rem;
	margin-bottom: 0.15rem
}

button {
    cursor: pointer;
    border: none;
    font-weight: 600
}

.btn {
    display: inline-block;
    padding: .8rem 1.4rem;
    font-weight: 700;
    background-color: #000;
    color: #fff;
    border-radius: 5px;
    text-align: center;
    font-size: 1em
}

.btn-open {
    position: absolute;
    bottom: 150px
}

.btn-close {
    transform: translate(10px, -20px);
    padding: .5rem .7rem;
    background: #eee;
    border-radius: 50%
}

.overlay {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: rgb(0 0 0 / .5);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px)
}

.hidden {
    display: none
}

#smart_start .module {
    position: relative;
}

#smart_start .module .background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    z-index: 1
}

#smart_start .module .content {
    display: -webkit-box;
    background: rgb(0 0 0 / .5);
    -webkit-backdrop-filter: blur(3px);
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
    padding: 50px;
    min-height: 80vh
}

#smart_start .module .content {
    margin-bottom: 0;
    padding: 50px;
    margin: 0 auto;
    min-height: 65vh
}


#smart_start .module .content>div {
    max-width: 70%;
}

#smart_start .module .content h1 {
    font-size: 32px;
    font-weight: 700
}

#smart_start .module .content h2 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 10%;
}

#smart_start .module .content p {
    font-size: 24px;
    line-height: 2rem;
    text-align: center;
    margin: 30px;
    margin-bottom: 2rem;
}

@media (max-width:810px) {
    #smart_start .module .content {
        display: block;
        min-height: auto;
        padding: 35px;
    }

    #smart_start .module .content>div {
        max-width: 100%
    }

    #smart_start .module .content .welcome-content {
        margin: 0 0 30px
    }

    #smart_start .module .content form {
        margin: 0
    }

    #smart_start .module .content form .input {
        background: #fff;
        color: #000;
        border-color: var(--color-brand-light);
        border-radius: 12px;
        padding: 8px 12px
    }
}

.smart_start_footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 2rem
}

.smart_start_footer .back {
    margin: 0rem
}

#schedule .module .content h2 {
    font-size: 24px;
    font-weight: 700
}

#schedule .module {
    position: relative
}

#schedule .module .background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    z-index: 1
}

#schedule .module .content {
    display: -webkit-box; 
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
    padding: 50px;
}

#schedule .module .content {
    margin-bottom: 0;
    padding: 50px;
    max-width: 70%;
    margin: 0 auto;
}

.schedule-list {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 1.5rem
}

.schedule-list .member-schedule {
    padding: 2rem;
    background-color: var(--color-dark-gray);
    border-radius: 30px;
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem
}

.schedule-list .member-schedule .member {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem
}

.schedule-list .member-schedule .member img {
    width: 100px;
    height: 100px
}

.schedule-list .member-schedule .member span {
    text-align: center;
    color: var(--color-brand);
    font-weight: 700;
    font-size: 1.2rem
}

.schedule-list .member-schedule .schedule-now {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-grow: 1;
    border: 1px solid #fff;
    border-radius: 10px;
    padding: .5rem
}

.schedule-list .member-schedule .schedule-now button {
    display: flex;
    align-items: center;
    gap: 1rem
}

.schedule-list .member-schedule .schedule-now span {
    color: var(--color-brand-light)
}

.schedule-list .member-schedule .schedule-now img {
    width: 30px;
    height: 30px
}

#scheduleModal {
    position: absolute;
    z-index: 1;
    max-width: 400px;
    overflow: auto;
    top: 10%;
    background-color: var(--color-dark-gray);
    border-radius: 5px
}

#scheduleModal .hidden {
    display: none
}

#scheduleModal .modal-content {
    padding: 20px
}

#scheduleModal .close-button {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: 700
}

#scheduleModal .close-button:hover,
#scheduleModal .close-button:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer
}

.day-picker {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 20px 0
}

.day-label {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 10px
}

.days {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-direction: row;
    overflow-x: scroll;
    padding: .5rem;
    max-width: 350px;
    margin: 1rem 0
}

.days-container {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem;
    justify-content: space-between
}

.days-container .arrow {
    flex-shrink: 0;
    cursor: pointer
}

.days::-webkit-scrollbar {
    display: none
}

.day-btn {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 5px;
    border: 1px solid var(--color-offwhite);
    cursor: pointer;
    font-size: 14px;
    color: var(--color-offwhite);
    font-weight: 700
}

.day-container {
    flex-shrink: 0;
    display: flex;
    flex-direction: column
}

.day-container span {
    font-size: 12px;
    color: var(--color-gray)
}

.day-btn:hover,
.time-btn:hover {
    background-color: #e0e0e0
}

.day-btn.selected {
    background-color: var(--color-brand);
    color: #fff
}

.session-note-container {
    display: flex;
    flex-direction: column;
    width: 100%
}

.session-note-container span {
    margin-bottom: 1rem;
    text-align: left
}

.session-note {
    width: 100%;
    height: 100px;
    padding: 10px;
    font-size: 16px;
    background: var(--color-dark-gray);
    border: 1px solid #fff;
    border-radius: 10px;
    color: var(--color-gray)
}

.submit-btn:hover {
    background-color: #0056b3
}

#schedule .overlay {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: rgb(0 0 0 / .5);
    backdrop-filter: blur(3px)
}

#schedule .overlay.hidden {
    display: none
}

.time-select-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    margin: 1rem 0
}

.time-select-container span {
    text-align: left
}

.time-select {
    padding: .75rem;
    border-radius: 10px;
    background: var(--color-dark-gray);
    border: 1px solid #fff;
    color: var(--color-offwhite);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .5rem center;
    background-size: 1.5em;
    padding-right: 2rem;
    margin-bottom: 1rem
}

#submit-schedule {
    align-self: end
}

.memeber-images-list {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5%;
    flex-wrap: wrap
}

.memeber-images-list .member-image {
    background-color: var(--color-dark-gray);
    padding: 1.5rem;
    border-radius: 10px
}

.memeber-images-list .member img {
    width: 150px;
    height: 150px;
    border-radius: 50%
}

.memeber-images-list h3 {
    margin-bottom: 1rem;
    font-size: 1.25rem
}

.memeber-images-list .member {
    flex-basis: 40%;
    margin-bottom: 2rem
}

.memeber-images-list .member button {
    margin-top: 1rem
}

#members-photos h2 {
    text-align: center;
    margin-bottom: 2rem;
    font-size: 1.5rem
}

@media screen and (max-width:810px) {
    .memeber-images-list .member {
        flex-basis: 100%
    }

    #schedule .module .content {
        max-width: 100%
    }
}

.smart_start_footer label {
    display: flex;
    align-items: center;
    gap: .5rem
}

#members-photos .content {
    padding: 3rem
}

#mobile_app .module {
    position: relative;
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem
}

#mobile_app .module .background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    z-index: 1
}

#mobile_app .module .content img {
    margin-bottom: 1rem
}

#mobile_app .module .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
    margin-bottom: 0;
    padding: 1.5rem;
    max-width: 700px;
    margin: 0 auto;
    background-color: var(--color-dark-gray)
}

#mobile_app .module .content h1 {
    font-size: 32px;
    font-weight: 700
}

#mobile_app .module .content h2 {
    font-size: 25px;
    font-weight: 700;
    line-height: 36px
}

#mobile_app .module .content p {
    font-size: 25px;
    line-height: 3rem;
    margin: 30px
}

#mobile_app .barcode {
    font-family: "Libre Barcode 39", cursive;
    font-size: 72px;
    background: #fff;
    color: #000;
    display: inline-block;
    padding: 10px
}

#mobile_app .mobile_qr {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 100%
}

#confirmation .module {
    position: relative;
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem
}

#confirmation .module .background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    z-index: 1
}

#confirmation .module .content img {
    margin-bottom: 1rem
}

#confirmation .module .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
    margin-bottom: 0;
    max-width: 750px;
    margin: 0 auto;
    background-color: var(--color-dark-gray);
    border-radius: 10px;
}

#confirmation .module .content h1 {
    font-size: 48px;
    font-weight: 700
}

#confirmation .module .content h2 {
    font-size: 25px;
    font-weight: 700;
    line-height: 36px
}

#confirmation .module .content p {
    font-size: 18px;
    line-height: 3rem;
    margin: 30px
}

#schedule .scheduled {
    color: #03bb53
}

#schedule .schedule-info {
    color: var(--color-offwhite)
}

#schedule .schedule-now {
    text-align: left
}

.plan-notes > p {
    padding-bottom: 36px;
}

.ach-disclaimer {
    margin-bottom: 12px !important;
}

a#showPrivacy,
a#showTerms,
a.legal-modal-link {
    font-weight: 700;
}

/* Backdrop */
.contract-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.75);
  backdrop-filter: blur(1.5px);
  z-index: 9998;
}
.contract-overlay.hidden { display: none; }

/* Modal frame */
.contract-modal {
  position: fixed; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(80%, calc(100% - 48px));
  max-height: min(86vh, 820px);
  background: #1c1f24; /* dark */
  color: #fff;
  border-radius: 12px;
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
  z-index: 9999;
  display: flex; flex-direction: column;
}
.contract-modal.hidden { display: none; }

/* Header */
.contract-modal__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  background: #262a30;
  border-bottom: 1px solid #2f353d;
}
.contract-modal__brand { display: flex; align-items: center; gap: 10px; }
.contract-modal__logo { height: 10%; width: 40%; display: block; }
.contract-modal__brand-text {
  font-size: 16px; font-weight: 700; letter-spacing: .2px;
  color: #fff;
}
.contract-modal__close {
  appearance: none; border: 0; background: transparent;
  color: #fff; font-size: 24px; line-height: 1; cursor: pointer;
  opacity: .9;
}
.contract-modal__close:hover { opacity: 1; }

/* Title (agree text) */
.contract-modal__title {
  margin: 16px 20px 4px 20px;
  font-size: 22px; line-height: 1.3; font-weight: 700;
}

/* Scrollable body */
.contract-modal__scroll {
  margin: 6px 20px 0 20px;
  padding: 12px 0 0 0;
  overflow: auto;
  max-height: calc(86vh - 180px); /* header + title + footer height */
  color: #e7eaf0;
  line-height: 1.6;
  font-size: 15px;
  text-align: left;
}
.contract-modal__scroll p, .contract-modal__scroll li { color: inherit; }
.contract-modal__scroll b, .contract-modal__scroll strong { color: #fff; }

/* Footer / CTA */
.contract-modal__footer {
  padding: 30px;
  border-top: 1px solid #2f353d;
  display: flex; justify-content: center;
  align-items: center;
}
.contract-modal__cta {
  appearance: none; border: 0; cursor: pointer;
  width: 100%; max-width: 520px; height: 50px;
  border-radius: 999px;
  font-weight: 800; letter-spacing: .4px;
  text-transform: uppercase;
  color: #fff;
  background: var(--color-brand);
  color: #fff;
  border-color: var(--color-brand-light);
}
.contract-modal__cta:hover { filter: brightness(1.05); }
.contract-modal__cta:active { transform: translateY(1px); }
.head-image {
    justify-content: center;
    display: flex;
    padding: 24px;
}
@media (max-width: 640px) {
  .contract-modal {
    width: calc(100% - 16px);
    max-height: calc(100vh - 16px);
  }
  .contract-modal__scroll { max-height: calc(100vh - 190px); }
}

.session-note-text {
	text-transform: uppercase;
    line-height: 21px;
}
.renewal-section {
    margin: 0px 35px 40px;
    border-top: 1px solid rgb(255 255 255 / .25);
    padding-top: 3%;
    margin-top: 2%;
	/* padding-bottom: 3%; */
}
.review-notes {
    padding-bottom: 2%;
    /* border-bottom: 1px solid rgb(255 255 255 / .25); */
    margin-bottom: 2%;
}
#review_order > form.module {
    background: var(--color-dark-gray);
    padding: 10px !important;
    border-radius: 12px !important;
}
table#u_body {
    background: transparent !important;
}

.renewal-title-text {
    text-align: left;
    padding-bottom: 14px;
}

.terms .term label {
    display: flex;
}

.terms .term label .check {
    flex: 0 0 25px;
}

.terms .term label .agree p {
    font-size: 14px;
    line-height: 1.2em;
}

.terms .term {
    text-align: left;
    margin-bottom: 15px;
}

.terms {
    border-top: 1px solid rgba(255, 255, 255, 0.25);
    padding-top: 3%;
    margin-top: 2%;
    padding-bottom: 2%;
}

.addr-suggest {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 2147483647;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  margin-top: 6px;
  padding: 4px 0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  list-style: none;
  font-family: "Roboto", system-ui, sans-serif;
  max-height: 280px;
  overflow-y: auto;
}

.addr-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.addr-item:hover,
.addr-item.active {
  background: #f1f3f4;
}

.addr-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.addr-text {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.addr-main {
  font-weight: 500;
  color: #202124;
}

.addr-secondary {
  font-size: 12px;
  color: #70757a;
  margin-top: 2px;
}

.continue.nav-btn:disabled {
    opacity: 0.5;
}