.modal {
	position: fixed;
	top: 0;
	display: none;
	width: 100%;
	height: 100%;
	overflow-x: hidden;
	overflow-y: auto;
	outline: 0;
	right: 0;
	left: 0;
	z-index: 101;
}
.fade {
	transition: opacity .15s linear;
}
.modal-dialog {
	position: relative;
	width: auto;
	margin: 1.75rem;
	pointer-events: none;
}
.modal-dialog-centered {
	display: flex;
	align-items: center;
	min-height: calc(100% - 1.75rem*2);
}
@media (min-width: 576px) {
.modal-dialog {
	max-width: 500px;
	margin-right: auto;
	margin-left: auto;
}
}
.modal.fade .modal-dialog {
	transition: transform .3s ease-out;
	transform: translate(0, -50px);
}
.modal-content {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	pointer-events: auto;
	background-color: #fff;
	background-clip: padding-box;
	outline: 0;
	box-shadow: 0 4px 100px 0 #00000014;
	border-radius: 14px;
}
.modal-header {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	padding: 15px;
	border-bottom: 1px solid #ccc;
	border-top-left-radius: 15px;
	border-top-right-radius: 15px;
	justify-content: space-between;
}
.modal-title {
	line-height: 32px;
	font-size: 1.25rem !important;
	margin: 0;
}
.btn-close {
	--bs-btn-close-color: #000;
	--bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
	--bs-btn-close-opacity: 0.5;
	--bs-btn-close-hover-opacity: 0.75;
	--bs-btn-close-focus-shadow: 0 0 0 0.25rem rgba(67, 56, 202, 0.25);
	--bs-btn-close-focus-opacity: 1;
	--bs-btn-close-disabled-opacity: 0.25;
	--bs-btn-close-white-filter: invert(1) grayscale(100%) brightness(200%);
	box-sizing: content-box;
	width: 1em;
	height: 1em;
	padding: .25em .25em;
	color: var(--bs-btn-close-color);
	background: rgba(0,0,0,0) var(--bs-btn-close-bg) center/1em auto no-repeat;
	border: 0;
	border-radius: .375rem;
	opacity: var(--bs-btn-close-opacity);
}
.modal-body {
	position: relative;
	flex: 1 1 auto;
	padding: 15px;
}
.modal-footer {
	display: flex;
	flex-shrink: 0;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	padding: 15px;
	background-color: #fff;
	border-top: 1px solid rgba(0, 0, 0, 0.175);
	border-bottom-right-radius: 15px;
	border-bottom-left-radius: 15px;
}
.form-label {
	margin-bottom: .5rem;
}
.form-select {
	--bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%231f2937' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
	display: block;
	width: 100%;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--bs-body-color);
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-color: #fff;
	background-image: var(--bs-form-select-bg-img),var(--bs-form-select-bg-icon, none);
	background-repeat: no-repeat;
	background-size: 16px 12px;
	border: 1px solid var(--color-border);
	border-radius: 8px;
	transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
[dir="rtl"] .form-select {
	padding: .375rem .75rem .375rem 2.25rem;
	background-position: left .75rem center;
}
.modal-body input {
	border: 1px solid var(--color-border);
	padding: 9px;
	border-radius: 8px;
}
.modal-body {
	display: flex;
	flex-direction: column;
	gap: 15px;
}
/* login register */
.login-block .title-text img {
	margin: 0 auto;
	display: block;
}
.title-text {
	text-align: center;
}
.login-block {
	max-width: 380px;
	margin: 0 auto;
}
.login-block .login-block {

	min-height: 900px;
}
#loginModal .modal-dialog {
	max-width: 380px !important;
}
#loginModal .modal-body {
	padding: 0 !important;
}
#loginModal .backtosite {
	display: none;
}
#loginModal .title-text {
	display: none !important;
}
.slide-controls > label::after, .slide-controls > label::before {
	display: none !important;
}
::selection{
  background: #fa4299;
  color: #fff;
}
#reg_phone::placeholder {
  color: #eee;
  opacity: 1; /* Firefox */
}

#reg_phone::-ms-input-placeholder { /* Edge 12-18 */
  color: #eee;
}
.login-block .wrapper {
	overflow: hidden;
	max-width: 390px;
	background: #fff;
	padding: 30px;
	border-radius: 15px;

	direction: rtl;
}
.login-block .wrapper .title-text{
  width: 100%;
}
.login-block .wrapper .title {
	width: 100%;
	font-size: 25px;
	font-weight: 600;
	padding-top: 15px;
	text-align: center;
	transition: all 0.6s cubic-bezier(0.68,-0.55,0.265,1.55);
	margin-bottom: 0;
}
.title.login p {
	font-size: 14px;
	font-weight: normal;
	margin-bottom: 0;
}
.title-text img {
	margin: 0 auto;
	display: block;
}
#register_form p {
	text-align: center;
	font-size: 14px;
	padding: 15px 0;
}
#send_code_res {
	padding: 15px 0;
	float: right;
	width: 100%;
	text-align: center;
	font-size: 13px;
	display: none !important;
}

