@import url("https://fonts.googleapis.com/css2?family=Epilogue:ital,wght@0,100..900;1,100..900&display=swap");

@import url(../responsive.css);

/* Root: variables colors */
:root {
    --green-main-clr: #00a86b;
    --green-main-hover-clr: #09b979;
    --main-black-clr: #20272b;
    --green-main-clr-0-16: hsl(158deg 100% 33% / 16%);
    --dark-open-clr-hover: rgb(60 72 79);
    --green-dark-main-clr: #ffff;
    --black-clr: #111111;
    --grey-clr: #808080;
    --grey-dark-clr: #2a2a2a;
    --white-clr: #ffffff;
    --input-clr: #2b2b2b;
    --red-clr: #ff4040;
    --red-clr-0-16: #ff404016;
    --model-light-clr: #f4f4f4;
    --model-light-shadow: #e7e7e7;
    --model-light-strok: #dcdcdc;
    --model-dark-clr: #161616;
    --paragraph-white-clr: #e2e2e2;
    --up-numbers-clr: rgb(22, 199, 132);
    --low-numbers-clr: #ea3943;
    --help-component-clr: #e7e7e7;
    --help-component-hover-clr: #e1e0e0;
}

/* Root : variables sizes */
:root {
    --font-size-10: 10px;
    --font-size-12: 12px;
    --font-size-14: 14px;
    --font-size-16: 16px;
    --font-size-18: 18px;
    --font-size-20: 20px;
    --font-size-24: 24px;
    --font-size-32: 32px;
    --font-size-48: 48px;
    --font-size-64: 64px;
}

/* Root : borders */

:root {
    --border-radius-30: 30px;
    --border-radius-10: 10px;
}

/* Root : variable font */
:root {
    --main-font: "Epilogue", sans-serif;
}

/* Root : transation */
:root {
    --transition: all 0.3s ease-in-out;
    --transition-in: transform 0.3s ease-in; /* For scaling in */
    --transition-out: transform 0.5s ease-out; /* For scaling out */
}

:root {
    --main-height: 640px;
    --main-width: 480px;
}

/* Widget variables */
:root {
    --w-bg-clr: #ebebeb;
    /* --w-mx-width: 480px; */
    --w-mx-width: 430px;
    /* --w-mx-height: 750px; */
    --w-mx-height: 660px;
    --infos-bg-clr: rgba(255, 255, 255, 0.05);
    --infos-bg-stroke: #2b2b2b;
    --orange-clr: #e67e22;
    --warning-alert-bg-color: rgba(255, 149, 0, 0.1);
    --danger-alert-bg-color: rgba(255, 64, 64, 0.1);
}

.confirmation-popup.show {
    display: block;
}

.err-alert-float {
    position: absolute;
    width: 80%;
    height: 40px;
    top: 65px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--red-clr);
    background-color: var(--red-clr-0-16);
    backdrop-filter: blur(10px);
    border-radius: var(--border-radius-10);
    border: 1px solid var(--red-clr-0-16);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    opacity: 0;
    transition: all 0.3s ease-in-out;
    z-index: 999;
}

.err-alert-float.active {
    opacity: 1;
    top: 75px;
}

.err-alert-float span {
    font-size: var(--font-size-14);
}

input.input-error {
    border: 1px solid var(--red-clr) !important;
    animation: inputShake 0.5s ease-in-out;
}

select.input-error {
    border: 1px solid var(--red-clr) !important;
    animation: inputShake 0.5s ease-in-out;
} /* added by med */

@keyframes inputShake {
    0% {
        transform: translateX(0);
    }
    20% {
        transform: translateX(-5px);
    }
    40% {
        transform: translateX(5px);
    }
    60% {
        transform: translateX(-5px);
    }
    80% {
        transform: translateX(5px);
    }
    100% {
        transform: translateX(0);
    }
}

.overlay.show {
    display: block;
}

.widget-main .i-border {
    border: 1px solid var(--main-black-clr);
    border-radius: var(--border-radius-10);
    width: 100%;
    padding: 10px 20px;
}

.widget-main .i-border:focus-visible {
    outline: 1px solid var(--green-main-clr-0-16);
}

.grey-component {
    background-color: var(--infos-bg-clr);
}

/* Successfully status */
.success {
    color: var(--green-main-clr);
}

.err-danger {
    font-size: var(--font-size-14) !important;
    color: var(--red-clr) !important;
    padding-top: 20px !important;
    font-weight: 300 !important;
}

/* Pending status */
.pending {
    color: var(--orange-clr) !important;
}

.bg-pending {
    background-color: var(--orange-clr) !important;
}

/* Rejected status */
.rejected {
    color: var(--red-clr) !important;
}

.bg-rejected {
    background-color: var(--red-clr) !important;
}

.loading-dots {
    display: flex;
    gap: 5px;
}

.loading-dots span {
    width: 5px;
    height: 5px;
    background-color: var(--orange-clr);
    border-radius: 50%;
    animation: bounce 1.5s infinite ease-in-out;
}

.loading-dots span:nth-child(1) {
    animation-delay: 0s;
}

.loading-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.loading-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes bounce {
    0%,
    80%,
    100% {
        transform: scale(1);
        opacity: 0.3;
    }
    40% {
        transform: scale(1.1);
        opacity: 1;
    }
}

.grey-clr {
    color: var(--grey-clr) !important;
}

/* Thin */
@font-face {
    font-family: "epilogue";
    src: url("../font/static/Epilogue-Thin.ttf") format("ttf");
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: "epilogue";
    src: url("../font/static/Epilogue-ThinItalic.ttf") format("ttf");
    font-weight: 100;
    font-style: italic;
}

/* Extra Light */
@font-face {
    font-family: "epilogue";
    src: url("../font/static/Epilogue-ExtraLight.ttf") format("ttf");
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: "epilogue";
    src: url("../font/static/Epilogue-ExtraLightItalic.ttf") format("ttf");
    font-weight: 200;
    font-style: italic;
}

/* Light */
@font-face {
    font-family: "epilogue";
    src: url("../font/static/Epilogue-Light.ttf") format("ttf");
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: "epilogue";
    src: url("../font/static/Epilogue-LightItalic.ttf") format("ttf");
    font-weight: 300;
    font-style: italic;
}

/* Regular */
@font-face {
    font-family: "epilogue";
    src: url("../font/static/Epilogue-Regular.ttf") format("ttf");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "epilogue";
    src: url("../font/static/Epilogue-Italic.ttf") format("ttf");
    font-weight: 400;
    font-style: italic;
}

/* Medium */
@font-face {
    font-family: "epilogue";
    src: url("../font/static/Epilogue-Medium.ttf") format("ttf");
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: "epilogue";
    src: url("../font/static/Epilogue-MediumItalic.ttf") format("ttf");
    font-weight: 500;
    font-style: italic;
}

/* SemiBold */
@font-face {
    font-family: "epilogue";
    src: url("../font/static/Epilogue-SemiBold.ttf") format("ttf");
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: "epilogue";
    src: url("../font/static/Epilogue-SemiBoldItalic.ttf") format("ttf");
    font-weight: 600;
    font-style: italic;
}

/* Bold */
@font-face {
    font-family: "epilogue";
    src: url("../font/static/Epilogue-Bold.ttf") format("ttf");
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: "epilogue";
    src: url("../font/static/Epilogue-BoldItalic.ttf") format("ttf");
    font-weight: 700;
    font-style: italic;
}

/* Extra Bold */
@font-face {
    font-family: "epilogue";
    src: url("../font/static/Epilogue-ExtraBold.ttf") format("ttf");
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: "epilogue";
    src: url("../font/static/Epilogue-ExtraBoldItalic.ttf") format("ttf");
    font-weight: 800;
    font-style: italic;
}

