<?php
session_start();
require 'conexao.php';
require 'config.php';

$venda    = (isset($_GET['venda'])) ? $_GET['venda'] : '';
$codigo  = (isset($_GET['codigo'])) ? $_GET['codigo'] : '';
$mesa  = (isset($_GET['mesa'])) ? $_GET['mesa'] : '';
$comanda  = (isset($_GET['comanda'])) ? $_GET['comanda'] : '';
$tipo  = (isset($_GET['tipo'])) ? $_GET['tipo'] : '';

$sql = 'SELECT mat_003, tamanho_padrao, valor_tam_p, valor_tam_m, valor_tam_g, valor_tam_gg, valor_tam_extra, cat_001  ';
$sql .= 'FROM materiais WHERE mat_001 = :codigo';
$stm = $pdo->prepare($sql);
$stm->bindValue(':codigo', $codigo);
$stm->execute();
$produto = $stm->fetch(PDO::FETCH_OBJ);

$sql = "SELECT DISTINCT tamanho_p, tamanho_m, tamanho_g, tamanho_gg, tamanho_extra ";
$sql .= "FROM desc_tamanho_material ";
$stm = $pdo->prepare($sql);
$stm->execute();
$tamanhos = $stm->fetch(PDO::FETCH_OBJ);


switch ($produto->tamanho_padrao):
  case 'P':
    $descricao = ($produto->valor_tam_p > 0) ? $tamanhos->tamanho_p : '';
    $tamanhoAbreviado = ($produto->valor_tam_p > 0) ? $produto->tamanho_padrao : '';
    break;
  case 'M':
    $descricao = ($produto->valor_tam_m > 0) ? $tamanhos->tamanho_m : '';
    $tamanhoAbreviado = ($produto->valor_tam_m > 0) ? $produto->tamanho_padrao : '';
    break;
  case 'G':
    $descricao = ($produto->valor_tam_g > 0) ? $tamanhos->tamanho_g : '';
    $tamanhoAbreviado = ($produto->valor_tam_g > 0) ? $produto->tamanho_padrao : '';
    break;
  case 'GG':
    $descricao = ($produto->valor_tam_gg > 0) ? $tamanhos->tamanho_gg : '';
    $tamanhoAbreviado = ($produto->valor_tam_gg > 0) ? $produto->tamanho_padrao : '';
    break;
  case 'E':
    $descricao = ($produto->valor_tam_extra > 0) ? $tamanhos->tamanho_extra : '';
    $tamanhoAbreviado = ($produto->valor_tam_extra > 0) ? $produto->tamanho_padrao : '';
    break;
  default:
    $descricao = $tamanhos->tamanho_m;
endswitch;


$sql = "SELECT tamanho_p as tamanho, 'P' as sigla ";
$sql .= "FROM desc_tamanho_material ";
$sql .= "UNION ALL ";
$sql .= "SELECT tamanho_m as tamanho, 'M' as sigla ";
$sql .= "FROM desc_tamanho_material ";
$sql .= "UNION ALL ";
$sql .= "SELECT tamanho_g as tamanho, 'G' as sigla ";
$sql .= "FROM desc_tamanho_material ";
$sql .= "UNION ALL ";
$sql .= "SELECT tamanho_gg as tamanho, 'GG' as sigla ";
$sql .= "FROM desc_tamanho_material ";
$sql .= "UNION ALL ";
$sql .= "SELECT tamanho_extra as tamanho, 'E' as sigla ";
$sql .= "FROM desc_tamanho_material ";
$stm = $pdo->prepare($sql);
$stm->execute();
$tabela_tamanhos = $stm->fetchAll(PDO::FETCH_OBJ);

if ($tipo == 'M'):
  $linkListagem = "opcional.php?mesa={$mesa}&tipo={$tipo}&venda={$venda}&codigo={$codigo}";
elseif ($tipo == 'C'):
  $linkListagem = "opcional.php?comanda={$comanda}&tipo={$tipo}&venda={$venda}&codigo={$codigo}";
endif;

?>
<!DOCTYPE html>
<html>

