/* HEADER WALLET BUTTON */

.header__nav-container {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 0;
}

.header__balance {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border-radius: 10px;
    border: 1px solid #21b4b7;
    width: 75px;
    height: 40px;
    background: #fff !important;
}

.header__nav {
    flex-basis: unset !important;
}

.header__balance--text {
    color: #212121;
    font-family: Raleway, sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
}

.header__balance--amount {
    color: #212121;
    font-family: Raleway, sans-serif;
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

/* END OF HEADER WALLET BUTTON */

/* POPUP OVERLAY */
.pa_popUp--overlay,
.pa_popUp--overlayPromotion {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
    display: none;
}

.pa_popUp--overlay.active,
.pa_popUp--overlayPromotion.active {
    display: block;
}

/* PAYMENT OVERLAY FOR WALLET POPUP */
.wallet-payment-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    z-index: 999;
    cursor: not-allowed;
    display: none;
    border-radius: 10px; /* Match the button border radius */
}

/* DISABLED STATE FOR PAYMENT BUTTONS */
[data-element="create-payment"]:disabled,
[data-element="check__paymentGoogleBtn"]:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

/* ERROR MESSAGE STYLING */
.pa__paymentError--active {
    display: block !important;
    color: #ff0000;
    font-size: 14px;
    margin-top: 10px;
    text-align: center;
}

/* POPUP'S */
.pa_popUp--container {
    fill: #fdfdfd;
    border: 1px solid #d8d8d8;
    border-radius: 20px;
    padding: 20px 15px 25px 15px;
    min-width: 300px;
    max-width: 350px;
    margin: 0 auto;
}

.pa_popUp--container-welcome {
    position: absolute;
    z-index: 1001;
    background-color: #fff;
    left: 0;
    right: 0;
    top: 30%;
}

