.badge-custom {
  background-color: #ff5a1f; /* Laranja */
  color: #fff;
  font-weight: 600;
  border-radius: 999px;
  padding: 4px 12px;
  display: inline-block;
  font-size: 0.85rem;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  min-width: 60px;
  text-transform: capitalize;
}

.badge-custom:empty {
  display: none; /* Oculta se estiver vazio */
}
.fade-check {
  transition: opacity 0.5s ease;
  vertical-align: middle;
}
#produtosTable td.editable {
  overflow: visible;
}
@media (max-width: 768px) {
  #btnNovoProduto {
    width: 100%;
    justify-content: center;
  }
}
.periodo-btn.ativo {
  background: #198754 !important; /* success */
  color: #fff !important;
  border-color: #198754 !important;
}
.table-striped tbody tr:nth-of-type(odd) {
  background-color: #f9fafb;
}
#tblFornecedores td,
#tblProdutos td {
  padding: 0.65rem 0.75rem;
}
#tblFornecedores td:first-child,
#tblProdutos td:first-child {
  font-weight: 600;
  color: #0d6efd;
}
.table-custom {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}

.table-custom th {
  border-bottom: 2px solid #e9ecef;
  color: #6c757d;
  font-weight: 600;
  font-size: 0.875rem;
  text-transform: uppercase;
  background-color: #f8f9fa;
}

.table-custom td {
  border-bottom: 1px solid #f1f3f4;
  padding: 0.75rem 0.9rem;
  vertical-align: middle;
  transition:
    background-color 0.15s ease,
    box-shadow 0.15s ease;
}

.table-custom tbody tr:hover {
  background-color: #f8faff;
  box-shadow: inset 3px 0 0 #0d6efd;
}

.table-custom tbody tr:last-child td {
  border-bottom: none;
}

.table-custom td:first-child {
  font-weight: 600;
  color: #0d6efd;
}
.badge {
  border-radius: 999px;
  font-size: 16px;
  padding: 4px 12px;
  font-weight: 600;
  text-transform: capitalize;
}
#buscaCategoria {
  border-radius: 8px;
  transition: all 0.2s ease;
}
#buscaCategoria:focus {
  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}
.unidade-header td {
  border: none !important;
  background: transparent !important;
}
.table > :not(caption) > * > * {
  border-color: #e9ecef;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.scroll-y {
  overflow-y: auto;
}

.scroll-y::-webkit-scrollbar {
  width: 6px;
}

.scroll-y::-webkit-scrollbar-thumb {
  background-color: #d1d3e0;
  border-radius: 4px;
}

/* ===== HEADER PADRÃO ===== */
.header-cardapio {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px;
  padding-top: 1.75rem;
  padding-bottom: 1.75rem;
}

.header-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}

.header-title {
  font-weight: 800;
  font-size: 1.05rem;
  margin: 0;
  line-height: 1.2;
  display: flex;
  align-items: center;
  gap: 8px;
}

.badge-count {
  background: #eef4ff;
  color: #0d6efd;
  font-size: 0.75rem;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 700;
}

.header-sub {
  font-size: 0.8rem;
  color: #8a94a6;
  line-height: 1.1;
}

/* ===== BOTÃO NOVA ===== */
.header-right {
  display: flex;
  align-items: center;
}

.btn-nova {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-weight: 700;
  white-space: nowrap;
}

/* ===== MOBILE ===== */
@media (max-width: 576px) {
  .header-cardapio {
    padding: 14px;
  }

  .header-title {
    font-size: 1rem;
  }

  .btn-nova {
    padding: 8px 12px;
    font-size: 0.9rem;
  }

  .header-left {
    transform: translateY(-1px);
    /* 👈 micro-ajuste visual */
  }

  .btn-nova {
    height: 36px;
    /* iguala “peso” visual */
    padding: 0 12px;
  }

  /* opcional: se quiser só o + no mobile */
  .btn-nova .btn-text {
    display: none;
  }
}
.sortable-ghost {
  opacity: 0.4;
}

