div.recharge-theme,
div.recharge-theme .recharge-card,
div.recharge-theme .recharge-modal-wrapper,
.recharge-theme .recharge-container {
/* /_ Colors: Brand _/   */
--recharge-color-brand: #15504D;  
--recharge-color-brand-120:    #11403E;
--recharge-color-brand-20:     #D0DCDB; 
--recharge-color-brand-40:     #A1B9B8; 
--recharge-color-brand-60:     #739694;
--recharge-color-brand-75:     #507C7A;
--recharge-color-brand-85:     #D0DCDB;

/* /_ Colors: Neutral _/   */
--recharge-color-neutral: #15504D;  
--recharge-color-neutral-80: #3c4245;  
--recharge-color-neutral-70: #545a5d;  
--recharge-color-neutral-40: #9da1a2;  
--recharge-color-neutral-10: #FFFCCF;

/* /_ Colors: Positive _/   */
--recharge-color-positive120: hsl(148, 100%, 27%);  
--recharge-color-positive: hsl(148, 100%, 33%);  
--recharge-color-positive80: hsl(148, 57%, 46%);  
--recharge-color-positive60: hsl(148, 49%, 60%);  
--recharge-color-positive40: hsl(148, 49%, 73%);  
--recharge-color-positive20: hsl(148, 50%, 87%);  
--recharge-color-positive10: hsl(148, 49%, 93%);

/* /_ Colors: Caution _/   */
--recharge-color-caution120: hsl(43, 100%, 40%);  
--recharge-color-caution: hsl(43, 100%, 50%);  
--recharge-color-caution80: hsl(43, 100%, 60%);  
--recharge-color-caution60: hsl(43, 100%, 70%);  
--recharge-color-caution40: hsl(43, 100%, 80%);  
--recharge-color-caution20: hsl(43, 100%, 90%);  
--recharge-color-caution10: hsl(43, 100%, 95%);

/* /_ Colors: Critical _/   */
--recharge-color-critical120: hsl(12, 87%, 40%);  
--recharge-color-critical: hsl(12, 87%, 50%);  
--recharge-color-critical80: hsl(12, 86%, 70%);  
--recharge-color-critical60: hsl(12, 85%, 80%);  
--recharge-color-critical40: hsl(12, 85%, 80%);  
--recharge-color-critical20: hsl(12, 85%, 90%);  
--recharge-color-critical10: hsl(12, 85%, 95%);

/* /_ App _/   */
--recharge-app-background: hsl(0, 0%, 100%);  
--recharge-app-container: 1144px;  
--recharge-app-vertical-padding: 0px;  
--recharge-app-zIndex: 9999999;  
--recharge-views-background: #FFFFFF;  
--recharge-view-container: 752px;

/* Custom */
--recharge-color-accent: #EB6705;

/* /_ Images _/   */
--recharge-images-ratio: 1;

/* /_ Corners _/   */
--recharge-corners-radius: 24px;

/* /_ Cards _/   */
--recharge-cards-background: #FFFFFF;  
--recharge-cards-border-color: var(--recharge-color-brand-20);

/* /_ Typography _/   */
--recharge-typography-heading-font-family: 'HarmoniaSansProCyr', sans-serif;  
--recharge-typography-heading-font-weight: 500;  
--recharge-typography-body-font-family: 'HarmoniaSansProCyr', sans-serif;  
--recharge-typography-body-font-weight: 400;  
--recharge-typography-light: #FFFFFF;  
--recharge-typography-primary: var(--recharge-color-neutral);  
--recharge-typography-secondary: var(--recharge-color-neutral-70);  
--recharge-typography-scale: 16px;  
--recharge-typography-size-1: calc(3 _ var(--recharge-typography-scale));  
--recharge-typography-size-2: calc(2.25 _ var(--recharge-typography-scale));  
--recharge-typography-size-3: calc(1.625 _ var(--recharge-typography-scale));  
--recharge-typography-size-4: calc(1.25 _ var(--recharge-typography-scale));  
--recharge-typography-size-5: calc(1 _ var(--recharge-typography-scale));  
--recharge-typography-size-6: calc(0.875 _ var(--recharge-typography-scale));  
--recharge-typography-size-7: calc(0.75 \* var(--recharge-typography-scale));

/* /_ Buttons _/   */
--recharge-button-brand: var(--recharge-color-brand);  
--recharge-button-color: #FFFFFF;  
--recharge-button-border-radius: 28px;  
--recharge-button-font-family: inherit;

/* /_ Carousel _/   */
--recharge-carousel-thumbnail-size: 124px

}

