/* assets/css/style.css */

/* Import Vazirmatn Font from CDN */
/* این خط، فونت وزیر را مستقیماً از یک سرور خارجی لود می‌کند */
@import url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/css/Vazirmatn-Variable.css');


/* CSS Variables for Light/Dark Mode */
/* تعریف متغیرهای CSS برای رنگ‌ها و سایه‌ها در حالت روشن (پیش‌فرض) */
:root {
    --background-color: #f5f7fa; /* پس‌زمینه روشن‌تر و مدرن‌تر */
    --background-color-darker: #e9eff4; /* رنگ کمی تیره‌تر برای پس‌زمینه لودینگ */
    --text-color: #2c3e50; /* متن تیره‌تر برای کنتراست بهتر */
    --heading-color: #1a2c3e;
    --text-color-light: #5a6a7a;
    --text-color-muted: #8899a8;
    --panel-bg-color: #ffffff;
    --panel-border-color: #e0e6ed;
    --card-bg-color: #fcfdfe;
    --card-inner-bg-color: #f7f9fc;
    --border-color: #e6eef5;
    --primary-color: #6a5acd; /* بنفش جذاب */
    --primary-dark-color: #5a4bbd;
    --button-text-color: #fff;
    --input-bg-color: #f0f4f8;
    --input-border-color: #d1d9e0;
    --box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08); /* سایه عمیق‌تر و نرم‌تر */
    --hover-shadow: 0 8px 16px rgba(0, 0, 0, 0.15); /* سایه برجسته‌تر در هاور */
    --textarea-bg-color: #eef2f7;
    --textarea-border-color: #cdd5df;
    --code-bg-color: #e9ecef;
    --info-message-color: #3498db; /* آبی پررنگ‌تر برای پیام‌ها */
    --success-message-color: #2ecc71; /* سبز برای موفقیت */
    --error-message-color: #e74c3c; /* قرمز برای خطا */
    --primary-color-rgb: 106, 90, 205; /* نسخه RGB برای استفاده در RGBA (برای سایه‌ها) */

    /* Rain Animation Colors (No longer used, but kept for reference if needed later) */
    /*
    --rain-color-light: rgba(174, 194, 224, 0.6);
    --rain-color-dark: rgba(100, 149, 237, 0.4);
    */

    /* Background Image Overlay Colors */
    --bg-overlay-start: rgba(255, 255, 255, 0.2); /* سفید شفاف برای حالت روشن */
    --bg-overlay-end: rgba(255, 255, 255, 0.6);   /* سفید نیمه شفاف برای حالت روشن */
}

/* تعریف متغیرهای CSS برای رنگ‌ها و سایه‌ها در حالت تاریک (dark-mode) */
body.dark-mode {
    --background-color: #21252b;
    --background-color-darker: #1a1e23; /* رنگ کمی تیره‌تر برای پس‌زمینه لودینگ در دارک مود */
    --text-color: #e0e0e0;
    --heading-color: #f0f0f0;
    --text-color-light: #cccccc; /* رنگ روشن‌تر برای متن در دارک مود */
    --text-color-muted: #aaaaaa;
    --panel-bg-color: #2c313a;
    --panel-border-color: #3a4049;
    --card-bg-color: #333842;
    --card-inner-bg-color: #3a3f4a;
    --border-color: #444a54;
    --primary-color: #9b59b6; /* بنفش روشن‌تر برای دارک مود */
    --primary-dark-color: #8e44ad;
    --button-text-color: #fff;
    --input-bg-color: #282c34;
    --input-border-color: #4a4d52;
    --box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
    --hover-shadow: 0 8px 16px rgba(0, 0, 0, 0.45);
    --textarea-bg-color: #282c34;
    --textarea-border-color: #4a4d52;
    --code-bg-color: #3a4049;
    --info-message-color: #87ceeb;
    --success-message-color: #27ae60;
    --error-message-color: #c0392b;
    --primary-color-rgb: 155, 89, 182;

    /* Rain Animation Colors for Dark Mode (No longer used) */
    /*
    --rain-color-light: rgba(173, 216, 230, 0.5);
    --rain-color-dark: rgba(70, 130, 180, 0.3);
    */

    /* Background Image Overlay Colors for Dark Mode */
    --bg-overlay-start: rgba(0, 0, 0, 0.4); /* سیاه شفاف برای حالت تاریک */
    --bg-overlay-end: rgba(0, 0, 0, 0.8);   /* سیاه نیمه شفاف برای حالت تاریک */
}

