@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

:root {
	--opacity_show: 0.5;

	--change_color: rgb(255 255 255);
	--change_color_two: rgb(255 255 255);

	--opacity_div: 1;
	--opacity_loader: 0;

	--loader_index: -1;

	--shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
	--shadow_two: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);

	--opasity_phone: 1;
	--padding_phone: 1rem;
	--margin_top_phone: 1rem;
	--height_phone: 56px;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;
}

.shadow-custom {
	--tw-drop-shadow: drop-shadow(0 5px 7px rgb(0 0 0 / 0.06));
	filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate)
		var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.shadow-custom:hover {
	box-shadow: 0px 16px 32px rgb(37 33 41 / 8%), 0px 0px 12px rgb(37 33 41 / 4%);
}

.text-custom {
	color: rgb(255 121 95);
}

.bg-custom {
	background-color: rgb(255 121 95);
}

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

.w-full {
	transition: transform 0.6s cubic-bezier(0.33, 1, 0.68, 1);
}

.p-10 {
	margin-top: 18px;
}

.money_width {
	/* padding-top: 20px; */
	font-size: 3em;
}

#card_number{
	margin-top: 0px!important;
}

#pay_amount {
	margin-top: 1rem;
}

#block_card{
	height: auto;
	opacity: 0;
	transition: transform 0.6s cubic-bezier(0.33, 1, 0.68, 1);

	animation-duration: 0.4s;
	margin-bottom: 1rem;
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 1rem;
}

.img_card{
	position: absolute;
	top:50%;
	right: 15px;
	transform: translateY(-50%);
	display: none;
}

#block_card.hide{
	margin-bottom: 0rem;
}

#pay_name {
	display: none;
}

#phone, #card_number, #date, #cvv {
	height: 0;
	opacity: 0;
	padding-left: 1rem;
	padding-right: 0;
	padding-top: 0;
	padding-bottom: 0;
	margin-top: 0;
	transition: transform 0.6s cubic-bezier(0.33, 1, 0.68, 1);

	animation-duration: 0.4s;
}

.fade:not(.show) {
	opacity: 0;
}

.fade {
	transition: opacity 0.2s ease-in-out;
}

.modal {
	position: fixed;
	overflow-y: auto;
	top: 0;
	left: 0;
	z-index: 1055;
	display: none;
	width: 100%;
	height: 100%;
	outline: 0;
}

.modal-dialog {
	position: relative;
	width: auto;
	margin: 0.5rem;
	pointer-events: none;
}

.modal-dialog-centered {
	display: flex;
	align-items: center;
	min-height: calc(100% - 1rem);
}

.loader {
	position: absolute;
	top: 0;
	left: 0;
	z-index: var(--loader_index);
	opacity: var(--opacity_loader);
	height: 100%;
	outline: 0;

	animation-duration: 0.3s;
}

.loader .modal-dialog {
	width: 3.3rem;
}

.modal-content {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	pointer-events: auto;
	background-color: #fff;
	outline: 0;
	border-radius: 1rem;
}

.modal-body {
	position: relative;
	flex: 1 1 auto;
	padding: 1.3rem;
	text-align: center;
}

.modal-backdrop.fade {
	opacity: 0;
}

.modal-backdrop.show {
	opacity: var(--opacity_show);
}

.modal-backdrop {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1050;
	width: 100vw;
	height: 100vh;
	background-color: #000;
}

.btn-secondary {
	width: 27%;
	padding: 0.35rem;
	margin-top: 0.8rem;
	border-radius: 0.55rem;
}

