/* ============================================================
   LOJA.CSS — Arsenal Shinobi
   ============================================================ */

.loja-body { background:var(--page-bg) !important; min-height:100vh; }

/* ── LAYOUT 3 COLUNAS ────────────────────────────────────────── */
.loja-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 0;
  min-height: calc(100vh - 52px);
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 20px 40px;
  align-items: start;
  gap: 16px;
}

/* ── SIDEBAR FILTROS ─────────────────────────────────────────── */
.loja-sidebar {
  background:#F4F2ED; border:1px solid #D9D5CC; border-radius:14px;
  padding:18px 16px; position:sticky; top:72px;
  display:flex; flex-direction:column; gap:0;
}
.loja-sidebar-titulo {
  font-size:.7rem; font-weight:900; color:#74777F; letter-spacing:1.5px;
  text-transform:uppercase; margin-bottom:18px;
  display:flex; align-items:center; gap:6px;
}
.loja-filtro-grupo { margin-bottom:20px; }
.loja-filtro-label { font-size:.62rem; font-weight:900; color:#74777F; letter-spacing:1.2px; text-transform:uppercase; margin-bottom:10px; }
.loja-check {
  display:flex; align-items:center; gap:8px;
  font-size:.8rem; color:#74777F; cursor:pointer; padding:4px 0;
  transition:color .15s; user-select:none;
}
.loja-check:hover { color:#20232A; }
.loja-check input[type="checkbox"] { accent-color:#e67e22; width:14px; height:14px; cursor:pointer; }
.loja-dot { width:8px; height:8px; border-radius:50%; display:inline-block; }

/* Range */
.loja-range {
  width:100%; accent-color:#e67e22; cursor:pointer; margin:6px 0 4px;
}
.loja-range-vals { display:flex; justify-content:space-between; align-items:center; font-size:.68rem; color:#74777F; }
.loja-range-val  { color:#e67e22; font-weight:800; }

.loja-btn-limpar {
  width:100%; background:#EDE9DE; color:#74777F; border:1px solid #D9D5CC;
  border-radius:8px; padding:9px; font-size:.78rem; font-weight:700;
  font-family:'Nunito',sans-serif; cursor:pointer; transition:all .15s; margin-top:4px;
}
.loja-btn-limpar:hover { border-color:#e67e22; color:#e67e22; }

/* ── COLUNA CENTRAL ──────────────────────────────────────────── */
.loja-main { display:flex; flex-direction:column; gap:16px; }

.loja-main-header {
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
}
.loja-main-titulo { display:flex; align-items:baseline; gap:10px; }
.loja-main-nome   { font-family:'Bangers',cursive; font-size:1.5rem; color:#20232A; letter-spacing:1px; }
.loja-main-count  { font-size:.78rem; color:#74777F; font-weight:600; }

.loja-search-wrap {
  display:flex; align-items:center; gap:8px;
  background:#F4F2ED; border:1px solid #D9D5CC; border-radius:10px;
  padding:8px 14px; flex:1; max-width:320px; transition:border-color .15s;
}
.loja-search-wrap:focus-within { border-color:#e67e22; }
.loja-search-icon { font-size:.9rem; color:#74777F; }
.loja-search {
  background:transparent; border:none; outline:none;
  color:#20232A; font-size:.85rem; font-family:'Nunito',sans-serif; width:100%;
}
.loja-search::placeholder { color:#74777F; }

/* Grid de cards */
.loja-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:12px;
}

/* ── CARD DE ITEM ────────────────────────────────────────────── */
.loja-card {
  background:#F4F2ED; border:1px solid #D9D5CC; border-radius:14px;
  overflow:hidden; display:flex; flex-direction:column;
  transition:border-color .2s, transform .15s;
}
.loja-card:hover { transform:translateY(-2px); }

.loja-card-img {
  position:relative; height:160px; background:#EDE9DE; overflow:hidden;
}
.loja-card-img img {
  width:100%; height:100%; object-fit:cover; transition:transform .3s;
}
.loja-card:hover .loja-card-img img { transform:scale(1.05); }
.loja-card-img-fallback {
  width:100%; height:100%; display:flex; align-items:center;
  justify-content:center; font-size:3.5rem;
  background:linear-gradient(135deg,#F4F2ED,#EDE9DE);
}
.loja-card-cat-badge {
  position:absolute; top:10px; left:10px;
  background:rgba(0,0,0,.75); color:#f0f0f0;
  font-size:.62rem; font-weight:800; padding:3px 8px;
  border-radius:5px; letter-spacing:.5px; text-transform:uppercase;
  display:flex; align-items:center; gap:4px;
}
.loja-card-rar-badge {
  position:absolute; top:10px; right:10px;
  font-size:.62rem; font-weight:900; padding:3px 9px;
  border-radius:5px; border:1px solid; letter-spacing:.5px; text-transform:uppercase;
  background:rgba(0,0,0,.75);
}

.loja-card-body { padding:12px 14px; flex:1; display:flex; flex-direction:column; gap:6px; }
.loja-card-nome { font-family:'Bangers',cursive; font-size:.95rem; color:#20232A; letter-spacing:.5px; }
.loja-card-bonus {
  display:flex; flex-wrap:wrap; gap:4px;
}
.loja-card-bonus-tag {
  background:#EDE9DE; border:1px solid #D8D2C7; border-radius: 5px;
  padding:2px 7px; font-size:.68rem; color:#74777F; font-weight:700;
  display:flex; align-items:center; gap:3px;
}

.loja-card-footer {
  padding:10px 14px; border-top:1px solid #DDD8CF;
  display:flex; align-items:center; justify-content:space-between; gap:8px;
}
.loja-card-preco {
  font-size:.95rem; font-weight:900; color:#20232A; font-family:'Nunito',sans-serif;
  display:flex; align-items:center; gap:4px;
}
.loja-ryo-icon { font-size:.85rem; }
.loja-btn-comprar {
  background:#e67e22; color:#fff; border:none; border-radius:8px;
  padding:8px 16px; font-size:.78rem; font-weight:800; font-family:'Nunito',sans-serif;
  cursor:pointer; transition:background .15s; white-space:nowrap;
}
.loja-btn-comprar:hover { background:#d35400; }
.loja-btn-comprar:disabled { background:#EDE9DE; color:#74777F; cursor:not-allowed; }
.loja-btn-cash { background: linear-gradient(135deg, #1a4a8a, #2980b9) !important; }
.loja-btn-cash:hover { background: linear-gradient(135deg, #154078, #2471a3) !important; }
.loja-btn-cash:disabled { background:#EDE9DE !important; color:#74777F; }
.loja-preco-riscado { text-decoration: line-through; opacity: .65; font-size: .9em; }
.loja-btn-carrinho {
  background:#2980b9; color:#fff; border:none; border-radius:8px;
  padding:8px 12px; font-size:.78rem; font-weight:800; font-family:'Nunito',sans-serif;
  cursor:pointer; transition:background .15s;
}
.loja-btn-carrinho:hover { background:#1a5276; }

/* Paginação */
.loja-paginacao { display:flex; align-items:center; justify-content:center; gap:6px; padding:8px 0; }
.loja-pag-btn {
  width:34px; height:34px; background:#F4F2ED; border:1px solid #D9D5CC;
  border-radius:8px; color:#74777F; font-size:.82rem; font-weight:700;
  font-family:'Nunito',sans-serif; cursor:pointer; transition:all .15s;
  display:flex; align-items:center; justify-content:center;
}
.loja-pag-btn:hover  { border-color:#e67e22; color:#e67e22; }
.loja-pag-btn.active { background:#e67e22; border-color:#e67e22; color:#fff; }
.loja-pag-btn:disabled { opacity:.4; cursor:not-allowed; }

/* ── CARRINHO (coluna direita) ───────────────────────────────── */
.loja-carrinho { display:flex; flex-direction:column; gap:12px; position:sticky; top:72px; }

/* Player card */
.loja-player-card {
  background:#F4F2ED; border:1px solid #D8D2C7; border-radius:12px;
  padding:12px 14px; display:flex; align-items:center; gap:10px;
  box-shadow: 0 5px 18px rgba(91,62,10,.13);}
.loja-player-avatar {
  width:40px; height:40px; border-radius:50%; overflow:hidden;
  background:#EDE9DE; border:2px solid #D9D5CC;
  display:flex; align-items:center; justify-content:center; font-size:1.2rem; flex-shrink:0;
}
.loja-player-avatar img { width:100%; height:100%; object-fit:cover; }
.loja-player-info { flex:1; }
.loja-player-nome  { font-size:.82rem; font-weight:800; color:#20232A; }
.loja-player-nivel { font-size:.7rem; color:#74777F; font-weight:600; }
.loja-player-ryo   { display:flex; align-items:center; gap:4px; font-size:.82rem; font-weight:900; color:#e67e22; font-family:'Nunito',sans-serif; white-space:nowrap; }

/* Cart card */
.loja-cart-card {
  background:#F4F2ED; border:1px solid #D8D2C7; border-radius:12px;
  padding:14px; display:flex; flex-direction:column; gap:12px;
  box-shadow: 0 5px 18px rgba(91,62,10,.13);}
.loja-cart-header {
  display:flex; align-items:center; justify-content:space-between;
  font-size:.82rem; font-weight:800; color:#20232A;
}
.loja-cart-count { font-size:.72rem; color:#74777F; font-weight:600; }
.loja-cart-lista { display:flex; flex-direction:column; gap:8px; max-height:200px; overflow-y:auto; }
.loja-cart-empty { font-size:.78rem; color:#74777F; text-align:center; padding:12px 0; font-style:italic; }

.loja-cart-item {
  display:flex; align-items:center; gap:10px;
  background:#EDE9DE; border-radius:8px; padding:8px 10px;
}
.loja-cart-item-img {
  width:36px; height:36px; border-radius:6px; overflow:hidden;
  background:#F4F2ED; display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; flex-shrink:0;
}
.loja-cart-item-img img { width:100%; height:100%; object-fit:cover; }
.loja-cart-item-info { flex:1; }
.loja-cart-item-nome { font-size:.75rem; font-weight:800; color:#74777F; display:block; }
.loja-cart-item-qtd  { font-size:.68rem; color:#74777F; }
.loja-cart-item-preco { font-size:.78rem; font-weight:900; color:#20232A; white-space:nowrap; }
.loja-cart-item-rm {
  background:none; border:none; color:#74777F; cursor:pointer;
  font-size:.9rem; padding:0 2px; transition:color .15s;
}
.loja-cart-item-rm:hover { color:#e74c3c; }

.loja-cart-subtotal {
  display:flex; align-items:center; justify-content:space-between;
  border-top:1px solid #DDD8CF; padding-top:10px;
  font-size:.82rem; color:#74777F; font-weight:700;
}
.loja-cart-total-val { font-size:1rem; font-weight:900; color:#20232A; display:flex; align-items:center; gap:4px; }

.loja-btn-finalizar {
  width:100%; background:#e67e22; color:#fff; border:none; border-radius:10px;
  padding:13px; font-size:.92rem; font-weight:900; font-family:'Nunito',sans-serif;
  cursor:pointer; transition:background .15s;
}
.loja-btn-finalizar:hover    { background:#d35400; }
.loja-btn-finalizar:disabled { background:#EDE9DE; color:#74777F; cursor:not-allowed; }

.loja-saldo-info { font-size:.72rem; color:#74777F; font-weight:600; display:flex; flex-direction:column; gap:3px; }
.loja-saldo-info strong { color:#74777F; }

/* Inventário link */
.loja-inv-link {
  background:#F4F2ED; border:1px solid #D9D5CC; border-radius:12px;
  padding:14px; display:flex; align-items:center; gap:10px;
  cursor:pointer; transition:border-color .15s;
}
.loja-inv-link:hover { border-color:#e67e22; }
.loja-inv-titulo { font-size:.82rem; font-weight:800; color:#74777F; }
.loja-inv-sub    { font-size:.7rem; color:#74777F; }
.loja-inv-arrow  { color:#74777F; font-size:1.2rem; margin-left:auto; }

/* msg-box */
.msg-box { border-radius:8px; padding:0; max-height:0; overflow:hidden; transition:max-height .3s,padding .3s,margin .3s; font-size:.88rem; }
.msg-box.show    { max-height:60px; padding:10px 16px; margin-bottom:4px; }
.msg-box.success { background:rgba(46,204,113,.12); border:1px solid #2ecc71; color:#2ecc71; }
.msg-box.error   { background:rgba(231,76,60,.12);  border:1px solid #e74c3c; color:#e74c3c; }

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media (max-width:1100px) {
  .loja-layout { grid-template-columns:200px 1fr 260px; }
  .loja-grid   { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:820px) {
  .loja-layout { grid-template-columns:1fr; }
  .loja-sidebar,.loja-carrinho { position:static; }
  .loja-grid { grid-template-columns:repeat(2,1fr); }
}

/* ── Input de quantidade (itens) ─────────────────────────────── */
.loja-qtd-wrap {
  display: flex;
  gap: 6px;
  width: 100%;
  align-items: center;
}
.loja-qtd-input {
  width: 54px;
  flex-shrink: 0;
  background: #F4F2ED;
  border: 1px solid #D9D5CC;
  border-radius: 7px;
  color: #20232A;
  font-size: .82rem;
  font-weight: 800;
  font-family: 'Nunito', sans-serif;
  padding: 7px 6px;
  text-align: center;
  -moz-appearance: textfield;
}
.loja-qtd-input::-webkit-inner-spin-button,
.loja-qtd-input::-webkit-outer-spin-button { -webkit-appearance: none; }
.loja-qtd-input:focus { outline: none; border-color: #e67e22; }
.loja-qtd-wrap .loja-btn-comprar { flex: 1; }