/* Global Styles - استایل‌های کلی برای بدنه و عناصر اصلی HTML */
body {
    font-family: 'Vazirmatn', sans-serif; /* اعمال فونت وزیر به کل متن */
    direction: rtl; /* راست‌چین کردن متن برای زبان فارسی */
    text-align: right; /* تراز کردن متن به سمت راست */
    margin: 0;
    padding: 0;
    background-color: var(--background-color);
    color: var(--text-color);
    line-height: 1.6;
    transition: background-color 0.4s ease, color 0.4s ease; /* انیمیشن نرم برای تغییر تم */
    overflow-x: hidden; /* جلوگیری از اسکرول افقی به دلیل انیمیشن باران */
    position: relative; /* برای قرار دادن انیمیشن باران در پس‌زمینه */
}

/* Background Image */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* قرار گرفتن در پس‌زمینه */
    background-image: 
        /* گرادیانت برای ترکیب با تصویر */
        linear-gradient(to bottom, var(--bg-overlay-start), var(--bg-overlay-end)),
        /* تصویر پس‌زمینه */
        url('https://i.pinimg.com/1200x/11/fc/12/11fc12dffde38ba56d12a148328e36a3.jpg'); 
    background-size: cover; /* تصویر کل پس‌زمینه را پوشش دهد */
    background-position: center center; /* تصویر در مرکز قرار گیرد */
    background-repeat: no-repeat;
    background-attachment: fixed; /* تصویر در هنگام اسکرول ثابت بماند */
    pointer-events: none; /* تا روی عناصر دیگر کلیک شود */
    transition: background-image 0.4s ease; /* انیمیشن برای تغییر تصویر در صورت نیاز */
}

/* Rain Animation Overlay (Removed) */
body::after {
    /* این بخش برای انیمیشن باران بود و اکنون غیرفعال شده است */
    content: none; /* حذف محتوا برای غیرفعال کردن */
}

/* Keyframes for rain animation (Removed) */
/*
@keyframes rain-fall-1 {
    0% { background-position: 0% 0%; }
    100% { background-position: 0% 100%; }
}
@keyframes rain-fall-2 {
    0% { background-position: 20% 10%; }
    100% { background-position: 20% 110%; }
}
@keyframes rain-fall-3 {
    0% { background-position: 40% 20%; }
    100% { background-position: 40% 120%; }
}
@keyframes rain-fall-4 {
    0% { background-position: 60% 30%; }
    100% { background-position: 60% 130%; }
}
@keyframes rain-fall-5 {
    0% { background-position: 80% 40%; }
    100% { background-position: 80% 140%; }
}
*/


/* Box Sizing - برای مدیریت بهتر ابعاد عناصر, padding و border در عرض و ارتفاع محاسبه شوند */
*, *::before, *::after {
    box-sizing: border-box;
}

/* استایل برای محتوای غیرفعال */
.disabled-content {
    pointer-events: none; /* جلوگیری از کلیک روی عناصر */
    opacity: 0.4; /* کاهش شفافیت */
    filter: grayscale(80%); /* اعمال فیلتر خاکستری */
    transition: opacity 0.6s ease, filter 0.6s ease;
}
.disabled-content.active {
    pointer-events: all;
    opacity: 1;
    filter: grayscale(0%);
}