/* Black */
@font-face {
    font-family: "epilogue";
    src: url("../font/static/Epilogue-Black.ttf") format("ttf");
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: "epilogue";
    src: url("../font/static/Epilogue-BlackItalic.ttf") format("ttf");
    font-weight: 900;
    font-style: italic;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Epilogue", sans-serif;
}

a {
    text-decoration: none;
    width: fit-content !important;
}

ul {
    padding-left: 0;
}

li {
    list-style: none;
}

p {
    font-size: var(--font-size-16);
    font-weight: 400; /* Regular */
    margin-bottom: 0;
    line-height: 20px;
}

.widget-main {
    /* user-select: none; */
}

.text-underline {
    text-decoration: underline !important;
}

.underline:hover {
    text-decoration: underline;
}

.widget-main input {
    font-family: "Epilogue", sans-serif;
    font-size: var(--font-size-16);
    font-weight: 300;
    color: var(--white-clr);
    background-color: var(--input-clr);
    border-radius: var(--border-radius-10);
    width: 100%;
    margin-bottom: 20px;
}

input::placeholder {
    color: var(--grey-clr) !important;
    font-size: var(--font-size-14);
    font-weight: 300;
}

input[type="number"] {
    -moz-appearance: textfield;
    -webkit-appearance: none;
    appearance: none;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.w-input-half input {
    margin-bottom: 0 !important;
}

.black {
    background-color: var(--black-clr);
}

.w-bg-clr {
    background-color: var(--w-bg-clr);
}

.logo {
    color: var(--white-clr);
    font-family: var(--main-font);
    font-weight: 800;
    font-size: var(--font-size-32);
}

.logo span {
    color: var(--green-main-clr);
}

a .w-main-btn span {
    color: var(--white-clr) !important;
}

.widget-main .w-main-btn {
    position: relative;
    background-color: var(--green-main-clr);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 50px;
    border-radius: 50px;
    font-size: var(--font-size-16);
    font-weight: 600;
    cursor: pointer;
    user-select: none;
}

.w-main-btn span {
    color: var(--white-clr);
}

.w-main-btn:hover {
    background-color: var(--green-main-hover-clr);
}

.widget-main .w-main-btn.white {
    position: relative;
    background-color: var(--w-bg-clr);
    color: var(--main-black-clr);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 50px;
    border-radius: 50px;
    font-size: var(--font-size-16);
    font-weight: 600;
    cursor: pointer;
}

.widget-main .w-main-btn.white span {
    color: var(--black-clr);
}

.widget-main .w-main-btn.white:hover {
    background-color: rgb(184, 184, 184);
}

/* Loader button animation */
.btn-loader {
    position: absolute;
    top: 24%;
    left: 4%;
    width: 25px;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 2px solid var(--white-clr);
    animation: l20-1 0.8s infinite linear alternate, l20-2 1.6s infinite linear;
}
@keyframes l20-1 {
    0% {
        clip-path: polygon(
            50% 50%,
            0 0,
            50% 0%,
            50% 0%,
            50% 0%,
            50% 0%,
            50% 0%
        );
    }
    12.5% {
        clip-path: polygon(
            50% 50%,
            0 0,
            50% 0%,
            100% 0%,
            100% 0%,
            100% 0%,
            100% 0%
        );
    }
    25% {
        clip-path: polygon(
            50% 50%,
            0 0,
            50% 0%,
            100% 0%,
            100% 100%,
            100% 100%,
            100% 100%
        );
    }
    50% {
        clip-path: polygon(
            50% 50%,
            0 0,
            50% 0%,
            100% 0%,
            100% 100%,
            50% 100%,
            0% 100%
        );
    }
    62.5% {
        clip-path: polygon(
            50% 50%,
            100% 0,
            100% 0%,
            100% 0%,
            100% 100%,
            50% 100%,
            0% 100%
        );
    }
    75% {
        clip-path: polygon(
            50% 50%,
            100% 100%,
            100% 100%,
            100% 100%,
            100% 100%,
            50% 100%,
            0% 100%
        );
    }
    100% {
        clip-path: polygon(
            50% 50%,
            50% 100%,
            50% 100%,
            50% 100%,
            50% 100%,
            50% 100%,
            0% 100%
        );
    }
}
@keyframes l20-2 {
    0% {
        transform: scaleY(1) rotate(0deg);
    }
    49.99% {
        transform: scaleY(1) rotate(135deg);
    }
    50% {
        transform: scaleY(-1) rotate(0deg);
    }
    100% {
        transform: scaleY(-1) rotate(-135deg);
    }
}

/* .w-main-btn img {
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
} */

/* Widget menu style */
.widget-menu {
    position: absolute;
    background-color: var(--black-clr);
    border-top: 1px solid var(--main-black-clr);
    z-index: 10000;
    /* height: 640px; */
    height: 572px;
    width: 100%;
    bottom: -100%;
    left: 0;
    padding: 20px;
    transition: all 0.3s ease-in-out;
}

.widget-menu.up-menu {
    bottom: 0;
}

.widget-menu .w-m-title {
    color: var(--grey-clr);
    font-weight: 600;
}

.widget-menu nav ul li {
    padding: 10px 0;
    transition: all 0.3s ease-in-out;
}

.widget-menu nav ul li:hover {
    background: linear-gradient(
        90deg,
        #ffffff0d 0%,
        #ffffff0d 35%,
        transparent 100%
    );
    padding: 10px 0 10px 10px;
}

.widget-menu nav ul li a span {
    color: var(--white-clr);
    font-weight: 500;
}

.widget-menu nav ul li a p {
    color: var(--grey-clr);
}

.widget-menu nav ul li a .w-nav-icon {
    width: 20px;
    height: 20px;
}

.registration-sign {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    padding: 0 20px;
}

.registration-sign p {
    font-size: var(--font-size-14);
    color: var(--grey-clr);
    font-weight: 400;
}

/* Widget orders menu */
.orders-menu {
    position: absolute;
    background-color: var(--black-clr);
    border-top: 1px solid var(--main-black-clr);
    z-index: 10001;
    /* height: 640px; */
    height: 572px;
    width: 100%;
    bottom: 0;
    left: 100%;
    padding: 20px;
    transition: all 0.3s ease-in-out;
}

.orders-menu.pull-orders {
    left: 0;
}

.orders-menu .order-header .user-name {
    color: var(--white-clr);
    font-weight: 600;
}

.orders-menu .order-header .user-name span {
    color: var(--grey-clr);
    font-weight: 300;
}

.back-menu {
    color: var(--grey-clr);
    cursor: pointer;
    font-weight: 600;
    font-size: var(--font-size-14);
}

.back-menu svg.arrow-icon-svg:hover,
.back-menu:hover{
        color: var(--paragraph-white-clr);
}

.back-menu svg.arrow-icon-svg {
    height: 10px;
}

.finish-btn {
    background-color: transparent;
    border: 1px solid var(--main-black-clr);
    color: var(--grey-clr);
    font-size: var(--font-size-14);
    padding: 3px 5px 2px;
    border-radius: 5px;
    line-height: normal;
    cursor: pointer;
}

.finish-btn:hover {
    background-color: var(--bs-body-color);
    color: var(--paragraph-white-clr);
}

.w-order {
    margin-top: 1rem;
    cursor: pointer;
}

.w-order:hover .w-currency-content,
.w-order:hover .w-currency-price {
    opacity: 0.5;
}

.last-orders {
    padding: 1rem;
    border: 1px solid var(--infos-bg-stroke);
    border-radius: 5px;
    height: 398px;
    overflow-y: scroll;
}

.last-orders::-webkit-scrollbar {
    height: 3px;
    width: 3px;
}
.last-orders::-webkit-scrollbar-track {
    border-radius: 0px;
    background-color: var(--infos-bg-clr);
    border: 0px solid var(--black-clr);
}

.last-orders::-webkit-scrollbar-thumb {
    background-color: var(--grey-clr);
    border-radius: 50px;
}

.last-orders .l-o-title,
.last-orders .view-all a {
    font-size: var(--font-size-14);
    color: var(--white-clr);
    font-weight: 400;
}

.last-orders .view-all a {
    color: var(--green-main-clr);
}

.last-orders .w-currency {
    position: relative;
}

.last-orders .w-currency img {
    height: 45px;
}

.last-orders .w-currency .is-state {
    position: absolute;
    height: 20px;
    top: -5px;
    left: -5px;
}

.last-orders .w-currency-content .w-c-name {
    color: var(--white-clr);
    font-size: var(--font-size-16);
    font-weight: 600;
}

.last-orders .w-currency-content .w-currency-type {
    color: var(--grey-clr);
    font-size: var(--font-size-14);
    font-weight: 300;
}

.last-orders .w-currency-price .w-c-price {
    color: var(--white-clr);
    font-size: var(--font-size-16);
    font-weight: 600;
}

.last-orders .w-currency-price .w-equivalent-price {
    color: var(--grey-clr);
    font-size: var(--font-size-14);
    font-weight: 300;
}

.last-orders .orders-history-wrapper .order-date {
    position: relative;
}

.last-orders .orders-history-wrapper .order-date .order-month {
    color: var(--grey-clr);
    font-weight: 600;
    font-size: var(--font-size-14);
}

.last-orders .orders-history-wrapper .order-date .order-year {
    color: var(--grey-clr);
    font-weight: 600;
    font-size: var(--font-size-14);
}

.last-orders .orders-history-wrapper .order-date::before {
    position: absolute;
    content: "";
    height: 0.1px;
    width: 69%;
    background-color: #ffffff0f;
    top: 43%;
    right: 49px;
    transform: translateY(-50%);
}

.last-orders .orders-history-wrapper .last-view-all {
    color: var(--green-main-clr);
    font-size: var(--font-size-14);
    cursor: pointer;
}

.last-orders .no-orders {
    color: var(--grey-dark-clr);
    font-size: var(--font-size-14);
    font-weight: 300;
}

/* Order situation */
.order-situation {
    position: absolute;
    background-color: var(--black-clr);
    z-index: 10002 !important;
    height: var(--w-mx-height);
    width: 100%;
    bottom: -100%;
    left: 0%;
    padding: 20px;
    transition: bottom 0.3s ease-in-out;
    z-index: 1000;
}

/* Widget styles */
.w-background {
    background-image: url("../../frontend/img/w-bg.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: auto;
}

.widget-section {
    height: 100%;
}

.widget-page-heading {
    font-size: var(--font-size-48);
    color: var(--white-clr);
    font-weight: 800;
}

/* Widger scroll */

.w-body-scroll {
    overflow-y: scroll;
    height: 440px;
    padding-right: 10px;
}

.w-body-scroll::-webkit-scrollbar {
    height: 3px;
    width: 3px;
}
.w-body-scroll::-webkit-scrollbar-track {
    border-radius: 0px;
    background-color: var(--input-clr);
    border: 1px solid var(--black-clr);
}

.w-body-scroll::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background-color: var(--grey-clr);
    border-radius: 50px;
}

.order-situation .address-wallet {
    padding-right: 20px !important;
    padding-left: 20px !important;
}

.order-situation .address-wallet .address-title {
    color: var(--white-clr);
}

.order-situation .address-wallet .address {
    color: var(--grey-clr);
    font-weight: 300;
}

.order-situation .address-wallet .address p {
    font-size: var(--font-size-14);
}

/* Payment infos menu */

.payment-infos-menu {
    position: absolute;
    background-color: var(--black-clr);
    z-index: 10003 !important;
    height: var(--w-mx-height);
    width: 100%;
    bottom: -100%;
    left: 0%;
    padding: 30px;
    transition: bottom 0.3s ease-in-out;
    z-index: 1000;
}

.payment-infos-menu .hamburger-close {
    top: 10px;
}

.payment-infos-menu .hamburger-close .stick {
    background-color: var(--red-clr);
}

/* Languages translate menu */
.lang-trans-menu {
    position: absolute;
    background-color: var(--black-clr);
    border-top: 1px solid var(--main-black-clr);
    z-index: 100;
    height: 572px;
    width: 100%;
    bottom: 0%;
    left: 100%;
    padding: 30px;
    transition: left 0.3s ease-in-out;
    z-index: 10001;
}

.lang-trans-menu.pull-langs {
    left: 0;
}

.lang-trans-menu .order-header .user-name {
    color: var(--white-clr);
    font-weight: 600;
}

.lang-trans-menu .order-header .user-name span {
    color: var(--grey-clr);
    font-weight: 300;
}

.lang-trans-menu nav ul li {
    padding: 10px 0;
    transition: all 0.3s ease-in-out;
}

.lang-trans-menu nav ul li:hover {
    background: linear-gradient(
        90deg,
        #ffffff0d 0%,
        #ffffff0d 35%,
        transparent 100%
    );
    padding: 10px 0 10px 10px;
}

.lang-trans-menu nav ul li a.soon {
    opacity: 0.5;
    cursor: not-allowed;
}

.lang-trans-menu nav ul li a span {
    color: var(--white-clr);
    font-weight: 500;
}

.lang-trans-menu nav ul li a p {
    color: var(--grey-clr);
}

.lang-trans-menu nav ul li a .w-nav-icon {
    width: 20px;
    height: 20px;
}

/* Main widget body */
.widget-main {
    position: relative;
    max-height: var(--w-mx-height);
    min-height: var(--w-mx-height);
    max-width: var(--w-mx-width);
    min-width: var(--w-mx-width);
    background-color: var(--black-clr);
    border-radius: var(--border-radius-30);
    padding: 20px;
    overflow: hidden;
}

.widget-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.widget-header .w-back-btn img {
    cursor: pointer !important;
}

.widget-header .w-back-btn span {
    user-select: none;
}

.widget-header .w-back-btn:hover span {
    color: var(--grey-clr) !important;
}

.widget-header .w-back-btn img {
    height: 13px;
}

.widget-header .buy-sell-btn {
    display: flex;
    justify-content: space-between;
    border: 1px solid var(--main-black-clr);
    border-radius: 50px;
    padding: 8px 10px;
    width: 300px;
    
}

.widget-header .buy-sell-btn.sell-border {
    border-color: var(--main-black-clr) !important;
}

.widget-header .buy-sell-btn .h-btn {
    font-size: var(--font-size-14);
    font-weight: 600;
    padding: 2px 40px;
    border-radius: 50px;
    color: var(--white-clr);
    cursor: pointer;
    position: relative;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.widget-header .buy-sell-btn .buy-btn.buy-selected {
    background-color: var(--main-black-clr);
    color: var(--white-clr);
}

.widget-header .buy-sell-btn .sell-btn.sell-selected {
    background-color: var(--main-black-clr);
    color: var(--w-bg-clr);
}

.widget-header .menu-side {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
}

.widget-header .menu-side .translate-btn {
    cursor: pointer;
}

.w-h-back-btn {
    width: 30px;
    height: 30px;
    background-color: #f4f4f40f;
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.w-h-back-btn img {
    height: 10px;
}

.w-h-back-btn:hover {
    background-color: #f4f4f41f;
}

.icon-menu {
    --gap: 5px;
    --height-bar: 2px;
    --pos-y-bar-one: 0;
    --pos-y-bar-three: 0;
    --scale-bar: 1;
    --rotate-bar-one: 0;
    --rotate-bar-three: 0;
    width: 25px;
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    cursor: pointer;
    position: relative;
}

.bar {
    position: relative;
    height: var(--height-bar);
    width: 100%;
    border-radius: 0.5rem;
    background-color: var(--grey-clr);
}

.bar--1 {
    top: var(--pos-y-bar-one);
    transform: rotate(var(--rotate-bar-one));
    transition: top 200ms 100ms, transform 100ms;
}

.bar--2 {
    transform: scaleX(var(--scale-bar));
    transition: transform 150ms 100ms;
}

.bar--3 {
    bottom: var(--pos-y-bar-three);
    transform: rotate(var(--rotate-bar-three));
    transition: bottom 200ms 100ms, transform 100ms;
}

.check-icon:checked + .icon-menu > .bar--1 {
    transition: top 200ms, transform 200ms 100ms;
}

.check-icon:checked + .icon-menu > .bar--3 {
    transition: bottom 200ms, transform 200ms 100ms;
}

.check-icon:checked + .icon-menu {
    --pos-y-bar-one: calc(var(--gap) + var(--height-bar));
    --pos-y-bar-three: calc(var(--gap) + var(--height-bar));
    --scale-bar: 0;
    --rotate-bar-one: 45deg;
    --rotate-bar-three: -45deg;
}

/* Hamburger icon end */

/* Hamburger icon order situation */
.lobby-wrapper .hamburger-close {
    position: absolute;
    height: 25px;
    width: 25px;
    top: 30px;
    right: 30px;
    cursor: pointer;
}

.lobby-wrapper .hamburger-close .stick {
    height: 2px;
    width: 100%;
    position: absolute;
    background-color: var(--grey-clr);
    top: 48%;
    left: 0;
    transform: translateY(-50%);
}

.lobby-wrapper .hamburger-close .stick.s-bar-1 {
    transform: rotate(45deg);
}

.lobby-wrapper .hamburger-close .stick.s-bar-2 {
    transform: rotate(-45deg);
}

.widget-header .w-header-title span {
    color: var(--white-clr);
    font-weight: 400;
}

.widget-main .labels {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.widget-main .labels .label {
    color: var(--white-clr);
    font-size: var(--font-size-14);
    font-weight: 300;
}

.widget-main .labels .sub-label {
    color: var(--grey-clr);
    font-size: var(--font-size-12);
}

.widget-main label span {
    color: var(--green-main-clr);
}

.widget-main label .countdown {
    color: var(--green-main-clr);
}

label .tip {
    height: 13px;
    width: 13px;
    cursor: pointer;
    position: relative;
}

.labels .label .tip.email:hover::before {
    position: absolute;
    content: "Inicio de sesión rápido y fácil usando solo tu correo electrónico.";
    background-color: var(--grey-clr);
    font-size: var(--font-size-10);
    color: var(--white-clr);
    text-align: center;
    width: 200px;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    padding: 2px 10px;
    border-radius: 5px;
    z-index: 999;
}

.w-input-group {
    position: relative;
}

.widget-main .w-input-group input {
    margin-bottom: 0;
}

.widget-main .w-input-group input.x-number {
    font-size: var(--font-size-18);
    color: var(--white-clr);
    font-weight: 600;
}

/* Birthday picker */
input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 0;
    cursor: pointer;
    position: absolute;
    right: 10px;
}

.widget-body .custom-date-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
}

.widget-body .custom-date {
    width: 100%;
    padding-right: 40px; /* space for icon */
}

.widget-body .calendar-icon {
    position: absolute;
    right: 20px;
    top: 56%;
    transform: translateY(-50%);
    pointer-events: none;
    width: 16px;
    height: 16px;
    filter: invert(1);
}

.widget-main .currency-drop {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: space-between;
    top: 0px;
    right: 20px;
    gap: 10px;
    width: fit-content;
    height: 64px;
    user-select: none;
}

.widget-main .currency-drop.pay-currency {
    cursor: not-allowed;
}

.widget-main .currency-drop.get-currency {
    cursor: pointer;
}

.w-input-group .icon-drop {
    position: absolute;
    top: 38px;
    right: 20px;
    cursor: pointer;
}

.widget-main .currency-drop span {
    color: var(--white-clr);
    font-size: var(--font-size-20);
}

.countries-drop {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: space-between;
    top: 25px;
    right: 20px;
    gap: 10px;
    width: fit-content;
    cursor: pointer;
}

.w-payment-group {
    padding: 0 20px !important;
    height: 66px;
    cursor: pointer;
    user-select: none;
}

.payment-content-block .p-method-name {
    color: var(--white-clr);
    font-size: var(--font-size-14);
}

.payment-content-block .paymen-fees {
    color: var(--green-main-clr);
    font-size: var(--font-size-12);
    font-weight: 300;
    background-color: var(--green-main-clr-0-16);
    width: fit-content !important;
    padding: 0px 5px;
    border-radius: 5px;
}

.service-fees {
    background-color: var(--main-black-clr);
    padding: 9px 20px;
    border-radius: var(--border-radius-10);
    border: 1px solid var(--infos-bg-stroke);
    overflow: hidden;
    cursor: pointer;
}

.service-fees-drop span {
    font-size: var(--font-size-14);
    font-weight: 300;
    color: var(--w-bg-clr);
}

.service-fees .services-prices {
    max-height: 0;
    transition: max-height 0.3s ease-in-out;
}

.service-fees .services-prices.active {
    max-height: none;
}

.help-tip {
    cursor: pointer;
    user-select: none;
}

.s-f-icon {
    transition: transform 0.3s ease-in-out;
    cursor: pointer;
    user-select: none;
    height: 25px;
    width: 25px;
    padding: 5px;
}

.services-prices p span {
    font-weight: 400 !important;
    font-size: var(--font-size-14);
}

.services-prices .s-n {
    color: var(--grey-clr);
    display: flex;
}

.services-prices .s-p {
    color: var(--green-main-clr);
}

.widget-pop-up {
    background-color: var(--red-clr-0-16);
    backdrop-filter: blur(20px);
    color: var(--white-clr);
    position: absolute;
    top: 65px;
    left: 50%;
    transform: translateX(-50%);
    height: fit-content;
    width: 80%;
    padding: 20px;
    border: 1px solid var(--red-clr-0-16);
    border-radius: var(--border-radius-30);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.widget-pop-up.active {
    opacity: 1;
    visibility: visible;
    top: 75px;
    z-index: 1001;
}

.widget-pop-up .w-p-title {
    font-size: var(--font-size-18);
}

.widget-pop-up p {
    font-size: var(--font-size-12);
    color: var(--paragraph-white-clr);
}

.widget-pop-up .w-p-help {
    cursor: pointer;
}

.widget-pop-up .w-p-help span {
    font-size: var(--font-size-14);
}

.widget-pop-up .w-p-help span:hover {
    text-decoration: underline;
}

.widget-pop-up .w-p-help img {
    height: 15px;
}

/* Suspend banner */
.cancele-banner,
.sus-banner {
    position: absolute;
    background-color: var(--main-black-clr);
    border-top: 1px solid var(--main-black-clr);
    border-radius: var(--border-radius-30) var(--border-radius-30);
    z-index: 1005;
    height: 552px;
    width: 100%;
    bottom: -100%;
    left: 0;
    opacity: 0;
    padding: 50px 20px 20px;
    transition: all 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: space-between;
    transition: all 0.3s ease-in-out;
}

.cancele-banner .cancele-close,
.sus-banner .sus-close {
    background-color: #80808030;
    width: 30px;
    height: 30px;
    position: absolute;
    overflow: hidden;
    border-radius: 50px;
    top: 10px;
    right: 10px;
    cursor: pointer;
    transition: all 0.1s ease-in-out;
}

.sus-banner .sus-close:hover,
.cancele-banner .cancele-close:hover {
    transform: scale(1.1);
}

.sus-banner .sus-close:active,
.cancele-banner .cancele-close:active {
    transform: scale(1);
}

.sus-banner .sus-banner-icon-wrapper,
.cancele-banner .cancele-banner-icon-wrapper {
    height: 100px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    user-select: none;
}

.sus-banner .sus-banner-icon-wrapper img,
.cancele-banner .cancele-banner-icon-wrapper img {
    width: 100%;
    height: 100%;
    user-select: none;
}
.sus-banner .sus-banner-title,
.cancele-banner .cancele-banner-title {
    font-size: var(--font-size-32);
    font-weight: 700;
}

.sus-banner p,
.cancele-banner p {
    font-size: var(--font-size-14);
    color: var(--paragraph-white-clr);
    line-height: 22px;
    font-weight: 300;
}

.sus-banner.active,
.cancele-banner.active {
    opacity: 1;
    bottom: 0;
}

.fee-tooltip {
    background-color: var(--model-dark-clr);
    position: absolute;
    top: 0;
    left: 0;
    height: fit-content;
    width: 100%;
    border-radius: var(--border-radius-10);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
}

.fee-tooltip.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    z-index: 999;
}

.fee-tooltip .f-t-close {
    padding: 10px 20px;
    background-color: #2b2b2b2e;
    border-radius: 10px 10px 0 0;
}

.fee-tooltip .total-to-pay {
    padding: 10px 20px;
    background-color: #2b2b2b2e;
    border-radius: 0 0 10px 10px;
    margin-top: 20px;
}

.fee-tooltip .f-t-close .f-t-close-btn {
    cursor: pointer;
    width: 25px;
    height: 25px;
}

.fee-tooltip .price-row {
    padding: 20px 20px 0px 20px;
    color: var(--paragraph-white-clr);
    font-weight: 600;
}

.fee-tooltip p {
    padding: 0 20px;
    font-size: var(--font-size-14);
    color: var(--grey-clr);
    font-weight: 300;
}

.widget-main .w-main-btn-wrapper {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    padding: 0 30px;
}

.w-main-btn-wrapper .ref {
    font-size: var(--font-size-14);
    color: var(--white-clr);
}

.w-main-btn-wrapper .price {
    font-size: var(--font-size-14);
    color: var(--grey-clr);
}

.w-main-btn-wrapper .notice {
    font-size: var(--font-size-14);
    color: var(--grey-clr);
}

/* Input dropdow */
.widget-main .input-dropdown-wrapper {
    display: none;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%);
    width: 400px;
    height: 400px;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    border-radius: var(--border-radius-10);
    border: 1px solid var(--infos-bg-stroke);
    padding: 15px 0px;
    z-index: 10;
    overflow-y: scroll;
}
.widget-main .input-dropdown-wrapper.active {
    display: block;
}

.widget-main .input-dropdown-wrapper::-webkit-scrollbar {
    background-color: transparent;
    width: 3px;
}

.widget-main .input-dropdown-wrapper::-webkit-scrollbar-thumb {
    background-color: var(--infos-bg-stroke);
    border-radius: 10px;
}

.widget-main .input-dropdown-wrapper .currency-net {
    position: relative;
    padding: 15px 20px;
    cursor: pointer;
}

.widget-main .input-dropdown-wrapper .currency-net::before {
    position: absolute;
    content: "";
    display: block;
    width: 90%;
    height: 1px;
    background-color: var(--infos-bg-stroke);
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.widget-main .input-dropdown-wrapper .currency-net:last-child:before {
    display: none;
}

.widget-main .input-dropdown-wrapper .currency-net:hover {
    background-color: #ffffff08;
}

.widget-main .input-dropdown-wrapper .currency-net .currency-net-img-box {
    height: 40px;
}

.widget-main .input-dropdown-wrapper .currency-net .c-d-name {
    font-size: var(--font-size-16);
    color: var(--white-clr);
}

.widget-main .input-dropdown-wrapper .currency-net .c-d-net {
    font-size: var(--font-size-12);
    color: var(--grey-clr);
    width: 100px;
}

.widget-main .input-dropdown-wrapper .currency-net .c-d-net-right {
    font-size: var(--font-size-14);
    color: var(--green-main-clr);
    font-weight: 300;
    background-color: var(--green-main-clr-0-16);
    width: fit-content;
    padding: 0px 5px;
    border-radius: 5px;
}

/* Payment dropdown */
.pay-methods-drop-up {
    display: none !important;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    height: fit-content;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    border-radius: var(--border-radius-10);
    border: 1px solid var(--infos-bg-stroke);
    padding: 15px 0px;
}

.pay-methods-drop-up.open {
    display: block !important;
}

.drop-paymnet-block {
    position: relative;
    cursor: pointer;
    padding: 15px 20px;
    width: 100%;
}

.drop-paymnet-block::before {
    position: absolute;
    content: "";
    display: block;
    width: 90%;
    height: 1px;
    background-color: var(--infos-bg-stroke);
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.drop-paymnet-block:last-child:before {
    display: none;
}

.drop-paymnet-block:hover {
    background-color: #ffffff08;
}

.d-payment-img-box {
    height: 40px;
    width: 40px;
}

.d-payment-content-block .d-p-method-name {
    font-size: var(--font-size-16);
    color: var(--white-clr);
}

.d-payment-content-block .d-paymen-fees {
    color: var(--green-main-clr);
    font-size: var(--font-size-12);
    font-weight: 300;
    background-color: var(--green-main-clr-0-16);
    width: fit-content;
    padding: 0px 5px;
    border-radius: 5px;
}

.d-paymen-mini-methods img {
    width: 43px;
}

.d-payment-content-block .d-p-method-fees p.d-paymen-mini-methods,
.d-payment-content-block .d-p-method-fees p.d-paymen-fees {
    width: fit-content !important;
}

/* Widget authentication */
.auth-btn {
    width: fit-content;
    padding: 4px;
    border-radius: var(--border-radius-30);
    border: 1px solid var(--green-main-clr);
}

.auth-btn .auth {
    color: var(--white-clr);
    border-radius: var(--border-radius-30);
    padding: 9px 20px;
    font-weight: 500;
    cursor: pointer;
}

.auth-btn .auth.active {
    color: var(--black-clr);
    background-color: var(--green-main-clr);
}

.welcom-text {
    color: var(--white-clr);
    font-weight: 500;
    font-size: var(--font-size-18);
}

.assent {
    font-size: var(--font-size-14);
    color: var(--grey-clr);
    font-weight: 300;
}

.assent span {
    color: var(--green-main-clr);
}

.assent span:hover {
    text-decoration: underline;
}

.google-auth {
    background-color: var(--infos-bg-clr);
    color: var(--white-clr);
    height: 50px;
    border-radius: var(--border-radius-30);
}

.google-auth:hover {
    background-color: var(--model-dark-clr);
}

/* Registration */
.assent-agree .form-check {
    color: var(--grey-clr);
    font-weight: 300;
    border: 1px solid #2b2b2b;
    border-radius: var(--border-radius-10);
    padding: 20px;
    cursor: pointer;
}

.assent-agree .form-check .form-check-label {
    padding-right: 20px;
    cursor: pointer;
}

.assent-agree .form-check .form-check-input {
    background-color: var(--grey-dark-clr);
    border-color: var(--grey-clr);
    height: 0.1rem !important;
    width: 0.1rem !important;
}

.assent-agree .form-check .form-check-input:focus {
    border-color: var(--green-dark-main-clr) !important;
    box-shadow: 0 0 0 0.1rem rgba(159, 232, 112, 1) !important;
}

.assent-agree .form-check .form-check-input:checked {
    background-color: var(--green-dark-main-clr);
    border-color: var(--green-main-clr);
}

/* Swap information */
.swap-wrapper {
    color: var(--white-clr);
    width: 100%;
    padding: 10px 5px !important;
    border-radius: var(--border-radius-10);
}

.swap-wrapper img {
    height: 20px;
}

.swap-wrapper span {
    color: var(--white-clr);
    font-size: var(--font-size-14);
}

.fees-wrapper {
    border-radius: var(--border-radius-10);
    padding: 10px 20px !important;
}

.fees-wrapper .fees-wrapper-title {
    color: var(--white-clr);
    font-weight: 300;
}

.fees-wrapper .service-fee-wrap span {
    font-weight: 300;
    font-size: var(--font-size-14);
}

.fees-wrapper .service-fee-wrap .s-n {
    color: var(--grey-clr);
}

.fees-wrapper .service-fee-wrap .s-r {
    color: var(--green-main-clr);
}

.fees-wrapper .service-fee-wrap .s-i {
    color: var(--grey-clr);
}

.fees-wrapper .service-fee-wrap .s-r .one-currency {
    color: var(--grey-clr);
}

.widget-main .assent-block .form-check label {
    font-size: var(--font-size-14);
    color: var(--grey-clr);
    font-weight: 300;
    cursor: pointer;
}

.widget-main .assent-block .form-check label a {
    color: var(--green-main-clr) !important;
}

.widget-main .assent-block .form-check .form-check-input {
    background-color: var(--grey-dark-clr);
    border-color: var(--grey-clr);
    height: 1rem !important;
    width: 1rem !important;
    margin-top: 8px;
    cursor: pointer;
}

.widget-main .assent-block .form-check .form-check-input:focus {
    border-color: var(--green-dark-main-clr) !important;
    box-shadow: 0 0 0 0.1rem rgba(159, 232, 112, 1) !important;
}

.widget-main .assent-block .form-check .form-check-input:checked {
    background-color: var(--green-main-clr-0-16);
    border-color: var(--green-main-clr);
}

.lobby-wrapper .lobby-title {
    color: var(--white-clr);
    font-weight: 400;
    font-size: var(--font-size-18);
}

.lobby-wrapper .lobby-id-item,
.lobby-wrapper .lobby-currency-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
}

.lobby-wrapper .state-signal {
    position: absolute;
    right: -8px;
    bottom: -8px;
    width: 25px;
}

.order-situation .currency-in-lobby {
    /* height: 70px; */
    height: 45px;
}

.order-situation .state-signal {
    position: absolute;
    right: -7px;
    bottom: -7px;
    width: 24px;
}

.feedback-component .feed-title {
    color: var(--white-clr);
    font-size: var(--font-size-18);
}

.help-assistant a {
    color: var(--white-clr);
}

.help-assistant a:hover {
    text-decoration: underline;
}

/* Transaction-details */
.transaction-details {
    border-radius: var(--border-radius-10);
    padding: 10px;
}

.transaction-details p {
    color: var(--grey-clr);
    font-size: var(--font-size-14);
    font-weight: 300;
}

.transaction-details p span {
    color: var(--white-clr);
    font-weight: 400;
}

.copy-info p {
    color: var(--green-main-clr);
    font-weight: 300;
    font-size: var(--font-size-14);
}

.copy-btn {
    position: relative;
    background-color: var(--infos-bg-clr);
    width: 20px;
    height: 20px;
    border-radius: 5px;
    cursor: pointer;
}

.copy-btn::before {
    position: absolute;
    content: "Copied!";
    font-size: var(--font-size-12);
    color: var(--black-clr);
    top: -3px;
    left: -59px;
    background-color: var(--green-main-clr);
    padding: 5px;
    border-radius: 5px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease; /* Animate both properties */
}

.copy-btn.copied::before {
    opacity: 1;
    visibility: visible;
}

.copy-btn:active {
    background-color: var(--model-dark-clr);
}

.banking-info .info p {
    font-size: var(--font-size-14);
    color: var(--white-clr);
    font-weight: 300;
    width: 80%;
}

.banking-info .info p span {
    color: var(--grey-clr);
}

.traitment-alert {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}

.traitment-alert img {
    width: 18px;
}

.traitment-alert p {
    color: var(--white-clr) !important;
    font-size: var(--font-size-14);
    font-weight: 300;
    line-height: 23px;
}

.traitment-alert p span {
    color: var(--green-main-clr);
}

.order-control .o-c-btn {
    color: var(--white-clr);
    font-weight: 600;
    text-align: center;
    padding: 14px 0;
    border-radius: var(--border-radius-10);
    cursor: pointer;
}

.order-control .o-c-btn.cancel-order-button {
    background-color: rgba(255, 64, 64, 0.1);
    color: var(--red-clr);
}

.order-control .o-c-btn:active {
    background-color: var(--model-dark-clr);
}

.order-control .o-c-btn.cancel-order-button:active {
    background-color: rgba(196, 13, 13, 0.1);
}

/* Confirmation popup */
.confirmation-popup {
    display: none;
    position: absolute;
    background-color: #151515;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    padding: 20px;
    border-radius: var(--border-radius-10);
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.274);
    width: 225px;
}

.confirmation-popup p {
    color: var(--white-clr);
    font-size: var(--font-size-14);
    text-align: center;
}

.confirmation-popup .confirmation-btn {
    border: none;
    width: 100%;
    color: var(--white-clr);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.confirmation-popup .confirmation-btn.accept-btn {
    color: var(--red-clr) !important;
}

.confirmation-popup .confirmation-btn:active {
    opacity: 0.5;
}

/* KYC verifier style */
.lobby-wrapper .loby-id-content {
    color: var(--white-clr);
}

.lobby-wrapper p {
    color: var(--grey-clr);
    font-weight: 300;
    font-size: var(--font-size-14);
}

.kyc-browse-wrapper .kyc-title {
    color: var(--white-clr);
}

.kyc-id {
    padding: 10px 20px !important;
}

.kyc-id .custom-file {
    position: relative;
    display: inline-block;
    width: 100%;
}

.kyc-id .custom-file input {
    display: none;
}

.kyc-id .custom-file-label {
    display: inline-block;
}

.kyc-id .custom-file-label img {
    height: 25px;
    width: 63px;
}

.kyc-id .custom-file-label p,
.kyc-id .custom-file-label p span {
    font-size: var(--font-size-14);
    color: var(--grey-clr);
}

.kyc-id .custom-file-label p span {
    border-bottom: 1px solid;
    border-color: var(--infos-bg-stroke);
}

.kyc-iframe-wrapper .kyc-iframe {
    width: 100%;
    height: 100%;
    min-height: 540px;
    border: 2px solid #fff5f5;
    border-radius: 25px;
    overflow-y: scroll;
}

/* ****** Sell side styles ****** */
.widget-header .w-header-path {
    width: 300px;
    padding: 8px 10px 8px 0px;
}

.widget-header .w-h-path {
    color: var(--grey-clr);
    font-weight: 500;
}

.widget-main .w-main-title {
    color: var(--white-clr);
    font-weight: 600;
    font-size: var(--font-size-18);
}

.quick-time p {
    color: var(--paragraph-white-clr);
    font-weight: 300;
    font-size: var(--font-size-14);
}

.bank-branch {
    background-color: var(--infos-bg-clr);
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

.bank-branch .swift {
    color: var(--white-clr);
    font-weight: 500;
}

.bank-branch .iban {
    color: var(--grey-clr);
    font-weight: 300;
}

.widget-main .tip {
    color: var(--white-clr);
    font-size: var(--font-size-14);
}

.widget-main.sell .address-wallet p {
    color: var(--grey-clr);
    font-size: var(--font-size-14);
}

.widget-main .alert {
    border-color: transparent !important;
    padding: 10px 20px !important;
}

.widget-main .alert p {
    font-size: var(--font-size-14) !important;
    font-weight: 300 !important;
}

.widget-main .warning-alert {
    background-color: var(--warning-alert-bg-color);
    color: var(--orange-clr);
}

.widget-main .danger-alert {
    color: var(--red-clr);
    background-color: var(--danger-alert-bg-color);
}

.widget-main .alert p span{
    font-weight: 400;
    text-decoration: underline !important;
}

/* Widget login and signup */
.widget-body {
    position: relative;
    height: 100%;
    min-height: 430px;
}

#signIn,
#signUp {
    position: absolute;
    width: 100%;
    transition: transform 0.5s ease-in-out;
}

#signIn {
    transform: translateX(-120%);
}

#signUp {
    transform: translateX(110%);
}

