/* ==========================================
   DR1060 PWA INSTALL APP
   ULTRA PREMIUM FLOATING PEN-DRIVE STYLE
========================================== */

.dr1060installapp {

	position: fixed;

	top: calc(50vh - 45px);

	left: 0;

	z-index: 99999;

	pointer-events: none;

	will-change: transform;

	backface-visibility: hidden;

	transform: translateZ(0);
}

/* ===========================
   WRAPPER
=========================== */

.dr1060installapp .installbtnwrapperdr1060 {

	position: relative;

	display: none;

	align-items: center;

	padding: 0;

	background: transparent;

	border: none;

	box-shadow: none;

	transform: translateX(-380px);

	opacity: 0;

	pointer-events: auto;

	overflow: visible;

	will-change:
		transform,
		opacity;

	backface-visibility: hidden;

	transform-style: preserve-3d;

	transition:
		transform 1.4s cubic-bezier(.16,1,.3,1),
		opacity 1.2s ease;
}

/* ===========================
   SLIDE IN
=========================== */

.dr1060installapp.active
.installbtnwrapperdr1060 {

	transform: translateX(0);

	opacity: 1;
}

/* ===========================
   FLOATING
=========================== */

.dr1060installapp.floating
.installbtndr1060 {

	animation:
		dr1060InstallFloat
		4s
		ease-in-out
		1.4s
		infinite;
}

@keyframes dr1060InstallFloat {

	0%,
	100% {

		transform:
			translateY(0);
	}

	50% {

		transform:
			translateY(-2px);
	}
}

/* ===========================
   INSTALL BUTTON
=========================== */

.dr1060installapp .installbtndr1060 {

	position: relative;

	display: flex;

	align-items: center;

	justify-content: center;

	gap: 10px;

	padding: 16px 28px;

	border:
		1px solid rgba(255,255,255,.18);

	border-radius:
		0 26px 26px 0;

	cursor: pointer;

	font-size: 15px;

	font-weight: 700;

	letter-spacing: .3px;

	color: #ffffff;

	background:
		linear-gradient(
			135deg,
			#2563eb,
			#06b6d4
		);

	backdrop-filter: blur(8px);

	-webkit-backdrop-filter:
		blur(8px);

	box-shadow:
		0 14px 35px rgba(0,0,0,.30),
		0 10px 25px rgba(37,99,235,.35),
		inset 0 1px 0 rgba(255,255,255,.20);

	overflow: hidden;

	z-index: 2;

	will-change: transform;

	backface-visibility: hidden;

	transition:
		transform .35s ease,
		box-shadow .35s ease;
}

/* ===========================
   GLOSSY SHINE
=========================== */

.dr1060installapp
.installbtndr1060::before {

	content: "";

	position: absolute;

	top: -50%;

	left: -60%;

	width: 220%;

	height: 220%;

	background:
		linear-gradient(
			120deg,
			transparent,
			rgba(255,255,255,.20),
			transparent
		);

	transform: rotate(25deg);

	animation:
		dr1060InstallButtonShine
		4s
		linear
		infinite;
}

@keyframes dr1060InstallButtonShine {

	0% {

		transform:
			translateX(-50%)
			rotate(25deg);
	}

	100% {

		transform:
			translateX(50%)
			rotate(25deg);
	}
}

/* ===========================
   GLOW
=========================== */

.dr1060installapp
.installbtndr1060::after {

	content: "";

	position: absolute;

	inset: -6px;

	border-radius: inherit;

	background:
		radial-gradient(
			circle,
			rgba(37,99,235,.25),
			transparent 70%
		);

	filter: blur(8px);

	z-index: -1;
}

/* ===========================
   HOVER
=========================== */

.dr1060installapp
.installbtndr1060:hover {

	transform:
		translateY(-2px);

	box-shadow:
		0 18px 40px rgba(0,0,0,.35),
		0 14px 30px rgba(37,99,235,.50);
}

.dr1060installapp
.installbtndr1060:active {

	transform:
		scale(.97);
}

/* ===========================
   ICONS
=========================== */

.dr1060installapp
.installbtndr1060 i,

.dr1060installapp
.installbtndr1060 span {

	position: relative;

	z-index: 2;
}

/* ===========================
   CLOSE BUTTON
=========================== */

.dr1060installapp
.installclosebtndr1060 {

	position: absolute;

	top: -10px;

	right: -10px;

	width: 32px;

	height: 32px;

	border: none;

	border-radius: 50%;

	display: flex;

	align-items: center;

	justify-content: center;

	cursor: pointer;

	color: #ffffff;

	background:
		linear-gradient(
			135deg,
			#ef4444,
			#f97316
		);

	box-shadow:
		0 8px 20px rgba(239,68,68,.40);

	z-index: 1000;

	transition:
		transform .3s ease,
		box-shadow .3s ease;
}

.dr1060installapp
.installclosebtndr1060:hover {

	transform:
		scale(1.1)
		rotate(90deg);

	box-shadow:
		0 12px 28px rgba(239,68,68,.55);
}

/* ===========================
   MOBILE
=========================== */

@media (max-width:768px) {

	.dr1060installapp {

		top: calc(50vh - 40px);
	}

	.dr1060installapp
	.installbtnwrapperdr1060 {

		transform:
			translateX(-320px);
	}

	.dr1060installapp.active
	.installbtnwrapperdr1060 {

		transform:
			translateX(0);
	}

	.dr1060installapp
	.installbtndr1060 {

		padding: 14px 20px;

		font-size: 14px;
	}

	.dr1060installapp
	.installclosebtndr1060 {

		width: 28px;

		height: 28px;

		top: -8px;

		right: -8px;
	}
}