@font-face{
	font-family:'LamaSans';
	src:url('../fonts/LamaSans-Black.ttf') format('truetype');
	font-weight:900;
	font-style:normal;
	font-display:swap;
}

:root{
	--actionconnect-brand:#A3463F;
	--actionconnect-shadow:0 12px 28px rgba(163,70,63,.24);
	--actionconnect-shadow-hover:0 16px 36px rgba(163,70,63,.30);
	--actionconnect-radius:22px;
	--actionconnect-ease:cubic-bezier(.22,1,.36,1);
}

.actionconnect{
	position:fixed;
	top:50%;
	transform:translateY(-50%);
	z-index:9999;
	display:flex;
	flex-direction:column;
	gap:12px;
	pointer-events:none;
	direction:ltr;
	font-family:'LamaSans', sans-serif;
}

.actionconnect--left{
	left:0;
}

.actionconnect--right{
	right:0;
}

.actionconnect__button{
	pointer-events:auto;
	position:relative;
	display:flex;
	align-items:center;
	gap:12px;
	min-height:56px;
	width:58px;
	padding:8px 16px 8px 14px;
	overflow:hidden;
	text-decoration:none !important;
	background:var(--actionconnect-brand);
	color:#fff !important;
	border-radius:0 999px 999px 0;
	box-shadow:var(--actionconnect-shadow);
	transition:width .34s var(--actionconnect-ease), box-shadow .28s var(--actionconnect-ease);
	will-change:width;
	white-space:nowrap;
	-webkit-tap-highlight-color:transparent;
}

.actionconnect--right .actionconnect__button{
	border-radius:999px 0 0 999px;
	padding:8px 14px 8px 16px;
}

.actionconnect__button:hover,
.actionconnect__button:focus-visible{
	width:220px;
	box-shadow:var(--actionconnect-shadow-hover);
	outline:none;
}

.actionconnect__button--large{
	min-height:64px;
}

.actionconnect__icon{
	position:absolute;
	right:0;
	top:0;
	width:56px;
	height:100%;
	display:flex;
	align-items:center;
	justify-content:center;
	background:transparent;
	box-shadow:none;
	border-radius:0;
	z-index:2;
}

.actionconnect--right .actionconnect__icon{
	right:auto;
	left:0;
}

.actionconnect__icon svg{
	width:33px;
	height:33px;
	display:block;
	fill:currentColor;
}

/* أيقونة الهاتف فقط */
.actionconnect__button--phone .actionconnect__icon svg{
	width:36px;
	height:36px;
}

/* أيقونة زر النسخة فقط */
.actionconnect__button--register .actionconnect__icon svg{
	width:30px;
	height:30px;
}

/* واتساب يبقى على المقاس الأساسي */
.actionconnect__button--whatsapp .actionconnect__icon svg{
	width:33px;
	height:33px;
}

.actionconnect__text{
	display:flex;
	flex-direction:column;
	justify-content:center;
	line-height:1.1;
	opacity:0;
	transform:translateX(6px);
	transition:opacity .22s ease, transform .22s ease;
	padding-right:58px;
	width:100%;
	text-align:right;
	z-index:1;
}

.actionconnect--right .actionconnect__text{
	padding-right:10px;
	padding-left:58px;
	text-align:left;
}

.actionconnect__button:hover .actionconnect__text,
.actionconnect__button:focus-visible .actionconnect__text{
	opacity:1;
	transform:translateX(0);
}

.actionconnect__label{
	font-size:15px;
	font-weight:900;
	letter-spacing:0;
}

.actionconnect__number{
	margin-top:4px;
	font-size:12px;
	font-weight:900;
	opacity:.96;
}

@media (max-width: 767px){
	.actionconnect{
		top:50%;
		bottom:auto;
		transform:translateY(-50%);
		gap:8px;
	}

	.actionconnect--left{
		left:0;
	}

	.actionconnect--right{
		right:0;
	}

	.actionconnect__button,
	.actionconnect__button:hover,
	.actionconnect__button:focus-visible,
	.actionconnect__button--large,
	.actionconnect__button--large:hover,
	.actionconnect__button--large:focus-visible{
		width:54px;
		min-height:54px;
		padding-top:6px;
		padding-bottom:6px;
	}

	.actionconnect__icon{
		width:54px;
	}

	.actionconnect__icon svg{
		width:29px;
		height:29px;
	}

	.actionconnect__button--phone .actionconnect__icon svg{
		width:31px;
		height:31px;
	}

	.actionconnect__text{
		opacity:0;
		transform:translateX(6px);
		pointer-events:none;
	}

	.actionconnect__button.is-open,
	.actionconnect__button.is-open:hover,
	.actionconnect__button.is-open:focus-visible{
		width:190px;
	}

	.actionconnect__button.is-open .actionconnect__text{
		opacity:1;
		transform:none;
		pointer-events:auto;
	}
}