/* Header - استایل بخش هدر بالای صفحه */
header {
    background-color: var(--panel-bg-color);
    color: var(--heading-color);
    padding: 20px 30px;
    box-shadow: var(--box-shadow);
    display: flex; /* برای چیدمان عنوان و دکمه تم کنار هم */
    justify-content: space-between; /* توزیع فضا بین عنوان و دکمه */
    align-items: center; /* هم‌ترازی عمودی */
    border-bottom: 1px solid var(--panel-border-color);
}

header h1 {
    margin: 0;
    font-size: 1.9em; /* کمی بزرگتر */
    color: var(--heading-color);
}

/* Theme Toggle Button - دکمه تغییر حالت شب و روز */
#themeToggleBtn {
    background: none; /* بدون پس‌زمینه */
    border: none; /* بدون حاشیه */
    color: var(--text-color);
    font-size: 1.6em; /* کمی بزرگتر */
    cursor: pointer;
    transition: color 0.3s ease, transform 0.2s ease; /* انیمیشن نرم */
}

#themeToggleBtn:hover {
    color: var(--primary-color); /* تغییر رنگ در حالت هاور */
    transform: scale(1.1); /* افکت کوچک بزرگ شدن */
}

/* Screen Reader Only - برای دسترسی‌پذیری، متن‌هایی که فقط توسط صفحه‌خوان‌ها خوانده می‌شوند */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Main Content Layout - چیدمان محتوای اصلی سایت */
main {
    max-width: 1000px; /* حداکثر عرض محتوا برای خوانایی بهتر */
    margin: 35px auto; /* فاصله از بالا و پایین و وسط‌چین کردن افقی */
    padding: 0 20px; /* فاصله از کنارها در صفحات کوچک‌تر */
    display: grid; /* استفاده از گرید برای چیدمان بخش‌ها (section) */
    gap: 35px; /* فاصله بین هر بخش */
}

/* Panel Styles - استایل‌دهی به بخش‌های مختلف سایت که در یک پنل قرار می‌گیرند */
.panel {
    background-color: var(--panel-bg-color);
    border-radius: 12px; /* گوشه‌های گردتر */
    box-shadow: var(--box-shadow);
    padding: 30px; /* پدینگ بیشتر */
    border: 1px solid var(--panel-border-color);
    transition: all 0.3s ease; /* انیمیشن برای پنل‌ها */
}

.panel:hover {
    box-shadow: var(--hover-shadow); /* سایه در هاور */
}

.panel h2 {
    margin-top: 0;
    margin-bottom: 28px; /* فاصله بیشتر */
    font-size: 1.6em; /* کمی بزرگتر */
    color: var(--heading-color);
    border-bottom: 1px solid var(--border-color); /* خط زیر عنوان هر بخش */
    padding-bottom: 18px;
}

/* Input Fields and Buttons - استایل عمومی برای فیلدهای ورودی و دکمه‌ها */
input[type="text"],
input[type="number"],
input[type="url"],
textarea {
    width: 100%; /* تمام عرض فضای موجود را اشغال کند */
    padding: 14px 18px; /* پدینگ بیشتر */
    margin-bottom: 18px; /* فاصله بیشتر */
    border: 1px solid var(--input-border-color);
    border-radius: 8px; /* گوشه‌های گردتر */
    background-color: var(--input-bg-color);
    color: var(--text-color);
    font-family: 'Vazirmatn', sans-serif; /* اعمال فونت وزیر به فیلدهای ورودی */
    font-size: 1em; /* کمی بزرگتر */
    transition: border-color 0.3s ease, box-shadow 0.3s ease; /* انیمیشن برای فوکوس */
}

/* استایل فوکوس (وقتی کاربر روی فیلد کلیک می‌کند) */
input[type="text"]:focus,
input[type="number"]:focus,
input[type="url"]:focus,
textarea:focus {
    outline: none; /* حذف outline پیش‌فرض مرورگر */
    border-color: var(--primary-color); /* تغییر رنگ حاشیه */
    box-shadow: 0 0 0 4px rgba(var(--primary-color-rgb), 0.3); /* سایه آبی کمرنگ دور فیلد */
}