.widget-body.show-signup #signIn {
    transform: translateX(-110%);
}

.widget-body.show-signup #signUp {
    transform: translateX(0);
}

.widget-main .country-select-wrapper {
    position: relative;
    width: 100%;
}

.widget-main .country-select-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--main-black-clr);
    border-radius: var(--border-radius-10);
    background: var(--black-clr);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
}

.widget-main .country-select-input img {
    width: 20px;
    height: 15px;
    border-radius: 2px;
}

.widget-main .country-select-dropdown {
    position: absolute;
    width: 100%;
    max-height: 300px;
    overflow-y: auto;
    background: var(--model-dark-clr);
    border: 1px solid var(--main-black-clr);
    border-radius: var(--border-radius-10);
    margin-top: 5px;
    display: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
}

.widget-main .country-select-dropdown::-webkit-scrollbar {
    background-color: var(--grey-clr);
    width: 2px;
}

.widget-main .country-select-dropdown::-webkit-scrollbar-thumb {
    background-color: var(--black-clr);
    border-radius: 10px;
}

.widget-main .country-search {
    padding: 5px;
}

.widget-main #countrySearch {
    width: 100%;
    padding: 8px;
    border: 1px solid var(--main-black-clr);
    border-radius: 6px;
    background-color: var(--black-clr);
    margin-bottom: 0;
}