<head>
  <title>Comanda Eletrônica</title>
  <?php require 'includes/inc_head.php'; ?>
  <style>
    * {
      box-sizing: border-box;
    }

    .frac-page {
      display: flex;
      flex-direction: column;
      height: 100vh;
      overflow: hidden;
    }

    .frac-header {
      background: #3f51b5;
      color: #fff;
      padding: 10px 12px;
      display: flex;
      align-items: center;
      gap: 8px;
      flex-shrink: 0;
      z-index: 10;
    }

    .frac-header .btn-voltar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      border: none;
      background: rgba(255, 255, 255, 0.15);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      flex-shrink: 0;
    }

    .frac-header .btn-voltar i {
      font-size: 20px;
    }

    .frac-header-title {
      font-size: 15px;
      font-weight: 700;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      flex: 1;
    }

    /* === TOP PANEL: Pizza chart + controls === */
    .frac-top {
      flex-shrink: 0;
      background: #fff;
      border-bottom: 1px solid #e0e3eb;
      padding: 10px 12px;
    }

    .frac-controls {
      display: flex;
      gap: 8px;
      margin-bottom: 10px;
    }

    .frac-control-group {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .frac-control-group label {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      color: #757575;
      letter-spacing: 0.3px;
    }

    .frac-control-group select {
      width: 100%;
      padding: 8px 10px;
      border: 1.5px solid #e0e0e0;
      border-radius: 10px;
      font-size: 14px;
      font-weight: 600;
      color: #212121;
      background: #fafafa;
      outline: none;
      appearance: auto;
    }

    .frac-control-group select:focus {
      border-color: #3f51b5;
      background: #fff;
    }

    /* Qtde sabores - round buttons */
    .frac-qtde-sabores {
      display: flex;
      gap: 8px;
    }

    .frac-qtde-btn {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      border: 2px solid #e0e0e0;
      background: #fafafa;
      color: #757575;
      font-size: 15px;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s ease;
      flex-shrink: 0;
      padding: 0;
      outline: none;
      -webkit-tap-highlight-color: transparent;
    }

    .frac-qtde-btn:active {
      transform: scale(0.92);
    }

    .frac-qtde-btn.ativo {
      background: #3f51b5;
      border-color: #3f51b5;
      color: #fff;
      box-shadow: 0 2px 8px rgba(63, 81, 181, 0.35);
    }

    .frac-visual {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    /* Pizza SVG chart */
    .pizza-chart-container {
      flex-shrink: 0;
      width: 90px;
      height: 90px;
    }

    .pizza-chart-container svg {
      width: 100%;
      height: 100%;
    }

    /* Sabores selecionados */
    .frac-sabores-lista {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 4px;
      max-height: 90px;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }

    .frac-sabor-tag {
      display: flex;
      align-items: center;
      gap: 6px;
      background: #f5f6fa;
      border: 1px solid #e0e3eb;
      border-radius: 8px;
      padding: 5px 8px;
      font-size: 12px;
      font-weight: 600;
      color: #212121;
      line-height: 1.3;
    }

    .frac-sabor-tag .frac-sabor-cor {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      flex-shrink: 0;
    }

    .frac-sabor-tag .frac-sabor-nome {
      flex: 1;
      min-width: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .frac-sabor-tag .frac-sabor-primeiro {
      font-size: 9px;
      color: #9e9e9e;
      flex-shrink: 0;
    }

    .frac-sabor-tag .btn-remover-sabor {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      border: none;
      background: #e74c3c;
      color: #fff;
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      flex-shrink: 0;
      padding: 0;
      line-height: 1;
    }

    .frac-sabor-vazio {
      display: flex;
      align-items: center;
      gap: 6px;
      background: #fafafa;
      border: 1.5px dashed #ccc;
      border-radius: 8px;
      padding: 5px 8px;
      font-size: 12px;
      color: #bdbdbd;
    }

    .frac-sabor-vazio .frac-sabor-cor {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      flex-shrink: 0;
      background: #e0e0e0;
    }

    /* === BODY: search + product list === */
    .frac-body {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      background: #f5f6fa;
    }

    .frac-lista-sabores {
      box-shadow: 0 0 0 3px rgba(63, 81, 181, 0.1);
    }

    .frac-lista-sabores {
      flex: 1;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      padding: 6px 0 70px;
    }

    .frac-card-sabor {
      display: flex;
      align-items: center;
      margin: 0 12px 6px;
      padding: 10px 12px;
      background: #fff;
      border-radius: 10px;
      border: 1px solid #e0e3eb;
      cursor: pointer;
      transition: all 0.15s ease;
      text-decoration: none;
      gap: 10px;
    }

    .frac-card-sabor:active {
      transform: scale(0.98);
      background: #e8eaf6;
    }

    .frac-card-sabor.desabilitado {
      opacity: 0.4;
      pointer-events: none;
    }

    .frac-card-sabor.ja-selecionado {
      background: #e8f5e9;
      border-color: #a5d6a7;
    }

    .frac-card-sabor-icon {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: #e8eaf6;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .frac-card-sabor-icon i {
      font-size: 18px;
      color: #3f51b5;
    }

    .frac-card-sabor.ja-selecionado .frac-card-sabor-icon {
      background: #c8e6c9;
    }

    .frac-card-sabor.ja-selecionado .frac-card-sabor-icon i {
      color: #2e7d32;
    }

    .frac-card-sabor-info {
      flex: 1;
      min-width: 0;
    }

    .frac-card-sabor-nome {
      font-size: 13px;
      font-weight: 600;
      color: #212121;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .frac-card-sabor-desc {
      font-size: 11px;
      color: #9e9e9e;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .frac-card-sabor-add {
      flex-shrink: 0;
      color: #3f51b5;
    }

    .frac-card-sabor-add i {
      font-size: 22px;
    }

    .frac-card-sabor.ja-selecionado .frac-card-sabor-add {
      color: #2e7d32;
    }

    /* Footer */
    .frac-footer {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 1000;
      display: flex;
    }

    .frac-footer .btn-footer {
      flex: 1;
      height: 50px;
      border: none;
      font-size: 14px;
      font-weight: 700;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      color: #fff;
      transition: all 0.15s ease;
    }

    .frac-footer .btn-footer:active {
      filter: brightness(0.88);
    }

    .frac-footer .btn-footer i {
      font-size: 20px;
    }

    .frac-footer .btn-voltar-footer {
      background: #e74c3c;
    }

    .frac-footer .btn-avancar {
      background: #2e7d32;
      position: relative;
      overflow: hidden;
    }

    .frac-footer .btn-avancar:not(.disabled) {
      animation: pulseFinalizar 1.4s ease-in-out infinite;
    }

    .frac-footer .btn-avancar:not(.disabled)::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
      animation: shimmerFinalizar 1.6s ease-in-out infinite;
    }

    @keyframes pulseFinalizar {
      0% {
        background-color: #2e7d32;
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(46, 125, 50, 0.4);
      }

      25% {
        background-color: #43a047;
        transform: scale(1.04);
        box-shadow: 0 0 16px 4px rgba(67, 160, 71, 0.4);
      }

      50% {
        background-color: #66bb6a;
        transform: scale(1.06);
        box-shadow: 0 0 22px 6px rgba(102, 187, 106, 0.45);
      }

      75% {
        background-color: #43a047;
        transform: scale(1.04);
        box-shadow: 0 0 16px 4px rgba(67, 160, 71, 0.4);
      }

      100% {
        background-color: #2e7d32;
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(46, 125, 50, 0.4);
      }
    }

    @keyframes shimmerFinalizar {
      0% {
        left: -100%;
        opacity: 0;
      }

      20% {
        opacity: 1;
      }

      50%,
      100% {
        left: 100%;
        opacity: 0;
      }
    }

    .frac-footer .btn-avancar.disabled {
      background: #a5d6a7;
      pointer-events: none;
    }

    /* Notification shake */
    @keyframes shake {

      0%,
      100% {
        transform: translateX(0);
      }

      20% {
        transform: translateX(-6px);
      }

      40% {
        transform: translateX(6px);
      }

      60% {
        transform: translateX(-4px);
      }

      80% {
        transform: translateX(4px);
      }
    }

    .frac-shake {
      animation: shake 0.4s ease;
    }

    .frac-aviso {
      background: #fff3e0;
      border: 1.5px solid #ffb74d;
      border-radius: 8px;
      padding: 8px 12px;
      margin: 0 12px 8px;
      font-size: 12px;
      font-weight: 600;
      color: #e65100;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .frac-aviso i {
      font-size: 18px;
    }

    .frac-aviso.esconde {
      display: none;
    }

    /* Modal Pesquisa Sabores */
    .modal-pesquisa-overlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.5);
      z-index: 9999;
      justify-content: center;
      align-items: flex-start;
      padding-top: 40px;
    }

    .modal-pesquisa-box {
      background: #fff;
      border-radius: 14px;
      width: 94%;
      max-width: 440px;
      margin: 0 auto;
      max-height: 80vh;
      display: flex;
      flex-direction: column;
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
      animation: slideDown 0.2s ease-out;
    }

    @keyframes slideDown {
      from {
        transform: translateY(-20px);
        opacity: 0;
      }

      to {
        transform: translateY(0);
        opacity: 1;
      }
    }

    .modal-pesquisa-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 16px;
      border-bottom: 1px solid #e0e0e0;
    }

    .modal-pesquisa-header h5 {
      margin: 0;
      font-size: 16px;
      font-weight: 700;
      color: #3f51b5;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .frac-badge-falta {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 26px;
      height: 26px;
      padding: 0 6px;
      border-radius: 13px;
      background: #e74c3c;
      color: #fff;
      font-size: 14px;
      font-weight: 800;
      animation: pulseBadge 1s ease-in-out infinite;
    }

    @keyframes pulseBadge {

      0%,
      100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.5);
      }

      50% {
        transform: scale(1.15);
        box-shadow: 0 0 0 8px rgba(231, 76, 60, 0);
      }
    }

    .modal-pesquisa-close {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      border: none;
      background: #f0f0f3;
      color: #666;
      font-size: 18px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .modal-pesquisa-search {
      padding: 10px 14px;
    }

    .modal-pesquisa-search input {
      width: 100%;
      padding: 10px 12px 10px 40px;
      border: 1.5px solid #e0e0e0;
      border-radius: 10px;
      font-size: 14px;
      color: #333;
      background: #fafafa;
      outline: none;
      box-sizing: border-box;
    }

    .modal-pesquisa-search input:focus {
      border-color: #3f51b5;
      background: #fff;
      box-shadow: 0 0 0 3px rgba(63, 81, 181, 0.1);
    }

    .modal-pesquisa-search-inner {
      position: relative;
    }

    .modal-pesquisa-search-inner i {
      position: absolute;
      left: 12px;
      top: 50%;
      transform: translateY(-50%);
      color: #9e9e9e;
      font-size: 20px;
      pointer-events: none;
    }

    .modal-pesquisa-body {
      flex: 1;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      padding: 0 8px 14px;
      max-height: 55vh;
    }

    .modal-pesquisa-body .frac-card-sabor {
      margin: 0 4px 6px;
    }

    /* Botão pesquisar no header */
    .frac-header .btn-pesquisar,
    .frac-header .btn-favoritos-header {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      border: none;
      background: rgba(255, 255, 255, 0.15);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      flex-shrink: 0;
    }

    .frac-header .btn-pesquisar i,
    .frac-header .btn-favoritos-header i {
      font-size: 20px;
    }

    .frac-header .btn-favoritos-header.ativo {
      background: rgba(249, 168, 37, 0.3);
    }

    .frac-header .btn-favoritos-header.ativo i {
      color: #f9a825;
    }

    /* Favorito no card */
    .btn-favorito-frac {
      background: none;
      border: none;
      padding: 4px;
      cursor: pointer;
      line-height: 1;
      flex-shrink: 0;
    }

    .btn-favorito-frac i {
      font-size: 22px;
      color: #bdbdbd;
      transition: color 0.2s ease;
    }

    .btn-favorito-frac.favoritado i {
      color: #f9a825;
    }

    /* Modal Favoritos */
    .modal-favoritos-overlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.5);
      z-index: 9999;
      justify-content: center;
      align-items: flex-start;
      padding-top: 40px;
    }

    .modal-favoritos-box {
      background: #fff;
      border-radius: 14px;
      width: 94%;
      max-width: 440px;
      margin: 0 auto;
      max-height: 80vh;
      display: flex;
      flex-direction: column;
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
      animation: slideDown 0.2s ease-out;
    }

    .modal-favoritos-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 16px;
      border-bottom: 1px solid #e0e0e0;
    }

    .modal-favoritos-header h5 {
      margin: 0;
      font-size: 16px;
      font-weight: 700;
      color: #f9a825;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .modal-favoritos-close {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      border: none;
      background: #f0f0f3;
      color: #666;
      font-size: 18px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .modal-favoritos-body {
      flex: 1;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      padding: 8px 8px 14px;
      max-height: 65vh;
    }

    .modal-favoritos-body .frac-card-sabor {
      margin: 0 4px 6px;
    }

    .modal-favoritos-vazio {
      text-align: center;
      padding: 30px 20px;
      color: #9e9e9e;
      font-size: 14px;
    }

    .modal-favoritos-vazio i {
      font-size: 48px;
      color: #e0e0e0;
      display: block;
      margin-bottom: 8px;
    }

    /* Bottom Sheet Categorias */
    .bottomsheet-overlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.5);
      z-index: 9998;
      transition: opacity 0.25s ease;
    }

    .bottomsheet-overlay.ativo {
      display: block;
    }

    .bottomsheet {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 9999;
      background: #fff;
      border-radius: 16px 16px 0 0;
      box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
      transform: translateY(100%);
      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      max-height: 60vh;
      display: flex;
      flex-direction: column;
    }

    .bottomsheet.ativo {
      transform: translateY(0);
    }

    .bottomsheet-handle {
      width: 36px;
      height: 4px;
      background: #d0d0d0;
      border-radius: 2px;
      margin: 10px auto 0;
      flex-shrink: 0;
    }

    .bottomsheet-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 16px 8px;
      flex-shrink: 0;
    }

    .bottomsheet-header h5 {
      margin: 0;
      font-size: 16px;
      font-weight: 700;
      color: #3f51b5;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .bottomsheet-header h5 i {
      font-size: 20px;
    }

    .bottomsheet-close {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      border: none;
      background: #f0f0f3;
      color: #666;
      font-size: 18px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .bottomsheet-body {
      flex: 1;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      padding: 4px 12px 20px;
    }

    .cat-grid {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .cat-chip {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px 14px;
      border-radius: 10px;
      border: 1.5px solid #e0e0e0;
      background: #fafafa;
      font-size: 14px;
      font-weight: 600;
      color: #424242;
      cursor: pointer;
      transition: all 0.15s ease;
      outline: none;
      -webkit-tap-highlight-color: transparent;
      width: 100%;
      text-align: left;
    }

    .cat-chip:active {
      transform: scale(0.95);
    }

    .cat-chip.ativo {
      background: #3f51b5;
      border-color: #3f51b5;
      color: #fff;
      box-shadow: 0 2px 8px rgba(63, 81, 181, 0.3);
    }

    .cat-chip i {
      font-size: 18px;
    }

    .cat-chip .cat-chip-count {
      font-size: 11px;
      font-weight: 700;
      opacity: 0.7;
      margin-left: auto;
    }

    .cat-chip .cat-chip-nome {
      flex: 1;
      min-width: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .cat-chip.bloqueado {
      opacity: 0.45;
      pointer-events: none;
      background: #f5f5f5;
      border-color: #eee;
    }

    .cat-chip.bloqueado::after {
      content: 'não combina';
      font-size: 10px;
      font-weight: 600;
      color: #e74c3c;
      margin-left: auto;
      flex-shrink: 0;
    }

    .cat-chip.mesma-cat {
      border-left: 3px solid #3f51b5;
    }

    /* Indicador de filtro ativo no header */
    .frac-header .btn-categorias {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      border: none;
      background: #3f51b5;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      flex-shrink: 0;
      position: relative;
      box-shadow: 0 2px 8px rgba(63, 81, 181, 0.3);
      transition: background 0.3s, box-shadow 0.3s;
    }

    .frac-header .btn-categorias.filtro-ativo {
      background: #ff5722;
      box-shadow: 0 2px 12px rgba(255, 87, 34, 0.45);
      animation: pulseFilterBtn 1.5s ease-in-out infinite;
    }

    @keyframes pulseFilterBtn {

      0%,
      100% {
        box-shadow: 0 2px 8px rgba(255, 87, 34, 0.35);
      }

      50% {
        box-shadow: 0 0 16px 4px rgba(255, 87, 34, 0.5);
      }
    }

    .frac-header .btn-categorias i {
      font-size: 20px;
    }

    .frac-header .btn-categorias .badge-filtro {
      position: absolute;
      top: -2px;
      right: -2px;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #f9a825;
      border: 2px solid #3f51b5;
      display: none;
    }

    .frac-header .btn-categorias .badge-filtro.ativo {
      display: block;
    }

    /* Tablet / Desktop */
    @media (min-width: 600px) {
      .frac-top {
        padding: 14px 20px;
      }

      .pizza-chart-container {
        width: 110px;
        height: 110px;
      }

      .frac-sabores-lista {
        max-height: 110px;
      }

      .frac-card-sabor {
        margin: 0 20px 6px;
        padding: 12px 16px;
      }

      .frac-aviso {
        margin: 0 20px 8px;
      }
    }

    @media (min-width: 960px) {
      .frac-body {
        width: 100%;
      }

      .frac-top {
        width: 100%;
      }
    }

    /* ── Dark Theme Overrides ── */
    [data-theme="dark"] .frac-header {
      background: var(--bg-header);
    }

    [data-theme="dark"] .frac-top {
      background: var(--bg-card);
      border-bottom-color: var(--border-color);
    }

    [data-theme="dark"] .frac-control-group label {
      color: var(--text-secondary);
    }

    [data-theme="dark"] .frac-control-group select {
      background: var(--bg-input);
      color: var(--text-primary);
      border-color: var(--border-color);
    }

    [data-theme="dark"] .frac-control-group select:focus {
      background: var(--bg-surface);
    }

    [data-theme="dark"] .frac-qtde-btn {
      background: var(--bg-surface);
      border-color: var(--border-color);
      color: var(--text-secondary);
    }

    [data-theme="dark"] .frac-qtde-btn.ativo {
      background: var(--color-primary);
      border-color: var(--color-primary);
      color: #fff;
    }

    [data-theme="dark"] .frac-sabor-tag {
      background: var(--bg-surface);
      border-color: var(--border-color);
      color: var(--text-primary);
    }

    [data-theme="dark"] .frac-sabor-tag .frac-sabor-primeiro {
      color: var(--text-secondary);
    }

    [data-theme="dark"] .frac-sabor-vazio {
      background: var(--bg-surface);
      border-color: var(--border-color);
      color: var(--text-label);
    }

    [data-theme="dark"] .frac-body {
      background: var(--bg-body);
    }

    [data-theme="dark"] .frac-card-sabor {
      background: var(--bg-card);
      border-color: var(--border-color);
    }

    [data-theme="dark"] .frac-card-sabor:active {
      background: var(--bg-surface);
    }

    [data-theme="dark"] .frac-card-sabor-icon {
      background: var(--bg-surface);
    }

    [data-theme="dark"] .frac-card-sabor-nome {
      color: var(--text-primary);
    }

    [data-theme="dark"] .frac-card-sabor-desc {
      color: var(--text-secondary);
    }

    [data-theme="dark"] .frac-card-sabor-add {
      color: var(--color-primary);
    }

    [data-theme="dark"] .modal-pesquisa-box,
    [data-theme="dark"] .modal-favoritos-box {
      background: var(--bg-card);
    }

    [data-theme="dark"] .modal-pesquisa-header,
    [data-theme="dark"] .modal-favoritos-header {
      border-bottom-color: var(--border-color);
    }

    [data-theme="dark"] .modal-pesquisa-header h5 {
      color: var(--color-primary);
    }

    [data-theme="dark"] .modal-pesquisa-close,
    [data-theme="dark"] .modal-favoritos-close,
    [data-theme="dark"] .bottomsheet-close {
      background: var(--bg-surface);
      color: var(--text-secondary);
    }

    [data-theme="dark"] .modal-pesquisa-search input {
      background: var(--bg-input);
      color: var(--text-primary);
      border-color: var(--border-color);
    }

    [data-theme="dark"] .modal-pesquisa-search input:focus {
      background: var(--bg-surface);
    }

    [data-theme="dark"] .modal-pesquisa-search-inner i {
      color: var(--text-secondary);
    }

    [data-theme="dark"] .modal-favoritos-vazio {
      color: var(--text-secondary);
    }

    [data-theme="dark"] .modal-favoritos-vazio i {
      color: var(--border-color);
    }

    [data-theme="dark"] .bottomsheet {
      background: var(--bg-card);
    }

    [data-theme="dark"] .bottomsheet-handle {
      background: var(--border-color);
    }

    [data-theme="dark"] .bottomsheet-header h5 {
      color: var(--color-primary);
    }

    [data-theme="dark"] .cat-chip {
      background: var(--bg-surface);
      border-color: var(--border-color);
      color: var(--text-primary);
    }

    [data-theme="dark"] .cat-chip.ativo {
      background: var(--color-primary);
      border-color: var(--color-primary);
      color: #fff;
    }

    [data-theme="dark"] .frac-sabor-vazio .frac-sabor-cor {
      background: var(--border-color);
    }
  </style>
</head>

<body>
  <script>
    loadPagina()
  </script>
  <div class="frac-page" id="page" style="display:none">

    <!-- HEADER -->
    <div class="frac-header">
      <button class="btn-voltar" onclick="voltarLimpar()">
        <i class="material-icons">arrow_back</i>
      </button>
      <span class="frac-header-title"><?= htmlspecialchars($produto->mat_003) ?></span>
      <button class="btn-categorias" id="btn-abrir-categorias" title="Filtrar por categoria">
        <i class="material-icons">filter_list</i>
        <span class="badge-filtro" id="badge-filtro-cat"></span>
      </button>
      <button class="btn-favoritos-header" id="btn-abrir-favoritos" title="Favoritos fracionados">
        <i class="material-icons">star</i>
      </button>
      <button class="btn-pesquisar" id="btn-abrir-pesquisa" title="Buscar sabores">
        <i class="material-icons">search</i>
      </button>
    </div>

    <!-- TOP: Controls + Pizza Chart + Selected -->
    <div class="frac-top">
      <div class="frac-controls">
        <div class="frac-control-group">
          <label>Tamanho</label>
          <select id="tamanho">
            <option value="<?= $tamanhoAbreviado ?>"><?= $descricao ?></option>
            <?php foreach ($tabela_tamanhos as $tamanho):
              $descTam = '';
              $siglaTam = '';
              if ($tamanho->sigla == 'P' && $produto->valor_tam_p > 0): $descTam = $tamanhos->tamanho_p;
                $siglaTam = $tamanho->sigla;
              endif;
              if ($tamanho->sigla == 'M' && $produto->valor_tam_m > 0): $descTam = $tamanhos->tamanho_m;
                $siglaTam = $tamanho->sigla;
              endif;
              if ($tamanho->sigla == 'G' && $produto->valor_tam_g > 0): $descTam = $tamanhos->tamanho_g;
                $siglaTam = $tamanho->sigla;
              endif;
              if ($tamanho->sigla == 'GG' && $produto->valor_tam_gg > 0): $descTam = $tamanhos->tamanho_gg;
                $siglaTam = $tamanho->sigla;
              endif;
              if ($tamanho->sigla == 'E' && $produto->valor_tam_extra > 0): $descTam = $tamanhos->tamanho_extra;
                $siglaTam = $tamanho->sigla;
              endif;
              if ($descTam != '' && $siglaTam != ''): ?>
                <option value="<?= $tamanho->sigla ?>"><?= $tamanho->tamanho ?></option>
              <?php endif; ?>
            <?php endforeach; ?>
          </select>
        </div>
        <div class="frac-control-group">
          <label>Qtde Sabores</label>
          <div class="frac-qtde-sabores">
            <button type="button" class="frac-qtde-btn ativo" data-valor="1">1</button>
            <button type="button" class="frac-qtde-btn" data-valor="0.500">2</button>
            <button type="button" class="frac-qtde-btn" data-valor="0.3333">3</button>
            <button type="button" class="frac-qtde-btn" data-valor="0.250">4</button>
          </div>
          <input type="hidden" id="qtde" value="1">
        </div>
      </div>

      <div class="frac-visual">
        <div class="pizza-chart-container">
          <svg id="pizza-svg" viewBox="0 0 100 100"></svg>
        </div>
        <div class="frac-sabores-lista" id="sabores-lista"></div>
      </div>
    </div>

    <!-- AVISO -->
    <div class="frac-aviso esconde" id="frac-aviso">
      <i class="material-icons">warning</i>
      <span id="frac-aviso-texto">Selecione todos os sabores antes de avançar.</span>
    </div>

    <!-- BODY: Lista de sabores -->
    <div class="frac-body">
      <div class="frac-lista-sabores" id="produtos-fracionado"></div>
    </div>

    <!-- MODAL: Pesquisa de sabores -->
    <div class="modal-pesquisa-overlay" id="modal-pesquisa">
      <div class="modal-pesquisa-box">
        <div class="modal-pesquisa-header">
          <h5 id="modal-pesquisa-titulo">Buscar Sabores</h5>
          <button class="modal-pesquisa-close" id="btn-fechar-pesquisa">&times;</button>
        </div>
        <div class="modal-pesquisa-search">
          <div class="modal-pesquisa-search-inner">
            <i class="material-icons">search</i>
            <input type="text" id="pesquisa" autocomplete="off" placeholder="Código ou nome do sabor...">
          </div>
        </div>
        <div class="modal-pesquisa-body" id="produtos-fracionado-modal"></div>
      </div>
    </div>

    <!-- MODAL: Favoritos fracionados -->
    <div class="modal-favoritos-overlay" id="modal-favoritos">
      <div class="modal-favoritos-box">
        <div class="modal-favoritos-header">
          <h5><i class="material-icons" style="font-size:20px;">star</i> Favoritos Fracionados</h5>
          <button class="modal-favoritos-close" id="btn-fechar-favoritos">&times;</button>
        </div>
        <div class="modal-favoritos-body" id="favoritos-fracionado-lista"></div>
      </div>
    </div>

    <!-- BOTTOM SHEET: Categorias -->
    <div class="bottomsheet-overlay" id="bottomsheet-overlay"></div>
    <div class="bottomsheet" id="bottomsheet-categorias">
      <div class="bottomsheet-handle"></div>
      <div class="bottomsheet-header">
        <h5><i class="material-icons">filter_list</i> Categorias</h5>
        <button class="bottomsheet-close" id="btn-fechar-categorias">&times;</button>
      </div>
      <div class="bottomsheet-body">
        <div class="cat-grid" id="cat-grid"></div>
      </div>
    </div>

    <!-- FOOTER -->
    <div class="frac-footer">
      <button class="btn-footer btn-voltar-footer" onclick="voltarLimpar()">
        <i class="material-icons">arrow_back</i>
        VOLTAR
      </button>
      <button class="btn-footer btn-avancar" id="btn-avancar">
        <i class="material-icons">check_circle</i>
        AVANÇAR
      </button>
    </div>
  </div>

  <?php include 'includes/inc_js.php'; ?>
  <script>
    var CORES_PIZZA = ['#3f51b5', '#e74c3c', '#f9a825', '#2e7d32', '#9c27b0'];
    var CODIGO_PRIMEIRO = '<?= $codigo ?>';
    var NOME_PRIMEIRO = '<?= addslashes($produto->mat_003) ?>';
    var CAT_PRIMEIRO = '<?= $produto->cat_001 ?>';
    var LINK_PROXIMO = '<?= $linkListagem ?>';

    var arrayPizza = [];
    var avancou = false;
    var categoriaFiltro = ''; // '' = todas

    // Verifica se a categoria do primeiro produto bloqueia mistura
    function getPrimeiroNaoFraciona() {
      if (!localStorage.hasOwnProperty('categorias')) return false;
      let categorias = JSON.parse(localStorage.getItem('categorias'));
      let cat = categorias.find(c => String(c.cat_001) === String(CAT_PRIMEIRO));
      return cat && (cat.nao_fraciona_outra_categoria == 1 || cat.nao_fraciona_outra_categoria === true);
    }

    // Verifica se uma categoria específica bloqueia mistura
    function getCatNaoFraciona(catId) {
      if (!localStorage.hasOwnProperty('categorias')) return false;
      let categorias = JSON.parse(localStorage.getItem('categorias'));
      let cat = categorias.find(c => String(c.cat_001) === String(catId));
      return cat && (cat.nao_fraciona_outra_categoria == 1 || cat.nao_fraciona_outra_categoria === true);
    }

    function voltarLimpar() {
      localStorage.removeItem('sabores');
      window.history.go(-1);
    }

    function preloader() {
      ProcessingModal.hide();
      $('#page').show();
    }
    window.onload = preloader;

    function getQtdeSabores() {
      let val = $('#qtde').val();
      if (val == '1') return 1;
      if (val == '0.500') return 2;
      if (val == '0.3333') return 3;
      if (val == '0.250') return 4;
      return 1;
    }

    function getTotalSabores() {
      return arrayPizza.length + 1; // +1 para o primeiro
    }

    // === PIZZA SVG ===
    function renderPizzaChart() {
      let svg = document.getElementById('pizza-svg');
      let totalSlots = getQtdeSabores();
      let preenchidos = getTotalSabores();
      let html = '';

      // Background circle
      html += `<circle cx="50" cy="50" r="48" fill="#f0f0f3" stroke="#e0e0e0" stroke-width="1"/>`;

      if (totalSlots === 1) {
        let cor = (preenchidos >= 1) ? CORES_PIZZA[0] : '#e0e0e0';
        html += `<circle cx="50" cy="50" r="46" fill="${cor}" opacity="0.85"/>`;
      } else {
        for (let i = 0; i < totalSlots; i++) {
          let startAngle = (i / totalSlots) * 360 - 90;
          let endAngle = ((i + 1) / totalSlots) * 360 - 90;
          let cor = (i < preenchidos) ? CORES_PIZZA[i % CORES_PIZZA.length] : '#e0e0e0';

          let x1 = 50 + 46 * Math.cos(startAngle * Math.PI / 180);
          let y1 = 50 + 46 * Math.sin(startAngle * Math.PI / 180);
          let x2 = 50 + 46 * Math.cos(endAngle * Math.PI / 180);
          let y2 = 50 + 46 * Math.sin(endAngle * Math.PI / 180);

          let largeArc = (endAngle - startAngle > 180) ? 1 : 0;

          html += `<path d="M50,50 L${x1},${y1} A46,46 0 ${largeArc},1 ${x2},${y2} Z" 
                         fill="${cor}" opacity="0.85" stroke="#fff" stroke-width="1.5"/>`;
        }
      }

      // Center white dot
      html += `<circle cx="50" cy="50" r="12" fill="#fff"/>`;
      html += `<text x="50" y="54" text-anchor="middle" font-size="11" font-weight="700" fill="#3f51b5">${preenchidos}/${totalSlots}</text>`;

      svg.innerHTML = html;
    }

    // === SABORES SELECIONADOS ===
    function renderSaboresLista() {
      let container = document.getElementById('sabores-lista');
      let totalSlots = getQtdeSabores();
      let html = '';

      // Primeiro sabor (fixo)
      html += `<div class="frac-sabor-tag">
        <span class="frac-sabor-cor" style="background:${CORES_PIZZA[0]}"></span>
        <span class="frac-sabor-nome">${NOME_PRIMEIRO}</span>
        <span class="frac-sabor-primeiro">1°</span>
      </div>`;

      // Sabores adicionados
      arrayPizza.forEach((item, i) => {
        html += `<div class="frac-sabor-tag">
          <span class="frac-sabor-cor" style="background:${CORES_PIZZA[(i + 1) % CORES_PIZZA.length]}"></span>
          <span class="frac-sabor-nome">${item.nome}</span>
          <button type="button" class="btn-remover-sabor" data-id="${item.codigo}" title="Remover">
            <i class="material-icons" style="font-size:14px;">close</i>
          </button>
        </div>`;
      });

      // Slots vazios
      for (let i = getTotalSabores(); i < totalSlots; i++) {
        html += `<div class="frac-sabor-vazio">
          <span class="frac-sabor-cor"></span>
          <span>Selecione o ${i + 1}° sabor...</span>
        </div>`;
      }

      container.innerHTML = html;
    }

    // === PRODUTOS ===
    // === FAVORITOS FRACIONADOS ===
    function getFavoritosFrac() {
      return JSON.parse(localStorage.getItem('favoritos_fracionados') || '[]');
    }

    function setFavoritosFrac(favoritos) {
      localStorage.setItem('favoritos_fracionados', JSON.stringify(favoritos));
    }

    function isFavoritoFrac(matId) {
      return getFavoritosFrac().indexOf(String(matId)) !== -1;
    }

    function toggleFavoritoFrac(matId) {
      let favoritos = getFavoritosFrac();
      let id = String(matId);
      let index = favoritos.indexOf(id);
      if (index === -1) {
        favoritos.push(id);
      } else {
        favoritos.splice(index, 1);
      }
      setFavoritosFrac(favoritos);
      return index === -1;
    }

    function atualizarBotaoFavoritos() {
      let favoritos = getFavoritosFrac();
      if (favoritos.length > 0) {
        $('#btn-abrir-favoritos').addClass('ativo');
      } else {
        $('#btn-abrir-favoritos').removeClass('ativo');
      }
    }

    function getCategoriasFracionadas() {
      if (!localStorage.hasOwnProperty('produtos')) return [];
      let produtosStorage = JSON.parse(localStorage.getItem('produtos'));
      let catsMap = {};
      produtosStorage.forEach(prod => {
        if (!prod.fracionado || String(prod.mat_001) === String(CODIGO_PRIMEIRO)) return;
        let catId = prod.cat_001;
        let catNome = prod.cat_002;
        if (!catsMap[catId]) {
          catsMap[catId] = {
            id: catId,
            nome: catNome,
            qtde: 0
          };
        }
        catsMap[catId].qtde++;
      });
      let cats = Object.values(catsMap);
      cats.sort((a, b) => a.nome.localeCompare(b.nome));
      return cats;
    }

    function renderCategoriasGrid() {
      let cats = getCategoriasFracionadas();
      let container = document.getElementById('cat-grid');
      let naoFracionaPrimeiro = getPrimeiroNaoFraciona();
      let totalFrac = 0;
      cats.forEach(c => totalFrac += c.qtde);

      let html = `<button type="button" class="cat-chip ${categoriaFiltro === '' ? 'ativo' : ''}" data-cat="">
        <i class="material-icons">apps</i>
        <span class="cat-chip-nome">Todas</span>
        <span class="cat-chip-count">${totalFrac} sabores</span>
      </button>`;

      cats.forEach(cat => {
        let mesmaCat = String(cat.id) === String(CAT_PRIMEIRO);
        let catNaoFraciona = getCatNaoFraciona(cat.id);
        // Bloqueia se: a categoria do primeiro OU a categoria destino não permite mistura, e são categorias diferentes
        let bloqueado = !mesmaCat && (naoFracionaPrimeiro || catNaoFraciona);
        let classExtra = bloqueado ? 'bloqueado' : (mesmaCat ? 'mesma-cat' : '');

        html += `<button type="button" class="cat-chip ${classExtra} ${categoriaFiltro == cat.id ? 'ativo' : ''}" data-cat="${cat.id}">
          <i class="material-icons">${bloqueado ? 'block' : (mesmaCat ? 'local_pizza' : 'restaurant')}</i>
          <span class="cat-chip-nome">${cat.nome}</span>
          ${!bloqueado ? `<span class="cat-chip-count">${cat.qtde} sabores</span>` : ''}
        </button>`;
      });

      container.innerHTML = html;
    }

    function renderProdutoCards(termo) {
      let produtos = [];

      if (localStorage.hasOwnProperty('produtos')) {
        let produtosStorage = JSON.parse(localStorage.getItem('produtos'));

        if (termo !== undefined && termo !== '') {
          produtos = produtosStorage.filter(prod =>
            prod.fracionado && prod.mat_001 != CODIGO_PRIMEIRO &&
            (prod.mat_003.indexOf(termo.toUpperCase()) >= 0 || prod.mat_004.indexOf(termo.toUpperCase()) >= 0)
          );
        } else {
          produtos = produtosStorage.filter(prod =>
            prod.fracionado && prod.mat_001 != CODIGO_PRIMEIRO
          );
        }

        // Aplicar filtro de categoria (somente na lista principal, não na pesquisa)
        if (categoriaFiltro !== '' && (termo === undefined || termo === '')) {
          produtos = produtos.filter(prod => String(prod.cat_001) === String(categoriaFiltro));
        }

        // Remover produtos de categorias bloqueadas (nao_fraciona_outra_categoria)
        let naoFracionaPrimeiro = getPrimeiroNaoFraciona();
        produtos = produtos.filter(prod => {
          let mesmaCat = String(prod.cat_001) === String(CAT_PRIMEIRO);
          if (mesmaCat) return true;
          // Se a categoria do primeiro OU a categoria do produto bloqueia mistura, não exibir
          if (naoFracionaPrimeiro || getCatNaoFraciona(prod.cat_001)) return false;
          return true;
        });

        let str = '';
        let totalSlots = getQtdeSabores();
        let slotsDisponiveis = totalSlots - getTotalSabores();

        produtos.forEach(produto => {
          let jaSelecionado = isItemJaExiste(produto.mat_001);
          let desabilitado = (!jaSelecionado && slotsDisponiveis <= 0) ? 'desabilitado' : '';
          let classeStatus = jaSelecionado ? 'ja-selecionado' : '';
          let descricao = produto.descricao ? produto.descricao : '';
          let iconAdd = jaSelecionado ? 'check_circle' : 'add_circle';
          let favAtivo = isFavoritoFrac(produto.mat_001) ? 'favoritado' : '';
          let favIcon = isFavoritoFrac(produto.mat_001) ? 'star' : 'star_border';

          str += `<div class="frac-card-sabor ${classeStatus} ${desabilitado}" 
                       data-id="${produto.mat_001}" data-nome="${produto.mat_003.toUpperCase()}">
            <div class="frac-card-sabor-icon">
              <i class="material-icons">${jaSelecionado ? 'check' : 'local_pizza'}</i>
            </div>
            <div class="frac-card-sabor-info">
              <div class="frac-card-sabor-nome">${produto.mat_004} - ${produto.mat_003.toUpperCase()}</div>
              ${descricao ? `<div class="frac-card-sabor-desc">${descricao}</div>` : ''}
            </div>
            <button type="button" class="btn-favorito-frac ${favAtivo}" data-mat="${produto.mat_001}" title="Favorito">
              <i class="material-icons">${favIcon}</i>
            </button>
            <div class="frac-card-sabor-add">
              <i class="material-icons">${iconAdd}</i>
            </div>
          </div>`;
        });

        if (str === '') {
          return '<p style="text-align:center; padding:20px; color:#9e9e9e;">Nenhum sabor encontrado</p>';
        }
        return str;
      }
      return '';
    }

    function renderFavoritosModal() {
      let container = document.getElementById('favoritos-fracionado-lista');
      if (!localStorage.hasOwnProperty('produtos')) {
        container.innerHTML = '<div class="modal-favoritos-vazio"><i class="material-icons">star_border</i>Nenhum favorito ainda</div>';
        return;
      }

      let produtosStorage = JSON.parse(localStorage.getItem('produtos'));
      let favoritos = getFavoritosFrac();
      let totalSlots = getQtdeSabores();
      let slotsDisponiveis = totalSlots - getTotalSabores();
      let naoFracionaPrimeiro = getPrimeiroNaoFraciona();
      let str = '';

      produtosStorage.forEach(produto => {
        if (!produto.fracionado) return;
        if (String(produto.mat_001) === String(CODIGO_PRIMEIRO)) return;
        if (favoritos.indexOf(String(produto.mat_001)) === -1) return;

        // Respeitar regra de não fracionar com outra categoria
        let mesmaCat = String(produto.cat_001) === String(CAT_PRIMEIRO);
        if (!mesmaCat && (naoFracionaPrimeiro || getCatNaoFraciona(produto.cat_001))) return;

        let jaSelecionado = isItemJaExiste(produto.mat_001);
        let desabilitado = (!jaSelecionado && slotsDisponiveis <= 0) ? 'desabilitado' : '';
        let classeStatus = jaSelecionado ? 'ja-selecionado' : '';
        let descricao = produto.descricao ? produto.descricao : '';
        let iconAdd = jaSelecionado ? 'check_circle' : 'add_circle';

        str += `<div class="frac-card-sabor ${classeStatus} ${desabilitado}" 
                     data-id="${produto.mat_001}" data-nome="${produto.mat_003.toUpperCase()}">
          <div class="frac-card-sabor-icon">
            <i class="material-icons">${jaSelecionado ? 'check' : 'local_pizza'}</i>
          </div>
          <div class="frac-card-sabor-info">
            <div class="frac-card-sabor-nome">${produto.mat_004} - ${produto.mat_003.toUpperCase()}</div>
            ${descricao ? `<div class="frac-card-sabor-desc">${descricao}</div>` : ''}
          </div>
          <button type="button" class="btn-favorito-frac favoritado" data-mat="${produto.mat_001}" title="Remover favorito">
            <i class="material-icons">star</i>
          </button>
          <div class="frac-card-sabor-add">
            <i class="material-icons">${iconAdd}</i>
          </div>
        </div>`;
      });

      if (str === '') {
        container.innerHTML = '<div class="modal-favoritos-vazio"><i class="material-icons">star_border</i>Nenhum favorito ainda</div>';
      } else {
        container.innerHTML = str;
      }
    }

    function consultaProdutos(termo) {
      document.getElementById('produtos-fracionado').innerHTML = renderProdutoCards(termo);
    }

    function consultaProdutosModal(termo) {
      document.getElementById('produtos-fracionado-modal').innerHTML = renderProdutoCards(termo);
    }

    function isItemJaExiste(codigo) {
      return arrayPizza.some(item => item.codigo == codigo);
    }

    function removerItem(codigo) {
      arrayPizza = arrayPizza.filter(item => item.codigo != codigo);
      atualizarTudo();
    }

    function atualizarTudo() {
      renderPizzaChart();
      renderSaboresLista();
      consultaProdutos('');
      consultaProdutosModal($('#pesquisa').val());
      atualizarBotaoAvancar();
      atualizarBotaoPesquisa();
      esconderAviso();
    }

    function atualizarBotaoPesquisa() {
      if (getQtdeSabores() > 1) {
        $('#btn-abrir-pesquisa').show();
      } else {
        $('#btn-abrir-pesquisa').hide();
        $('#modal-pesquisa').hide();
      }
      atualizarTituloModal();
    }

    function atualizarTituloModal() {
      let falta = getQtdeSabores() - getTotalSabores();
      if (falta > 0) {
        $('#modal-pesquisa-titulo').html(`Selecione sabores <span class="frac-badge-falta">${falta}</span>`);
      } else {
        $('#modal-pesquisa-titulo').html('Todos selecionados <i class="material-icons" style="font-size:18px;vertical-align:middle;color:#2e7d32;">check_circle</i>');
      }
    }

    function atualizarBotaoAvancar() {
      let totalSlots = getQtdeSabores();
      let preenchidos = getTotalSabores();

      if (preenchidos === totalSlots) {
        $('#btn-avancar').removeClass('disabled');
      } else {
        $('#btn-avancar').addClass('disabled');
      }
    }

    function mostrarAviso(texto) {
      $('#frac-aviso-texto').text(texto);
      $('#frac-aviso').removeClass('esconde').addClass('frac-shake');
      setTimeout(() => {
        $('#frac-aviso').removeClass('frac-shake');
      }, 400);
      setTimeout(() => {
        $('#frac-aviso').addClass('esconde');
      }, 3000);
    }

    function esconderAviso() {
      $('#frac-aviso').addClass('esconde');
    }

    $(document).ready(function($) {

      // Restaurar sabores do localStorage ao voltar na página
      function restaurarSabores() {
        if (localStorage.hasOwnProperty('sabores')) {
          let saboresSalvos = JSON.parse(localStorage.getItem('sabores'));
          if (saboresSalvos && saboresSalvos.length > 0) {
            // Filtrar o primeiro sabor (já é fixo na tela) - comparação como string
            let outros = saboresSalvos.filter(s => String(s.codigo) !== String(CODIGO_PRIMEIRO));
            arrayPizza = outros;

            // Restaurar o select de qtde baseado no valor salvo
            let qtdeSalva = saboresSalvos[0].qtde;
            if (qtdeSalva) {
              $('#qtde').val(String(qtdeSalva));
              $('.frac-qtde-btn').removeClass('ativo');
              $(`.frac-qtde-btn[data-valor="${qtdeSalva}"]`).addClass('ativo');
            }
            // Restaurar o select de tamanho
            let tamanhoSalvo = saboresSalvos[0].tamanho;
            if (tamanhoSalvo) {
              $('#tamanho').val(tamanhoSalvo);
            }
          }
        }
      }

      function inicializarTela() {
        renderPizzaChart();
        renderSaboresLista();
        consultaProdutos();
        atualizarBotaoAvancar();
        atualizarBotaoPesquisa();
        atualizarBotaoFavoritos();
      }

      restaurarSabores();
      inicializarTela();
      renderCategoriasGrid();

      // Tratar bfcache (back-forward cache) do navegador
      $(window).on('pageshow', function(e) {
        if (e.originalEvent.persisted) {
          restaurarSabores();
          inicializarTela();
        }
      });

      // Bottom sheet categorias
      function abrirCategorias() {
        renderCategoriasGrid();
        $('#bottomsheet-overlay').addClass('ativo');
        setTimeout(function() {
          $('#bottomsheet-categorias').addClass('ativo');
        }, 10);
      }

      function fecharCategorias() {
        $('#bottomsheet-categorias').removeClass('ativo');
        setTimeout(function() {
          $('#bottomsheet-overlay').removeClass('ativo');
        }, 300);
      }

      $('#btn-abrir-categorias').on('click', function() {
        abrirCategorias();
      });

      $('#btn-fechar-categorias').on('click', function() {
        fecharCategorias();
      });

      $('#bottomsheet-overlay').on('click', function() {
        fecharCategorias();
      });

      $(document).on('click', '.cat-chip', function() {
        let catId = $(this).attr('data-cat');
        categoriaFiltro = catId;
        $('.cat-chip').removeClass('ativo');
        $(this).addClass('ativo');

        if (catId !== '') {
          $('#badge-filtro-cat').addClass('ativo');
          $('#btn-abrir-categorias').addClass('filtro-ativo');
        } else {
          $('#badge-filtro-cat').removeClass('ativo');
          $('#btn-abrir-categorias').removeClass('filtro-ativo');
        }

        consultaProdutos('');
        fecharCategorias();
      });

      // Modal pesquisa
      $('#btn-abrir-pesquisa').on('click', function() {
        atualizarTituloModal();
        $('#modal-pesquisa').css('display', 'flex');
        $('#pesquisa').val('').focus();
        consultaProdutosModal('');
      });

      $('#btn-fechar-pesquisa').on('click', function() {
        $('#modal-pesquisa').hide();
      });

      $('#modal-pesquisa').on('click', function(e) {
        if (e.target === this) $(this).hide();
      });

      $('#pesquisa').on('input', function() {
        consultaProdutosModal($(this).val());
      });

      // Modal favoritos
      $('#btn-abrir-favoritos').on('click', function() {
        renderFavoritosModal();
        $('#modal-favoritos').css('display', 'flex');
      });

      $('#btn-fechar-favoritos').on('click', function() {
        $('#modal-favoritos').hide();
      });

      $('#modal-favoritos').on('click', function(e) {
        if (e.target === this) $(this).hide();
      });

      // Toggle favorito fracionado
      $(document).on('click', '.btn-favorito-frac', function(e) {
        e.preventDefault();
        e.stopPropagation();

        let matId = $(this).attr('data-mat');
        let agora = toggleFavoritoFrac(matId);

        $(this).toggleClass('favoritado', agora);
        $(this).find('i').text(agora ? 'star' : 'star_border');
        atualizarBotaoFavoritos();

        Snackbar.show({
          text: agora ? 'Adicionado aos favoritos!' : 'Removido dos favoritos!',
          actionText: 'Fechar',
          duration: 800,
          pos: 'bottom-center',
          width: '100%'
        });

        // Se está no modal de favoritos e removeu, atualizar lista
        if (!agora && $('#modal-favoritos').is(':visible')) {
          $(this).closest('.frac-card-sabor').fadeOut(200, function() {
            $(this).remove();
            if ($('#favoritos-fracionado-lista .frac-card-sabor').length === 0) {
              $('#favoritos-fracionado-lista').html('<div class="modal-favoritos-vazio"><i class="material-icons">star_border</i>Nenhum favorito ainda</div>');
            }
          });
        }

        // Atualizar cards na lista principal e modal pesquisa
        consultaProdutos('');
        consultaProdutosModal($('#pesquisa').val());
      });

      // Click sabor card
      $(document).on('click', '.frac-card-sabor', function() {
        let id = $(this).attr('data-id');
        let nome = $(this).attr('data-nome');
        let totalSlots = getQtdeSabores();

        if ($(this).hasClass('ja-selecionado')) {
          removerItem(id);
          Snackbar.show({
            text: `Sabor "${nome}" removido`,
            actionText: 'Fechar',
            duration: 800,
            pos: 'bottom-center',
            width: '100%'
          });
          return;
        }

        if (getTotalSabores() >= totalSlots) {
          mostrarAviso(`Máximo de ${totalSlots} sabor(es). Remova um para adicionar outro.`);
          return;
        }

        if (isItemJaExiste(id)) {
          mostrarAviso(`"${nome}" já foi selecionado!`);
          return;
        }

        arrayPizza.push({
          codigo: id,
          nome: nome,
          qtde: $('#qtde').val(),
          tamanho: ''
        });

        atualizarTudo();

        // Fechar modal se atingiu a qtde de sabores
        if (getTotalSabores() >= getQtdeSabores()) {
          $('#modal-pesquisa').hide();
        }
      });

      // Remove sabor from tag
      $(document).on('click', '.btn-remover-sabor', function(e) {
        e.stopPropagation();
        let id = $(this).attr('data-id');
        removerItem(id);

        Snackbar.show({
          text: 'Sabor removido',
          actionText: 'Fechar',
          duration: 800,
          pos: 'bottom-center',
          width: '100%'
        });
      });

      // Qtde sabores - round buttons click
      $(document).on('click', '.frac-qtde-btn', function() {
        let valor = $(this).data('valor');
        $('.frac-qtde-btn').removeClass('ativo');
        $(this).addClass('ativo');
        $('#qtde').val(String(valor));

        let totalSlots = getQtdeSabores();

        // Se reduziu a qtde, remover sabores excedentes
        while (getTotalSabores() > totalSlots) {
          arrayPizza.pop();
        }

        atualizarTudo();
      });

      // Tamanho change - just update UI
      $('#tamanho').on('change', function() {
        atualizarBotaoAvancar();
      });

      // Avançar
      $('#btn-avancar').on('click', function() {
        let totalSlots = getQtdeSabores();

        if (getTotalSabores() !== totalSlots) {
          mostrarAviso(`Selecione ${totalSlots - getTotalSabores()} sabor(es) restante(s) para avançar.`);
          return;
        }

        let tamanho = $('#tamanho').val();
        let desc_tamanho = $('#tamanho option:selected').text();
        let qtde_real = $('#qtde').val();

        // Adicionar o primeiro sabor
        arrayPizza.push({
          codigo: CODIGO_PRIMEIRO,
          nome: NOME_PRIMEIRO,
          qtde: qtde_real,
          tamanho: tamanho,
          descricao_tamanho: desc_tamanho
        });

        arrayPizza.forEach((item) => {
          item.tamanho = tamanho;
          item.qtde = qtde_real;
          item.descricao_tamanho = desc_tamanho;
        });

        localStorage.setItem('sabores', JSON.stringify(arrayPizza));
        window.location.href = LINK_PROXIMO;
      });
    });
  </script>
</body>

</html>