/* ==========================================================================
   warriors — camada V7
   --------------------------------------------------------------------------
   Componentes introduzidos no MorpheusV7 (checkout, page builder, componentes
   compartilhados e plugins novos), repintados com a paleta do warriors.

   Este arquivo e ADITIVO: carrega DEPOIS do style.min.css e nao substitui nada
   dele. O style.min.css e o unico CSS de identidade vivo do tema — escrito a
   mao, minificado, sem SCSS fonte. Nao ha como regera-lo.

   NAO recompile resources/sass/: o assets/css/app.css que sai dali esta MORTO
   (nenhuma view o referencia) e foi compilado com prefixo de variavel vazio
   (--primary), enquanto o bootstrap.min.css que roda usa --bs-. Religar os dois
   quebra o tema inteiro.

   ATENCAO ao escrever markup novo: o tema carrega Font Awesome 5.6.3. Nomes de
   icone do FA6 NAO renderizam. Material Symbols tambem esta disponivel.
   ========================================================================== */

:root {
    /* -- Superficies (extraidas do style.min.css) ------------------------- */
    --w7-bg: #070b11;          /* fundo do body (com images/bg.png por cima) */
    --w7-surface: #0a0f16;     /* .page / .page-container                    */
    --w7-card: #0e1420;        /* card, list-group-item                      */
    --w7-sunken: #121c2b;      /* input, area rebaixada                      */

    /* -- Linhas ----------------------------------------------------------- */
    --w7-line: #17324d;
    --w7-line-soft: #1b293f;
    --w7-line-dark: #182026;

    /* -- Marca ------------------------------------------------------------ */
    --w7-gold: #ffc722;        /* primaria                                   */
    --w7-gold-dim: #d7bc2c;    /* titulo de sidebar                          */
    --w7-gold-soft: rgba(255, 199, 34, .14);
    --w7-blue: #005485;        /* secundaria                                 */

    /* -- Texto ------------------------------------------------------------ */
    --w7-text: #fff;
    --w7-muted: rgba(255, 255, 255, .7);
    --w7-faint: rgba(255, 255, 255, .45);

    /* -- Estado ----------------------------------------------------------- */
    --w7-success: #3fb27f;
    --w7-success-bg: rgba(63, 178, 127, .14);
    --w7-danger: #e05563;
    --w7-danger-bg: rgba(224, 85, 99, .14);
    --w7-warning: #ffc722;
    --w7-warning-bg: rgba(255, 199, 34, .14);
    --w7-info: #4aa3df;
    --w7-info-bg: rgba(74, 163, 223, .14);

    /* -- Forma -----------------------------------------------------------
       O tema nao tem raio unico: 3px/5px em superficie, 50px em pill. Estes
       tokens fixam o que os componentes V7 usam, sem mexer no resto. */
    --w7-radius: 5px;
    --w7-radius-sm: 3px;
    --w7-radius-pill: 50px;

    --w7-shadow: 0 6px 18px rgba(0, 0, 0, .55);

    /* -- Tipografia ------------------------------------------------------
       Fontes locais do tema (@font-face em style.min.css), nao Google. */
    --w7-font: gisha, sans-serif;
    --w7-font-bold: gishabd, gisha, sans-serif;
}

/* Glifo Material herda o tamanho do contexto — nunca estilizar
   .material-symbols-outlined direto, sempre por uma classe do componente. */
.material-symbols-outlined {
    font-size: inherit;
    line-height: 1;
    vertical-align: middle;
}

/* ==========================================================================
   LootBox
   --------------------------------------------------------------------------
   O style.min.css do tema so declara TAMANHO para .lootbox-case__window,
   .lootbox-case__item e .lootbox-case__item-image (160px/160px/109px). Nao ha
   layout de esteira, nem cor de raridade, nem regra nenhuma para a grade
   .lootbox__item* da pagina da caixa — a secao saia como texto empilhado.

   Medidas vindas de MORPHEUSV7/templates/default/resources/sass/lootbox.scss;
   paleta dourada do warriors.

   > A cor da raridade e ESCRITA PELO PHP como custom property inline. O CSS so
   > CONSOME. Valor invalido (o NOME da raridade em vez da cor) derruba a
   > declaracao inteira — por isso a view valida antes de escrever, e por isso
   > o neutro abaixo precisa existir: item sem raridade ficaria sem borda.
   ========================================================================== */

/* -- Esteira (open_type = case) ------------------------------------------- */
.lootbox-case {
    position: relative;
    padding: 1.25rem 0 2rem;
    overflow: hidden;
}

/* A classe SEM underscore duplo e contrato do lootbox.js: ele chama
   getBoundingClientRect() nela sem guarda. A com __ e a que o tema estiliza.
   A view emite as duas no mesmo elemento — nao renomear nenhuma. */
.lootbox-case-window,
.lootbox-case__window {
    position: relative;
    overflow: hidden;
    border-top: 1px solid var(--w7-line);
    border-bottom: 1px solid var(--w7-line);
    background: var(--w7-sunken);
}

.lootbox-case__rotatable {
    display: flex;
    gap: 8px;
    will-change: transform;
}

.lootbox-case__item {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px;
    color: var(--w7-text);
    /* neutro obrigatorio: o SCSS do default nao da valor padrao para a esteira */
    --lootbox-item-rarity: var(--w7-line-soft);
    background:
        linear-gradient(180deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .25) 100%),
        var(--lootbox-item-rarity);
    border: 2px solid var(--lootbox-item-rarity);
    border-radius: var(--w7-radius);
}

/* Caixa fixa em px + object-fit: sprites tem proporcoes diferentes e
   max-height em % nao resolve dentro de um flex item. */
.lootbox-case__item-image {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    flex: 1;
    overflow: hidden;
}

.lootbox-case__item-image img {
    max-width: 88%;
    max-height: 100%;
    width: auto;
    object-fit: contain;
}

.lootbox-case__item-name {
    width: 100%;
    padding: .2rem 0;
    font-family: var(--w7-font-bold);
    font-size: .72rem;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Agulha central + sombras das bordas. */
.lootbox-case__line {
    position: absolute;
    top: 1.25rem;
    left: 50%;
    width: 2px;
    height: 160px;
    margin-left: -1px;
    background: var(--w7-gold);
    box-shadow: 0 0 10px var(--w7-gold);
    z-index: 2;
    pointer-events: none;
}

.lootbox-case__shadow {
    position: absolute;
    top: 1.25rem;
    left: 0;
    right: 0;
    height: 160px;
    z-index: 2;
    pointer-events: none;
    background:
        linear-gradient(90deg, var(--w7-surface) 0%, transparent 18%),
        linear-gradient(270deg, var(--w7-surface) 0%, transparent 18%);
}

/* -- Roleta (open_type = wheel) ------------------------------------------- */
.lootbox-wheel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    padding: 1.5rem 1.5rem 2rem;
}

/* O canvas tem 400x400 fixos no HTML; sem max-width estoura no celular. */
#lootbox-wheel-canvas {
    display: block;
    max-width: min(480px, 100%);
    height: auto;
}

/* -- Grade "itens possiveis" ---------------------------------------------- */
/* A view do warriors usa row/row-cols do Bootstrap, entao aqui so o card. */
.lootbox__item {
    --lootbox-item-rarity: var(--w7-line-soft);
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-width: 0;
    padding: .75rem .75rem .6rem;
    color: var(--w7-text);
    background:
        linear-gradient(180deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .25) 100%),
        var(--lootbox-item-rarity);
    border: 2px solid var(--lootbox-item-rarity);
    border-radius: var(--w7-radius);
}

.lootbox__item-image {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 72px;
    flex: 0 0 auto;
    margin-bottom: .4rem;
    overflow: hidden;
}

.lootbox__item-image img {
    max-width: 88%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Item sem imagem hidratada: placeholder, para a grade nao desalinhar. */
.lootbox__item-image:empty::before {
    content: "";
    display: block;
    width: 52px;
    height: 52px;
    background: var(--w7-sunken);
    border: 1px solid var(--w7-line);
}

.lootbox__item-percent {
    position: absolute;
    top: .25rem;
    right: .3rem;
    font-size: .62rem;
    font-weight: 600;
    opacity: .65;
}

.lootbox__item-name {
    margin-bottom: .2rem;
    font-family: var(--w7-font-bold);
    font-size: .75rem;
    line-height: 1.3;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lootbox__item-rarity {
    margin-top: auto;
    font-size: .6rem;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--lootbox-item-rarity);
    filter: brightness(1.8);
}

/* -- Preco / saldo / acoes ------------------------------------------------ */
.lootbox__price-text,
.balance-box__text {
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.lootbox__price-value,
.balance-box__value {
    font-family: var(--w7-font-bold);
    font-size: 1.15rem;
    font-variant-numeric: tabular-nums;
}

.lootbox__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    margin-bottom: 1.5rem;
}

/* ==========================================================================
   Raffle
   --------------------------------------------------------------------------
   O style.min.css estiliza `.raffle .numbers .number` (e as variantes .allowed
   / .allowed.active / .my) mas NAO declara nada para o container `.numbers`:
   com `width:100%` em cada numero e sem grade, a cartela saia um numero por
   linha. Aqui entra a grade e o mapeamento das classes novas do raffle.js.

   O JS deixou de usar `.active`: ele faz
   classList.toggle('raffle-number--selected'). Como o visual de selecionado
   mora em `.allowed.active`, a regra abaixo repete esse estado para a classe
   nova — sem ela o numero clicado nao muda de aparencia.
   ========================================================================== */

.raffle .numbers,
#raffle-numbers-grid {
    display: grid;
    gap: .35rem;
    grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
}

/* Estado "selecionado" do contrato novo, espelhando .allowed.active. */
.raffle .numbers .number.raffle-number--selected,
#raffle-numbers-grid .raffle-number--selected {
    background: #0455ce;
    background: linear-gradient(180deg, rgba(4, 85, 206, 1) 0%, rgba(2, 42, 185, .479) 100%);
    box-shadow: inset 0 -5px 10px rgb(118, 170, 255);
    color: #fff;
    border-color: #66c7ff;
    filter: drop-shadow(0 0 10px #66c7ff);
}

/* Vendido e nao e meu: sem interacao. */
.raffle-number--sold {
    opacity: .55;
    cursor: not-allowed;
}

.raffle-number--mine {
    border-color: var(--w7-gold) !important;
    color: var(--w7-gold);
}

/* -- Progresso e resumo (elementos novos, sem regra no tema) --------------- */
.raffle-progress-info {
    color: var(--w7-muted);
}

.raffle-progress .progress {
    height: 9px;
    padding: 0;   /* ver a nota em .profile-bars .progress */
    background: var(--w7-sunken);
    border: 1px solid var(--w7-line);
    border-radius: var(--w7-radius-pill);
    overflow: hidden;
}

.raffle-progress .progress-bar {
    background: var(--w7-gold);
    transition: width .3s ease;
}

.raffle-summary-label {
    letter-spacing: .06em;
    color: var(--w7-muted);
}

.raffle-summary [data-selected-count],
.raffle-summary [data-total-cost] {
    font-family: var(--w7-font-bold);
    font-size: 1.1rem;
    font-variant-numeric: tabular-nums;
    color: var(--w7-gold);
}

/* ==========================================================================
   Inventario / bau renderizados pelo core
   --------------------------------------------------------------------------
   getInventory()->getRenderer()->render() emite .morpheus-inventory(-items) e
   .morpheus-warehouse, com cada .item em position:absolute e coordenadas
   inline. O CORE NAO TRAZ ESSAS REGRAS — quem as declara e o tema (no default
   elas estao em resources/sass/workshop.scss:74-117).

   O warriors so tinha `.workshop-inventory-container .morpheus-inventory
   { margin-right:10px }`: sem caixa posicionada e sem tamanho, os itens
   absolutos nao tinham contra o que se posicionar e o grid sumia — era o
   inventario "que nao aparece" na pagina do Profile.

   Medidas iguais as do default (256x256 e 256x480); cores na paleta do tema.
   ========================================================================== */

.morpheus-inventory-equipments {
    display: none;
}

.morpheus-inventory-items {
    position: relative;
    width: 256px;
    height: 256px;
    max-width: 100%;
}

.morpheus-warehouse {
    position: relative;
    width: 256px;
    height: 480px;
    max-width: 100%;
}

.morpheus-inventory-items .item,
.morpheus-warehouse .item {
    position: absolute;
    background-color: rgba(11, 26, 51, .5);
    border: 1px solid var(--w7-line);
}

