/* ============================================================
   DA UM PEGA — style.css   |   Mobile-first redesign
   Paleta: Azul #0A84FF · Preto #050508 · Branco #F0F4FF
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Barlow:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Barlow+Condensed:wght@400;600;700&display=swap');

/* ── TOKENS ── */
:root {
  --blue:      #0A84FF;
  --blue-dark: #0060D0;
  --blue-deep: #003A8C;
  --blue-dim:  rgba(10,132,255,.13);
  --black:     #050508;
  --black2:    #0D0D14;
  --black3:    #131320;
  --black4:    #1C1C2A;
  --white:     #F0F4FF;
  --white2:    #C8D0E8;
  --gray:      #7A849E;
  --border:    rgba(10,132,255,.20);
  --border2:   rgba(238,242,255,.08);
  --green:     #00C896;
  --red:       #FF4040;
  --orange:    #FF8C00;
  --r:         6px;
  --hdr-h:     64px;
}

/* ── RESET ── */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-tap-highlight-color:transparent; }
body { font-family:'Barlow',sans-serif; background:var(--black); color:var(--white); overflow-x:hidden; min-height:100dvh; }
a    { color:inherit; text-decoration:none; }
button { cursor:pointer; font-family:inherit; border:none; background:none; }
img  { display:block; max-width:100%; }
input, select, textarea { font-family:inherit; }

/* scrollbar */
::-webkit-scrollbar { width:4px; height:4px; }
::-webkit-scrollbar-track { background:var(--black2); }
::-webkit-scrollbar-thumb { background:var(--blue-dark); border-radius:2px; }

/* ── CURSOR (desktop only) ── */
@media (pointer:fine) {
  body { cursor:none; }
  #cur  { width:12px; height:12px; background:var(--blue); border-radius:50%; position:fixed; top:0; left:0; pointer-events:none; z-index:9999; mix-blend-mode:screen; }
  #cur-r{ width:34px; height:34px; border:1.5px solid rgba(10,132,255,.5); border-radius:50%; position:fixed; top:0; left:0; pointer-events:none; z-index:9998; }
}

/* ── BUTTONS ── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 24px; border-radius:var(--r); border:none;
  font-family:'Barlow Condensed',sans-serif; font-size:14px; font-weight:700;
  letter-spacing:2px; text-transform:uppercase; transition:all .18s; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.btn-primary { background:var(--blue); color:#fff; }
.btn-primary:active { background:var(--blue-dark); }
.btn-outline  { background:transparent; color:var(--blue); border:1.5px solid var(--blue); }
.btn-outline:active  { background:var(--blue-dim); }
.btn-ghost    { background:transparent; color:var(--white2); border:1.5px solid var(--border2); }
.btn-ghost:active    { border-color:var(--blue); }
.btn-danger   { background:transparent; color:var(--red); border:1.5px solid rgba(255,64,64,.3); }
.btn-danger:active   { background:rgba(255,64,64,.1); }
.btn-green    { background:var(--green); color:#fff; }
.btn-green:active    { background:#00a87e; }
.btn-sm { padding:7px 14px; font-size:12px; }
.btn-lg { padding:15px 36px; font-size:15px; }

/* ── CARD ── */
.card { background:var(--black2); border:1px solid var(--border2); border-radius:10px; overflow:hidden; }
.card-header { padding:14px 18px; border-bottom:1px solid var(--border2); display:flex; align-items:center; justify-content:space-between; }
.card-title  { font-family:'Barlow Condensed',sans-serif; font-size:13px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--white); }
.card-body   { padding:18px; }

