/* =========================================================
   Plataforma Switch 2 — abas, badge e bloco de área restrita
   Usa as variáveis do tema (--bs-*) para ficar em harmonia.
========================================================= */

/* ---------- Abas de plataforma ---------- */
.bs-platform-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0 0 18px;
}

.bs-platform-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
    text-decoration: none;
    color: var(--bs-fg-soft, #94a3b8);
    background: var(--bs-bg-2, #111c2e);
    border: 1px solid var(--bs-line, rgba(148, 163, 184, .18));
    transition: transform .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.bs-platform-tab:hover {
    transform: translateY(-1px);
    color: var(--bs-fg, #e2e8f0);
    border-color: var(--bs-line-strong, rgba(148, 163, 184, .35));
}

.bs-platform-tab.is-active {
    color: #fff;
    background: var(--bs-cyan-grad, linear-gradient(135deg, #0ea5e9, #22d3ee));
    border-color: transparent;
    box-shadow: 0 6px 18px rgba(34, 211, 238, .28);
}

.bs-platform-tab.is-s2.is-active {
    background: linear-gradient(135deg, #e60012, #ff4d4d);
    box-shadow: 0 6px 18px rgba(230, 0, 18, .32);
}

/* ---------- Badge Switch 2 na capa ---------- */
.bs-platform-badge-s2 {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 6;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    color: #fff;
    background: var(--bs-s2-badge, #e60012);
    box-shadow: 0 3px 10px rgba(0, 0, 0, .45);
    pointer-events: none;
}

/* ---------- Bloco "área restrita" na página do jogo ---------- */
.bs-s2-locked {
    position: relative;
    overflow: hidden;
    margin: 22px 0;
    padding: 30px 26px;
    border-radius: 20px;
    text-align: center;
    background: linear-gradient(145deg, rgba(230, 0, 18, .10), rgba(15, 23, 42, .55)),
                var(--bs-bg-2, #111c2e);
    border: 1px solid rgba(230, 0, 18, .35);
    box-shadow: var(--bs-shadow-lg, 0 24px 60px rgba(0, 0, 0, .35));
}

.bs-s2-locked::before {
    content: "";
    position: absolute;
    inset: -40% 55% auto -10%;
    height: 220%;
    background: radial-gradient(circle, rgba(230, 0, 18, .22), transparent 62%);
    pointer-events: none;
}

.bs-s2-locked-icon {
    font-size: 42px;
    line-height: 1;
    margin-bottom: 10px;
}

.bs-s2-locked-title {
    margin: 0 0 8px;
    font-size: 21px;
    font-weight: 800;
    color: var(--bs-fg, #f1f5f9);
}

.bs-s2-locked-text {
    margin: 0 auto 18px;
    max-width: 460px;
    font-size: 14px;
    line-height: 1.65;
    color: var(--bs-fg-soft, #94a3b8);
}

.bs-s2-locked-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 13px 26px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 800;
    color: #fff;
    text-decoration: none;
    background: linear-gradient(135deg, #e60012, #ff4d4d);
    box-shadow: 0 10px 26px rgba(230, 0, 18, .38);
    transition: transform .15s ease, box-shadow .15s ease;
}

.bs-s2-locked-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(230, 0, 18, .5);
    color: #fff;
}

.bs-s2-locked-days {
    display: inline-block;
    margin-top: 14px;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    color: #fecaca;
    background: rgba(230, 0, 18, .14);
    border: 1px solid rgba(230, 0, 18, .3);
}

@media (max-width: 576px) {
    .bs-platform-tab { padding: 8px 14px; font-size: 12px; }
    .bs-s2-locked { padding: 24px 18px; }
    .bs-s2-locked-title { font-size: 18px; }
}

/* ---------- Badge de plataforma nas informações do jogo ---------- */
.bs-platform-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 14px 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .06em;
    line-height: 1;
    color: var(--pf-c, #f1f5f9);
    background: #10151d;
    border: 1px solid rgba(255, 255, 255, .09);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
    vertical-align: middle;
}

.bs-platform-pill svg {
    width: 15px;
    height: 15px;
    flex: none;
}

.bs-platform-pill.is-s1 svg {
    color: var(--pf-c, var(--bs-cyan, #22d3ee));
}

.bs-platform-pill.is-s2 {
    border-color: rgba(230, 0, 18, .45);
    box-shadow: 0 2px 10px rgba(230, 0, 18, .28);
}

.bs-platform-pill.is-s2 svg {
    color: var(--pf-c, #ff4d4d);
}

@media (max-width: 576px) {
    .bs-platform-pill { padding: 5px 12px 5px 9px; font-size: 11px; }
    .bs-platform-pill svg { width: 13px; height: 13px; }
}

/* =========================================================
   Painel "Pacotes de acesso" (4.0.97)
========================================================= */
.bs-packs {
    margin: 22px 0;
    padding: 26px 24px;
    border-radius: 20px;
    background: radial-gradient(120% 100% at 0% 0%, rgba(0, 195, 226, .10), transparent 60%),
                radial-gradient(120% 100% at 100% 100%, rgba(230, 0, 18, .10), transparent 60%),
                var(--bs-bg-2, #111c2e);
    border: 1px solid var(--bs-line, rgba(148, 163, 184, .18));
    box-shadow: var(--bs-shadow-lg, 0 24px 60px rgba(0, 0, 0, .35));
    box-sizing: border-box;
}
.bs-packs.is-register { max-width: 980px; margin: 0 auto 26px; }
.bs-packs-head { text-align: center; margin-bottom: 20px; }
.bs-packs-eyebrow {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 5px 12px; border-radius: 999px;
    font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    color: var(--bs-cyan, #22d3ee); background: rgba(34, 211, 238, .10); border: 1px solid rgba(34, 211, 238, .25);
}
.bs-packs-head h3 { margin: 12px 0 6px; font-size: 22px; font-weight: 900; color: var(--bs-fg, #f1f5f9); letter-spacing: -.01em; }
.bs-packs-head p { margin: 0 auto; max-width: 520px; font-size: 14px; line-height: 1.6; color: var(--bs-fg-soft, #94a3b8); }
.bs-packs-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.bs-pack {
    position: relative; padding: 20px 18px 18px; border-radius: 16px;
    background: var(--bs-bg-elev, rgba(15, 23, 42, .6));
    border: 1px solid var(--bs-line, rgba(148, 163, 184, .18));
    transition: transform .15s ease, border-color .15s ease;
}
.bs-pack:hover { transform: translateY(-2px); }
.bs-pack.is-s1 { --pk: #22d3ee; --pk-bg: rgba(34, 211, 238, .12); }
.bs-pack.is-s2 { --pk: #ff4d5a; --pk-bg: rgba(230, 0, 18, .14); }
.bs-pack.is-need { border-color: var(--pk); box-shadow: 0 0 0 1px var(--pk), 0 14px 34px -14px var(--pk); }
.bs-pack-flag {
    position: absolute; top: -10px; right: 14px; padding: 4px 10px; border-radius: 999px;
    font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: var(--pk);
}
.bs-pack-top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.bs-pack-icon {
    flex: 0 0 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
    color: var(--pk); background: var(--pk-bg);
}
.bs-pack-icon svg { width: 24px; height: 24px; }
.bs-pack-top strong { display: block; font-size: 16px; font-weight: 800; color: var(--bs-fg, #f1f5f9); }
.bs-pack-top small { display: block; font-size: 12px; color: var(--bs-fg-mute, #64748b); }
.bs-pack ul { list-style: none; margin: 0 0 12px; padding: 0; }
.bs-pack li { display: flex; gap: 9px; align-items: baseline; padding: 4px 0; font-size: 13px; color: var(--bs-fg-soft, #cbd5e1); }
.bs-pack li i { color: var(--pk); font-size: 11px; }
.bs-pack-status { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 700; }
.bs-pack-status.on { color: #86efac; background: rgba(16, 185, 129, .12); border: 1px solid rgba(16, 185, 129, .3); }
.bs-pack-status.off { color: var(--bs-fg-mute, #94a3b8); background: rgba(148, 163, 184, .08); border: 1px solid var(--bs-line, rgba(148, 163, 184, .2)); }
.bs-packs-cta { display: flex; justify-content: center; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 18px; }
.bs-packs-cta:empty { display: none; }
.bs-packs-btn {
    display: inline-flex; align-items: center; gap: 9px; padding: 13px 26px; border-radius: 12px;
    font-size: 14px; font-weight: 800; color: #fff; text-decoration: none;
    background: var(--bs-cyan-grad, linear-gradient(135deg, #00c3e2, #0095c8));
    box-shadow: 0 10px 26px rgba(0, 195, 226, .32); transition: transform .15s ease;
}
.bs-packs-btn:hover { transform: translateY(-2px); color: #fff; }
.bs-packs-link { font-size: 13px; font-weight: 700; color: var(--bs-cyan, #22d3ee); text-decoration: none; }
.bs-packs-link:hover { text-decoration: underline; }
@media (max-width: 576px) {
    .bs-packs { padding: 22px 14px; }
    .bs-packs-grid { grid-template-columns: 1fr; }
    .bs-packs-head h3 { font-size: 19px; }
}

/* =========================================================
   4.0.98 — Ícones personalizáveis + pacotes na página /doar
========================================================= */
img.bs-pf-icon { object-fit: contain; display: inline-block; }
i.bs-pf-icon { display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.bs-platform-pill img.bs-pf-icon, .bs-platform-pill i.bs-pf-icon { width: 15px; height: 15px; font-size: 13px; }
.bs-pack-icon img.bs-pf-icon, .bs-pack-icon i.bs-pf-icon { width: 24px; height: 24px; font-size: 21px; }
.bs-pf-icon.is-xs { width: 11px; height: 11px; font-size: 10px; }

.bs-dnpacks { margin: 8px 0 34px; scroll-margin-top: 90px; }
.bs-dnpacks *, .bs-dnpacks *::before, .bs-dnpacks *::after { box-sizing: border-box; }
.bs-dnpacks-head { text-align: center; max-width: 640px; margin: 0 auto 24px; }
.bs-dnpacks-head h2 { margin: 12px 0 8px; font-size: clamp(22px, 3vw, 30px); font-weight: 900; letter-spacing: -.02em; color: var(--bs-fg, #f1f5f9); }
.bs-dnpacks-head p { margin: 0; color: var(--bs-fg-soft, #94a3b8); font-size: 15px; line-height: 1.6; }
.bs-dnpacks-grid { display: grid; gap: 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
.bs-dnpacks-grid.count-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 820px; margin: 0 auto; }
.bs-dnpack {
    --pk: var(--bs-cyan, #00c3e2);
    position: relative; display: flex; flex-direction: column;
    padding: 26px 22px 22px; border-radius: 18px;
    background: var(--bs-bg-elev, #121a2b);
    border: 1px solid var(--bs-line, rgba(255,255,255,.08));
    box-shadow: var(--bs-shadow-lg, 0 18px 40px rgba(0,0,0,.35));
    transition: transform .2s ease, border-color .2s ease;
}
.bs-dnpack:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--pk) 55%, transparent); }
.bs-dnpack.is-s2 { --pk: #ff4d5a; }
.bs-dnpack.is-combo {
    --pk: #ffb020;
    border-color: color-mix(in srgb, var(--pk) 50%, transparent);
    background: linear-gradient(180deg, color-mix(in srgb, var(--pk) 10%, var(--bs-bg-elev, #121a2b)), var(--bs-bg-elev, #121a2b) 60%);
}
.bs-dnpack-ribbon {
    position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
    padding: 5px 14px; border-radius: 999px; white-space: nowrap;
    background: var(--pk); color: #1a1205; font-size: 11px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase;
}
.bs-dnpack-icons { display: flex; gap: 8px; margin-bottom: 14px; }
.bs-dnpack-icon {
    display: inline-flex; width: 48px; height: 48px; align-items: center; justify-content: center; border-radius: 14px;
    background: color-mix(in srgb, var(--bs-cyan, #00c3e2) 14%, transparent); color: var(--bs-cyan, #00c3e2);
    border: 1px solid color-mix(in srgb, var(--bs-cyan, #00c3e2) 35%, transparent);
}
.bs-dnpack-icon.is-s2 { background: rgba(230,0,18,.14); color: #ff4d5a; border-color: rgba(255,77,90,.45); }
.bs-dnpack-icon .bs-pf-icon { width: 26px; height: 26px; font-size: 22px; }
.bs-dnpack h3 { margin: 0; font-size: 19px; font-weight: 900; color: var(--bs-fg, #f1f5f9); }
.bs-dnpack-sub { display: block; margin-top: 3px; color: var(--bs-fg-mute, #64748b); font-size: 13px; font-weight: 600; }
.bs-dnpack-tag { margin-top: 12px; font-size: 20px; font-weight: 900; color: var(--pk); }
.bs-dnpack ul { list-style: none; margin: 16px 0 20px; padding: 16px 0 0; border-top: 1px solid var(--bs-line, rgba(255,255,255,.08)); display: grid; gap: 9px; flex: 1; }
.bs-dnpack li { display: flex; gap: 9px; align-items: flex-start; color: var(--bs-fg-soft, #cbd5e1); font-size: 14px; line-height: 1.45; }
.bs-dnpack li i { color: var(--pk); margin-top: 3px; font-size: 12px; }
.bs-dnpack-btn {
    display: inline-flex; justify-content: center; align-items: center; gap: 8px; width: 100%;
    padding: 12px 16px; border-radius: 12px; font-weight: 800; font-size: 14px; text-decoration: none;
    background: var(--pk); color: #06121a; transition: filter .2s ease;
}
.bs-dnpack.is-s2 .bs-dnpack-btn { color: #fff; }
.bs-dnpack-btn:hover { filter: brightness(1.1); color: inherit; }
.bs-dnpack-btn.is-owned { background: rgba(34,197,94,.12); color: #4ade80; border: 1px solid rgba(74,222,128,.35); cursor: default; }
.bs-dnpack.is-owned { opacity: .92; }
.bs-dnpacks-note { margin: 18px auto 0; max-width: 720px; text-align: center; color: var(--bs-fg-mute, #94a3b8); font-size: 13px; }
.bs-dnpacks-note i { color: var(--bs-cyan, #00c3e2); margin-right: 4px; }
@media (max-width: 900px) {
    .bs-dnpacks-grid, .bs-dnpacks-grid.count-2 { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
    .bs-dnpack.is-combo { order: -1; margin-top: 10px; }
}

/* =========================================================
   4.0.103 — SVG enviado pelo usuário embutido na página:
   altura fixa e largura proporcional (logos largas não
   ficam espremidas num quadrado). A cor vem do campo
   "Cor do ícone" (currentColor).
========================================================= */
svg.bs-pf-icon { display: inline-block; vertical-align: middle; flex: none; }
.bs-platform-pill svg.bs-pf-icon { width: auto; max-width: 48px; height: 15px; }
.bs-pack-icon svg.bs-pf-icon { width: auto; max-width: 64px; height: 24px; }
.bs-dnpack-icon svg.bs-pf-icon { width: auto; max-width: 70px; height: 26px; }
.bs-pf-icon.is-xs { width: auto; max-width: 34px; height: 11px; }
@media (max-width: 576px) {
    .bs-platform-pill svg.bs-pf-icon { max-width: 42px; height: 13px; }
}