/* ===========================
   CNScan PRO — single source
   /static/cn.css
   Dark glass + warehouse readable
   =========================== */

/* ---------- Design Tokens ---------- */
:root{
  /* Tipografia responsiva (auto-ajusta a qualquer ecrã)
     - mobile: ~16px (evita zoom iOS nos inputs quando combinado com regras abaixo)
     - desktop: sobe suavemente sem “ficar gigante” */
  --base: clamp(15.5px, calc(14px + 0.35vw), 17px);
  --lh: 1.38;

  /* cores */
  --bg:  #070d1a;
  --bg2: #0b1220;

  /* glass */
  --card:  rgba(13, 22, 45, .78);
  --card2: rgba(15, 24, 48, .66);

  /* strokes */
  --stroke:  rgba(64, 88, 152, .35);
  --stroke2: rgba(64, 88, 152, .52);

  /* texto */
  --txt: #eaf0ff;
  --mut: #9fb0d0;

  /* estados */
  --ok:   #6ee7b7;
  --bad:  #fb7185;
  --warn: #fbbf24;
  --info: #60a5fa;

  /* sombras */
  --shadow:  0 18px 54px rgba(0,0,0,.48);
  --shadow2: 0 10px 30px rgba(0,0,0,.36);

  /* spacing/radius */
  --s1: .45rem;
  --s2: .70rem;
  --s3: 1.00rem;
  --s4: 1.35rem;
  --s5: 1.75rem;
  --s6: 2.25rem;

  --r1: .80rem;
  --r2: 1.10rem;
  --r3: 1.45rem;

  /* foco */
  --focus: 0 0 0 .40rem rgba(110,231,183,.14);

  /* layout */
  --wrap: 1560px;
  --stickyH: 98px; /* altura real da topbar */

  /* transições */
  --tFast: .08s;
  --tMed:  .14s;
  --ease: cubic-bezier(.2,.8,.2,1);
}

/* ---------- Scale (auto) ---------- */
/* (removido: regras fixas por resolução; agora é clamp() no --base) */