.morpheus-inventory-items .item .image,
.morpheus-warehouse .item .image {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* O sprite vem com background-position inline; a <img>, quando existe, precisa
   caber na celula sem esticar. */
.morpheus-inventory-items .item .image img,
.morpheus-warehouse .item .image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* ==========================================================================
   Market (ItemMarket / AccountMarket / DirectMarket)
   --------------------------------------------------------------------------
   O market e o maior componente novo da V7: 1221 linhas em
   MORPHEUSV7/templates/default/resources/sass/market.scss. O style.min.css do
   warriors nao tem NENHUMA dessas classes — auditado uma a uma:

     product-card, product-badges, product-badge, product-buy, product-footer,
     item-rarity-badge, filter-grid, filter-tile(-box/-count/-abbr),
     market-toolbar, market-orders, market-order, market-filters-head,
     market-filters-clear, market-filter-flags, market-price-history,
     market-empty  -> todas com ZERO regra.

   Sem elas o card saia como texto empilhado (nome, "excellent", PRECO, valor),
   a imagem sem caixa (item grande estourava a celula), e os filtros de classe
   e categoria mostravam o <input type="checkbox"> cru ao lado de um icone
   minusculo — exatamente o que o print mostrava.

   Base: a camada ja validada em producao do dk-purple, com os tokens
   reescritos para a paleta dourada do warriors (--w7-*). Geometria e a mesma;
   o arredondamento vem no bloco final desta secao, ja que o dk-purple e de
   canto reto e o warriors usa 5px.
   ========================================================================== */

/* -- item-rarity-badge ---------------------------------------------------- */
.item-rarity-badge {
    position: absolute;
    top: .35rem;
    left: .35rem;
    padding: .1rem .4rem;
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #fff;
    background: var(--rarity-color, var(--w7-gold));
}

/* ==========================================================================
   7. AccountMarket - tooltip de personagem e preco
   ========================================================================== */

.market-char-tooltip {
    min-width: 220px;
    padding: .6rem .75rem;
    background: var(--w7-card);
    border: 1px solid var(--w7-line-soft);
    box-shadow: var(--w7-shadow);
    color: var(--w7-text);
    text-align: left;
}

.market-char-tooltip-header {
    display: flex;
    flex-direction: column;
    padding-bottom: .4rem;
    margin-bottom: .4rem;
    border-bottom: 1px solid var(--w7-line);
}

.market-char-tooltip-name {
    font-weight: 700;
    color: var(--w7-gold);
}

.market-char-tooltip-class {
    font-size: .72rem;
    color: var(--w7-muted);
}

.market-char-tooltip-attrs {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem .6rem;
    font-size: .72rem;
    color: var(--w7-muted);
    margin-bottom: .45rem;
}

.market-char-tooltip-attrs strong {
    color: var(--w7-text);
}

.market-char-tooltip-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: .75rem;
    padding: .12rem 0;
    color: var(--w7-muted);
}

.market-char-tooltip-row strong {
    color: var(--w7-text);
}

.market-account-view-price {
    margin-bottom: .75rem;
}

.market-account-view-price-value {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--w7-gold);
    line-height: 1.1;
}

.market-account-view-price-name {
    font-size: .8rem;
    color: var(--w7-muted);
}

/* ==========================================================================
   8. ItemMarket — filtros, ordenação, raridade e histórico de preço
   ========================================================================== */

.market-filters-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .75rem;
}

.market-filters-clear {
    font-size: .75rem;
    font-weight: 600;
    color: var(--w7-gold);
    text-decoration: none;
    white-space: nowrap;
}

.market-filters-clear:hover {
    color: var(--w7-gold-dim);
    text-decoration: underline;
}

.market-filters-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 .3rem;
    margin-left: .35rem;
    background: var(--w7-gold);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
}

.market-filter-flags {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .1rem .5rem;
    margin-bottom: .75rem;
}

.market-filter-category .form-check-label {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    width: 100%;
}

.market-filter-category-icon {
    font-size: 1rem;
    color: var(--w7-gold);
    flex-shrink: 0;
}

.market-filter-category-count {
    margin-left: auto;
    padding: 0 .35rem;
    background: var(--w7-sunken);
    border: 1px solid var(--w7-line);
    color: var(--w7-muted);
    font-size: .68rem;
    font-weight: 600;
}

/* -- Toolbar / ordenação -------------------------------------------------- */
.market-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.market-orders {
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-wrap: wrap;
}

.market-orders-label {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--w7-muted);
}

.market-order {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    padding: .25rem .6rem;
    background: var(--w7-surface);
    border: 1px solid var(--w7-line);
    color: var(--w7-text);
    font-size: .78rem;
    text-decoration: none;
}

.market-order:hover {
    border-color: var(--w7-gold);
    color: var(--w7-gold-dim);
}

.market-order--active {
    background: var(--w7-gold);
    border-color: var(--w7-gold);
    color: #fff;
}

.market-order .material-symbols-outlined {
    font-size: .95rem;
}

/* -- Raridade ------------------------------------------------------------- */
.product--rarity {
    border-color: var(--rarity-color, var(--w7-line)) !important;
}

.product-image {
    position: relative;
}

/* -- Badges do item ------------------------------------------------------- */
.product-badges {
    display: flex;
    flex-wrap: wrap;
    gap: .2rem;
    margin-bottom: .35rem;
}

.product-badge {
    padding: .05rem .35rem;
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    background: var(--w7-sunken);
    border: 1px solid var(--w7-line);
    color: var(--w7-muted);
}

.product-badge--excellent {
    background: rgba(25, 135, 84, .2);
    border-color: rgba(25, 135, 84, .45);
    color: var(--w7-success);
}

.product-badge--ancient {
    background: rgba(255, 193, 7, .16);
    border-color: rgba(255, 193, 7, .4);
    color: var(--w7-warning);
}

/* -- Miniatura em tabela -------------------------------------------------- */
.market-row-thumb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--w7-sunken);
    border: 1px solid var(--w7-line);
    border-left: 3px solid var(--rarity-color, var(--w7-line));
}

.market-row-thumb img {
    max-width: 100%;
    max-height: 100%;
}

/* -- Histórico / sugestão de preço --------------------------------------- */
.market-price-history {
    margin-top: .75rem;
    padding: .75rem;
    background: var(--w7-sunken);
    border: 1px solid var(--w7-line);
}

.market-price-history[hidden] {
    display: none;
}

.market-price-history-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .5rem;
}

.market-price-history-head strong {
    color: var(--w7-text);
    font-size: .9rem;
}

.market-price-chart {
    display: block;
    width: 100%;
    height: 60px;
}

.market-price-chart polyline {
    fill: none;
    stroke: var(--w7-gold);
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}

.market-price-history-hint {
    display: block;
    font-size: .72rem;
    color: var(--w7-muted);
}

/* ==========================================================================
   11. Filtros em grid (categoria por icone, classe por imagem)
   ========================================================================== */

.filter-grid {
    display: grid;
    gap: .3rem;
    margin-bottom: 1rem;
}

.filter-grid--category {
    grid-template-columns: repeat(auto-fill, minmax(34px, 1fr));
}

.filter-grid--class {
    grid-template-columns: repeat(auto-fill, minmax(38px, 1fr));
}

.filter-tile {
    position: relative;
    margin: 0;
    cursor: pointer;
}

.filter-tile input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.filter-tile-box {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    width: 100%;
    background: var(--w7-surface);
    border: 1px solid var(--w7-line);
    color: var(--w7-muted);
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.filter-tile-box .material-symbols-outlined {
    font-size: 1.15rem;
}

.filter-tile-box img {
    max-width: 78%;
    max-height: 78%;
    object-fit: contain;
    opacity: .55;
    transition: opacity .15s ease;
}

.filter-tile:hover .filter-tile-box {
    border-color: var(--w7-gold);
    color: var(--w7-gold);
}

.filter-tile:hover .filter-tile-box img {
    opacity: .85;
}

.filter-tile--active .filter-tile-box {
    background: var(--w7-gold-soft);
    border-color: var(--w7-gold);
    color: var(--w7-text);
}

.filter-tile--active .filter-tile-box img {
    opacity: 1;
}

/* Foco por teclado — o input real fica oculto, então espelhamos no box. */
.filter-tile input:focus-visible + .filter-tile-box {
    outline: 2px solid var(--w7-gold);
    outline-offset: 1px;
}

.filter-tile-count {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 15px;
    padding: 0 3px;
    background: var(--w7-gold);
    border: 1px solid var(--w7-card);
    color: #fff;
    font-size: .6rem;
    font-weight: 700;
    line-height: 15px;
    text-align: center;
}

/* ==========================================================================
   22. ItemMarket — card do item com destaque de raridade
   --------------------------------------------------------------------------
   O app.css ja estiliza `.market.items .product-*` (era V6). As regras abaixo
   usam o MESMO escopo para poder sobrepor, ja que o v7.css carrega depois:

     .product-name   -> era nowrap + ellipsis (uma linha); vira clamp de 2
     .product-expire -> era position:absolute ancorado no .card-body; como o
                        chip mudou para o rodape, volta a ser estatico
     .product-price span -> pintava TODO span de vermelho, inclusive o nome da
                        moeda; agora so o valor recebe destaque

   Armadilha de imagem (a mesma do podio e do HallFame): o sprite do MU e
   escuro e o card tambem. A caixa tem tamanho fixo, fundo proprio mais claro e
   sombra projetada na imagem — sem isso itens como o Bone Blade somem no fundo.
   ========================================================================== */

.market.items .product-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.market.items .product-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--w7-shadow);
}

/* Faixa de raridade no topo, usando a var que a view emite no elemento pai. */
.market.items .product--rarity::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 2;
    background: var(--rarity-color, var(--w7-gold));
}

.market.items .product--rarity:hover {
    border-color: var(--rarity-color, var(--w7-line-soft)) !important;
    box-shadow: 0 6px 20px -6px var(--rarity-color, var(--w7-shadow));
}

/* -- Nome ----------------------------------------------------------------- */
.market.items .product-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    overflow: hidden;
    min-height: 2.6em;
    line-height: 1.3;
    font-size: .82rem;
    font-weight: 600;
}

/* -- Imagem --------------------------------------------------------------- */
.market.items .product-image {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 118px;
    margin-bottom: .75rem;
    flex-grow: 0;
    background:
        radial-gradient(circle at 50% 42%, rgba(155, 119, 203, .26) 0%, rgba(33, 26, 43, .96) 72%),
        var(--w7-sunken);
    border: 1px solid var(--w7-line);
    box-shadow: inset 0 0 16px rgba(0, 0, 0, .55);
}

.market.items .product-image img {
    display: block;
    max-width: 82%;
    max-height: 88px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .65));
}

/* -- Badges sobre a imagem ------------------------------------------------ */
.market.items .product-badges {
    position: absolute;
    top: .3rem;
    left: .3rem;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .18rem;
    margin-bottom: 0;
}

.market.items .item-rarity-badge {
    position: absolute;
    right: .3rem;
    bottom: .3rem;
    z-index: 1;
    padding: .05rem .35rem;
    font-size: .58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #fff;
    background: var(--rarity-color, var(--w7-gold));
    border: none;
}

.product-badge--normal {
    background: rgba(115, 91, 146, .28);
    border-color: var(--w7-line-soft);
    color: var(--w7-text);
}

/* -- Preco ---------------------------------------------------------------- */
/*
   O bloco do preco passou a usar card-stat / card-stat-label /
   card-stat-value--price (mesmo padrao do tema default), que ja tem regra na
   secao 3. As regras de .product-price / .product-price-value que existiam aqui
   foram removidas junto — sem aquele markup, virariam CSS orfao.

   Sobra a moeda: o seletor perdeu o ancestral .product-price, entao passa a ser
   escopado so por .market.items. Continua necessario para neutralizar o
   `.market.items .product-price span { color: #dc3545 }

` do app.css.
*/
.market.items .product-price-coin {
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--w7-muted);
}

/* -- Rodape --------------------------------------------------------------- */
.market.items .product-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

/* Estatico: o chip saiu do .card-body, onde o app.css o posicionava absoluto. */
.market.items .product-expire {
    position: static;
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    font-size: .66rem;
    line-height: 1.2;
    color: var(--w7-muted);
    white-space: nowrap;
}

.market.items .product-expire:empty {
    display: none;
}

.market.items .product-expire-icon {
    font-size: .85rem;
}

.market.items .product-buy {
    flex-shrink: 0;
}

.market.items .product-buy.disabled {
    opacity: .45;
    pointer-events: none;
}

/* ==========================================================================
   23. Filtros do market — resposta ao clique e contencao do TomSelect
   --------------------------------------------------------------------------
   1) CLASSE e CATEGORIA "nao selecionavam": o destaque vinha SO de
      `.filter-tile--active`, classe aplicada pelo PHP no carregamento da
      pagina. O input real e visualmente oculto (opacity: 0), entao clicar
      marcava o checkbox e nada mudava na tela — parecia que o clique nao
      pegava. As regras :checked abaixo dao o retorno imediato, espelhando
      exatamente o visual de --active.

   2) O select EXCELLENT ficava ilegivel: com rotulos longos, tanto as chips
      quanto as opcoes do dropdown estouravam a largura da barra lateral e o
      texto quebrava em colunas estreitas. Aqui as duas coisas sao contidas em
      uma linha com reticencias.
   ========================================================================== */

/* -- 1) Retorno imediato ao clicar ---------------------------------------- */
.filter-tile input:checked + .filter-tile-box {
    background: var(--w7-gold-soft);
    border-color: var(--w7-gold);
    color: var(--w7-text);
}

.filter-tile input:checked + .filter-tile-box img {
    opacity: 1;
}

/* Marca de confirmacao no canto, para o estado ficar obvio mesmo em icone
   monocromatico. */
.filter-tile input:checked + .filter-tile-box::after {
    content: "";
    position: absolute;
    right: 3px;
    bottom: 3px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--w7-gold);
}

.filter-tile-box {
    position: relative;
}

/* -- 2) EXCELLENT e SOCKETS: grupo de checkboxes -------------------------- */
/*
   Os dois deixaram de ser <select multiple> com TomSelect (o controle nunca
   coube na largura da barra: as chips eram espremidas pelo flex a poucos
   pixels). Passaram ao mesmo grupo de ATRIBUTOS. As regras de .ts-* que
   existiam aqui foram removidas junto — sem TomSelect no painel, virariam CSS
   orfao.
*/

/* Os rotulos de EXCELLENT sao longos ("Add Monster Amount Drop Rate"), entao
   a variante empilha em coluna unica e limita a altura. */
.market-filter-flags--stack {
    grid-template-columns: 1fr;
    max-height: 190px;
    overflow-y: auto;
    padding-right: .2rem;
}

.market-filter-flags .form-check {
    min-width: 0;
    margin-bottom: 0;
}

