/* ======================================================
   Hookan CRM — Tema Claro + Amarelo (Clean & Pro)
   ====================================================== */

/* ---------- Design Tokens ---------- */
:root{
  --bg: #f7f8fc;
  --surface: #ffffff;
  --surface-2: #f1f3f9;
  --border: #e5e7ef;

  --txt: #202431;
  --txt-2: #616a7c;

  --brand: #ffb300;   /* amarelo principal */
  --brand-2: #e1a100; /* hover */

  --success: #12a355;
  --info: #1f7fea;
  --danger: #d94141;

  --white: #fff;
  --shadow-1: 0 6px 14px rgba(0,0,0,.08);
  --shadow-2: 0 16px 30px rgba(0,0,0,.12);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;

  --h-ctrl: 40px; /* altura padrão de inputs/botões */

  /* utilitários/fallbacks */
  --u-text: #e5e7eb;
  --u-text-muted: #9aa3b2;
  --u-border: #243044;
  --u-ok: #22c55e;
  --u-warn: #f59e0b;
  --u-err: #ef4444;
  --u-accent: #ff8c00;
  --u-card: #0b1220cc;
}

/* ---------- Base ---------- */
html, body{ height:100%; }
body{
  background: var(--bg);
  color: var(--txt);
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  margin: 0;
}

/* ==============================================
   LAYOUT (SIDEBAR + CONTEÚDO)
   ============================================== */
.page-wrapper{ display:flex; min-height:100vh; overflow:hidden; }
.sidebar{
  width: 260px;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display:flex; flex-direction:column;
  padding: 14px;
  box-sizing:border-box;
}
.sidebar .logo{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding: 8px 6px 16px;
  font-weight:600; font-size:1.2rem;
  color: var(--txt);
}
.sidebar nav a{
  display:flex; align-items:center; gap:12px;
  color: var(--txt-2);
  text-decoration:none;
  padding: 10px 12px;
  margin: 4px 0;
  border-radius: 10px;
  transition: background-color .2s, color .2s;
}
.sidebar nav a:hover{ background: rgba(255,179,0,.14); color: var(--brand); }
.sidebar nav a.active{ background: var(--brand); color:#111; }

.sidebar .nav-item{ position: relative; }
.sidebar .submenu-trigger{ display:flex; justify-content:space-between; align-items:center; }
.sidebar .indicator{ font-size: 1.2em; font-weight:300; transition: transform .3s ease; }
.sidebar .submenu{
  max-height: 0; overflow: hidden;
  background: var(--surface-2);
  padding-left: 30px;
  transition: max-height .35s ease-out;
  margin-top: 5px; border-radius: 8px;
}
.sidebar .nav-item.submenu-aberto > .submenu{
  max-height: 240px;
  padding: 8px 0;
}
.sidebar .nav-item.submenu-aberto > .submenu-trigger .indicator{ transform: rotate(45deg); }

.sidebar .logout-link{
  margin-top:auto; display:flex; align-items:center; gap:12px;
  color: var(--txt-2); padding: 10px 12px; text-decoration:none; border-radius:10px;
}
.sidebar .logout-link:hover{ color: var(--danger); background: rgba(217,65,65,.12); }

.main-content{ flex:1; overflow-y:auto; padding: 26px; box-sizing:border-box; }

/* ==============================================
   CARDS / CONTAINERS / TÍTULOS
   ============================================== */
.container, .content-card, .kpi-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  padding: 22px;
}
.container h2, .content-card h2{
  font-size: 1.15rem; margin: 0 0 14px 0; color: var(--txt);
}
.header{ display:flex; justify-content:space-between; align-items:center; margin-bottom: 18px; }
.header h1{ font-size:1.6rem; margin:0; }

/* ==============================================
   FORMULÁRIOS / INPUTS / BOTÕES
   ============================================== */
form{ margin-top:0; display:grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.full-width{ grid-column: span 2; }
label{ display:block; margin-bottom:6px; font-size:.92rem; color: var(--txt-2); }

input[type="text"], input[type="email"], input[type="number"],
input[type="date"], input[type="password"], textarea, select{
  width:100%; box-sizing:border-box;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--txt);
  border-radius: var(--radius-md);
  padding: 11px 12px;
  font: inherit;
  height: var(--h-ctrl);
}
input:focus, select:focus, textarea:focus{
  outline: 3px solid rgba(255,179,0,.25);
  outline-offset: 1px;
}

button, .btn-acao{
  background: var(--brand); color:#111;
  border:0; border-radius: var(--radius-md);
  padding: 0 14px; font-weight:600;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height: var(--h-ctrl);
  cursor:pointer; text-decoration:none; transition: background-color .2s, transform .05s;
}
button:hover, .btn-acao:hover{ background: var(--brand-2); transform: translateY(-1px); }
button:active, .btn-acao:active{ transform: translateY(0); }

