.section__recent-payouts {
    width: 100%;
    background: var(--color-background-surface-tertiary);
    border-radius: 24px;
    padding: 80px 56px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.recent-payouts__list-wrapper {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.recent-payouts__list-wrapper > h2 {
    margin: 0;
}

.recent-payouts__list {
    max-height: 348px;
    overflow: hidden;
}

.recent-payouts__list .swiper-wrapper {
    flex-direction: column;
}

.recent-payouts__item {
    display: flex !important;
    gap: 12px;
    max-height: 60px;
    height: 60px;
    align-items: center;
    justify-content: flex-start;
    padding: 10px 20px;
    border-radius: 16px;
    background: var(--color-background-surface-brand-60);
    margin-bottom: 12px;
}

.recent-payouts__item-details {
    display: flex;
    gap: 12px;
}

.recent-payouts__item-flag {
    --flag-size: 40px;
    flex-shrink: 0;
    max-width: var(--flag-size);
    max-height: var(--flag-size);
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--color-neutral);
}

.recent-payouts__item-amount-wrapper {
    margin-left: auto;
    display: flex;
    gap: 16px;
    align-items: center;
}

.recent-payouts__item-new {
    background: var(--color-success-500);
    padding: 0 8px;
    border-radius: 8px;
    color: var(--color-primary);
}

.recent-payouts__total-paid {
    padding: 30px 40px 29px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    justify-content: center;
    background: var(--color-background-surface-brand);
    border-radius: 16px;
    z-index: 0;
    position: relative;
    overflow: hidden;
}

.recent-payouts__total-paid > * {
    text-align: center;
}

.total-paid__text {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}

.total-paid__icons {
    width: 100%;
    max-width: 360px;
    height: 100px;
    display: flex;
    justify-content: space-between;
}

.total-paid__icons img:first-of-type {
    align-self: flex-end;
}

.total-paid__icons img:last-of-type {
    align-self: flex-start;
}

.total-paid__bg-image {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
}

/* Recent payouts horizontal */
.section__recent-payouts-horizontal {
    width: 100%;
    overflow: hidden;
    padding: 0 0 24px;
    position: relative;
}

.section__recent-payouts-horizontal::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 82px;
    height: 54px;
    background: linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
    z-index: 10;
}

.section__recent-payouts-horizontal::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 82px;
    height: 54px;
    background: linear-gradient(to left, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
    z-index: 10;
}

.section__recent-payouts-horizontal .swiper-slide {
    --slides-count: 5;
    max-width: calc((100% - ((var(--slides-count) - 1) * 12px)) / var(--slides-count));
    margin-right: 12px;
}

.section__recent-payouts-horizontal .payout-card {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border: 1px solid #E8DFFF;
    border-radius: 8px;
    font-family: var(--wp--preset--font-family--dm-sans);
    margin-right: 12px;
    position: relative;
}

.section__recent-payouts-horizontal .payout-card .payout-card__country-flag {
    --flag-size: 24px;
    flex-shrink: 0;
    max-width: var(--flag-size);
    max-height: var(--flag-size);
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.section__recent-payouts-horizontal .payout-card .payout-card__country-flag img {
    width: auto;
    height: 24px;
    object-fit: cover;
    object-position: center;
    display: block;
}

.section__recent-payouts-horizontal .payout-card .payout-card__info {
    display: flex;
    flex-direction: column;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0.24px;
    width: 100%;
    overflow: hidden;
}

.section__recent-payouts-horizontal .payout-card .payout-card__new {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    padding: 0 8px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 8px;
    background: #36E152;
    color: #000;
    font-family: "DM Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
    letter-spacing: 0.24px;
}

.section__recent-payouts-horizontal .payout-card .payout-card__info .payout-card__country-name {
    font-weight: 700;
    color: #000000;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.section__recent-payouts-horizontal .payout-card .payout-card__info .payout-card__payout-method {
    font-weight: 400;
    color: #8E8E8E;
}

.section__recent-payouts-horizontal .payout-card .payout-card__amount {
    padding: 4px 10px;
    border-radius: 4px;
    background: #E8DFFF;
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    letter-spacing: 0.28px;
}

.section__recent-payouts-horizontal span {
    color: #000;
    font-family: "DM Sans";
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
    letter-spacing: 0.24px;
}

/* Recent payouts horizontal header */
.page .recent-payouts-header {
    padding-bottom: 0px!important;
    position: relative;
    top: 32px;
    padding-top: 0px!important;
}

.page-template-page-header-dark-blue .recent-payouts-header,
.page-template-page-header-dark .recent-payouts-header,
.page-template-templates .recent-payouts-header,
.page-id-37113 .recent-payouts-header,
.page-id-10 .recent-payouts-header,
.single .recent-payouts-header {
    padding: 20px 32px !important;
    top: unset !important;
}


/* Earnings section */

.section__earnings {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    padding: 0;
    border-radius: 24px;
    overflow: hidden;
    color: var(--color-neutral);
}

.section__earnings-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 80px 56px;
    background: var(--color-background-surface-brand);
}