.widget-main .country-item {
    padding: 5px 10px;
    display: flex;
    align-items: center;
    gap: 15px;
    cursor: pointer;
    transition: background 0.2s;
}

.widget-main .country-item:hover {
    background: var(--black-clr);
}

.widget-main .country-item img {
    width: 20px;
    height: 15px;
    flex-shrink: 0;
    border-radius: 2px;
}

.widget-main .country-item span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--white-clr);
    padding-top: 5px;
}

.widget-main .selected-country {
    display: flex;
    align-items: center;
    gap: 10px;
}

.widget-main .selected-country span {
    color: var(--white-clr);
    padding-top: 5px;
}

.widget-main .country-search input {
    outline: none;
}

/* Login code verification */
.otp-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 21px;
    position: relative;
    margin: 20px 0;
}

.otp-wrapper .real-otp-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.otp-wrapper .fake-otp-inputs {
    cursor: text;
}

.otp-wrapper .otp-box {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 300;
    color: var(--white-clr);
    width: 48px;
    height: 40px;
    margin-bottom: 0;
    background-color: var(--model-dark-clr);
    text-align: center;
    border: 1px solid var(--infos-bg-stroke);
    border-radius: 10px;
    animation: shake 0.3s ease-in-out;
    outline: 0px solid var(--green-main-clr-0-16) !important;
    transition: all 0.3s ease-in-out;
}

