/* ===== Reset / base ===== */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

:root {
  /* Identidade Palhadini: marrom #62382B e baunilha #E2CDBA */
  --bg: #E2CDBA;
  --surface: #F2E6D8;
  --surface-2: #FBF4EA;
  --border: #C4A78D;
  --text: #3A2318;
  --text-dim: #7C5B47;
  --on-primary: #F7EDE2;
  --primary: #62382B;
  --primary-press: #4C2A20;
  --secondary: #8A5B45;
  --success: #2e7d32;
  --success-press: #1b5e20;
  --danger: #b3261e;
  --warning: #9a5b00;
  --radius: 14px;
}

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  overscroll-behavior: none;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

/* ===== Topbar ===== */
.topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  padding-top: calc(10px + env(safe-area-inset-top));
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 20;
}

.topbar-title { font-size: 1.05rem; font-weight: 600; flex: 1; }

.topbar-logo { height: 30px; width: auto; }

.sync-indicator { font-size: 0.8rem; color: var(--text-dim); }

.icon-btn {
  background: none;
  border: none;
  color: var(--text);
  font-size: 1.4rem;
  padding: 6px 10px;
  cursor: pointer;
}

/* ===== Drawer (toolbar recolhida) ===== */
.drawer {
  position: fixed;
  inset: 0;
  background: rgba(58, 35, 24, .55);
  z-index: 40;
}

.drawer-content {
  background: var(--surface);
  width: min(85%, 320px);
  height: 100%;
  padding: 20px 16px;
  padding-top: calc(20px + env(safe-area-inset-top));
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.drawer-content h2 { font-size: 1.1rem; }
.drawer-info { color: var(--text-dim); font-size: 0.85rem; line-height: 1.5; white-space: pre-line; }
.drawer-content .btn-ghost { margin-top: auto; }

/* ===== Telas ===== */
#app { flex: 1; display: flex; flex-direction: column; overflow: hidden; }

.screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 16px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
  overflow-y: auto;
  gap: 14px;
}

.hidden { display: none !important; }

.screen-header {
  display: flex;
  align-items: center;
  gap: 8px;
}
.screen-header h2 { font-size: 1.15rem; flex: 1; }

/* ===== Botões ===== */
.btn {
  border: none;
  border-radius: var(--radius);
  font-size: 1rem;
  font-weight: 600;
  padding: 14px 18px;
  cursor: pointer;
  color: var(--text);
  background: var(--surface-2);
  transition: filter .1s, transform .05s;
  touch-action: manipulation;
}
.btn:active { transform: scale(.98); filter: brightness(.95); }
.btn:disabled { opacity: .4; pointer-events: none; }

.btn-primary { background: var(--primary); color: var(--on-primary); }
.btn-primary:active { background: var(--primary-press); }
.btn-secondary { background: var(--secondary); color: var(--on-primary); }
.btn-success { background: var(--success); color: #fff; }
.btn-success:active { background: var(--success-press); }
.btn-outline { background: transparent; border: 1.5px solid var(--border); }
.btn-ghost { background: transparent; color: var(--text-dim); }
.btn-wide { width: 100%; }

.btn-huge {
  font-size: 1.5rem;
  padding: 34px 24px;
  width: 100%;
  border-radius: 20px;
  box-shadow: 0 6px 24px rgba(98, 56, 43, .4);
}

/* ===== Home ===== */
#screen-home { justify-content: space-between; }
.home-dashboard {
  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
  color: var(--on-primary);
  border-radius: 22px;
  padding: 16px;
  box-shadow: 0 12px 32px rgba(98, 56, 43, .24);
}
.home-dashboard-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.dashboard-title {
  font-size: 1rem;
  font-weight: 700;
}

/* Botão circular para ocultar/exibir os valores monetários */
.eye-btn {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.16);
  font-size: 1.05rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, transform .1s;
}
.eye-btn:active { transform: scale(.92); background: rgba(255,255,255,.3); }

/* ----- Indicador principal da meta ----- */
.meta-hero {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}
.meta-hero-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.meta-total-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.meta-total {
  font-size: clamp(1.9rem, 8vw, 2.6rem);
  font-weight: 900;
  line-height: 1;
  color: #fff7e9;
  letter-spacing: -0.02em;
}

