/* ===============================
FLOATING ACTION BUTTONS – PORTFOLIO MATCH
================================ */

.dr1floatingbuttons {
	pointer-events: none;
}

/* ==========================================
BUTTON CONTAINER
========================================== */
.dr1floatingbuttons .floating-buttons {
	position: fixed;
	bottom: 26px;
	right: 26px;

	z-index: 1200;

	display: flex;
	flex-direction: column;
	gap: 16px;

	pointer-events: auto;
}

/* ==========================================
BASE BUTTON
========================================== */
.dr1floatingbuttons .floating-button {
	width: 64px;
	height: 64px;

	border-radius: 22px;

	display: flex;
	align-items: center;
	justify-content: center;

	cursor: pointer;
	position: relative;

	background: rgba(255,255,255,0.04);

	backdrop-filter: blur(10px);

	border: 1px solid rgba(56,189,248,0.35);

	color: #38bdf8;

	box-shadow:
		0 24px 60px rgba(0,0,0,0.85),
		inset 0 0 0 1px rgba(255,255,255,0.06);

	transition:
		transform 0.35s ease,
		box-shadow 0.35s ease,
		color 0.35s ease,
		border-color 0.35s ease;

	opacity: 0;
	transform: translateY(20px) scale(0.9);

	animation: floatIn 0.6s forwards;
}

/* ==========================================
STAGGER ANIMATION
========================================== */
.dr1floatingbuttons .floating-button:nth-child(1) {
	animation-delay: .1s;
}

.dr1floatingbuttons .floating-button:nth-child(2) {
	animation-delay: .2s;
}

.dr1floatingbuttons .floating-button:nth-child(3) {
	animation-delay: .3s;
}

.dr1floatingbuttons .floating-button:nth-child(4) {
	animation-delay: .4s;
}

.dr1floatingbuttons .floating-button:nth-child(5) {
	animation-delay: .5s;
}

/* ==========================================
FLOAT IN
========================================== */
@keyframes floatIn {

	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

/* ==========================================
ICONS
========================================== */
.dr1floatingbuttons .floating-button i {
	font-size: 24px;
	transition: transform .35s ease;
}

/* ==========================================
WHATSAPP CHAT
========================================== */
.dr1floatingbuttons .whatsapp-chat {
	color: #25d366;
	border-color: rgba(37, 211, 102, 0.35);
}

.dr1floatingbuttons .whatsapp-chat:hover {
	box-shadow:
		0 35px 90px rgba(0,0,0,.9),
		0 0 40px rgba(37,211,102,.55);
}

/* ==========================================
WHATSAPP SHARE
========================================== */
.dr1floatingbuttons .whatsapp-share {
	color: #38bdf8;
	border-color: rgba(56,189,248,.35);
}

.dr1floatingbuttons .whatsapp-share:hover {
	box-shadow:
		0 35px 90px rgba(0,0,0,.9),
		0 0 40px rgba(56,189,248,.55);
}

/* ==========================================
PHONE CALL
========================================== */
.dr1floatingbuttons .phone-call {
	color: #6366f1;
	border-color: rgba(99,102,241,.35);
}

.dr1floatingbuttons .phone-call:hover {
	box-shadow:
		0 35px 90px rgba(0,0,0,.9),
		0 0 40px rgba(99,102,241,.55);
}

/* ==========================================
SMS BUTTON
========================================== */
.dr1floatingbuttons .sms-message {
	color: #f59e0b;
	border-color: rgba(245,158,11,.35);
}

.dr1floatingbuttons .sms-message:hover {
	box-shadow:
		0 35px 90px rgba(0,0,0,.9),
		0 0 40px rgba(245,158,11,.55);
}

/* ==========================================
MOVE TOP
========================================== */
.dr1floatingbuttons .move-top {
	color: #ec4899;
	border-color: rgba(236,72,153,.35);
}

.dr1floatingbuttons .move-top:hover {
	box-shadow:
		0 35px 90px rgba(0,0,0,.9),
		0 0 40px rgba(236,72,153,.55);
}

/* ==========================================
COMMON HOVER EFFECT
========================================== */
@media (hover:hover) {

	.dr1floatingbuttons .floating-button:hover {
		transform: translateY(-6px) scale(1.05);

		color: #ffffff;
	}

	.dr1floatingbuttons .floating-button:hover i {
		transform: scale(1.22);
	}
}

/* ==========================================
TOOLTIP
========================================== */
.dr1floatingbuttons .floating-button::after {
	content: attr(data-tooltip);

	position: absolute;

	right: calc(100% + 14px);
	top: 50%;

	transform:
		translateY(-50%)
		translateX(-10px);

	padding: 8px 14px;

	font-size: 13px;
	font-weight: 600;

	color: #e5e7eb;

	background: rgba(2,6,23,.95);

	border: 1px solid rgba(56,189,248,.35);

	border-radius: 10px;

	box-shadow:
		0 10px 30px rgba(0,0,0,.75);

	white-space: nowrap;

	opacity: 0;

	transition: .3s ease;

	pointer-events: none;
}

.dr1floatingbuttons .floating-button:hover::after {
	opacity: 1;

	transform:
		translateY(-50%)
		translateX(0);
}

/* ==========================================
ACTIVE PRESS
========================================== */
.dr1floatingbuttons .floating-button:active {
	transform: scale(.95);
}

/* ==========================================
TABLET
========================================== */
@media (max-width:768px) {

	.dr1floatingbuttons .floating-buttons {
		bottom: 18px;
		right: 18px;
		gap: 14px;
	}

	.dr1floatingbuttons .floating-button {
		width: 56px;
		height: 56px;

		border-radius: 18px;
	}

	.dr1floatingbuttons .floating-button i {
		font-size: 21px;
	}

	.dr1floatingbuttons .floating-button::after {
		display: none;
	}
}

/* ==========================================
SMALL MOBILE
========================================== */
@media (max-width:480px) {

	.dr1floatingbuttons .floating-buttons {
		right: 14px;
		bottom: 14px;
		gap: 12px;
	}

	.dr1floatingbuttons .floating-button {
		width: 52px;
		height: 52px;

		border-radius: 16px;
	}

	.dr1floatingbuttons .floating-button i {
		font-size: 20px;
	}
}

/* ==========================================
REDUCED MOTION
========================================== */
@media (prefers-reduced-motion:reduce) {

	.dr1floatingbuttons .floating-button,
	.dr1floatingbuttons .floating-button i,
	.dr1floatingbuttons .floating-button::after {
		transition: none !important;
		animation: none !important;
	}

	.dr1floatingbuttons .floating-button {
		opacity: 1;
		transform: none;
	}
}