.market-filter-flags .form-check-label {
    display: block;
    font-size: .78rem;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.market-filter-flags--stack::-webkit-scrollbar {
    width: 6px;
}

.market-filter-flags--stack::-webkit-scrollbar-thumb {
    background: var(--w7-line-soft);
}

.market-filter-flags--stack::-webkit-scrollbar-track {
    background: var(--w7-sunken);
}

.webshop-product-image .item-rarity-badge {
    position: absolute;
    right: .3rem;
    bottom: .3rem;
    padding: .05rem .35rem;
    font-size: .58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #fff;
    background: var(--rarity-color, var(--w7-gold));
    border: none;
}

/* -- Categoria sem icone: abreviacao no lugar do glifo generico ----------- */
/*
   $categoryIcons nao chega nesta instalacao, e o fallback fixo deixava as 17
   categorias com o mesmo glifo. A abreviacao de 3 letras do rotulo diferencia
   as pilulas; o nome completo fica no title do <label>.
*/
.filter-tile-abbr {
    font-family: "Poppins", sans-serif;
    font-size: .6rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .02em;
    color: var(--w7-muted);
    transition: color .15s ease;
}

.filter-tile:hover .filter-tile-abbr,
.filter-tile--active .filter-tile-abbr,
.filter-tile input:checked + .filter-tile-box .filter-tile-abbr {
    color: var(--w7-text);
}

/* Categoria sem nenhum item: atenua, como o .market-category-pill--empty
   do tema default. */
.filter-tile--empty .filter-tile-box {
    opacity: .4;
}

.filter-tile--empty:hover .filter-tile-box {
    opacity: .75;
}

/* -- Icone de categoria: SVG do core em fundo escuro ---------------------- */
/*
   Os SVGs de resources/images/item-category/ nao tem atributo fill — herdam
   preto, porque o tema default os usa sobre fundo claro. No tile escuro do
   warriors ficariam invisiveis, entao sao pintados de branco por filtro.

   Escopado em .filter-grid--category para nao atingir o filtro de CLASSE, que
   usa PNGs coloridos dos personagens e seria arruinado pelo mesmo filtro.
*/
.filter-grid--category .filter-tile-box img {
    filter: brightness(0) invert(1);
    opacity: .5;
}

.filter-grid--category .filter-tile:hover .filter-tile-box img,
.filter-grid--category .filter-tile--active .filter-tile-box img,
.filter-grid--category .filter-tile input:checked + .filter-tile-box img {
    opacity: 1;
}

/* ==========================================================================
   25. Market — consulta de precos e detalhe do item
   --------------------------------------------------------------------------
   As views `ItemMarket/prices.phtml` e `show.phtml` NAO existem no warriors: o
   renderer cai na view do proprio plugin, entao as paginas funcionam com os
   dados certos — mas saiam sem estilo nenhum, porque 102 das 115 classes de
   market.scss nao tinham regra aqui.

   Sobrescrever essas views nao e viavel: sao ionCube, o encoder nao deixa
   string legivel (testado) e nao ha secao no update-theme.md, entao cada
   variavel seria chute. Este porte resolve o visual sem tocar no contrato.

   Traducao da paleta: $primary -> --w7-gold, $body-color -> --w7-text,
   $text-muted -> --w7-muted, $border-color -> --w7-line, $gray-100 ->
   --w7-sunken, border-radius -> 0 (convencao do tema).
   ========================================================================== */

/* -- Card de produto na listagem de precos -------------------------------- */
.market-product {
    height: 100%;
}

.market-product .card {
    height: 100%;
}

.market-product-link {
    display: flex;
    align-items: center;
    justify-content: center;
}

.market-product-image {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 110px;
    padding: .75rem;
    overflow: hidden;
    border-bottom: 1px solid var(--w7-line);
    background:
        radial-gradient(circle at 50% 40%, rgba(155, 119, 203, .26) 0%, rgba(33, 26, 43, .96) 72%),
        var(--w7-sunken);
}

/* Quando o item tem raridade, ela tinge a moldura em vez de virar fundo chapado. */
.market-product-image[style*="--rarity-color"],
.market-product[style*="--rarity-color"] .market-product-image {
    border-bottom-color: var(--rarity-color, var(--w7-line));
    box-shadow: inset 0 -2px 0 -1px var(--rarity-color, transparent);
}

.market-product-image img {
    max-height: 80px;
    width: auto;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .65));
}

.market-product-expire {
    position: absolute;
    top: .3rem;
    right: .3rem;
    padding: .1rem .32rem;
    font-size: .7rem;
    font-weight: 700;
    line-height: 1.5;
    color: #fff;
    background: rgba(0, 0, 0, .55);
}

.market-product-name {
    margin-bottom: .25rem;
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--w7-text);
}

.market-product-name a {
    color: inherit;
    text-decoration: none;
}

.market-product-name a:hover {
    color: var(--w7-gold-dim);
}

.market-product-badges {
    display: flex;
    flex-wrap: wrap;
    gap: .2rem;
    margin-bottom: .25rem;
}

/* -- Badges de atributo ---------------------------------------------------
   As cores sao convencao do MU (excellent verde, ancient azul, socket roxo,
   harmony amarelo, luck/skill azul claro, refine malva). O default usa tints
   claros porque o fundo dele e claro; aqui viram fundos translucidos com texto
   vivo, para manter a leitura sobre o roxo escuro. */
.market-badge {
    display: inline-block;
    padding: .1rem .35rem;
    font-size: .6rem;
    font-weight: 700;
    line-height: 1.5;
    text-transform: uppercase;
    letter-spacing: .03em;
    border: 1px solid transparent;
}

.market-badge-normal {
    color: var(--w7-muted);
    background: rgba(157, 137, 183, .16);
    border-color: rgba(157, 137, 183, .34);
}

.market-badge-excellent {
    color: #5ef2a0;
    background: rgba(25, 255, 128, .14);
    border-color: rgba(25, 255, 128, .38);
}

.market-badge-ancient {
    color: #7dd3fc;
    background: rgba(0, 102, 255, .2);
    border-color: rgba(0, 102, 255, .45);
}

.market-badge-socket {
    color: #d8b4fe;
    background: rgba(178, 102, 255, .18);
    border-color: rgba(178, 102, 255, .42);
}

.market-badge-harmony {
    color: #fadf5a;
    background: rgba(250, 222, 9, .14);
    border-color: rgba(250, 222, 9, .38);
}

.market-badge-luck,
.market-badge-skill {
    color: #a8c8ff;
    background: rgba(128, 178, 255, .16);
    border-color: rgba(128, 178, 255, .4);
}

.market-badge-refine {
    color: #e0b4e1;
    background: rgba(174, 128, 175, .18);
    border-color: rgba(174, 128, 175, .42);
}

/* -- Filtros --------------------------------------------------------------- */
.market-filter-icon {
    font-size: 1.2rem;
    width: 1.2rem;
    height: 1.2rem;
}

.market-filter-heading {
    display: block;
    margin-bottom: .5rem;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--w7-muted);
}

.market-filter-range-value {
    width: 28px;
    flex-shrink: 0;
}

.market-order-select,
.market-account-tabs {
    overflow-x: auto;
}

/* -- Estado vazio ---------------------------------------------------------- */
.market-empty {
    padding: 3rem 1rem;
    text-align: center;
    color: var(--w7-muted);
}

.market-empty p {
    margin: 0;
}

.market-empty-icon {
    display: block;
    margin: 0 auto 1rem;
    font-size: 4rem;
    width: 4rem;
    height: 4rem;
    color: var(--w7-gold);
}

/* -- Historico de preco (aparece no formulario de venda) ------------------- */
.market-price-history {
    padding: .75rem .9rem;
    margin-bottom: 1rem;
    background: var(--w7-sunken);
    border: 1px solid var(--w7-line);
}

.market-price-history-suggestion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem;
}

.market-price-history-suggestion-label {
    font-size: .9rem;
    font-weight: 700;
    color: var(--w7-text);
}

.market-price-history-use {
    padding: .2rem .6rem;
    font-size: .72rem;
    font-weight: 600;
    color: var(--w7-gold);
    background: transparent;
    border: 1px solid var(--w7-gold);
    cursor: pointer;
    transition: background-color .12s ease, color .12s ease;
}

.market-price-history-use:hover {
    color: #fff;
    background: var(--w7-gold);
}

.market-price-history-hint {
    margin-top: .15rem;
    font-size: .72rem;
    color: var(--w7-muted);
}

.market-price-history-toggle {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: .5rem 0;
    font-size: .78rem;
    color: var(--w7-muted);
    cursor: pointer;
}

.market-price-history-chart {
    display: block;
    width: 100%;
    height: 60px;
}

.market-price-history-chart polyline {
    fill: none;
    stroke: var(--w7-gold);
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}

/* -- Detalhe do item ------------------------------------------------------- */
.market-item-rows {
    margin: 0;
}

.market-item-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    padding: .4rem 0;
    font-size: .84rem;
    border-bottom: 1px solid var(--w7-line);
}

.market-item-row:last-child {
    border-bottom: none;
}

.market-item-price-diff {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    margin-top: .5rem;
    font-size: .72rem;
    font-weight: 600;
    color: var(--w7-muted);
}

.market-item-price-diff-below {
    color: #5cd6a0;
}

.market-item-price-diff-above {
    color: #ff8095;
}

.market-item-price-diff-icon {
    font-size: 1rem;
    width: 1rem;
    height: 1rem;
}

.market-item-section {
    margin-bottom: 2.25rem;
}

.market-item-section:last-child {
    margin-bottom: 0;
}

.market-item-section-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .35rem .75rem;
    margin-bottom: .85rem;
}

.market-item-hint {
    font-size: .78rem;
    font-weight: 400;
    color: var(--w7-muted);
}

.market-item-hint a {
    color: inherit;
    text-decoration: underline;
}

.market-item-hint a:hover {
    color: var(--w7-gold-dim);
}

.market-item-details {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
}

.market-item-details-rows {
    flex: 1;
    min-width: 220px;
    margin: 0;
}

.market-item-info {
    flex: 0 0 auto;
    min-width: 240px;
    max-width: 100%;
    padding: 1rem 1.25rem;
    background: var(--w7-card);
    border: 1px solid var(--w7-line);
}

.market-item-info .item-info {
    font-size: .8rem;
}

.market-item-classes {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .3rem;
}

.market-item-classes img {
    width: 26px;
    height: 26px;
}

.market-item-stats {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1.25rem;
}

.market-item-stat {
    display: flex;
    flex-direction: column;
    flex: 1 1 140px;
    padding: .6rem .9rem;
    background: var(--w7-sunken);
    border: 1px solid var(--w7-line);
}

.market-item-stat-label {
    margin-bottom: .15rem;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--w7-muted);
}

.market-item-stat-value {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    color: var(--w7-text);
}

.market-item-stat-value-price {
    color: var(--w7-gold);
}

.market-item-empty {
    padding: 1.5rem 1rem;
    text-align: center;
    color: var(--w7-muted);
}

.market-item-chart-wrap {
    position: relative;
}

.market-item-chart {
    display: block;
    width: 100%;
}

.market-item-chart-line {
    fill: none;
    stroke: var(--w7-gold);
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}

.market-item-chart-area {
    fill: rgba(169, 131, 221, .18);
    stroke: none;
}

.market-item-chart-grid {
    stroke: var(--w7-line);
    stroke-width: 1;
}

.market-item-chart-point {
    fill: var(--w7-gold);
}

.market-item-chart-label {
    font-size: .68rem;
    fill: var(--w7-muted);
}

.market-item-chart-tooltip {
    position: absolute;
    padding: .25rem .5rem;
    font-size: .72rem;
    color: var(--w7-text);
    background: var(--w7-card);
    border: 1px solid var(--w7-line-soft);
    pointer-events: none;
}

/* -- Pagina de consulta de precos ------------------------------------------ */
.market-prices-search {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1.75rem;
}

.market-prices-search .form-control {
    flex: 1;
}

.market-prices-suggestion {
    display: block;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

.market-prices-suggestion:hover .market-product-name {
    color: var(--w7-gold-dim);
}

.market-prices-suggestion-count {
    font-size: .72rem;
    color: var(--w7-muted);
}

.market-prices-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    margin-bottom: .75rem;
}

.market-prices-change {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .8rem;
    font-weight: 600;
    color: var(--w7-muted);
    text-decoration: none;
}

.market-prices-change:hover {
    color: var(--w7-gold-dim);
}

.market-prices-change-icon {
    font-size: 1.1rem;
    width: 1.1rem;
    height: 1.1rem;
}

.market-prices-tabs {
    margin-bottom: 1rem;
}

.market-prices-tabs .nav-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

.market-prices-count {
    font-size: .68rem;
    font-weight: 600;
    color: var(--w7-muted);
}

.market-prices-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1rem;
}

/* Acoes da barra do market: "Vender item" e "Consultar precos" ficam juntos a
   esquerda; o .market-toolbar usa space-between, entao sem este agrupador os
   dois botoes iriam para pontas opostas. */
.market-toolbar-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
}


/* -- Arredondamento do warriors ------------------------------------------
   O dk-purple e canto reto; aqui os mesmos elementos ganham o raio do tema. */
.market.items .product-card,
.market-product .card,
.filter-tile-box,
.market-order,
.market-price-history,
.market-empty {
    border-radius: var(--w7-radius);
}

.product-badge,
.market-badge,
.item-rarity-badge,
.market-filters-count,
.filter-tile-count {
    border-radius: var(--w7-radius-pill);
}

/* Linha do vendedor — existe so no warriors (o V6 do tema mostrava); nao ha
   equivalente no default, entao a regra e daqui. */
.product-seller {
    display: flex;
    flex-direction: column;
    margin-bottom: .4rem;
    line-height: 1.2;
}

.product-seller-label {
    order: 2;
    font-size: .6rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--w7-faint);
}

