/* =========================================================================
   گالری قالب‌ها — static/js/template_gallery.js
   -------------------------------------------------------------------------
   دکمه‌های «همه / علاقه‌مندی‌ها»، سرتیتر بخش‌ها، کارت‌ها با «صحنه» رنگی،
   قلب کوچک علاقه‌مندی و حالت خالی بودن علاقه‌مندی‌ها.
   ========================================================================= */

/* ---------- دکمه‌های همه / علاقه‌مندی‌ها ---------- */
.tg-filter {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 2px 0 18px;
}
.tg-filter[hidden] { display: none; }
.tg-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.09);
    color: #b9bccb;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.12s;
}
.tg-chip i { font-size: 0.72rem; opacity: 0.85; }
.tg-chip[data-f="fav"] i { color: #ff5c7a; opacity: 1; }
.tg-chip:active { transform: scale(0.95); }
.tg-chip.active {
    background: linear-gradient(135deg, #8e6bff 0%, #6a3df0 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 6px 16px -8px rgba(124, 77, 255, 0.95);
}
.tg-chip.active i { color: #fff; opacity: 1; }
.tg-chip-n {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.10);
    font-size: 0.66rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.tg-chip.active .tg-chip-n { background: rgba(255, 255, 255, 0.24); }

/* ---------- بخش‌ها ---------- */
.tg-section { margin-bottom: 26px; }
.tg-sec-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 2px 12px;
}
.tg-sec-icon {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    color: #fff;
}
.tg-section[data-sec="premium"] .tg-sec-icon {
    background: linear-gradient(135deg, #FFE082 0%, #FFB300 55%, #FF8F00 100%);
    color: #3b2500;
    box-shadow: 0 5px 14px -5px rgba(255, 171, 0, 0.75);
}
.tg-section[data-sec="simple"] .tg-sec-icon {
    background: linear-gradient(135deg, #A7FFEB 0%, #4DD0B8 55%, #1E9E8A 100%);
    color: #04322b;
    box-shadow: 0 5px 14px -5px rgba(38, 166, 154, 0.75);
}
.tg-section[data-sec="player"] .tg-sec-icon {
    background: linear-gradient(135deg, #FF9EB5 0%, #FF4D6D 55%, #D6246E 100%);
    box-shadow: 0 5px 14px -5px rgba(255, 77, 109, 0.8);
}
.tg-section[data-sec="classic"] .tg-sec-icon {
    background: linear-gradient(135deg, #C7B6FF 0%, #8E6BFF 55%, #6A3DF0 100%);
    box-shadow: 0 5px 14px -5px rgba(124, 77, 255, 0.8);
}
.tg-sec-text { flex: 1; min-width: 0; }
.tg-sec-title { font-size: 0.95rem; font-weight: 900; color: #fff; line-height: 1.5; }
.tg-sec-sub {
    font-size: 0.7rem;
    color: #8b8fa3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tg-sec-count {
    flex: 0 0 auto;
    font-size: 0.7rem;
    font-weight: 800;
    color: #a2a7ba;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 2px 9px;
    border-radius: 999px;
}

/* ---------- کارت‌ها ---------- */
.tg-root .tg-grid { gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) {
    .tg-root .tg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.tg-card.style-card {
    aspect-ratio: auto;
    padding: 5px;
    justify-content: flex-start;
    align-items: stretch;
    background: #1b1b21;
    border: 1.5px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    box-shadow: 0 6px 16px -10px rgba(0, 0, 0, 0.8);
    transition: transform 0.15s, border-color 0.2s, box-shadow 0.2s, background 0.2s;
    min-width: 0;
}
.tg-card.style-card:active { transform: scale(0.975); }
.tg-card.style-card.selected {
    border-color: var(--primary);
    background: #211b33;
    box-shadow: 0 0 0 1px rgba(124, 77, 255, 0.35), 0 12px 26px -12px rgba(124, 77, 255, 0.85);
}
.tg-card.style-card.selected::after { top: 9px; left: 9px; z-index: 5; }

/* صحنه: جایی که پیش‌نمایش زیرنویس روی آن پخش می‌شود */
.tg-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    isolation: isolate;
    background: #18181f;
    min-width: 0;
    min-height: 0;
}
.tg-stage::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), inset 0 -20px 30px -22px rgba(0, 0, 0, 0.7);
    z-index: 2;
}
/* عرض زیاد عمدی است: موتور فاصله کلمات را فقط وقتی فشرده می‌کند که جمله از
   عرض «قاب» بیرون بزند (مثل خروجی). کارت به جای فشرده‌سازی، کل پیش‌نمایش را
   کوچک می‌کند (fitCard)، پس قاب باید پهن باشد تا فاصله‌ها همان خروجی بماند. */
.tg-fit {
    flex: 0 0 auto;
    width: 1200px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform-origin: 50% 50%;
    will-change: transform, opacity;
    z-index: 1;
}
.tg-live .ap-demo {
    position: relative;
    display: inline-block;
    white-space: nowrap;
    text-align: center;
    color: #fff;
}
/* کارت‌های دست‌ساز قدیمی داخل صحنه: یک‌خطی می‌مانند و اگر جا نشوند
   template_gallery.js کمی کوچکشان می‌کند (fitLegacy) */
.tg-legacy .tg-stage { white-space: nowrap; }
.tg-legacy .tg-stage > * { max-width: none !important; flex: 0 0 auto; transform-origin: 50% 50%; }
.tg-legacy .tg-stage > style { display: none; }

.tg-card .card-info {
    margin-top: 0;
    padding: 6px 24px 3px;
    border-top: none;
    min-height: 27px;
}
.tg-card .card-title-style {
    font-size: 0.74rem;
    font-weight: 800;
    color: #ececf3;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.tg-card.selected .card-title-style { color: #fff; }

/* نشان «جدید» */
.tg-new {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 3;
    font-size: 0.56rem;
    font-weight: 800;
    line-height: 1.7;
    color: #FFD54F;
    background: rgba(12, 9, 22, 0.55);
    border: 1px solid rgba(255, 213, 79, 0.35);
    padding: 0 6px;
    border-radius: 999px;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    pointer-events: none;
}

/* ---------- قلب علاقه‌مندی ---------- */
.tg-heart {
    position: absolute;
    left: 5px;
    bottom: 3px;
    width: 26px;
    height: 26px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: rgba(255, 255, 255, 0.36);
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 6;
    transition: color 0.2s, transform 0.15s;
}
.tg-heart:active { transform: scale(0.82); }
.tg-heart.on { color: #ff4d6d; }
.tg-heart.on i { filter: drop-shadow(0 0 4px rgba(255, 77, 109, 0.65)); }
.tg-heart.pop i { animation: tgHeartPop 0.42s cubic-bezier(0.2, 1.6, 0.4, 1); }
@keyframes tgHeartPop {
    0% { transform: scale(0.55); }
    45% { transform: scale(1.4); }
    100% { transform: scale(1); }
}

/* آیکن قلب در اعلان پایین صفحه */
.toast-notification i.tg-toast-heart { color: #ff4d6d; }

/* ---------- نمای علاقه‌مندی‌ها ---------- */
.tg-mode-fav .tg-card:not(.is-fav) { display: none; }
.tg-mode-fav .tg-section.tg-no-fav { display: none; }
.tg-card.tg-leaving { animation: tgLeave 0.23s ease forwards; pointer-events: none; }
@keyframes tgLeave { to { opacity: 0; transform: scale(0.9); } }

.tg-empty {
    text-align: center;
    padding: 32px 18px 26px;
    border-radius: 18px;
    background: radial-gradient(120% 100% at 50% 0%, rgba(255, 77, 109, 0.10) 0%, rgba(255, 255, 255, 0.02) 65%);
    border: 1px dashed rgba(255, 255, 255, 0.13);
    margin-bottom: 20px;
}
.tg-empty-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 12px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    color: #ff4d6d;
    background: rgba(255, 77, 109, 0.12);
    animation: tgBeat 1.8s ease-in-out infinite;
}
@keyframes tgBeat {
    0%, 100% { transform: scale(1); }
    12% { transform: scale(1.12); }
    24% { transform: scale(1); }
    36% { transform: scale(1.08); }
}
.tg-empty-title { font-size: 0.95rem; font-weight: 900; color: #fff; margin-bottom: 6px; }
.tg-empty-text { font-size: 0.78rem; color: #9ca1b5; line-height: 1.9; max-width: 300px; margin: 0 auto 16px; }
.tg-empty-btn {
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 800;
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 9px 18px;
    cursor: pointer;
    background: linear-gradient(135deg, #8e6bff, #6a3df0);
    box-shadow: 0 8px 18px -10px rgba(124, 77, 255, 0.95);
}
.tg-empty-btn:active { transform: scale(0.96); }

@media (prefers-reduced-motion: reduce) {
    .tg-empty-icon, .tg-heart.pop i { animation: none; }
}