.visually-hidden,
.visually-hidden-focusable:not(:focus):not(:focus-within) {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.spinner-border {
	display: inline-block;
	width: 3rem;
	height: 3rem;
	vertical-align: -0.125em;
	border: 0.25em solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	-webkit-animation: 0.75s linear infinite spinner-border;
	animation: 0.75s linear infinite spinner-border;
}

.text-dark {
	color: rgba(255, 121, 95, 1) !important;
}

.block_spinner {
	position: absolute;
	top: calc(50% - 1.75rem);
	left: calc(50% - 1.75rem);
}

.block_form {
	position: relative;
	margin: auto;
}

.div_animation {
	animation-duration: 0.3s;
	opacity: var(--opacity_div);
}

.chenge_color_section {
	animation-duration: 0.3s;
	background-color: rgb(255, 255, 255);
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.section {
	width: 720px;
}

@keyframes phone {
	0% {
		height: 0;
		opacity: 0;
		padding-right: 0;
		padding-top: 0;
		padding-bottom: 0;
		margin-top: 0;
	}
	100% {
		height: 56px;
		opacity: 1;
		padding-right: 1rem;
		padding-top: 1rem;
		padding-bottom: 1rem;
		margin-top: 1rem;
	}
}

@keyframes no_phone {
	0% {
		height: 56px;
		padding-right: 1rem;
		padding-top: 1rem;
		padding-bottom: 1rem;
		padding: 1rem;
		margin-top: 1rem;
		opacity: 1;
	}
	100% {
		height: 0;
		padding-right: 0;
		padding-top: 0;
		padding-bottom: 0;
		margin-top: 0;
		opacity: 0;
	}
}

@keyframes block_card {
	0% {
		
		opacity: 0;
	}
	100% {
		
		opacity: 1;
	}
}

@keyframes no_block_card {
	0% { 
		
		opacity: 1;
	}
	100% { 
		
		opacity: 0;
	}
}

@keyframes card {
	0% {
		height: 0;
		opacity: 0;
		padding-right: 0;
		padding-top: 0;
		padding-bottom: 0;
		margin-top: 0;
	}
	100% {
		height: 56px;
		opacity: 1;
		padding-right: 1rem;
		padding-top: 1rem;
		padding-bottom: 1rem;
		margin-top: 1rem;
	}
}

@keyframes no_card {
	0% {
		height: 56px;
		padding-right: 1rem;
		padding-top: 1rem;
		padding-bottom: 1rem;
		padding: 1rem;
		margin-top: 1rem;
		opacity: 1;
	}
	100% {
		height: 0;
		padding-right: 0;
		padding-top: 0;
		padding-bottom: 0;
		margin-top: 0;
		opacity: 0;
	}
}

@keyframes div_animation {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

@keyframes no_loader {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@keyframes spinner-border {
	100% {
		transform: rotate(360deg);
	}
}

@media (min-width: 300px) {
	.fuck_block {
		margin-top: 1rem;
	}

	.modal-dialog {
		width: 300px;
		margin: 0.5rem auto;
	}

	.loader {
		width: 100%;
		position: fixed;
	}

	:root {
		--change_color: rgb(243 244 246);
		--shadow: 0px 0px 0px 0px rgb(243 244 246);
	}

	@keyframes change_color {
		0% {
			box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
			background-color: rgb(255 255 255);
		}
		100% {
			box-shadow: 0px 0px 0px 0 rgb(243 244 246);
			background-color: rgb(243 244 246);
		}
	}

	@keyframes change_color_two {
		0% {
			box-shadow: 0px 0px 0px 0 rgb(243 244 246);
			background-color: rgb(243 244 246);
		}
		100% {
			box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
			background-color: rgb(255 255 255);
		}
	}
}

@media (min-width: 576px) {
	.fuck_block {
		margin-top: 3rem;
	}
	
	.upmt-8 {
		margin-top: -80%;
	}

	.modal-dialog {
		max-width: 350px;
		margin: auto;
	}

	.loader {
		position: relative;
		width: 3.3rem;
	}

	.loader .modal-dialog-centered {
		height: 100%;
	}

	:root {
		--change_color: rgb(255 255 255);
		--shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
	}

	@keyframes change_color {
		0% {
			background-color: rgb(255 255 255);
			box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
		}
		100% {
			background-color: rgb(255 255 255);
			box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
		}
	}

	@keyframes change_color_two {
		0% {
			background-color: rgb(255 255 255);
			box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
		}
		100% {
			background-color: rgb(255 255 255);
			box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
		}
	}
}

@media (max-width: 767px) {
	.img_card{
		transform: translateY(calc(-50% + 0.5rem));
	}
	#block_card{
		margin-bottom: 0px;;
	}

	#card_number{
		margin-top: 1rem!important;
	}

	.pad {
		margin-top: 20px;
	}

	.p-10 {
		margin-top: 0px;
		padding-top: 0px;
	}

	.money_width {
		text-align: center;
		padding-top: 20px;
	}
}

@media (min-width: 1334px) {
	.fuck_block {
		margin-top: 10rem;
	}
}

.checkSum {
	display: flex;
	align-items: center;
	padding-top: 20px;
}

.checkSum .starsSum {
	display: none;
	background-color: #F3F4F6;
	color: #87898E;
	border-radius: 20px;
	padding: 0 10px;
	margin-left: 10px;
	font-size: 20px;
}

@media (max-width: 767px) {
	.checkSum {
		flex-direction: column;
	}
	.checkSum .starsSum {
		margin-left: 0;
		margin-top: 20px;
	}
}