/* Horário + dias: à direita, abaixo do olho, alinhado com o total */
.schedule-box {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-shrink: 0;
}
.schedule-box:empty { display: none; }
.sched-icon { font-size: 1.7rem; line-height: 1; }
.sched-col {
  display: flex;
  flex-direction: column;
  gap: 1px;
  text-align: right;
}
.sched-hours { font-size: .92rem; font-weight: 800; white-space: nowrap; }
.sched-days { font-size: .74rem; opacity: .9; white-space: nowrap; }
.meta-progress-track {
  height: 16px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .28);
  overflow: hidden;
}
.meta-progress-fill {
  position: relative;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #f0b35c, #ffd98a);
  box-shadow: 0 0 12px rgba(255, 217, 138, .5);
  transition: width 1.2s cubic-bezier(.22, 1, .36, 1);
  overflow: hidden;
}
/* Brilho em loop infinito — efeito apenas visual, não altera a largura */
.meta-progress-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg,
    transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: metaShine 2.4s ease-in-out infinite;
}
@keyframes metaShine {
  0%   { transform: translateX(-100%); }
  60%, 100% { transform: translateX(100%); }
}
.meta-progress-info {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: .82rem;
  opacity: .92;
}
#dash-meta-pct { font-size: 1.05rem; font-weight: 800; }

.dashboard-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.metric-card {
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 14px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.metric-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  opacity: .88;
}
.metric-card strong {
  font-size: 1.05rem;
  font-weight: 700;
}

/* Atualização e última venda: rótulo à esquerda, valores numa
   segunda coluna alinhados entre si */
.dashboard-freshness {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: start;
  column-gap: 10px;
  row-gap: 2px;
  margin-top: 10px;
  font-size: .72rem;
  opacity: .85;
}
.fresh-label { opacity: .8; }
.fresh-val { font-variant-numeric: tabular-nums; }

.btn-ver-mais {
  width: 100%;
  margin-top: 12px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 12px;
  background: rgba(255,255,255,.1);
  color: var(--on-primary);
  font-size: .88rem;
  font-weight: 700;
  cursor: pointer;
}
.btn-ver-mais:active { background: rgba(255,255,255,.22); }

/* ----- Área analítica expansível ----- */
.dash-more {
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: dashMoreIn .35s ease-out;
}
@keyframes dashMoreIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.chart-block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
}
.chart-block h4 {
  font-size: .85rem;
  margin-bottom: 10px;
}
.chart-empty {
  font-size: .82rem;
  color: var(--text-dim);
  text-align: center;
  padding: 12px 4px;
}

