/* افزونه‌های محصول کیپ‌سیل — استایل فرانت */
.ksa-addon-group {
	margin: 14px 0;
	padding: 12px 14px;
	border: 1px solid #eee;
	border-radius: 10px;
	background: #fafafa;
}
.ksa-addon-title {
	display: block;
	font-weight: 700;
	margin-bottom: 8px;
	color: #2d3436;
}
.ksa-addon-title .ksa-req { color: #e74c3c; }
.ksa-addon-options {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.ksa-addon-option {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 12px;
	border: 1px solid #ddd;
	border-radius: 8px;
	background: #fff;
	cursor: pointer;
	transition: all .15s ease;
}
.ksa-addon-option:hover { border-color: #b2bec3; }
.ksa-addon-option input { margin: 0; }
.ksa-addon-option small { color: #e67e22; }
.ksa-addon-option.ksa-disabled {
	opacity: .35;
	pointer-events: none;
	filter: grayscale(100%);
}
.ksa-addon-input + .ksa-addon-label { user-select: none; }
select.ksa-addon-input {
	min-width: 220px;
	padding: 8px;
	border-radius: 8px;
	border: 1px solid #ddd;
}
.ksa-addon-upload {
	margin-top: 10px;
	padding: 10px;
	border: 1px dashed #f39c12;
	border-radius: 8px;
	background: #fff8ef;
}
.ksa-addon-upload label {
	display: block;
	font-size: 13px;
	margin-bottom: 6px;
	color: #b9770e;
}

/* ===== ویدیوی آموزشی گروه افزونه ===== */
.ksa-addon-video {
	position: relative; display: inline-flex; flex-direction: column; align-items: center;
	gap: 6px; margin: 8px 0 4px; padding: 0; border: none; background: none; cursor: pointer;
	width: 100%; max-width: 240px;
}
.ksa-addon-video .ksa-video-thumb {
	width: 100%; height: auto; border-radius: 10px; display: block;
	box-shadow: 0 4px 14px rgba(15,23,42,.15); transition: transform .25s, box-shadow .25s;
}
.ksa-addon-video:hover .ksa-video-thumb { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(15,23,42,.22); }
.ksa-addon-video .ksa-video-play {
	position: absolute; top: calc(50% - 12px); left: 50%; transform: translate(-50%,-50%);
	width: 54px; height: 54px; border-radius: 50%; background: rgba(0,115,170,.92);
	box-shadow: 0 4px 14px rgba(0,0,0,.3); transition: transform .2s, background .2s;
}
.ksa-addon-video .ksa-video-play::after {
	content: ""; position: absolute; top: 50%; left: 54%; transform: translate(-50%,-50%);
	border-style: solid; border-width: 9px 0 9px 15px; border-color: transparent transparent transparent #fff;
}
.ksa-addon-video:hover .ksa-video-play { transform: translate(-50%,-50%) scale(1.08); background: #0073aa; }
.ksa-addon-video .ksa-video-caption { font-size: 13px; font-weight: 700; color: #0073aa; }
/* اگر تامبنیل نبود، فقط دکمه‌ی متنی */
.ksa-addon-video:not(:has(.ksa-video-thumb)) { flex-direction: row; max-width: none; }
.ksa-addon-video:not(:has(.ksa-video-thumb)) .ksa-video-play { position: static; transform: none; width: 34px; height: 34px; }
.ksa-addon-video:not(:has(.ksa-video-thumb)):hover .ksa-video-play { transform: scale(1.08); }

.ksa-video-modal { position: fixed; inset: 0; z-index: 99999999; display: flex; align-items: center; justify-content: center; }
.ksa-video-modal[hidden] { display: none; }
.ksa-video-overlay { position: absolute; inset: 0; background: rgba(15,23,42,.82); backdrop-filter: blur(4px); }
.ksa-video-dialog {
	position: relative; z-index: 2; width: 92%; max-width: 860px; background: #000;
	border-radius: 14px; overflow: hidden; box-shadow: 0 30px 70px rgba(0,0,0,.5);
}
.ksa-video-head { color: #fff; font-weight: 700; padding: 12px 48px 10px 16px; background: #0f172a; font-size: 14px; }
.ksa-video-head:empty { display: none; }
.ksa-video-player { display: block; width: 100%; max-height: 80vh; background: #000; }
.ksa-video-close {
	position: absolute; top: 8px; left: 12px; z-index: 3; background: none; border: none;
	color: #fff; font-size: 30px; line-height: 1; cursor: pointer; opacity: .85;
}
.ksa-video-close:hover { opacity: 1; }