.product-seller-name {
    order: 1;
    font-family: var(--w7-font-bold);
    font-size: .8rem;
    color: var(--w7-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ==========================================================================
   Componentes V7 de core: checkout, VIP, info do servidor e compartilhados
   --------------------------------------------------------------------------
   Nenhuma destas classes tinha regra no warriors — auditadas uma a uma:

     checkout-* (card, step, amounts, gateways, summary, history, pending),
     nav-sidebar-* e gateway-card (selecao de gateway),
     donate-pix-* (confirmacao de PIX/boleto),
     plan-card-* (vantagens VIP e servicos da pagina de informacoes),
     server-rate / server-stat / server-spec / server-event-pill /
     server-command (pagina /info), vip-about-* e vip-bank-*,
     card-stat* (bloco de preco rotulado), page-tabs, icon-text,
     sidebar-toggler, form-range-control/-text.

   Sem elas as paginas de checkout, /vip, /vip/advantages e /info sairiam como
   texto corrido — foi por isso que as views V6 do tema continuavam com tabela
   fixa: nunca houve o CSS do componente novo.

   Base: camada validada em producao do dk-purple, tokens reescritos para a
   paleta do warriors. O arredondamento vem no bloco final.
   ========================================================================== */

/* Chips de icone do tema: o glifo herda o tamanho do contexto ------------- */
.icon .material-symbols-outlined,
.icon-text .material-symbols-outlined {
    font-size: inherit;
    line-height: 1;
}

/* ==========================================================================
   1. Checkout
   ========================================================================== */

.checkout-layout {
    align-items: flex-start;
}

/* -- Pedidos pendentes ---------------------------------------------------- */
.checkout-pending {
    display: flex;
    gap: .85rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    background: var(--w7-warning-bg);
    border: 1px solid rgba(255, 193, 7, .35);
    color: var(--w7-text);
}

.checkout-pending-icon {
    font-size: 1.5rem;
    color: var(--w7-warning);
    flex-shrink: 0;
}

.checkout-pending-body {
    flex: 1;
    min-width: 0;
}

.checkout-pending-list {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    margin-top: .5rem;
}

.checkout-pending-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .5rem .75rem;
    background: var(--w7-card);
    border: 1px solid var(--w7-line);
    text-decoration: none;
    color: var(--w7-text);
    font-size: .875rem;
}

.checkout-pending-item:hover {
    color: var(--w7-gold-dim);
    border-color: var(--w7-gold);
}

.checkout-pending-resume {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    color: var(--w7-gold);
    font-weight: 600;
    white-space: nowrap;
}

.checkout-pending-resume .material-symbols-outlined {
    font-size: 1rem;
}

/* -- Card / passos -------------------------------------------------------- */
.checkout-card {
    overflow: hidden;
    background: var(--w7-card);
    border: 1px solid var(--w7-line);
    box-shadow: var(--w7-shadow);
}

.checkout-step {
    padding: 1.25rem 1.25rem 0;
}

/* O passo reusa o chip .icon-text do tema; aqui so desligamos as linhas
   decorativas do h3 global e alinhamos a esquerda. */
.checkout-step-title {
    margin-bottom: 1rem;
}

.checkout-step-title:before,
.checkout-step-title:after {
    display: none;
}

.checkout-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    background: var(--w7-gold);
    color: #fff;
    font-size: .8rem;
    font-weight: 700;
    line-height: 1;
    flex-shrink: 0;
}

.checkout-step-optional {
    font-size: .72rem;
    font-weight: 400;
    color: var(--w7-muted);
    margin-left: .35rem;
}

/* -- Valores -------------------------------------------------------------- */
.checkout-amounts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: .6rem;
    margin-bottom: 1rem;
}

.checkout-amount {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    padding: .9rem .5rem;
    border: 2px solid var(--w7-line);
    background: var(--w7-surface);
    color: var(--w7-text);
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

.checkout-amount-icon {
    font-size: 1.6rem;
    width: 1.6rem;
    height: 1.6rem;
    color: var(--w7-gold);
}

.checkout-amount-value {
    font-weight: 700;
    font-size: .95rem;
}

.checkout-amount:hover {
    border-color: var(--w7-gold);
}

.checkout-amount.is-active {
    border-color: var(--w7-gold);
    background: var(--w7-gold-soft);
    color: #fff;
}

.checkout-amount-custom .form-label {
    color: var(--w7-muted);
}

/* -- "Voce recebe" -------------------------------------------------------- */
.checkout-receive {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: 1rem;
    padding: .75rem 1rem;
    background: var(--w7-success-bg);
    border: 1px solid rgba(25, 135, 84, .35);
    color: var(--w7-success);
    font-size: .95rem;
}

.checkout-receive strong {
    font-size: 1.1rem;
}

.checkout-receive-wallet {
    font-weight: 600;
}

.checkout-receive .material-symbols-outlined {
    font-size: 1.25rem;
}

/* -- Gateways ------------------------------------------------------------- */
.checkout-gateways {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: .6rem;
}

.checkout-gateway {
    cursor: pointer;
    margin: 0;
}

.checkout-gateway input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.checkout-gateway-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: .4rem;
    padding: .9rem .6rem;
    height: 100%;
    border: 2px solid var(--w7-line);
    background: var(--w7-surface);
    transition: border-color .15s ease, background .15s ease;
}

.checkout-gateway input:checked + .checkout-gateway-card {
    border-color: var(--w7-gold);
    background: var(--w7-gold-soft);
}

.checkout-gateway-logo {
    max-height: 28px;
    max-width: 100%;
    width: auto;
}

.checkout-gateway-name {
    font-weight: 600;
    font-size: .82rem;
    color: var(--w7-text);
}

.checkout-gateway-fee {
    font-size: .68rem;
    font-weight: 600;
    padding: .12rem .4rem;
    background: var(--w7-warning-bg);
    color: var(--w7-warning);
    white-space: nowrap;
}

.checkout-gateway-fee.is-free {
    background: var(--w7-success-bg);
    color: var(--w7-success);
}

.checkout-gateway-check {
    position: absolute;
    top: .4rem;
    right: .4rem;
    font-size: 1.1rem;
    width: 1.1rem;
    height: 1.1rem;
    color: var(--w7-gold);
    opacity: 0;
}

.checkout-gateway input:checked + .checkout-gateway-card .checkout-gateway-check {
    opacity: 1;
}

/* -- Campos condicionais -------------------------------------------------- */
.checkout-fields {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.checkout-fields .checkout-field[hidden] {
    display: none;
}

/* -- Resumo / total ------------------------------------------------------- */
.checkout-summary {
    padding: 1.25rem;
}

.checkout-total {
    margin-bottom: 1rem;
}

.checkout-total[hidden] {
    display: none;
}

.checkout-total-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 1rem;
    color: var(--w7-text);
}

.checkout-total-row strong {
    font-size: 1.3rem;
}

.checkout-total-discount {
    margin-bottom: .35rem;
    font-size: .9rem;
    color: var(--w7-success);
}

.checkout-total-discount strong {
    font-size: .95rem;
}

.checkout-total-discount[hidden] {
    display: none;
}

.checkout-total-fee {
    display: block;
    margin-top: .25rem;
    font-size: .8rem;
    color: var(--w7-muted);
}

.checkout-total-fee[hidden] {
    display: none;
}

.checkout-coupon-feedback {
    display: block;
    margin-top: .5rem;
    font-size: .85rem;
    font-weight: 600;
    color: var(--w7-danger);
}

.checkout-coupon-feedback[hidden] {
    display: none;
}

.checkout-continue {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
}

.checkout-continue-icon {
    font-size: 1.25rem;
    width: 1.25rem;
    height: 1.25rem;
    line-height: 1;
}

/* -- Transferencia bancaria ---------------------------------------------- */
.checkout-bank {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-top: 1rem;
    padding: .85rem 1.25rem;
    background: var(--w7-sunken);
    border: 1px solid var(--w7-line);
    text-decoration: none;
    color: var(--w7-text);
    font-weight: 600;
}

.checkout-bank:hover {
    border-color: var(--w7-gold);
    color: var(--w7-gold-dim);
}

.checkout-bank-icon {
    font-size: 1.4rem;
}

.checkout-bank > .material-symbols-outlined:last-child {
    margin-left: auto;
}

/* -- Historico ------------------------------------------------------------ */
.checkout-history-title {
    margin: 0 0 1rem;
}

.checkout-history-title:before,
.checkout-history-title:after {
    display: none;
}

.checkout-history-grid {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.checkout-history-item {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .85rem 1rem;
    background: var(--w7-card);
    border: 1px solid var(--w7-line);
    box-shadow: var(--w7-shadow);
}

.checkout-history-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    background: var(--w7-sunken);
}

.checkout-history-logo img {
    max-height: 22px;
    max-width: 32px;
    width: auto;
}

.checkout-history-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.checkout-history-body strong {
    color: var(--w7-text);
}

.checkout-history-date {
    font-size: .75rem;
    color: var(--w7-muted);
}

.checkout-history-status {
    flex-shrink: 0;
    align-self: flex-start;
    margin-left: auto;
}

.checkout-history-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: 2.5rem 1rem;
    background: var(--w7-card);
    border: 1px dashed var(--w7-line-soft);
    color: var(--w7-muted);
}

.checkout-history-empty .material-symbols-outlined {
    font-size: 2.5rem;
}

/* -- Rail de gateways (checkout-sidebar) --------------------------------- */
.checkout-sidebar-item {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.checkout-sidebar-logo {
    max-height: 20px;
    max-width: 42px;
    width: auto;
    flex-shrink: 0;
}

.checkout-sidebar-name {
    flex: 1;
    min-width: 0;
}

.checkout-sidebar-chevron {
    font-size: 1.1rem;
    margin-left: auto;
    opacity: .5;
}

.donate-pix-qr {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 1.75rem 1rem;
}

.donate-pix-qr img {
    width: 210px;
    height: 210px;
    display: block;
    background: #fff;
    padding: 6px;
}

.donate-pix-info {
    display: flex;
    justify-content: center;
    gap: 2rem;
}

.donate-pix-info-item {
    text-align: center;
}

.donate-pix-info-item-label {
    display: block;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--w7-muted);
    margin-bottom: .2rem;
}

.donate-pix-info-item-value {
    font-weight: 700;
    font-size: 1rem;
    color: var(--w7-text);
}

.donate-pix-steps {
    border-top: 1px solid var(--w7-line);
}

.donate-pix-step {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .65rem 1rem;
    border-bottom: 1px solid var(--w7-line);
}

.donate-pix-step:last-child {
    border-bottom: none;
}

.donate-pix-step-icon {
    font-size: 1.25rem;
    width: 1.25rem;
    height: 1.25rem;
    color: var(--w7-gold);
    flex-shrink: 0;
    margin-top: .1rem;
}

.donate-pix-step-text {
    font-size: .85rem;
    color: var(--w7-text);
    line-height: 1.5;
}

.donate-pix-copy {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem 1rem;
    background: var(--w7-sunken);
    border-top: 1px solid var(--w7-line);
}

.donate-pix-copy-code {
    flex: 1;
    font-size: .75rem;
    color: var(--w7-muted);
    word-break: break-all;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-family: monospace;
}

.donate-pix-after {
    padding: .65rem 1rem;
    font-size: .8rem;
    color: var(--w7-muted);
    text-align: center;
    border-top: 1px solid var(--w7-line);
}

.donate-pix-success,
.donate-pix-error {
    text-align: center;
    padding: 2.5rem 1.5rem;
}

.donate-pix-success-icon,
.donate-pix-error-icon {
    font-size: 3.5rem;
    width: 3.5rem;
    height: 3.5rem;
    display: block;
    margin: 0 auto 1rem;
}

.donate-pix-success-icon { color: var(--w7-success); }

.donate-pix-error-icon   { color: var(--w7-danger); }

.donate-pix-success-title,
.donate-pix-error-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--w7-text);
    margin-bottom: .5rem;
}

.donate-pix-error-title {
    margin-bottom: 1.25rem;
}

.donate-pix-success-text {
    font-size: .9rem;
    color: var(--w7-muted);
    margin-bottom: 1.5rem;
}

/* -- card-stats ----------------------------------------------------------- */
.card-stats {
    display: flex;
    gap: .35rem;
    margin-top: .45rem;
}

.card-stat {
    flex: 1;
    background: var(--w7-sunken);
    border: 1px solid var(--w7-line);
    padding: .4rem .55rem;
}

.card-stat-label {
    display: block;
    font-size: .6rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--w7-muted);
    margin-bottom: .2rem;
}

.card-stat-value {
    font-size: .88rem;
    font-weight: 700;
    color: var(--w7-text);
}

.card-stat-value span,
.card-stat-value small {
    font-size: .68rem;
    font-weight: 400;
    color: var(--w7-muted);
}

.card-stat-value--price {
    color: var(--w7-gold);
}

.card-stat--lg .card-stat-value {
    font-size: 1.2rem;
}

.card-stat--lg .card-stat-value span,
.card-stat--lg .card-stat-value small {
    font-size: .8rem;
}

.card-stat-cta {
    display: block;
    margin-top: .3rem;
    font-size: .65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--w7-gold);
    text-decoration: none;
}

.card-stat-cta:hover {
    text-decoration: underline;
    color: var(--w7-gold-dim);
}

/* -- gateway-card --------------------------------------------------------- */
.gateway-card {
    display: flex;
    flex-direction: column;
    border: 2px solid var(--w7-line);
    overflow: hidden;
    text-decoration: none;
    transition: border-color .15s ease;
    height: 100%;
}

.gateway-card:hover {
    border-color: var(--w7-gold);
}

.gateway-card-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.5rem;
    background: var(--w7-sunken);
    flex: 1;
}

.gateway-card-logo img {
    max-height: 48px;
    max-width: 100%;
}

.gateway-card-label {
    padding: .6rem;
    text-align: center;
    font-size: .8rem;
    font-weight: 600;
    color: var(--w7-text);
    background: var(--w7-card);
    border-top: 1px solid var(--w7-line);
}

/* -- plan-card (VIP / Subscribe) ------------------------------------------ */
.plan-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: .75rem;
}

.plan-card {
    border: 2px solid var(--w7-line);
    overflow: hidden;
    background: var(--w7-card);
}

