@font-face {
  font-family: "Kanit";
  src: url('/font/Kanit.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

html {
	box-sizing: border-box;
}

*, *:before, *:after {
	box-sizing: inherit;
	font-family: "Kanit";
}

html, body, .page {
	margin: 0;
	width: 100vw;
	height: 100vh; /* Adding this lets the page render on an iPhone 4 lol */
	height: 100dvh;
	background-color: #000;
	overflow: hidden;
}

@media only screen and (orientation:portrait) {
	.titlebar {
		height: 4.2rem!important;
		min-height: 4.2rem!important;
	}
	.titlebar__logo-img {
		padding: 1vh!important;
	}
	.backpack__icon-box {
		height:70%!important;
		/* width:3.5rem!important; */
	}
	.backpack__item-count {
		height:0.9rem!important;
		width:0.9rem!important;
		/* line-height:1.3rem!important; */
		/* bottom:0!important; */
		font-size:0.9rem!important;
	}
	.backpack__box {
		right: -16vh!important;
	}
	.backpack__box--active {
		right: 0!important;
	}
	.page__checkout-box {
		grid-template-rows: 1fr 55%!important;
	}
	.page__checkout-box, .page__order-box {
		flex-wrap: wrap!important;
		gap: 2vh!important;
		grid-template-columns: 1fr!important;
		/* height: 75vh!important; */
		/* top:3vh!important; */
	}
	.content__info-block {
		flex-direction: column!important;
		gap: 0!important;
	}
	.info-block__text {
		font-size: 1.2rem!important;
	}
	.checkout__form-section {
		flex: 1 0 45%!important;
	}
	.checkout__split-box {
		flex: 1 0 55%!important;
	}
	.order__info-box-window {
		flex: 1!important;
		/* height:50%!important; */
	}
	/* #checkout__stripe-box {
		padding: 2vw!important;
	} */
}

.default__text-1-5rem {
	font-size: 1.5rem;
}

.default__text {
	font-family: 'Kanit';
	color: #ffffff;
	margin: 0;
}

.default__green-text {
	font-family: 'Kanit';
	color: #00ff00;
	margin: 0;
}

.default__button {
	width: 100%;
	/* height: 7.5%; */
	background-color: #00ff00;
	font-size: 1.3rem;
	color: #000000;
	border-style: none;
	text-align: center;
	padding: 0.5vh;
}

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

.titlebar {
	background-color: #000;
	height: 4rem;
	min-height: 4rem;
	width: 100vw;
	position: relative;
}

.titlebar__buttons-box {
	height: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
}

.titlebar__buttons-box a {
	height: 100%;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}

.titlebar__logo-img {
	height: 100%;
	padding: 0.2vh;
}

.titlebar__noai-icon {
	height: 100%;
	padding: 1.3rem;
}

.backpack__button {
	width: auto;
}

.backpack__box {
	background-color: transparent;
	transition: right 1.5s 0.9s, background-color 1.5s 0.9s;
	/* transition: background-color 1s; */
	position: absolute;
	right: 0;
	pointer-events: none;
	height: 100%;
}

.backpack__leaf-particle {
	opacity: 0;
	display: block;
	position: absolute;
	z-index: 9999;
}

#backpack {
	display:flex;
	box-sizing:content-box;
	position:relative;
	height: 100%;
	width:40vh;
	z-index: 9999;
	justify-content:space-evenly;
	flex-direction:column;
	align-items:center;
	/* background-color: #000; */
}

.backpack__box--active {
	transition: right 1s, background-color 1s;
	right:20vh;
	background-color: #000;
	pointer-events: all;
}
.backpack__contents-box--active {
	transition: height 0.75s 0.75s;
	height: 60vh!important;
}


.backpack__contents-box {
	position:absolute;
	transition: height 0.75s 0.4s ease-in;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	z-index: 999;
	top: calc(7vh - 1.5px);
	overflow: hidden;
	left:0;
	width:40vh;
	height:0vh;
	background-color:#000;
}

.backpack__contents-box h3 {
	padding-bottom: 1vh;
	text-align: center;
	font-size: 1.3rem;
}

#backpack__item-container {
	width: 100%;
	margin-bottom: auto;
	overflow-y: scroll;
	scrollbar-width:none;
	overflow:-moz-scrollbars-none;
}