.sortable-chosen {
  background: #f8f9fb;
}

.td-pos {
  cursor: grab;
}

.td-pos:active {
  cursor: grabbing;
}

@media (max-width: 991px) {
  .td-pos {
    cursor: default;
  }
}

.drag-handle {
  cursor: grab;
  color: #6c757d;
  font-size: 1.2rem;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.drag-handle:active {
  cursor: grabbing;
}

.drag-disabled .drag-handle {
  opacity: 0.25;
  cursor: not-allowed;
  pointer-events: none;
}

/* no mobile fica mais evidente */
@media (max-width: 991px) {
  .drag-handle {
    font-size: 1.4rem;
    padding: 6px;
  }
}

.drag-handle-mobile {
  display: none;
}

@media (max-width: 576px) {
  .drag-handle-mobile {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 36px;
    height: 36px;

    background: #f1f5ff;
    border: 1px solid rgba(13, 110, 253, 0.15);
    border-radius: 10px;

    color: #0d6efd;
    font-size: 1.6rem;

    cursor: grab;
    touch-action: none;
  }

  .drag-handle-mobile:active {
    cursor: grabbing;
    background: #e7eeff;
  }
}

.sortable-chosen {
  box-shadow: 0 6px 20px rgba(13, 110, 253, 0.15);
  transform: scale(1.01);
}

.toggle-status {
  cursor: pointer;
}

.pos-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 22px;
  border-radius: 999px;
  padding: 0 10px;
  background: #f1f5ff;
  color: #0d6efd;
  font-weight: 800;
  font-size: 0.75rem;
  border: 1px solid rgba(13, 110, 253, 0.15);
}

.table-title {
  font-weight: 800;
  font-size: 1.3rem;
  line-height: 1.2;
  margin: 0;
}

.table-desc {
  margin-top: 4px;
  color: #6c757d;
  font-size: 0.9rem;
  line-height: 1.2;
}

/* ===== GRID ===== */
.icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
  gap: 12px;
  margin-top: 10px;
  animation: fadeInIcons 0.25s ease;
}

/* ===== ITEM BASE ===== */
.icon-item {
  border-radius: 14px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  padding: 10px 6px;
  cursor: pointer;
  transition: all 0.2s ease;

  height: 95px; /* altura fixa */

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.icon-item:hover {
  border-color: #0d6efd;
  background: #eef4ff;
  transform: translateY(-2px);
}

/* ===== ACTIVE ===== */
.icon-item.active {
  background: #0d6efd;
  color: #fff;
  border-color: #0d6efd;
}

.icon-item.active i {
  color: #fff;
}

.icon-item.active .flag-label {
  color: #fff;
}

/* ===== ICONES NORMAIS ===== */
.icon-item i {
  font-size: 1.4rem;
  color: #6c757d;
  transition: 0.2s;
}

/* ===== BANDEIRAS ===== */
.flag-item img {
  width: 30px;
  height: 20px;
  border-radius: 4px;
  object-fit: cover;
}

.flag-label {
  font-size: 11px;
  margin-top: 6px;
  color: #6c757d;
  line-height: 1.1;
  text-align: center;

  height: 28px; /* fixa altura para 2 linhas */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ===== TIPO CHIPS ===== */
.tipo-chip {
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid #dee2e6;
  background: #f8f9fa;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 500;
}

.tipo-chip:hover {
  border-color: #0d6efd;
  background: #eef4ff;
}

.tipo-chip.active {
  background: #0d6efd;
  color: #fff;
  border-color: #0d6efd;
  box-shadow: 0 4px 10px rgba(13, 110, 253, 0.2);
}

/* ===== PREVIEW ===== */
.tag-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;

  padding: 18px 32px; /* mais espaço interno */
  border-radius: 999px;

  background: #f1f3f5;
  font-weight: 700;

  font-size: 1.6rem; /* AQUI está o ganho real */
  line-height: 1;
}

/* Ícone maior */
.tag-badge i {
  font-size: 1.6rem;
}

/* Bandeira maior */
.tag-badge img {
  width: 32px;
  height: 20px;
  border-radius: 3px;
}

/* ===== CÍRCULO BASE ===== */
.wine-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: inline-block;
}
/* Círculo maior para seleção */
.wine-dot-large {
  width: 24px;
  height: 24px;
  margin-bottom: 10px;
}