/* ---------- Reset / Base ---------- */
*{ box-sizing:border-box; }
html,body{ height:100%; }
html{
  font-size: var(--base);
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body{
  margin:0;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial;
  line-height: var(--lh);
  color: var(--txt);

  background:
    radial-gradient(1200px 680px at 12% -12%, rgba(43,62,115,.34), transparent 60%),
    radial-gradient(950px 650px at 92% 0%, rgba(110,231,183,.10), transparent 55%),
    radial-gradient(750px 550px at 60% 120%, rgba(251,191,36,.06), transparent 55%),
    linear-gradient(180deg, var(--bg), var(--bg2));
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
.mut{ color:var(--mut); }
.mono{ font-family: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }
.small{ font-size:.92rem; }

hr.hr{
  border:0; height:1px;
  background: rgba(64,88,152,.30);
  margin: var(--s3) 0;
}

/* iOS: evita zoom ao focar inputs (mantém >=16px só em iOS) */
@supports (-webkit-touch-callout: none){
  input, select, textarea, button{ font-size: 16px; }
}

/* Scrollbar (desktop) */
*::-webkit-scrollbar{ height:12px; width:12px; }
*::-webkit-scrollbar-thumb{
  background: rgba(159,176,208,.22);
  border: 3px solid rgba(7,13,26,.75);
  border-radius: 999px;
}
*::-webkit-scrollbar-thumb:hover{
  background: rgba(159,176,208,.30);
}

/* ---------- Layout helpers ---------- */
.wrap{
  max-width: min(var(--wrap), 96vw);
  margin:0 auto;
  padding: var(--s5);
}
.row{ display:flex; gap: var(--s2); align-items:center; flex-wrap:wrap; }
.spread{ display:flex; justify-content:space-between; align-items:center; gap: var(--s3); flex-wrap:wrap; }

/* ---------- Topbar / Nav (unificado) ---------- */
.top, .topbar{
  position: sticky;
  top: 0;
  z-index: 50;

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  background: rgba(7,13,26,.78);
  border-bottom: 1px solid rgba(64,88,152,.30);
}

/* suporta 2 HTMLs:
   1) páginas novas: <header class="topbar"><div class="wrap topbar-row">...
   2) páginas antigas: <div class="top"><div class="wrap nav">...
*/
.nav, .topbar-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: var(--s3);
  flex-wrap:nowrap;

  padding: var(--s3) var(--s5);
  min-height: var(--stickyH);
}

.brand{
  display:flex;
  align-items:center;
  gap: var(--s3);
}
.logo{
  width: 2.65rem;
  height: 2.65rem;
  border-radius: 1.10rem;
  display:grid;
  place-items:center;
  font-weight: 950;
  letter-spacing:.2px;

  background: linear-gradient(135deg, rgba(110,231,183,.26), rgba(43,62,115,.62));
  border: 1px solid rgba(110,231,183,.22);
  box-shadow: 0 10px 24px rgba(0,0,0,.38);
}

.h1{ margin:0; font-weight: 950; font-size: 1.62rem; letter-spacing: .2px; }
.h2{ margin:0; font-weight: 850; font-size: 1.05rem; color: var(--mut); }

/* ---------- Pills / Tabs ---------- */
.tabs{ display:flex; gap: .55rem; flex-wrap:wrap; align-items:center; }
.pill, .tab{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.45rem;

  padding: .62rem 1.05rem;
  min-height: 44px;

  border-radius: 999px;
  border: 1px solid rgba(64,88,152,.36);
  background: rgba(13, 22, 45, .42);
  box-shadow: 0 10px 26px rgba(0,0,0,.20);

  font-size: 1.00rem;
  user-select:none;
  line-height: 1;
}
.pill:hover, .tab:hover{ filter: brightness(1.06); }
.tab.active{
  border-color: rgba(110,231,183,.32);
  background: rgba(19,33,74,.74);
  box-shadow:
    0 0 0 .50rem rgba(110,231,183,.06),
    0 10px 26px rgba(0,0,0,.22);
}

.pill.ok{   border-color: rgba(110,231,183,.34); color: var(--ok); }
.pill.bad{  border-color: rgba(251,113,133,.38); color: var(--bad); }
.pill.warn{ border-color: rgba(251,191,36,.40);  color: var(--warn); }
.pill.info{ border-color: rgba(96,165,250,.42);  color: var(--info); }

/* topbar actions (admin_layout) */
.topbar-actions{
  display:flex;
  align-items:center;
  gap: .55rem;
  flex-wrap:wrap;
}

/* em ecrãs mais pequenos deixa quebrar */
@media (max-width: 980px){
  .nav, .topbar-row{ flex-wrap:wrap; }
  .tabs{ width:100%; justify-content:flex-start; }
}

/* ---------- Cards ---------- */
.card, .dashCard{
  background: var(--card);
  border: 1px solid rgba(64,88,152,.38);
  border-radius: var(--r3);
  box-shadow: var(--shadow);
  padding: var(--s5);
}
.card + .card{ margin-top: var(--s3); }

/* ---------- Inputs / Buttons ---------- */
input, select, textarea{ font: inherit; color: var(--txt); }

.input,
input[type="text"],
input[type="search"],
input[type="number"],
textarea,
select{
  width: min(720px, 100%);
  padding: .92rem 1.08rem;
  border-radius: var(--r2);
  border: 1px solid rgba(64,88,152,.46);
  background: rgba(7,13,26,.66);
  outline: none;

  transition: border-color var(--tMed) var(--ease), box-shadow var(--tMed) var(--ease), filter var(--tMed) var(--ease);
}
textarea{ min-height: 120px; resize: vertical; }
.input:focus, input:focus, textarea:focus, select:focus{
  border-color: rgba(110,231,183,.42);
  box-shadow: var(--focus);
}
input::placeholder, textarea::placeholder{ color: rgba(159,176,208,.62); }

button, .btn{
  border: 1px solid rgba(64,88,152,.50);
  background: rgba(19,33,74,.76);
  color: var(--txt);
  cursor:pointer;

  padding: .86rem 1.05rem;
  border-radius: var(--r2);
  box-shadow: var(--shadow2);

  transition:
    transform var(--tFast) var(--ease),
    filter var(--tMed) var(--ease),
    background var(--tMed) var(--ease),
    border-color var(--tMed) var(--ease);

  font-size: 1.02rem;
  user-select:none;
}
button:hover, .btn:hover{ filter: brightness(1.10); }
button:active, .btn:active{ transform: translateY(1px); }
button:disabled, .btn:disabled{ opacity:.55; cursor:not-allowed; filter:none; transform:none; }

.btnGhost, .btn.ghost{ background: rgba(7,13,26,.50); }

.btnOk, .btn.ok{      border-color: rgba(110,231,183,.34); }
.btnDanger, .btn.bad{ border-color: rgba(251,113,133,.44); }
.btnWarn, .btn.warn{  border-color: rgba(251,191,36,.48); }
.btnInfo, .btn.info{  border-color: rgba(96,165,250,.48); }

.actions{ display:flex; gap:.55rem; justify-content:flex-end; flex-wrap:wrap; }
.btnsm{ padding: .62rem .84rem; border-radius: 999px; font-size: 1.00rem; }

/* ---------- Scan input (super legível) ---------- */
#scan, #scanInput, .scan-input{
  width: 100% !important;
  font-size: 1.70rem !important;
  padding: 1.10rem 1.20rem !important;
  border-radius: var(--r3) !important;
  letter-spacing: .3px;
}

