/* ============================================================================
   shop-jota.css — Loja EasyGameOT · Versão B "Heráldica na coluna"
   Camada de APRESENTAÇÃO. Carregada por system/pages/shop.view.php.
   Tokens jOTa escopados em .jota-shop. BEM. Sem dependências externas.
   Arte (brasões, ícones, gema, selo) é SVG inline gerado no shop-jota.js / .php.
   ============================================================================ */

.jota-shop{
  --perg-1:#e9dcbf; --perg-2:#e2d2ac; --perg-3:#d6c396;
  --couro-1:#3a2c1e; --couro-2:#2a1f14; --couro-3:#1b130b;
  --tinta-1:#2b2013; --tinta-2:#5c4a30; --tinta-3:#8a7752;
  --ouro-1:#b58a35; --ouro-2:#d8b25a; --ouro-3:#8a6821;
  --jc:#7a4bb0; --jc-2:#a074d6;
  --voc-knight:#9c4a3c; --voc-paladin:#6f7a37; --voc-sorcerer:#7a4a86; --voc-druid:#3a6f86;
  --foco:#2f6fb0; --ok:#4a7a3a; --erro:#9c3a3a;
  --serif:Georgia,'Times New Roman',serif;
  --sans:system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --voc:var(--ouro-1);
  --sombra-card:0 1px 2px rgba(27,19,11,.20),0 6px 16px rgba(27,19,11,.10);

  max-width:100%;
  min-width:0;
  margin:0 auto;
  color:var(--tinta-1);
  font-family:var(--sans);
  font-size:14px;
  line-height:1.45;
}
.jota-shop *{box-sizing:border-box}
.jota-shop a{color:var(--ouro-3);text-decoration:none}
.jota-shop a:hover{text-decoration:underline}

/* baseline (sem-JS) x app (com-JS), sem flash */
.jota-shop__app{display:none}
.jota-shop.is-js .jota-shop__app{display:block}
.jota-shop.is-js .jota-shop__baseline{display:none}

/* ---- Topbar: marca (brasão) + saldo ---- */
.jota-shop__topbar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  background:linear-gradient(180deg,var(--couro-1),var(--couro-2));
  border:1px solid #000;border-bottom:2px solid var(--ouro-3);
  border-radius:11px;padding:11px 16px;margin:4px 0 14px;position:relative;
}
.jota-shop__brand{display:flex;align-items:center;gap:11px}
.jota-shop__brand-crest{width:30px;height:33px;flex:none;filter:drop-shadow(0 2px 2px rgba(0,0,0,.4))}
.jota-shop__title{font-family:var(--serif);font-size:20px;font-weight:700;color:var(--perg-1);letter-spacing:.4px;line-height:1}
.jota-shop__subtitle{font-size:10px;color:var(--ouro-2);letter-spacing:2.5px;text-transform:uppercase;margin-top:2px}
.jota-shop__balance{
  display:flex;align-items:center;gap:8px;
  background:var(--couro-3);border:1px solid var(--ouro-3);border-radius:22px;
  padding:7px 15px;color:var(--perg-1);font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums;
}
.jota-shop__balance small{color:var(--tinta-3);font-weight:400}
.jota-shop__balance a{color:var(--ouro-2)}

/* gema Jota Coins */
.jota-shop__gem{width:14px;height:14px;flex:0 0 auto;filter:drop-shadow(0 0 2px rgba(160,116,214,.55))}
.jota-shop__gem--lg{width:16px;height:16px}

/* ---- Barra de personagem (chip) ---- */
.jota-shop__charbar{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:var(--perg-3);border:1px solid var(--tinta-3);border-radius:10px;
  padding:8px 14px;margin:0 0 14px;color:var(--tinta-1);font-size:13px;
}
.jota-shop__charbar label{font-weight:700}
.jota-shop__charbar select{
  font-family:var(--sans);font-size:13px;color:var(--tinta-1);
  background:var(--perg-1);border:1px solid var(--tinta-2);border-radius:7px;padding:6px 9px;
}
.jota-shop__charbar-hint{color:var(--tinta-2);font-size:12px}