/* استایل فیلد ورودی غیرفعال (disabled) */
input[type="url"][disabled], textarea[disabled] {
    background-color: var(--input-bg-color);
    opacity: 0.7; /* کمی کمرنگ‌تر */
    cursor: not-allowed; /* نشانگر ماوس تغییر می‌کند */
}

/* استایل عمومی دکمه‌ها */
button {
    background-color: var(--primary-color);
    color: var(--button-text-color);
    border: none;
    padding: 14px 28px; /* پدینگ بیشتر */
    border-radius: 8px; /* گوشه‌های گردتر */
    cursor: pointer;
    font-size: 1.05em; /* کمی بزرگتر */
    font-family: 'Vazirmatn', sans-serif; /* اعمال فونت وزیر به دکمه‌ها */
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease; /* انیمیشن برای هاور و کلیک */
    display: inline-flex; /* برای اینکه آیکون و متن کنار هم قرار بگیرند */
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 8px rgba(var(--primary-color-rgb), 0.2); /* سایه برای دکمه‌ها */
}

button i {
    margin-right: 10px; /* فاصله برای آیکون‌های داخل دکمه */
}

button:hover {
    background-color: var(--primary-dark-color);
    transform: translateY(-3px); /* حرکت دکمه به سمت بالا در هاور */
    box-shadow: 0 6px 12px rgba(var(--primary-color-rgb), 0.3); /* سایه در هاور */
}

button:active {
    transform: translateY(0); /* برگشت دکمه به حالت اولیه در کلیک */
    box-shadow: 0 2px 4px rgba(var(--primary-color-rgb), 0.2);
}

/* Template Options - استایل بخش انتخاب تمپلت کانفیگ (رادیو باتن‌ها) */
.template-options-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 25px;
}