#backpack__item-container::-webkit-scrollbar {
	display: none;
}

.backpack__product-item {
	height: 10vh;
	margin: 1vh;
	overflow: hidden;
	display: grid;
	grid-template-columns: min-content 1fr min-content;
}

.backpack__product-item-img {
	height: 10vh;
	max-width: 15vh;
	border-radius: 2.5%;
}

.backpack__product-item-texts {
	display: flex;
	height: 100%;
	flex-direction: column;
	align-items: end;
	justify-content: space-around;
}

.backpack__product-item-name {
	margin: 0 1vh;
	color: #ffffff;
	justify-self: start;
	align-self: start;
	flex: 1;
	font-size: 1.1rem;
}

.backpack__product-item-type {
	font-size: 1.5vh;
	margin-left: 1vh;
}

.backpack__product-item-price {
	color:#00ff00;
	margin: 0 0 1vh 0;
	font-size: 1rem;
}

.backpack__product-item-bin {
	width: 2.8vh;
	filter: invert(100%) sepia(100%) saturate(1%) hue-rotate(137deg) brightness(103%) contrast(101%);
}

.backpack__product-item-bin:active {
	filter: invert(29%) sepia(72%) saturate(3219%) hue-rotate(348deg) brightness(106%) contrast(99%);
}

.backpack__controls-box {
	display: grid;
	grid-template-columns: 1fr 1fr;
	padding:0.8vh;
}

#backpack__empty-button {
	margin-right:0.4vh;
}

#backpack__checkout-button {
	margin-left:0.4vh;
}

.backpack__icon-box {
	position:relative;
	height: 70%;
	width:fit-content;
	transition:transform 1s;
	pointer-events: auto;
}

.backpack__bag-icon {
	max-width:100%;
	max-height:100%;
	/* filter: invert(100%) sepia(100%) saturate(1%) hue-rotate(137deg) brightness(103%) contrast(101%); */
}

.backpack--active {
	z-index: 9999;
}

.backpack__item-count {
	color: #000000;
	width:1rem;
	height:1rem;
	line-height:0.9rem;
	text-align:center;
	border-radius:50%;
	position:absolute;
	bottom:-0.1rem;
	font-size:0.9rem;
	left:-0.2rem;
	background:#00ff00;
}

.backpack__checkout-buttons-box {
	margin: 7px;
	/* width: calc(100% - 7px * 2); */
}

.checkout__items-box .backpack__product-item {
	margin: 2vh;
}

.page__content-box {
	overflow: hidden;
	background-color: #272727;
	height: 100%;
	display: flex;
	flex: 1 1 100%;
}

.page__background {
	width: 100%;
	height: 100%;
	background-color: #272727;
	background-repeat: no-repeat;
	background-size: cover;
	overflow-y: scroll;
	overflow-x: hidden;
}

.content {
	margin: 2.5vh;
	padding: 2.5vh;
	background: rgba(0, 0, 0, .45);
	overflow: hidden;
}

.content__vid-box {
	height: fit-content;
	position: relative;
}

.content__vid-player {
	width: 100%;
	display: block;
}

.content__vid-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #000;
	opacity: 85%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.content__vid-overlay-text {
	color: #fff;
	font-size: 3vh;
	font-family: "Chakra Petch";
}

.content__vid-desc-box {
	background-color: #000;
	max-height: 0;
	overflow: hidden;
	transition: max-height 1.5s ease;
}

.content__vid-desc-box.active {
	max-height: 1000px;
}

.content__vid-desc {
	color: #fff;
	padding: 5vw;
	display: block;
	font-family: "Kanit";
}

.content__info-block {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-content: center;
	flex-wrap: wrap;
	align-items: start;
	gap: 2.5vh;
}

.info-block__text-box {
	flex: 1 1 30vh;
}

.info-block__image-box {
	/* height: 25vh; MOBILE HERE */
	/* background: url('static/img/stealvideoplaceholder.webp'); */
	/* height: 30dvh; */
	flex: 1 1 30vh;
	max-height: fit-content;
	/* margin: 1rem 0; */
}

.info-block__tooltip-map {
	position: relative;
}

.info-block__image {
	width: 100%;
	/* padding: 10vh; */
}