/* ---------- Badges ---------- */
.badge{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding: .56rem .88rem;
  border-radius: 999px;
  border: 1px solid rgba(64,88,152,.42);
  background: rgba(7,13,26,.50);
  font-size: 1.00rem;
}
.badge.ok{   border-color: rgba(110,231,183,.34); color: var(--ok); }
.badge.warn{ border-color: rgba(251,191,36,.42);  color: var(--warn); }
.badge.bad{  border-color: rgba(251,113,133,.44); color: var(--bad); }
.badge.info{ border-color: rgba(96,165,250,.48);  color: var(--info); }

/* ---------- Toast / Progress ---------- */
.toast{ min-height: 1.2rem; margin-top: var(--s2); }
.bar{
  height: .78rem;
  border-radius: 999px;
  background: rgba(7,13,26,.52);
  border: 1px solid rgba(64,88,152,.30);
  overflow:hidden;
  margin-top: var(--s2);
}
.bar > div, #barfill{
  height:100%;
  width:0%;
  background: linear-gradient(90deg, rgba(110,231,183,.88), rgba(96,165,250,.72));
}

/* ---------- Table (robusto) ---------- */
.tableWrap{
  overflow:auto;
  border-radius: var(--r3);
  border: 1px solid rgba(64,88,152,.32);
  background: rgba(7,13,26,.34);
}

/* header sticky DENTRO do container com scroll */
.tableWrap thead th{
  position: sticky;
  top: 0;
  z-index: 5;
  background: rgba(7,13,26,.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(64,88,152,.30);
}

table{
  width:100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 1050px;
}
th, td{
  padding: .96rem 1.06rem;
  border-bottom: 1px solid rgba(64,88,152,.22);
  font-size: 1.02rem;
  vertical-align: middle;
}
th{ color: rgba(159,176,208,.96); font-weight: 900; text-align:left; letter-spacing:.2px; }
tbody tr:hover{ background: rgba(255,255,255,.035); }
tbody tr:nth-child(2n){ background: rgba(255,255,255,.012); }
td.right{ text-align:right; }

/* Evitar sombras “cortadas” dentro da tabela */
.tableWrap .btn,
.tableWrap button,
.tableWrap .pill,
.tableWrap .badge{
  box-shadow: none !important;
}

/* ---------- Dashboard Cards ---------- */
.dashGrid{
  display:grid;
  grid-template-columns: 1fr;
  gap: var(--s3);
}
@media(min-width: 900px){
  .dashGrid{ grid-template-columns: 1fr 1fr 1fr; }
}
.dashCard{ display:block; background: var(--card2); }
.dashTop{ display:flex; justify-content:space-between; align-items:center; gap: var(--s3); }
.dashTitle{ font-weight: 950; font-size: 1.18rem; }
.dashNum{ font-size: 2.9rem; font-weight: 950; margin-top: var(--s3); letter-spacing:.2px; }
.dashSub{ margin-top: .35rem; font-size: 1.00rem; color: var(--mut); }

/* ---------- Grid Page (picking RV) ---------- */
.grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: var(--s3);
}
@media(min-width: 1100px){
  .grid{ grid-template-columns: 1.25fr .75fr; align-items:start; }
}