.plan-card-header {
    background: var(--w7-sunken);
    padding: 1.1rem .75rem .9rem;
    border-bottom: 1px solid var(--w7-line);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.plan-card-icon {
    font-size: 1.6rem;
    width: 1.6rem;
    height: 1.6rem;
    color: var(--w7-muted);
    opacity: .6;
    margin-bottom: .3rem;
    flex-shrink: 0;
}

.plan-card-name {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--w7-text);
    line-height: 1.2;
}

.plan-card-category {
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--w7-muted);
    background: var(--w7-sunken);
    padding: .4rem .7rem;
    border-top: 1px solid var(--w7-line);
}

.plan-card-featured .plan-card-category {
    background: var(--w7-gold-soft);
    color: var(--w7-text);
    border-top-color: var(--w7-gold);
}

.plan-card-features {
    list-style: none;
    margin: 0;
    padding: 0;
}

.plan-card-feature {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem .7rem;
    font-size: .78rem;
    border-top: 1px solid var(--w7-line);
    line-height: 1.3;
    color: var(--w7-text);
}

.plan-card-feature-icon {
    font-size: .9rem;
    width: .9rem;
    height: .9rem;
    flex-shrink: 0;
}

.plan-card-feature--on .plan-card-feature-icon {
    color: var(--w7-success);
}

.plan-card-feature--off {
    color: var(--w7-muted);
}

.plan-card-feature--off .plan-card-feature-icon {
    color: var(--w7-line-soft);
}

.plan-card-featured {
    border-color: var(--w7-gold);
}

.plan-card-featured .plan-card-header {
    background: var(--w7-gold);
    border-bottom-color: var(--w7-gold);
}

.plan-card-featured .plan-card-icon,
.plan-card-featured .plan-card-name {
    color: #fff;
    opacity: 1;
}

/* -- nav-sidebar-item (rail compartilhado) -------------------------------- */
.nav-sidebar-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .6rem .85rem;
    background: var(--w7-surface);
    border: 1px solid var(--w7-line);
    border-bottom: none;
    color: var(--w7-text);
    text-decoration: none;
}

.nav-sidebar-item:last-child {
    border-bottom: 1px solid var(--w7-line);
}

.nav-sidebar-item:hover {
    background: var(--w7-gold-dim);
    color: #fff;
}

.nav-sidebar-item--active {
    background: var(--w7-gold);
    color: #fff;
}

.nav-sidebar-logo {
    max-height: 20px;
    max-width: 42px;
    width: auto;
    flex-shrink: 0;
}

.nav-sidebar-name {
    flex: 1;
    min-width: 0;
}

.nav-sidebar-chevron {
    font-size: 1.1rem;
    margin-left: auto;
    opacity: .5;
}

/* -- page-tabs ------------------------------------------------------------ */
.nav.page-tabs {
    gap: .25rem;
    border-bottom: 1px solid var(--w7-line);
}

.auction-bid-info .card-stat {
    flex: 1;
}

/* ==========================================================================
   18. VIP — sobre, dados bancarios e moedas
   ========================================================================== */

.vip-about {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem 2.5rem;
    margin-top: 2.75rem;
    padding-top: 2.25rem;
    border-top: 1px solid var(--w7-line);
}

.vip-about-item {
    text-align: center;
    padding: 0 .5rem;
}

.vip-about-icon {
    font-size: 1.85rem;
    width: 1.85rem;
    height: 1.85rem;
    display: block;
    margin: 0 auto .6rem;
    color: var(--w7-gold);
    opacity: .8;
}

.vip-about-title {
    font-family: "Poppins", sans-serif;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    margin-bottom: .65rem;
    color: var(--w7-text);
}

.vip-about-text {
    font-size: .85rem;
    color: var(--w7-muted);
    margin: 0;
    line-height: 1.65;
}

.vip-about-text a {
    color: var(--w7-gold);
    text-decoration: none;
}

.vip-about-text a:hover {
    text-decoration: underline;
    color: var(--w7-gold-dim);
}

/* -- Dados bancarios ------------------------------------------------------ */
.vip-bank-header {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .5rem .85rem;
    background: var(--w7-sunken);
    border-bottom: 1px solid var(--w7-line);
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--w7-text);
}

.vip-bank-icon {
    font-size: .95rem;
    width: .95rem;
    height: .95rem;
    color: var(--w7-gold);
    flex-shrink: 0;
}

.vip-bank-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: .5rem;
    padding: .4rem .85rem;
    font-size: .82rem;
    border-bottom: 1px solid var(--w7-line);
}

.vip-bank-row:last-child {
    border-bottom: none;
}

.vip-bank-label {
    color: var(--w7-muted);
    flex-shrink: 0;
}

.vip-bank-value {
    font-weight: 500;
    text-align: right;
    color: var(--w7-text);
}

.vip-bank-notes {
    font-size: .8rem;
    color: var(--w7-muted);
}

/* -- Preco ---------------------------------------------------------------- */
/*
   O bloco do preco passou a usar card-stat / card-stat-label /
   card-stat-value--price (mesmo padrao do tema default), que ja tem regra na
   secao 3. As regras de .product-price / .product-price-value que existiam aqui
   foram removidas junto — sem aquele markup, virariam CSS orfao.

   Sobra a moeda: o seletor perdeu o ancestral .product-price, entao passa a ser
   escopado so por .market.items. Continua necessario para neutralizar o
   ".market.items .product-price span { color: #dc3545 }" herdado do app.css.
*/

/* O preco fica sozinho no card: ocupa a largura toda em vez de meia. */
.market.items .card-stats {
    margin-bottom: 0;
}

/* -- Preco ---------------------------------------------------------------- */
/*
   O preco passou a usar card-stat / card-stat-label / card-stat-value--price
   (secao 26), o mesmo bloco rotulado do tema default: antes o card mostrava o
   numero solto, sem dizer que aquilo era o preco. As regras de
   .webshop-product-price* que existiam aqui foram removidas junto — sem aquele
   markup, virariam CSS orfao.
*/
.webshop-products .card-stats {
    margin-bottom: 0;
}

/* ==========================================================================
   26. Rotulo de preco nos cards
   --------------------------------------------------------------------------
   O tema default rotula todo preco de card ("PRECO" acima do numero, dentro de
   uma caixinha). Varios cards do warriors mostravam so o numero solto: no
   WebShop, o "400" do Bronze Helm podia ser preco, estoque ou nivel.

   Todos passaram a chamar views/partials/price-stat.phtml, que emite o mesmo
   card-stat / card-stat-label / card-stat-value--price ja definido na secao 3.
   Aqui ficam so os acertos de espacamento por contexto e uma excecao.
   ========================================================================== */

/* EXCECAO: `.card-stat-value span` encolhe e apaga o texto (e o que deixa o
   nome da moeda discreto). No detalhe do produto o valor em si e um <span>
   (#item-price, exigido pelo shop-product.js), entao ele precisa ficar de fora
   da regra ou o preco sairia menor que a moeda ao lado. */
.card-stat-value #item-price {
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}

/* O preco ocupa o card inteiro nestes contextos — nao divide a linha com outro
   card-stat, entao nao precisa da folga lateral do flex. */
.profile-block-packages .card-stats,
.market.accounts .card-stats,
.packages .package .card-stats,
.loot-boxes .card-stats {
    margin-bottom: 0;
}

/* Na Raffle e na LootBox o preco abre o rodape do card; o margin-top padrao do
   card-stats somaria ao padding do .card-footer. */
.card-footer > .card-stats:first-child {
    margin-top: 0;
    margin-bottom: 0;
}

/* Os `.price` do app.css tinham margin-top: 1rem para descolar da imagem; o
   card-stats nasce com .45rem, que aperta demais nestes tres cards. */
.profile-block-packages .card-stats,
.market.accounts .card-stats,
.packages .package .card-stats {
    margin-top: 1rem;
}

/* Quando ha barra de "vendidos" logo abaixo, o preco precisa respirar —
   equivale ao `.packages .package.has-max-sold .price` do app.css. */
.packages .package.has-max-sold .card-stats {
    margin-bottom: 1rem;
}

/* ==========================================================================
   27. Pagina de informacoes do servidor
   --------------------------------------------------------------------------
   A view estava na estrutura da V6 (cinco tabelas). Passou para os componentes
   da V7 — server-rates, server-stat, server-specs, server-event-pill,
   server-commands — e NENHUM deles tinha regra no warriors: sem este bloco a
   pagina sairia como texto solto empilhado.

   As medidas vieram de resources/sass/server-info.scss do tema default; so a
   paleta muda (e o border-radius, que no warriors e zero).
   ========================================================================== */

/* Titulo de secao: `.title` nao tem regra em nenhum dos dois temas — e so um
   h3. Aqui ganha o tratamento dos demais cabecalhos do warriors, mas ESCOPADO
   em .server-info: a classe tambem aparece em h1 e h2 de outras paginas
   (Vote Reward, Castle Siege, Raffle...), e um tamanho fixo os encolheria. */
.server-info .title {
    font-family: "Poppins", sans-serif;
    font-size: .95rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--w7-text);
    padding-bottom: .5rem;
    margin-bottom: .9rem;
    border-bottom: 1px solid var(--w7-line);
}

/* -- Faixa de rates ------------------------------------------------------- */
.server-rates {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: var(--w7-gold);
    border: 1px solid var(--w7-line-soft);
    overflow: hidden;
    margin-bottom: 2rem;
}

.server-rate {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.25rem 1rem;
    text-align: center;
    border-right: 1px solid rgba(255, 255, 255, .15);
}

.server-rate:last-child {
    border-right: none;
}

.server-rate-icon {
    font-size: 1.5rem;
    width: 1.5rem;
    height: 1.5rem;
    color: rgba(255, 255, 255, .6);
    margin-bottom: .3rem;
}

.server-rate-value {
    font-family: "Poppins", sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.1;
}

.server-rate-label {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: rgba(255, 255, 255, .65);
    margin-top: .2rem;
}

/* -- Grade de estatisticas ------------------------------------------------ */
.server-stat {
    border: 1px solid var(--w7-line);
    background: var(--w7-card);
    padding: 1rem .75rem;
    text-align: center;
    height: 100%;
}

.server-stat-icon {
    font-size: 1.6rem;
    width: 1.6rem;
    height: 1.6rem;
    color: var(--w7-gold);
    opacity: .55;
    display: block;
    margin: 0 auto .3rem;
}

.server-stat-value {
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--w7-text);
}

.server-stat-value a {
    color: inherit;
    text-decoration: none;
}

.server-stat-value a:hover {
    color: var(--w7-gold-dim);
}

/* Nome de guild e data de confronto nao cabem no corpo de 1.35rem. */
.server-stat-value-sm {
    font-size: .9rem;
}

.server-stat-label {
    font-size: .65rem;
    color: var(--w7-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-top: .2rem;
    line-height: 1.3;
}

/* -- Especificacoes (dl) -------------------------------------------------- */
.server-specs {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
}

.server-spec {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: .6rem 0;
    border-bottom: 1px solid var(--w7-line);
    font-size: .875rem;
}

.server-spec:last-child {
    border-bottom: none;
}

.server-spec dt {
    font-weight: 400;
    color: var(--w7-muted);
    flex-shrink: 0;
}

.server-spec dd {
    margin: 0;
    font-weight: 500;
    text-align: right;
    color: var(--w7-text);
}

/* -- Pilulas de evento ---------------------------------------------------- */
.server-event-pills {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.server-event-pill {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .35rem .8rem;
    font-size: .8rem;
    font-weight: 500;
    border: 1px solid transparent;
}

.server-event-pill-icon {
    font-size: .95rem;
    width: .95rem;
    height: .95rem;
}

.server-event-pill-on {
    background: var(--w7-success-bg);
    border-color: rgba(99, 209, 158, .35);
    color: var(--w7-success);
}

.server-event-pill-off {
    background: var(--w7-sunken);
    border-color: var(--w7-line);
    color: var(--w7-muted);
}

/* -- Lista de comandos ---------------------------------------------------- */
.server-commands {
    border: 1px solid var(--w7-line);
    overflow: hidden;
}

.server-command {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .55rem .9rem;
    border-bottom: 1px solid var(--w7-line);
    font-size: .8rem;
}

.server-command:last-child {
    border-bottom: none;
}

/* O `kbd` do app.css inverte as cores do corpo (texto escuro sobre claro), o
   que salta demais em uma lista de onze linhas. Aqui vira uma tecla discreta. */
.server-command kbd {
    min-width: 85px;
    text-align: center;
    font-size: .72rem;
    flex-shrink: 0;
    color: var(--w7-gold);
    background: var(--w7-sunken);
    border: 1px solid var(--w7-line-soft);
}

.server-command-desc {
    color: var(--w7-muted);
    line-height: 1.4;
}


/* -- Arredondamento do warriors (dk-purple e canto reto) ------------------- */
.checkout-card,
.checkout-amount,
.checkout-gateway-card,
.checkout-pending,
.checkout-pending-item,
.checkout-bank,
.checkout-total,
.gateway-card,
.nav-sidebar-item,
.plan-card,
.server-rate,
.server-stat,
.server-command,
.card-stat {
    border-radius: var(--w7-radius);
}

.server-event-pill,
.checkout-step-num,
.checkout-gateway-fee {
    border-radius: var(--w7-radius-pill);
}

/* Coluna do historico de doacoes — o dk-purple estilizou so os filhos
   (-title, -grid, -item); o container em si ficou sem regra. */
.checkout-history {
    padding: 1.25rem;
    background: var(--w7-card);
    border: 1px solid var(--w7-line);
    border-radius: var(--w7-radius);
}

/* -- Lacunas apontadas pela varredura final ------------------------------- */
/* Emitidas pelas views mas sem regra em nenhum dos CSS do tema. */

.lootbox__price {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: .15rem;
}

.lootbox__title {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--w7-font-bold);
}

/* Base comum aos quatro estados do numero da rifa. O style.min.css so estiliza
   `.raffle .numbers .number` (e .allowed / .my); a classe raffle-number, que o
   JS usa para decidir se o numero e clicavel, nao tinha nada. */
.raffle-number {
    display: flex;
    align-items: center;
    justify-content: center;
    font-variant-numeric: tabular-nums;
    transition: filter .15s ease, background .15s ease;
}

.raffle-number--available {
    cursor: pointer;
}

.raffle-price {
    font-family: var(--w7-font-bold);
    font-variant-numeric: tabular-nums;
    color: var(--w7-gold);
}

.raffle-summary-item {
    min-width: 96px;
}

/* -- Rodape do card do market: correcao de transbordo -------------------- */
/*
 * O .product-card tem overflow:hidden e o rodape era
 * `justify-content: space-between` com o chip de expiracao em
 * `white-space: nowrap` (nao encolhe abaixo do texto) e o botao em
 * `flex-shrink: 0`. Em card de 4 colunas, "5 segundos" + "Comprar" passa da
 * largura e o botao era CORTADO pelo overflow do card.
 *
 * Agora o rodape quebra linha: o chip encolhe com reticencias enquanto couber,
 * e quando nao couber o botao desce sozinho ocupando a largura toda.
 */
.market.items .product-footer {
    flex-wrap: wrap;
    row-gap: .4rem;
}

.market.items .product-expire {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.market.items .product-buy {
    flex: 0 1 auto;
    max-width: 100%;
    white-space: nowrap;
}

/* Sozinho na linha (o chip quebrou acima): ocupa tudo, como no card do WebShop. */
.market.items .product-expire + .product-buy:only-of-type {
    flex-grow: 1;
    text-align: center;
}

@media (max-width: 575.98px) {
    .market.items .product-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .market.items .product-buy {
        width: 100%;
        text-align: center;
    }
}

/* ==========================================================================
   Profile — paper-doll de equipamentos
   --------------------------------------------------------------------------
   O renderizador do plugin emite:

       .equipments > .mapping > .item-mapping.item0 ... .item11

   com os slots em position:absolute sobre uma caixa de 400x388. O CSS **NAO
   vem do plugin** — no default ele esta em resources/sass/profile.scss:2-28,
   ou seja, e responsabilidade do TEMA.

   O warriors nao tinha nenhuma dessas regras: os 12 slots caiam em fluxo
   normal e o equipamento virava uma pilha vertical de sprites soltos (era o
   "profile todo bugado").

   > Vale para o dk-purple tambem: ele anotou que "a paper-doll vem do renderer
   > do proprio plugin, com o CSS junto" — nao vem.

   Coordenadas identicas as do default; so a moldura usa a paleta do tema.
   ========================================================================== */

.equipments .mapping {
    position: relative;
    width: 400px;
    height: 388px;
    max-width: 100%;
    margin: 0 auto;
}

.equipments .mapping .item-mapping {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
}

.equipments .mapping .item-mapping img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .7));
}