.info-block__text {
	color: #fff;
	font-family: "Kanit";
	font-size: 1.3rem;
}

.info-block__title {
	color: #fff;
	font-family: "Kanit";
	font-size: 1.9rem;
	text-align: center;
	margin: 1rem 0;
}

.info-block__list {
	list-style-type: none;
	padding: 0;
	margin: 1vh 0 0 0;
}

.info-block__link {
	color: #00ff00;
}

.tooltip__box {
	position: absolute;
	left: var(--x);
	top: var(--y);
	transform: translate(-50%, -50%);
	width: 5vw;
	height: 5vw;
	border: 0;
  	border-radius: 50%;
	background-color: #00000080;
	/* overflow: visible; */
}

.tooltip__icon {
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
	transition: opacity .5s .35s, transform .5s  .35s;
}

.tooltip__box.active .tooltip__icon {
	transition: opacity .5s, transform .5s;
}

.tooltip__icon-plus {
	opacity: 1;
	transform: rotate(0);
}

.tooltip__icon-minus {
	opacity: 0;
	transform: rotate(0);
}

.tooltip__box.active .tooltip__icon-plus {
	transition: opacity .5s, transform .5s;
	opacity: 0;
	transform: rotate(180deg);
}

.tooltip__box.active .tooltip__icon-minus {
	opacity: 1;
	transform: rotate(180deg);
}

.tooltip__line-container {
	overflow: visible;
	position: absolute;
	top: 15%;
	left: 85%;
	aspect-ratio: 0.5;
}

.tooltip__line {
	fill: none;
	stroke: #00ff00;
	stroke-width: 0.42vw;
	stroke-linecap: round;
	stroke-linejoin: round;
	aspect-ratio: 0.5;

	stroke-dasharray:1000;
    stroke-dashoffset:1000;
    transition: stroke-dashoffset .4s 0s;
}

.tooltip__box.active .tooltip__line {
    stroke-dashoffset:0;
	transition: stroke-dashoffset .7s .35s;
}

.tooltip__content-box {
	overflow: hidden;
	position: absolute;
	width: 400px;
	transform: translateX(-100%) translateY(-100%);
}

.tooltip__content {
	background-color: #000000c7;
	padding: 1rem 1.25rem;
	color: #ffffff;
	opacity: 0;
	transform: translateY(100%);

	transition: opacity .35s 0s, transform .35s 0s;
}

.tooltip__box.active .tooltip__content {
	opacity: 1;
	transform: translateY(0);
	transition: opacity .35s .5s, transform .35s .5s;
}

.tooltip__content p {
	margin: 0;
	color: #ffffff;
	/* font-size: 0.9rem; */
	font-size: 1.1rem;
}

@media (max-width: 1000px) {
	.tooltip__content p {
		font-size: 0.9rem;
	}
}

@media (max-width: 750px) {
	.tooltip__content p {
		font-size: 0.8rem;
	}
}

.rotate-blocker {
	position: absolute;
	background-color: #272727;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100dvh;

	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 100;
}

@media only screen and (orientation:landscape) {
	.rotate-blocker {
		display: none!important;
	}
}

.rotate-blocker__icon {
	width: 42vw;
}

.rotate-blocker__info {
	color: #ffffff;
	text-align: center;
}

.store__product-price {
	color: #00ff00;
	font-size: 1.2rem;
}

.store__product-ogprice {
	color: #FE3C26;
	text-decoration:line-through;
}

.page__checkout-box, .page__order-box {
	/* height:75vh; */
	margin:2.5vh;
	position: static;
	width: 100%;
	padding: 2.5vh;
	display: grid;
	background: rgba(0, 0, 0, .45);
	/* overflow: hidden; */
	grid-template-columns: 1fr 1fr;
	gap: 15vh;
	top:7vh;
	/* background-color:transparent */
}

.checkout__split-box {
	display: flex;
	flex-direction: column;
}

.checkout__form-section {
	position: relative;
	display: flex;
	flex: 1;
	/* height: 50%; */
	flex-direction: column;
	overflow-y: scroll;
	overflow-x: visible;
}

/* .checkout__form-section::-webkit-scrollbar {
	display:none;
} */

.checkout__form-section:last-child {
	margin-bottom:0;
}