.otp-wrapper .otp-box:focus-visible {
 border-color: var(--green-main-clr) !important;
    box-shadow: 0 0 0 0.25rem var(--green-main-clr-0-16) !important;
    transition: all 0.3s ease-in-out;
}

.otp-wrapper .otp-box::before {
    position: absolute;
    content: "";
    height: 2px;
    width: 5px;
    background: var(--infos-bg-stroke);
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
}

.otp-wrapper .otp-box.full {
    outline: 1px solid var(--green-main-clr-0-16) !important;
}

.otp-wrapper .otp-error input {
    border-color: var(--red-clr) !important;
    animation: shake 0.3s ease-in-out;
}

@keyframes shake {
    0% {
        transform: translateX(0);
    }
    20% {
        transform: translateX(-5px);
    }
    40% {
        transform: translateX(5px);
    }
    60% {
        transform: translateX(-5px);
    }
    80% {
        transform: translateX(5px);
    }
    100% {
        transform: translateX(0);
    }
}

/* Resend button */
.re-send {
    font-size: var(--font-size-14);
    color: var(--w-bg-clr);
    font-weight: 500;
}

.re-send span {
    color: var(--green-main-clr);
    cursor: pointer;
}

/* old */

/* otp error effect animation */

/* QR Scanner style */
.QR-body {
    /* background-color: var(--model-dark-clr); */
    border-radius: var(--border-radius-30);
    padding: 20px;
}

