@import"https://v1.fontapi.ir/css/SFProDisplay";

#app {
    display: flex;
}

a {
    color: var(--tg-theme-link-color, #6ab3f3);
}

.wrapper {
    height: var(--tg-viewport-height, 100vh);
    width: var(--tg-viewport-width, 100vh);
    /* position: fixed;  */
    color: var(--tg-theme-text-color, #fff);
}

.wrapper--state {
    display: flex;
    align-items: center;
    justify-content: center;
    place-content: center;
}

.wrapper--state section {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 24px;
    justify-content: center;
    overflow: hidden;
    padding: 32px
}

.state-list {
    margin: 0;
    overflow-wrap: anywhere;
    text-align: center;
    color: var(--tg-theme-hint-color, #aaa);
    font-size: 17px;
    font-weight: 400;
}

.state-list > :first-child {
    font-size: 20px;
    font-weight: 600;
    color: var(--tg-theme-text-color, #fff);
    margin-bottom: 6px;
}

.sticker {
    width: 150px;
    height: 150px;
    overflow: hidden;
    margin: 0px auto;
    outline: none;
}

.wrapper__content {
    position: relative;
    padding: 1.65rem 1rem 1rem;
    display: flex;
    height: 100%;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 1.2rem;
}

.btn {
    background: var(--tg-theme-button-color, #5288c1) !important;
    color: var(--tg-theme-button-text-color, #fff) !important;
    overflow: hidden;
    gap: 6px;
    height: 36px;
    min-width: 34px;
    padding: 8px 12px;
    cursor: pointer;
    isolation: isolate;
    position: relative;
    transition: opacity .15s ease-out;
    align-items: center;
    border: none;
    border-radius: 20px;
    box-sizing: border-box;
    display: inline-flex;
    justify-content: center;
    text-decoration: none;
}

.btn.destructive {
    background: var(--tg-theme-destructive-text-color, #ec3942) !important;
}

.btn-text {
    font-size: 15px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-radius: 20px;
    margin: 0;
}

.btn-icon-wrapper {
    align-items: center;
    display: flex;
    justify-content: center;
}

.ridehistory {
	width: 100%;
	display: flex;
	padding-left: 1rem;
	padding-right: 1rem;
	flex-direction: column;
	align-items: center;
	gap: .775rem;
	flex-shrink: 0;
	padding-bottom: 9rem;
}

.ridehistory--empty {
	place-content: center;
}

.ridehistory__title {
	display: flex;
	padding-bottom: .275rem;
	align-items: flex-start;
	align-self: stretch;
	color: var(--tg-theme-text-color, #fff);
	font-family: SF Pro Display;
	font-size: 1.08rem;
	font-style: normal;
	font-weight: 700;
	line-height: 1.3125rem;
	letter-spacing: .01438rem;
}

.ridehistory__title--empty {
	display: flex;
	place-content: center;
	height: 100%;
	align-items: center;
	justify-content: center;
}

.ridehistory__item {
	width: 100%;
	display: flex;
	padding: .625rem .9375rem;
	align-items: center;
	gap: .625rem;
	flex: 1 0 0;
	border-radius: .625rem;
	background: var(--tg-theme-header-bg-color, #212121);
	max-height: fit-content;
	cursor: pointer;
}

.ridehistory__item-icon {
	width: 1.3rem;
	height: 1.3rem;
	fill: var(--tg-theme-text-color, #fff);
}

.ridehistory__item-price {
    display: flex;
    justify-content: space-between;
    height: 100%;
    align-items: flex-end;
    flex-direction: column;
    color: var(--tg-theme-text-color, #fff);
    font-family: Roboto;
    font-size: .9rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.25rem;
    letter-spacing: .00625rem;
}

.ridehistory__item-price--currency {
	color: var(--tg-theme-hint-color, #aaa);
	font-family: Roboto;
	font-size: .9rem;
	font-style: normal;
	font-weight: 700;
	line-height: 1.25rem;
	letter-spacing: .00625rem;
}

.ridehistory__item-price--value {
    height: 100%;
    display: flex;
    align-items: center;
}

.ridehistory__item-price--bonus {
    font-size: .8rem;
    font-weight: 500;
    color: var(--tg-theme-link-color, #2ea6ff);
}

.ridehistory__item-price--bonus span {
    color: var(--tg-theme-hint-color, #aaa);
    font-family: Roboto;
    font-size: .8rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.25rem;
    letter-spacing: .00625rem;
}

.ridehistory__item-info {
	display: flex;
	padding: 0rem .625rem;
	flex-direction: column;
	align-items: flex-start;
	flex: 1 0 0;
	align-self: center;
}

.ridehistory__item-info--qr {
	width: .71rem;
	height: .7rem;
	color: var(--tg-theme-text-color, #fff);
}

.ridehistory__item-info--date {
	color: var(--tg-theme-text-color, #fff);
	font-family: Roboto;
	font-size: .95rem;
	font-style: normal;
	font-weight: 700;
	line-height: 1.25rem;
	letter-spacing: .00625rem;
}

.ridehistory__item-info--scooter {
	color: var(--tg-theme-text-color, #fff);
	padding-top: .35rem;
	opacity: .75;
	display: flex;
	place-content: center;
	align-items: center;
	gap: .2rem;
	font-family: Roboto;
	font-size: .82rem;
	font-style: normal;
	font-weight: 400;
	line-height: 1rem;
	letter-spacing: .00625rem;
}

.scanarea {
	flex-shrink: 0;
}

.scanarea__content {
	position: fixed;
	bottom: 0;
	left: 0;
	flex-shrink: 0;
	height: 8rem;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.scanarea__content:before {
	position: fixed;
	bottom: 0;
	left: 0;
	flex-shrink: 0;
	width: 100vw;
	height: 8rem;
	content: " ";
	background: linear-gradient(180deg,rgba(42,42,42,0) 0%,var(--tg-theme-secondary-bg-color, #0f0f0f) 70%);
	z-index: -1;
}

.scanarea__button {
	border: none;
    border-radius: 12px;
    display: inline-flex;
	width: 5rem!important;
	height: 5rem!important;
	padding: 1.25rem 1.3125rem;
	justify-content: center;
	align-items: center;
	flex-shrink: 0;
	border-radius: 3.6rem!important;
	background: var(--tg-theme-button-color, #2990ff)!important;
	cursor: pointer;
    isolation: isolate;
    position: relative;
    transition: opacity .15s ease-out;
}

.interactive:active {
    opacity: .65;
}

.interactive:hover {
    opacity: .85;
}

.scanarea__button-icon {
	width: 2rem;
	flex-shrink: 0;
	color: var(--tg-theme-button-text-color, #ffffff);
}

.usercard {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
	align-self: stretch;
	height: auto;
	position: relative;
	width: 100%;
	border-radius: 1.5rem;
	background: linear-gradient(to bottom,rgba(255,255,255,0),var(--tg-theme-header-bg-color));
	box-shadow: 0 0 2px 1px #00000005,0 32px 64px #0000000a;
}

.usercard:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	background: url(/static/img/4.jpg) 50%/cover no-repeat;
	opacity: .5;
	z-index: -1;
	border-radius: 1.5rem;
}

.usercard__content {
	display: flex;
	padding: 5.25rem 1.25rem 1rem 1rem;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: 1.4375rem;
	align-self: stretch;
	border-bottom-left-radius: 1.5rem;
	border-bottom-right-radius: 1.5rem;
}

.usercard__header {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	overflow: hidden;
	color: var(--tg-theme-text-color, #ffffff);
	text-overflow: ellipsis;
	font-family: SF Pro Display;
	font-size: 1.0625rem;
	font-style: normal;
	font-weight: 590;
	line-height: 1.375rem;
	letter-spacing: .04rem;
}

.usercard__header--user {
	color: var(--tg-theme-link-color, #aaaaaa);
	font-family: SF Pro Display;
	font-size: 1.0625rem;
	font-style: normal;
	font-weight: 400;
	line-height: 1.375rem;
	letter-spacing: .045rem;
}

.usercard__subheader {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	align-self: stretch;
	overflow: hidden;
	color: var(--tg-theme-text-color, #ffffff);
	text-overflow: ellipsis;
	font-family: SF Pro Display;
	font-size: .9375rem;
	font-style: normal;
	font-weight: 400;
	line-height: 1.25rem;
	letter-spacing: .03rem;
	opacity: .75;
}

.usercard__subheader--full {
	opacity: 1;
}

.usercard__subheader span {
    color: var(--tg-theme-link-color, #aaaaaa);
}

.usercard__text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: .125rem;
	align-self: stretch;
}

.usercard__button {
	display: flex;
	min-width: 2.125rem;
	padding: .5rem .75rem;
	justify-content: center;
	align-items: center;
	gap: .375rem;
	border-radius: 1.25rem;
	background: var(--tg-theme-button-color, #2990ff);
	color: var(--tg-theme-button-text-color, #ffffff);
	text-align: center;
	font-family: SF Pro Display;
	font-size: .9375rem;
	font-style: normal;
	font-weight: 590;
	line-height: 1.25rem;
	letter-spacing: .025rem;
}

.usercard__button-icon {
	width: 1.25rem;
	height: 1.25rem;
}

.usercard__footer {
	display: flex;
	align-items: center;
	gap: .625rem;
	align-self: stretch;
	justify-content: space-between;
}

.usercard__footer-card {
	display: flex;
	gap: .4rem;
	padding: .5rem .3125rem;
	justify-content: space-between;
	align-items: center;
	align-self: stretch;
	color: var(--tg-theme-text-color, #ffffff);
}

.usercard__footer-card--icon {
	width: 1.75rem;
	height: 1.25rem;
	flex-shrink: 0;
}

.usercard__footer-card--text {
	text-align: center;
	font-family: SF Pro Display;
	font-size: .9375rem;
	font-style: normal;
	font-weight: 590;
	line-height: 1.25rem;
	letter-spacing: .01438rem;
}

.scootercharge {
	display: flex;
	padding: .1875rem .4375rem;
	justify-content: center;
	align-items: center;
	gap: .3125rem;
	border-radius: .6875rem;
	background: var(--tg-theme-section-bg-color, #212121);
}

.scootercharge-icon {
    color: #fff;
	width: .375rem;
	height: .5625rem;
	fill: var(--tg-theme-text-color, #fff);
	color: var(--tg-theme-text-color, #fff);
}

.scootercharge-text {
	color: var(--tg-theme-text-color, #fff);
	text-align: center;
	font-family: Roboto;
	font-size: .8125rem;
	font-style: normal;
	font-weight: 400;
	line-height: 1.25rem;
	letter-spacing: .00625rem;
}

.scooterinfo {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: .625rem;
}

.scooterinfo__icon {
	width: 1.6875rem;
	height: 1.5rem;
	fill: var(--tg-theme-text-color, #fff);
}

.scooterinfo__details {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
}

.scooterinfo__details-model {
	color: var(--tg-theme-text-color, #fff);
	font-family: Roboto;
	font-size: .8125rem;
	font-style: normal;
	font-weight: 700;
	line-height: 1.25rem;
	letter-spacing: .00625rem;
}

.scooterinfo__details-number {
	color: var(--tg-theme-text-color, #fff);
	font-family: Roboto;
	font-size: .8125rem;
	font-style: normal;
	font-weight: 400;
	line-height: 1.25rem;
	letter-spacing: .00625rem;
}

.modal__content {
	display: flex;
	padding: .5rem 2.5rem 2rem;
	flex-direction: column;
	align-items: center;
	gap: .9375rem;
	flex: 1 0 0;
	align-self: stretch;
}

.modal__footer {
	display: flex;
	padding: .3125rem 0rem;
	align-items: stretch;
	gap: 1.25rem;
	align-self: stretch;
	overflow-x: scroll;
	scrollbar-width: none;
}

.modal__button-text {
	color: var(--tg-theme-button-text-color, #fff);
	text-align: center;
	font-family: SF Pro Display;
	font-size: 1rem;
	font-style: normal;
	font-weight: 590;
	line-height: 1.3125rem;
	letter-spacing: .04438rem;
}

.modal__button-text--hint {
	color: var(--tg-theme-button-text-color, #fff);
	text-align: center;
	font-family: Roboto;
	font-size: .8rem;
	font-style: normal;
	font-weight: 400;
	line-height: 1.25rem;
	letter-spacing: .00625rem;
}

.modal__button--accept {
	margin-top: .6rem!important;
	background-color: var(--tg-theme-secondary-bg-color, #232e3c)!important;
}

.modal__button--secondary {
	background-color: var(--tg-theme-hint-color, #232e3c)!important;
}

.modal__button--start-ride {
	display: flex;
	padding: .25rem .875rem;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 0rem;
	flex: 2;
	border-radius: .75rem;
	background: var(--tg-theme-button-color, #000);
	transition: opacity .15s ease-out;
}

.modal__button--start-ride:active {
	opacity: .65;
}

.modal__button--start-ride:hover {
	opacity: .85;
}

.modal__button {
    display: flex;
    padding: .5rem .875rem;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0rem;
    flex: 1 0 auto;
    border: none;
    outline: 0;
    border-radius: .75rem;
    background: var(--tg-theme-button-color, #5288c1);
    transition: opacity .15s ease-out;
    color: var(--tg-theme-button-text-color, #fff);
}

.modal__button span {
    font-size: 17px;
    font-weight: 600;
}

.modal__button--cancel {
	flex: 1!important;
	background: var(--tg-theme-destructive-text-color, #ec3942)!important;
	height: auto!important;
}

.modal__button-icon {
	width: 1.5rem;
	height: 1.5rem;
}

.modal__scooter-info {
	display: flex;
	padding: .625rem;
	justify-content: space-between;
	align-items: center;
	width: 100%;
}

.modal__reminder {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: var(--tg-viewport-height, 100vh);
	background: var(--tg-theme-secondary-bg-color, #212121);
	display: flex;
	z-index: 9999;
	align-items: center;
	justify-content: center;
}

.usercard__subheader span {
    color: var(--tg-theme-link-color, #aaaaaa);
}

.error {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	place-content: center;
}

.error__sticker {
	width: 7rem;
	height: 7rem;
}

.currentride {
	display: flex;
	padding: .9375rem 1.25rem 1.25rem;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: .9375rem;
	align-self: stretch;
	border-radius: 1.5rem;
	background: linear-gradient(180deg,rgba(108,64,213,.3) 0%,var(--tg-theme-bg-color, #212121) 100%),var(--tg-theme-bg-color, #212121);
}

.currentride__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	align-self: stretch;
}

.currentride__header-time {
	color: var(--tg-theme-text-color, #fff);
	font-size: 1.5rem;
	font-style: normal;
	font-weight: 590;
	line-height: 1.75rem;
	letter-spacing: .00438rem;
}

.currentride__header-price {
	color: var(--tg-theme-text-color, #fff);
	font-size: 1.5rem;
	font-style: normal;
	font-weight: 400;
	line-height: 1.75rem;
	letter-spacing: .00438rem;
}

.currentride__body {
	display: flex;
	padding: .3125rem 0rem;
	justify-content: space-between;
	align-items: center;
	align-self: stretch;
}

.currentride__footer {
	display: flex;
	height: 2.25rem;
	justify-content: space-between;
	align-items: center;
	align-self: stretch;
	gap: 1rem;
}

.currentride__footer-button {
	padding: 1.2rem .9375rem!important;
	width: 100%!important;
}

.currentride__footer-button--red {
	background: #f12e2eb3!important;
}

.overlay {
	position: fixed;
	z-index: 1000;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: #00000080;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	display: flex;
	justify-content: center;
	align-items: center;
	animation: fadeIn .3s ease-in-out;
}

.overlay__content {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	gap: 1.7rem;
}

.overlay__title {
	font-size: 1.5rem;
	color: var(--tg-theme-secondary-text-color, #fff);
	font-weight: 300;
	letter-spacing: .065rem;
}

.bike-input-label {
    background: var(--tg-theme-bg-color, #17212b);
    border-radius: 12px;
    min-height: 48px;
    gap: 12px;
    padding: 12px 16px;
    align-items: center;
    box-sizing: border-box;
    display: flex;
    color: var(--tg-theme-text-color, #fff);
}

.bike-input-label.invalid {
    box-shadow: 0 0 0 1.5px var(--tg-theme-destructive-text-color, #ec3942);
}

.bike-input {
    background: transparent;
    border: 0;
    box-sizing: border-box;
    font-size: 17px;
    font-weight: 400;
    display: block;
    color: var(--tg-theme-text-color, #fff);
    margin: 0;
    outline: 0;
    padding: 0;
    resize: none;
    text-overflow: ellipsis;
    width: 100%;
}

.bike-input-btn {
    display: flex;
    cursor: pointer;
    isolation: isolate;
    position: relative;
    transition: opacity .15s ease-out;
}

.order-info-wrapper .ridehistory__item {
    background: none;
    cursor: default;
}

.order-info-block {
    width: 100%;
}

.order-info-block dl {
    display: flex;
    justify-content: space-between;
    color: var(--tg-theme-text-color, #fff);
    font-size: 16px;
    font-weight: 400;
}

.order-info-summary dt {
    font-size: 17px;
    font-weight: 600;
}

hr {
    color: var(--tg-theme-section-separator-color, #111921);
}

.order-track-map {
    height: 100%;
    width: 100%;
}

@keyframes fadeIn {
	0% {
		opacity: 0;
		backdrop-filter: blur(0px);
		-webkit-backdrop-filter: blur(0px);
	}

	to {
		opacity: 1;
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
	}
}

:root {
    --map-tiles-filter: brightness(0.6) invert(1) contrast(3) hue-rotate(200deg) saturate(0.3) brightness(0.7);
	font-family: system-ui,-apple-system,BlinkMacSystemFont,"Roboto","Apple Color Emoji","Helvetica Neue",sans-serif;
	background: var(--tg-theme-secondary-bg-color, #0f0f0f);
	padding: 0;
	margin: 0;
	line-height: normal;
	box-sizing: border-box;
	touch-action: pan-y;
}

.bottomsheet {
    background: var(--tg-theme-secondary-bg-color, #0f0f0f) !important;
}

.support-btn {
    position: absolute;
    right: 1rem;
    top: 1rem;
    cursor: pointer;
}

.account-info-text {
    position: absolute;
    left: 1rem;
    top: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    color: var(--tg-theme-text-color, #fff);
}

.cards-list {
    width: 100%;
    display: flex;
    padding-left: 1rem;
    padding-right: 1rem;
    flex-direction: column;
    align-items: center;
    gap: .775rem;
    flex-shrink: 0;
    padding-bottom: 9rem;
}

.card__item {
	width: 100%;
	display: flex;
	padding: .625rem .9375rem;
	align-items: center;
	gap: .625rem;
	flex: 1 0 0;
	border-radius: .625rem;
	background: var(--tg-theme-header-bg-color, #212121);
	color: var(--tg-theme-text-color, #fff);
	max-height: fit-content;
	cursor: pointer;
}

.card__item-icon {
	width: 1.3rem;
	height: 1.3rem;
	fill: var(--tg-theme-text-color, #fff);
}

.card__item-info {
    display: flex;
    padding: 0rem .625rem;
    flex-direction: column;
    align-items: flex-start;
    flex: 1 0 0;
    align-self: center;
}

body {
	margin: 0;
	padding: 0;
}

*,*:before,*:after {
	box-sizing: inherit;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

@media (prefers-color-scheme: dark) {
    .map-tiles {
        filter: var(--map-tiles-filter, none);
	}
}