.checkout__form-heading {
	background-color: #000;
	color: #fff;
	height: fit-content;
	width: fit-content;
	padding: 0 2vh;
	font-size: 1.2rem;
	text-align: center;
	margin-bottom: 3vh;
}

.checkout__form-split-box {
	display: grid;
	width: 100%;
	grid-template-columns: 1fr 1fr;
	gap: 0.3rem;
	flex-basis: 70%;
}

.checkout__tooltip-img {
	width: 100%;
	padding: 20%;
	background-color: #000;
}

.checkout__url-message {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	color: #fff;
	font-size: 14px;
}

#checkout__address-split {
	grid-template-columns: 1fr 4vh;
}

#checkout__tooltip-box {
	position: relative;
	z-index: 2;
}

#checkout__form-address {
	margin-bottom: 0;
}

#checkout__address-suggestions {
	overflow: hidden;
}

.checkout__address-suggestion {
	background-color: #000;
	font-size: 1.5vh;
	color: #fff;
	padding: 0.5vh 1.2vh;
}

.checkout__address-suggestion:hover, .checkout__address-suggestion--active  {
	background-color: #292929;
}

#checkout__tooltip-box:hover #checkout__shipping-tooltip {
	width: fit-content;
	transition: width 1s;
}

#checkout__shipping-tooltip {
	position: absolute;
	top: 0;
	left: 4vh;
	height: 4vh;
	width: 0;
	overflow: hidden;
	background-color: #000;
	z-index: 999;
	white-space: nowrap;
	color: #fff;
	padding: 0 1vw;
	line-height: 4vh;
	transition: width 1s;
}

.checkout__input-field {
	appearance: none;
	border: none;
	outline: none;
	height: 2rem;
	width: 100%;
	margin-bottom: 0.3rem;
	padding: 0 0.6rem;
	font-size: 15px;
	color: #fff;
	background-color: #000;
}

.checkout__form-box {
	margin-bottom: 8vh;
}

.checkout__form-section .checkout__form-box:last-child {
	margin-bottom: 0;
}

.checkout__items-box {
	position: relative;
	display: flex;
	flex-direction: column;
    justify-content: flex-end;
    align-items: center;
	z-index: 1;
	min-height: 0;
	flex: 1 1 0;
	background-color: #000;
}
.checkout__items-box .backpack__product-item {
	margin: 2vh;
}

/* .checkout__items-separator { */
	/* background-color: white; */
	/* width: 80%; */
	/* height: .5px; */
	/* margin-left: auto; */
	/* margin-right: auto; */
	/* margin-top: 4px; */
	/* margin-bottom: 4px; */
/* } */

.checkout__items-separator {
	background-color: white;
	width: 15%;
	height: 3px;
	transform: translate(0, -0.6vh) rotate(-10deg);
	margin-left: auto;
	margin-right: auto;
	margin-top: 4px;
	margin-bottom: 4px;
}

#checkout__stripe-box {
	position: relative;
	/* background-color: #292929; */
	padding: 0.5vh;
}

.backpack__checkout-buttons-box {
	margin: 7px;
	width: calc(100% - 7px * 2);
}

.checkout__buttons-box {
	width: 100%;
	/* height: 4vh; */
	flex-grow: 1;
}

#checkout__abandon-button {
	margin-top: 7px;
	background-color: #FE3C26;
}

.checkout__input-box {
	position: relative;
}

.checkout__error-text {
	position: absolute;
	top: -1.6rem;
	left: 0;
	color: #ff0000;
	font-weight: bold;
	font-size: 0.8rem;
	padding-left: 1.2vh;
	pointer-events: none;
}

#checkout__stripe-box .checkout__error-text {
	position: static;
	line-height: 1.5vh;
	padding: 0;
	font-size: 1.5vh;
}

#order__cancel-button {
	background-color: #FE3C26;
}

.order__info-box {
	/* font-family: 'Kanit'; */
	/* font-size: 2.4vh; */
	margin-top: 2.5vh;
	padding: 0 1vw;
	margin-bottom: 0;
}

.order__info-box-window {
	overflow-x: hidden;
	overflow-y: auto;
	flex-basis: 50%;
}

.order__info-white {
	color: #fff;
	font-family: 'Kanit';
}

.order__info-green {
	color: #00ff00;
	/* background-color: #000; */
	font-family: 'Kanit';
}