/* ---------- Items list blocks (se existirem) ---------- */
.item{
  background: rgba(7,13,26,.34);
  border: 1px solid rgba(64,88,152,.26);
  border-radius: var(--r2);
  padding: var(--s4);
}
.item + .item{ margin-top: var(--s3); }
.itemTop{ display:flex; gap: var(--s3); align-items:flex-start; justify-content:space-between; flex-wrap:wrap; }
.title{ font-weight: 900; }
.kpi{ display:flex; gap:.55rem; align-items:center; flex-wrap:wrap; }
.qty{ font-size: 1.15rem; font-weight: 900; }

/* ---------- Modal (Decant / Abrir grande) ---------- */
/* Nota: o teu JS usa: el("modal").style.display = "flex"; */
.modal, #modal, #decantModal{
  position: fixed;
  inset: 0;
  z-index: 2000;

  display: none;            /* escondido por defeito */
  align-items: center;
  justify-content: center;

  padding: min(3vw, 24px);
  background: rgba(0,0,0,.55);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Caixa do modal */
.modalCard, .modalContent, #modalContent, #decantModalContent{
  width: min(820px, 96vw);
  background: rgba(13, 22, 45, .92);
  border: 1px solid rgba(64,88,152,.45);
  border-radius: var(--r3);
  box-shadow: 0 24px 70px rgba(0,0,0,.60);
  padding: var(--s4);
}

/* input dentro do modal */
.modal input[type="text"],
.modal input[type="search"],
#modal input[type="text"],
#modal input[type="search"],
#decantModal input[type="text"],
#decantModal input[type="search"]{
  width: 100% !important;
}

/* barcode box */
.barcodeBox{
  background: rgba(7,13,26,.44);
  border: 1px solid rgba(64,88,152,.28);
  border-radius: var(--r2);
  padding: var(--s3);
}
.bigcode{ font-size: 1.35rem; font-weight: 950; }

/* ---------- Focus Visible ---------- */
:focus{ outline:none; }
:focus-visible{ outline:none; box-shadow: var(--focus); }

/* ---------- Mobile ---------- */
@media (max-width: 720px){
  .wrap{ padding: var(--s4); }
  .nav, .topbar-row{ padding: var(--s3) var(--s4); }
  table{ min-width: 900px; }
}

/* ===========================
   REVENDAS — Mobile/Tablet UX
   Só afeta o portal /revendas (usa .wrap2 e .cnrev*)
   =========================== */

/* Tipografia dentro do portal Revendas: mais controlada */
.wrap2{
  font-size: clamp(15px, 14px + 0.35vw, 16px);
}