.QR-header .QR-title {
    font-size: var(--font-size-18);
    font-weight: 600;
    color: var(--white-clr);
    line-height: 25px;
}

.QR-header p {
    color: var(--grey-clr);
    font-size: var(--font-size-14);
}

.QR-body .QR-wrapper {
    height: fit-content;
    width: fit-content;
    background: yellow;
    margin: 19px auto;
    border: 3px solid #ffffff;
    border-radius: 5px;
}

.QR-body p {
    color: var(--grey-clr);
}

.QR-body .QR-link-wrapper p {
    font-size: var(--font-size-12);
    color: var(--paragraph-white-clr);
}

.QR-body .QR-link-wrapper .QR-link-input input {
    border: 1px solid var(--grey-clr);
    padding: 10px;
    width: 50%;
}

.QR-body .QR-link-wrapper .QR-link-input .QR-link-btn {
    color: var(--black-clr);
    background-color: var(--white-clr);
    font-size: var(--font-size-14);
    font-weight: 500;
    padding: 11px;
    border-radius: var(--border-radius-10);
    border: 1px solid var(--white-clr);
    cursor: pointer;
    position: relative;
}

.QR-body .QR-link-wrapper .QR-link-input .QR-link-btn:hover {
    background-color: var(--model-light-shadow);
}