.equipments .mapping .item0  { bottom: 17px;  left: 7px;     width: 70px;  height: 130px; }
.equipments .mapping .item1  { bottom: 17px;  right: 2px;    width: 70px;  height: 130px; }
.equipments .mapping .item2  { top: 58px;     left: 76px;    width: 56px;  height: 65px; }
.equipments .mapping .item3  { top: 133px;    left: 39px;    width: 82px;  height: 98px; }
.equipments .mapping .item4  { bottom: 17px;  left: 88px;    width: 60px;  height: 74px; }
.equipments .mapping .item5  { bottom: 155px; right: 44px;   width: 83px;  height: 54px; }
.equipments .mapping .item6  { bottom: 17px;  right: 84px;   width: 57px;  height: 74px; }
.equipments .mapping .item7  { top: 59px;     right: 0;      width: 127px; height: 112px; }
.equipments .mapping .item8  { display: none; }
.equipments .mapping .item9  { top: 81px;     right: 137px;  width: 30px;  height: 30px; }
.equipments .mapping .item10 { bottom: 106px; left: 102px;   width: 30px;  height: 30px; }
.equipments .mapping .item11 { bottom: 106px; right: 99px;   width: 30px;  height: 30px; }

/* A caixa e de 400px fixos: abaixo disso ela vazaria. O scale mantem as
   coordenadas absolutas validas sem reescrever os 12 slots. */
@media (max-width: 440px) {
    .equipments .mapping {
        transform: scale(.78);
        transform-origin: top center;
        margin-bottom: -85px;
    }
}

/* -- Achievements --------------------------------------------------------- */
.achievement-icon-image {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.achievement-rarity {
    font-size: .7rem;
    color: var(--w7-muted);
}

.achievement-reward-icon {
    font-size: 1.1rem;
    color: var(--w7-gold);
}

.achievement-reward-image {
    max-height: 28px;
    width: auto;
}

/* Vitrine de conquistas do perfil (notify('profile.character')).
   Antes so tinha fundo e borda: sem o grid nem o empilhamento, os tiles saiam
   em bloco, com o icone e a data desalinhados do default. As medidas abaixo
   sao as mesmas do tema default (achievements.scss), so a paleta muda.
   .profile-achievements-item nao existe — o markup emite so as classes abaixo. */
.profile-achievements-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: .5rem;
}

.profile-achievement {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .25rem;
    padding: .6rem .4rem;
    background: var(--w7-sunken);
    border: 1px solid var(--w7-line);
}

.profile-achievement-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
}

/* Tamanho fixo + object-fit: sem isso um icone fora de proporcao estica o tile
   e quebra o alinhamento da grade inteira. */
.profile-achievement-icon img {
    width: 2.75rem;
    height: 2.75rem;
    object-fit: contain;
}

.profile-achievement-symbol {
    font-size: 2rem;
    width: 2rem;
    height: 2rem;
    color: var(--w7-warning);
}

.profile-achievement-name {
    font-size: .68rem;
    font-weight: 600;
    color: var(--w7-text);
    line-height: 1.2;
}

.profile-achievement-date {
    font-size: .6rem;
    color: var(--w7-muted);
}

/* -- Achievements --------------------------------------------------------- */
.achievement-header {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.achievement-title {
    flex: 1;
    min-width: 0;
}

.achievement-stats {
    display: flex;
    gap: 1rem;
    margin-top: .5rem;
    font-size: .72rem;
    color: var(--w7-muted);
}

.achievement-rarity,
.achievement-unlocked {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
}

.achievement-stats .material-symbols-outlined {
    font-size: .95rem;
    color: var(--w7-gold);
}

.achievement-reward {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.achievement--rescued {
    border-color: rgba(25, 135, 84, .5);
}

.achievement--available {
    border-color: var(--w7-gold);
}

/* ==========================================================================
   15. Painel da conta — cover, identidade e conexão
   ========================================================================== */

.profile-cover {
    height: 110px;
    background: linear-gradient(135deg, var(--w7-gold) 0%, var(--w7-card) 100%);
    position: relative;
    overflow: hidden;
}

.profile-cover::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at top right, rgba(255, 255, 255, .15) 0%, transparent 65%);
}

.profile-cover--guild {
    background: linear-gradient(135deg, #8a3b45 0%, #3a1c22 100%);
}

/* ==========================================================================
   23. Profile — capa, identidade, tiles, barras e guild
   --------------------------------------------------------------------------
   Porte do profile.scss do tema default para a paleta roxa. A view do
   warriors era uma tabela do V6; estas classes substituem aquilo pelo mesmo
   vocabulario de componentes do default.

   A paper-doll (.equipments / .mapping / .itemN) NAO entra aqui: aquele markup
   vem do renderer do proprio plugin, com o CSS junto.
   ========================================================================== */

.profile-layout {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.profile-layout-main {
    flex: 1;
    min-width: 0;
}

.profile-layout-aside {
    flex-shrink: 0;
}

/* -- Capa ----------------------------------------------------------------- */
.profile-cover {
    position: relative;
    height: 110px;
    overflow: hidden;
    background: linear-gradient(135deg, var(--w7-gold) 0%, var(--w7-card) 100%);
}

.profile-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at top right, rgba(169, 131, 221, .28) 0%, transparent 65%);
}

.profile-cover--guild,
.profile-guild-cover {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--w7-surface) 0%, var(--w7-card) 100%);
}

.profile-guild-cover {
    height: 60px;
}

.profile-guild-cover::after,
.profile-cover--guild::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at top right, rgba(169, 131, 221, .3) 0%, transparent 60%);
}

/* -- Identidade ----------------------------------------------------------- */
.profile-identity,
.profile-guild-identity {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 0 1.5rem 1.5rem;
}

/* Sobe sobre a capa. Caixa de tamanho FIXO: character_avatar_or_class()
   devolve imagens de tamanhos diferentes conforme haja avatar proprio. */
.profile-identity-avatar {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 84px;
    margin-top: -28px;
    background: var(--w7-sunken);
    border: 3px solid var(--w7-card);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .45);
}

.profile-identity-avatar img,
.profile-identity-avatar svg {
    display: block;
    max-width: 88%;
    max-height: 88%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.profile-guild-identity-logo {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    margin-top: -22px;
    padding: 3px;
    line-height: 0;
    background: var(--w7-card);
    border: 3px solid var(--w7-card);
    box-shadow: 0 3px 10px rgba(0, 0, 0, .45);
}

.profile-guild-identity-logo svg,
.profile-guild-identity-logo img {
    display: block;
}

.profile-identity-body,
.profile-guild-identity-body {
    flex: 1;
    min-width: 0;
    padding-top: .9rem;
}

.profile-identity-name {
    display: flex;
    align-items: center;
    gap: .45rem;
    flex-wrap: wrap;
    margin-bottom: .15rem;
    font-family: "Poppins", sans-serif;
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--w7-text);
}

.profile-guild-identity-name {
    margin-bottom: .15rem;
    font-family: "Poppins", sans-serif;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--w7-text);
}

.profile-guild-identity-name a {
    color: inherit;
    text-decoration: none;
}

.profile-guild-identity-name a:hover {
    color: var(--w7-gold-dim);
}

.profile-identity-sub,
.profile-guild-identity-sub {
    margin-bottom: .75rem;
    font-size: .82rem;
    color: var(--w7-muted);
}

.profile-identity-sub a,
.profile-guild-identity-sub a {
    color: var(--w7-gold);
    text-decoration: none;
}

.profile-identity-sub a:hover,
.profile-guild-identity-sub a:hover {
    color: var(--w7-gold-dim);
}

/* -- Titulo de secao (fora de card) --------------------------------------- */
.profile-section-title {
    margin-bottom: .4rem;
    padding: 0 .1rem;
    font-family: "Poppins", sans-serif;
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--w7-muted);
}

/* -- Grade de tiles ------------------------------------------------------- */
.profile-tile {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
    gap: .45rem;
}

.profile-tile--2 {
    grid-template-columns: repeat(2, 1fr);
}

.profile-tile-item {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    padding: .55rem .65rem;
    background: var(--w7-sunken);
    border: 1px solid var(--w7-line);
}

.profile-tile-item--full {
    grid-column: 1 / -1;
}

.profile-tile-abbr {
    font-family: "Poppins", sans-serif;
    font-size: .58rem;
    font-weight: 800;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--w7-gold);
}

.profile-tile-value {
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--w7-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-tile-value small {
    font-size: .7rem;
    font-weight: 600;
    color: var(--w7-muted);
}

/* -- Barras de HP / MP ---------------------------------------------------- */
.profile-bars {
    background: var(--w7-card);
    border: 1px solid var(--w7-line);
}

.profile-bar {
    padding: .6rem 1rem;
    border-bottom: 1px solid var(--w7-line);
}

.profile-bar:last-child {
    border-bottom: none;
}

.profile-bar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .3rem;
}

.profile-bar-label {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--w7-muted);
}

.profile-bar-values {
    font-size: .68rem;
    font-variant-numeric: tabular-nums;
    color: var(--w7-muted);
}

.profile-bars .progress {
    height: 9px;
    /*
     * padding:0 e obrigatorio aqui. O style.min.css do tema declara
     * `.progress { padding: 3px }` e o box-sizing e border-box: com altura de
     * 7px, 3px de padding em cima e embaixo mais 1px de borda nao deixavam
     * altura util nenhuma para o .progress-bar filho — a barra existia, com a
     * largura certa, e era invisivel. Era o "progressbar nao aparece".
     */
    padding: 0;
    background: var(--w7-sunken);
    border: 1px solid var(--w7-line);
    overflow: hidden;
}

/* O .progress-bar do Bootstrap nao tem altura propria: ele preenche a caixa de
   conteudo do pai. Explicitar 100% o torna imune a qualquer padding que o tema
   venha a declarar em .progress. */
.profile-bars .progress-bar {
    height: 100%;
    min-height: 3px;
}

.profile-bar-hp {
    background: linear-gradient(90deg, #b7415a 0%, #ff6b81 100%);
}

.profile-bar-mp {
    background: linear-gradient(90deg, #4a5fb0 0%, #7d92e8 100%);
}

/* -- Lista de membros ----------------------------------------------------- */
.profile-member {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .65rem 1rem;
    border-bottom: 1px solid var(--w7-line);
    transition: background .1s ease;
}

.profile-member:last-child {
    border-bottom: none;
}

.profile-member:hover {
    background: rgba(115, 91, 146, .16);
}

.profile-member-initial,
.profile-member-avatar {
    position: relative;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: var(--w7-sunken);
    border: 1px solid var(--w7-line);
}

.profile-member-initial {
    font-size: .82rem;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--w7-gold);
}

.profile-member-avatar img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Ponto de online no canto da miniatura. */
.profile-member-initial.is-online::after,
.profile-member-avatar.is-online::after {
    content: "";
    position: absolute;
    right: -3px;
    bottom: -3px;
    width: 10px;
    height: 10px;
    background: #5cd6a0;
    border: 2px solid var(--w7-card);
    border-radius: 50%;
}

.profile-member-body {
    flex: 1;
    min-width: 0;
}

.profile-member-name {
    font-size: .88rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--w7-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-member-name a {
    color: inherit;
    text-decoration: none;
}

.profile-member-name a:hover {
    color: var(--w7-gold-dim);
}

.profile-member-class {
    font-size: .75rem;
    line-height: 1.3;
    color: var(--w7-muted);
}

.profile-member-stats {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-shrink: 0;
}

.profile-member-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 44px;
    padding: .2rem .5rem;
    text-align: center;
    background: var(--w7-sunken);
    border: 1px solid var(--w7-line);
}

.profile-member-chip-label {
    font-size: .55rem;
    font-weight: 700;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--w7-muted);
}

