/* ============================================================
   Готовые шаблоны казино: карточки на главной (.tpl-section)
   и расширенная витрина на странице продукта (.tpl-showcase)
   ============================================================ */

.tpl-section,
.tpl-showcase {
    --tpl-violet: #7F25FB;
    --tpl-magenta: #CB3CFF;
    --tpl-lilac: #B676F4;
    --tpl-pink: #FF4FA3;
    --tpl-gold: #F5C46B;
    --tpl-gold-deep: #C8872E;
    --tpl-text: #F4EEFF;
    --tpl-muted: #B9A8CF;
    --tpl-card: linear-gradient(165deg, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0.02) 55%, rgba(127, 37, 251, 0.06) 100%);
    --tpl-border: rgba(182, 118, 244, 0.28);
    position: relative;
    padding: 110px 0 120px;
    color: var(--tpl-text);
    font-family: "Unbounded", sans-serif;
}

/* на странице продукта витрина идёт сразу под заголовком страницы */
.tpl-showcase { padding-top: 30px; }

/* компактный вариант на страницах решений — сразу под первым экраном */
.tpl-section.is-compact { padding: 20px 0 90px; }

.tpl-inner {
    max-width: 1440px;
    margin: 0 auto;
}

/* ---------- Заголовок ---------- */
.tpl-head {
    text-align: center;
    max-width: 860px;
    margin: 0 auto 60px;
}
.tpl-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    margin-bottom: 22px;
    border: 1px solid var(--tpl-border);
    border-radius: 999px;
    background: rgba(127, 37, 251, 0.12);
    color: var(--tpl-lilac);
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.tpl-eyebrow::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--tpl-magenta);
    box-shadow: 0 0 12px var(--tpl-magenta);
}
.tpl-head h2 {
    font-size: 40px;
    font-weight: 300;
    line-height: 1.2;
    margin-bottom: 18px;
}
.tpl-head h2 span {
    background: linear-gradient(90deg, #E9B8FF 0%, #CB3CFF 50%, #8F5BFF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.tpl-head p {
    color: var(--tpl-muted);
    font-size: 15px;
    line-height: 1.7;
    font-weight: 300;
}

/* ---------- Сетка карточек (главная) ---------- */
.tpl-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 26px;
}

