/*
 * WP LinkTree SaaS — ایزوله‌سازی ظاهر فرم ساخت/مدیریت بیولینک در فرانت‌اند
 * ----------------------------------------------------------------------
 * هدف: جلوگیری از تاثیرگذاری استایل‌های قالب سایت (تم) روی فرم Vue داخل
 * شورت‌کد [wplt_saas_user_dashboard]، بدون دست‌کاری استایل‌های inline
 * که همان خروجی UI اصلی افزونه (رنگ، پدینگ، رادیوس و ...) را می‌سازند.
 *
 * تکنیک: با "all: revert" مقدار هر ویژگی CSS روی عناصر داخل کانتینر را به
 * مقدار پیش‌فرض مرورگر (User-Agent stylesheet) برمی‌گردانیم؛ یعنی هر قانونی
 * که قالب سایت (با هر specificity معمولی) تعریف کرده باشد خنثی می‌شود.
 * استایل‌های inline (style="...") همچنان اعمال می‌شوند، چون در اولویت
 * بالاتری نسبت به قوانین استایل‌شیت (غیر !important) قرار دارند؛ پس ظاهر
 * فعلی افزونه دست‌نخورده باقی می‌ماند.
 *
 * توجه مهم: ریست فقط روی یک فهرست مشخص از تگ‌های معمولیِ فرم/متن اعمال
 * می‌شود و عمداً شامل «i» (آیکون‌های FontAwesome) و «svg» و فرزندان آن
 * (نمودار بازدید/کلیک) نمی‌شود؛ چون:
 *  - آیکون‌های FontAwesome از طریق ::before و font-family کلاس‌های خودشان
 *    (fa-solid, fa-brands, ...) رندر می‌شوند و اگر این عناصر هم ریست شوند،
 *    آیکون‌ها به‌کلی ناپدید می‌شوند.
 *  - رنگ خطوط/نقاط نمودار (fill/stroke) با attribute تنظیم شده‌اند که
 *    اولویت پایین‌تری نسبت به هر قانون CSS (حتی all:revert) دارند؛ ریست
 *    کردن svg و فرزندانش این مقادیر را می‌شکند و نمودار نامرئی می‌شود.
 */

#wplt-saas-app {
    all: revert;
}

#wplt-saas-app :where(
    div, section, header, footer, nav, main, aside,
    span, p, a,
    ul, ol, li,
    table, thead, tbody, tfoot, tr, td, th,
    form, fieldset, legend, label,
    input, select, textarea, optgroup, option,
    button,
    h1, h2, h3, h4, h5, h6,
    small, strong, b, em, hr, img
) {
    all: revert;
    box-sizing: border-box;
    direction: inherit;
    text-decoration: none;
}

#wplt-saas-app {
    direction: rtl;
    text-align: right;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Vazirmatn", "IRANSans", Tahoma, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.8;
    color: #1f2937;
    background: transparent;
    isolation: isolate; /* یک لایه‌ی مستقل استکینگ برای جلوگیری از تداخل z-index قالب */
}

#wplt-saas-app :where(input, select, textarea, button) {
    font-family: inherit;
    font-size: 13px;
    line-height: normal;
    color: inherit;
    background-color: #fff;
    appearance: none;
    -webkit-appearance: none;
    outline: none;
}

#wplt-saas-app :where(input, select, textarea) {
    box-shadow: none;
}

#wplt-saas-app :where(input, select, textarea):focus {
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.25);
    border-color: #2563eb;
}

#wplt-saas-app ul,
#wplt-saas-app ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

#wplt-saas-app img {
    max-width: 100%;
    height: auto;
    display: inline-block;
}

#wplt-saas-app a {
    cursor: pointer;
}

#wplt-saas-app h1,
#wplt-saas-app h2,
#wplt-saas-app h3,
#wplt-saas-app h4,
#wplt-saas-app h5,
#wplt-saas-app h6,
#wplt-saas-app p {
    margin: 0;
    font-family: inherit;
}

/*
 * بازسازی کلاس‌های سبک ادمین وردپرس (button / button-primary / ...)
 * چون فایل CSS پیشخوان وردپرس در فرانت‌اند لود نمی‌شود و بدون این قوانین
 * دکمه‌ها بی‌استایل نمایش داده می‌شوند.
 */
#wplt-saas-app .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 6px;
    border: 1px solid #d1d5db;
    background: #f9fafb;
    color: #1f2937;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
    white-space: nowrap;
}
#wplt-saas-app .button:hover {
    background: #f3f4f6;
    border-color: #9ca3af;
}
#wplt-saas-app .button:active {
    transform: translateY(1px);
}

