@use '../utils' as *;

/*----------------------------------------*/
/* investment plan css
/*----------------------------------------*/
.plan-profit-contant-wrtapper {
    max-width: 550px;
}
.plan-profit-form {
    .single-input {
        .nice-select {
            margin-bottom: 20px;
            width: 100%;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-box;
            display: -webkit-flex;
            @include flexbox();
            align-items: center;
            float: none;
            background: rgba($white, $alpha: 0.1);
            @include border-radius(100px);
            height: 60px;
            padding: 0 30px;
            border: 0;
            font-weight: 500;
            position: relative;
            @media #{$xs} {
                height: 60px;
                padding: 0 25px;
            }
            &:before {
                position: absolute;
                content: "";
                inset: 0;
                @include border-radius(100px);
                padding: 1px;
                background: linear-gradient(178deg, rgba(255, 255, 255, 0) 0%, rgba($white, $alpha: 0.4) 100%);
                -webkit-mask: linear-gradient(var(--td-white) 0 0) content-box, linear-gradient(var(--td-white) 0 0);
                -webkit-mask-composite: xor;
                mask-composite: exclude;
                z-index: -1;
            }
            .current {
                text-align: left;
                font-size: 14px;
                position: relative;
                color: var(--td-white);
            }
            .list {
                transform-origin: center center;
                -webkit-transform: scale(1) translateY(0px);
                -moz-transform: scale(1) translateY(0px);
                -ms-transform: scale(1) translateY(0px);
                -o-transform: scale(1) translateY(0px);
                transform: scale(1) translateY(0px);
                @include transform(scale(1) translateY(0));
                width: 100%;
                @include border-radius(30px);
                background-color: rgb(50, 50, 53);
                backdrop-filter: blur(22px);
                padding: 12px;
            }
            &::after {
                inset-inline-end: 40px;
                width: 8px;
                height: 8px;
                border-bottom: 1.5px solid var(--td-text-primary);
                border-inline-end: 1.5px solid var(--td-text-primary);
                font-size: 16px;
                content: "";
                position: absolute;
                top: 50%;
                transform: translateY(-50%) rotate(45deg);
                border: 5px solid;
                border-top-color: transparent;
                border-left-color: transparent;
                background-color: transparent;
                transition: all ease-in-out 0.2s;
                margin-top: -2px;
                -webkit-border-radius: 2px;
                -moz-border-radius: 2px;
                -o-border-radius: 2px;
                -ms-border-radius: 2px;
                border-radius: 2px;
                @media #{$xs} {
                    inset-inline-end: 30px;
                }
            }
            .option {
                font-size: 14px;
                line-height: 40px;
                min-height: 40px;
                color: var(--td-white);
                @include border-radius(10px);
                padding: 0 10px;
                &.selected {
                    font-weight: 500;
                    &.focus {
                        background-color: rgba($color: $white, $alpha: 0.08);
                    }
                }
                &:hover {
                    background-color: rgba($color: $white, $alpha: 0.08);
                }
            }
        }
        input {
            background: rgba($white, $alpha: 0.1);
            @include border-radius(100px);
            height: 60px;
            width: 100%;
            padding: 0 30px;
            color: var(--td-white);
            border: none;
            font-weight: 500;
            position: relative;
            outline: none;
            @media #{$xs} {
                height: 60px;
                padding: 0 25px;
            }
            &::after {
                position: absolute;
                content: "";
            }
            @include td-placeholder {
                color: var(--td-white);
            }
            &:focus {
                border: none;
            }
        }
        .input-field {
            position: relative;
            &:before {
                position: absolute;
                content: "";
                inset: 0;
                @include border-radius(100px);
                padding: 1px;
                background: linear-gradient(178deg,rgba(255, 255, 255, 0) 0%, rgba($white, $alpha: 0.4) 100%);
                -webkit-mask: linear-gradient(var(--td-white) 0 0) content-box, linear-gradient(var(--td-white) 0 0);
                -webkit-mask-composite: xor;
                mask-composite: exclude;
                z-index: -1;
            }
            .icon {
                position: absolute;
                top: 50%;
                inset-inline-end: 34px;
                transform: translateY(-50%);
                @media #{$xs} {
                    inset-inline-end: 24px;
                }
            }
        }
    }
    .input-description {
        color: var(--td-secondary);
        font-weight: 500;
        font-size: 12px;
        margin-top: 14px;
        margin-bottom: 14px;
    }
    .investment-gradient-btn {
        margin-top: 35px;
        .site-btn {
            @media #{$xs} {
                height: 52px;
            }
        }
    }
}
.plan-profit-eath {
	@media #{$xs,$sm,$md} {
		padding-top: 25px;
	}
}
.plan-profit-eath .circles_wrap {
	margin: auto;
    width: 633px;
    height: 633px;
	position: relative;
	background-position: center;
	background-size: contain;
	@include border-radius(50%);
	background-repeat: no-repeat;
	@media #{$xxl} {
		width: 550px;
		height: 550px;
	}
	@media #{$xl} {
		width: 550px;
		height: 550px;
	}
	@media #{$sm} {
		width: 430px;
		height: 430px;
	}
	@media #{$xs,$lg} {
		width: 400px;
		height: 400px
	}
	@media #{$xxs} {
		width: 260px;
		height: 260px;
	}
}
.plan-profit-eath {
	.coin_wrap {
		.dot {
			display: block;
			position: absolute;
			content: "";
			top: calc(50% - 1px);
			left: 50%;
			width: 50%;
			height: 1px;
			background: transparent;
			transform-origin: left;
			&::after {
				position: absolute;
				content: "";
				width: 10px;
				height: 10px;
				-webkit-border-radius: 50%;
				-moz-border-radius: 50%;
				border-radius: 50%;
				top: -26px;
				right: -4px;
				background-color: transparent;
			}
		}
	}
	.circle {
		position: absolute;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		border: 1px solid transparent;
		@include border-radius(50%);
		&.circle0 {
			width: 100%;
			height: 100%;
			z-index: 9;
		}
		&.circle1 {
			width: 88%;
			height: 88%;
			z-index: 9;
		}
		&.circle2 {
			width: 78%;
			height: 78%;
		}
		&.circle3 {
			width: 68%;
			height: 68%;
			.coin_wrap {
				.dot-1 {
					display: block;
					position: absolute;
					content: "";
					top: calc(50% - 1px);
					left: 50%;
					width: 50%;
					height: 1px;
					background: transparent;
					transform-origin: left;
					&::after {
						position: absolute;
						content: "";
						width: 10px;
						height: 10px;
						-webkit-border-radius: 50%;
						-moz-border-radius: 50%;
						border-radius: 50%;
						top: -26px;
						right: -4px;
						background-color: transparent;
						-webkit-transform: rotate(-242deg);
						transform: rotate(-242deg);
					}
				}
			}
			.coin {
				&:first-of-type {
					-webkit-transform: rotate(-60deg);
					transform: rotate(-60deg);
				}
			}
		}
		&.circle4 {
			width: 55%;
			height: 55%;
			.coin_wrap {
				-webkit-animation: circleMove 18s infinite linear;
				animation: circleMove 18s infinite linear;
				.coin {
					&:nth-child(2) {
						-webkit-transform: rotate(180deg);
						transform: rotate(180deg);
					}
				}
				.dot-1 {
					display: block;
					position: absolute;
					content: "";
					top: calc(50% - 1px);
					left: 50%;
					width: 50%;
					height: 1px;
					background: transparent;
					transform-origin: left;
					-webkit-transform: rotate(-50deg);
					transform: rotate(-50deg);

					&::after {
						position: absolute;
						content: "";
						width: 10px;
						height: 10px;
						-webkit-border-radius: 50%;
						-moz-border-radius: 50%;
						border-radius: 50%;
						top: -26px;
						right: -4px;
						background-color: transparent;
					}
				}
			}
			img {
				width: 24% !important;
				max-width: 54px !important;
				-webkit-animation-duration: 18s;
				animation-duration: 18s;
			}
		}
		&.circle5 {
			width: 40%;
			height: 40%;
			.coin_wrap {
				-webkit-animation: circleMove 22s infinite linear;
				animation: circleMove 22s infinite linear;
				.dot-1 {
					display: block;
					position: absolute;
					content: "";
					top: calc(50% - 1px);
					left: 50%;
					width: 50%;
					height: 1px;
					background: transparent;
					transform-origin: left;
					-webkit-transform: rotate(-50deg);
					transform: rotate(-50deg);
					&::after {
						position: absolute;
						content: "";
						width: 10px;
						height: 10px;
						-webkit-border-radius: 50%;
						-moz-border-radius: 50%;
						border-radius: 50%;
						top: -26px;
						right: -4px;
						background-color: transparent;
					}
				}
			}
			img {
				width: 100% !important;
				max-width: 54px !important;
				-webkit-animation-duration: 22s;
				animation-duration: 22s;
			}
		}
	}
	.circle_center {
		position: absolute;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		width: 27%;
		max-width: 80px;
		@media #{$xs} {
			width: 18%;
		}
	}
	.coin_wrap {
		position: relative;
		height: 100%;
		width: 100%;
		@include flexbox();
		;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-animation: circleMove 15s infinite linear;
		animation: circleMove 15s infinite linear;
	}
	.coin {
		width: 100%;
		height: auto;
		-webkit-transform-origin: center;
		transform-origin: center;
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
		position: absolute;

		img {
			width: 95px;
			-webkit-animation-duration: 15s;
			animation-duration: 15s;
			-webkit-animation-timing-function: linear;
			animation-timing-function: linear;
			-webkit-animation-iteration-count: infinite;
			animation-iteration-count: infinite;
		}

		&:first-of-type {
			-webkit-transform: rotate(0deg);
			transform: rotate(0deg);

			img {
				width: 17%;
				max-width: 55px;
				-webkit-animation-name: imageMove1;
				animation-name: imageMove1;
			}
		}

		&:nth-of-type(2) {
			-webkit-transform: rotate(60deg);
			transform: rotate(60deg);

			img {
				width: 17%;
				max-width: 53px;
				-webkit-animation-name: imageMove2;
				animation-name: imageMove2;
			}
		}

		&:nth-of-type(3) {
			-webkit-transform: rotate(120deg);
			transform: rotate(120deg);

			img {
				width: 15%;
				max-width: 55px;
				-webkit-animation-name: imageMove3;
				animation-name: imageMove3;
			}
		}

		&:nth-of-type(4) {
			-webkit-transform: rotate(180deg);
			transform: rotate(180deg);

			img {
				width: 18%;
				max-width: 70px;
				-webkit-animation-name: imageMove4;
				animation-name: imageMove4
			}
		}

		&:nth-of-type(5) {
			-webkit-transform: rotate(240deg);
			transform: rotate(240deg);

			img {
				width: 100%;
				max-width: 55px;
				-webkit-animation-name: imageMove5;
				animation-name: imageMove5;
			}
		}

		&:nth-of-type(6) {
			-webkit-transform: rotate(300deg);
			transform: rotate(300deg);

			img {
				width: 12%;
				max-width: 70px;
				-webkit-animation-name: imageMove6;
				animation-name: imageMove6;
			}
		}
	}
}