.tpl-card {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: 22px;
    background: var(--tpl-card);
    border: 1px solid var(--tpl-border);
    box-shadow: 0 10px 28px rgba(8, 0, 20, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    overflow: hidden;
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.tpl-card:hover {
    transform: translateY(-4px);
    border-color: rgba(203, 60, 255, 0.65);
    box-shadow: 0 14px 32px rgba(8, 0, 20, 0.5), 0 0 16px rgba(203, 60, 255, 0.12);
}

/* Флагман — золотая окантовка */
.tpl-card.is-flagship {
    background:
        linear-gradient(165deg, rgba(245, 196, 107, 0.10) 0%, rgba(255, 255, 255, 0.02) 50%, rgba(127, 37, 251, 0.08) 100%) padding-box,
        linear-gradient(#240731, #1c0527) padding-box,
        linear-gradient(160deg, #FFE3A3, var(--tpl-gold-deep) 40%, rgba(182, 118, 244, 0.5) 100%) border-box;
    border: 1px solid transparent;
}
.tpl-card.is-flagship:hover {
    box-shadow: 0 14px 32px rgba(8, 0, 20, 0.5), 0 0 16px rgba(245, 196, 107, 0.14);
}

/* Окно браузера со скриншотом */
.tpl-media {
    position: relative;
    margin: 14px 14px 0;
    border-radius: 14px;
    overflow: hidden;
    background: #0d0214;
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.tpl-browser {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 12px;
    background: rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.tpl-browser i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
}
.tpl-browser i:nth-child(1) { background: #ff5f57; }
.tpl-browser i:nth-child(2) { background: #febc2e; }
.tpl-browser i:nth-child(3) { background: #28c840; }
.tpl-browser span {
    flex: 1;
    margin-left: 8px;
    padding: 3px 10px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.35);
    color: #9d8db3;
    font-family: 'Mulish', sans-serif;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tpl-shot {
    position: relative;
    aspect-ratio: 1200 / 583;
    overflow: hidden;
}
.tpl-shot img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    transition: transform 0.8s ease;
}
.tpl-card:hover .tpl-shot img,
.tpl-row:hover .tpl-shot img {
    transform: scale(1.05);
}
.tpl-shot::after { /* мягкое затемнение снизу */
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 45%;
    background: linear-gradient(to top, rgba(13, 2, 20, 0.75), transparent);
    pointer-events: none;
}

/* Бейджи на скриншоте */
.tpl-badge {
    position: absolute;
    top: 42px;
    left: 12px;
    z-index: 2;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #fff;
    background: linear-gradient(135deg, var(--tpl-pink), var(--tpl-magenta));
    box-shadow: 0 3px 10px rgba(255, 79, 163, 0.3);
}
.tpl-badge.is-gold {
    color: #2a1600;
    background: linear-gradient(135deg, #FFE7B0, var(--tpl-gold) 45%, var(--tpl-gold-deep));
    box-shadow: 0 3px 10px rgba(245, 196, 107, 0.25);
}

/* Тело карточки */
.tpl-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 22px 22px 24px;
}
/* Поколение платформы: новая / предыдущая версия софта */
.tpl-gen {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 7px;
    margin-bottom: 10px;
    padding: 4px 10px 4px 8px;
    border-radius: 999px;
    border: 1px solid rgba(61, 220, 151, 0.35);
    background: rgba(61, 220, 151, 0.08);
    color: #8FF0C4;
    font-family: 'Mulish', sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
}
.tpl-gen::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #3DDC97;
    box-shadow: 0 0 8px rgba(61, 220, 151, 0.8);
}
.tpl-gen.is-old {
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.05);
    color: #A99BBE;
}
.tpl-gen.is-old::before {
    background: #8D7FA3;
    box-shadow: none;
}
.tpl-info .tpl-gen { margin-bottom: 12px; }

.tpl-name {
    font-size: 22px;
    font-weight: 500;
    margin-bottom: 6px;
}
.tpl-tagline {
    color: var(--tpl-muted);
    font-family: 'Mulish', sans-serif;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 22px;
    min-height: 42px;
}

/* Цена */
.tpl-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px 12px;
    padding: 16px 0;
    margin-bottom: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.tpl-price-new {
    font-size: 30px;
    font-weight: 600;
    line-height: 1;
    background: linear-gradient(90deg, #FFFFFF 0%, #F0C8FF 60%, #D58BFF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.is-flagship .tpl-price-new {
    background: linear-gradient(90deg, #FFF3D6 0%, var(--tpl-gold) 60%, #E7A64B 100%);
    -webkit-background-clip: text;
    background-clip: text;
}
.tpl-price-old {
    position: relative;
    font-size: 17px;
    color: #8f7fa6;
    white-space: nowrap;
}
.tpl-price-old::after { /* перечёркивание по диагонали */
    content: "";
    position: absolute;
    left: -3px;
    right: -3px;
    top: 50%;
    height: 2px;
    background: var(--tpl-pink);
    transform: rotate(-12deg);
    box-shadow: 0 0 6px rgba(255, 79, 163, 0.8);
}

/* Кнопки */
.tpl-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: auto;
}
.tpl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 12px 14px;
    border-radius: 12px;
    font-family: "Unbounded", sans-serif;
    font-size: 13px;
    color: #fff;
    text-decoration: none;
    text-align: center;
    white-space: nowrap;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}
.tpl-btn svg { flex-shrink: 0; }
.tpl-btn-primary {
    background: linear-gradient(-60deg, var(--tpl-violet) 20%, var(--tpl-magenta) 68%);
    box-shadow: 0 4px 12px rgba(127, 37, 251, 0.25);
}
.tpl-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(203, 60, 255, 0.3);
}
.tpl-btn-ghost {
    border: 1px solid var(--tpl-border);
    background: rgba(255, 255, 255, 0.03);
}
.tpl-btn-ghost:hover {
    border-color: var(--tpl-lilac);
    background: rgba(182, 118, 244, 0.12);
}
.tpl-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
    padding: 6px 0;
    color: var(--tpl-lilac);
    font-size: 13px;
    text-decoration: none;
    transition: color 0.25s ease, gap 0.25s ease;
}
.tpl-more:hover {
    color: #E9B8FF;
    gap: 12px;
}

/* ---------- Подсказка про доступы ---------- */
.tpl-access {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px 22px;
    max-width: 900px;
    margin: 50px auto 0;
    padding: 20px 26px;
    border-radius: 18px;
    border: 1px solid var(--tpl-border);
    background: rgba(255, 255, 255, 0.035);
    text-align: left;
}
.tpl-access-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(182, 118, 244, 0.14);
    color: var(--tpl-lilac);
    flex-shrink: 0;
}
.tpl-access p {
    flex: 1;
    min-width: 240px;
    font-family: 'Mulish', sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: #DCCFF0;
}
.tpl-access p b {
    color: #fff;
    font-weight: 700;
}
.tpl-tg {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px 10px 10px;
    border-radius: 999px;
    background: linear-gradient(135deg, #2AABEE, #229ED9);
    color: #fff;
    font-size: 13px;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(34, 158, 217, 0.25);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.tpl-tg:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(34, 158, 217, 0.32);
}
.tpl-tg-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.22);
}

/* ============================================================
   Расширенная витрина на странице продукта
   ============================================================ */
.tpl-list {
    display: flex;
    flex-direction: column;
    gap: 34px;
}
.tpl-row {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 40px;
    align-items: center;
    padding: 26px;
    border-radius: 28px;
    background: var(--tpl-card);
    border: 1px solid var(--tpl-border);
    box-shadow: 0 12px 32px rgba(8, 0, 20, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: border-color 0.35s ease, box-shadow 0.35s ease;
}
.tpl-row:hover {
    border-color: rgba(203, 60, 255, 0.6);
    box-shadow: 0 14px 34px rgba(8, 0, 20, 0.5), 0 0 16px rgba(203, 60, 255, 0.1);
}
.tpl-row:nth-child(even) .tpl-media { order: 2; }
.tpl-row.is-flagship {
    background:
        linear-gradient(165deg, rgba(245, 196, 107, 0.10) 0%, rgba(255, 255, 255, 0.02) 50%, rgba(127, 37, 251, 0.08) 100%) padding-box,
        linear-gradient(#240731, #1c0527) padding-box,
        linear-gradient(160deg, #FFE3A3, var(--tpl-gold-deep) 40%, rgba(182, 118, 244, 0.5) 100%) border-box;
    border: 1px solid transparent;
}
.tpl-row.is-flagship:hover {
    box-shadow: 0 14px 34px rgba(8, 0, 20, 0.5), 0 0 16px rgba(245, 196, 107, 0.12);
}
.tpl-row .tpl-media {
    margin: 0;
    border-radius: 18px;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4);
}
.tpl-row .tpl-badge { top: 44px; left: 14px; }

.tpl-info .tpl-name {
    font-size: 30px;
    font-weight: 400;
    margin-bottom: 8px;
}
.tpl-info .tpl-tagline {
    min-height: 0;
    margin-bottom: 20px;
    font-size: 15px;
}
.tpl-features {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 18px;
    list-style: none;
    margin: 0 0 22px;
    padding: 0;
}
.tpl-features li {
    position: relative;
    padding-left: 26px;
    font-family: 'Mulish', sans-serif;
    font-size: 14px;
    line-height: 1.45;
    color: #E3D8F3;
}
.tpl-features li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat,
        linear-gradient(135deg, var(--tpl-violet), var(--tpl-magenta));
}
.is-flagship .tpl-features li::before {
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%232a1600' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat,
        linear-gradient(135deg, #FFE7B0, var(--tpl-gold));
}
.tpl-info .tpl-price {
    margin-bottom: 20px;
}
.tpl-info .tpl-price-new { font-size: 36px; }
.tpl-info .tpl-actions {
    grid-template-columns: repeat(2, minmax(0, 220px));
}

/* Общая админ-панель */
.tpl-admin {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 40px;
    align-items: center;
    margin-top: 60px;
    padding: 34px;
    border-radius: 28px;
    background:
        radial-gradient(120% 140% at 0% 0%, rgba(127, 37, 251, 0.22), transparent 55%),
        rgba(255, 255, 255, 0.035);
    border: 1px solid var(--tpl-border);
}
.tpl-admin h3 {
    font-size: 28px;
    font-weight: 300;
    margin-bottom: 12px;
}
.tpl-admin > div > p {
    color: var(--tpl-muted);
    font-family: 'Mulish', sans-serif;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 22px;
}
.tpl-admin-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
}
.tpl-admin-list li {
    padding: 14px 16px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
}
.tpl-admin-list b {
    display: block;
    font-weight: 500;
    font-size: 14px;
    margin-bottom: 4px;
}
.tpl-admin-list span {
    font-family: 'Mulish', sans-serif;
    font-size: 13px;
    color: var(--tpl-muted);
}
.tpl-admin .tpl-actions {
    grid-template-columns: repeat(2, minmax(0, 240px));
}
.tpl-admin .tpl-media { margin: 0; }

/* ---------- Адаптив ---------- */
@media (max-width: 1400px) {
    .tpl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
    .tpl-row,
    .tpl-admin {
        grid-template-columns: 1fr;
        gap: 26px;
    }
    .tpl-row:nth-child(even) .tpl-media { order: 0; }
}
@media (max-width: 700px) {
    .tpl-section,
    .tpl-showcase { padding: 70px 0 80px; }
    .tpl-showcase { padding-top: 20px; }
    .tpl-section.is-compact { padding: 10px 0 70px; }
    .tpl-head h2 { font-size: 26px; }
    .tpl-head p { font-size: 14px; }
    .tpl-grid { grid-template-columns: 1fr; }
    .tpl-row,
    .tpl-admin { padding: 16px; border-radius: 22px; }
    .tpl-info .tpl-name { font-size: 24px; }
    .tpl-features,
    .tpl-admin-list { grid-template-columns: 1fr; }
    .tpl-info .tpl-actions,
    .tpl-admin .tpl-actions { grid-template-columns: 1fr 1fr; }
    .tpl-access { padding: 18px; }
}
@media (max-width: 380px) {
    .tpl-actions,
    .tpl-info .tpl-actions,
    .tpl-admin .tpl-actions { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .tpl-card,
    .tpl-shot img,
    .tpl-btn { transition: none; }
}