.wine-dot-small {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: inline-block;
}

/* ===== LABEL ===== */
.wine-label {
  font-size: 0.8rem;
  font-weight: 600;
  text-align: center;
  display: block;
}

/* ===== CORES ===== */
.vinho-tinto {
  background: #7a0019;
}

.vinho-branco {
  background: #f4e3b2;
}

.vinho-rose {
  background: #f7c6d0;
}

.vinho-espumante {
  background: #e6f0ff;
}

@keyframes fadeInIcons {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== CARD VINHO ===== */
.wine-option {
  height: 105px;
  border-radius: 16px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  padding: 14px;
  transition: all 0.2s ease;
  text-align: center;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.wine-option:hover {
  border-color: #c9ccd1;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* ===== ATIVO ===== */
.wine-option.active {
  border: 2px solid #343a40;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.wine-option.active .wine-dot {
  transform: scale(1.1);
}

.preview-container {
  background: #f8f9fb;
  padding: 24px;
  border-radius: 16px;
  border: 1px solid #e4e6ef;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
}
.wine-preview {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 1.6rem;
  font-weight: 700;
}

.tag-badge-custom {
  background: #f1f5ff;
  color: #1e293b;
  border-radius: 999px;
  font-weight: 600;
  border: 1px solid rgba(13, 110, 253, 0.15);
  transition: all 0.2s ease;
}

.tag-badge-custom:hover {
  background: #e7efff;
}

.tag-badge-custom i {
  font-size: 0.9rem;
}

.tag-badge-custom img {
  display: inline-block;
}

/* ✅ Tags no modal produto */
.mp-tags-selected,
.mp-tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mp-tags-selected {
  min-height: 40px;
  padding: 8px;
  border-radius: 12px;
  background: #f8f9fb;
  border: 1px solid #eef2f7;
}

.mp-tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 6px 14px;
  border-radius: 999px;

  background: #eef4ff;
  border: 1px solid #d8e4ff;

  color: #0d3b8e;
  font-weight: 600;
  font-size: 0.85rem;

  cursor: pointer;
  transition: all 0.15s ease;
}

/* Ícone */
.mp-tag-chip .mp-tag-ico {
  display: flex;
  align-items: center;
  justify-content: center;
}

.mp-tag-chip img {
  width: 18px;
  height: 13px;
  border-radius: 3px;
}

.mp-tag-chip i {
  font-size: 0.9rem;
}
/* Hover suave */
.mp-tag-chip:hover {
  background: #e3edff;
  transform: translateY(-1px);
}

/* 🔥 Estado selecionado */
.mp-tag-chip.is-selected {
  background: #dce9ff;
  border-color: #b9d0ff;
}

/* Botão remover */
.mp-tag-remove {
  font-weight: 700;
  font-size: 0.9rem;
  opacity: 0.6;
  transition: opacity 0.2s ease;
}

.mp-tag-chip:hover .mp-tag-remove {
  opacity: 1;
}

/* Mensagem vazia */
.mp-tag-empty {
  color: #6c757d;
  font-size: 0.85rem;
}

/* Tags na listagem do produto */
.tag-produto-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  background: #eef4ff;
  border: 1px solid #d8e4ff;

  color: #0d3b8e;
  font-weight: 600;
  font-size: 0.75rem;

  padding: 4px 10px;
  border-radius: 999px;
}
.opcao-item {
  transition: all 0.2s ease;
}

.accordion-button {
  font-size: 0.95rem;
}
.opcao-item:hover {
  background: #f8f9fb;
}
.card-variavel {
  border-radius: 16px;
  border: 1px solid #eef2f7;
  transition: all 0.2s ease;
}

.card-variavel:hover {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.card-variavel .card-header {
  background: #fff;
  border-bottom: 1px solid #f1f3f7;
}

.card-variavel {
  border-radius: 14px;
  border: 1px solid #eef2f7;
}

.card-variavel .card-header {
  padding: 12px 14px;
}

.card-variavel .card-body {
  padding: 14px;
}

.opcao-item:hover {
  background: #f8f9fb;
}
.card-variavel .btn-light-danger {
  padding: 6px 10px;
}

.card-variavel .btn-add-opcao {
  min-width: 42px;
}
.opcao-item:hover {
  background: #f8f9fb;
}

.btn-add-opcao {
  min-width: 42px;
}

.mp-variaveis-box {
  background: #f8f9fb;
  padding: 12px;
  border-radius: 12px;
}

.mp-variavel-grupo {
  margin-bottom: 15px;
}

.mp-variavel-opcao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  gap: 10px;
}

.mp-variavel-opcao input[type="text"] {
  width: 90px;
  text-align: right;
}

/* ===== CARD TIPO PREMIUM ===== */

.mp-var-card-premium {
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid #eef1f5;
  margin-bottom: 14px;
  overflow: hidden;
  transition: all 0.25s ease;
}

.mp-var-card-premium:hover {
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.06);
  border-color: #e2e6ea;
}