.profile-member-chip-value {
    font-size: .8rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--w7-text);
}

/* O preco ocupa o card inteiro nestes contextos — nao divide a linha com outro
   card-stat, entao nao precisa da folga lateral do flex. */
.profile-block-packages .card-stats,
.market.accounts .card-stats,
.packages .package .card-stats,
.loot-boxes .card-stats {
    margin-bottom: 0;
}

/* Os `.price` do app.css tinham margin-top: 1rem para descolar da imagem; o
   card-stats nasce com .45rem, que aperta demais nestes tres cards. */
.profile-block-packages .card-stats,
.market.accounts .card-stats,
.packages .package .card-stats {
    margin-top: 1rem;
}


/* -- Arredondamento do warriors no Profile -------------------------------- */
.profile-tile,
.profile-member,
.profile-achievement,
.profile-cover {
    border-radius: var(--w7-radius);
}

.profile-member-chip,
.profile-bars .progress {
    border-radius: var(--w7-radius-pill);
}

/* Selo usado nas linhas de ranking dentro do Profile. */
.ranking-table-badge {
    display: inline-block;
    padding: .18rem .45rem;
    font-size: .68rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--w7-text);
    background: var(--w7-gold-soft);
    border: 1px solid var(--w7-line-soft);
    border-radius: var(--w7-radius-sm);
}

/* ==========================================================================
   Guarda geral das barras de progresso
   --------------------------------------------------------------------------
   `.progress { padding: 3px }` no style.min.css deste tema + `box-sizing:
   border-box` do Bootstrap = qualquer `.progress` com altura baixa perde toda
   a altura util para o padding, e o `.progress-bar` filho (que nao tem altura
   propria — ele preenche a caixa de conteudo do pai) fica com 1px ou 0.

   O sintoma e traicoeiro: a barra ESTA la, com a largura correta, e some.

   As regras abaixo cobrem os demais lugares onde a V7 usa `.progress`
   (Achievements, Poll, Raffle e a barra do layout), para nao dependerem de
   alguem lembrar do padding do tema ao criar a proxima.
   ========================================================================== */

.achievement-progress .progress,
.poll-result .progress,
.raffle-progress .progress,
.profile-bars .progress,
.battlepass-progress .progress {
    padding: 0;
}

.achievement-progress .progress-bar,
.poll-result .progress-bar,
.raffle-progress .progress-bar,
.battlepass-progress .progress-bar {
    height: 100%;
    min-height: 3px;
}

/* ==========================================================================
   Events — linhas geradas pelo events.js
   --------------------------------------------------------------------------
   O style.min.css do tema estiliza `.events .event` e `.events-event`, que são
   nomes do V6. O events.js da V7 emite outra árvore (buildRowHTML, events.js:
   207-233):

       .events-row[.is-live|.is-soon|.is-upcoming]
         .events-row-label
           .events-row-name        <- nome do evento
           .events-row-next        <- próximo horário
         .events-row-timer
           .events-row-countdown   <- contagem regressiva
           .events-row-notify > .form-check-input.events-event-notify-switch

   Nenhuma dessas classes tinha regra: o widget saía como texto empilhado, com
   nome e horário colados ("Blood Castle21:00") e a contagem na linha de baixo.

   Geometria do app.css do default; cores na paleta do warriors. Os três
   estados são escritos pelo JS via classList, o CSS só os consome.
   ========================================================================== */

.events {
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

.events-row {
    display: flex;
    align-items: center;
    padding: .35rem 0;
    border-bottom: 1px solid var(--w7-line-soft);
}

.events-row:last-child {
    border-bottom: none;
}

/* min-width:0 é o que permite o text-overflow do nome funcionar dentro do
   flex: sem ele o item não encolhe abaixo do conteúdo e empurra a contagem. */
.events-row-label {
    flex: 1;
    min-width: 0;
}

.events-row-name {
    display: block;
    font-family: var(--w7-font-bold);
    font-size: .84rem;
    color: var(--w7-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.events-row-next {
    display: block;
    margin-top: .05rem;
    font-size: .7rem;
    color: var(--w7-muted);
}

.events-row-timer {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-shrink: 0;
    padding-left: .5rem;
}

.events-row-countdown {
    padding: .2rem .45rem;
    font-size: .74rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--w7-muted);
    background: rgba(255, 255, 255, .07);
    border-radius: var(--w7-radius-sm);
    transition: background .3s, color .3s;
}

/* -- Estados (classes escritas pelo events.js) ---------------------------- */
.events-row.is-soon .events-row-countdown {
    background: var(--w7-success-bg);
    color: var(--w7-success);
}

.events-row.is-upcoming .events-row-countdown {
    background: var(--w7-warning-bg);
    color: var(--w7-warning);
}

.events-row.is-live .events-row-countdown {
    background: var(--w7-danger-bg);
    color: var(--w7-danger);
}

.events-row.is-live .events-row-next {
    color: var(--w7-danger);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.events-row-notify {
    margin: 0;
    min-height: 0;
}

.events-row-notify .form-check-input {
    width: 1.8em;
    height: .9em;
    margin-top: 0;
    cursor: pointer;
}

/* -- Variante do widget da barra lateral ---------------------------------- */
/* [data-spotlight] é o bloco compacto; o horário de "próximo" sai para não
   duplicar a informação da contagem no espaço estreito. */
[data-spotlight] .events-row {
    padding: .25rem 0;
}

[data-spotlight] .events-row-name {
    font-size: .78rem;
}

[data-spotlight] .events-row-next,
[data-spotlight] .events-row-notify {
    display: none;
}

[data-spotlight] .events-row-countdown {
    font-size: .7rem;
}

/* Abas compactas do widget de eventos (mesma regra do default; o prefixo
   `--bs-` bate com o bootstrap.min.css que este tema carrega). */
.nav-sm .nav-link {
    --bs-nav-link-padding-y: .25rem;
    --bs-nav-link-padding-x: .5rem;
    font-size: .78rem;
}

/* `.margin-top` é utilitário herdado do V6, sem regra em CSS nenhum. */
.margin-top {
    margin-top: .75rem;
}

/* ==========================================================================
   VIP — abas da página e bloco de planos
   --------------------------------------------------------------------------
   `.page-tabs` tinha só `gap` e `border-bottom` aqui: a camada anterior foi
   portada do dk-purple, cuja versão é mínima, e as regras de
   `.page-tabs .nav-link` ficaram de fora. Resultado: "Resumo Vantagens
   Pagamento Comprar VIP/Moeda" saía como texto corrido, sem separação nem
   indicação de aba ativa. Estas vêm do app.css do default.

   O sublinhado é um linear-gradient de 2px no rodapé do próprio link — não
   border-bottom — para não deslocar o texto ao trocar de aba.
   ========================================================================== */

.nav.page-tabs {
    margin-bottom: 1rem;
    gap: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    background: linear-gradient(to bottom,
        transparent calc(100% - 2px), var(--w7-line) calc(100% - 2px));
    border-bottom: none;
}

.nav.page-tabs::-webkit-scrollbar {
    display: none;
}

.page-tabs .nav-link {
    padding: .55rem 1rem;
    font-family: var(--w7-font-bold);
    font-size: .85rem;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--w7-muted);
    background: none;
    border: none;
    border-radius: 0;
}

.page-tabs .nav-link:hover {
    color: var(--w7-gold-dim);
    background: linear-gradient(to bottom,
        transparent calc(100% - 2px), var(--w7-gold-dim) calc(100% - 2px));
}

.page-tabs .nav-link.active {
    color: var(--w7-gold);
    background: linear-gradient(to bottom,
        transparent calc(100% - 2px), var(--w7-gold) calc(100% - 2px));
}

/* -- Bloco de planos (notify('vip.plans'), do plugin Subscribe) -----------
   Era o vazio embaixo das abas: o Subscribe não tem view no tema (renderiza a
   do próprio plugin) e NENHUMA das suas 27 classes tinha regra aqui. */

.subscribe-current{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.25rem;margin-bottom:1.5rem;border:1px solid var(--w7-line);border-radius:.375rem;background:var(--w7-sunken)}

.subscribe-current-label{color:var(--w7-muted);margin-right:.5rem}

.subscribe-current-renew{color:var(--w7-muted);margin-left:.75rem}

.subscribe-badge{display:inline-block;padding:.15rem .5rem;border-radius:.375rem;font-size:.75rem}

.subscribe-badge.is-active{background:rgba(25,135,84,.15);color:var(--w7-success)}

.subscribe-badge.is-muted{background:var(--w7-sunken);color:var(--w7-muted)}

.subscribe-cancel{border:1px solid var(--w7-danger);color:var(--w7-danger);background:rgba(0,0,0,0);padding:.35rem .9rem;border-radius:.375rem}

.subscribe-cancel:hover{background:var(--w7-danger);color:var(--w7-text)}

.subscribe-billing{display:inline-flex;gap:.25rem;padding:.25rem;margin:0 auto 1.75rem;border:1px solid var(--w7-line);border-radius:.375rem;background:var(--w7-sunken)}

.subscribe-billing-btn{border:0;background:rgba(0,0,0,0);color:var(--w7-muted);padding:.4rem 1.25rem;border-radius:.375rem;transition:all .15s ease}

.subscribe-billing-btn.is-active{background:var(--w7-gold);color:var(--w7-text)}

.subscribe-charges{margin-bottom:1.75rem}

.subscribe-charges-title{font-size:1rem;margin-bottom:.75rem}

.subscribe-charges-table{width:100%;border-collapse:collapse;border:1px solid var(--w7-line);border-radius:.375rem;overflow:hidden}

.subscribe-charges-table th,.subscribe-charges-table td{padding:.6rem .85rem;text-align:left;border-bottom:1px solid var(--w7-line)}

.subscribe-charges-table th{background:var(--w7-sunken);color:var(--w7-muted);font-size:.82rem;font-weight:600}

.subscribe-charges-table tbody tr:last-child td{border-bottom:0}

.subscribe-charges-status{display:inline-block;padding:.15rem .5rem;border-radius:.375rem;font-size:.75rem;background:var(--w7-sunken);color:var(--w7-muted)}

.subscribe-charges-status.is-paid{background:rgba(25,135,84,.15);color:var(--w7-success)}

.subscribe-charges-status.is-refunded,.subscribe-charges-status.is-canceled{background:rgba(220,53,69,.15);color:var(--w7-danger)}

.subscribe-charges-status.is-waiting,.subscribe-charges-status.is-analysis{background:rgba(255,193,7,.15);color:var(--w7-gold-dim)}

.subscribe-plans-block{margin-bottom:2rem}

.subscribe-plans-heading{font-size:1.25rem;margin-bottom:.35rem}

.subscribe-plans-subheading{color:var(--w7-muted);font-size:.9rem;margin-bottom:1.35rem}

.subscribe-plans{display:grid;grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));gap:1.5rem;align-items:stretch}

.subscribe-plan{position:relative;display:flex;flex-direction:column;padding:1.75rem 1.5rem;border:1px solid var(--w7-line);border-radius:.375rem;background:var(--w7-card);transition:transform .15s ease,box-shadow .15s ease}

.subscribe-plan.is-recommended{border-color:var(--w7-gold);box-shadow:0 .75rem 2rem rgba(255, 199, 34, .18);transform:translateY(-0.35rem)}

.subscribe-plan-badge{position:absolute;top:-0.75rem;left:50%;transform:translateX(-50%);padding:.2rem .75rem;border-radius:.375rem;background:var(--w7-gold);color:var(--w7-text);font-size:.72rem;text-transform:uppercase;letter-spacing:.04em}

.subscribe-plan-name{margin:0 0 .35rem;font-size:1.15rem}

.subscribe-plan-desc{color:var(--w7-muted);font-size:.9rem;margin-bottom:1rem}

.subscribe-plan-price{margin-bottom:1.25rem}

.subscribe-plan-value{font-size:2rem;font-weight:700;color:var(--w7-text)}

.subscribe-plan-cycle{color:var(--w7-muted);font-size:.9rem}

.subscribe-plan-features{list-style:none;padding:0;margin:0 0 1.5rem;display:flex;flex-direction:column;gap:.55rem}

.subscribe-plan-features li{display:flex;align-items:center;gap:.5rem;font-size:.92rem}

.subscribe-plan-check{font-size:1.15rem;width:1.15rem;height:1.15rem;color:var(--w7-success)}

.subscribe-plan-gateway{margin-bottom:.6rem}

.subscribe-plan-nogateway{color:var(--w7-muted);font-size:.85rem;margin-bottom:.6rem}

.subscribe-plan-btn{margin-top:auto;width:100%;border:0;padding:.6rem 1rem;border-radius:.375rem;background:var(--w7-gold);color:var(--w7-text);font-weight:600;transition:background .15s ease}

.subscribe-plan-btn:hover:not(:disabled){background:var(--w7-gold-dim)}

.subscribe-plan-btn:disabled{opacity:.55}


/* ==========================================================================
   Contraste sobre o dourado
   --------------------------------------------------------------------------
   A primária do default é #0d6efd — azul escuro, que pede texto BRANCO. A do
   warriors é #ffc722 — amarelo claro, que pede texto ESCURO. O repinte trocou
   a cor de fundo mas manteve o `color` branco que vinha junto, e todo botão
   preenchido ficou branco sobre amarelo.

   Regra: onde o fundo é --w7-gold, o texto é o fundo da página.
   ========================================================================== */