.QR-link-btn::before {
    position: absolute;
    content: "Copied!";
    font-size: var(--font-size-12);
    color: var(--black-clr);
    top: 50%;
    left: -59px;
    transform: translateY(-50%);
    background-color: var(--green-main-clr);
    padding: 5px;
    border-radius: 5px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.QR-link-btn.copied::before {
    opacity: 1;
    visibility: visible;
}

.QR-body .get-help {
    color: var(--green-main-clr);
}

.kyc-action .content-title {
    font-size: var(--font-size-20);
    font-weight: 600;
    color: var(--white-clr);
}

.kyc-action .content-wrapper p {
    color: var(--grey-clr);
    font-size: var(--font-size-14);
}

/* KYC Questions styles */

.widget-body .questions-wrapper .qst-item .label {
    color: var(--white-clr);
    font-size: var(--font-size-14);
    font-weight: 300;
}

.widget-body .questions-wrapper .qst-drop {
    background-color: var(--model-dark-clr);
    padding: 5px 10px;
    border: 1px solid var(--infos-bg-stroke);
    border-radius: var(--border-radius-10);
    color: var(--w-bg-clr);
    font-size: var(--font-size-14);
    font-weight: 400;
    cursor: pointer;
}

.widget-body .questions-wrapper .qst-item .qst-drop {
    position: relative;
}

.widget-body .questions-wrapper .qst-item .qst-dropdown {
    position: absolute;
    top: 35px;
    left: 0;
    background-color: var(--model-dark-clr);
    border: 1px solid var(--infos-bg-stroke);
    border-radius: var(--border-radius-10);
    z-index: 100;
    display: none;
    opacity: 0;
    transform: translateY(-37px);
}

.widget-body .questions-wrapper .qst-item .qst-dropdown.open-up {
    top: -180px !important;
}

.widget-body .questions-wrapper .qst-item .qst-dropdown.show {
    display: block;
    opacity: 1;
    transform: translateY(0px);
    transition: all 0.3s ease-in-out;
}

.widget-body .questions-wrapper .qst-item .qst-dropdown .dropdown-item {
    padding: 5px 10px;
    color: var(--w-bg-clr);
    font-size: var(--font-size-14);
    font-weight: 400;
    cursor: pointer;
}

.widget-body .questions-wrapper .qst-item .qst-drop img {
    transition: all 0.3s ease-in-out;
}

.widget-body .questions-wrapper .qst-item .qst-drop img.down {
    transform: rotate(-180deg);
}

.widget-body
    .questions-wrapper
    .qst-item
    .qst-dropdown
    .dropdown-item:first-child:hover {
    border-radius: 10px 10px 0 0;
}

.widget-body
    .questions-wrapper
    .qst-item
    .qst-dropdown
    .dropdown-item:last-child:hover {
    border-radius: 0 0 10px 10px;
}

.widget-body .questions-wrapper .qst-item .qst-dropdown .dropdown-item:hover,
.widget-body .questions-wrapper .qst-drop:hover {
    background-color: var(--black-clr);
}

.widget-body .icon-wrapper {
    height: 100px;
    overflow: hidden;
}

/* Responsive widget */
@media screen and (min-width: 1400px) {
}

@media screen and (min-width: 1200px) {
}

@media screen and (max-width: 1199px) {
}

@media screen and (max-width: 991px) {
}

@media screen and (max-width: 767px) {
}

@media screen and (max-width: 576px) {
    .widget-main {
        min-width: 100% !important;
    }

    .service-fees-drop span {
        font-size: var(--font-size-12) !important;
    }

    .widget-header .buy-sell-btn {
        width: 243px !important;
    }

    .widget-main .input-dropdown-wrapper,
    .pay-methods-drop-up {
        width: 326px !important;
    }

    .payment-content-block .paymen-fees {
        width: fit-content !important;
    }

    .fee-tooltip {
        top: -20px !important;
    }

    .widget-header .buy-sell-btn {
        width: 80% !important;
    }
}

@media screen and (max-width: 425px) {
    .otp-wrapper {
        gap: 15px !important;
    }
}

@media screen and (max-width: 360px) {
    .widget-header .buy-sell-btn {
        width: 215px !important;
    }

    .widget-header .buy-sell-btn .h-btn {
        padding: 2px 17px !important;
    }
}

@media screen and (max-width: 375px) {
    .otp-wrapper {
        padding: 10px 0px !important;
    }

    .otp-wrapper .otp-box {
        width: 39px !important;
        height: 35px !important;
    }
}

@media screen and (max-width: 360px) {
    .widget-header .buy-sell-btn {
        width: 215px !important;
    }

    .widget-header .buy-sell-btn .h-btn {
        padding: 2px 17px !important;
    }
}

@media screen and (max-width: 320px) {
    .otp-wrapper .otp-box {
        width: 39px !important;
        height: 35px !important;
    }

    .otp-wrapper {
        gap: 4px !important;
        padding: 10px 0px !important;
    }
}

/* loading by med  */
#loading-widget {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    background-color: rgba(83, 83, 83, 0.144);
    /* margin-top: -20px;
    margin-left: -20px; */
    display: flex;
    align-items: center;
    justify-content: center;
}

