/**
 * s4m-template-engine.css
 * ====================================================================
 * CSSِ «مکانیزمِ» مشترکِ همه‌ی قالب‌های پروفایل (نه ظاهر/برندینگ).
 * این فایل ساختار/رفتار (چیدمانِ فلکس، مودالِ QR، ...) را یک‌بار تعریف
 * می‌کند. رنگ/فونت/گردیِ‌گوشه‌ی هرکدام را خودِ فایلِ profile-*.php با
 * سلکتورهای اسکوپ‌شده (مثلِ .s4m-tpl-app1 .s4m-share-copy) رو-کش می‌کند.
 *
 * هیچ اندازه‌ای در این فایل breakpointِ دستگاهیِ ثابت ندارد — همه‌جا از
 * clamp()/%/vw استفاده شده تا از باریک‌ترین موبایل تا TV به‌صورتِ پیوسته
 * و بر اساسِ Viewportِ واقعی اسکیل شود.
 * ==================================================================== */

/* ---------- آواتار (اندازه‌ی پایه؛ شکل/گردی را هر قالب override می‌کند) ---------- */
.profile-avatar {
    display: block;
    margin: 0 auto;
    width: clamp(72px, 22vw, 140px);
    height: clamp(72px, 22vw, 140px);
    object-fit: cover;
}

/* ---------- نام + بج‌ها ---------- */
.profile-name {
    display: inline-block;
    vertical-align: middle;
    margin: 0;
    font-size: clamp(18px, 4.5vw, 26px);
}

/* 🆕 v10.1.2: نشانِ پیشه‌ی آرتیست، زیرِ نام — همون فاصله‌ی چیپِ دنبال‌کننده */
.s4m-profession-wrap {
    margin-top: 6px;
}

/* ---------- چیپِ تعدادِ دنبال‌کننده/دنبال‌شونده — یک ظاهرِ خنثیِ پیش‌فرض، هر قالب رنگش را عوض می‌کند ---------- */
.s4m-follow-chip-group {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-top: 6px;
}
.s4m-follow-chip {
    display: inline-block;
    background: rgba(127, 127, 127, 0.18);
    border: 1px solid rgba(127, 127, 127, 0.28);
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
}
/* 🆕 چیپِ قابل‌کلیک (کاربرانِ لاگین‌شده) — برای دیدنِ فهرستِ دنبال‌کنندگان/دنبال‌شوندگان */
.s4m-follow-chip.is-clickable {
    cursor: pointer;
    transition: background-color .15s ease, transform .15s ease;
}
.s4m-follow-chip.is-clickable:hover {
    background: rgba(127, 127, 127, 0.32);
    transform: translateY(-1px);
}

/* ---------- مودالِ فهرستِ دنبال‌کنندگان/دنبال‌شوندگان ---------- */
.s4m-follow-list-modal {
    display: none;
    position: fixed;
    z-index: 99999;
    inset: 0;
    background: rgba(0, 0, 0, .7);
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(1px);
}
.s4m-follow-list-modal.is-open { display: flex; }
.s4m-follow-list-modal-inner {
    background: #1e1e1e;
    color: #eee;
    border-radius: 16px;
    padding: 18px;
    width: min(340px, 90vw);
    max-height: 76vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
    position: relative;
}
.s4m-follow-list-modal-close {
    position: absolute;
    top: 8px;
    inset-inline-end: 12px;
    font-size: 24px;
    color: #ccc;
    cursor: pointer;
    user-select: none;
    font-weight: bold;
}
.s4m-follow-list-title {
    margin: 0 0 12px;
    padding-inline-end: 24px;
    font-size: 15px;
    text-align: center;
}
.s4m-follow-list-items {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
}
.s4m-follow-list-items li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 4px;
    color: #eee;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.s4m-follow-list-items li a:hover { background: rgba(255, 255, 255, .05); }