/* ── FORM ── */
.form-group   { display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.form-label   { font-family:'Barlow Condensed',sans-serif; font-size:11px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase; color:var(--white2); }
.form-label .req { color:var(--blue); }
.form-input, .form-select, .form-textarea {
  padding:12px 14px; background:var(--black3);
  border:1.5px solid var(--border2); border-radius:var(--r);
  color:var(--white); font-size:15px; outline:none;
  transition:border-color .18s; width:100%;
  -webkit-appearance:none;
}
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color:var(--blue); }
.form-input.err, .form-select.err { border-color:var(--red); animation:shake .3s; }
.form-select {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%230A84FF' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:38px;
}
.form-textarea { resize:vertical; min-height:80px; }
.form-row  { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media(max-width:500px) { .form-row { grid-template-columns:1fr; } }
@keyframes shake { 0%,100%{transform:translateX(0)} 30%{transform:translateX(-6px)} 70%{transform:translateX(6px)} }

/* ── BADGES ── */
.bdg { display:inline-flex; align-items:center; padding:3px 10px; border-radius:40px; font-family:'Barlow Condensed',sans-serif; font-size:10px; font-weight:700; letter-spacing:2px; text-transform:uppercase; }
.bdg-hot     { background:rgba(255,64,64,.18);  color:var(--red);    }
.bdg-novo    { background:rgba(0,200,150,.18);   color:var(--green);  }
.bdg-oferta  { background:rgba(255,140,0,.18);   color:var(--orange); }
.bdg-premium { background:rgba(10,132,255,.18);  color:var(--blue);   }
.bdg-blue    { background:rgba(10,132,255,.18);  color:var(--blue);   }
.bdg-green   { background:rgba(0,200,150,.18);   color:var(--green);  }
.bdg-red     { background:rgba(255,64,64,.18);   color:var(--red);    }
.bdg-orange  { background:rgba(255,140,0,.18);   color:var(--orange); }

/* ── TOGGLE ── */
.toggle { position:relative; display:inline-block; width:44px; height:24px; flex-shrink:0; }
.toggle input { opacity:0; width:0; height:0; }
.toggle-slider { position:absolute; inset:0; border-radius:24px; background:var(--black4); border:1.5px solid var(--border2); cursor:pointer; transition:.2s; }
.toggle-slider::before { content:''; position:absolute; width:18px; height:18px; border-radius:50%; bottom:2px; left:1px; background:var(--gray); transition:.2s; }
.toggle input:checked + .toggle-slider { background:var(--blue); border-color:var(--blue); }
.toggle input:checked + .toggle-slider::before { transform:translateX(20px); background:#fff; }

/* ── TOAST ── */
#toast {
  position:fixed; bottom:90px; left:50%; z-index:8000;
  transform:translateX(-50%) translateY(30px);
  padding:11px 22px; border-radius:40px;
  font-family:'Barlow Condensed',sans-serif; font-size:14px; font-weight:700; letter-spacing:1px;
  opacity:0; transition:all .28s; pointer-events:none; white-space:nowrap;
  background:var(--blue); color:#fff;
  box-shadow:0 8px 32px rgba(0,0,0,.5);
}
#toast.show { transform:translateX(-50%) translateY(0); opacity:1; }
#toast.success { background:var(--green); }
#toast.error   { background:var(--red);   }

/* ── MODAL ── */
.modal-bg { position:fixed; inset:0; z-index:700; background:rgba(5,5,8,.85); backdrop-filter:blur(8px); display:flex; align-items:flex-end; justify-content:center; opacity:0; pointer-events:none; transition:opacity .22s; }
.modal-bg.open { opacity:1; pointer-events:all; }
@media(min-width:600px) { .modal-bg { align-items:center; } }
.modal-box { background:var(--black2); border:1px solid var(--border); border-radius:16px 16px 0 0; padding:28px 24px; width:100%; max-width:520px; max-height:90dvh; overflow-y:auto; transform:translateY(40px); transition:transform .25s cubic-bezier(.4,0,.2,1); }
.modal-bg.open .modal-box { transform:translateY(0); }
@media(min-width:600px) { .modal-box { border-radius:16px; } }
.modal-handle { width:40px; height:4px; background:var(--border2); border-radius:2px; margin:0 auto 20px; }
.modal-title  { font-family:'Bebas Neue',sans-serif; font-size:24px; letter-spacing:2px; color:var(--white); margin-bottom:18px; }
.modal-footer { display:flex; gap:10px; justify-content:flex-end; margin-top:22px; padding-top:18px; border-top:1px solid var(--border2); }

/* ── CONFIRM ── */
.confirm-bg { position:fixed; inset:0; z-index:900; background:rgba(5,5,8,.88); display:flex; align-items:center; justify-content:center; padding:20px; opacity:0; pointer-events:none; transition:opacity .2s; }
.confirm-bg.open { opacity:1; pointer-events:all; }
.confirm-box { background:var(--black2); border:1.5px solid rgba(255,64,64,.3); border-radius:12px; padding:28px; max-width:340px; width:100%; }
.confirm-title { font-family:'Bebas Neue',sans-serif; font-size:22px; color:var(--white); margin-bottom:8px; }
.confirm-text  { font-size:14px; color:var(--gray); margin-bottom:22px; line-height:1.5; }
.confirm-btns  { display:flex; gap:10px; }

/* ── SPINNER ── */
.spinner { width:36px; height:36px; border:3px solid var(--border2); border-top-color:var(--blue); border-radius:50%; animation:spin .75s linear infinite; margin:0 auto; }
@keyframes spin { to { transform:rotate(360deg); } }
.loading-wrap { display:flex; flex-direction:column; align-items:center; gap:14px; padding:60px 20px; color:var(--gray); font-family:'Barlow Condensed',sans-serif; font-size:12px; letter-spacing:2px; text-transform:uppercase; }

/* ── EMPTY ── */
.empty-state { text-align:center; padding:50px 20px; color:var(--gray); }
.empty-state .empty-ico { font-size:48px; margin-bottom:14px; opacity:.4; }
.empty-state p { font-family:'Barlow Condensed',sans-serif; font-size:14px; letter-spacing:1px; line-height:1.6; }

/* ── TABLE (admin) ── */
.table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
table { width:100%; border-collapse:collapse; min-width:580px; }
th { font-family:'Barlow Condensed',sans-serif; font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--gray); padding:10px 12px; text-align:left; border-bottom:1px solid var(--border2); white-space:nowrap; }
td { padding:12px 12px; border-bottom:1px solid rgba(238,242,255,.04); font-size:13px; color:var(--white2); vertical-align:middle; }
tr:last-child td { border-bottom:none; }
.td-img { width:44px; height:44px; border-radius:6px; background:var(--black3); display:flex; align-items:center; justify-content:center; font-size:20px; overflow:hidden; flex-shrink:0; }
.td-img img { width:100%; height:100%; object-fit:cover; border-radius:6px; }