div.recharge-theme {
    margin-top: 20px;

    label {
        background: none;
    }

    .recharge-card {
        background: none;
    }

    label:hover {
        background: none;
    }

    .recharge-heading.recharge-heading-h1 {
        font-size: 24px;
        font-weight: 700;
        color: var(--recharge-color-brand);
    }

    .recharge-heading.recharge-heading-h2 {
        font-size: 24px;
        font-weight: 700;
    }

    .recharge-heading.recharge-heading-h3 {
        font-size: 18px;
        font-weight: 500;
        text-transform: none;
    }

    .recharge-text.recharge-text-p3 {
        font-size: 16px;
        font-weight: 700;
        color: var(--recharge-color-brand);
    }

    .recharge-text-p4 {
        font-size: 16px;
        font-weight: 700;
        color: #2E6112;
    }
    .recharge-text-p5 {
        font-size: 12px;
        font-weight: 700;
        color: #6E6500;
        vertical-align: middle;
        padding: 4px 8px;
    }

    .recharge-badge > .recharge-text {
        display: inline-flex;
        align-items: center;
        line-height: inherit;
    }

    button {
        font-size: 12px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        letter-spacing: 0.96px;
        text-transform: uppercase;
        color: #fff;
    }

    .recharge-button.recharge-button-secondary {
        background-color: #FFF !important;
        color: var(--recharge-color-brand);

        .recharge-text.recharge-text-p3 {
            color: var(--recharge-color-brand);
        }

        .recharge-icon {
            color: var(--recharge-color-brand);
        }

        div:has(>.recharge-icon) {
            display: none;
        }

        div:has(>svg) {
            display: none;
        }
    }

    .recharge-button.recharge-button-tertiary {
        color: var(--recharge-color-accent);
    }

    .recharge-action-link {
        color: var(--recharge-color-accent) !important;
        text-decoration: underline;
        font-size: 16px;

        .recharge-text.recharge-text-p3  {
            color: var(--recharge-color-accent) !important;
            text-decoration: none !important;
        }

        div {
            background: transparent;
        }

        .recharge-icon {
            border-radius: 100%;
            color: var(--recharge-color-accent);

            svg {
                color: var(--recharge-color-accent);
            }
        }

    }

    .recharge-action-link span,
    .recharge-action-link svg {
        color: var(--recharge-color-accent);
        text-decoration: underline;
        font-size: 16px;
        font-weight: 700;
    }

}

.recharge-container, .recharge-modal-wrapper {
    padding: 64px 0px;

    .recharge-tab-active {
        .recharge-heading.recharge-heading-h3 {
            color: var(--recharge-color-accent);
            font-size: 18px;
            font-weight: 700;
        }
        
        border-bottom: 2px solid var(--recharge-color-accent);
        padding-bottom: 8px;
    }

    .recharge-tab-inactive {
        .recharge-heading.recharge-heading-h3 {
            color: var(--recharge-color-brand);
            font-size: 18px;
            font-weight: 700;
        }
        border-bottom: 2px solid var(--recharge-color-brand);
        padding-bottom: 8px;
    }

    

    /* Recharge Navigation */
    .recharge-navigation-overview,
    .recharge-navigation-schedule,
    .recharge-navigation-orders,
    .recharge-navigation-subscriptions,
    .recharge-navigation-customer,
    .recharge-navigation-logout {
        border-radius: 16px;
        border: 1px solid var(--recharge-color-brand-20);
        padding: 16px 24px;

        div {
            border: none;
            padding: 0px;
            background-color: transparent;
        }

        .recharge-heading.recharge-heading-h2 {
            font-size: 20px;
            line-height: 20px;
        }

        svg {
            opacity: 0.5;
        }
    }


    .recharge-navigation-overview.active,
    .recharge-navigation-schedule.active,
    .recharge-navigation-orders.active,
    .recharge-navigation-subscriptions.active,
    .recharge-navigation-customer.active,
    .recharge-navigation-logout.active {
        background-color: var(--recharge-color-brand-20);
        overflow: hidden;
        border-radius: 16px;
        border: 1px solid var(--recharge-color-brand-20);
        div {
            border: none;
            padding: 0px;

            span {
                height: 24px;
                display: flex;
                align-items: center;
            }
        }
    }
}