/* HEADER GRANDE CLICÁVEL */
.mp-var-header-premium {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  cursor: pointer;
  user-select: none;
}

.mp-var-title {
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.3px;
}

/* SETA */
.mp-var-arrow {
  transition: transform 0.25s ease;
  font-size: 0.9rem;
  color: #6c757d;
}

/* gira seta quando aberto */
.collapse.show + .mp-var-arrow,
.mp-var-header-premium[aria-expanded="true"] .mp-var-arrow {
  transform: rotate(180deg);
}

/* corpo */
.mp-variavel-body {
  padding: 8px 16px 12px 16px;
  border-top: 1px solid #f1f3f5;
}

/* ===== OPÇÕES COMPACTAS PREMIUM ===== */

.mp-var-opcao-premium {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
}

/* lado esquerdo */
.mp-var-opcao-premium .form-check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

/* checkbox */
.mp-var-opcao-premium .form-check-input {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

/* nome */
.mp-var-opcao-premium .form-check-label {
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* 🔥 negrito quando marcado */
.mp-var-check:checked + .form-check-label {
  font-weight: 700;
  color: #000;
}

/* lado direito */
.mp-var-valor-box-premium {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* R$ */
.mp-var-moeda-premium {
  font-size: 0.8rem;
  font-weight: 700;
  color: #000;
}
/* input compacto */
.mp-var-valor {
  width: 90px;
  height: 32px;
  font-size: 1.1rem !important;
  font-weight: 700;
  color: #000 !important;
  padding: 4px 8px;
  border-radius: 8px;
  text-align: right;
}
/* valor mais forte quando marcado */
.mp-var-check:checked ~ .mp-var-valor-box-premium .mp-var-valor {
  font-weight: 600;
}
/* ===== ACTIONS BAR RESPONSIVA ===== */

.mp-actions-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  padding: 12px;
  background: #f8f9fb;
  border-radius: 14px;
}

/* padrão desktop */
.mp-actions-bar .btn {
  flex: 0 0 auto;
  font-size: 0.85rem;
  padding: 8px 12px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* mobile: 2 por linha */
@media (max-width: 768px) {
  .mp-actions-bar .btn {
    flex: 1 1 calc(50% - 4px);
    justify-content: center;
  }
}