/* ============================================================
   Arakna Store — folha de estilos autocontida (sem build/JS)
   Paleta base inspirada no tema brand da base Arakna.
   ============================================================ */

:root {
    --brand-50:#eef7ff; --brand-100:#d9edff; --brand-200:#b6ddff;
    --brand-300:#8cc6ff; --brand-400:#5a96f2; --brand-500:#2f6fed;
    --brand-600:#2455c9; --brand-700:#1d449f; --brand-800:#163375; --brand-900:#0f2457;
    --ink:#0f172a; --muted:#64748b; --line:#e2e8f0; --bg:#f8fafc; --card:#ffffff;
    --green:#16a34a; --red:#dc2626; --amber:#d97706;
    --radius:16px; --shadow:0 10px 30px -12px rgba(15,36,87,.18);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
       background:var(--bg); color:var(--ink); line-height:1.6; -webkit-font-smoothing:antialiased; }
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
h1,h2,h3,h4 { line-height:1.2; margin:0 0 .5rem; }
p { margin:0 0 1rem; }
.container{ width:100%; max-width:1180px; margin:0 auto; padding:0 20px; }
.section{ padding:56px 0; }
.muted{ color:var(--muted); }
.small{ font-size:.875rem; }
.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}.mt-4{margin-top:2rem}.mt-5{margin-top:3rem}
.mb-1{margin-bottom:.5rem}.mb-2{margin-bottom:1rem}.mb-3{margin-bottom:1.5rem}.mb-4{margin-bottom:2rem}
.center{text-align:center}
.text-big{font-size:clamp(1.8rem,4vw,3rem); font-weight:800; letter-spacing:-.02em}
.text-title{font-size:clamp(1.4rem,3vw,2.1rem); font-weight:800; letter-spacing:-.01em}
.lead{font-size:1.15rem; color:var(--muted)}
.grad-text{background:linear-gradient(90deg,var(--brand-600),var(--brand-400)); -webkit-background-clip:text; background-clip:text; color:transparent}

/* ---------- topbar / header ---------- */
.topbar{background:var(--brand-900); color:#cfe0ff; font-size:.8rem; padding:7px 0}
.topbar .container{display:flex; justify-content:space-between; gap:10px; align-items:center}
.topbar a{color:#fff; display:inline-flex; gap:5px; align-items:center}
header.site{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--line)}
.nav{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0}
.brand{font-weight:800; font-size:1.25rem; letter-spacing:-.02em; display:flex; align-items:center; gap:10px}
.brand .logo{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--brand-500),var(--brand-700));display:grid;place-items:center;color:#fff;font-weight:900}
.navlinks{display:flex; gap:22px; align-items:center}
.navlinks a{font-weight:600; font-size:.95rem; color:var(--ink); transition:color .15s}
.navlinks a:hover{color:var(--brand-600)}
.navright{display:flex; gap:10px; align-items:center}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font-weight:600; font-size:.9rem;
     padding:.55rem 1.1rem; border-radius:10px; border:1px solid transparent; cursor:pointer; transition:all .15s; line-height:1.4}