.recharge-container > div {
    max-width: 1440px;
    padding-left: 60px;
    padding-right: 60px;

    div {
        max-width: 1440px;
    }
}

/* Recent Order Card */
.recharge-container div:has(>.recharge-section-recent-order) {
    display: none;
}

/* Next Order Card */
.recharge-container .recharge-section-next-order-actions {

    .recharge-button {
        padding: 18px 0px;
    }

    .recharge-heading-h1 {
        font-weight: 700;
    }

    .recharge-text-p3 {
        font-weight: 700;
    }

    .recharge-button.recharge-button-primary {
        color: #FFF;
    }

    .recharge-button.recharge-button-secondary {
        background-color: #FFF !important;
        color: var(--recharge-color-brand);
    }

    .recharge-button.recharge-button-primary .recharge-text.recharge-text-p3,
    .recharge-button.recharge-button-secondary .recharge-text.recharge-text-p3 {
        font-family: "HarmoniaSansProCyr", sans-serif;
        font-size: 12px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        letter-spacing: 0.96px;
        text-transform: uppercase;
    }

    .recharge-button.recharge-button-primary .recharge-text.recharge-text-p3 {
        color: #FFF !important;
    }

    .recharge-button.recharge-button-secondary .recharge-text.recharge-text-p3 {
        color: var(--recharge-color-brand) !important;
    }

}

/* Schedule Card */
.recharge-container .recharge-component-schedule-item {
    .recharge-action-link span,
    .recharge-action-link svg {
        color: var(--recharge-color-accent);
        text-decoration: underline;
        font-size: 16px;
        font-weight: 700;
    }
}

/* Recharge Product Carousel */
.recharge-container .recharge-section-product-carousel {
    section {
        padding-left: 4px;
        padding-right: 20px;
    }
    .recharge-component-carousel-item {
        width: 220px;

        .recharge-heading-h3 {
            color: #15504D;
            font-family: "HarmoniaSansProCyr", sans-serif;
            font-size: 16px;
            font-style: normal;
            font-weight: 700;
            line-height: 22px;
            text-align: left;
            display: flex;
            margin-top: 4px;
        }

        .recharge-text-p3 {
            text-align: left;
            display: flex;

            div {
                display: flex;
            }

            s {
                color: rgba(21, 80, 77, 0.70);
                font-family: "HarmoniaSansProCyr", sans-serif;
                font-size: 14px;
                font-style: normal;
                font-weight: 400;
                line-height: 20px; /* 142.857% */
                text-decoration-line: line-through;
                order: 2;  
                margin-left: 8px;
            }
        }

        div:has(>svg) {
            display: none;
        }

    }


    .recharge-button.recharge-button-secondary {
        display: none;
    }
}