.s4m-follow-list-items img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.s4m-follow-list-empty,
.s4m-follow-list-loading { text-align: center; color: #999; font-size: 13px; padding: 20px 0; }

/* ---------- بیوگرافی + «بیشتر بخوانید» ---------- */
.profile-bio {
    font-size: 14px;
    line-height: 1.6;
    max-width: 90%;
    margin: 12px auto;
    padding: 10px 14px;
}
.profile-bio.clamped {
    max-height: 4.8em;
    overflow: hidden;
    position: relative;
}
.profile-bio.clamped.expanded {
    max-height: none;
}
.bio-toggle {
    display: inline-block !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    font-size: 12px !important;
    padding: 2px 4px !important;
    margin-bottom: 10px !important;
    font-family: inherit !important;
}

/* ---------- کانتینرِ لینک‌ها (چیدمان‌های اختصاصی در s4m_link_layout_css) ---------- */
.s4m-links { margin-top: 18px; }

/* دکمه‌ی کپیِ کنارِ هر لینک — ساختارِ یکسان برای همه‌ی چیدمان‌ها.
   🐛→✅ این دکمه <button> است، پس بدونِ !important از قوانینِ عمومیِ
   دکمه/فرمِ قالبِ سایت (theme) که معمولاً روی selectorِ ساده‌ی `button`
   نوشته شده و به‌خاطرِ ترتیبِ لود بعد از CSSِ ما می‌آید، ارث می‌برد —
   نتیجه‌اش رنگ/فونت/پدینگِ ناخواسته یا حتی بی‌استایل‌شدنِ کامل بود. */
.s4m-link-copy {
    all: unset;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
    width: 34px !important;
    height: 34px !important;
    border: none !important;
    border-radius: 6px !important;
    background: rgba(127, 127, 127, 0.4) !important;
    color: #fff !important;
    cursor: pointer !important;
    font-family: monospace !important;
    line-height: 1 !important;
    text-align: center !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background-color .2s ease, transform .15s ease !important;
}
.s4m-link-copy .copy-text { display: block !important; font-size: 11px !important; }
.s4m-link-copy:hover { transform: translateY(-1px); }
.s4m-link-copy.copied { background: #28a745 !important; }

/* ---------- جعبه‌ی اشتراک‌گذاری (QR + کپیِ لینکِ صفحه) — یک قابلیتِ مشترک برای همه‌ی قالب‌ها ---------- */
.s4m-share {
    margin-top: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}
.s4m-share--embedded { margin-top: 40px; }
.s4m-share-qr {
    cursor: pointer;
    width: 36px;
    height: 36px;
    border-radius: 6px;
    transition: transform .2s ease;
}
.s4m-share-qr:hover { transform: scale(1.08); }
.s4m-share-input {
    flex: 1 1 200px;
    max-width: 280px;
    min-width: 140px;
    padding: 7px 10px;
    border-radius: 8px;
    border: 1px solid rgba(127, 127, 127, .4);
    font-size: 13px;
    box-sizing: border-box;
}
/* دکمه‌ی «کپی لینک» کنارِ QR — همان دلیلِ !important که برای .s4m-link-copy
   بالاتر توضیح داده شد (تبعیت از استایلِ عمومیِ دکمه‌ی قالبِ سایت) */
.s4m-share-copy {
    all: unset;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
    background: rgba(127, 127, 127, .5) !important;
    color: #fff !important;
    border: none !important;
    padding: 7px 16px !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    font-size: 13px !important;
    font-family: inherit !important;
    text-align: center !important;
    line-height: normal !important;
    transition: background-color .2s ease !important;
}
.s4m-share-copy.copied { background: #28a745 !important; }

.s4m-share-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    inset: 0;
    background: rgba(0, 0, 0, .7);
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(1px);
}
.s4m-share-modal-inner {
    background: #1e1e1e;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
    max-width: 280px;
    max-height: 280px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.s4m-share-modal-inner img {
    width: 260px;
    height: 260px;
    border-radius: 1px;
    user-select: none;
}
.s4m-share-modal-close {
    position: absolute;
    top: 4px;
    inset-inline-end: 8px;
    font-size: 26px;
    color: #fff;
    cursor: pointer;
    user-select: none;
    font-weight: bold;
}

/* ---------- ورودِ نرم — مشترک بینِ کارت‌های قالب‌هایی که از آن استفاده می‌کنند ---------- */
@keyframes s4mFadeUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .s4m-profile-card { animation: none !important; }
}