/* ---- Flash ---- */
.jota-shop__flash{padding:11px 15px;border-radius:9px;margin:0 0 14px;border:1px solid;font-size:13.5px}
.jota-shop__flash--ok{background:#e4eed7;border-color:var(--ok);color:#2f4a20}
.jota-shop__flash--error{background:#f2dede;border-color:var(--erro);color:#6d2020}

/* ============================================================================
   Nível 1 — categorias (abas com ícone, sublinhado dourado)
   ============================================================================ */
/* Barra de categorias: quebra em linhas e CENTRALIZADA (sem barra de rolagem,
   sem vácuo à direita). Abas em pílula delicada; a ATIVA muda de cor (dourado).
   NOTA: a especificidade elevada (.jota-shop .jota-shop__nav .jota-shop__tab)
   é intencional — vence a regra global do tema que pinta TODO <button> de
   dourado (jota.css: `.content-box button:not(.btn)`), garantindo que <button>
   (categorias) e <a> ("Minhas compras") fiquem visualmente IGUAIS. */
.jota-shop__nav{
  display:flex;flex-wrap:wrap;justify-content:center;gap:6px;
  min-width:0;max-width:100%;margin:0 0 14px;
}
.jota-shop .jota-shop__nav .jota-shop__tab{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;
  font-family:var(--sans);font-size:12.5px;font-weight:600;letter-spacing:.2px;text-transform:none;
  color:var(--tinta-2);
  background:linear-gradient(180deg,var(--perg-1),var(--perg-2));
  border:1px solid var(--perg-3);border-radius:999px;
  padding:7px 14px;cursor:pointer;white-space:nowrap;text-decoration:none;
  box-shadow:none;transition:background .14s,color .14s,border-color .14s,box-shadow .14s;
}
.jota-shop .jota-shop__nav .jota-shop__tab:hover{
  color:var(--tinta-1);border-color:var(--tinta-3);filter:none;text-decoration:none;
  background:linear-gradient(180deg,var(--perg-1),var(--perg-3));
}
.jota-shop__tab-ico{width:15px;height:15px;flex:none;opacity:.7}
/* "Minhas compras": ação secundária (ghost), separada das categorias */
.jota-shop .jota-shop__nav .jota-shop__tab--history{
  background:transparent;border-color:transparent;color:var(--tinta-3);box-shadow:none;
}
.jota-shop .jota-shop__nav .jota-shop__tab--history:hover{
  background:rgba(120,92,40,.06);border-color:var(--perg-3);color:var(--tinta-1);
}
/* Aba ATIVA (categoria atual ou "Minhas compras" selecionada) → dourado */
.jota-shop .jota-shop__nav .jota-shop__tab[aria-selected="true"],
.jota-shop .jota-shop__nav .jota-shop__tab.is-active{
  color:#3a2b0c;
  background:linear-gradient(180deg,var(--ouro-2),var(--ouro-1));
  border-color:var(--ouro-3);
  box-shadow:0 1px 3px rgba(27,19,11,.25),inset 0 1px 0 rgba(255,255,255,.28);
}
.jota-shop .jota-shop__nav .jota-shop__tab[aria-selected="true"] .jota-shop__tab-ico,
.jota-shop .jota-shop__nav .jota-shop__tab.is-active .jota-shop__tab-ico{opacity:1}

/* ============================================================================
   Nível 2 — vocação (BRASÕES heráldicos)
   ============================================================================ */
.jota-shop__subnav--voc{
  display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:14px 0 2px;
}
/* especificidade elevada (.jota-shop .jota-shop__subnav--voc .jota-shop__voc)
   p/ vencer o dourado global do tema — mesma razão da nota na barra de abas. */
.jota-shop .jota-shop__subnav--voc .jota-shop__voc{
  position:relative;cursor:pointer;text-align:center;font-family:var(--sans);
  background:linear-gradient(180deg,var(--perg-1),var(--perg-2));
  border:1.5px solid #c4b184;border-radius:14px;padding:16px 8px 13px;box-shadow:none;
  display:flex;flex-direction:column;align-items:center;gap:7px;
  transition:transform .18s,box-shadow .18s,border-color .18s;
}
.jota-shop .jota-shop__subnav--voc .jota-shop__voc:hover{
  transform:translateY(-3px);box-shadow:0 10px 22px rgba(27,19,11,.16);border-color:#b7a273;filter:none;
}
.jota-shop__escudo{width:66px;height:72px;filter:drop-shadow(0 3px 4px rgba(27,19,11,.25))}
.jota-shop__voc-name{font-family:var(--serif);font-size:1.05rem;font-weight:700;letter-spacing:.5px;color:var(--tinta-1);line-height:1}
.jota-shop__voc-tag{font-size:9.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--tinta-3)}
.jota-shop .jota-shop__subnav--voc .jota-shop__voc[aria-selected="true"]{
  border-color:var(--voc);box-shadow:0 0 0 2px var(--voc) inset,0 8px 20px rgba(27,19,11,.16);
}
.jota-shop__voc[aria-selected="true"] .jota-shop__voc-name{color:var(--voc)}
.jota-shop__voc[aria-selected="true"] .jota-shop__voc-tag{color:var(--voc);font-weight:700}
/* selo de cera ao selecionar */
.jota-shop__seal{position:absolute;top:8px;right:8px;width:23px;height:23px;opacity:0;transform:scale(.6);transition:.2s}
.jota-shop__voc[aria-selected="true"] .jota-shop__seal{opacity:1;transform:scale(1)}

/* ============================================================================
   Nível 3 — conjunto (chips: nome small-caps + selo de level)
   ============================================================================ */
.jota-shop__subnav--set{
  display:flex;align-items:stretch;gap:10px;flex-wrap:wrap;
  margin:16px 0 4px;padding-top:14px;border-top:1px dashed #c9b78b;
}
.jota-shop .jota-shop__subnav--set .jota-shop__set-tab{
  flex:1 1 165px;min-width:140px;cursor:pointer;font-family:var(--sans);
  background:linear-gradient(180deg,var(--perg-1),var(--perg-2));border:1.5px solid #cbb98d;border-radius:10px;
  padding:11px 14px;display:flex;flex-direction:column;gap:2px;box-shadow:none;transition:.15s;
}
.jota-shop .jota-shop__subnav--set .jota-shop__set-tab:hover{background:linear-gradient(180deg,var(--perg-1),var(--perg-3));filter:none}
.jota-shop__set-tab-name{
  font-family:var(--serif);font-variant:small-caps;font-size:1.1rem;font-weight:600;letter-spacing:.5px;color:var(--tinta-2);
}
.jota-shop__set-tab-lvl{font-size:10px;letter-spacing:1.2px;text-transform:uppercase;color:var(--tinta-3)}
.jota-shop .jota-shop__subnav--set .jota-shop__set-tab[aria-selected="true"]{border-color:var(--voc);background:var(--perg-1);box-shadow:inset 0 -3px 0 var(--voc)}
.jota-shop__set-tab[aria-selected="true"] .jota-shop__set-tab-name{color:var(--tinta-1)}
.jota-shop__set-tab[aria-selected="true"] .jota-shop__set-tab-lvl{color:var(--voc);font-weight:700}

/* seção "Destaques" (aba Ofertas) */
.jota-shop__heading{
  font-family:var(--serif);font-weight:700;font-size:1.25rem;color:var(--tinta-1);
  margin:14px 0 2px;display:flex;align-items:baseline;gap:10px;
}
.jota-shop__heading::before{content:"◆";color:var(--ouro-1);font-size:.7em}
.jota-shop__heading small{font-weight:400;font-size:.62em;color:var(--tinta-2);font-family:var(--sans)}

/* ============================================================================
   Grade de cards
   ============================================================================ */
.jota-shop__grid{
  display:grid;gap:13px;min-width:0;padding:16px 0 2px;
  grid-template-columns:repeat(auto-fill,minmax(min(210px,100%),1fr));
}
.jota-shop__card{
  display:flex;flex-direction:column;position:relative;
  background:linear-gradient(180deg,var(--perg-1),var(--perg-2));
  border:1px solid #c9b78b;border-radius:10px;overflow:hidden;box-shadow:var(--sombra-card);
}
.jota-shop__card::before{ /* faixa de cor no topo (vocação/tier) */
  content:"";display:block;height:4px;background:var(--accent,var(--ouro-2));
}
.jota-shop__thumb{
  align-self:center;width:72px;height:72px;margin:14px 0 6px;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 35%,#f6efd9,var(--perg-3));
  border:1px solid #b9a375;border-radius:8px;overflow:hidden;box-shadow:inset 0 0 10px rgba(120,92,40,.22);
}
.jota-shop__spr{max-height:52px;max-width:88%;image-rendering:pixelated;transform:scale(1.35)}
.jota-shop__noimg{color:var(--tinta-3);font-size:26px}

.jota-shop__card>.jota-shop__name,
.jota-shop__card>.jota-shop__meta,
.jota-shop__card>.jota-shop__setline,
.jota-shop__card>.jota-shop__desc{padding-left:14px;padding-right:14px}
.jota-shop__name{
  font-family:var(--serif);font-weight:700;font-size:1.02rem;color:var(--tinta-1);line-height:1.18;margin:0 0 3px;
  min-height:2.3em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.jota-shop__meta{
  font-size:10.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--tinta-3);margin:0 0 6px;min-height:1.1em;
}
.jota-shop__setline{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:0 0 7px;min-height:20px}
.jota-shop__setname{
  font-family:var(--serif);font-variant:small-caps;font-weight:600;font-size:.95rem;letter-spacing:.4px;color:var(--tinta-1);
}
.jota-shop__lvl{
  font-size:9.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--tinta-3);
  background:var(--perg-3);border-radius:10px;padding:1px 8px;
}
.jota-shop__tag{
  font-size:9.5px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;border:1px solid;border-radius:10px;padding:1px 8px;
}
.jota-shop__tag--item{color:#7a4a2a;border-color:#a9814f}
.jota-shop__tag--container{color:#2f5a72;border-color:#4f7f9c}
.jota-shop__tag--pacc{color:#5a3a86;border-color:var(--jc)}

.jota-shop__desc{
  color:var(--tinta-2);font-size:11.8px;line-height:1.35;margin:0 0 10px;flex:1 0 auto;
  min-height:2.6em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.jota-shop__rodape,.jota-shop__buy{padding:0}
.jota-shop__foot{
  margin-top:auto;padding:9px 14px 12px;display:flex;align-items:center;justify-content:space-between;gap:8px;
}
.jota-shop__price{display:flex;align-items:center;gap:5px;font-weight:700;font-size:.98rem;font-variant-numeric:tabular-nums}
.jota-shop__price small{font-weight:600;font-size:.72em;color:var(--jc)}

.jota-shop__btn{
  display:inline-block;text-align:center;font-family:var(--sans);font-weight:700;font-size:.82rem;cursor:pointer;
  color:#fff;background:linear-gradient(180deg,#5f7a3c,#456028);border:1px solid #385020;border-radius:7px;
  padding:8px 15px;text-decoration:none;text-shadow:0 1px 0 rgba(0,0,0,.25);transition:filter .12s;white-space:nowrap;
}
.jota-shop__btn:hover{filter:brightness(1.08);text-decoration:none}
.jota-shop__btn:active{transform:translateY(1px)}
.jota-shop__btn--login{background:linear-gradient(180deg,var(--ouro-1),var(--ouro-3));border-color:#6a5018;color:#231a08;text-shadow:none}
.jota-shop__btn.is-disabled,.jota-shop__btn:disabled{
  background:#b7ab90;border-color:#a89c80;color:#efe8d6;cursor:not-allowed;filter:none;text-shadow:none;
}

/* selo "Destaque" (cards da aba Ofertas) */
.jota-shop__badge{
  position:absolute;top:11px;left:11px;z-index:2;font-size:9.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
  color:#fff;background:linear-gradient(180deg,#b06a2a,#8a4f1c);border:1px solid #6a3d14;border-radius:5px;padding:3px 8px;
  box-shadow:0 2px 5px rgba(0,0,0,.25);
}

/* Estado vazio */
.jota-shop__empty{padding:26px;text-align:center;color:var(--tinta-2);border:1px dashed var(--tinta-3);border-radius:11px;background:var(--perg-2)}

/* ---- Tabela de histórico ---- */
.jota-shop__table{width:100%;border-collapse:collapse;font-size:13px;color:var(--tinta-1);background:var(--perg-2);
  border:1px solid #c9b78b;border-radius:10px;overflow:hidden;margin:14px 0}
.jota-shop__table th,.jota-shop__table td{text-align:left;padding:10px 13px;border-bottom:1px solid var(--perg-3)}
.jota-shop__table th{font-family:var(--serif);color:var(--ouro-2);background:var(--couro-2);font-size:11px;text-transform:uppercase;letter-spacing:1px}
.jota-shop__table tbody tr:nth-child(even){background:rgba(120,92,40,.05)}
.jota-shop__state{padding:2px 9px;border-radius:10px;font-size:11px;font-weight:700;border:1px solid}
.jota-shop__state--wait{color:#7a5a10;border-color:var(--ouro-1);background:#f0e6c8}
.jota-shop__state--realized{color:#2f4a20;border-color:var(--ok);background:#e0edd2}
.jota-shop__state--refunded{color:#6d2020;border-color:var(--erro);background:#f2dede}

/* ---- Nota / baseline ---- */
.jota-shop__note{margin:16px 0 4px;padding:11px 14px;font-size:12px;color:var(--tinta-2);background:var(--perg-2);border:1px solid var(--tinta-3);border-radius:9px}
.jota-shop__note b{color:var(--tinta-1)}
.jota-shop__group{margin:0 0 18px}
.jota-shop__group-title{font-family:var(--serif);font-weight:700;font-size:15px;color:var(--tinta-1);margin:0 0 9px;padding-bottom:5px;border-bottom:1px solid var(--tinta-3)}
.jota-shop__nojs{margin:0 0 12px;padding:9px 13px;border-radius:8px;background:var(--perg-3);border:1px solid var(--tinta-3);color:var(--tinta-2);font-size:12.5px}

/* ============================================================================
   Portão de login (loja só para contas)
   ============================================================================ */
.jota-shop__gate{
  max-width:520px;margin:24px auto 8px;text-align:center;
  background:linear-gradient(180deg,var(--perg-1),var(--perg-2));
  border:1px solid var(--tinta-3);border-radius:14px;padding:34px 26px;
}
.jota-shop__gate-icon{font-size:40px;line-height:1;margin-bottom:8px}
.jota-shop__gate h2{font-family:var(--serif);font-size:20px;color:var(--tinta-1);margin:0 0 8px}
.jota-shop__gate p{color:var(--tinta-2);font-size:13.5px;margin:0 0 18px}
.jota-shop__gate-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.jota-shop__gate-actions .jota-shop__btn{padding:9px 22px}

/* ============================================================================
   Modal "Jota Coins insuficientes"
   ============================================================================ */
.jota-shop__modal{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px}
.jota-shop__modal[hidden]{display:none}
.jota-shop__modal-backdrop{position:absolute;inset:0;background:rgba(12,8,3,.62)}
.jota-shop__modal-card{
  position:relative;max-width:400px;width:100%;text-align:center;
  background:linear-gradient(180deg,var(--perg-1),var(--perg-2));
  border:1px solid var(--ouro-3);border-radius:14px;padding:24px 22px;box-shadow:0 14px 44px rgba(0,0,0,.55);
}
.jota-shop__modal-icon{margin:0 auto 8px;line-height:0}
.jota-shop__modal-icon .jota-shop__gem{width:34px;height:34px}
.jota-shop__modal-card h3{font-family:var(--serif);font-size:18px;color:var(--tinta-1);margin:0 0 8px}
.jota-shop__modal-msg{color:var(--tinta-2);font-size:13px;line-height:1.5;margin:0 0 18px}
.jota-shop__modal-msg b{color:var(--tinta-1)}
.jota-shop__modal-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.jota-shop__modal-actions .jota-shop__btn{padding:10px 18px}

/* ============================================================================
   Acessibilidade / responsivo
   ============================================================================ */
.jota-shop :focus-visible{outline:3px solid var(--foco);outline-offset:2px;border-radius:6px}
@media (prefers-reduced-motion:reduce){.jota-shop *{transition:none!important}}
@media (max-width:640px){
  .jota-shop__subnav--voc{grid-template-columns:repeat(2,1fr);gap:10px}
  .jota-shop__set-tab{flex:1 1 100%}
  .jota-shop__grid{grid-template-columns:repeat(auto-fill,minmax(min(150px,100%),1fr))}
  .jota-shop__title{font-size:18px}
}
@media (max-width:400px){
  .jota-shop__grid{grid-template-columns:1fr}
}

/* ============================================================================
   Confirmação de compra (?action=confirm) + Recibo (?action=success)
   Acrescentado em 2026-08-04 — o bloco acima (vitrine) permanece intocado.
   ============================================================================ */
.jota-shop__crumb{margin:0 0 12px;font-size:12.5px;color:var(--tinta-2)}
.jota-shop__crumb span{margin:0 6px;color:var(--tinta-3)}

.jota-shop__confirm{
  display:grid;grid-template-columns:minmax(260px,1fr) minmax(320px,1.25fr);
  gap:16px;align-items:start;margin:0 0 16px;
}

/* ---- coluna do item (mesma linguagem do card da vitrine) ---- */
.jota-shop__confirm-item{
  position:relative;text-align:center;
  background:linear-gradient(180deg,var(--perg-1),var(--perg-2));
  border:1px solid #c9b78b;border-radius:10px;overflow:hidden;box-shadow:var(--sombra-card);
  padding:0 18px 18px;
}
.jota-shop__confirm-item::before{content:"";display:block;height:4px;margin:0 -18px 14px;background:var(--accent,var(--ouro-2))}
.jota-shop__thumb--lg{width:96px;height:96px;margin:6px auto 10px}
.jota-shop__thumb--lg .jota-shop__spr{max-height:68px;transform:scale(1.6)}
.jota-shop__thumb--lg .jota-shop__noimg{font-size:38px}
.jota-shop__confirm-name{
  font-family:var(--serif);font-weight:700;font-size:1.3rem;color:var(--tinta-1);
  line-height:1.2;margin:0 0 4px;
}
.jota-shop__setline--center{justify-content:center}
.jota-shop__voctag{
  font-size:9.5px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;
  color:#fff;background:var(--voc,var(--ouro-1));border:1px solid rgba(0,0,0,.25);
  border-radius:10px;padding:1px 8px;text-shadow:0 1px 0 rgba(0,0,0,.25);
}
.jota-shop__confirm-desc{color:var(--tinta-2);font-size:12.5px;line-height:1.45;margin:8px 0 0}

/* ---- painel de confirmação ---- */
.jota-shop__confirm-panel{
  background:linear-gradient(180deg,var(--perg-1),var(--perg-2));
  border:1px solid #c9b78b;border-radius:10px;box-shadow:var(--sombra-card);
  padding:16px 18px 18px;
}
.jota-shop__confirm-title{
  font-family:var(--serif);font-weight:700;font-size:1.15rem;color:var(--tinta-1);
  margin:0 0 8px;padding-bottom:7px;border-bottom:1px solid var(--tinta-3);
}
.jota-shop__confirm-notice{
  margin:0 0 12px;padding:9px 12px;font-size:12.5px;line-height:1.45;color:var(--tinta-1);
  background:var(--perg-3);border:1px solid var(--tinta-3);border-radius:8px;
}

.jota-shop__charpick{margin:0 0 10px}
.jota-shop__charpick label{display:block;font-weight:700;font-size:13px;color:var(--tinta-1);margin:0 0 5px}
.jota-shop__req{color:var(--erro)}
.jota-shop__charpick select{
  width:100%;font-family:var(--sans);font-size:13.5px;color:var(--tinta-1);
  background:var(--perg-1);border:1px solid var(--tinta-2);border-radius:7px;padding:9px 10px;
}
.jota-shop__charstatus{margin:7px 0 0;font-size:12.5px;font-weight:600;padding:6px 10px;border-radius:7px;border:1px solid}
.jota-shop__charstatus.is-online{color:#2f4a20;border-color:var(--ok);background:#e0edd2}
.jota-shop__charstatus.is-offline{color:var(--tinta-2);border-color:var(--tinta-3);background:var(--perg-2)}
.jota-shop__charstatus.is-online::before{content:"● ";color:var(--ok)}
.jota-shop__charstatus.is-offline::before{content:"○ "}

.jota-shop__warn{
  margin:7px 0 0;padding:8px 11px;font-size:12.5px;line-height:1.4;border-radius:7px;
  color:#6a5010;background:#f0e6c8;border:1px solid var(--ouro-1);
}
.jota-shop__warn--block{margin:0 0 10px}
.jota-shop__warn--error{margin:0 0 12px;color:#6d2020;background:#f2dede;border-color:var(--erro)}
.jota-shop__warn a{font-weight:700}

.jota-shop__deliverynote{
  margin:0 0 12px;padding:9px 12px;font-size:12px;line-height:1.45;color:var(--tinta-2);
  background:var(--perg-2);border:1px dashed var(--tinta-3);border-radius:8px;
}
.jota-shop__deliverynote b{color:var(--tinta-1)}
.jota-shop__deliverynote--center{text-align:center;margin:12px 0 14px}

/* ---- resumo (dl) ---- */
.jota-shop__summary{margin:0 0 12px;padding:0}
.jota-shop__summary>div{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:7px 2px;border-bottom:1px dashed #c9b78b;
}
.jota-shop__summary dt{font-size:12px;font-weight:600;letter-spacing:.3px;text-transform:uppercase;color:var(--tinta-3)}
.jota-shop__summary dd{margin:0;font-size:13.5px;font-weight:600;color:var(--tinta-1);text-align:right;font-variant-numeric:tabular-nums}
.jota-shop__summary dd.is-pending{color:var(--tinta-3);font-weight:400;font-style:italic}
.jota-shop__summary-price{display:inline-flex;align-items:center;gap:5px}
.jota-shop__summary-price small{font-weight:600;font-size:.75em;color:var(--jc)}
.jota-shop__summary-after{background:rgba(120,92,40,.06)}
.jota-shop__summary-after dt,.jota-shop__summary-after dd{font-weight:700;color:var(--tinta-1)}
.jota-shop__summary dd.is-negative{color:var(--erro)}

/* ---- ações ---- */
.jota-shop__confirm-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:4px}
.jota-shop__confirm-actions--center{justify-content:center}
/* estilo dos botões (--ghost incluído): "padrão canônico dourado" no fim do arquivo */

/* ---- recibo ---- */
.jota-shop__success{
  max-width:560px;margin:8px auto 16px;text-align:center;
  background:linear-gradient(180deg,var(--perg-1),var(--perg-2));
  border:1px solid #c9b78b;border-radius:12px;box-shadow:var(--sombra-card);
  padding:26px 24px 22px;
}
.jota-shop__success-seal{width:52px;height:52px;margin:0 auto 10px;filter:drop-shadow(0 2px 4px rgba(27,19,11,.3))}
.jota-shop__success-seal svg{width:100%;height:100%}
.jota-shop__success-title{font-family:var(--serif);font-weight:700;font-size:1.35rem;color:var(--tinta-1);margin:0 0 14px}
.jota-shop__success-item{display:flex;align-items:center;justify-content:center;gap:12px;margin:0 0 14px}
.jota-shop__success-item .jota-shop__thumb{margin:0;width:60px;height:60px}
.jota-shop__success-itemname{font-family:var(--serif);font-weight:700;font-size:1.05rem;color:var(--tinta-1);text-align:left}
.jota-shop__summary--receipt{text-align:left;margin:0 0 4px}

/* ---- responsivo ---- */
@media (max-width:720px){
  .jota-shop__confirm{grid-template-columns:1fr}
  .jota-shop__confirm-actions{flex-direction:column-reverse;align-items:stretch}
  .jota-shop__confirm-actions .jota-shop__btn{text-align:center}
}

/* ============================================================================
   Padrão canônico dos botões de ação da loja (2026-08-04, pedido do dono):
   o dourado do tema jota (jota.css `.content-box button:not(.btn)`) — Cinzel
   uppercase, gradiente gold, texto #2a1c08 — que já vestia os <button> (ex.:
   CONFIRMAR COMPRA) agora vale também para os botões-<a> (ex.: Comprar).
   Especificidade 0-2-1 de propósito: empata com a regra do tema e vence por
   ordem, e ganha de `.jota-shop a` (0-1-1) e `.jota-shop__btn` (0-1-0).
   ============================================================================ */
.jota-shop a.jota-shop__btn,
.jota-shop button.jota-shop__btn{
  font-family:"Cinzel",serif;font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  background:linear-gradient(180deg,var(--gold-lite),var(--gold) 55%,var(--gold-deep));color:#2a1c08;
  border:1px solid var(--stone);border-radius:3px;
  box-shadow:0 0 0 1px var(--gold-deep),0 2px 5px rgba(0,0,0,.4);
  padding:9px 18px;text-shadow:none;text-decoration:none;
}
.jota-shop a.jota-shop__btn:hover,
.jota-shop button.jota-shop__btn:hover{filter:brightness(1.09);text-decoration:none}
/* secundário (Voltar ao Shop): pergaminho, mesma tipografia */
.jota-shop a.jota-shop__btn--ghost{
  background:linear-gradient(180deg,var(--perg-1),var(--perg-2));color:var(--tinta-1);
  border:1px solid var(--tinta-2);box-shadow:0 1px 3px rgba(27,19,11,.18);
}
.jota-shop a.jota-shop__btn--ghost:hover{background:linear-gradient(180deg,var(--perg-1),var(--perg-3));filter:none}
/* desabilitado (saldo insuficiente / aguardando escolha do personagem) */
.jota-shop a.jota-shop__btn.is-disabled,
.jota-shop button.jota-shop__btn.is-disabled,
.jota-shop button.jota-shop__btn:disabled{
  background:#b7ab90;border-color:#a89c80;color:#efe8d6;box-shadow:none;
  cursor:not-allowed;filter:none;
}