.pa_popUp--titleBlock {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.pa_popUp--titleBlock-auth {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 15px;
}

.pa_popUp--title-auth {
    color: #212121;
    font-family: Raleway;
    font-size: 17px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin: 0;
    margin-top: 15px;
    text-align: center;
}

.pa_popUp--closeBtn-auth {
    margin-right: 0;
    margin-left: auto;
}

.pa_popUp--label-auth {
    display: block;
    color: #212121;
    font-family: Raleway;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-align: center;
}

.pa_popUp--closeBtn {
    display: block;
    width: 20px;
    height: 20px;
    background: url("../images/images_new/pa_popup-close.svg") no-repeat;
    background-size: contain;
    border: none;
    cursor: pointer;
}

.pa_popUp--closeBtn-right {
    margin-left: auto;
    margin-right: 0;
}

.pa_popUp--btn,
.pa_popUp--payBtn {
    display: flex;
    width: 213px;
    height: 55px;
    border-radius: 10px;
    background: #21b4b7;
    box-shadow: 1px 1px 10px 0px rgba(87, 87, 87, 0.15);
    color: #fff;
    text-align: center;
    font-family: Raleway;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;
    transition: all 0.3s ease;
    border: none;
    margin: 0 auto;
}

.pa_popUp--btn span,
.pa_popUp--payBtn span {
    margin: auto;
}

.pa_popUp--title {
    color: #212121;
    font-family: Raleway;
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin: 0;
}

.pa_popUp--titleFS {
    font-size: 17px;
}
.pa_popUp--alignCenter {
    text-align: center;
}

.pa_popUp--form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pa_popUp--label {
    color: #212121;
    font-family: Raleway;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.pa_popUp--input {
    border-radius: 20px;
    border: 1px solid #eee;
    background: #fff;
    padding: 10px 15px;
    margin-top: 10px;
    color: #212121;
    font-family: Raleway;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    width: 100%;
    box-sizing: border-box;
}

.pa_popUp--btn {
    border-radius: 10px;
    border: none;
    color: #fff;
    padding: 10px 15px;
    width: 213px;
    height: 55px;
    color: #fff;
    text-align: center;
    font-family: Raleway;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin: 0 auto;
    margin-top: 15px;
}

.pa_popUp--warning {
    /* border-radius: 10px; */
    display: flex;
    flex-direction: row;
    align-items: center;
    border: 1px solid #ff3838;
    background: #ffecec;
    box-shadow: 2px 1px 10px 0px rgba(112, 111, 111, 0.07);
    padding: 10px 15px;
    margin-bottom: 15px;
    border: 1px solid #b90000;
    background: #ffecec;
    box-shadow: 2px 1px 10px 0px rgba(112, 111, 111, 0.07);
}

.pa_popUp--warningTitle {
    color: #212121;
    font-family: Raleway;
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin: 0 auto;
    text-align: center;
}

.pa_popUp--warningText {
    color: #b90000;
    font-family: Raleway;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.pa_popUp--warningIcon {
    display: flex;
    background: url("../images/images_new/warning_icon.svg") no-repeat;
    background-size: contain;
    width: 57px;
    height: 35px;
    margin-right: 5px;
}

.pa_popUp--totalBalanceMain {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    margin-bottom: 15px;
}

.pa_popUp--totalBalanceMain--textBlock {
    margin: 0 auto;
}

.pa_popUp--totalBalanceMain--totalOrder {
    display: flex;
    align-items: baseline;
    margin: 0 auto;
    justify-content: center;
    gap: 3px;
    margin-bottom: 10px;
}

.pa_popUp--totalBalanceMain--text {
    color: #212121;
    font-family: Raleway;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.pa_popUp--totalBalanceMain--currency {
    color: #212121;
    font-family: Raleway;
    font-size: 15.36px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}
.pa_popUp--totalBalanceMain--amount {
    color: #212121;
    font-family: Lato;
    font-size: 26.88px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.pa_popUp--TopUpBlock {
    position: relative;
    display: flex;
    height: 25px;
    padding-top: 5px;
    padding-bottom: 5px;
    align-items: center;
    border-radius: 10px;
    background: linear-gradient(90deg, #c2185b 0.48%, #ffc7dd 47.35%, #c2185b 100%);
    box-shadow: 0px 4px 10px 0px rgba(17, 17, 17, 0.1);
    /* padding: 15px; */
    color: #fffdfd;
    font-family: Raleway;
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    z-index: 2;
    cursor: pointer;
    transition: all 0.3s ease;
}

.pa_popUp--TopUpBlock:hover {
    transform: translateY(-1px);
    box-shadow: 0px 6px 15px 0px rgba(17, 17, 17, 0.15);
}

.pa_popUp--TopUpBlock--title {
    display: flex;
    align-items: center;
    margin: auto;
}

.pa_popUp--TopUpBlockIcon {
    display: inline-block;
    background: url("../images/images_new/pa_topUpArrow.svg") no-repeat;
    background-size: contain;
    width: 10px;
    height: 10px;
    margin-left: 5px;
    transition: transform 0.3s ease;
}

.pa_popUp--TopUpBlock.expanded .pa_popUp--TopUpBlockIcon {
    transform: rotate(180deg);
}

.pa_popUp--chosenSum {
    display: flex;
    align-items: center;
    margin: 0 auto;
    margin-bottom: 25px;
    margin-top: 10px;
}

.pa_popUp--dollarSign {
    color: #212121;
    text-align: center;
    font-family: Raleway;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.pa_popUp--chosenSum-text {
    color: #212121;
    font-family: Raleway;
    font-size: 37px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.pa_popUp--paymentSummary {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pa_popUp--sumBlock {
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    border: 1px solid #eaeaea;
    background: #fff;
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.25);
    padding: 15px;
    padding-bottom: 15px;
    padding-top: 30px;
    margin-top: -15px;
    margin-bottom: 15px;
    transition: all 0.3s ease-in-out;
    overflow: hidden;
    max-height: 500px;
}

.pa_popUp--sumBlock-hidden {
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
    border: none;
    pointer-events: none; /* Prevent interaction when hidden */
}

.check_bonusForWallet {
    position: absolute;
    top: -5px;
    right: -15px;
    border-radius: 15px;
    background: #d81b60;
    padding: 5px 15px;
    color: #fff;
    color: #fff;
    text-align: center;
    font-family: Lato;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.pa_popUp--sumsBlock {
    display: flex;
    flex-wrap: wrap;
}

.pa_popUp--subButtons {
    position: relative;
    width: 37px;
    padding: 5px 15px;
    border-radius: 10px;
    border: 0.732px solid rgba(106, 27, 154, 0.3);
    background: #fff;
    color: #212121;
    text-align: center;
    font-family: Lato;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin: 0 auto;
    margin-bottom: 10px;
    cursor: pointer;
}

.pa_popUp--subButtons-chosen {
    border: 2px solid #6a1b9a;
}

.pa_popUp--paymentMethod {
    display: flex;
    align-items: center;
    border-radius: 10px;
    border: 1px solid #e5e5e5;
    background: #fff;
    box-shadow: 2px 1px 10px 0px rgba(112, 111, 111, 0.07);
    padding: 10px 15px;
    margin-bottom: 15px;
    height: 60px;
    cursor: pointer;
    max-width: 300px;
}

.pa_popUp-paymentMethod-chosen {
    border-radius: 10px;
    border: 1px solid #6a1b9a;
    background: #fff;
    box-shadow: 2px 1px 10px 0px rgba(112, 111, 111, 0.07);
}

.pa_popUp--line {
    width: 100%;
    height: 1px;
    background: #eaeaea;
    margin: 10px 0;
}

.pa_popUp--textAndSum {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pa_popUp--text {
    color: #212121;
    font-family: Raleway;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.pa_popUp--sum {
    color: #212121;
    font-family: Lato;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    width: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pa_popUp--sumFinal {
    background: url("../images/images_new/pa_sumHighlight.svg") no-repeat;
    background-size: contain;
    width: 45px;
    height: 27px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* END OF POPUP'S */

/* PA MENU */

.pa__menu__list {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 25px;
    margin: 0 auto;
    padding-top: 10px;
    padding-bottom: 10px;
    max-width: 355px;
    margin: 0 auto;
    padding-inline-start: 0;
}

.pa_backToMain {
    display: block;
    text-align: left;
    /* color: #bcbaba; */
    color: #212121;
    font-family: "Raleway", sans-serif;
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-right: auto;
    padding: 5px;
    border-radius: 10px;
    border: 1px solid #c2185b;
    margin: 0 auto;
    text-decoration: none;
    transition: all 0.3s ease;
}

.pa_backToMain:hover {
    background-color: #c2185b;
    color: #fff;
    transition: all 0.3s ease;
}

.pa__menu__list li {
    list-style: none;
    color: #3d3d3d;
    font-family: Raleway, sans-serif;
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    padding-bottom: 3px;
}

.pa__underlineOpened {
    border-bottom: 2px solid #c2185b;
}

.pa__menu__list li a {
    text-decoration: none;
    color: #3d3d3d;
}

/* BALANCE BLOCK */

.pa_balanceBlock {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fdfdfd;
    border: 1px solid #d8d8d8;
    padding: 20px 15px 20px 25px;
    border-radius: 10px;
    margin-top: 15px;
    width: 100%;
    box-sizing: border-box;
}

.pa_balanceBlock--balance {
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: flex-start;
}

.pa_balanceBlock--balance--text {
    color: #212121;
    font-family: "Raleway", sans-serif;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.pa_balanceBlock--balance--amount {
    color: #212121;
    text-align: right;
    font-family: "Lato", sans-serif;
    font-size: 23px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.pa_balanceBlock--button {
    border-radius: 10px;
    background: #c2185b;
    padding: 10px 15px;
    border: none;
}

.pa_balanceBlock--button--text {
    color: #fff;
    text-align: center;
    font-family: Raleway;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.pa_balanceBlock--button--icon {
    display: inline-block;
    background: url("../images/images_new/pa_debitArrow.svg") no-repeat;
    background-size: contain;
    width: 8px;
    height: 12px;
    margin-left: 5px;
}

/* END OF BALANCE BLOCK */

.pa__title {
    color: #c2185b;
    text-align: center;
    font-family: Raleway;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.pa__text {
    color: #212121;
    font-family: Raleway;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-align: center;
    margin-top: 0;
}

/* PA CONTENT BLOCK */

.pa__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 30px;
    max-width: 600px;
    margin: 0 auto;
}

.pa__form {
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    border: 1px solid #eee;
    background: #fff;
    margin-top: 20px;
    width: 100%;
    box-sizing: border-box;
    padding: 15px;
}

.pa__form--label {
    color: #212121;
    font-family: Raleway;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.pa__form--select {
    border-radius: 20px;
    border: 1px solid #eee;
    background: #fff;
    padding: 10px 15px;
    margin-top: 10px;
    color: #212121;
    font-family: Raleway;
    font-size: 16px;
    font-style: normal;
    margin-bottom: 10px;
}

.pa__form--textarea {
    border-radius: 20px;
    border: 1px solid #eee;
    background: #fff;
    padding: 10px 15px;
    margin-top: 10px;
    color: #212121;
    font-family: Raleway;
    font-size: 16px;
    font-style: normal;
    height: 100px;
}

.pa__form--input {
    border-radius: 20px;
    border: 1px solid #eee;
    background: #fff;
    padding: 10px 15px;
    margin-top: 10px;
    margin-bottom: 10px;
    color: #212121;
    font-family: Raleway;
    font-size: 16px;
    font-style: normal;
}

.pa_contentBlock {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 30px;
    padding-left: 15px;
    padding-right: 15px;
    width: 100%;
    max-width: 600px;
}

.pa_popUp--bonus {
    position: absolute;
    top: -10px;
    right: -5px;
}

.pa__form--button {
    border-radius: 10px;
    background: #c2185b;
    padding: 10px 15px;
    border: none;
    margin: 0 auto;
    margin-top: 20px;
    color: #fff;
    text-align: center;
    font-family: Raleway;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    width: 120px;
}

/* BILLING HISTORY */

.pa_billingHistory {
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
    gap: 5px;
    padding-bottom: 5px;
}

#billing-container {
    padding-bottom: 10px;
}

.pa_idAndDate {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pa_idAndDate--id,
.pa_idAndDate--date {
    color: #636363;
    font-family: Lato;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.pa_line {
    background: #eceff1;
    width: 100%;
    height: 1px;
}

.pa_popUp--paymentMethodPopUp {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 300px;
}

.pa_paymentMethodAndAmount {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pa_paymentMethodAndAmount--method,
.pa_paymentMethodAndAmount--amount {
    color: #212121;
    font-family: Lato;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.pa_popUp--paymentMethodContainer {
    display: flex;
    flex-direction: column;
    height: 40px;
}

.pa_popUp--paymentMethodText {
    color: #212121;
    font-family: Raleway;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-left: 10px;
}

.pa_popUp--paymentMethodCard {
    display: inline-block;
    background: url("../images/images_new/debitCards.svg") no-repeat;
    background-size: contain;
    width: 35px;
    height: 35px;
}

.pa_popUp--paymentMethodApple {
    display: inline-block;
    background: url("../images/images_new/applepay.svg") no-repeat;
    background-size: contain;
    width: 46.861px;
    height: 30px;
    margin-right: 5px;
}

.pa_popUp--paymentMethodCoinbase {
    display: inline-block;
    background: url("../images/coinbase.svg") no-repeat;
    background-size: contain;
    width: 87.149px;
    height: 19.022px;
}

.pa_popUp--paymentMethodGoogle {
    display: inline-block;
    background: url("../images/images_new/google.svg") no-repeat;
    background-size: contain;
    width: 35px;
    height: 35.022px;
    margin-right: 5px;
}

.pa_popUp--paymentMethodBtn {
    display: flex;
    flex-direction: column;
}

.pa_popUp--changePaymentMethod {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 10px;
    border: 1px solid #e5e5e5;
    padding: 15px 25px;
    background: #fff;
    box-shadow: 2px 1px 10px 0px rgba(112, 111, 111, 0.07);
    margin-top: 15px;
}

.pa_popUp--changePaymentMethodBtn {
    display: flex;
    flex-direction: column;
}

.pa_popUp--changePaymentMethodBtn-selected {
    display: flex;
    align-items: flex-start;
    gap: 5px;
    flex-direction: column;
}

.pa_orderItem {
    margin-right: 0;
    margin-left: 0;
    border-top: 1px solid #eceff1;
    padding: 1rem 1.2rem 1.5rem 1.7rem;
}

.pa_orderItem--userInfo {
    display: flex;
    align-items: center;
    flex-direction: row;
}

.pa_orderItem--userInfo--avatar {
    display: block;
    margin-top: 0.3rem;
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
}

.pa_orderItem--userInfo--name {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.pa_arrow {
    display: inline-block;
    background: url("../images/images_new/pa_arrowGrey.svg") no-repeat;
    background-size: contain;
    width: 10px;
    height: 15px;
    margin-left: 5px;
}
.mb-15 {
    margin-bottom: 15px;
}

.mt-0 {
    margin-top: 0;
}

.pa_popUp--container-login,
.pa_popUp--container-code,
.pa_popUp--container-wallet {
    display: block;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    background-color: #fff;
    max-height: 90vh;
    overflow-y: auto;
    margin-top: 20px; /* Add some top margin to prevent going above header */
}

#orders-container {
    width: 100%;
}

/* Loading dots animation */
.loading-dots {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 20px;
    text-align: center;
}

.loading-dots::after {
    content: "";
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: #c2185b;
    animation: loading-dots 1.4s infinite ease-in-out both;
    margin: 0 2px;
}

.loading-dots::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: #c2185b;
    animation: loading-dots 1.4s infinite ease-in-out both;
    animation-delay: -0.32s;
    margin: 0 2px;
}

.loading-dots span {
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: #c2185b;
    animation: loading-dots 1.4s infinite ease-in-out both;
    animation-delay: -0.16s;
    margin: 0 2px;
}

@keyframes loading-dots {
    0%,
    80%,
    100% {
        transform: scale(0);
        opacity: 0;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Alternative simpler loading dots */
.loading-text {
    position: relative;
    display: block;
    color: #21b4b7;
    font-family: Raleway;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-align: center;
    margin: 0 auto;
}

.loading-text::after {
    content: "";
    animation: dots 1.5s steps(4, end) infinite;
}

.pa_loadMorebutton {
    border-radius: 10px;
    background: #21b4b7;
    padding: 10px 15px;
    border: none;
    color: #fff;
    text-align: center;
    font-family: Raleway;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    width: 120px;
    margin-top: 15px;
}

@keyframes dots {
    0%,
    20% {
        content: "";
    }
    40% {
        content: ".";
    }
    60% {
        content: "..";
    }
    80%,
    100% {
        content: "...";
    }
}

.hidden {
    display: none;
}

.pa_order {
    border-bottom: 1px solid #eceff1;
    margin-top: 10px;
    padding-bottom: 10px;
}

.pa_orderHeader {
    display: flex;
    flex-direction: column;
}

.pa_orderHeader {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
}

.pa_statusAndusername {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.pa_orderDescription {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-decoration: none;
}

.pa_orderNumberAndDate {
    display: flex;
    flex-direction: row;
    gap: 10px;
    color: #636363;
    font-family: Lato;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-top: 10px;
}

.pa__status {
    color: #fff;
    text-align: center;
    font-family: Lato;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.pa__statusInProgress {
    background-color: #21b4b7;
}

.pa__statusCompleted,
.pa__statusError,
.pa__statusInProgress,
.pa__statusCreated {
    padding: 0.3rem 0.7rem;
    color: #fff;
    border-radius: 4rem;
}

.pa__instaUserName {
    margin-top: 5px;
    font-family: Raleway, sans-serif;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    color: #212121;
}

.pa__orderPrice {
    color: #212121;
    font-family: Lato;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.pa__statusCompleted {
    background-color: #43a047;
}

.pa__statusError {
    background-color: #ff3838;
}

.pa__statusCreated {
    background-color: #ffa93a;
}

.pa__comment {
    background: url("../images/images_new/check_comments.svg") no-repeat;
    display: inline-block;
    width: 17px;
    height: 17px;
    background-size: contain;
    background-repeat: no-repeat;
    margin-right: 5px;
}

.pa__like {
    background: url("../images/images_new/check_likes.svg") no-repeat;
    display: inline-block;
    width: 17px;
    height: 17px;
    background-size: contain;
    background-repeat: no-repeat;
    margin-right: 5px;
}

.pa__video {
    background: url("../images/images_new/check_views.svg") no-repeat;
    display: inline-block;
    width: 17px;
    height: 17px;
    background-size: contain;
    background-repeat: no-repeat;
    margin-right: 5px;
}

.pa__follower {
    background: url("../images/images_new/check_followers.svg") no-repeat;
    display: inline-block;
    width: 17px;
    height: 17px;
    background-size: contain;
    background-repeat: no-repeat;
    margin-right: 5px;
}

.pa_reportProblem {
    color: #212121;
    font-family: Lato;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: none;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
}

.pa__metrics {
    display: flex;
    flex-direction: row;
    align-items: center;
}

/* Support Form Messages */
.pa__form--message {
    border-radius: 10px;
    padding: 15px 20px;
    margin-top: 15px;
    font-family: Raleway;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-align: center;
    animation: slideInDown 0.3s ease-out;
}

.pa__form--success,
.pa_popUp--payWithWallet-success {
    font-family: Raleway;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-align: center;
    animation: slideInDown 0.3s ease-out;

    color: #2e7d32;
}

.pa__form--error,
.pa_popUp--error-message,
.pa_popUp--payWithWallet-error,
.pa__paymentError {
    font-family: Raleway, sans-serif;
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-align: center;
    animation: slideInDown 0.3s ease-out;
    color: #c62828;
}

@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.pa_popup_iconSuccess,
.auth__successfullAuthIcon {
    display: flex;
    width: 35px;
    height: 35px;
    background: url("../images/dbPopup__iconSuccess.svg") no-repeat;
    background-size: contain;
    background-repeat: no-repeat;
    margin: 0 auto;
    margin-top: 5px;
    margin-bottom: 5px;
}
.pa__paymentButtons {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pa__replenishForm {
    max-width: 55rem;
    margin-bottom: 3rem;
}

.pa__replenishFormBtn {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #212121;
    box-shadow: 2px 2px 10px rgba(99, 99, 99, 0.2);
    border-radius: 10px;
    width: 24rem;
    height: 6rem;
    margin: 0rem auto;
    border: none;
}

.pa__replenishFormBtn .button__text {
    font-family: "Raleway";
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    line-height: 18px;
    color: #ffffff;
    align-self: center;
}

.pa__replenishWallet {
    position: relative;
    background: #21b4b7;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.pa__replenishBtn--crypto,
.pa__replenishBtn--debit {
    display: block;
    width: 3rem;
    height: 3rem;
    margin-right: 1.5rem;
    align-self: center;
}

.pa__replenishBtn--crypto {
    background: url("../images/images_new/coinbaseIcon.svg") no-repeat;
    background-size: contain;
}

.pa__replenishBtn--debit {
    background: url("../images/images_new/debitCards.svg") no-repeat;
    background-size: contain;
}

.pa__googlePay {
    width: unset !important;
    padding: unset !important;
}

.pa_popUp--welcomeText {
    color: #212121;
    font-family: "Raleway", sans-serif;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.header__logout {
    display: block;
    width: 20px;
    height: 20px;
    background: url("../images/images_new/exit_wallet.svg") no-repeat;
    background-size: contain;
    border: none;
    cursor: pointer;
}

/* MY SUBSCRIPTIONS */
.pa__instaAccountPic {
    width: 20px;
    height: 20px;
    border-radius: 50%;
}

.pa_subscription-section-value-container {
    display: flex;
    gap: 5px;
    align-items: center;
}

.pa_subscription {
    display: flex;
    flex-direction: column;
    padding: 15px 10px 20px 15px;
    border-radius: 10px;
    border: 0.5px solid #afafaf;
    background: #fff;
    box-shadow: 1px 0 3px 0 rgba(188, 188, 188, 0.15);
}

.pa_subscription-title {
    margin: 0 auto;
    color: #2a3037;
    font-family: Lato;
    font-size: 17px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.51px;
    text-align: center;
}

.pa_subscription-date {
    margin: 0 auto;
    margin-bottom: 5px;
    color: #afafaf;
    font-family: Lato;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.39px;
}

.pa_subscription-section {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.pa_subscription-section-name {
    color: #2a3037;
    font-family: "Raleway", sans-serif;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.45px;
}

.pa_subscription-section-value {
    color: #2a3037;
    font-family: "Raleway", sans-serif;
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0.45px;
}

.pa_subscription-cancel-btn {
    color: #2a3037;
    font-family: "Raleway", sans-serif;
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.45px;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: none;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
    -webkit-appearance: none;
    margin-top: 5px;
}

.pa_subscription {
    background: #fff;
    color: #222;
    border: 1px solid #e6e6e6;
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    max-width: 560px;
    margin: 16px auto;
}
.pa_subscription-title-block {
    display: flex;
    align-items: center;
    margin: 0 auto;
    margin-bottom: 8px;
}
.pa_subscription-icon {
    justify-content: end;
}
.pa_subscription-title {
    font-weight: 700;
    font-size: 18px;
    margin: 0;
}
.pa_subscription-date {
    font-size: 12px;
    color: #999;
    margin: 0 0 12px 0;
}
.pa_subscription-section {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    font-size: 15px;
}
.pa_subscription-section-name {
    color: #777;
}

.badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    background: #f4f6ff;
    border: 1px solid #e3e8ff;
    color: #3b3b7a;
}
.empty {
    color: #888;
    text-align: center;
    margin-top: 12px;
}
.pa_subscription--clickable {
    cursor: pointer;
}
.pa_subscription--clickable:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

.pa_subscription-error {
    font-family: Raleway, sans-serif;
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-align: center;
    color: #c62828;
}

.auth__wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    max-width: 60rem;
    margin: 0rem auto;
    padding: 0rem 1.5rem;
    padding-bottom: 90px;
    overflow: hidden;
}

.auth_popUp--label {
    margin: 0 auto;
    color: #212121;
    font-family: Raleway;
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-align: center;
}

.auth__title {
    color: #c2185b;
    text-align: center;
    font-family: Raleway;
    font-size: 25px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-bottom: 20px;
    z-index: 2;
}

.auth_text {
    color: #212121;
    font-family: Raleway;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-align: center;
    margin: 0 auto;
    z-index: 2;
}

.auth__authForm {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    z-index: 2;
    width: 100%;
    max-width: 500px;
}

.auth__successfullAuth {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    z-index: 2;
}
.auth__info {
    z-index: 2;
}
.auth__sumbitNewEmail {
    border-radius: 10px;
    background: #fff;
    color: #212121;
    border: 1px solid #21b4b7;
    box-shadow: 1px 1px 10px 0 rgba(87, 87, 87, 0.15);
    width: 24rem;
    height: 6rem;
    margin: 0rem auto;
    cursor: pointer;
    font-family: "Raleway";
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    text-align: center;
    margin-top: 10px;
}

.su__ellipse_bg {
    top: 40px;
    position: absolute;
    content: "";
    display: block;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: linear-gradient(180deg, #fdfcfd 0%, #f8f9fa 45%, #ffdfea 100%);
    background-size: contain;
    background-position: center;
    z-index: 1;
    animation: 10s linear infinite rotate;
}

/* Animations are applied only when the class 'animate' is added */
.su__ellipse_bg.animate {
    animation: rotate 10s linear infinite;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.su__ellipse_bg::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.3), rgba(0, 128, 255, 0.1), transparent);
    filter: blur(10px);
    opacity: 0.7;
    z-index: -1;
}

/* Glow animation is applied only when the class 'animate' is added */
.su__ellipse_bg.animate::before {
    animation: glowPulse 3s ease-in-out infinite;
}

.pa_popUp--link {
    color: #212121;
    font-family: Raleway, sans-serif;
    font-weight: 600;
    border: none;
    background: none;
    text-decoration: underline;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.pa_popUp--link:disabled {
    background: none !important;
    opacity: 0.6;
    cursor: not-allowed;
}
.pa_popup_walletIcon {
    display: flex;
    width: 142px;
    height: 65px;
    background: url("../images/images_new/wallet_icon_popup.svg") no-repeat;
    background-size: contain;
    background-repeat: no-repeat;
    margin: 0 auto;
    margin-top: 5px;
    margin-bottom: 5px;
}

/* new subscription styles */

.pa_subContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 0 auto;
    padding: 15px 15px 25px 15px;
    border-radius: 10px;
    border: 0.5px solid #d8d8d8;
    background: #fff;
    box-shadow: 1px 0 3px 0 rgba(188, 188, 188, 0.15);
    margin-bottom: 10px;
    cursor: pointer;
    box-sizing: border-box;
}

.pa_subContainer-info-item-package-container-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.pa_subContainer-info-date {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.pa_subContainer-info {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.pa_subContainer-info-avatar {
    width: 35px;
    height: 35px;
    border-radius: 50px;
    margin-right: 5px;
}

.pa_subUsername {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 5px;
    gap: 5px;
    margin: 0 auto;
}

.pa_subUsername-text {
    color: #212121;
    font-family: Raleway, sans-serif;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.pa_subDate {
    display: flex;
    align-items: left;
    color: #636363;
    font-family: Lato, sans-serif;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.pa_subDate-arrow_icon {
    display: inline-block;
    background: url("../images/images_new/pa_arrowGrey.svg") no-repeat;
    background-size: contain;
    width: 10px;
    height: 15px;
    margin-left: 5px;
}

.pa_subDate-arrow_icon {
    display: inline-block;
    background: url("../images/images_new/pa_sub_arrow.svg") no-repeat;
    background-size: contain;
    width: 10px;
    height: 15px;
    margin-left: 5px;
}

.pa_subStatus {
    display: flex;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #43a047;
    /* color: #fff;
    text-align: center;
    font-family: Lato;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    padding: 5px;
    border-radius: 20px;
    background: #21b4b7; */
}

.pa_subStatus-onCancel {
    background: #ff784b;
}

.pa_subContainer-info-item {
    display: flex;
    align-items: left;
    justify-content: space-between;
    width: 100%;
    margin-top: 5px;
}

.pa_subContainer-info-cancel {
    display: flex;
    align-items: left;
    flex-direction: column;
    width: 100%;
    margin-top: 5px;
}

.pa_subContainer-info-item-package {
    display: flex;
    align-items: left;
    width: 100%;
    margin-top: 10px;
}

.pa_subStatus-canceled {
    background: #ff0000;
}

.pa_subContainer-info-item-text {
    color: #212121;
    font-family: Raleway, sans-serif;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.pa_subContainer-info-item-text-button {
    display: block;
    margin: 0 auto;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 40px;
    border-radius: 10px;
    border: 1px solid #21b4b7;
    background: #fff;
    color: #212121;
    font-family: Raleway, sans-serif;
    font-size: 15px;
    margin-top: 10px;
}

.pa_subContainer-info-item-text-button:disabled {
    background: #fff !important;
    background-color: #fff !important;
    opacity: 1;
}

.force-cancel-subscription-error {
    font-family: Raleway, sans-serif;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-align: center;
    color: #c62828;
    display: block;
    margin-top: 10px;
}

.pa__successForceCancel-messsage {
    display: none;
    font-family: Raleway, sans-serif;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-align: center;
    color: #43a047;
    margin-top: 0;
}

.packages_faq-ul {
    margin-block-start: 0;
    margin-block-end: 0;
    padding-inline-start: 0;
}

@keyframes glowPulse {
    0%,
    100% {
        opacity: 0.5;
        transform: translate(-50%, -50%) scale(1);
    }
    border: none;
    cursor: pointer;
    margin-top: 10px;
    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.1);
    }
}

@keyframes rotate {
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes glowPulse {
    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.5;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 1;
    }
}

#subs-container {
    width: 100%;
}

.no-list-style li {
    list-style: none !important;
}

.mt-15 {
    margin-top: 15px;
}