/* =====================================================================
 * „მასკოტი“ — სახელოსნო (კონსტრუქტორი)
 * ფერები და შრიფტები მოდის ადმინი → Mascot → ფერები და შრიფტები-დან.
 * ===================================================================== */
.mascot-studio {
	--ms-ink: var(--m-ink, #23264F); --ms-paper: var(--m-paper, #FBF8F3); --ms-rule: var(--m-rule, #E7E1D6);
	--ms-accent: var(--m-indigo, #475095); --ms-yellow: var(--m-yellow, #FFD43B);
	position: relative; margin: 0 0 32px; padding: 18px; border-radius: 26px; background: #fff; color: var(--ms-ink);
	box-shadow: var(--m-shadow, 0 22px 44px -24px rgba(10,12,52,.65)); font-family: var(--m-font-body, system-ui, sans-serif); font-size: 16px; line-height: 1.4;
}
.mascot-studio *, .mascot-studio *:before, .mascot-studio *:after { box-sizing: border-box; }
.mascot-studio button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.mascot-studio button:focus-visible { outline: 3px solid var(--m-blue, #26CAEF); outline-offset: 2px; }
.mascot-studio .mascot-icon { width: 22px; height: 22px; flex: none; }

/* ზედა ზოლი */
.ms-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin: 0 0 14px; }
.ms-group { display: flex; flex-wrap: wrap; gap: 8px; }
.ms-btn {
	display: inline-flex; align-items: center; gap: 7px; padding: 10px 16px; border: 1.5px solid var(--ms-rule); border-radius: 999px;
	background: #fff; font-weight: 600 !important; font-size: 15px !important; transition: background .15s ease, transform .15s ease;
}
.ms-btn:hover { background: var(--ms-paper); }
.ms-btn:active { transform: scale(.97); }
.ms-btn:disabled { opacity: .35; cursor: default; }
.ms-btn.is-main { background: var(--ms-yellow); border-color: var(--ms-yellow); box-shadow: 0 3px 0 rgba(0,0,0,.12); }
.ms-btn.is-danger { color: #C62828; }

/* ხელსაწყოები და ნახატი */
.ms-body { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: start; }
.ms-tools { display: flex; flex-direction: column; gap: 6px; }
.ms-tool {
	display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; border: 0; border-radius: 18px;
	background: var(--ms-paper); font-weight: 600 !important; font-size: 12.5px !important; line-height: 1.15; text-align: center;
	transition: background .15s ease, color .15s ease, transform .15s ease;
}
.ms-tool .mascot-icon { width: 28px; height: 28px; }
.ms-tool:hover { transform: translateY(-1px); }
.ms-tool.is-active { background: var(--ms-accent); color: #fff; box-shadow: 0 8px 18px -10px var(--ms-accent); }
.ms-main { min-width: 0; }
.ms-stage-wrap { position: relative; border-radius: 20px; overflow: hidden; background: #fff; box-shadow: inset 0 0 0 2px var(--ms-rule); }
.ms-stage { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; touch-action: none; user-select: none; -webkit-user-select: none; }
.mascot-studio[data-active-tool="brush"] .ms-stage, .mascot-studio[data-active-tool="shapes"] .ms-stage { cursor: crosshair; }
.mascot-studio[data-active-tool="fill"] .ms-stage, .mascot-studio[data-active-tool="eraser"] .ms-stage { cursor: pointer; }
.mascot-studio[data-active-tool="select"] .ms-stage [data-id] { cursor: move; }
.ms-sel rect { fill: none; stroke: var(--ms-accent); stroke-width: 3; stroke-dasharray: 12 9; }
.ms-sel line { stroke: var(--ms-accent); stroke-width: 3; }
.ms-handle { fill: #fff; stroke: var(--ms-accent); stroke-width: 5; cursor: grab; }
.ms-handle[data-handle="scale"] { cursor: nwse-resize; }

/* ფერები */
.ms-palette { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 10px; }
.ms-swatch {
	width: 40px; height: 40px; padding: 0; border-radius: 50%; border: 3px solid #fff; background: var(--c);
	box-shadow: 0 0 0 1.5px var(--ms-rule); transition: transform .15s ease, box-shadow .15s ease;
}
.ms-swatch.is-active { transform: scale(1.12); box-shadow: 0 0 0 3px var(--ms-ink); }

/* ქვედა ზოლი: ზომები, ფიგურები, სტიკერები, შაბლონები, ფონები */
.ms-tray { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 72px; padding: 10px; border-radius: 18px; background: var(--ms-paper); }
.ms-chip {
	display: grid; place-items: center; width: 68px; height: 68px; padding: 6px; border: 2px solid transparent; border-radius: 16px;
	background: #fff; box-shadow: 0 1px 0 var(--ms-rule); transition: transform .15s ease, border-color .15s ease;
}
.ms-chip:hover { transform: translateY(-2px); }
.ms-chip.is-active { border-color: var(--ms-accent); }
.ms-chip svg, .ms-chip img { display: block; max-width: 100%; max-height: 100%; width: 100%; height: 100%; object-fit: contain; }
.ms-chip[data-filled] { width: auto; height: 44px; padding: 0 16px; font-weight: 600; font-size: 14px; }
.ms-chip[data-size] { width: 52px; height: 52px; }
.ms-chip[data-size] i { display: block; border-radius: 50%; background: var(--ms-ink); }
.ms-chip[data-bgkey] { width: 96px; height: 72px; padding: 4px; }
.ms-chip[data-bgkey] svg { border-radius: 10px; }
.ms-chip[data-template] { width: 88px; height: 88px; }
.ms-label { font-weight: 600; font-size: 14px; margin-right: 4px; }
.ms-hint { font-size: 14px; color: var(--m-muted, #6A6D8E); padding: 0 6px; }
.ms-sep { width: 1px; height: 40px; background: var(--ms-rule); margin: 0 4px; }
.ms-saved { display: inline-flex; flex-direction: column; gap: 6px; padding: 6px; border-radius: 14px; background: #fff; box-shadow: 0 1px 0 var(--ms-rule); }
.ms-saved img { display: block; width: 150px; height: auto; border-radius: 10px; }
.ms-saved > span { display: flex; gap: 6px; }
.ms-mini { flex: 1; padding: 6px 8px; border: 1.5px solid var(--ms-rule); border-radius: 999px; background: #fff; font-size: 13px !important; font-weight: 600 !important; }
.ms-mini.is-danger { color: #C62828; }

.ms-toast {
	position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 9998; margin: 0; padding: 12px 22px; border-radius: 999px;
	background: var(--ms-ink); color: #fff !important; font-weight: 600; font-size: 16px; box-shadow: 0 14px 30px -14px rgba(0,0,0,.6);
	transform: translate(-50%, 140%); opacity: 0; transition: transform .25s ease, opacity .25s ease; pointer-events: none;
}
.ms-toast.is-on { transform: translate(-50%, 0); opacity: 1; }

@media (max-width: 860px) {
	.mascot-studio { padding: 12px; border-radius: 20px; }
	.ms-body { grid-template-columns: minmax(0, 1fr); gap: 10px; }
	/* ყველა ხელსაწყო ერთად ჩანს (გვერდით გადასრიალება არ სჭირდება) */
	.ms-tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 6px; overflow: visible; }
	.ms-tool { min-width: 0; padding: 8px 2px; }
	.ms-tool span { max-width: 100%; overflow-wrap: anywhere; font-size: 11.5px !important; }
	.ms-btn { padding: 9px 12px; }
}
@media (max-width: 560px) {
	.ms-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.ms-btn.is-main span { position: static; width: auto; height: auto; clip: auto; }
	.ms-swatch { width: 34px; height: 34px; }
	.ms-chip { width: 58px; height: 58px; }
}
@media (prefers-reduced-motion: reduce) {
	.ms-btn, .ms-tool, .ms-chip, .ms-swatch, .ms-toast { transition: none; }
}


/* ბიბლიოთეკის ჯგუფები */
.ms-tray { max-height: 320px; overflow-y: auto; }
.ms-cats { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; margin: 0 0 4px; }
.ms-cat {
	padding: 6px 14px; border: 1.5px solid var(--ms-rule); border-radius: 999px; background: #fff;
	font-weight: 600 !important; font-size: 14px !important; line-height: 1.3;
}
.ms-cat.is-active { background: var(--ms-accent); border-color: var(--ms-accent); color: #fff; }
.ms-break { flex-basis: 100%; height: 0; }

/* ნახატი ყოველთვის 4:3 და ეკრანში ეტევა, თემის CSS-ის მიუხედავად */
.mascot-studio .ms-stage-wrap{width:100%;max-width:max(480px,calc((100vh - 150px)*4/3));margin:0 auto;aspect-ratio:4/3;height:auto!important}
.mascot-studio .ms-stage{position:absolute!important;top:0;left:0;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;margin:0!important}

/* სრული ეკრანი */
.mascot-studio.is-full { position: fixed !important; inset: 0 !important; z-index: 999999 !important; margin: 0 !important; max-width: none !important; width: 100% !important; height: 100% !important; overflow: auto !important; border-radius: 0 !important; background: #fff !important; padding: 12px !important; }
html.ms-full-open, html.ms-full-open body { overflow: hidden !important; }
.mascot-studio.is-full [data-act="full"] { background: var(--ms-accent, #475095); color: #fff; }

/* კომპიუტერზე: სახელოსნო ფართოა (Divi-ის რიგი ფართოვდება), ფერები და არჩევანი დაფის გვერდით */
@media (min-width: 1100px) {
	body .et_pb_row:has(.mascot-studio), body .et_pb_row:has([data-mascot-studio]) { width: 96% !important; max-width: 1800px !important; }
	.ms-main { display: grid; grid-template-columns: minmax(0, 1fr) 300px; grid-template-rows: min-content 1fr; column-gap: 16px; align-items: start; }
	.ms-stage-wrap { grid-column: 1; grid-row: 1 / span 2; }
	.ms-palette { grid-column: 2; grid-row: 1; margin: 0 0 12px; }
	.ms-tray { grid-column: 2; grid-row: 2; max-height: calc(100vh - 220px); overflow-y: auto; align-content: flex-start; }
	.mascot-studio.is-full .ms-tray { max-height: calc(100vh - 200px); }
}