/* -------- Catálogo: cards centrados e “maiores” sem mudar o layout base -------- */
.wrap2 .catalogo{
  /* mantém o teu grid do HTML, mas dá cards mais “largos” (menos colunas quando o ecrã é médio) */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
}
.wrap2 .cardBody{ text-align:center; }
.wrap2 .cardBody h3{
  /* 2 linhas elegantes sem cortar palavras a meio */
  margin: 0 0 8px !important;
  line-height: 1.18;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.wrap2 .price, .wrap2 .stock{ text-align:center; }
.wrap2 .btnRow{
  justify-content:center;
}
.wrap2 .btnRow .bblue,
.wrap2 .btnRow .bred{
  flex: 1 1 140px;
  min-width: 140px;
}

/* -------- Categorias: “Todos” sozinho, resto 2 a 2 no telemóvel -------- */
@media (max-width: 520px){
  /* o botão Todos já está sozinho no teu HTML (catTop) */
  .catGrid{
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    width: 100% !important;
  }
  .catBtn{
    /* texto adapta ao espaço e NÃO parte em 2 linhas */
    font-size: clamp(12px, 3.0vw, 14px) !important;
    padding: 12px 10px !important;
    border-radius: 16px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-height: 46px !important;
  }
  .catBtn::before{ flex: 0 0 auto; }
}

/* em tablets pequenos: 2 colunas também */
@media (min-width: 521px) and (max-width: 900px){
  .catGrid{ grid-template-columns: 1fr 1fr !important; }
  .catBtn{ font-size: 14px !important; }
}

/* -------- Pesquisa no mobile -------- */
@media (max-width: 520px){
  .searchRow{ gap: 10px !important; }
  .searchRow input{ width: 100% !important; }
}

/* ===========================
   Revendas — Modal Close (X)
   Vermelho (erro/fechar)
   =========================== */

.cnrevHead{
  position: relative;
}

/* botão X */
button.cnrevClose{
  position: absolute;
  top: 10px;
  right: 10px;

  width: 38px;
  height: 38px;

  padding: 0 !important;
  min-height: 0 !important;

  border-radius: 14px !important;

  /* 🔴 vermelho consistente com o tema */
  border: 1px solid rgba(251,113,133,.55) !important;
  background: rgba(251,113,133,.12) !important;
  color: #fb7185 !important;

  box-shadow: none !important;
  line-height: 1 !important;
  font-size: 22px !important;
  font-weight: 950 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  cursor: pointer;
  user-select: none;

  transition:
    background .14s ease,
    filter .14s ease,
    transform .08s ease;
}

button.cnrevClose:hover{
  background: rgba(251,113,133,.20) !important;
  filter: brightness(1.05);
}

button.cnrevClose:active{
  transform: translateY(1px);
}

/* mobile: ligeiramente maior */
@media (max-width: 520px){
  button.cnrevClose{
    width: 44px;
    height: 44px;
    font-size: 24px;
  }
}

/* -------- Carrinho/Modal: usável no telemóvel -------- */
@media (max-width: 520px){
  .cnrevModal{
    width: calc(100vw - 18px) !important;
    max-height: calc(100vh - 18px) !important;
    border-radius: 14px !important;
  }
  .cnrevBody{ padding: 12px !important; }
  .cnrevActions{ padding: 0 12px 12px !important; }

  .cartLine{
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 12px 0 !important;
  }

  .cartLineLeft{ width:100% !important; }
  .cartImg{ width: 52px !important; height: 52px !important; }

  .cartTitle{
    white-space: normal !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    max-width: 100% !important;
    line-height: 1.15 !important;
  }

  .qtyCtl{
    width: 100% !important;
    justify-content: center !important;
    gap: 12px !important;
  }
  .qbtn, .xbtn{
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    font-size: 18px !important;
  }
  .qnum{ min-width: 34px !important; font-size: 18px !important; }

  .stockPills{ gap: 6px !important; flex-wrap: wrap !important; justify-content:flex-start; }
  .stockPills .pill{
    padding: 6px 8px !important;
    font-size: 13px !important;
  }
}

/* Tablet: equilíbrio */
@media (min-width: 521px) and (max-width: 900px){
  .cartTitle{ max-width: 240px !important; }
  .qbtn, .xbtn{ width: 40px !important; height: 40px !important; }
}

/* ===========================
   Revendas — Fix botões categorias (mobile)
   Evita cortar letras: permite 2 linhas + fonte auto
   =========================== */

/* Só no Revendas (usa .wrap2) */
@media (max-width: 520px){

  /* grelha 2 colunas; Todos os Produtos ocupa 1 linha */
  .wrap2 .catGrid{
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  /* botão “Todos os Produtos” fica sozinho em largura total */
  .wrap2 .catTop .catBtn,
  .wrap2 #btnAll{
    width: 100% !important;
    max-width: 520px;
  }

  /* botões de categoria: texto nunca corta */
  .wrap2 .catBtn{
    width: 100% !important;
    min-height: 52px !important;
    padding: 12px 12px !important;

    /* ⭐ o importante */
    white-space: normal !important;      /* permite quebrar linha */
    overflow: visible !important;
    text-overflow: unset !important;

    /* centralizar e ficar bonito em 1–2 linhas */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    line-height: 1.1 !important;

    /* fonte auto — baixa um bocado se o texto for grande */
    font-size: clamp(12px, 2.9vw, 15px) !important;
    font-weight: 900 !important;
  }

  /* texto com emoji não deve “empurrar” */
  .wrap2 .catBtn{
    gap: 8px !important;
  }
}

/* Extra: tablets pequenos (evita cortes raros) */
@media (min-width: 521px) and (max-width: 900px){
  .wrap2 .catBtn{
    white-space: normal !important;
    line-height: 1.1 !important;
    font-size: clamp(13px, 1.8vw, 16px) !important;
  }
}

/* Revendas: aumentar texto só do "Todos os Produtos" */
.wrap2 #btnAll{
  font-size: clamp(18px, 4.2vw, 20px) !important;   /* muda aqui: 17/18/19... */
  font-weight: 1000 !important;
}

