/* =========================================================================
   كالنبتة — الإشعارات | الجرس + النوافذ
   الألوان من متغيّرات Elementor العامة للموقع مع قيم احتياطية.
   ====================================================================== */

.knbn {
	--knbn-green: var(--e-global-color-el_color_1_4, #6F8756);
	--knbn-accent: var(--e-global-color-el_color_1, #586D43);
	--knbn-deep: var(--e-global-color-el_color_1_2, #425232);
	--knbn-ink: var(--e-global-color-el_color_7, #2C3722);
	--knbn-body: var(--e-global-color-el_color_7_1, #6C7863);
	--knbn-line: var(--e-global-color-el_color_7_4, #E7E6E3);
	--knbn-soft: var(--e-global-color-el_color_7_6, #F3F4EF);
	--knbn-font: var(--e-global-typography-el_content_1-font-family, "Thmanyah-Font-Family"), serif;
	--knbn-title-font: var(--e-global-typography-el_title_2-font-family, "Thmanyah-Font-Family"), serif;

	direction: rtl;
	font-family: var(--knbn-font);
	box-sizing: border-box;
}

.knbn *, .knbn *::before, .knbn *::after { box-sizing: border-box; }

.knbn .knbn-i { width: 22px; height: 22px; flex: none; }

/* --------------------------------------------------------------- الجرس */

.knbn-bell {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 0;
	margin: 0;
	background: none;
	border: 0;
	color: inherit;
	font: inherit;
	cursor: pointer;
	line-height: 1;
	transition: opacity .2s ease;
}

.knbn-bell:hover { opacity: .75; }

/* الجرس داخل ويدجت Elementor بجوار أيقونات التواصل في الفوتر.
   القيم قابلة للتجاوز من محرر Elementor أو من CSS الطفل. */
/* التمركز يتم على الغلاف، والزر نفسه بعرض محتواه فقط
   حتى لا تفتح النافذة عند نقرة عابرة على مساحة فارغة في الفوتر. */
.elementor-widget-knbn-bell {
	margin-top: 8px;
	text-align: center;   /* الزر inline-flex فيتمركز بهذا وحده */
}

/* بعض إصدارات Elementor تلفّ الويدجت بحاوية إضافية بعرض كامل */
.elementor-widget-knbn-bell > .elementor-widget-container {
	display: flex;
	justify-content: center;
}

.elementor-widget-knbn-bell .knbn-bell {
	display: inline-flex;
	align-items: center;
	width: auto;
	min-height: 28px;                       /* نفس ارتفاع أيقونات التواصل */
	color: var(--knbn-footer-color, #fff);  /* أيقونات التواصل بيضاء على أرضية الفوتر */
}

.elementor-widget-knbn-bell .knbn-bell:hover { color: var(--knbn-footer-color, #fff); opacity: .7; }

.elementor-widget-knbn-bell .knbn-i {
	width: 20px;
	height: 20px;
	stroke-width: 1.9;                      /* يوازن وزن أيقونات الخط المصمتة */
}

/* النص بجوار الجرس: بنفس مواصفات روابط قائمة الفوتر ليقرأ كعنصر واحد معها */
.elementor-widget-knbn-bell .knbn-bell { gap: 7px; }

.elementor-widget-knbn-bell .knbn-bell__label {
	font-size: 16px;
	font-weight: 300;
	line-height: 1.4;
}

/* الحقن التلقائي في الفوتر: يتموضع تحت أيقونات التواصل بنفس المحاذاة */
.knbn-auto-slot {
	display: flex;
	justify-content: center;
	margin-top: 14px;
	width: 100%;
}


.knbn-bell__icon { position: relative; display: inline-flex; }

.knbn-bell__label { font-size: 15px; }

/* نقطة خضراء تظهر حين يكون المستخدم مشتركاً */
.knbn-dot {
	position: absolute;
	inset-inline-end: -2px;
	top: -1px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #6FBF73;
	box-shadow: 0 0 0 2px rgba(255, 255, 255, .9);
}

/* ------------------------------------------------------------ الطبقة */

.knbn-overlay {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(30, 38, 25, .55);
	backdrop-filter: blur(2px);
	animation: knbn-fade .2s ease;
}

.knbn-overlay[hidden] { display: none; }

@keyframes knbn-fade { from { opacity: 0 } to { opacity: 1 } }

/* ----------------------------------------------------------- النافذة */

.knbn-modal {
	position: relative;
	width: 100%;
	max-width: 420px;
	max-height: 90vh;
	overflow-y: auto;
	padding: 34px 28px 26px;
	background: #fff;
	border-radius: 22px;
	box-shadow: 0 24px 60px rgba(20, 28, 16, .28);
	text-align: center;
	animation: knbn-pop .22s ease;
}

.knbn-modal[hidden] { display: none; }

@keyframes knbn-pop { from { transform: translateY(10px) scale(.98); opacity: 0 } to { transform: none; opacity: 1 } }

.knbn-close {
	position: absolute;
	inset-inline-start: 16px;
	top: 16px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	background: var(--knbn-soft);
	border: 0;
	border-radius: 50%;
	color: var(--knbn-body);
	cursor: pointer;
}

.knbn-close .knbn-i { width: 15px; height: 15px; }
.knbn-close:hover { background: var(--knbn-line); }

.knbn-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 74px;
	height: 74px;
	margin-bottom: 18px;
	background: var(--knbn-green);
	border-radius: 50%;
	color: #fff;
}

.knbn-badge .knbn-i { width: 34px; height: 34px; }

.knbn-title {
	margin: 0 0 8px;
	font-family: var(--knbn-title-font);
	font-size: 22px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--knbn-accent);
}

.knbn-sub {
	margin: 0;
	font-size: 14px;
	line-height: 1.8;
	color: var(--knbn-body);
}

.knbn-state {
	margin: 18px 0 0;
	padding: 10px 12px;
	background: var(--knbn-soft);
	border-radius: 8px;
	font-size: 12.5px;
	line-height: 1.7;
	color: var(--knbn-body);
}

.knbn-state.is-on { background: #EDF4E9; color: #46722F; }
.knbn-state.is-blocked { background: #FFF3F1; color: #A8412F; }

/* ------------------------------------------------------------ الأزرار */

.knbn-actions {
	display: flex;
	gap: 10px;
	justify-content: center;
	margin-top: 20px;
}

.knbn-btn {
	min-width: 118px;
	padding: 13px 26px;
	border: 1px solid transparent;
	border-radius: 6px;
	font-family: inherit;
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
	transition: background .2s ease, color .2s ease;
}

.knbn-btn.is-primary { background: var(--knbn-accent); color: #fff; }
.knbn-btn.is-primary:hover { background: var(--knbn-deep); }
.knbn-btn.is-primary[disabled] { opacity: .6; cursor: default; }

.knbn-btn.is-ghost { background: #fff; border-color: var(--knbn-line); color: var(--knbn-body); }
.knbn-btn.is-ghost:hover { background: var(--knbn-soft); }

.knbn-link {
	display: inline-block;
	margin-top: 18px;
	padding: 0;
	background: none;
	border: 0;
	color: var(--knbn-accent);
	font: inherit;
	font-size: 13px;
	text-decoration: underline;
	cursor: pointer;
}

.knbn-link[hidden] { display: none; }

/* رابط إيقاف الإشعارات: هادئ ومحايد حتى لا يُضغط بالخطأ مكان زر التفعيل */
.knbn-link.is-quiet {
	color: var(--knbn-body);
	font-size: 12.5px;
	opacity: .75;
}

.knbn-link.is-quiet:hover { opacity: 1; }

.knbn-btn[hidden] { display: none; }

/* -------------------------------------------------------- دليل iPhone */

/* عنوان نافذة آيفون: يحلّ محل العنوان والسطر الفرعي معاً، فيأخذ مساحة أكبر */
.knbn-title.is-ios {
	margin-bottom: 22px;
	font-size: 21px;
	line-height: 1.6;
}

.knbn-steps {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 10px;
	text-align: start;
}

.knbn-steps li {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	border: 1px solid var(--knbn-line);
	border-radius: 10px;
}

.knbn-step__icon { display: inline-flex; color: var(--knbn-green); }

.knbn-step__body { display: flex; flex-direction: column; gap: 2px; }
.knbn-step__body strong { font-size: 14px; font-weight: 500; color: var(--knbn-ink); }
.knbn-step__body em { font-style: normal; font-size: 12px; color: var(--knbn-body); }

@media (max-width: 480px) {
	.knbn-modal { padding: 30px 18px 22px; border-radius: 18px; }
	.knbn-badge { width: 62px; height: 62px; }
	.knbn-title { font-size: 19px; }
	.knbn-title.is-ios { font-size: 19px; margin-bottom: 18px; }
	.knbn-actions { flex-direction: column-reverse; }
	.knbn-btn { width: 100%; }
}