/* Extensions - Heading Slider */
.recharge-container {
    .recharge-heading-slider {
        width: 100%;
        overflow: visible;
        height: 500px;
        margin-bottom: 42px;
        aspect-ratio: 4/3;
    }

    .flickity-viewport {
        height: 100% !important;
        border-radius: 24px;
    }


    .flickity-button {
        opacity: 1;
        visibility: visible;
        border-radius: 20px;
        background: #357A57;
    }

    .flickity-button::before, .flickity-button::after {
        color: #fff;
    }

    .flickity-button.previous {
        left: 16px;
    }

    .flickity-button.next {
        right: 16px;
    }

    .flickity-page-dots {
        position: absolute;
        bottom: -32px;
        background: #fff;

        li {
            width: 12px;
            height: 12px;
            aspect-ratio: 1/1;
            border-radius: 100%;
            background-color: #D7D5CA;
            border: none;
            margin: 0px 3px;
        }

        li.is-selected {
            width: 12px;
            background-color: #2E6112;
        }
    }

    .carousel-cell {
        width: 100%;
        height: 100%;
        background-color: var(--recharge-color-brand-20);
    }

    .carousel-cell img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

/* Extensions - Heading Banner */
.recharge-container {
    .recharge-heading-banner {
        padding: 32px;
        border-radius: 24px;

        h2 {
            font-size: 24px;
            font-weight: 500;
            color: var(--recharge-color-brand);
            line-height: 120%; 
            letter-spacing: -0.24px;
            font-family: "HarmoniaSansProCyr", sans-serif;
        }

        p {
            line-height: 140%;
            color: var(--recharge-color-brand);
            font-size: 18px;
            font-weight: 400;
        }
    }
}

/* Extensions - Referral Banner */
.recharge-container .recharge-referral-banner {
    padding: 32px;
    border-radius: 24px;
    border: 1px solid var(--recharge-color-brand-20);

    h2 {
        font-size: 24px;
        font-weight: 500;
        color: var(--recharge-color-brand);
        line-height: 120%; 
        letter-spacing: -0.24px;
        font-family: "HarmoniaSansProCyr", sans-serif;
        .accent-text {
            color: var(--recharge-color-accent);
        }
    }

    p {
        line-height: 140%;
        color: var(--recharge-color-brand);
        font-size: 18px;
        font-weight: 400;
        line-height: 140%;
    }

    .recharge-heading-referral-wrapper {
        display: flex;
        align-items: center;
        gap: 16px;
        background: #fff;
        padding: 20px;
        border-radius: 28px;
        box-shadow: 0px 1px 1px 0px rgba(21, 80, 77, 0.10), 0px 0px 0px 1px rgba(21, 80, 77, 0.16);
        margin-bottom: 12px;
    }

    button[data-copy-referral] {
        background-color: var(--recharge-color-brand);
        color: #fff;
        padding: 20px 20px;
        border-radius: 28px; 
        font-family: "HarmoniaSansProCyr", sans-serif;
        font-size: 12px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        letter-spacing: 0.96px;
        text-transform: uppercase;
        width: 100%;
    }
    
    
}

/* Extensions - True Credits Banner */
.recharge-container .recharge-credits-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 32px;
    background-color: var(--recharge-color-brand-20);
    border-radius: 24px;
    margin-top: 20px;

    h2 {
        font-size: 24px;
        font-weight: 500;
        color: var(--recharge-color-brand);
        line-height: 120%; 
        letter-spacing: -0.24px;
    }

    p {
        font-size: 18px;
        font-weight: 400;
        color: var(--recharge-color-brand);
        line-height: 140%;
    }
}

/* Extensions - Side Bar Banner */
.recharge-container .recharge-sidebar-banner {
    border-radius: 24px;
    border: 1px solid var(--recharge-color-brand-20);
    overflow: hidden;
    height: auto;
    max-width: 100%;
    display: flex;

    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}


@media screen and (max-width: 1023px) {
    div.recharge-theme {
        margin-top: 0px;

        .recharge-heading.recharge-heading-h1 {
            font-size: 28px;
        }

        .recharge-heading.recharge-heading-h2 {
            font-size: 16px;
        }

        .recharge-text.recharge-text-p3 {
            font-size: 14px;
        }

        .recharge-tab .recharge-text-p3 {
            font-size: 18px;
        }

        .recharge-action-link {
            font-size: 14px;
            .recharge-text.recharge-text-p3 {
                font-size: 14px;
            }
        }

        .recharge-component-schedule-item {
            .recharge-heading.recharge-heading-h2 {
                font-size: 16px;
            }
        }
    }


    .recharge-container {
        padding: 48px 0px 48px 0px;
    }

    .recharge-container > div {
        padding: 0px;
    }

   .recharge-container {
        .recharge-card,
        .recharge-sidebar-banner,
        .recharge-referral-banner,
        .recharge-heading-banner,
        .recharge-credits-banner,
        .recharge-navigation-overview,
        .recharge-navigation-schedule,
        .recharge-navigation-orders,
        .recharge-navigation-subscriptions,
        .recharge-navigation-customer,
        .recharge-navigation-logout {
            margin-left: 8px;
            margin-right: 8px;
            border-radius: 20px;
        }

        .recharge-navigation-overview.active > div,
        .recharge-navigation-schedule.active > div,
        .recharge-navigation-orders.active > div,
        .recharge-navigation-subscriptions.active > div,
        .recharge-navigation-customer.active > div,
        .recharge-navigation-logout.active > div {
            display: block;
        }

        .recharge-heading-slider {
            height: 220px;

            .flickity-viewport {
                border-radius: 0px;
                height: 100% !important;
            }

            .flickity-button {
                height: 32px;
                width: 32px;
            }

            .flickity-page-dots {
                bottom: -20px;
            }

            .flickity-page-dots li {
                width: 8px;
                height: 8px;
            }
        }

        .recharge-button.recharge-button-secondary {
            font-size: 12px;
    
            .recharge-text.recharge-text-p3 {
                font-size: 12px;
            }
        }
    }
}