.subscribe-plan-btn,
.subscribe-plan-badge,
.subscribe-billing-btn.is-active,
.checkout-continue,
.checkout-step-num,
.battlepass-btn-claim,
.page-block-cta-btn {
    color: var(--w7-bg) !important;
    font-weight: 700;
}

.subscribe-plan-btn:hover:not(:disabled),
.subscribe-billing-btn.is-active:hover {
    color: var(--w7-bg) !important;
}

/* ==========================================================================
   Tokens do Bootstrap 5 — o tema carrega o build CLARO
   --------------------------------------------------------------------------
   CAUSA RAIZ de uma família inteira de defeitos. O bootstrap.min.css deste
   tema é o build padrão, de tema claro, e o style.min.css nunca sobrescreve os
   tokens — só repinta à mão os componentes que o autor lembrou:

     --bs-secondary-color : rgba(33, 37, 41, .75)   <- preto translúcido
     --bs-body-color      : #212529
     --bs-border-color    : #dee2e6
     --bs-secondary-bg    : #e9ecef
     --bs-tertiary-bg     : #f8f9fa
     --bs-emphasis-color  : #000

   Tudo que o tema NÃO repintou à mão cai nesses valores. Era por isso que
   "Nenhum plano disponível" (`.text-muted`, que é
   `color: var(--bs-secondary-color)`) saía quase invisível sobre o fundo
   escuro, e que `.border` e `.bg-light` apareciam claros no meio do tema.

   Afeta 14 views que usam `.border`, 12 que usam `.bg-light`, 6 `.text-secondary`
   e 4 `.text-muted` — mais todo componente V7 portado que herda desses tokens.

   Redeclarar aqui resolve na origem, sem tocar em markup e sem `!important`:
   o v7.css carrega depois do bootstrap.min.css, então estes valores ganham.

   NÃO mexemos em --bs-body-bg: o fundo da página o tema já pinta por conta
   própria, e mudá-lo teria efeito em modal, dropdown e card que já estão
   corretos.
   ========================================================================== */

:root {
    /* -- Texto ------------------------------------------------------------ */
    --bs-body-color: var(--w7-text);
    --bs-body-color-rgb: 255, 255, 255;
    --bs-secondary-color: var(--w7-muted);
    --bs-tertiary-color: var(--w7-faint);
    --bs-emphasis-color: var(--w7-text);
    --bs-emphasis-color-rgb: 255, 255, 255;
    --bs-heading-color: var(--w7-text);

    /* -- Linhas ----------------------------------------------------------- */
    --bs-border-color: var(--w7-line);
    --bs-border-color-translucent: rgba(255, 255, 255, .12);

    /* -- Superfícies auxiliares ------------------------------------------- */
    --bs-secondary-bg: var(--w7-sunken);
    --bs-secondary-bg-rgb: 18, 28, 43;
    --bs-tertiary-bg: var(--w7-card);
    --bs-tertiary-bg-rgb: 14, 20, 32;

    /* -- Tabela ----------------------------------------------------------- */
    --bs-table-color: var(--w7-text);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--w7-line);
    --bs-table-striped-color: var(--w7-text);
    --bs-table-striped-bg: rgba(255, 255, 255, .03);
    --bs-table-hover-color: var(--w7-text);
    --bs-table-hover-bg: var(--w7-gold-soft);

    /* -- Link ------------------------------------------------------------- */
    --bs-link-color: var(--w7-gold);
    --bs-link-color-rgb: 255, 199, 34;
    --bs-link-hover-color: var(--w7-gold-dim);
    --bs-link-hover-color-rgb: 215, 188, 44;

    /* -- Foco ------------------------------------------------------------- */
    --bs-focus-ring-color: var(--w7-gold-soft);
}

/* `.bg-light` e `.bg-white` num tema escuro: o nome mente, mas o uso nas views
   é "superfície um pouco destacada". Traduzimos a intenção, não a palavra. */
.bg-light {
    background-color: var(--w7-sunken) !important;
}

.bg-white {
    background-color: var(--w7-card) !important;
}

/* ==========================================================================
   Aliases de badge do Bootstrap 4
   --------------------------------------------------------------------------
   As views usam `badge badge-danger` (19 ocorrências de `badge-*` no tema). No
   Bootstrap 5 essas classes não existem: sobra só `.badge`, que define
   `color:#fff` e NENHUM fundo — daí o contador de notificação do menu sair
   como uma caixa branca vazia com o número dentro.
   ========================================================================== */

.badge-primary   { background-color: var(--w7-gold);      color: var(--w7-bg); }
.badge-secondary { background-color: var(--w7-line-soft);  color: var(--w7-text); }
.badge-success   { background-color: var(--w7-success);    color: var(--w7-bg); }
.badge-danger    { background-color: var(--w7-danger);     color: #fff; }
.badge-warning   { background-color: var(--w7-warning);    color: var(--w7-bg); }
.badge-info      { background-color: var(--w7-info);       color: var(--w7-bg); }
.badge-light     { background-color: var(--w7-sunken);     color: var(--w7-text); }
.badge-dark      { background-color: var(--w7-bg);         color: var(--w7-text); }

/* ==========================================================================
   WorkShop — grade de personagens do inventário
   --------------------------------------------------------------------------
   O style.min.css declara `.list-characters { display:flex; flex-wrap:wrap;
   gap:15px }` e NADA para `.character`. Sem largura, cada item dimensiona pelo
   conteúdo, e como o `.card` dentro dele é `width:100%`, as colunas saíam
   irregulares e a segunda linha começava muito abaixo (o nome do personagem é
   que definia a largura de cada card).

   O baú (`warehouse.phtml`) não usa esta lista: por isso já estava correto —
   foi essa diferença que apontou a causa.
   ========================================================================== */

/*
 * O tema declara `.workshop { display: flex }`, então os filhos de
 * `.workshop-inventory` viram COLUNAS lado a lado: a lista de personagens
 * ficava espremida à esquerda com um vazio enorme embaixo, e o inventário
 * perdia largura. O baú não tem essa lista — era por isso que só ele estava
 * certo.
 *
 * Com `flex-wrap` + `width:100%` na lista, ela passa a ser uma FAIXA no topo e
 * o inventário recebe a linha inteira abaixo.
 */
.workshop.workshop-inventory {
    flex-wrap: wrap;
}

.workshop-inventory .list-characters,
.workshop-inventory .workshop-container {
    width: 100%;
}

.list-characters {
    align-items: flex-start;
}

/*
 * Largura FIXA, nao porcentagem.
 *
 * Eu tinha portado do default `max-width: calc(20% - gap)`. La aquilo funciona
 * porque `.list-characters` ocupa a largura inteira do conteudo. Aqui NAO: no
 * warriors a lista divide a linha com o painel do inventario, entao 20% de uma
 * coluna estreita dava ~70px e o rotulo "Inventorio" quebrava letra a letra.
 *
 * Porcentagem so serve quando se sabe a largura do pai. Como aqui ela varia,
 * a base e uma largura minima em px: os cards crescem para preencher a linha,
 * quebram quando nao couberem, e nunca encolhem abaixo do que o rotulo exige.
 */
.list-characters .character {
    display: block;
    flex: 1 1 120px;
    min-width: 120px;
    max-width: 180px;
}

/* O rotulo do botao nunca quebra: era ele que denunciava o card apertado. */
.list-characters .character .btn {
    white-space: nowrap;
    padding-left: .35rem;
    padding-right: .35rem;
}

/* Avatares têm alturas diferentes; a caixa fixa alinha os rodapés dos cards. */
.list-characters .character-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 110px;
    overflow: hidden;
}

.list-characters .character-avatar img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.list-characters .character .card {
    height: 100%;
}

/* Personagem selecionado. */
.list-characters .character.active .card {
    border-color: var(--w7-gold);
    box-shadow: 0 0 0 1px var(--w7-gold);
}

/* ==========================================================================
   Sliders (.form-range) e o rótulo ao lado
   --------------------------------------------------------------------------
   REGRESSÃO QUE EU CAUSEI, e a correção. O Bootstrap pinta o trilho com
   `background-color: var(--bs-secondary-bg)`. No build claro isso era
   `#e9ecef` — quase branco — e sobre o fundo escuro do tema a barra lia como
   CHEIA. Ao redeclarar `--bs-secondary-bg` para a superfície escura do tema,
   o trilho ficou escuro e o slider passou a parecer vazio.

   A correção não é desfazer o token (ele conserta `.bg-light`, `.border` e o
   texto apagado): é dar ao slider estilo PRÓPRIO, que é o que faltava desde o
   começo — nem o style.min.css nem o bootstrap definiam `.form-range-control`,
   `.form-range-text`, `-prefix` ou `-content`.

   PREENCHIMENTO ATÉ O THUMB, sem JS, nos dois motores:
     - Firefox: `::-moz-range-progress`, uma regra e pronto.
     - WebKit: não existe pseudo-elemento equivalente. O thumb projeta uma
       sombra sólida muito à esquerda de si e o trilho a recorta com
       `overflow: hidden` — o rastro acompanha o valor porque a sombra anda
       junto com o thumb.
   ========================================================================== */

.form-range-control {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.form-range-control .form-range {
    flex: 1;
    min-width: 0;
}

/* O rótulo "+ 15" numa linha só. A referência fixa `width:25px` inline, o que
   com dois dígitos força a quebra — daí o "+" e o número em linhas separadas. */
.form-range-text {
    display: inline-flex;
    align-items: baseline;
    gap: .1rem;
    flex: 0 0 auto;
    min-width: 2.75rem;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.form-range-text-prefix {
    color: var(--w7-muted);
}

.form-range-text-content {
    font-family: var(--w7-font-bold);
    color: var(--w7-gold);
}

/* -- Trilho e thumb ------------------------------------------------------- */
/*
 * `overflow: hidden` aqui é o que faz o preenchimento funcionar no WebKit:
 * o thumb projeta uma sombra enorme para a esquerda e o trilho a RECORTA.
 * Ver a nota em ::-webkit-slider-thumb.
 */
/*
 * A altura do trilho no WebKit tem de ser IGUAL à do thumb.
 *
 * `overflow: hidden` recorta tudo que passa da caixa do trilho — inclusive o
 * próprio thumb. Com trilho de .45rem e thumb de .95rem, sobrava só uma lasca
 * do thumb e a bolinha de arrastar desaparecia. Igualando as alturas, o thumb
 * fica contido e visível, e a sombra continua recortada na horizontal (que é
 * o que produz o rastro).
 *
 * No Firefox não há esse acoplamento: `::-moz-range-thumb` é desenhado por
 * fora do trilho, então lá o trilho pode seguir fino.
 */
.form-range::-webkit-slider-runnable-track {
    height: .95rem;
    background-color: rgba(255, 255, 255, .22);
    border-radius: var(--w7-radius-pill);
    overflow: hidden;
}

.form-range::-moz-range-track {
    height: .45rem;
    background-color: rgba(255, 255, 255, .22);
    border-radius: var(--w7-radius-pill);
}

/* Firefox preenche até o thumb de graça. */
.form-range::-moz-range-progress {
    height: .45rem;
    background-color: var(--w7-gold);
    border-radius: var(--w7-radius-pill);
}

/*
 * O thumb vinha azul do Bootstrap (#0d6efd), fora da paleta.
 *
 * E o RASTRO: o WebKit não tem `::-webkit-range-progress`. A solução sem JS é
 * o thumb projetar uma sombra sólida muito à esquerda de si — larga o
 * suficiente para cobrir qualquer trilho — e o trilho recortá-la com
 * `overflow: hidden`. O resultado acompanha o valor de graça, porque a sombra
 * anda junto com o thumb.
 *
 * Por isso a sombra do :focus precisa REPETIR o rastro: `box-shadow` não
 * acumula, e declarar só o anel de foco apagaria o preenchimento ao clicar.
 */
.form-range::-webkit-slider-thumb {
    width: .95rem;
    height: .95rem;
    /* trilho e thumb têm a mesma altura: sem deslocamento, senão o
       `overflow: hidden` do trilho corta a bolinha. */
    margin-top: 0;
    background-color: var(--w7-gold);
    border: 3px solid var(--w7-bg);
    border-radius: 50%;
    box-shadow: -1006px 0 0 1000px var(--w7-gold);
}

.form-range::-moz-range-thumb {
    width: .95rem;
    height: .95rem;
    background-color: var(--w7-gold);
    border: 2px solid var(--w7-bg);
}

/*
 * ARMADILHA: pseudo-elemento de fornecedor NAO pode entrar em lista.
 *
 * `.form-range::-webkit-slider-thumb, .form-range::-moz-range-thumb { ... }`
 * nao funciona em navegador NENHUM: um seletor desconhecido invalida a lista
 * inteira, e cada motor conhece so o seu. Eu havia escrito as regras de
 * :active e :focus exatamente assim — elas nao pintavam nada. Sempre uma
 * regra separada por fornecedor.
 */
.form-range::-webkit-slider-thumb:active {
    background-color: var(--w7-gold-dim);
    box-shadow: -1006px 0 0 1000px var(--w7-gold-dim);
}

.form-range::-moz-range-thumb:active {
    background-color: var(--w7-gold-dim);
}

/*
 * O anel de foco REPETE o rastro: `box-shadow` substitui, nao acumula. Sem
 * repetir, clicar no slider apagaria o preenchimento.
 */
.form-range:focus::-webkit-slider-thumb {
    box-shadow: -1006px 0 0 1000px var(--w7-gold),
                0 0 0 .2rem var(--w7-gold-soft);
}

.form-range:focus::-moz-range-thumb {
    box-shadow: 0 0 0 .2rem var(--w7-gold-soft);
}