/* Barras horizontais */
.bar-chart { display: flex; flex-direction: column; gap: 8px; }
.bar-row {
  display: grid;
  grid-template-columns: minmax(0, 42%) 1fr auto;
  align-items: center;
  gap: 8px;
  font-size: .78rem;
}
.bar-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bar-track {
  height: 12px;
  border-radius: 999px;
  background: rgba(98, 56, 43, .12);
  overflow: hidden;
}
.bar-fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--secondary), var(--primary));
  transition: width .9s cubic-bezier(.22, 1, .36, 1);
}
.bar-fill.low { background: linear-gradient(90deg, #d9a441, #b97a2a); }
.bar-qty { font-weight: 700; min-width: 22px; text-align: right; }

/* Gráfico de linha */
.line-chart svg { width: 100%; height: auto; display: block; }
.line-chart .line-path {
  fill: none;
  stroke: var(--primary);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.line-chart .axis-label {
  font-size: 9px;
  fill: var(--text-dim);
}
.line-chart .point-label {
  font-size: 10px;
  font-weight: 700;
  fill: var(--primary);
}
.home-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.home-bottom { padding-bottom: 8px; }
.btn-home-cta {
  animation: homePulse 1.6s ease-in-out infinite;
  box-shadow: 0 10px 28px rgba(98, 56, 43, .32);
  transform: translateY(0);
}
.btn-home-secondary {
  box-shadow: 0 6px 20px rgba(138, 91, 69, .18);
}
.btn-home-cta:active, .btn-home-secondary:active {
  transform: scale(.98);
}

@keyframes homePulse {
  0%, 100% { transform: translateY(0); box-shadow: 0 10px 28px rgba(98, 56, 43, .32); }
  50% { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(98, 56, 43, .38); }
}

/* Telas maiores (tablet/desktop): dashboard mais confortável */
@media (min-width: 640px) {
  #screen-home { max-width: 640px; width: 100%; margin: 0 auto; }
  .dashboard-metrics { grid-template-columns: 1fr 1fr; }
}

/* ===== Pedido ===== */
.order-items { display: flex; flex-direction: column; gap: 10px; }

.order-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.order-item-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}
.order-item-name { font-weight: 600; }
.order-item-code { font-size: 0.75rem; color: var(--text-dim); }

.order-item-remove {
  background: none;
  border: none;
  color: var(--danger);
  font-size: 1.3rem;
  padding: 0 6px;
  cursor: pointer;
}

.order-item-fields {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.field label { font-size: 0.7rem; color: var(--text-dim); text-transform: uppercase; }

input, .field input {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-size: 1rem;
  padding: 10px;
  width: 100%;
  min-width: 0;
}
input:focus { outline: 2px solid var(--primary); border-color: transparent; }

.qty-field {
  display: flex;
  align-items: center;
  gap: 4px;
}
.qty-field button {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 1.1rem;
  width: 34px;
  height: 40px;
  flex-shrink: 0;
  cursor: pointer;
}
.qty-field input { text-align: center; padding: 10px 4px; }

.order-footer {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.order-total-row {
  display: flex;
  justify-content: space-between;
  font-size: 1.2rem;
}
.order-paid-row { font-size: .85rem; color: var(--warning); }

.order-empty {
  text-align: center;
  color: var(--text-dim);
  padding: 30px 10px;
}

/* ===== Scanner ===== */
.screen-scanner { padding: 12px; gap: 10px; }

.scanner-video-wrap {
  position: relative;
  flex: 1;
  min-height: 40dvh;
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
}
#scanner-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.scanner-frame {
  position: absolute;
  inset: 18% 10%;
  border: 2px solid rgba(255,255,255,.75);
  border-radius: 12px;
  pointer-events: none;
}
.scanner-status {
  position: absolute;
  bottom: 10px;
  width: 100%;
  text-align: center;
  font-size: 0.85rem;
  color: #fff;
  text-shadow: 0 1px 3px #000;
}

.scanner-manual { display: flex; gap: 8px; }
.scanner-manual input { flex: 1; }

/* ===== Pagamento ===== */
.pay-summary {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pay-line { display: flex; justify-content: space-between; font-size: .95rem; }
.pay-line-remaining { font-size: 1.15rem; color: var(--warning); }
.pay-line-remaining.paid-ok { color: var(--success); }
.pay-line-discount { color: var(--danger); }

.pay-entries { display: flex; flex-direction: column; gap: 8px; }
.pay-entry {
  display: flex;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  gap: 8px;
}
/* O nome da modalidade ocupa a sobra; o valor fica alinhado à direita, junto ao X */
.pay-entry .method { flex: 1; }
.pay-entry .amount { text-align: right; }
.pay-entry-remove {
  background: none;
  border: none;
  color: var(--danger);
  font-size: 1.2rem;
  cursor: pointer;
}

.pay-methods {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.btn-method { padding: 18px 10px; }
.btn-discount {
  grid-column: 1 / -1;
  background: transparent;
  border: 1.5px dashed var(--warning);
  color: var(--warning);
}

/* Botão maior para facilitar o toque durante o evento */
#btn-finish-order {
  margin-top: auto;
  font-size: 1.25rem;
  padding: 24px 18px;
  border-radius: 18px;
}

/* ===== Modais ===== */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(58, 35, 24, .6);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 50;
}

.modal-box {
  background: var(--surface);
  border-radius: 20px 20px 0 0;
  padding: 22px 18px;
  padding-bottom: calc(22px + env(safe-area-inset-bottom));
  width: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 88dvh;
  overflow-y: auto;
}
.modal-box h3 { font-size: 1.1rem; text-align: center; }
.modal-text { color: var(--text-dim); font-size: .9rem; line-height: 1.5; text-align: center; }
.modal-tall { height: 88dvh; }

/* Busca - categorias (rolagem horizontal) */
.search-categories {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  flex-shrink: 0;
  padding-bottom: 4px;
  scrollbar-width: none;          /* Firefox */
  -webkit-overflow-scrolling: touch;
}
.search-categories::-webkit-scrollbar { display: none; }

/* Largura conforme o conteúdo: cards curtos ficam compactos e os longos
   são limitados pelo max-width (o texto quebra em até 2 linhas) */
.cat-chip {
  flex: 0 0 auto;
  min-width: 76px;
  max-width: 132px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--surface-2);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  color: var(--text);
  font-size: .72rem;
  font-weight: 600;
  padding: 10px;
  cursor: pointer;
}
.cat-chip img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}
/* Texto em no máximo 2 linhas; o excedente vira reticências */
.cat-chip span {
  max-width: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
  word-break: break-word;
  text-align: center;
  line-height: 1.2;
}
/* Ativo: destaca sem pintar o fundo de marrom, para não
   prejudicar ícones coloridos vindos da API */
.cat-chip.active {
  border: 2.5px solid var(--primary);
  background: rgba(98, 56, 43, .12);
  color: var(--primary);
}

/* Busca - cabeçalho de grupo por categoria */
.search-cat-title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  padding: 0 2px 2px;
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-dim);
  border-bottom: 1px dashed var(--border);
}
.search-cat-title:first-child { margin-top: 0; }
.search-cat-title img { width: 16px; height: 16px; object-fit: contain; }

