/* ==========================================================================
   Evokey Services Accordion
   ========================================================================== */
.evk-acc{
	--evk-radius:18px;
	--evk-collapsed:96px;
	--evk-height:600px;
	--evk-gap:0px;
	--evk-border:#e6e6e6;
	--evk-bg:#ffffff;
	--evk-bg-collapsed:linear-gradient(180deg,#f4f6f9 0%,#eef1f5 100%);
	--evk-text:#111111;
	--evk-title-color:#111111;
	--evk-muted:#6b7280;
	--evk-tag-border:#dcdcdc;
	--evk-ease:cubic-bezier(.16,1,.3,1);
	--evk-dur:.75s;
	--evk-thumb-height:260px;
	--evk-side-size:30px;
	--evk-label-size:12px;
	--evk-label-color:var(--evk-text);
	--evk-num-size:12px;
	--evk-num-color:var(--evk-muted);
	--evk-desc-size:16px;
	--evk-tag-size:14px;
	--evk-tag-color:var(--evk-text);
	--evk-tag-bg:#ffffff;
	--evk-collapsed-height:72px;

	display:flex;
	gap:var(--evk-gap);
	width:100%;
	height:var(--evk-height);
	border:1px solid var(--evk-border);
	border-radius:var(--evk-radius);
	overflow:hidden;
	box-sizing:border-box;
	font-family:inherit;
}
.evk-acc *{box-sizing:border-box}

/* ---- Panel ------------------------------------------------------------- */
.evk-panel{
	position:relative;
	flex:0 0 var(--evk-collapsed);
	min-width:var(--evk-collapsed);
	background:var(--evk-bg-collapsed);
	border-inline-start:1px solid var(--evk-border);
	cursor:pointer;
	overflow:hidden;
	transition:flex-basis var(--evk-dur) var(--evk-ease), min-width var(--evk-dur) var(--evk-ease);
	outline:none;
}
.evk-panel:first-child{border-inline-start:none}

.evk-panel.is-active{
	flex:1 1 auto;
	min-width:0;
	background:var(--evk-bg);
	cursor:default;
}

/* ---- Head (SERVICE ——— (01)) ------------------------------------------ */
.evk-panel-head{
	display:flex;
	align-items:center;
	gap:12px;
	padding:26px 28px 0;
	opacity:0;
	transform:translateY(-6px);
	transition:opacity .15s ease, transform .15s ease; /* exit سريع */
	pointer-events:none;
}
.evk-panel.is-active .evk-panel-head{
	opacity:1;
	transform:none;
	transition:opacity .35s ease .18s, transform .4s var(--evk-ease) .18s; /* enter متأخر بسيط */
}
.evk-label{font-size:var(--evk-label-size);font-weight:600;letter-spacing:.14em;color:var(--evk-label-color);white-space:nowrap}
.evk-line{flex:1;height:1px;background:var(--evk-border)}
.evk-num{font-size:var(--evk-num-size);font-weight:600;color:var(--evk-num-color);white-space:nowrap}

/* ---- Body -------------------------------------------------------------- */
.evk-panel-body{
	position:absolute;
	inset:70px 28px 28px;
	display:flex;
	flex-direction:column;
	opacity:0;
	transform:translateY(10px);
	transition:opacity .15s ease, transform .15s ease; /* exit سريع */
	pointer-events:none;
	min-width:0;
}
.evk-panel.is-active .evk-panel-body{
	opacity:1;
	transform:none;
	pointer-events:auto;
	transition:opacity .4s ease .2s, transform .45s var(--evk-ease) .2s; /* enter متأخر بسيط */
}

.evk-thumb{
	width:100%;
	flex:0 0 auto;
	height:var(--evk-thumb-height,260px);
	background-size:cover;
	background-position:center;
	border-radius:12px;
	margin-bottom:22px;
}
.evk-acc .evk-panel .evk-title{
	margin:0 0 12px;
	font-size:var(--evk-title-size,34px);
	line-height:1.1;
	font-weight:800;
	color:var(--evk-title-color,var(--evk-text)) !important;
}
.evk-desc{
	margin:0 0 20px;
	font-size:var(--evk-desc-size);
	line-height:1.55;
	color:var(--evk-muted);
	max-width:520px;
}
.evk-tags{display:flex;flex-wrap:wrap;gap:12px}
.evk-tag{
	display:inline-flex;
	align-items:center;
	padding:9px 16px;
	border:1px solid var(--evk-tag-border);
	border-radius:8px;
	font-size:var(--evk-tag-size);
	color:var(--evk-tag-color);
	background:var(--evk-tag-bg);
	white-space:nowrap;
}

/* ---- Side (vertical text) --------------------------------------------- */
.evk-side{
	position:absolute;
	inset:0;
	display:flex;
	align-items:flex-end;
	justify-content:center;
	padding-bottom:34px;
	opacity:1;
	transition:opacity .3s ease .12s; /* يظهر عند الإغلاق بتأخير بسيط */
}
.evk-side span{
	writing-mode:vertical-rl;
	transform:rotate(180deg);
	font-size:var(--evk-side-size,30px);
	font-weight:800;
	line-height:1;
	color:var(--evk-text);
	white-space:nowrap;
	letter-spacing:.01em;
}
.evk-panel.is-active .evk-side{
	opacity:0;
	pointer-events:none;
	transition:opacity .15s ease; /* يختفي فورًا عند الفتح */
}

/* ---- Hover cue على المطوية -------------------------------------------- */
.evk-acc[data-trigger="hover"] .evk-panel:not(.is-active):hover{background:linear-gradient(180deg,#eef1f5 0%,#e7ebf1 100%)}

/* ==========================================================================
   Direction (LTR / RTL)
   ========================================================================== */
.evk-acc{direction:ltr}
.evk-acc.evk-rtl{direction:rtl}
.evk-desc{text-align:start}
.evk-acc.evk-rtl .evk-side span{transform:rotate(0deg);writing-mode:vertical-rl}

/* ==========================================================================
   Vertical mode — يتفعّل عبر JS (.evk-vertical) لما ما تكفي المساحة
   ========================================================================== */
.evk-acc.evk-vertical{
	flex-direction:column;
	height:auto;
	overflow:visible;
}
.evk-acc.evk-vertical .evk-panel{
	flex:0 0 auto;
	min-width:0;
	min-height:var(--evk-collapsed-height,72px);
	border-inline-start:none;
	border-top:1px solid var(--evk-border);
	transition:min-height var(--evk-dur) var(--evk-ease);
}
.evk-acc.evk-vertical .evk-panel:first-child{border-top:none}
.evk-acc.evk-vertical .evk-panel.is-active{min-height:auto}
.evk-acc.evk-vertical .evk-panel-body{
	position:static;
	inset:auto;
	min-width:0;
	padding:0 22px 26px;
}
.evk-acc.evk-vertical .evk-panel-head{padding:22px 22px 0}
/* العنوان الجانبي يصير أفقي داخل الشريط المطوي */
.evk-acc.evk-vertical .evk-side{
	align-items:center;
	justify-content:flex-start;
	padding:0 22px;
}
.evk-acc.evk-vertical .evk-side span{
	writing-mode:horizontal-tb;
	transform:none;
	font-size:calc(var(--evk-side-size,30px) * .7);
}

/* No-JS fallback: لو ما اشتغل JS، ستاك تحت 1080 */
@media (max-width:1079px){
	.evk-acc:not(.evk-vertical){flex-direction:column;height:auto;overflow:visible}
	.evk-acc:not(.evk-vertical) .evk-panel{flex:0 0 auto;min-width:0;min-height:var(--evk-collapsed-height,72px);border-inline-start:none;border-top:1px solid var(--evk-border)}
	.evk-acc:not(.evk-vertical) .evk-panel.is-active{min-height:auto}
	.evk-acc:not(.evk-vertical) .evk-panel-body{position:static;inset:auto;min-width:0;padding:0 22px 26px}
	.evk-acc:not(.evk-vertical) .evk-side span{writing-mode:horizontal-tb;transform:none;font-size:calc(var(--evk-side-size,30px) * .7)}
}