.earnings-selection__tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    width: 100%;
    background: var(--color-background-surface-tertiary);
    border-radius: 16px;
    color: var(--color-secondary-disabled);
    padding: 4px;
    position: relative;
    z-index: 0;
    margin-bottom: 40px;
}

.earnings-selection__tab {
    text-align: center;
    padding: 10px 4px;
    cursor: pointer;
    transition: color 0.3s ease-in;
    margin: auto;
    width: 100%;
}

.earnings-selection__tab.active {
    color: var(--color-primary);
}

.earnings-selection__tabs::before {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    width: calc(50% - 8px);
    height: calc(100% - 8px);
    background: var(--color-background-neutral);
    border-radius: 12px;
    transition: margin-left 0.3s ease-in-out;
    z-index: -1;
}

.section__earnings-selection.sharing-selected .earnings-selection__tabs::before {
    margin-left: 50%;
}

.earnings-slider__steps {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, 24px);
    grid-template-rows: 1fr;
    justify-content: space-between;
    width: 100%;
    color: #b396ff;
    white-space: nowrap;
    margin-bottom: 8px;
}

.earnings-slider__steps.extended-width {
    grid-template-columns: repeat(auto-fit, 35px);
}

.earnings-slider__step {
    text-align: center;
    color: var(--color-background-surface-tertiary);
}

.earnings-slider__step[data-selected] {
    color: var(--color-neutral);
}

.earnings-selection__content {
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-wrap: nowrap;
    gap: 32px;
    padding-bottom: 2px;
}

.earnings-selection__tab-content {
    min-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 56px;
    transition: transform 0.3s ease-in-out;
    padding-top: 20px;
}

.section__earnings-selection.sharing-selected .earnings-selection__tab-content {
    transform: translateX(calc(-100% - 32px));
}

.earnings-selection__content-item {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.earnings-selection__content-item h3 {
    margin: 0;
}

.section__earnings-results {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    justify-content: center;
    padding: 80px 56px;
    background: var(--color-background-surface-tertiary);
}

.earnings-results {
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: center;
    justify-content: space-between;
    background: var(--color-background-surface-brand);
    border-radius: 24px;
    width: 100%;
    overflow: hidden;
}

.earnings-results::before,
.earnings-results::after {
    content: "";
    width: 100%;
    height: 84px;
    background: url('../image/earnings-results-bg-new.svg') no-repeat center;
    background-size: cover;
}

.earnings-results::after {
    transform: rotate(180deg);
}

.section__earnings-results p:has(.filled-inverted-button),
.section__earnings-results a.filled-inverted-button {
    width: 100%;
}

.section__earnings-results>p:last-of-type {
    margin-top: 25px;
}

.section__earnings .bandwidth-toggle-wrapper {
    display: flex;
    gap: 1rem;
    margin-top: 10px;
}

.section__earnings .bandwidth-choice {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: #fff;
    border-radius: 8px;
    cursor: pointer;
    transition: 0.2s ease-in-out;
    width: 100%;
    border: unset;
    font-size: 16px;
    font-weight: 700;
}

.section__earnings .bandwidth-choice:hover {
    border-color: #888;
}

.section__earnings .custom-check {
    width: 20px;
    height: 20px;
    border: 1px solid #8252FF;
    border-radius: 50%;
    position: relative;
    background-color: white;
    box-sizing: content-box;
    transition: all 0.2s ease-in-out;
}

.section__earnings .bandwidth-choice.active .custom-check::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 14px;
    height: 14px;
    background-color: #8252FF;
    border-radius: 50%;
}

