/* بارگذاری فونت ساحل با قابلیت Swap برای جایگزینی سریع */
@font-face {
    font-family: 'Sahel';
    src: url('https://cdn.jsdelivr.net/gh/rastikerdar/sahel-font@v3.4.0/dist/Sahel.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    /* این دستور به مرورگر می‌گوید: تا زمانی که فونت ساحل دانلود نشده، از فونت جایگزین استفاده کن */
    font-display: swap; 
}

@font-face {
    font-family: 'Sahel';
    src: url('https://cdn.jsdelivr.net/gh/rastikerdar/sahel-font@v3.4.0/dist/Sahel-Bold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

/* ایزوله کردن محیط برنامه از قالب اصلی وردپرس */
.gama-editor-container {
    /* اگر فونت ساحل لود نشود یا تاخیر داشته باشد، Tahoma بلافاصله نمایش داده می‌شود */
    font-family: 'Sahel', Tahoma, sans-serif !important;
    background-color: #09090b;
    color: #f4f4f5;
    direction: rtl;
    /* ارتفاع روی 85vh تنظیم شده تا به زیبایی درون بدنه برگه‌های سایت جا بگیرد */
    height: 85vh; 
    min-height: 600px;
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
    display: flex;
    flex-direction: column;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    line-height: 1.5;
    box-sizing: border-box;
    margin: 20px 0;
}

.gama-editor-container * { box-sizing: border-box; }

/* مخفی کردن نوار اسکرول در محیط برنامه */
.gama-editor-container .no-scrollbar::-webkit-scrollbar { display: none; }
.gama-editor-container .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* استایل‌دهی اسلایدرها و اینپوت‌ها به صورت ایزوله */
.gama-editor-container input[type=range] { -webkit-appearance: none; width: 100%; background: transparent; margin: 0; touch-action: none; }
.gama-editor-container input[type=range]:focus { outline: none; }
.gama-editor-container input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none; height: 28px; width: 28px; border-radius: 50%; background: #ffffff;
    cursor: pointer; margin-top: -11px; box-shadow: 0 2px 10px rgba(0,0,0,0.5); border: 4px solid #18181b;
    transition: transform 0.1s, background 0.1s;
}
.gama-editor-container input[type=range]::-webkit-slider-thumb:active { transform: scale(1.15); background: #3b82f6; border-color: #ffffff; }
.gama-editor-container input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 6px; background: #3f3f46; border-radius: 3px; }
.gama-editor-container input[type=range].mini-slider::-webkit-slider-thumb { height: 20px; width: 20px; margin-top: -7px; border-width: 2px; }

.gama-editor-container .hidden-element { display: none !important; }
.gama-editor-container #canvas-wrapper { cursor: pointer; touch-action: none; }

.gama-editor-container .loader {
    border: 3px solid rgba(255,255,255,0.1); border-left-color: #3b82f6; border-radius: 50%;
    width: 16px; height: 16px; animation: spin 1s linear infinite;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

.gama-editor-container .bg-checkered {
    background-color: #09090b;
    background-image: linear-gradient(45deg, #121214 25%, transparent 25%), linear-gradient(-45deg, #121214 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #121214 75%), linear-gradient(-45deg, transparent 75%, #121214 75%);
    background-size: 20px 20px; background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

.gama-editor-container .tool-btn.active { color: #3b82f6; }
.gama-editor-container .tool-btn.active .icon-wrapper { background-color: rgba(59, 130, 246, 0.15); border-color: rgba(59, 130, 246, 0.4); }

.gama-editor-container #crop-overlay { position: absolute; overflow: hidden; pointer-events: none; }
.gama-editor-container #crop-box {
    position: absolute; border: 2px solid #3b82f6; pointer-events: auto;
    box-shadow: 0 0 0 9999px rgba(0,0,0,0.65);
}
.gama-editor-container .crop-handle {
    position: absolute; width: 20px; height: 20px; background: #ffffff;
    border: 3px solid #3b82f6; border-radius: 50%; pointer-events: auto; z-index: 10;
}
.gama-editor-container .crop-handle.nw { top: -10px; left: -10px; cursor: nwse-resize; }
.gama-editor-container .crop-handle.ne { top: -10px; right: -10px; cursor: nesw-resize; }
.gama-editor-container .crop-handle.sw { bottom: -10px; left: -10px; cursor: nesw-resize; }
.gama-editor-container .crop-handle.se { bottom: -10px; right: -10px; cursor: nwse-resize; }

.gama-editor-container .custom-input {
    background: #18181b; border: 1px solid #3f3f46; color: #fff;
    border-radius: 8px; outline: none; transition: border-color 0.2s;
}
.gama-editor-container .custom-input:focus { border-color: #3b82f6; }
.gama-editor-container .resize-input { text-align: center; padding: 6px; width: 100%; font-family: monospace; }
.gama-editor-container .filename-input { padding: 6px 8px; width: 100%; font-size: 12px; }
@media (min-width: 640px) { .gama-editor-container .filename-input { width: 130px; font-size: 13px; } }