.loading-widget {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.loading-spinner {
    width: 50px;
    height: 50px;
    border: 6px solid #00a86b;
    border-top: 6px solid #fff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

/* Loading icon for widget added by med  */
.kyc-simple-loading {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Reuse existing spinner style */
.kyc-loading-spinner {
    width: 60px;
    height: 60px;
    border: 5px solid rgba(0, 168, 107, 0.2);
    border-top: 5px solid #00a86b;
    border-radius: 50%;
    animation: kyc-spin 1.2s linear infinite;
}

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

/* KYC loading status added by Med  */
/* Main wrapper */
.kyc-success-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 500px;
}

/* Loading overlay */
.kyc-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 10;
    transition: opacity 0.5s ease;
    animation: hideOverlay 0s linear 3s forwards;
}

.kyc-loading-content {
    text-align: center;
    padding: 20px;
}

.kyc-loading-spinner {
    width: 60px;
    height: 60px;
    border: 5px solid rgba(0, 168, 107, 0.2);
    border-top: 5px solid #00a86b;
    border-radius: 50%;
    animation: kyc-spin 1.2s linear infinite;
    margin: 0 auto 20px;
}

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

.kyc-loading-text {
    font-size: 18px;
    font-weight: 600;
    color: #00a86b;
    margin-bottom: 15px;
}

.kyc-progress-container {
    width: 80%;
    max-width: 250px;
    height: 8px;
    background: rgba(0, 168, 107, 0.1);
    border-radius: 10px;
    overflow: hidden;
    margin: 15px auto;
}

.kyc-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #00a86b, #00d68f);
    width: 0%;
    border-radius: 10px;
    animation: fillProgress 3s linear forwards;
}

@keyframes fillProgress {
    from {
        width: 0%;
    }
    to {
        width: 100%;
    }
}

/* Success content */
.kyc-success-content {
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.5s ease;
    animation: showSuccess 0.5s ease 3s forwards;
}

/* Button container at bottom */
.kyc-button-container {
    position: absolute;
    bottom: 20px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    z-index: 2;
}

.kyc-success-button {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0s ease, visibility 0s linear 0.5s;
    animation: showButton 0.5s ease 5.3s forwards;
}

@keyframes hideOverlay {
    to {
        opacity: 0;
        pointer-events: none;
    }
}

@keyframes showSuccess {
    to {
        opacity: 1;
        transform: translateY(0);
        visibility: visible;
    }
}

@keyframes showButton {
    to {
        opacity: 1;
        visibility: visible;
    }
}

.w-main-btn {
    background: #00a86b;
    color: white;
    padding: 12px 24px;
    border-radius: 30px;
    text-align: center;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.w-main-btn span {
    display: block;
    padding: 8px 16px;
}

@media screen and (max-width: 576px) {
    .kyc-success-wrapper {
        min-height: 573px;
    }

    .kyc-success-content {
        padding: 15px;
    }

    .kyc-button-container {
        bottom: 15px;
    }

    .w-main-btn-wrapper {
        width: 90% !important;
    }

    .widget-main .w-main-btn-wrapper {
        padding: 0 !important;
    }

    .widget-header .buy-sell-btn .h-btn {
        padding: 2px 26px !important;
    }

    .widget-header .buy-sell-btn {
        width: 75% !important;
    }

    .widget-header .menu-side {
        gap: 16px !important;
    }

    .otp-wrapper .otp-box {
        width: 43px !important;
        height: 39px !important;
        font-size: var(--font-size-14);
    }

}