.section__earnings .calculators-signup {
    background: #9972FF;
    max-width: 370px;
    padding: 10px;
    border-radius: 16px;
    padding-top: 16px;
    padding-bottom: 16px;
    row-gap: 3px;
    margin-top: 30px !important;
    font-size: 24px;
    text-align: center;
}

.section__earnings .calculators-earn {
    background: #B396FF;
    padding: 8px;
    border-radius: 8px;
}

/* TODO: Rename to range-slider after.... */

.new-range-slider {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    background: transparent;
    height: 5px;
    border-radius: 5px;
}

.new-range-slider::-webkit-slider-runnable-track {
    -webkit-appearance: none;
    appearance: none;
    height: 5px;
    border-radius: 5px;
    background: linear-gradient(
            to right,
            transparent var(--track-fill, 0%),
            var(--color-background-surface-tertiary) 0%
    ),
    var(--color-neutral) fixed;
}

.new-range-slider::-moz-range-track {
    -moz-appearance: none;
    appearance: none;
    height: 5px;
    border-radius: 5px;
    background: linear-gradient(
            to right,
            transparent var(--track-fill, 0%),
            var(--color-background-surface-tertiary) 0%
    ),
    var(--color-neutral) fixed;
}

.new-range-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--color-neutral);
    cursor: pointer;
    margin-top: -10px;
    box-shadow: none;
    border: 1px solid var(--color-background-surface-tertiary);
    margin-left: -2px;
}

.new-range-slider::-moz-range-thumb {
    -moz-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--color-neutral);
    cursor: pointer;
    margin-top: -10px;
    box-shadow: none;
    border: 1px solid var(--color-background-surface-tertiary);
    margin-left: -2px;
}

@media (max-width: 1280px) {
    --slides-count: 4;
}

@media (max-width: 1024px) {
    .section__recent-payouts-horizontal .swiper-slide {
        --slides-count: 3;
    }
}

@media (max-width: 1000px) {
    .section__recent-payouts {
        grid-template-columns: 1fr;
    }

    .section__earnings {
        grid-template-columns: 1fr;
    }

    .earnings-results {
        flex-direction: row;
        gap: 12px;
    }

    .earnings-results > div.wp-block-group {
        padding: 40px 0;
    }

    .earnings-results::before,
    .earnings-results::after {
        width: 86px;
        height: 100%;
        background-image: url('../image/earnings-results-bg-vertical-new.svg');
    }
}

@media (max-width: 768px) {
    .earnings-results::before,
    .earnings-results::after {
        width: 100%;
        max-width: 60px;
        background-position: right center;
    }

    .section__recent-payouts-horizontal .swiper-slide {
        --slides-count: 2;
    }
}

@media (max-width: 579px) {
    .section__earnings .bandwidth-toggle-wrapper {
        display: flex;
        gap: 1rem;
        margin-top: 10px;
        flex-direction: column;
    }

    .section__earnings .calculators-signup {
        max-width: 100%;
        font-size: 16px;
        width: 100%;
    }

    .section__earnings .earnings-results>div.wp-block-group {
        width: 100%;
    }
}

@media (max-width: 549px) {
    .section__recent-payouts {
        padding: 32px 20px;
    }

    .section__earnings .calculators-signup {
        border-radius: unset;
    }

    .section__recent-payouts .headline-xl {
        font-size: 42px;
        line-height: 56px;
    }

    .recent-payouts__list {
        max-height: 608px;
    }

    .recent-payouts__item {
        max-height: 112px;
    }

    .recent-payouts__total-paid {
        padding: 20px 16px 9px;
    }

    .recent-payouts__item-details {
        flex-direction: column;
    }

    .section__earnings > div.wp-block-group {
        padding: 32px 20px;
    }

    .section__earnings-results > p:last-of-type {
        margin-top: 8px;
    }
    .earnings-results::before,
    .earnings-results::after {
        display:none;
    }
    .calculators-signup {
        max-width:100%;
    }
    .earnings-results > div.wp-block-group {
        padding-bottom: 0px;
    }
}

@media (max-width: 500px) {
    .section__recent-payouts-horizontal .swiper-slide {
        width: 70%;
    }
}