/* loja.css — estilos da loja. Usa as variáveis do site (assets/style.css) quando existirem; senão, os padrões abaixo. */
:root {
  --lj-bg: var(--bg, #0e1013);
  --lj-panel: var(--panel, #171a1f);
  --lj-panel2: #1e2229;
  --lj-line: var(--line, #2a2f38);
  --lj-text: var(--text, #e8eaed);
  --lj-muted: var(--muted, #98a1ad);
  --lj-accent: var(--accent, #f5a300);
  --lj-accent-ink: #111;
  --lj-btn: var(--lj-accent);          /* cor dos botões (editável no painel) */
  --lj-btn-ink: var(--lj-accent-ink);  /* texto de dentro dos botões */
  --lj-btn-ghost-bg: transparent;
  --lj-ok: #2fb871;
  --lj-err: #e5484d;
  --lj-info: #4c9aff;
  --lj-radius: 10px;
}
* { box-sizing: border-box; }
.lj-body { margin: 0; background: var(--lj-bg); color: var(--lj-text); font: 16px/1.5 'Barlow', system-ui, sans-serif; }
.lj-body h1, .lj-body h2 { font-family: 'Barlow Condensed', 'Barlow', sans-serif; letter-spacing: .3px; line-height: 1.15; margin: 0 0 .6em; }
.lj-body h1 { font-size: clamp(1.8rem, 5vw, 2.6rem); }
.lj-body h2 { font-size: 1.5rem; margin-top: 1.6em; }
.lj-body a { color: var(--lj-accent); }
.lj-container { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 16px; }
.lj-main { padding-top: 24px; padding-bottom: 56px; min-height: 70vh; }
.lj-muted { color: var(--lj-muted); }
.lj-center { text-align: center; }

/* Cabeçalho */
.lj-header { background: var(--lj-panel); border-bottom: 1px solid var(--lj-line); position: sticky; top: 0; z-index: 20; }
.lj-header-in { display: flex; align-items: center; justify-content: space-between; min-height: 58px; flex-wrap: wrap; }
.lj-logo { font: 700 1.4rem 'Barlow Condensed', sans-serif; text-decoration: none; color: var(--lj-text) !important; text-transform: uppercase; }
.lj-logo span { color: var(--lj-accent); }
.lj-burger { display: none; background: none; border: 1px solid var(--lj-line); color: var(--lj-text); font-size: 1.3rem; border-radius: 8px; padding: 2px 10px; cursor: pointer; }
.lj-nav { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.lj-nav a { text-decoration: none; color: var(--lj-text); font-weight: 500; }
.lj-nav a.lj-muted { color: var(--lj-muted); font-size: .9rem; }
.lj-subnav { background: var(--lj-panel2); border-bottom: 1px solid var(--lj-line); }
.lj-subnav .lj-container { display: flex; gap: 18px; overflow-x: auto; padding-top: 8px; padding-bottom: 8px; }
.lj-subnav a { color: var(--lj-text); text-decoration: none; white-space: nowrap; }

/* Botões */
.lj-btn { display: inline-block; background: var(--lj-btn); color: var(--lj-btn-ink) !important; border: 2px solid var(--lj-btn); border-radius: 8px; padding: 10px 20px; font: 600 1rem 'Barlow', sans-serif; text-decoration: none; cursor: pointer; line-height: 1.2; }
.lj-btn:hover { filter: brightness(1.08); }
.lj-btn-sm { padding: 6px 12px; font-size: .9rem; }
.lj-btn-ghost { background: var(--lj-btn-ghost-bg); color: var(--lj-text) !important; border-color: var(--lj-line); }
.lj-btn-danger { background: var(--lj-err); border-color: var(--lj-err); color: #fff !important; }

/* Cards, formulários */
.lj-card { background: var(--lj-panel); border: 1px solid var(--lj-line); border-radius: var(--lj-radius); padding: 22px; margin-bottom: 20px; }
.lj-form-card { max-width: 480px; margin: 0 auto 20px; }
.lj-form { display: grid; gap: 14px; margin: 16px 0; }
.lj-form label { display: grid; gap: 6px; font-weight: 500; }
.lj-body input:not([type=checkbox]):not([type=file]), .lj-body select { width: 100%; background: var(--lj-bg); color: var(--lj-text); border: 1px solid var(--lj-line); border-radius: 8px; padding: 10px 12px; font: inherit; }
.lj-body input:focus, .lj-body select:focus { outline: 2px solid var(--lj-accent); outline-offset: 1px; }
.lj-form label.lj-check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; }
.lj-check input { margin-top: 5px; }
.lj-alert { padding: 12px 14px; border-radius: 8px; margin-bottom: 14px; border: 1px solid; }
.lj-alert-ok { background: rgba(47,184,113,.12); border-color: var(--lj-ok); }
.lj-alert-erro { background: rgba(229,72,77,.12); border-color: var(--lj-err); }
.lj-alert-info { background: rgba(76,154,255,.12); border-color: var(--lj-info); }

/* Home */
.lj-hero { text-align: center; padding: 28px 0 12px; }
.lj-hero p { color: var(--lj-muted); font-size: 1.15rem; margin: 0 0 20px; }
.lj-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.lj-steps { list-style: none; counter-reset: s; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.lj-steps li { counter-increment: s; background: var(--lj-panel); border: 1px solid var(--lj-line); border-radius: var(--lj-radius); padding: 16px; display: grid; gap: 4px; }
.lj-steps li::before { content: counter(s); font: 700 1.6rem 'Barlow Condensed', sans-serif; color: var(--lj-accent); }
.lj-steps span { color: var(--lj-muted); font-size: .95rem; }
.lj-brands { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.lj-brand { background: var(--lj-panel); border: 1px solid var(--lj-line); border-radius: var(--lj-radius); padding: 16px; text-decoration: none; color: var(--lj-text) !important; display: grid; gap: 2px; }
a.lj-brand:hover { border-color: var(--lj-accent); }
.lj-brand b { font: 700 1.2rem 'Barlow Condensed', sans-serif; }
.lj-brand span { color: var(--lj-muted); font-size: .9rem; }

/* Catálogo */
.lj-filter { display: grid; gap: 10px; grid-template-columns: 1fr; margin-bottom: 14px; }
@media (min-width: 760px) { .lj-filter { grid-template-columns: 2fr 1fr 1fr 110px auto; } }
.lj-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 16px; }
.lj-chips a { background: var(--lj-panel); border: 1px solid var(--lj-line); border-radius: 999px; padding: 4px 14px; text-decoration: none; color: var(--lj-text); font-size: .92rem; }
.lj-list { display: grid; gap: 10px; }
.lj-item { background: var(--lj-panel); border: 1px solid var(--lj-line); border-radius: var(--lj-radius); padding: 14px 16px; display: flex; gap: 14px; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.lj-item-info { display: grid; gap: 2px; min-width: 0; flex: 1 1 260px; }
.lj-item-info a { color: var(--lj-text); text-decoration: none; }
.lj-item-act { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.lj-item-act form { margin: 0; }
.lj-price { font: 700 1.2rem 'Barlow Condensed', sans-serif; color: var(--lj-accent); }
.lj-price-lg { font-size: 2rem; margin: 18px 0 8px; }
.lj-badge { background: rgba(47,184,113,.18); color: var(--lj-ok); border: 1px solid var(--lj-ok); border-radius: 999px; padding: 2px 10px; font-size: .8rem; font-weight: 600; margin-right: 6px; }
.lj-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 8px 0 14px; }
.lj-actions form { margin: 0; }
.lj-total { font-size: 1.3rem; margin: 18px 0; }
.lj-dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 14px 0; }
.lj-dl dt { color: var(--lj-muted); } .lj-dl dd { margin: 0; }
.lj-pager { display: flex; gap: 6px; margin: 20px 0; flex-wrap: wrap; }
.lj-pager a { border: 1px solid var(--lj-line); border-radius: 6px; padding: 4px 12px; text-decoration: none; color: var(--lj-text); }
.lj-pager a.on { background: var(--lj-accent); color: var(--lj-accent-ink); border-color: var(--lj-accent); }

/* Admin */
.lj-stats { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin-bottom: 10px; }
.lj-stat { background: var(--lj-panel); border: 1px solid var(--lj-line); border-radius: var(--lj-radius); padding: 16px; display: grid; gap: 2px; }
.lj-stat span, .lj-stat small { color: var(--lj-muted); } .lj-stat b { font: 700 1.8rem 'Barlow Condensed', sans-serif; }
.lj-table-wrap { overflow-x: auto; border: 1px solid var(--lj-line); border-radius: var(--lj-radius); }
.lj-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.lj-table th, .lj-table td { padding: 10px 12px; border-bottom: 1px solid var(--lj-line); text-align: left; vertical-align: top; }
.lj-table th { background: var(--lj-panel2); font-weight: 600; font-size: .9rem; }
.lj-table .lj-wide { min-width: 280px; }
.lj-inline { display: inline-flex; gap: 6px; margin: 0 4px 4px 0; }
.lj-acts { white-space: nowrap; }
.lj-st { border-radius: 999px; padding: 2px 10px; font-size: .8rem; font-weight: 600; border: 1px solid var(--lj-line); }
.lj-st-approved { color: var(--lj-ok); border-color: var(--lj-ok); }
.lj-st-pending { color: var(--lj-accent); border-color: var(--lj-accent); }
.lj-st-rejected, .lj-st-cancelled, .lj-st-refunded { color: var(--lj-err); border-color: var(--lj-err); }
.lj-revisar { display: grid; gap: 8px; grid-template-columns: 1fr; padding: 12px 0; border-top: 1px solid var(--lj-line); }
@media (min-width: 900px) { .lj-revisar { grid-template-columns: 1.4fr 160px 1.4fr auto; align-items: center; } }
.lj-log { background: var(--lj-bg); border: 1px solid var(--lj-line); border-radius: 8px; padding: 12px; max-height: 360px; overflow: auto; font-size: .85rem; white-space: pre-wrap; }
.lj-legal h2 { font-size: 1.25rem; }

/* Planos / assinatura */
.lj-plans { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin: 18px 0; }
.lj-plan { background: var(--lj-panel); border: 1px solid var(--lj-line); border-radius: var(--lj-radius); padding: 20px; display: grid; gap: 8px; align-content: start; }
.lj-plan-nome { font: 700 1.3rem 'Barlow Condensed', sans-serif; }
.lj-plan-preco { font: 700 2rem 'Barlow Condensed', sans-serif; color: var(--lj-accent); }
.lj-plan-desc { margin: 0; font-size: .95rem; }
.lj-plan form { margin: 8px 0 0; }
.lj-offer { display: grid; gap: 6px; margin: 16px 0; }
.lj-list-check { margin: 10px 0; padding-left: 20px; display: grid; gap: 6px; }
.lj-view { display: grid; gap: 12px; }

/* Rodapé */
.lj-footer { border-top: 1px solid var(--lj-line); padding: 22px 0; color: var(--lj-muted); font-size: .9rem; text-align: center; }
.lj-footer a { color: var(--lj-muted); }

/* Mobile */
@media (max-width: 720px) {
  .lj-burger { display: block; }
  .lj-nav { display: none; width: 100%; flex-direction: column; align-items: flex-start; gap: 12px; padding: 12px 0 16px; }
  .lj-nav.open { display: flex; }
  .lj-item-act { width: 100%; }
}

/* Gráfico de acessos (painel) */
.lj-chart { display: flex; align-items: flex-end; gap: 3px; height: 140px; margin: 10px 0 4px; }
.lj-bar { flex: 1 1 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; }
.lj-bar i { display: block; width: 100%; background: var(--lj-accent); border-radius: 3px 3px 0 0; min-height: 2px; }
.lj-bar span { font-size: .65rem; color: var(--lj-muted); margin-top: 4px; }
.lj-two { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .lj-two { grid-template-columns: 1fr 1fr; } }
.lj-grid2 { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .lj-grid2 { grid-template-columns: 1fr 1fr; } }
.lj-full { grid-column: 1 / -1; }
.lj-colors { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .lj-colors { grid-template-columns: 1fr 1fr; } }
.lj-color { display: grid; gap: 4px; font-size: .9rem; }
.lj-color-row { display: flex; gap: 8px; align-items: center; }
.lj-color-row input[type=color] { width: 46px; height: 36px; padding: 2px; background: none; border: 1px solid var(--lj-line); border-radius: 8px; }
.lj-color-row input[type=text] { flex: 1; }
.lj-form .lj-grid2 label, .lj-form .lj-full { display: grid; gap: 6px; font-weight: 500; }
.lj-chips a.on { background: var(--lj-accent); color: var(--lj-accent-ink); border-color: var(--lj-accent); }