/* shopsystem.css */

.shop-title {
    color: #cccccc;
    margin: 0 0 10px 0;
    font-size: 14px;
}

/* ── Tabs ── */
/* Barra de navegação clara com border-bottom: separa visualmente as tabs do
   conteúdo (antes era apenas bg de mesma cor, sem hierarquia). */
.shop-tabs {
    display: flex;
    flex-wrap: wrap;
    background-color: #181a26;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 0;
    padding: 0 4px;
}

.shop-tab-btn {
    position: relative;
    background: transparent;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 10px 14px;
    color: var(--color-text-muted);
    font-size: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    letter-spacing: 0.2px;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.shop-tab-icon svg.lucide,
.shop-tab-icon[data-lucide] svg {
    width: 14px;
    height: 14px;
    stroke-width: 2;
    color: inherit;
}

.shop-tab-btn:hover {
    color: var(--color-text-bright);
    background-color: var(--surface-soft);
}

/* Active: texto + underline em cinza-azul (--color-accent-soft) — consistente
   com o resto do tema (sidebar/topnav). Sem dourado nem glow forte: o destaque
   vem do bg sutil + underline limpo. */
.shop-tab-btn.active {
    color: var(--color-accent-soft);
    background-color: var(--surface-soft);
}
.shop-tab-btn.active::after {
    content: "";
    position: absolute;
    left: 4px;
    right: 4px;
    bottom: -1px;
    height: 2px;
    background: var(--color-accent-soft);
}

.shop-tab-label {
    line-height: 1;
}

/* Mobile: tabs viram strip horizontal compacto com swipe (scroll-x).
   Pills com border arredondado em vez do indicador de border-bottom. */
@media (max-width: 680px) {
    .shop-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        gap: 5px;
        padding: 4px 2px 6px;
        margin-bottom: 8px;
        background: transparent;
        border-bottom: none;
        scrollbar-width: none;
    }
    .shop-tabs::-webkit-scrollbar { display: none; }

    .shop-tab-btn {
        flex: 0 0 auto;
        gap: 5px;
        padding: 6px 11px;
        background-color: var(--surface-soft);
        border: 1px solid var(--border-soft);
        border-radius: var(--radius-pill);
        white-space: nowrap;
        scroll-snap-align: start;
        font-size: 11.5px;
    }
    .shop-tab-btn::after { display: none; }
    .shop-tab-btn:hover {
        background-color: var(--surface-soft-hover);
        border-color: var(--border-soft-hover);
    }
    .shop-tab-btn.active {
        background-color: var(--surface-soft-hover);
        border-color: var(--color-accent-soft);
        color: var(--color-accent-soft);
    }
    .shop-tab-icon svg.lucide,
    .shop-tab-icon[data-lucide] svg {
        width: 13px;
        height: 13px;
    }
}

.shop-tab-content {
    display: none;
    padding: 8px 0 0 0;
}

.shop-tab-content.active {
    display: block;
}

/* ── Item rows ── */
.shop-item-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-left: 2px solid transparent;
    transition: background-color 0.12s ease, border-left-color 0.12s ease;
}