#wplt-saas-app .button-primary {
    background: #2563eb;
    border-color: #2563eb;
    color: #ffffff;
}
#wplt-saas-app .button-primary:hover {
    background: #1d4ed8;
    border-color: #1d4ed8;
}

#wplt-saas-app .button-secondary {
    background: #ffffff;
    border-color: #d1d5db;
    color: #374151;
}
#wplt-saas-app .button-secondary:hover {
    background: #f9fafb;
}

#wplt-saas-app .button-small {
    padding: 4px 10px;
    font-size: 12px;
    border-radius: 5px;
}

#wplt-saas-app .button:disabled,
#wplt-saas-app .button[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}

/* اسکرول‌بار ظریف داخل کانتینر (اختیاری، منطبق با ظاهر استودیو) */
#wplt-saas-app ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
#wplt-saas-app ::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 8px;
}

/*
 * دکمه‌های کوچک اکشن کارت‌های بیولینک (ویرایش / مشاهده / حذف) و منوی سه‌نقطه
 * این استایل‌ها هم در ادمین و هم فرانت‌اند اعمال می‌شوند (چون در قالب inline نیستند).
 */
#wplt-saas-app .wplt-mini-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    flex: 1;
    min-height: 34px;
    padding: 7px 12px;
    border-radius: 9px;
    border: 1px solid transparent;
    font-size: 12.5px;
    font-weight: 700;
    font-family: inherit;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s ease, box-shadow .15s ease, transform .1s ease, border-color .15s ease;
}

#wplt-saas-app .wplt-mini-btn i {
    font-size: 13px;
    line-height: 1;
}

#wplt-saas-app .wplt-mini-btn:hover {
    transform: translateY(-1px);
}

#wplt-saas-app .wplt-mini-btn:active {
    transform: translateY(0);
}

/* ویرایش: آبی پررنگ */
#wplt-saas-app .wplt-mini-btn--primary {
    background: #2563eb;
    color: #ffffff !important;
    box-shadow: 0 3px 10px -3px rgba(37, 99, 235, .45);
}
#wplt-saas-app .wplt-mini-btn--primary:hover {
    background: #1d4ed8;
    box-shadow: 0 6px 16px -4px rgba(37, 99, 235, .55);
}

/* مشاهده: لینک با تم سبز/آبی روشن */
#wplt-saas-app .wplt-mini-btn--view {
    background: #f0fdf4;
    border-color: #bbf7d0;
    color: #15803d !important;
}
#wplt-saas-app .wplt-mini-btn--view:hover {
    background: #dcfce7;
    box-shadow: 0 4px 12px -4px rgba(22, 163, 74, .4);
}

/* حذف: قرمز محو، فقط آیکون */
#wplt-saas-app .wplt-mini-btn--danger {
    flex: 0 0 38px;
    background: #fef2f2;
    border-color: #fecaca;
    color: #dc2626 !important;
}
#wplt-saas-app .wplt-mini-btn--danger:hover {
    background: #dc2626;
    border-color: #dc2626;
    color: #ffffff !important;
    box-shadow: 0 5px 14px -4px rgba(220, 38, 38, .5);
}

/* آیتم‌های منوی سه‌نقطه */
#wplt-saas-app .wplt-mini-btn,
#wplt-saas-app [style*="wplt"] .wplt-mini-btn {
    box-sizing: border-box;
}

/* انیمیشن توست پیام کوتاه */
@keyframes wpltToastIn {
    from { opacity: 0; transform: translateX(50%) translateY(8px); }
    to   { opacity: 1; transform: translateX(50%) translateY(0); }
}

/* دکمه‌های مودال اشتراک‌گذاری */
#wplt-saas-app .wplt-share-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 12px 10px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    background: #fff;
    font-size: 12.5px;
    font-weight: 700;
    font-family: inherit;
    color: #1f2937;
    cursor: pointer;
    box-sizing: border-box;
    transition: border-color .15s ease, background .15s ease, transform .1s ease;
}

#wplt-saas-app .wplt-share-btn:hover {
    border-color: #93c5fd;
    background: #eff6ff;
}

#wplt-saas-app .wplt-share-btn:active {
    transform: translateY(1px);
}

#wplt-saas-app .wplt-share-btn i {
    font-size: 17px;
}

/* ─── ریسپانسیو استودیو بیولینک (موبایل) ─────────────────── */
/* در موبایل: تک‌ستونه و پیش‌نمایش زنده بالای فرم ساخت قرار می‌گیرد */
@media (max-width: 782px) {
    #wplt-saas-app .wplt-studio-grid {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }
    #wplt-saas-app .wplt-studio-preview {
        order: -1;
        position: static !important;
    }
}