/* YbaSlideEditor — עיצוב עורך-השקפים המשותף (זירה · סטודיו-חופשי · סטודיו-Slides).
   שכבת-האינטראקציה בלבד: תיבות-אחיזה, ידיות, סיבוב, מתיחה, תפריט-הקשר, סרגל, גלריה. */

/* תיבת-אחיזה מעל אלמנט */
.ybse-hit { position: absolute; cursor: grab; border: 1px dashed transparent; border-radius: 3px; touch-action: none; }
.ybse-hit:hover { border-color: #60a5fa; background: rgba(96, 165, 250, .07); }
.ybse-hit.is-sel { border-color: #1d6fd8; background: rgba(29, 111, 216, .09); }
.ybse-hit.is-multi { border-color: #1d6fd8; background: rgba(29, 111, 216, .10); border-style: solid; }
.ybse-hit .ybse-content { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }

/* ידיות-גודל (8) + ידית-סיבוב */
.ybse-handle { position: absolute; width: 10px; height: 10px; background: #fff;
	border: 1.5px solid #1d6fd8; border-radius: 2px; z-index: 5; }
.ybse-handle--nw { top: -5px; left: -5px; cursor: nwse-resize; }
.ybse-handle--n  { top: -5px; left: calc(50% - 5px); cursor: ns-resize; }
.ybse-handle--ne { top: -5px; right: -5px; cursor: nesw-resize; }
.ybse-handle--e  { top: calc(50% - 5px); right: -5px; cursor: ew-resize; }
.ybse-handle--se { bottom: -5px; right: -5px; cursor: nwse-resize; }
.ybse-handle--s  { bottom: -5px; left: calc(50% - 5px); cursor: ns-resize; }
.ybse-handle--sw { bottom: -5px; left: -5px; cursor: nesw-resize; }
.ybse-handle--w  { top: calc(50% - 5px); left: -5px; cursor: ew-resize; }
.ybse-rotate { position: absolute; top: -30px; left: calc(50% - 11px); width: 22px; height: 22px;
	display: flex; align-items: center; justify-content: center; background: #fff; color: #1d6fd8;
	border: 1.5px solid #1d6fd8; border-radius: 50%; cursor: grab; font-size: 13px; z-index: 6; user-select: none; }
.ybse-rotate::after { content: ''; position: absolute; top: 21px; left: calc(50% - 1px);
	width: 1.5px; height: 9px; background: #1d6fd8; }

/* בחירת-מלבן */
.ybse-marquee { position: absolute; z-index: 20; border: 1.5px dashed #1d6fd8;
	background: rgba(29, 111, 216, .08); border-radius: 4px; pointer-events: none; }

/* עריכת-טקסט במקום */
.ybse-textedit { position: absolute; inset: 0; width: 100%; height: 100%; box-sizing: border-box;
	border: 2px solid #1d6fd8; border-radius: 6px; background: rgba(255, 255, 255, .96); resize: none;
	font-family: inherit; font-size: 14px; padding: 6px 8px; direction: rtl; z-index: 8; }

/* תפריט-הקשר (מקש ימני) */
.ybse-ctx { position: fixed; z-index: 100000; display: flex; flex-direction: column; min-width: 170px;
	background: #fff; border: 1px solid #cbd5e1; border-radius: 10px;
	box-shadow: 0 10px 28px rgba(15, 23, 42, .18); padding: 5px; }
.ybse-ctx button { border: 0; background: none; text-align: right; padding: 8px 12px; cursor: pointer;
	border-radius: 7px; font-size: 13px; color: #1e293b; font-family: inherit; }
.ybse-ctx button:hover { background: #eff6ff; color: #1d6fd8; }

/* סרגל-הכלים */
.ybse-tools { display: flex; gap: 4px; flex-wrap: nowrap; align-items: center;
	padding: 7px 10px; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px;
	overflow-x: auto; white-space: nowrap; box-shadow: 0 2px 8px rgba(15, 23, 42, .05); direction: rtl; }
.ybse-tools:not(.is-active) .ybse-grp:not(.ybse-grp--always) { opacity: .38; pointer-events: none; }
.ybse-selname { font-weight: 700; color: #1e293b; margin-inline-end: 6px; font-size: 12.5px;
	max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.ybse-grp { display: inline-flex; gap: 4px; align-items: center; padding: 0 8px;
	border-inline-start: 1px solid #e2e8f0; }
.ybse-grp.is-off { display: none; }
.ybse-grp--always { opacity: 1 !important; pointer-events: auto !important; }
.ybse-grplbl { font-size: 12px; color: #64748b; margin-inline-end: 2px; }
.ybse-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px;
	padding: 0 7px; border: 1px solid #cbd5e1; border-radius: 7px; background: #fff; color: #334155;
	cursor: pointer; font-size: 14px; line-height: 1; transition: background .12s, border-color .12s, color .12s; }
.ybse-btn:hover { background: #eff6ff; border-color: #93c5fd; color: #1d6fd8; }
.ybse-btn.is-on, .ybse-shapebtn.is-on { background: #1d6fd8; border-color: #1d6fd8; color: #fff; }
.ybse-btn svg { display: block; }
.ybse-bold b { font-size: 14px; }
.ybse-size { width: 54px; height: 30px; border: 1px solid #cbd5e1; border-radius: 7px; text-align: center; }
.ybse-font { max-width: 130px; height: 30px; border: 1px solid #cbd5e1; border-radius: 7px; }
.ybse-color { max-width: 110px; height: 30px; border: 1px solid #cbd5e1; border-radius: 7px; }
.ybse-op { width: 80px; }

/* גלריה — חלונית-צפה (לא רצועה שדוחפת עמוד): כותרת + ✕, Esc וקליק-בחוץ סוגרים */
.ybse-gal { position: fixed; top: 96px; left: 50%; transform: translateX(-50%);
	z-index: 100002; width: min(760px, 92vw); max-height: 64vh;
	display: flex; flex-direction: column; padding: 0; overflow: hidden;
	background: #fff; border: 1px solid #cbd5e1; border-radius: 14px;
	box-shadow: 0 18px 48px rgba(15, 23, 42, .25); direction: rtl; }
/* הבאג-החוזר המתועד: display על מחלקה גובר על מאפיין hidden — לכן מפורש. */
.ybse-gal[hidden] { display: none !important; }
.ybse-gal__head { display: flex; align-items: center; justify-content: space-between;
	padding: 10px 14px; border-bottom: 1px solid #e2e8f0; background: #f8fafc;
	font-size: 13.5px; font-weight: 700; color: #1e293b; flex: 0 0 auto; }
.ybse-gal__close { border: 0; background: none; cursor: pointer; font-size: 15px;
	color: #64748b; padding: 4px 8px; border-radius: 7px; line-height: 1; }
.ybse-gal__close:hover { background: #fee2e2; color: #dc2626; }
.ybse-gal__body { display: flex; gap: 8px; flex-wrap: wrap; padding: 12px;
	overflow-y: auto; flex: 1 1 auto; }
.ybse-galitem { height: 74px; border-radius: 8px; cursor: pointer; border: 2px solid transparent;
	transition: border-color .12s, transform .12s; }
.ybse-galitem:hover { border-color: #1d6fd8; transform: scale(1.04); }
.ybse-galempty { color: #94a3b8; font-size: 13px; }
.ybse-colorfree { width: 34px; height: 30px; padding: 2px; border: 1px solid #cbd5e1; border-radius: 7px; background: #fff; cursor: pointer; }
.ybse-hit { pointer-events: auto; }
.ybse-mini { font-size: 11px; color: #64748b; margin-inline-start: 4px; }
.ybse-strokefree, .ybse-gradfree { width: 30px; height: 30px; padding: 2px; border: 1px solid #cbd5e1; border-radius: 7px; background: #fff; cursor: pointer; }
.ybse-fillnone.is-on, .ybse-strokenone.is-on { background: #0f2747; border-color: #0f2747; color: #fff; }

/* נקודות-חיתוך וקטוריות (קודקודי צורת-החיתוך של תמונה) */
.ybse-vertex { position: absolute; width: 12px; height: 12px; border-radius: 999px;
	background: #7c3aed; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(15,23,42,.4);
	cursor: grab; z-index: 7; touch-action: none; }
.ybse-vertex:hover { transform: scale(1.25); background: #6d28d9; }
.ybse-vertex:active { cursor: grabbing; }