/* Busca */
.search-results {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.search-result {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.search-result .name { font-weight: 600; }
.search-result .code { font-size: .75rem; color: var(--text-dim); }
.search-result .price { font-weight: 700; white-space: nowrap; }

/* Quantidade */
.qty-price { text-align: center; color: var(--text-dim); }
.qty-stepper {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
}
.qty-stepper input {
  width: 90px;
  text-align: center;
  font-size: 1.6rem;
  font-weight: 700;
  padding: 12px 6px;
}
.btn-step {
  font-size: 1.8rem;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  padding: 0;
  background: var(--surface-2);
  border: 1px solid var(--border);
}

/* Pagamento - valor */
.pay-amount-hint { text-align: center; color: var(--text-dim); }
.money-input-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.4rem;
}
.money-input-wrap input {
  font-size: 1.6rem;
  font-weight: 700;
  text-align: right;
}
.pay-shortcuts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* ===== Resumo ===== */
.summary-top { padding-bottom: 4px; }
.summary-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: center;
}
.summary-check { font-size: 2.2rem; }
.summary-date { color: var(--text-dim); font-size: .85rem; }
.summary-items {
  text-align: left;
  border-top: 1px dashed var(--border);
  border-bottom: 1px dashed var(--border);
  padding: 10px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: .92rem;
}
.summary-item { display: flex; justify-content: space-between; gap: 10px; }
.summary-item .qn { color: var(--text-dim); }
.summary-totals {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: .95rem;
}
.summary-totals .line { display: flex; justify-content: space-between; }
.summary-totals .line.total { font-size: 1.2rem; font-weight: 700; }
.summary-totals .line.dim { color: var(--text-dim); font-size: .85rem; }

/* ===== Histórico ===== */
.history-list { display: flex; flex-direction: column; gap: 10px; }

.history-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.history-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.history-head::after {
  content: "›";
  font-size: 1.3rem;
  color: var(--text-dim);
  margin-left: 2px;
}
.history-number { font-weight: 700; }
.history-date { font-size: .78rem; color: var(--text-dim); }
.history-total { font-weight: 700; }

.history-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.history-actions .btn { padding: 8px 12px; font-size: .85rem; flex: 1; }
.btn-edit { background: var(--surface-2); }
.btn-delete { background: transparent; border: 1px solid var(--danger); color: var(--danger); }

.sync-badge {
  border: none;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
  padding: 6px 10px;
  cursor: pointer;
  white-space: nowrap;
}
.sync-badge.synced { background: rgba(46,125,50,.15); color: var(--success); }
.sync-badge.pending { background: rgba(154,91,0,.15); color: var(--warning); }

.history-empty { text-align: center; color: var(--text-dim); padding: 40px 10px; }

/* ===== Seleção de evento ===== */
.event-step {
  font-size: .78rem;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
}
.option-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 26dvh;
  overflow-y: auto;
}
.option-btn {
  background: var(--surface-2);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-size: .95rem;
  font-weight: 600;
  padding: 12px;
  text-align: left;
  cursor: pointer;
}
.option-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-primary);
}

/* ===== Versão do app ===== */
.app-version {
  position: fixed;
  right: 10px;
  bottom: calc(4px + env(safe-area-inset-bottom));
  font-size: .68rem;
  color: var(--text-dim);
  opacity: .8;
  z-index: 30;
  pointer-events: none;
}

/* ===== Toast ===== */
.toast {
  position: fixed;
  bottom: calc(24px + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 12px 20px;
  border-radius: 999px;
  font-size: .9rem;
  z-index: 100;
  max-width: 90%;
  text-align: center;
  box-shadow: 0 4px 16px rgba(0,0,0,.4);
}