.btn:disabled{opacity:.55; cursor:not-allowed}
.btn-primary{background:var(--brand-600); color:#fff}
.btn-primary:hover{background:var(--brand-700)}
.btn-ghost{background:transparent; color:var(--ink)}
.btn-outline{border-color:var(--line); background:#fff; color:var(--ink)}
.btn-outline:hover{border-color:var(--brand-400); color:var(--brand-600)}
.btn-success{background:var(--green); color:#fff}
.btn-danger{background:var(--red); color:#fff}
.btn-white{background:#fff; color:var(--brand-700); border-color:transparent}
.btn-sm{padding:.4rem .8rem; font-size:.85rem}
.btn-block{width:100%}
.cart-badge{position:relative}
.cart-badge .n{position:absolute; top:-8px; right:-10px; background:var(--red); color:#fff; font-size:.7rem; min-width:18px; height:18px; border-radius:999px; display:grid; place-items:center; padding:0 4px; font-weight:700}

/* mobile menu toggle */
.menu-btn{display:none; background:none; border:none; font-size:1.6rem; cursor:pointer; color:var(--ink)}

/* ---------- hero ---------- */
.hero{background:linear-gradient(135deg,var(--brand-900) 0%,#123a8a 45%,#2455c9 100%); color:#fff; padding:84px 0; overflow:hidden; position:relative}
.hero h1{font-size:clamp(2rem,5vw,3.3rem); font-weight:800; letter-spacing:-.02em}
.hero p{color:#cfe0ff; font-size:1.15rem; max-width:560px}
.hero .grid{display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center}
.hero-badges{display:flex; gap:10px; flex-wrap:wrap; margin-top:24px}
.pill{background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.25); padding:.35rem .9rem; border-radius:999px; font-size:.82rem}
.hero-card{background:#fff; color:var(--ink); border-radius:var(--radius); padding:26px; box-shadow:0 30px 60px -20px rgba(0,0,0,.4)}
.hero-card h3{margin-bottom:14px}
.stat{display:flex; justify-content:space-between; border-top:1px solid var(--line); padding:10px 0}

/* ---------- grid & cards ---------- */
.grid-products{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:22px}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:24px}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:22px}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; transition:transform .15s, box-shadow .15s}
.card.click:hover{transform:translateY(-4px); box-shadow:var(--shadow)}
.card-body{padding:18px}
.card-img{aspect-ratio:16/10; background:linear-gradient(135deg,var(--brand-100),var(--brand-300)); display:grid; place-items:center; color:var(--brand-700); font-size:2.6rem}
.category{display:inline-flex; font-size:.75rem; font-weight:700; color:var(--brand-600); background:var(--brand-50); padding:.2rem .7rem; border-radius:999px; text-transform:uppercase; letter-spacing:.03em}
.price{font-weight:800; font-size:1.3rem; color:var(--ink)}
.price .old{text-decoration:line-through; color:var(--muted); font-weight:500; font-size:.95rem; margin-right:8px}
.row-between{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap}
.rating{color:var(--amber); font-weight:700}
.feat-list{list-style:none; padding:0; margin:0}
.feat-list li{padding:6px 0; padding-left:28px; position:relative; border-bottom:1px solid var(--line)}
.feat-list li:last-child{border:none}
.feat-list li:before{content:"✓"; position:absolute; left:0; color:var(--green); font-weight:800}

/* ---------- filter chips ---------- */
.chips{display:flex; gap:8px; flex-wrap:wrap; margin:18px 0}
.chip{border:1px solid var(--line); background:#fff; border-radius:999px; padding:.45rem 1rem; font-size:.9rem; font-weight:600; transition:all .15s}
.chip:hover{border-color:var(--brand-400)}
.chip.active{background:var(--brand-600); color:#fff; border-color:var(--brand-600)}

/* ---------- footer ---------- */
footer.site{background:var(--brand-900); color:#c7d6f5; margin-top:60px}
footer.site .cols{display:grid; grid-template-columns:repeat(4,1fr); gap:30px; padding:46px 0}
footer.site h4{color:#fff; margin-bottom:14px}
footer.site ul{list-style:none; padding:0; margin:0}
footer.site li{margin-bottom:9px}
footer.site a:hover{color:#fff}
.bottom{display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; padding:16px 0; border-top:1px solid rgba(255,255,255,.12); font-size:.85rem}

/* ---------- alerts / forms ---------- */
.alert{border-radius:12px; padding:14px 16px; margin-bottom:16px; font-size:.92rem; border:1px solid}
.alert-success{background:#f0fdf4; border-color:#bbf7d0; color:#166534}
.alert-error{background:#fef2f2; border-color:#fecaca; color:#991b1b}
.alert-info{background:var(--brand-50); border-color:var(--brand-200); color:var(--brand-700)}
.form-group{margin-bottom:16px}
.form-group label{display:block; font-weight:600; font-size:.9rem; margin-bottom:6px}
.input, .select, .textarea{width:100%; border:1px solid var(--line); border-radius:10px; padding:.7rem .9rem; font:inherit; color:var(--ink); background:#fff}
.input:focus,.select:focus,.textarea:focus{outline:none; border-color:var(--brand-400); box-shadow:0 0 0 3px var(--brand-100)}
.textarea{min-height:120px; resize:vertical}
.field-error{color:var(--red); font-size:.82rem; margin-top:4px}

/* ---------- auth / account ---------- */
.auth-wrap{max-width:460px; margin:40px auto; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:30px; box-shadow:var(--shadow)}
.split-layout{display:grid; grid-template-columns:240px 1fr; gap:28px; margin:34px 0}
.side-menu{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:14px; height:fit-content; position:sticky; top:90px}
.side-menu a{display:flex; align-items:center; gap:10px; padding:11px 14px; border-radius:10px; font-weight:600; font-size:.92rem; color:var(--ink)}
.side-menu a:hover{background:var(--brand-50); color:var(--brand-600)}
.side-menu a.active{background:var(--brand-600); color:#fff}

/* ---------- tables ---------- */
.table-wrap{overflow-x:auto; background:#fff; border:1px solid var(--line); border-radius:var(--radius)}
table.list{width:100%; border-collapse:collapse; min-width:640px}
table.list th{text-align:left; font-size:.75rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); padding:12px 16px; border-bottom:1px solid var(--line); background:#f8fafc}
table.list td{padding:14px 16px; border-bottom:1px solid var(--line); font-size:.92rem; vertical-align:middle}
table.list tr:last-child td{border:none}
tr.rowclick{cursor:pointer}
tr.rowclick:hover{background:#f8fafc}

/* ---------- badges ---------- */
.badge{display:inline-flex; align-items:center; padding:.18rem .7rem; border-radius:999px; font-size:.75rem; font-weight:700}
.badge-published,.badge-paid,.badge-done{background:#f0fdf4; color:#166534}
.badge-draft,.badge-pending,.badge-new,.badge-open{background:var(--brand-50); color:var(--brand-700)}
.badge-failed,.badge-closed,.badge-declined,.badge-cancelled{background:#fef2f2; color:#991b1b}
.badge-refunded{background:#fef3c7; color:#92400e}
.badge-answered{background:#eff6ff; color:#1d4ed8}

/* ---------- product detail ---------- */
.product-top{display:grid; grid-template-columns:1fr 1fr; gap:36px; align-items:start}
.buybox{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:24px; position:sticky; top:90px}
.dl-box{border:1px dashed var(--brand-300); background:var(--brand-50); border-radius:12px; padding:16px}
.spec-row{display:flex; justify-content:space-between; padding:9px 0; border-top:1px solid var(--line); font-size:.9rem}

/* ---------- chat / timeline ---------- */
.msg-bubble{padding:11px 15px; border-radius:14px; margin-bottom:10px; max-width:78%; font-size:.93rem}
.msg-user{margin-left:auto; background:var(--brand-600); color:#fff; border-bottom-right-radius:4px}
.msg-staff{margin-right:auto; background:#eef2ff; color:var(--ink); border-bottom-left-radius:4px}
.chat-thread{display:flex; flex-direction:column; gap:2px; max-height:520px; overflow-y:auto; padding:18px; background:#fff; border:1px solid var(--line); border-radius:var(--radius)}
.meta-time{font-size:.7rem; opacity:.7}

/* ---------- misc ---------- */
.empty{padding:40px; text-align:center; color:var(--muted)}
.divider{border:none; border-top:1px solid var(--line); margin:26px 0}
.notice{background:#fffbeb; border:1px solid #fde68a; color:#92400e; padding:12px 15px; border-radius:10px; font-size:.9rem}
.breadcrumb{display:flex; gap:8px; font-size:.9rem; color:var(--muted); margin:22px 0}
.breadcrumb a:hover{color:var(--brand-600)}
.icon-badge{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--brand-50);color:var(--brand-600);font-size:1.2rem;flex:none}

@media (max-width:900px){
    .hero .grid,.product-top{grid-template-columns:1fr}
    .grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}
    .split-layout{grid-template-columns:1fr}
    .side-menu{position:static}
    footer.site .cols{grid-template-columns:1fr 1fr}
    .navlinks{display:none}
    .menu-btn{display:block}
}
@media (max-width:640px){
    .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
    .nav .hide-m{display:none}
}

/* ---------- complementos Arakna Store ---------- */
/* menu mobile (aberto via .js-toggle) */
.nav-panel{display:none}
.mobile-panel{display:none; flex-direction:column; gap:6px; background:#fff; border-top:1px solid var(--line); padding:12px 20px}
.mobile-panel.open{display:flex}
.mobile-panel a{padding:10px 4px; font-weight:600; border-bottom:1px solid var(--line)}
.mobile-panel a:last-child{border:none}
.mobile-panel .actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:8px}

.dropdown{position:relative}
.dropdown-panel{position:absolute; right:0; top:calc(100% + 8px); min-width:200px; background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); padding:6px; z-index:60}
.dropdown-panel a{display:flex; align-items:center; gap:8px; padding:9px 12px; border-radius:8px; font-weight:600; font-size:.9rem}
.dropdown-panel a:hover{background:var(--brand-50); color:var(--brand-600)}
.dropdown-panel .sep{border-top:1px solid var(--line); margin:5px 0}

/* idiomas */
.lang-pills{display:flex; gap:4px}
.lang-pill{width:28px;height:22px;border-radius:6px;display:grid;place-items:center;font-size:.72rem;font-weight:800;color:#fff}
.lang-pill.on{outline:2px solid #fff; outline-offset:1px}
.flag-pt{background:#046a38}.flag-en{background:#2f6fed}.flag-es{background:#dc2626}

/* passo a passo */
.how-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:26px}
.step{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:20px}
.step .num{width:34px;height:34px;border-radius:10px;background:var(--brand-600);color:#fff;font-weight:800;display:grid;place-items:center;margin-bottom:12px}
@media (max-width:760px){.how-grid{grid-template-columns:1fr 1fr}}

/* fundo do produto */
.product-visual{position:relative; border-radius:var(--radius); overflow:hidden; aspect-ratio:4/3;
  background:linear-gradient(135deg,var(--brand-100),var(--brand-300)); display:grid; place-items:center; color:var(--brand-700); font-size:4rem}
.product-visual .shadow-tag{position:absolute; bottom:0; left:0; right:0; padding:14px 18px; font-size:.8rem; color:var(--brand-800); background:rgba(255,255,255,.55)}

/* avatar inicial */
.avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--brand-500),var(--brand-700));color:#fff;display:grid;place-items:center;font-weight:800;font-size:.85rem;cursor:pointer;border:none}

/* estatísticas admin */
.stat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:26px}
.stat-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.stat-card .v{font-size:1.6rem;font-weight:800}
.stat-card .l{color:var(--muted);font-size:.85rem;font-weight:600}
@media (max-width:900px){.stat-grid{grid-template-columns:1fr 1fr}}

/* filtro de busca inline */
.inline-search{display:flex; gap:8px}
.inline-search .input{flex:1}

/* etiquetas de prioridade suporte */
.chip-hl{border:none; font-weight:700}
.pri-low{background:#f0fdf4; color:#166534}
.pri-med{background:#fffbeb; color:#92400e}
.pri-high{background:#fef2f2; color:#991b1b}

/* linha de lançamento para tabela admin de receita */
.nowrap{white-space:nowrap}

/* header admin compacto dentro do layout da loja */
.mini-nav{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:22px}
.mini-nav a{font-weight:600;font-size:.85rem;padding:.4rem .85rem;border-radius:8px;border:1px solid var(--line);background:#fff}
.mini-nav a.on{background:var(--brand-600);color:#fff;border-color:var(--brand-600)}