.pill.wa{
  background:#25D366;
  color:#fff;
  border:none;
}
.pill.wa:hover{
  filter:brightness(0.95);
}

/* ===========================
   Revendas — Modal / Carrinho (fix visual completo)
   =========================== */

/* overlay */
.cnrevOverlay{
  position: fixed;
  inset: 0;
  z-index: 2100;
  display: none; /* o teu JS liga/desliga */
  align-items: center;
  justify-content: center;
  padding: min(3vw, 24px);
  background: rgba(0,0,0,.62);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* caixa modal (dark glass, não branco) */
.cnrevModal{
  width: min(820px, 96vw);
  max-height: min(84vh, 860px);
  overflow: hidden;

  background: rgba(13, 22, 45, .94);
  border: 1px solid rgba(64,88,152,.45);
  border-radius: var(--r3);
  box-shadow: 0 24px 70px rgba(0,0,0,.60);
}

/* header */
.cnrevHead{
  position: relative;
  padding: 16px 56px 14px 18px;
  border-bottom: 1px solid rgba(64,88,152,.22);
  background: rgba(7,13,26,.28);
}
.cnrevHead > div{
  font-weight: 950;
  font-size: 1.25rem;
}

/* body + scroll bonito */
.cnrevBody{
  padding: 16px 18px;
  overflow: auto;
}

/* footer actions */
.cnrevActions{
  padding: 0 18px 18px;
  border-top: 1px solid rgba(64,88,152,.18);
  background: rgba(7,13,26,.18);
}

/* botão X (fechar modal) — vermelho, pequeno, bonito */
button.cnrevClose{
  position: absolute;
  top: 10px;
  right: 10px;

  width: 38px;
  height: 38px;

  padding: 0 !important;
  min-height: 0 !important;

  border-radius: 14px !important;
  border: 1px solid rgba(251,113,133,.55) !important;
  background: rgba(251,113,133,.12) !important;
  color: #fb7185 !important;

  box-shadow: none !important;
  line-height: 1 !important;
  font-size: 22px !important;
  font-weight: 950 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  cursor: pointer;
  user-select: none;

  transition: background .14s ease, filter .14s ease, transform .08s ease;
}
button.cnrevClose:hover{ background: rgba(251,113,133,.20) !important; filter: brightness(1.05); }
button.cnrevClose:active{ transform: translateY(1px); }

/* ===== Linhas do carrinho ===== */
.cartLine{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(64,88,152,.16);
}
.cartLine:last-child{ border-bottom: 0; }

.cartLineLeft{
  display:flex;
  align-items:center;
  gap: 12px;
  min-width: 0;
}
.cartImg{
  width: 52px;
  height: 52px;
  border-radius: 14px;
  border: 1px solid rgba(64,88,152,.22);
  background: rgba(7,13,26,.20);
  object-fit: cover;
}

.cartTitle{
  font-weight: 950;
  line-height: 1.12;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 420px;
}
.cartSub{ color: var(--mut); font-weight: 800; margin-top: 2px; }

/* controls (+/-/x) — compactos e alinhados */
.qtyCtl{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-shrink: 0;
}
.qbtn, .xbtn{
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  border: 1px solid rgba(64,88,152,.40) !important;
  background: rgba(19,33,74,.70) !important;
  color: var(--txt) !important;
  font-weight: 950 !important;
  font-size: 18px !important;
}
.qbtn:hover, .xbtn:hover{ filter: brightness(1.10); }
.qbtn:active, .xbtn:active{ transform: translateY(1px); }

.xbtn{
  border-color: rgba(251,113,133,.55) !important;
  background: rgba(251,113,133,.14) !important;
  color: #fb7185 !important;
}

/* número qty */
.qnum{
  min-width: 26px;
  text-align:center;
  font-weight: 950;
}

/* ===== Destino select (tema) ===== */
.cnrevBody select,
.cnrevBody select:focus{
  width: 100%;
  max-width: 420px;

  padding: .92rem 1.08rem !important;
  border-radius: var(--r2) !important;

  border: 1px solid rgba(64,88,152,.46) !important;
  background: rgba(7,13,26,.66) !important;
  color: var(--txt) !important;

  outline: none;
  box-shadow: none;
}

/* Total */
.cartTotalRow, .totalRow{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 14px 0 6px;
  font-weight: 950;
  font-size: 1.15rem;
}

/* botões grandes do carrinho (se usares classes) */
.cnrevActions .btnWide{
  width: 100%;
  border-radius: var(--r2);
  min-height: 52px;
  font-weight: 950;
}

@media (max-width: 520px){
  .cnrevModal{ width: calc(100vw - 18px); max-height: calc(100vh - 18px); border-radius: 14px; }
  .cartLine{ flex-direction: column; align-items: stretch; }
  .qtyCtl{ justify-content: center; }
  .cartTitle{ white-space: normal; max-width: 100%; }
}

/* ===========================
   Revendas — Botões do modal (btnWide)
   =========================== */

.cnrevActions .btnWide{
  width: 100%;
  min-height: 52px;
  border-radius: var(--r2);
  font-weight: 950;
  border: 1px solid rgba(64,88,152,.40);
  box-shadow: none;
}

/* Azul (primário) */
.cnrevActions .btnWide.btnBlue{
  background: rgba(11,98,255,.78);
  border-color: rgba(96,165,250,.50);
  color: #fff;
}
.cnrevActions .btnWide.btnBlue:hover{
  filter: brightness(1.06);
}

/* Vermelho (perigo) */
.cnrevActions .btnWide.btnRed{
  background: rgba(239,68,68,.80);
  border-color: rgba(251,113,133,.55);
  color: #fff;
}
.cnrevActions .btnWide.btnRed:hover{
  filter: brightness(1.06);
}

/* Cinza (neutro) */
.cnrevActions .btnWide.btnGray{
  background: rgba(107,114,128,.70);
  border-color: rgba(159,176,208,.35);
  color: #fff;
}
.cnrevActions .btnWide.btnGray:hover{
  filter: brightness(1.06);
}

/* ===========================
   Revendas — Scroll correto do Modal
   (scroll dentro do modal, fundo bloqueado)
   =========================== */

html.modalLock,
body.modalLock{
  overflow: hidden !important;
  height: 100% !important;
}

/* modal em coluna: head + body(scroll) + actions */
.cnrevModal{
  display: flex !important;
  flex-direction: column !important;
}

/* o modal inteiro tem scroll interno */
.cnrevModal{
  display: flex !important;
  flex-direction: column !important;
  overflow: auto !important;
}

/* body já não precisa de ser o scroll principal */
.cnrevBody{
  flex: 0 0 auto !important;
  overflow: visible !important;
  min-height: auto !important;
}


/* footer passa a fazer parte do scroll */
.cnrevActions{
  flex: 0 0 auto !important;
  position: static !important;
  border-top: 1px solid rgba(64,88,152,.18);
  background: transparent !important;
}