.shop-item-row:nth-child(odd)  { background-color: #1f2030; }
.shop-item-row:nth-child(even) { background-color: #181a26; }

.shop-item-row:hover {
    background-color: var(--surface-soft-hover);
    border-left-color: var(--color-accent-soft);
}

/* Pts column — pill discreta, integrada à paleta cinza-azul do tema.
   Antes usava --color-warning (dourado real) que chamava atenção demais. */
.shop-item-points {
    flex-shrink: 0;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 54px;
    padding: 5px 10px;
    background: var(--surface-soft);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    line-height: 1.1;
}

.shop-pts-num {
    color: var(--color-accent-soft);
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.shop-pts-unit {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: var(--color-text-muted);
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
}

.shop-pts-icon svg.lucide,
.shop-pts-icon[data-lucide] svg {
    width: 10px;
    height: 10px;
    stroke-width: 2;
    color: var(--color-text-muted);
}

/* Hover do item: somente box-shadow no wrapper. Sem scale/brightness na sprite
   (causava flicker em pixel art). Glow no wrapper, sprite intacta.

   Box 56x56 (aumentado de 40x40): outfits maiores cabem inteiras no tamanho
   natural sem serem cortadas. Outfits menores ficam menores naturalmente
   (centralizadas no box) — pixel-art no tamanho original, sem esticar nada.
   max-width/max-height como cap defensivo caso algum sprite venha bem grande. */
.shop-item-img {
    position: relative;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;
    transition: box-shadow 0.2s ease;
}

.shop-item-img img {
    max-width: 100%;
    max-height: 100%;
    image-rendering: pixelated;
}

.shop-item-row:hover .shop-item-img {
    box-shadow: 0 0 14px rgba(255, 204, 102, 0.28);
}

.shop-item-info {
    flex: 1;
    font-size: 12.5px;
    color: var(--color-text);
    min-width: 0;
}

.shop-item-info b {
    color: var(--color-text-bright);
}

.shop-item-desc {
    color: var(--color-text-muted);
    font-size: 11px;
    line-height: 1.35;
}

.shop-item-action {
    width: 84px;
    text-align: center;
    flex-shrink: 0;
}

.shop-gender-header td {
    background-color: #3a2a3a;
    color: #ddbbdd;
    text-align: center;
    padding: 4px;
}

.shop-login-required {
    display: inline-block;
    font-size: 11px;
    color: var(--color-accent-soft);
    text-decoration: none;
    padding: 4px 10px;
    border: 1px solid var(--border-soft);
    border-radius: 3px;
    background: var(--surface-soft);
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.shop-login-required:hover {
    color: #ffffff;
    background: var(--surface-soft-hover);
    border-color: var(--border-soft-hover);
}

/* ── Buttons ── */
.shop-btn {
    display: inline-block;
    padding: 5px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-decoration: none;
    background: var(--color-surface);
    color: var(--color-text-muted);
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* Buy: padrão do tema (cinza-azul + glow dourado). Substitui o verde escuro
   anterior que destoava do design system. Verde fica reservado pro Accept
   (página de confirm) que tem semântica de "execute transaction". */
.shop-btn-buy {
    border-color: var(--border-soft);
    background: var(--surface-soft);
    color: var(--color-accent-soft);
    text-shadow: 0 0 4px rgba(255, 200, 110, 0.35);
}

.shop-btn-buy:hover {
    background: var(--surface-soft-hover);
    border-color: var(--color-accent-soft);
    color: #ffffff;
}

.shop-btn-accept {
    border-color: #336633;
    color: #88cc88;
}

.shop-btn-accept:hover {
    background-color: #336633;
    color: #ffffff;
}

.shop-btn-accept:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.shop-btn-cancel {
    border-color: #663333;
    color: #cc8888;
}

.shop-btn-cancel:hover {
    background-color: #663333;
    color: #ffffff;
}

/* ── Confirm page ── */
.shop-confirm-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 10px;
}

/* ── Select player page ── */
.shop-select-grid {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.shop-select-box {
    flex: 1;
    min-width: 220px;
    background-color: #1b1e26;
    border: 1px solid #333344;
    border-radius: 4px;
    padding: 12px;
}

.shop-select-box h3 {
    color: #cccccc;
    margin: 0 0 8px 0;
    font-size: 12px;
}

.shop-select-box label {
    display: block;
    font-size: 12px;
    color: #aaaaaa;
    margin-bottom: 6px;
}

.shop-select-box input[type="text"],
.shop-select-box select {
    background-color: #242438;
    border: 1px solid #444455;
    color: #cccccc;
    padding: 3px 6px;
    border-radius: 3px;
    width: 100%;
    box-sizing: border-box;
    margin-top: 2px;
}

/* ── History ── */
.shop-section-title {
    color: #cccccc;
    font-size: 13px;
    margin: 8px 0 6px 0;
}

.shop-to-you {
    color: #88cc88;
    font-weight: bold;
}

.shop-pending {
    color: #cc8888;
    font-size: 11px;
}

/* ── Points bar ── */
.shop-points-bar {
    margin-top: 12px;
    padding: 6px 10px;
    background-color: #1b1e26;
    border: 1px solid #333344;
    border-radius: 4px;
    font-size: 12px;
    color: #aaaaaa;
}

.shop-points-bar b {
    color: #ffd479;
}