.template-option {
    display: flex;
    align-items: flex-start; /* هم‌ترازی عمودی */
    padding: 18px;
    border: 2px solid var(--border-color);
    border-radius: 10px;
    background-color: var(--card-inner-bg-color);
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.template-option:hover {
    border-color: var(--primary-color);
    box-shadow: 0 4px 8px rgba(var(--primary-color-rgb), 0.1);
    transform: translateY(-2px);
}

.template-option input[type="radio"] {
    appearance: none; /* حذف ظاهر پیش‌فرض مرورگر */
    -webkit-appearance: none; /* برای سازگاری با سافاری */
    width: 22px;
    height: 22px;
    border: 2px solid var(--primary-color);
    border-radius: 50%; /* دایره‌ای کردن */
    margin-left: 15px; /* فاصله از متن لیبل */
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.template-option input[type="radio"]:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.template-option input[type="radio"]:checked::after {
    content: ''; /* محتوای داخلی برای نمایش انتخاب شدن */
    width: 12px;
    height: 12px;
    background-color: var(--button-text-color); /* رنگ دایره داخلی (سفید) */
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* وسط‌چین کردن دایره داخلی */
}

.template-option label {
    flex-grow: 1; /* اجازه می‌دهد لیبل فضای باقی‌مانده را اشغال کند */
    color: var(--text-color);
    cursor: pointer;
}
.template-option label h4 {
    margin-top: 0;
    margin-bottom: 5px;
    color: var(--heading-color);
    font-size: 1.15em;
}
.template-option label .description {
    font-size: 0.9em;
    color: var(--text-color-muted);
}


/* Proxy/Rule Cards Grid - استایل گرید برای نمایش کارت‌های پروکسی و قوانین */
.proxy-cards-grid, .rules-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* چیدمان واکنش‌گرا با حداقل عرض ۲۸۰ پیکسل */
    gap: 18px; /* فاصله بین کارت‌ها */
    margin-bottom: 25px;
}

/* استایل هر کارت پروکسی یا Rule Item */
.proxy-card, .rule-item {
    background-color: var(--card-inner-bg-color);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 18px;
    transition: all 0.3s ease; /* انیمیشن برای هاور */
    display: flex;
    align-items: flex-start; /* هم‌ترازی محتوا از بالا */
    position: relative; /* برای موقعیت‌دهی دکمه‌های اکشن (ویرایش/حذف) */
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.proxy-card:hover, .rule-item:hover {
    box-shadow: var(--hover-shadow);
    transform: translateY(-3px); /* حرکت کارت به سمت بالا در هاور */
}

/* استایل چک‌باکس‌های سفارشی برای پروکسی و قوانین (ظاهر مربعی و رنگی) */
.proxy-card input[type="checkbox"],
.rule-item input[type="checkbox"] {
    appearance: none; /* حذف ظاهر پیش‌فرض مرورگر */
    -webkit-appearance: none;
    width: 24px; /* کمی بزرگتر */
    height: 24px; /* کمی بزرگتر */
    border: 2px solid var(--primary-color);
    border-radius: 6px; /* گوشه‌های کمی گردتر */
    margin-left: 15px;
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.proxy-card input[type="checkbox"]:checked,
.rule-item input[type="checkbox"]:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.proxy-card input[type="checkbox"]:checked::after,
.rule-item input[type="checkbox"]:checked::after {
    content: '\f00c'; /* آیکون تیک از Font Awesome (کد یونی‌کد) */
    font-family: "Font Awesome 5 Free"; /* استفاده از فونت Font Awesome */
    font-weight: 900; /* برای نمایش solid آیکون */
    color: var(--button-text-color); /* رنگ تیک (سفید) */
    font-size: 16px; /* کمی بزرگتر */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* وسط‌چین کردن تیک */
}

.proxy-card label, .rule-item label {
    flex-grow: 1;
    cursor: pointer;
}

.proxy-card h4, .rule-item h4 {
    margin-top: 0;
    margin-bottom: 8px;
    color: var(--heading-color);
    font-size: 1.1em;
}

.proxy-card p, .rule-item p {
    margin: 0 0 5px 0;
    font-size: 0.9em;
    color: var(--text-color-light);
}

.proxy-card .description, .rule-item .description {
    font-size: 0.85em;
    color: var(--text-color-muted);
    line-height: 1.5;
    margin-top: 10px;
}

/* Actions for Custom Proxies (Edit/Delete Buttons) */
.proxy-card .actions {
    position: absolute;
    top: 10px;
    left: 10px; /* برای نمایش در گوشه بالا سمت چپ کارت */
    display: flex;
    gap: 5px;
}

.proxy-card .actions button {
    background: none; /* بدون پس‌زمینه */
    border: none;
    color: var(--text-color-light);
    font-size: 0.9em;
    padding: 5px;
    border-radius: 5px;
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease;
    box-shadow: none; /* حذف سایه از دکمه‌های کوچک */
}

.proxy-card .actions button:hover {
    color: var(--primary-color);
    background-color: rgba(var(--primary-color-rgb), 0.1); /* پس‌زمینه کمرنگ در هاور */
    transform: none; /* حذف ترنسفورم دکمه‌های کوچک */
}

/* Specific button styles for select/deselect all */
.selection-controls {
    text-align: center;
    margin-bottom: 25px; /* فاصله بیشتر */
    display: flex;
    justify-content: center;
    gap: 12px; /* فاصله بین دکمه‌ها */
}

.selection-controls button {
    padding: 10px 22px;
    font-size: 0.98em;
}

/* Custom Proxies Input Form - استایل فرم افزودن پروکسی کاستوم */
.custom-proxies-section .input-form {
    display: grid;
    /* چیدمان ستونی برای فیلدها: حداقل 180px عرض، یا فضای مساوی */
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 18px; /* فاصله بیشتر */
    margin-bottom: 30px; /* فاصله بیشتر */
    align-items: end; /* ترازبندی دکمه‌ها و فیلدها در پایین */
}

.custom-proxies-section .input-form input,
.custom-proxies-section .input-form select {
    margin-bottom: 0; /* حذف margin-bottom پیش‌فرض برای هم‌ترازی */
}

/* پیام‌های اطلاعاتی مانند "هنوز سرور کاستومی اضافه نشده است." */
.info-message {
    text-align: center;
    padding: 18px;
    background-color: rgba(var(--info-message-color-rgb, 91, 192, 222), 0.1); /* استفاده از متغیر RGB */
    border: 1px solid var(--info-message-color);
    border-radius: 8px;
    color: var(--info-message-color);
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 0.95em;
}
.success-message {
    background-color: rgba(46, 204, 113, 0.1);
    border-color: var(--success-message-color);
    color: var(--success-message-color);
}
.error-message {
    background-color: rgba(231, 76, 60, 0.1);
    border-color: var(--error-message-color);
    color: var(--error-message-color);
}


/* Rules Section Grouping - استایل دسته‌بندی قوانین */
.rule-category-section {
    margin-bottom: 30px;
    border: 1px solid var(--panel-border-color);
    border-radius: 10px;
    padding: 20px;
    background-color: var(--card-bg-color);
    box-shadow: var(--box-shadow);
}

.rule-category-section h3 {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 1.3em;
    color: var(--heading-color);
    display: flex;
    align-items: center;
    padding-bottom: 10px;
    border-bottom: 1px dashed var(--border-color); /* خط چین برای جدا کردن عنوان گروه */
}

.rule-category-section h3 i {
    margin-left: 10px; /* فاصله آیکون از متن */
    font-size: 1.1em;
    color: var(--primary-color); /* رنگ آیکون گروه */
}


/* Output Section */
#outputConfig {
    min-height: 350px; /* ارتفاع بیشتر */
    background-color: var(--textarea-bg-color);
    border: 1px solid var(--textarea-border-color);
    border-radius: 10px; /* گوشه‌های گردتر */
    padding: 20px; /* پدینگ بیشتر */
    font-family: 'Cascadia Code', 'Fira Code', 'monospace';
    font-size: 0.95em;
    line-height: 1.6;
    white-space: pre-wrap;
    word-wrap: break-word;
    color: var(--text-color);
    margin-bottom: 25px;
}

#downloadConfigBtn {
    margin-top: 15px;
    width: auto;
}

/* File Name Input in Output Section */
.file-name-input-group {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.file-name-input-group label {
    font-size: 0.95em;
    color: var(--text-color-light);
    margin-bottom: 8px;
}
.file-name-input-group input[type="text"] {
    margin-bottom: 0; /* حذف margin-bottom پیش‌فرض */
}


/* Footer */
footer {
    text-align: center;
    padding: 25px; /* پدینگ بیشتر */
    margin-top: 50px; /* فاصله بیشتر */
    background-color: var(--panel-bg-color);
    color: var(--text-color-muted);
    font-size: 0.95em;
    border-top: 1px solid var(--panel-border-color);
    box-shadow: 0 -3px 10px rgba(0, 0, 0, 0.05); /* سایه بهتر */
    display: flex; /* برای چیدمان عمودی محتوا و لینک‌ها */
    flex-direction: column;
    align-items: center;
    gap: 15px; /* فاصله بین پاراگراف کپی‌رایت و لینک‌ها */
}

.social-links {
    display: flex;
    flex-wrap: wrap; /* برای رفتن به خط بعدی در صفحات کوچک */
    justify-content: center;
    gap: 20px; /* فاصله بین لینک‌ها */
}

.social-links a {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--text-color-light); /* رنگ پیش‌فرض برای لینک‌ها */
    font-size: 0.95em;
    transition: color 0.3s ease, transform 0.2s ease;
    padding: 8px 12px;
    border-radius: 8px;
    background-color: var(--card-inner-bg-color);
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

body.dark-mode .social-links a {
    color: var(--text-color-light); /* اطمینان از رنگ مناسب در دارک مود */
}

.social-links a:hover {
    color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(var(--primary-color-rgb), 0.1);
}

.social-links a img {
    width: 24px; /* اندازه آیکون‌ها */
    height: 24px;
    margin-left: 8px; /* فاصله از متن */
    border-radius: 4px; /* گوشه‌های گرد برای آیکون‌ها */
}

.social-links a span {
    vertical-align: middle;
}

.free-config-link svg {
    margin-left: 8px; /* فاصله آیکون SVG از متن */
    vertical-align: middle;
    color: var(--text-color-light); /* رنگ پیش‌فرض SVG */
    transition: color 0.3s ease;
}

.free-config-link:hover svg {
    color: var(--primary-color); /* تغییر رنگ SVG در هاور */
}


/* Local IP Guide Section Specific Styles */
.local-ip-guide-section h3 {
    font-size: 1.2em;
    color: var(--heading-color);
    margin-top: 20px;
    margin-bottom: 15px;
    border-bottom: none; /* حذف خط زیر عنوان‌های فرعی */
    padding-bottom: 0;
}

.local-ip-guide-section ul {
    list-style: none; /* حذف بولت‌های پیش‌فرض */
    padding: 0;
    margin-bottom: 20px;
}

.local-ip-guide-section ul.link-list li {
    margin-bottom: 10px;
}

.local-ip-guide-section ul.link-list a {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: var(--primary-color); /* رنگ لینک‌ها آبی اصلی */
    font-weight: bold;
    transition: color 0.2s ease;
}

body.dark-mode .local-ip-guide-section ul.link-list a {
    color: var(--primary-color); /* اطمینان از رنگ مناسب در دارک مود */
}

.local-ip-guide-section ul.link-list a:hover {
    color: var(--primary-dark-color);
    text-decoration: underline;
}

.local-ip-guide-section ul.link-list a i,
.local-ip-guide-section ul.link-list a .fab { /* برای آیکون‌های Font Awesome و برند */
    margin-left: 8px;
    font-size: 1.1em;
    color: var(--primary-color);
}

.local-ip-guide-section ul.feature-list {
    list-style: none;
    padding: 0;
    margin-bottom: 20px;
}

.local-ip-guide-section ul.feature-list li {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    color: var(--text-color-light);
}

.local-ip-guide-section ul.feature-list li i {
    color: var(--success-message-color); /* رنگ سبز برای تیک */
    margin-left: 8px;
    font-size: 1em;
}


/* Recommended Clients Section Styles */
.recommended-clients-section .client-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 25px;
}

.recommended-clients-section .client-card {
    background-color: var(--card-inner-bg-color);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

.recommended-clients-section .client-card:hover {
    box-shadow: var(--hover-shadow);
    transform: translateY(-3px);
}

.recommended-clients-section .client-card h3 {
    margin-top: 0;
    margin-bottom: 10px;
    color: var(--heading-color);
    font-size: 1.3em;
}

.recommended-clients-section .client-card .description {
    font-size: 0.9em;
    color: var(--text-color-muted);
    margin-bottom: 15px;
    min-height: 40px; /* حداقل ارتفاع برای توضیحات */
}

.recommended-clients-section .client-card .os-support {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.recommended-clients-section .client-card .os-support a { /* استایل برای لینک‌های آیکون سیستم عامل */
    color: var(--text-color-light); /* رنگ پیش‌فرض آیکون */
    transition: color 0.2s ease, transform 0.2s ease;
    text-decoration: none; /* حذف زیرخط */
}

body.dark-mode .recommended-clients-section .client-card .os-support a {
    color: var(--text-color-muted); /* رنگ آیکون‌ها در دارک مود */
}

.recommended-clients-section .client-card .os-support a:hover {
    color: var(--primary-color); /* تغییر رنگ در هاور */
    transform: scale(1.1); /* بزرگنمایی در هاور */
}

.recommended-clients-section .client-card .os-support i {
    font-size: 1.5em; /* اندازه آیکون */
}


/* Scroll Buttons */
.scroll-btn {
    position: fixed;
    right: 25px; /* کمی فاصله بیشتر */
    width: 55px; /* کمی بزرگتر */
    height: 55px; /* کمی بزرگتر */
    border-radius: 50%;
    background-color: var(--primary-color);
    color: var(--button-text-color);
    border: none;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* سایه بهتر */
    font-size: 1.6em; /* کمی بزرگتر */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease, transform 0.2s ease, opacity 0.3s ease, box-shadow 0.3s ease;
    opacity: 0; /* ابتدا پنهان باشند */
    z-index: 1000; /* روی سایر عناصر */
}

.scroll-btn:hover {
    background-color: var(--primary-dark-color);
    transform: scale(1.1);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

#scrollToTopBtn {
    bottom: 90px; /* بالای دکمه اسکرول به پایین */
}

#scrollToBottomBtn {
    bottom: 25px; /* کمی فاصله بیشتر */
}

/* Custom Select Box - استایل برای تگ select سفارشی */
.custom-select {
    width: 100%;
    padding: 14px 18px;
    border: 1px solid var(--input-border-color);
    border-radius: 8px;
    background-color: var(--input-bg-color);
    color: var(--text-color);
    font-family: 'Vazirmatn', sans-serif;
    font-size: 1em;
    -webkit-appearance: none; /* حذف فلش پیش‌فرض در کروم/سافاری */
    -moz-appearance: none;    /* حذف فلش پیش‌فرض در فایرفاکس */
    appearance: none;         /* حذف فلش پیش‌فرض */
    /* افزودن فلش سفارشی با SVG */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%235a6a7a' width='18px' height='18px'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 18px center; /* موقعیت فلش در سمت چپ (برای rtl) */
    padding-right: 18px; /* ایجاد فضا برای فلش در سمت راست (برای rtl) */
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

body.dark-mode .custom-select {
    /* تغییر رنگ فلش برای حالت شب */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23cccccc' width='18px' height='18px'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
}

.custom-select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(var(--primary-color-rgb), 0.3);
}


/* انیمیشن بارگذاری (جدید) */
#loadingOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--background-color-darker); /* استفاده از متغیر تم */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* مطمئن می‌شویم که روی بقیه عناصر باشد */
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease, visibility 0.3s ease; /* انیمیشن نرم برای ظاهر و ناپدید شدن */
}

#loadingOverlay.hidden {
    opacity: 0;
    visibility: hidden;
}