.btn-info{ background: var(--info); color:#fff; }
.btn-info:hover{ filter: brightness(1.05); }
.btn-sucesso{ background: var(--success); color:#fff; }
.btn-perigo{ background: var(--danger); color:#fff; }
.btn-ghost{
  background: transparent;
  color: var(--txt-2);
  border:1px solid var(--border);
}

/* ==============================================
   TABELAS (base)
   ============================================== */
table{ width:100%; border-collapse: separate; border-spacing:0; margin-top: 18px; }
th, td{ padding: 13px 14px; border-bottom: 1px solid var(--border); text-align:left; }
th{
  text-transform: uppercase; letter-spacing:.04em;
  font-size:.78rem; font-weight:600; color: var(--txt-2);
  background: #f8f9fc;
  position: sticky; top: 0; z-index: 1;
}
tbody tr:hover{ background: #fdfdfd; }

/* ==============================================
   COLUNA “AÇÕES”
   ============================================== */
td.actions,
#tabela-clientes-container td.actions,
.container table td.actions,
table td.acoes{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap: 10px !important;
  padding: 10px 12px !important;
  white-space: nowrap;
  min-width: 0;
}
td.actions > *{ flex: 0 0 auto !important; }
td.actions select{
  flex: 1 1 300px !important;
  min-width: 240px;
  max-width: 500px;
}
td.actions form{ display:inline-flex !important; gap:10px; margin:0 !important; }
@media (max-width: 860px){
  td.actions,
  #tabela-clientes-container td.actions,
  .container table td.actions,
  table td.acoes{
    flex-wrap: wrap !important;
    white-space: normal !important;
    gap: 8px !important;
  }
  td.actions > *{ width: 100% !important; }
}

/* ==============================================
   ALERTS / TOASTS — ESCOPADOS AO CONTAINER
   ============================================== */
#toast-container{
  position: fixed; top: 18px; right: 18px; z-index: 2000;
  display:flex; flex-direction:column; gap:10px; align-items:flex-end;
}
#toast-container .toast{
  background: var(--surface); color: var(--txt);
  border: 1px solid rgba(0,0,0,.06);
  border-left: 6px solid var(--brand);
  padding: 14px 16px; border-radius: 12px; min-width: 280px;
  box-shadow: var(--shadow-1);
  opacity: 0; transform: translateX(100%); transition: all .35s ease;
}
#toast-container .toast.show{ opacity:1; transform: translateX(0); }
#toast-container .toast.toast-sucesso{ border-left-color: var(--success); }
#toast-container .toast.toast-perigo{  border-left-color: var(--danger); }
#toast-container .toast.toast-info{    border-left-color: var(--info); }

/* ==============================================
   PDV (layout)
   ============================================== */
.pdv-wrapper{ display:grid; grid-template-columns: 40% 1fr; gap: 20px; align-items: stretch; }
.sale-details .container, .cart-section .container{ height:100%; display:flex; flex-direction:column; }
#pdv-form{ display:flex; flex-direction:column; height:100%; }
#pdv-form .form-content{ flex:1; }
#pdv-form .form-footer{ margin-top:auto; padding-top: 20px; }
#pdv-form hr{ margin: 18px 0; border:0; border-top:1px solid var(--border); }
#pdv-form h3{ font-size:1.1rem; margin:0 0 14px 0; padding-bottom:8px; border-bottom:1px solid var(--border); }
.label-com-botao{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.btn-finalizar{ width:100%; font-size:1.05rem; font-weight:700; background: var(--success); color:#fff; }

/* Auto-complete — dropdown EXACT da largura do input */
.input-with-results { position: relative; display:block; width:100%; }
.input-with-results > .autocomplete-box{
  position:absolute; top:calc(100% + 6px); left:0; right:auto !important;
  width:100% !important; max-width:100% !important; box-sizing:border-box;
  display:none; background: var(--surface);
  border:1px solid var(--border); border-top:none; border-radius:0 0 10px 10px;
  max-height: 260px; overflow-y: auto; z-index: 9999; box-shadow: var(--shadow-1);
}
.autocomplete-item, .resultado-item, .resultado-item-none{
  padding: 12px 15px; cursor: pointer; border-bottom:1px solid var(--border);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.autocomplete-item:hover, .resultado-item:hover{ background: var(--surface-2); }
.resultado-item-none{ cursor: default; color: var(--txt-2); }
#cliente-selecionado{ margin-top: 10px; }
.cliente-tag{ background: var(--brand); color:#111; padding: 6px 10px; border-radius: 8px; display:inline-block; font-weight:600; }

/* ==============================================
   MODAIS (genérico)
   ============================================== */
.modal-overlay{ display:none; position:fixed; inset:0; background: rgba(0,0,0,.65); z-index: 2000; justify-content:center; align-items:center; }
.modal-content{
  width: 92%; max-width: 620px; max-height: 82vh; overflow:auto;
  background: var(--surface); border:1px solid var(--border);
  border-radius: 16px; box-shadow: var(--shadow-2);
  padding: 24px; position: relative;
}
.modal-close{ position:absolute; top:10px; right:14px; font-size: 1.8rem; color: var(--txt-2); cursor:pointer; }

/* ===== Ajustes de largura/overflow do modal ===== */
.modal-overlay { padding-inline: 16px; }
.modal-content{
  max-width: 720px;
  width: min(720px, calc(100vw - 64px));
  box-sizing: border-box;
  overflow-x: hidden !important;
}
.modal-content * { max-width: 100%; box-sizing: border-box; }

/* ==============================================
   RESPONSIVO
   ============================================== */
@media (max-width: 992px){
  .page-wrapper{ flex-direction: column; height:auto; }
  .sidebar{ width:100%; height:auto; flex-direction:row; justify-content:space-between; align-items:center; padding:10px 20px; border-right:none; border-bottom:1px solid var(--border); }
  .main-content{ padding: 20px; }
  form{ grid-template-columns: 1fr; }
  button[type="submit"]{ grid-column: span 1; }
}
@media (max-width: 768px){
  .pdv-wrapper{ grid-template-columns: 1fr; }
}
@media (max-width: 576px){
  .sidebar{ flex-direction: column; align-items:flex-start; padding: 15px; }
  .sidebar nav{ width:100%; margin-top: 10px; }
  .sidebar nav a{ margin: 5px 0; }
  .sidebar .logout-link{ align-self:flex-start; margin-top: 8px; width:100%; }
}

/* =========================================================
   UTILITÁRIOS GERAIS
   ========================================================= */
.hidden{display:none!important;}
.block{display:block!important;}
.inline{display:inline!important;}
.inline-block{display:inline-block!important;}
.flex{display:flex!important;}
.inline-flex{display:inline-flex!important;}
.grid{display:grid!important;}

.items-start{align-items:flex-start!important;}
.items-center{align-items:center!important;}
.items-end{align-items:flex-end!important;}
.justify-start{justify-content:flex-start!important;}
.justify-center{justify-content:center!important;}
.justify-between{justify-content:space-between!important;}
.justify-end{justify-content:flex-end!important;}
.flex-wrap{flex-wrap:wrap!important;}

.gap-1{gap:4px!important;} .gap-2{gap:8px!important;} .gap-3{gap:12px!important;}
.gap-4{gap:16px!important;} .gap-6{gap:24px!important;} .gap-8{gap:32px!important;}

.grid-cols-1{grid-template-columns:1fr!important;}
.grid-cols-2{grid-template-columns:repeat(2,1fr)!important;}
.grid-cols-3{grid-template-columns:repeat(3,1fr)!important;}

.w-100{width:100%!important;}
.w-auto{width:auto!important;}
.max-w-480{max-width:480px!important;}
.max-w-640{max-width:640px!important;}
.max-w-880{max-width:880px!important;}
.max-w-960{max-width:960px!important;}
.mx-auto{margin-left:auto!important;margin-right:auto!important;}

.m-0{margin:0!important;}
.mt-0{margin-top:0!important;} .mr-0{margin-right:0!important;}
.mb-0{margin-bottom:0!important;} .ml-0{margin-left:0!important;}
.m-1{margin:4px!important;} .m-2{margin:8px!important;} .m-3{margin:12px!important;}
.m-4{margin:16px!important;} .m-6{margin:24px!important;} .m-8{margin:32px!important;}

.p-0{padding:0!important;}
.p-1{padding:4px!important;} .px-1{padding-left:4px!important;padding-right:4px!important;} .py-1{padding-top:4px!important;padding-bottom:4px!important;}
.p-2{padding:8px!important;} .px-2{padding-left:8px!important;padding-right:8px!important;} .py-2{padding-top:8px!important;padding-bottom:8px!important;}
.p-3{padding:12px!important;} .px-3{padding-left:12px!important;padding-right:12px!important;} .py-3{padding-top:12px!important;padding-bottom:12px!important;}
.p-4{padding:16px!important;} .px-4{padding-left:16px!important;padding-right:16px!important;} .py-4{padding-top:16px!important;padding-bottom:16px!important;}
.p-6{padding:24px!important;} .px-6{padding-left:24px!important;padding-right:24px!important;} .py-6{padding-top:24px!important;padding-bottom:24px!important;}

.text-left{text-align:left!important;}
.text-center{text-align:center!important;}
.text-right{text-align:right!important;}
.text-justify{text-align:justify!important;}

.text-xs{font-size:12px!important;}
.text-sm{font-size:14px!important;}
.text-base{font-size:16px!important;}
.text-lg{font-size:18px!important;}
.text-xl{font-size:22px!important;}

.fw-400{font-weight:400!important;}
.fw-500{font-weight:500!important;}
.fw-600{font-weight:600!important;}
.fw-700{font-weight:700!important;}

.text-muted{color:var(--u-text-muted)!important;}
.text-ok{color:var(--u-ok)!important;}
.text-warn{color:var(--u-warn)!important;}
.text-err{color:var(--u-err)!important;}
.text-accent{color:var(--u-accent)!important;}

.border{border:1px solid var(--u-border)!important;}
.border-0{border:0!important;}
.border-dashed{border-style:dashed!important;}
.rounded{border-radius:8px!important;}
.rounded-lg{border-radius:12px!important;}
.rounded-xl{border-radius:16px!important;}

.shadow-sm{box-shadow:0 6px 16px rgba(0,0,0,.25)!important;}
.shadow-md{box-shadow:0 10px 28px rgba(0,0,0,.35)!important;}

.bg-card{background:var(--u-card)!important;}
.bg-transparent{background:transparent!important;}

.visually-hidden{
  position:absolute!important; width:1px!important; height:1px!important;
  padding:0!important; margin:-1px!important; overflow:hidden!important;
  clip:rect(0 0 0 0)!important; white-space:nowrap!important; border:0!important;
}

/* ==============================================
   KPI CARDS
   ============================================== */
.kpi-grid{
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  align-items: stretch;
}
.kpi-card{
  background: var(--u-card);
  color: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
}
.kpi-card .card-title{
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .2px;
  opacity: .85;
}
.kpi-card .card-value{
  margin: 0;
  font-size: 28px;
  font-weight: 800;
  line-height: 1.1;
  color: #fff;
}
/* variante com 3 colunas forçadas (ex.: financeiro) */
.kpi-grid.kpi-3{ grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px){ .kpi-grid.kpi-3{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .kpi-grid.kpi-3{ grid-template-columns: 1fr; } }

/* gráfico */
.chart-container{ position:relative; width:100%; height:280px; }
.content-card .row{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }

/* ==============================================
   SELECTS
   ============================================== */
select{
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  display:inline-block; box-sizing:border-box;
  height:auto !important; min-height:48px !IMPORTANT;
  padding:10px 36px 12px 14px !important;
  font-size:16px !important; line-height:1.25 !important;
}
button, input, select{ line-height:1.2 !important; }

/* seta custom opcional (se usar wrapper .select-wrapper / .periodo-select) */
.select-wrapper, .periodo, .periodo-select{
  display:inline-flex; align-items:center; overflow:visible !important;
}
.select-wrapper::after, .periodo::after, .periodo-select::after{
  content:"▾"; margin-left:-28px; pointer-events:none; opacity:.7;
}

/* alguns containers não devem cortar o select */
.content-card, .kpi-card, .header, .container{ overflow:visible !important; }

/* ==============================================
   PDV – Comparativo do Clube (card do carrinho)
   ============================================== */
.cart-summary{ display:grid; gap:10px; }
#club-compare, .cart-summary .club-compare{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-top: 12px !important;
}
#club-compare .row, .cart-summary .club-compare .row{
  display:flex; justify-content:space-between; align-items:center;
  padding:6px 0; border-bottom:1px dashed #E5E7EB;
}
#club-compare .row:last-child, .cart-summary .club-compare .row:last-child{ border-bottom:0; }
#total-pagar.total-pagar{
  background:#F8FAFC; border:1px solid #E5E7EB; box-shadow:none; border-radius:12px;
}

/* ==============================================
   LOGIN — layout dividido + efeitos
   ============================================== */
.login-page { background: var(--bg); color: var(--txt); }

.login-wrapper{
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
}
@media (max-width: 980px){
  .login-wrapper{ grid-template-columns: 1fr; }
}

.login-image-section{
  position: relative;
  background-image: var(--login-bg, url('assets/img/login-bg.jpg'));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.login-image-section::after{
  content: "";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.35));
}
@media (max-width: 980px){
  .login-image-section{ height: 240px; }
}

.login-form-section{
  display:flex; align-items:center; justify-content:center;
  padding: 32px clamp(16px, 4vw, 48px);
}

.login-card{
  width:min(560px, 100%);
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-2);
  padding: 28px;
}
.login-card h1{
  font-size:24px; letter-spacing:-.02em; margin:0 0 4px; color:var(--txt);
}
.login-card .subtitle{ margin:0 0 16px; color: var(--txt-2); }

/* Mensagem de erro */
.alert-danger{
  margin: 8px 0 16px;
  padding: 10px 12px;
  border: 1px solid #f5c5c5;
  background: #fde8e8;
  color: #6f1e1e;
  border-radius: 8px;
  text-align: center;
}

/* Formulário */
.login-form{ display:block; } /* não herdar grid global */
.login-form .form-row{ display:grid; grid-template-columns: 1fr; gap:16px; }
.form-group label{
  display:block; font-size: 13px; color: var(--txt-2); margin-bottom: 6px;
}
.form-group input[type="email"],
.form-group input[type="password"]{
  width:100%;
  height:48px;
  padding:12px 14px;
  border:1px solid var(--border);
  border-radius:10px;
  background: var(--surface-2);
  color: var(--txt);
  line-height:1.2;
}
.form-group input::placeholder{ color:#a2a9b5; }
.form-group input:focus-visible{
  outline:2px solid transparent;
  box-shadow:0 0 0 3px rgba(255,179,0,.30);
}

/* Autofill (Chrome/Safari) */
.login-page input:-webkit-autofill,
.login-page input:-webkit-autofill:hover,
.login-page input:-webkit-autofill:focus{
  -webkit-text-fill-color: var(--txt);
  box-shadow: 0 0 0 1000px var(--surface-2) inset;
  transition: background-color 99999s ease;
}

/* Ações do formulário */
.login-actions{
  margin-top: 6px;
  display:flex; justify-content:flex-end;
}
.login-submit{ min-width:160px; height:46px; border-radius:10px; }

/* Link auxiliar */
.forgot-password{
  display:inline-block; margin-top: 12px; font-size: 13px;
  color: var(--txt-2); text-decoration: none;
}
.forgot-password:hover{ text-decoration: underline; color: var(--txt); }

/* Efeito de aparecer no bloco da imagem (fade + leve zoom) */
:root{ --login-hero-duration: 800ms; --login-bg: url('https://hookanimports.agenciaseveen.com.br/assets/img/login-bg.jpg'); }
.login-page .login-image-section{
  opacity:0; transform: scale(1.02);
  animation: loginHeroFade var(--login-hero-duration) ease-out forwards;
}
.login-page .login-image-section::after{
  opacity:0; animation: loginOverlayFade var(--login-hero-duration) ease-out forwards;
}
@keyframes loginHeroFade{ to { opacity:1; transform: none; } }
@keyframes loginOverlayFade{ to { opacity:1; } }

/* Acessibilidade: menos movimento */
@media (prefers-reduced-motion: reduce){
  .login-page .login-image-section,
  .login-page .login-image-section::after{
    animation:none !important; opacity:1 !important; transform:none !important;
  }
}

/* Mobile: botão 100% se a tela for estreita */
@media (max-width: 560px){
  .login-card{ padding:22px; }
  .login-actions{ justify-content:stretch; }
  .login-submit{ width:100%; }
}

/* ============================
   Dashboard (index) – tema amarelo + espaçamento
   ============================ */
.main-content.dashboard .kpi-grid{
  gap: 20px;
  margin-bottom: 28px;
}
.main-content.dashboard .kpi-card{
  background: var(--brand);
  color: #111;
  border: 0;
  box-shadow: var(--shadow-2);
  border-radius: 16px;
  transition: transform .12s ease, box-shadow .12s ease;
}
.main-content.dashboard .kpi-card:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 38px rgba(0,0,0,.18);
}
.main-content.dashboard .kpi-card .card-title{
  color: rgba(17,17,17,.8);
  opacity: 1;
}
.main-content.dashboard .kpi-card .card-value{ color:#111; }
.main-content.dashboard .kpi-card .badge,
.main-content.dashboard .kpi-card small{ color: rgba(17,17,17,.8); }

/* ======================================================
   PDV – Tabela do carrinho (FONTE DA VERDADE)
   ====================================================== */
.cart-section .cart-table{ width:100%; border-collapse:separate; border-spacing:0; }
.cart-section .cart-table thead th{
  position: sticky; top: 0; z-index: 1;
  background:#fff; box-shadow: 0 1px 0 #e5e7eb;
}
.cart-section .cart-table td{ vertical-align: top; }

/* alinhamentos numéricos */
.cart-section .cart-table th:nth-child(3),
.cart-section .cart-table td:nth-child(3),
.cart-section .cart-table th:nth-child(4),
.cart-section .cart-table td:nth-child(4){
  text-align: right;
  width: 160px;
  white-space: nowrap;
}

/* coluna QTD */
.cart-section .cart-table th:nth-child(2),
.cart-section .cart-table td:nth-child(2){
  text-align: center;
  width: 100px;
}
.cart-section .cart-table td:nth-child(2) input[type="number"]{
  width: 74px;
  text-align: center;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  background: #f3f4f6;
}

/* antes → depois em DUAS LINHAS */
.cart-section .cart-table .price-old{
  display:block;
  margin:0;
  font-size:12px;
  line-height:1.2;
  color:#9ca3af;
  text-decoration: line-through;
}
.cart-section .cart-table .price-new{
  display:block;
  margin:2px 0 0;
  font-size:15px;
  line-height:1.2;
  font-weight:700;
  color:#111827;
}
.cart-section .cart-table .price-new.has-discount{ color:#065f46; }

/* zebra + hover */
.cart-section .cart-table tbody tr:nth-child(odd){ background:#fcfcfd; }
.cart-section .cart-table tbody tr:hover{ background:#f3f4f6; }

/* ação alinhada */
.cart-section .cart-table td:last-child{ width:120px; text-align:right; }

/* Caixa “Total a pagar (Clube)” */
#total-pagar.container{
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  padding: 14px 16px;
  border-radius: 12px;
}

/* mobile: empilhar preço/subtotal */
@media (max-width: 720px){
  .cart-section .cart-table td:last-child{
    width:auto; text-align:left; padding-top:8px;
  }
  .cart-section .cart-table td .btn-acao{ width:100%; }
  .cart-section .cart-table td:nth-child(3),
  .cart-section .cart-table td:nth-child(4){
    min-width:0; display:block; margin-top:6px;
  }
  .cart-section .cart-table tr td:first-child{
    max-width:100%; word-break: break-word;
  }
}

/* === Clube Planos – Modal bonito (escopo dentro de .plan-modal) === */
.plan-modal .card-head{
  display:flex; align-items:center; gap:12px;
  padding:18px 22px 6px; border-bottom:1px solid #eef2f7;
  background: linear-gradient(180deg,#fff,#fafcff);
}
.plan-modal .badge{
  width:38px; height:38px; border-radius:12px;
  display:grid; place-items:center;
  background:#0b1220; color:#fff; font-size:18px;
}
.plan-modal .title{ margin:0; font-size:1.6rem; font-weight:800; color:#0b1220; letter-spacing:-.01em; }
.plan-modal .subtitle{ margin:2px 0 0; color:#6b7280; font-size:.95rem; }

.plan-modal .card-body{ padding:18px 22px; }
.plan-modal .grid{ display:grid; gap:18px; }
.plan-modal .grid-2{ grid-template-columns:1fr; }
@media (min-width:900px){ .plan-modal .grid-2{ grid-template-columns: 1.1fr .9fr; } }

.plan-modal label{ display:block; margin:0 0 8px; font-weight:700; color:#202a3b; }
.plan-modal input[type="text"],
.plan-modal input[type="number"]{
  width:100%; height:54px; border:1px solid var(--border);
  background:#eef2f7; color:#0b1220; border-radius:12px; padding:0 14px; font-weight:600;
}
.plan-modal input:focus{ outline:3px solid rgba(255,179,0,.25); outline-offset:1px; }

/* Campo com afixo R$ */
.plan-modal .affix-wrap{ position:relative; }
.plan-modal .affix{ position:absolute; left:14px; top:50%; transform:translateY(-50%); color:#6b7280; font-weight:900; }
.plan-modal .affix-input{ padding-left:46px; }

/* Segmented control (Mensal/Semestral/Anual) */
.plan-modal .segment{ display:flex; gap:10px; flex-wrap:wrap; }
.plan-modal .seg-btn{
  height:46px; padding:0 18px; border-radius:12px; border:1px solid #e6eaf2;
  background:#f7f9fc; color:#334155; font-weight:700; cursor:pointer;
  display:inline-flex; align-items:center; gap:8px;
  transition:transform .06s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.plan-modal .seg-btn:hover{ transform:translateY(-1px); }
.plan-modal .seg-btn.active{
  background: var(--brand,#ffb300); border-color: var(--brand,#ffb300); color:#111;
  box-shadow:0 10px 22px rgba(255,179,0,.22);
}

.plan-modal .card-foot{
  padding:10px 22px 20px; border-top:1px solid #eef2f7;
  display:flex; justify-content:flex-end; gap:10px; flex-wrap:wrap;
}
.plan-modal .btn-ghost{
  background:transparent; color:#475569; border:1px solid #e6eaf2;
  border-radius:12px; height:46px; padding:0 18px; font-weight:700;
}
.plan-modal .btn-save{
  background:var(--brand,#ffb300); color:var(--brand-text,#111);
  border:0; border-radius:12px; height:46px; padding:0 22px; font-weight:800;
  box-shadow:0 12px 28px rgba(229,179,0,.25);
}
.plan-modal .btn-save:hover{ filter:brightness(1.02); }

/* ======================================================
   PRODUTOS – helpers da seção Promoção
   (mantém o layout bonito SEM alterar o restante)
   ====================================================== */
.promo-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}
.promo-grid .chk{
  display:flex;
  align-items:center;
  gap:8px;
  padding-top:28px; /* alinha com os inputs ao lado */
}
.muted{ color: var(--txt-2); }
.small-note{
  font-size:.9rem;
  color: var(--txt-2);
  margin-top:-6px;
}

/* === Helpers adicionais (seguros) === */
.btn{ /* mapeia .btn a .btn-acao para telas que usam .btn */
  background: var(--brand); color:#111;
  border:0; border-radius: var(--radius-md);
  padding: 0 14px; font-weight:600;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height: var(--h-ctrl);
  cursor:pointer; text-decoration:none; transition: background-color .2s, transform .05s;
}
.btn:hover{ background: var(--brand-2); transform: translateY(-1px); }

.table-wrap{ width:100%; overflow:auto; background: var(--surface); border:1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-1); }
.table{ width:100%; border-collapse: collapse; }
.table th,.table td{ padding:.75rem .9rem; text-align:left; }
.table thead th{ background: var(--surface-2); color: var(--txt); border-bottom:1px solid var(--border); }
.table tbody tr + tr td{ border-top:1px solid var(--border); }

/* ============================
   Notificações Toast (flutuante — sem container)
   ============================ */
.toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: rgba(51, 51, 51, 0.95);
  color: #fff;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  box-shadow: 0 4px 10px rgba(0,0,0,0.25);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s, transform 0.3s;
  z-index: 9999;
}
.toast.show {
  opacity: 1;
  transform: translateY(0);
}

/* ============================
   Grid de Produtos — Estado Loading
   ============================ */
.product-grid.loading::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(2px);
  border-radius: 12px;
  z-index: 10;
}
.product-grid.loading::after {
  content: '';
  position: absolute;
  top: 100px;
  left: 50%;
  width: 40px;
  height: 40px;
  margin-left: -20px;
  border: 4px solid var(--surface-line, #e2e8f0);
  border-top-color: var(--brand-gold, #ffb800);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  z-index: 11;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================
   Botões e Cards — Ajustes
   ============================ */
.btn { transition: all 0.2s ease; }
.btn:disabled { opacity: 0.6; cursor: not-allowed; }
.product-card { transition: transform 0.25s ease, box-shadow 0.25s ease; }
.product-card:hover { transform: translateY(-5px); box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); }

/* ======================================================
   PÁGINA: Promoções (cliente_promocoes.php)
   ====================================================== */

/* Container principal da página */
.cliente-area{
  max-width: 1280px;
  margin: 0 auto;
  padding: 32px 16px;
}

/* Hero do topo */
.promo-hero{
  position: relative; overflow: hidden;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #0b1220, #1b2436);
  color: #fff;
  padding: 28px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-2);
}
.promo-hero h1{
  margin: 0 0 8px;
  font-size: clamp(1.6rem, 3.6vw, 2.4rem);
  font-weight: 800;
}

/* Badges do status do clube */
.badge{
  display:inline-flex; align-items:center; gap:6px;
  height:28px; padding:0 12px;
  border-radius: 999px; font-weight:700; font-size:.85rem;
}
.badge.gold{
  background: var(--brand); color:#111; border:1px solid rgba(0,0,0,.06);
}
.badge.gray{
  background:#e5e7ef; color:#374151; border:1px solid #d1d5db;
}

/* Toolbar de filtros */
.filters-toolbar{
  display:flex; flex-wrap:wrap; align-items:center; gap:16px;
  background: var(--surface);
  padding: 12px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  margin: 14px 0;
}
.filters-toolbar .filter-group{ min-width: 180px; flex: 0 1 auto; }
.filters-toolbar .search-group{ flex:1 1 360px; min-width: 240px; position:relative; }
.filters-toolbar .search-group i{
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  color: var(--u-text-muted); pointer-events:none;
}
.filters-toolbar .input,
.filters-toolbar select,
.filters-toolbar input[type="search"]{
  width:100%; height:48px;
  background:#fff;
  border:1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0 14px;
  font-weight:500;
}
.filters-toolbar .input{ padding-left: 42px; }
.filters-toolbar .btn-clear{
  background: transparent; border:0; color: var(--txt-2);
  font-weight:700; height:48px; padding:0 12px; border-radius: var(--radius-md);
}
.filters-toolbar .btn-clear:hover{ background: var(--surface-2); color: var(--txt); }

/* Resumo de resultados */
.results-summary{
  margin: 12px 0 20px;
  color: var(--txt-2);
  font-weight: 500;
}

/* Grid de produtos */
.product-grid{
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

/* Card de produto */
.product-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.product-image-wrapper{
  position: relative;
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, #f3f6ff, #eef9ff);
}
.product-image{ width:100%; height:100%; object-fit:cover; display:block; }
.discount-tag{
  position:absolute; top:12px; left:12px;
  background: var(--brand); color:#111;
  padding: 4px 10px; border-radius: 999px;
  font-size: .85rem; font-weight: 800;
  box-shadow: 0 2px 4px rgba(0,0,0,.15);
}

.product-info{ padding: 16px; display:flex; flex-direction:column; gap:8px; }
.product-title{ margin:0; font-weight:800; font-size:1.1rem; line-height:1.25; }
.product-pricing{
  margin-top:auto; padding-top:10px;
  border-top: 1px solid var(--border);
  display:flex; align-items:baseline; gap:10px;
}
.price-final{ font-size:1.6rem; font-weight:900; color: var(--txt); }
.price-final.is-club{ color: var(--success); }
.price-original{ color: var(--txt-2); text-decoration: line-through; font-weight:600; }

.club-badge{
  display:inline-block; margin-top:6px;
  background:#f0fdf4; color: var(--success);
  font-weight:700; font-size:.78rem; padding:4px 10px; border-radius:999px;
}

.product-actions{ padding:16px; border-top:1px solid var(--border); }
.product-actions .btn{ width:100%; }

/* CTA para preço exclusivo do clube */
.product-club-cta{
  background:#f0fdf4; padding:12px 16px; text-align:center;
  border-top:1px solid var(--border);
}
.product-club-cta strong{ color: var(--success); display:block; margin-bottom:6px; }

/* Estado vazio */
.empty-state{
  padding: 36px;
  border: 2px dashed var(--border);
  border-radius: var(--radius-lg);
  text-align: center;
  color: var(--txt-2);
}

/* Botões auxiliares da página */
.btn.primary{ background: var(--brand); color:#111; }
.btn.primary:hover{ background: var(--brand-2); }
.btn.ghost{ background: transparent; border:1px solid var(--border); color: var(--txt); }
.btn.ghost:hover{ background: var(--surface-2); }

/* Responsivo dos filtros */
@media (max-width: 960px){
  .filters-toolbar{ flex-direction: column; align-items: stretch; }
  .filters-toolbar .filter-group{ min-width: 100%; }
}
/* ============================
   Drawer de Carrinho (Sidebar)
   ============================ */
.drawer-overlay{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  opacity: 0; visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
  z-index: 2999;
}
.drawer-overlay.open{ opacity:1; visibility: visible; }

.cart-drawer{
  position: fixed; top: 0; right: 0;
  width: min(420px, 96vw); height: 100vh;
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: -18px 0 38px rgba(0,0,0,.18);
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(.2,.6,.2,1);
  display: flex; flex-direction: column;
  z-index: 3000;
}
.cart-drawer.open{ transform: translateX(0); }

.cart-drawer__header{
  display:flex; align-items:center; justify-content:space-between;
  padding: 16px 18px; border-bottom: 1px solid var(--border);
}
.cart-drawer__header h3{ margin:0; font-size:1.1rem; font-weight:800; }
.cart-drawer__close{
  background: transparent; border:0; font-size: 2rem; line-height:1;
  color: var(--txt-2); cursor: pointer; padding: 0 6px;
}

.cart-drawer__content{
  flex: 1 1 auto; overflow:auto; padding: 14px 16px;
}
.cart-line{
  display:grid; grid-template-columns: 64px 1fr auto; gap:12px;
  padding: 10px 0; border-bottom: 1px solid var(--border);
}
.cart-line__img{
  width:64px; height:64px; border-radius: 10px; overflow:hidden;
  background: var(--surface-2); display:grid; place-items:center;
}
.cart-line__img img{ width:100%; height:100%; object-fit:cover; display:block; }
.cart-line__info{ display:flex; flex-direction:column; gap:6px; }
.cart-line__title{ margin:0; font-weight:700; font-size:.98rem; line-height:1.25; }
.cart-line__meta{ color: var(--txt-2); font-size:.9rem; }
.cart-line__qty{
  display:inline-flex; align-items:center; gap:8px; background:#f3f4f6;
  border:1px solid var(--border); border-radius:10px; padding:4px 8px;
}
.cart-line__qty input{
  width:48px; text-align:center; height:32px; border:0; background:transparent;
}
.cart-line__qty button{
  width:28px; height:28px; border-radius:8px; border:0; cursor:pointer;
  background:#fff; border:1px solid var(--border);
}
.cart-line__price{ font-weight:800; white-space:nowrap; }

.cart-empty{
  display:grid; place-items:center; text-align:center; color: var(--txt-2);
  padding: 24px 8px;
}
.cart-empty i{ font-size: 2rem; margin-bottom: 8px; }

.cart-drawer__footer{
  border-top: 1px solid var(--border);
  padding: 14px 16px; display:grid; gap:12px;
  background: #fafbff;
}
.cart-total{ display:flex; align-items:center; justify-content:space-between; }
.cart-total strong{ font-size:1.2rem; }
/* ========== Carrinho Flutuante (canto inferior direito) ========== */
.fc{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 2000;
  display: grid;
  gap: 10px;
  align-items: end;
}
.fc-toggle{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid var(--border, #e5e7eb);
  background: var(--surface, #fff);
  color: var(--txt, #111);
  box-shadow: var(--shadow-1, 0 6px 14px rgba(0,0,0,.08));
  cursor: pointer;
  font-weight: 800;
}
.fc-toggle .bi{ font-size: 1.1rem; }
.fc-badge{
  min-width: 22px; height: 22px; border-radius: 999px;
  background: var(--brand, #ffb300); color: #111;
  display: inline-grid; place-items:center; font-weight: 900; font-size: .8rem;
}
.fc-panel{
  width: min(380px, calc(100vw - 40px));
  max-height: 66vh;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 14px;
  box-shadow: var(--shadow-2, 0 16px 30px rgba(0,0,0,.12));
  overflow: hidden;
  transform: translateY(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.fc.open .fc-panel{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.fc-head{
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-bottom: 1px solid var(--border, #e5e7eb);
  background: var(--surface-2, #f8fafc);
}
.fc-close{
  background: transparent; border: 0; cursor: pointer; color: var(--txt-2, #475569);
  font-size: 1rem;
}
.fc-items{
  max-height: 44vh; overflow: auto; padding: 10px 12px;
  display: grid; gap: 10px;
}
.fc-item{
  display: grid; grid-template-columns: 56px 1fr auto; gap: 10px;
  align-items: center; border: 1px solid var(--border, #e5e7eb);
  border-radius: 12px; padding: 8px;
}
.fc-thumb{
  width: 56px; height: 56px; border-radius: 10px; overflow: hidden;
  background: #f3f4f6; display: grid; place-items: center;
}
.fc-thumb img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.fc-info{
  display: grid; gap: 4px;
}
.fc-name{ font-weight: 700; font-size: .95rem; line-height: 1.2; }
.fc-meta{ font-size: .85rem; color: var(--txt-2, #64748b); }
.fc-sub{ font-weight: 800; }
.fc-empty{
  text-align: center; color: var(--txt-2, #64748b); padding: 10px; font-size: .95rem;
}
.fc-foot{
  padding: 12px 14px; border-top: 1px solid var(--border, #e5e7eb);
  background: var(--surface, #fff); display: grid; gap: 10px;
}
.fc-total{
  display: flex; align-items: center; justify-content: space-between;
  font-size: 1rem;
}
.fc-total strong{ font-size: 1.15rem; }
.fc-actions .btn{
  width: 100%;
  background: var(--brand, #ffb300); color: #111; font-weight: 900;
  height: 46px; border-radius: 12px; border: 0; cursor: pointer;
}
@media (max-width: 560px){
  .fc{ right: 12px; bottom: 12px; }
  .fc-toggle{ height: 44px; }
}
/* Promo recolhível */
.promo-actions-row{
  display:flex; gap:10px; align-items:center; justify-content:space-between;
  padding:6px 0 2px;
}
.promo-panel{
  display:none; /* começa fechada */
  border:1px dashed var(--border);
  background:#fffef8;
  border-radius:10px;
  padding:12px;
  margin-top:10px;
}
.promo-panel.open{ display:block; }
.promo-title{
  margin:0 0 8px; font-size:1rem; font-weight:800;
  display:flex; align-items:center; gap:8px;
}
/* Modal base */
.smodal{position:fixed;inset:0;display:none;z-index:1000}
.smodal[aria-hidden="false"]{display:block}
.smodal__backdrop{position:absolute;inset:0;backdrop-filter:blur(6px);background:rgba(2,6,23,.45)}
.smodal__card{
  position:relative; z-index:1; width:min(760px,92vw); margin:6vh auto; border-radius:18px;
  background:#0f172a; color:#e5e7eb; border:1px solid #1f2937;
  box-shadow:0 20px 60px rgba(2,6,23,.55), inset 0 0 0 1px rgba(255,255,255,.02);
  padding:18px 18px 14px;
}
.smodal__close{
  position:absolute; right:10px; top:8px; width:36px; height:36px; border-radius:10px;
  border:1px solid #233044; background:#0b1220; color:#cbd5e1; font-size:20px; cursor:pointer;
}
.smodal__header{display:flex;gap:12px;align-items:center;margin:6px 0 12px}
.smodal__header h3{margin:0;font-size:1.25rem}
.smeta{margin:2px 0 0;color:#94a3b8}

.sicon{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  border:1px solid #233044;background:#0b1220;font-size:20px}
.sgrid{display:grid;grid-template-columns:240px 1fr; gap:16px}
@media (max-width:720px){.sgrid{grid-template-columns:1fr}}

.sqr{display:grid;place-items:center}
.sqr img{width:220px;height:220px;border-radius:16px;border:1px solid #233044;background:#0b1220}

.sinfo{display:flex;flex-direction:column;gap:12px}
.slink{
  max-height:88px; overflow:auto; font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  background:#0b1220; border:1px solid #233044; padding:10px 12px; border-radius:12px; word-break:break-all
}
.sactions{display:flex;flex-wrap:wrap;gap:8px}
.sbtn{
  appearance:none; border:1px solid #233044; background:#111827; color:#e5e7eb;
  padding:10px 14px; border-radius:12px; font-weight:800; cursor:pointer; display:inline-flex; gap:8px; align-items:center
}
.sbtn--primary{background:#f59e0b;color:#111827;border-color:#f59e0b}
.sbtn:hover{filter:brightness(1.04)}
.sfoot{margin-top:8px;display:flex;justify-content:flex-end}
.stip{color:#94a3b8;font-size:.92rem}

/* Toast */
.stoast{
  position:fixed; right:16px; bottom:16px; z-index:1100; min-width:200px; max-width:70vw;
  padding:12px 14px; border-radius:12px; background:#0b1220; color:#e5e7eb;
  border:1px solid #233044; box-shadow:0 10px 30px rgba(2,6,23,.6); opacity:0; transform:translateY(8px);
  transition:opacity .18s ease, transform .18s ease;
}
.stoast--show{opacity:1; transform:translateY(0)}
/* ===== Share Modal / Toast ===== */
#share-modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(15,23,42,.5);z-index:9999}
#share-modal .card{width:min(560px,92vw);background:#fff;border-radius:16px;box-shadow:0 30px 80px rgba(0,0,0,.2);padding:18px 18px 16px;border:1px solid #e5e7eb}
#share-modal .head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
#share-modal .head h3{margin:0;font-size:1.1rem}
#share-modal .close{appearance:none;background:transparent;border:0;font-size:22px;cursor:pointer;line-height:1}
#share-modal .dest{display:flex;gap:8px;margin:10px 0 12px}
#share-modal .dest input{flex:1;padding:12px 12px;border:1px solid #e5e7eb;border-radius:12px;background:#f8fafc;font-weight:700}
#share-modal .row{display:flex;gap:8px;flex-wrap:wrap}
#share-modal .row .btn{flex:1 1 140px;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;border:1px solid #e5e7eb;border-radius:12px;background:#0ea5e9;color:#fff;font-weight:800;cursor:pointer}
#share-modal .row .btn.secondary{background:#f3f4f6;color:#111}
#share-modal .row .btn:disabled{opacity:.6;cursor:not-allowed}
#share-toast{position:fixed;bottom:18px;right:18px;background:#0f172a;color:#fff;border-radius:12px;padding:10px 14px;font-weight:700;box-shadow:0 12px 30px rgba(0,0,0,.25);z-index:10000;display:none}
#share-toast.ok{background:#065f46}
#share-toast.err{background:#991b1b}
<style>
/* ===== Toasts ===== */
#toast-stack{
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 9999;
  display: grid;
  gap: 10px;
  pointer-events: none; /* clicks passam quando não em cima do toast */
}
.toast{
  --bg:#0b1220; --fg:#e5e7eb; --accent:#64748b;
  width: min(380px, calc(100vw - 32px));
  border-radius: 14px;
  padding: 12px 14px 10px 12px;
  box-shadow: 0 12px 30px rgba(2,6,23,.28);
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0)) ,
    var(--bg);
  color: var(--fg);
  border: 1px solid rgba(255,255,255,.12);
  display: grid;
  grid-template-columns: auto 1fr auto;
  column-gap: 12px;
  row-gap: 6px;
  pointer-events: auto; /* clicável */
  animation: toastIn .35s ease-out forwards;
}
.toast.hide{ animation: toastOut .28s ease-in forwards; }

.toast .icon{
  display:grid; place-items:center;
  width: 36px; height: 36px; border-radius: 10px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  font-size: 18px;
}
.toast .title{ font-weight: 800; line-height: 1.1; letter-spacing:.2px; }
.toast .msg{ opacity:.95; font-size:.95rem }
.toast .close{ opacity:.7; cursor:pointer; user-select:none }
.toast .close:hover{ opacity:1 }

.toast .bar{
  grid-column: 1 / -1;
  height: 3px; border-radius: 99px; overflow:hidden; background: rgba(255,255,255,.14);
}
.toast .bar > span{
  display:block; height:100%; width:100%;
  transform-origin:left center; transform: scaleX(1);
  background: var(--accent);
  animation: toastBar linear forwards;
}

/* tipos */
.toast.success{ --bg:#052e1c; --fg:#ecfdf5; --accent:#10b981; }
.toast.danger { --bg:#3b0a0a; --fg:#fee2e2; --accent:#ef4444; }
.toast.warning{ --bg:#372107; --fg:#fef3c7; --accent:#f59e0b; }
.toast.info   { --bg:#0b1730; --fg:#e0e7ff; --accent:#3b82f6; }

/* animações */
@keyframes toastIn{
  from{ opacity:0; transform: translateY(-12px) scale(.98) }
  to  { opacity:1; transform: translateY(0)    scale(1) }
}
@keyframes toastOut{
  to{ opacity:0; transform: translateY(-8px) scale(.98) }
}
</style>