.login-block .wrapper .slide-controls{
  position: relative;
  display: flex;
  height: 50px;
  width: 100%;
  overflow: hidden;
  margin: 30px 0 10px 0;
  justify-content: space-between;
  border: 1px solid var(--color-border);
  border-radius: 5px;
}
.slide-controls .slide {
	height: 100%;
	width: 100%;
	color: #000;
	font-size: 18px;
	font-weight: 500;
	text-align: center;
	line-height: 48px !important;
	cursor: pointer;
	z-index: 1;
	transition: all 0.6s ease;
	padding: 0 !important;
}
.slide-controls label.signup{
  color: #000;
}
.slide-controls .slider-tab {
	position: absolute;
	height: 100%;
	width: 50%;
	left: 0;
	z-index: 0;
	border-radius: 5px;
	background: -webkit-linear-gradient(left, #a445b2, #7B08B0);
	transition: all 0.6s cubic-bezier(0.68,-0.55,0.265,1.55);
}
#login-phone:checked ~ .slider-tab{
  left: 50%;
}
#login-phone:checked ~ label.phone{
  color: #fff;
  cursor: default;
  user-select: none;
}
#login-email:checked ~ label.email {
	color: #fff;
	cursor: default;
	user-select: none;
}
#login-phone:checked ~ label.login{
  color: #000;
}
#login-email:checked ~ label.phone{
  color: #000;
}
#login-email:checked ~ label.email{
  cursor: default;
  user-select: none;
}
.login-block .wrapper .form-container{
  width: 100%;
  overflow: hidden;
}
.form-container .form-inner{
  display: flex;
  width: 100%;
}
.form-container .form-inner form{
  width: 100%;
  transition: all 0.6s cubic-bezier(0.68,-0.55,0.265,1.55);
}
.form-inner form .field {
	width: 100%;
	margin-top: 20px;
	float: right;
}
.rename_number {
	margin: 0 auto;
	display: block;
	text-align: center;
	float: unset !important;
	border: 0;
	padding: 8px;
	background: unset;
	font-size: 15px;
	color: #040404;
	font-weight: 500;
	cursor: pointer;
}
.form-inner form .field input {
	font-size: 17px;
	transition: all 0.3s ease;
	direction: rtl;
	width: 100%;
	padding: 12px;
	border: 2px solid var(--color-border);
	outline: none;
	border-radius: 10px;
	font-weight: 700;
	height: auto;
	background: #fff;
	accent-color: blue;
	text-align: center;
}
.form-inner form .field input[type="text"] {
	border: 2px solid #48aa43 !important;
	background: #fff !important;
	box-shadow: 0 4px 100px 0 #00000017;
	color: #5c5c5c !important;
	border-radius: 20px !important;
}
input[type="button"] {
	background: #01796f !important;
	border-radius: 20px !important;
	color: #fff;
}
.form-inner form .field input:focus{
  border-color: #fc83bb;
  /* box-shadow: inset 0 0 3px #fb6aae; */
}
.form-inner form .field input::placeholder{
  color: #999;
  transition: all 0.3s ease;
}
form .field input:focus::placeholder{
  color: #b3b3b3;
}
.form-inner form .pass-link{
  margin-top: 5px;
}
.form-inner form .signup-link-sp{
  text-align: center;
  margin-top: 30px;
}
.form-inner form .pass-link a,
.form-inner form .signup-link-sp a{
  color: #fa4299;
  text-decoration: none;
}
.form-inner form .pass-link a:hover,
.form-inner form .signup-link a:hover{
  text-decoration: underline;
}
form .btn{
  width: 100%;
  border-radius: 5px;
  position: relative;
  overflow: hidden;
}
.disabled-button {
	background: #ccc !important;
	pointer-events: none;
}
#timer {
	margin: 0;
	color: #c4b187;
	font-weight: bold;
}
form .btn .btn-layer {
	height: 100%;
	width: 300%;
	position: absolute;
	left: -100%;
	background: -webkit-linear-gradient(right, #a445b2, #7B08B0, #a445b2, #fa4299);
	border-radius: 5px;
	transition: all 0.4s ease;
}
.woocommerce form.login, .woocommerce form.register {
	border: 0 !important;
	padding: 0 !important;
	margin: 0;
	text-align: right;
	border-radius: 5px;
}
form .btn:hover .btn-layer{
  left: 0;
}
form .btn input[type="button"] {
	height: 100%;
	width: 100%;
	z-index: 1;
	position: relative;
	background: #c4b187;
	border: none;
	color: #fff;
	padding-left: 0;
	border-radius: 5px;
	font-size: 20px;
	font-weight: 500;
	cursor: pointer;
}

.backtosite a{
    text-decoration: unset;
    color: black;
}
.backtosite {
	margin: 2px;
	padding: 10px 25px;
	border-radius: 10px;
	text-align: center;
}
#login_btn_box {
	padding: 0px !important;
}
#verify_reg_code_field {
	padding: 0 !important;
}
.rp-btn{
  cursor: pointer;
  text-decoration: unset;
}
#rp_number{
  padding: 5px 20px;
  width: 100%;
  text-align: center;
  border-radius: 10px;
  outline: none;
  border: solid 1px var(--color-border);
  margin-bottom: 20px;
}
#rp_send_link{
  background: #d63384;
  border: none;
  padding: 5px 20px;
  border-radius: 10px;
  color: white;
}
.modal-body{
  text-align: center !important; 
}
#send_login_code{
  border: unset;
  background: linear-gradient(to left,#f96c85,#995bd7);
  padding: 5px 20px;
  border-radius: 5px;
  margin-top: 5px;
  color: white;
  font-size: 14px;
  font-weight: initial;
}
.modal-title {
	color:#000;
}
#loginModal {
	top: 25% !important;
}
.modal-content {
	border-radius: 15px !important;
}
.login-block .wrapper {
	background: #fff;
	color: #333;
}
#custom-toast {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    background-color: #f44336;
    color: white;
    padding: 12px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    font-size: 14px;
    display: none;
    animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

@keyframes fadein {
    from {opacity: 0; top: 10px;}
    to {opacity: 1; top: 20px;}
}

@keyframes fadeout {
    from {opacity: 1; top: 20px;}
    to {opacity: 0; top: 10px;}
}
/*=> end login style */