.spinner {
    border: 8px solid var(--border-color); /* رنگ اصلی اسپینر */
    border-top: 8px solid var(--primary-color); /* رنگ متحرک اسپینر */
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 1s linear infinite; /* انیمیشن چرخشی */
    margin-bottom: 20px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

#loadingMessage {
    color: var(--text-color);
    font-size: 1.2em;
    font-weight: bold;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    header h1 {
        font-size: 1.6em;
    }
    main {
        margin: 25px auto;
        gap: 25px;
        padding: 0 15px;
    }
    .panel {
        padding: 25px;
    }
    .panel h2 {
        font-size: 1.4em;
        margin-bottom: 22px;
    }
    .proxy-cards-grid, .rules-grid, .template-options-grid, .client-cards-grid { /* اضافه شدن client-cards-grid */
        grid-template-columns: 1fr;
        gap: 15px;
    }
    .custom-proxies-section .input-form {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    .selection-controls {
        flex-direction: column;
        gap: 10px;
    }
    .scroll-btn {
        width: 45px;
        height: 45px;
        font-size: 1.4em;
        right: 15px;
    }
    #scrollToTopBtn {
        bottom: 80px;
    }
    #scrollToBottomBtn {
        bottom: 15px;
    }
    .template-option input[type="radio"] {
        margin-left: 10px;
    }
    .social-links {
        gap: 10px; /* کاهش گپ در موبایل */
    }
    .social-links a {
        padding: 6px 10px;
        font-size: 0.9em;
    }
    .social-links a img, .free-config-link svg {
        width: 20px;
        height: 20px;
        margin-left: 6px;
    }
}