/* assets/css/estilo.css - Versão Unificada e Corrigida (com list_menu.php styling) */

/* Import Google Font - Zrnic */
@import url('https://fonts.googleapis.com/css2?family=Zrnic&display=swap');

/* ============================================================================== */
/* ESTILOS GLOBAIS E BASE */
/* ============================================================================== */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #343a40; /* Cor de texto padrão mais escura */
  overflow-x: hidden; /* Evita scroll horizontal indesejado */
  /* Removido overflow-y: auto aqui para que regras mais específicas possam ter prioridade */
}

/* Global style for the brand name */
.app-brand-name {
    font-family: 'Zrnic', sans-serif;
    text-transform: lowercase;
    font-size: 1.5rem; /* Base size */
}

/* Tamanho específico para a página de login */
.login-image-section .app-brand-name {
    font-size: 4.5rem;
    line-height: 1;
}

/* Tamanho específico para a navbar do admin */
.navbar-brand .app-brand-name {
    font-size: 2.25rem;
}

/* Sidebar admin */
.sidebar-admin .btn,
.sidebar-admin .nav-link {
  font-size: 0.9rem !important;
}
.sidebar-admin nav > p.text-uppercase.text-muted.small {
  margin-top: 0.35rem !important;
  margin-bottom: 0.15rem !important;
}
.sidebar-admin nav .mb-3 {
  margin-bottom: 0.35rem !important;
}
.sidebar-admin nav ul.nav.nav-pills.flex-column.mb-3 {
  margin-bottom: 0.25rem !important;
}
.sidebar-admin .btn.btn-sm.w-100 {
  padding-top: 0.30rem !important;
  padding-bottom: 0.30rem !important;
}
.sidebar-admin .nav > .nav-item > .nav-link {
  padding-top: 0.35rem !important;
  padding-bottom: 0.35rem !important;
}
.sidebar-admin .nav-link.text-white-50:hover,
.sidebar-admin .nav-link:hover {
  background-color: rgba(255, 255, 255, 0.08);
  color: #ffffff !important;
}
.sidebar-admin .btn-outline-light:hover,
.sidebar-admin .btn-outline-light:focus {
  background-color: rgba(255, 255, 255, 0.08);
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.15);
}
.sidebar-admin .nav-link.active {
  background: linear-gradient(135deg, #0d6efd, #6610f2);
  color: #ffffff !important;
}
.sidebar-admin a {
  text-decoration: none;
}
.sidebar-admin .btn .fa-chevron-down {
  color: inherit;
}

/* Header index.php (Preview no Admin) */
.cardapio-header {
  position: relative;
  width: 100%;
  height: 300px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.cardapio-header-logo {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cardapio-header-logo img {
  max-height: 160px;
  max-width: 80%;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.45));
}
.preview-header {
  border-radius: 0 0 0.75rem 0.75rem;
  overflow: hidden;
}
.text-shadow {
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}
@media (max-width: 768px) {
  .cardapio-header {
    height: 200px;
  }
  .cardapio-header-logo img {
    max-height: 110px;
  }
}

/* ============================================================================== */
/* ESTILOS ESPECÍFICOS PARA index.php (EMENTA DIGITAL - GRID) */
/* ============================================================================== */

/* Layout principal Full Screen */
.customer-menu-wrapper {
    display: flex;
    flex-direction: column; /* Mantenha em coluna para que o conteúdo possa rolar abaixo de um cabeçalho fixo (se houver) */
    min-height: 100vh; /* Garante que ocupe pelo menos a altura da tela */
    width: 100vw;
    overflow-x: hidden;
    overflow-y: hidden; /* Oculta o scroll do wrapper, o scroll será no menu-left-section */
    height: 100vh; /* Ocupa 100% da altura da viewport no desktop */
}

.menu-left-section {
    flex: 1 1 auto; /* Permite que ocupe o espaço restante e se ajuste */
    background-color: #f8f9fa;
    padding: 1.5rem; /* Padding padrão para desktop */
    overflow-y: auto; /* HABILITA O SCROLL VERTICAL AQUI NO DESKTOP */
    box-shadow: none;
    z-index: 1020;
    height: 100%; /* Ocupa 100% da altura disponível de seu pai flexível */
}

/* Wrapper para centralizar o conteúdo do menu esquerdo */
.menu-content-wrapper {
    max-width: 1530px;
    width: 100%;
    margin: 0 auto;
}

/* Seção Direita: Imagem de Fundo (ESCONDIDA GLOBALMENTE) */
.menu-right-section {
    display: none !important; /* ESCONDE SEMPRE, resolvendo a área cinza */
}

/* Header do Restaurante (Banner no topo) */
.menu-restaurante-header{
  position: relative;
  min-height: 270px;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 16px;
  margin-bottom: 1.5rem;
}

.menu-restaurante-header-overlay{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0;
}

.menu-header-logo-circle{
  width: 240px;
  height: 240px;
  border: none !important;
  padding: 0 !important;
  object-fit: contain;
  border-radius: 50%;
  box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15);
}

/* Barra de contexto da loja/mesa */
.pedido-canal-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem;
  margin-bottom: 1rem;
  border-radius: 999px;
  background-color: var(--bs-primary);
  color: var(--bs-white);
  font-weight: 600;
  font-size: 1rem;
  box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.1);
}

.loja-context-bar{
  display: flex;
  justify-content: flex-end; /* Alinha à direita no desktop */
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem !important;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--bs-gray-200);
}
.loja-context-bar .text-muted.small {
    font-size: 1rem;
}
.loja-context-bar .btn {
    font-size: 0.9rem;
    padding: 0.4rem 0.75rem;
}


/* Carrossel de Categorias */
.category-carousel {
    width: 100%;
    margin-bottom: 2rem;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.category-carousel::-webkit-scrollbar {
    display: none;
}
.category-carousel-item {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-right: 1.5rem;
    cursor: pointer;
    transition: transform 0.2s ease-in-out;
}
.category-carousel-item:last-child {
    margin-right: 0;
}
.category-carousel-item:hover {
    transform: translateY(-5px);
}
.category-carousel-item img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: none !important;
    box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.1);
}
.category-carousel-item .category-name {
    display: block;
    margin-top: 0.5rem;
    font-size: 1.05rem;
    font-weight: 500;
    color: #343a40;
    white-space: normal;
    max-width: 140px;
}

/* Títulos de Seção (Categorias, Nossos Produtos) */
h2.h5.fw-bold.mb-3 {
    font-size: 1.666rem;
}

/* Grid de Produtos (index.php) */
.product-grid-section {
    width: 100%;
    padding-top: 1rem;
}
.product-card {
    border: none;
    box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.075);
    border-radius: 0.75rem;
    transition: transform 0.2s ease-in-out;
}
.product-card:hover {
    transform: translateY(-3px);
}
.product-card img {
    height: 345px; /* MODIFICADO: 50% maior (230px * 1.5) */
    width: 100%;
    object-fit: cover;
    border-top-left-radius: 0.75rem;
    border-top-right-radius: 0.75rem;
}
.product-card-body {
    padding: 1rem;
}
.product-name {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}
.product-description {
    font-size: 0.85rem;
    color: #6c757d;
    margin-bottom: 0.75rem;
    height: 3.2rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}
.product-price {
    font-size: 1.25rem;
    font-weight: 700;
    color: #0d6efd;
    margin-bottom: 1rem;
}

/* Badges nos cards de produto (index.php) */
.product-media{ position: relative; }
.product-badges-top-left{
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 2;
}
.product-badges-right{
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 2;
}
.product-badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.9rem;
  box-shadow: 0 6px 14px rgba(0,0,0,0.12);
}
.product-badge-icon{
  width: 38px;
  height: 38px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 1rem;
  box-shadow: 0 6px 14px rgba(0,0,0,0.12);
}

/* Offcanvas (Sacola de Pedidos) */
.offcanvas-header {
    background-color: #0d6efd;
    color: white;
}
.offcanvas-header .offcanvas-title {
    color: white;
}
.offcanvas-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}
.offcanvas-cart-item {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
    border-bottom: 1px dashed #dee2e6;
    padding-bottom: 1rem;
}
.offcanvas-cart-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}
.offcanvas-cart-item-img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 0.5rem;
    margin-right: 0.75rem;
}
.offcanvas-cart-item-details {
    flex-grow: 1;
}
.offcanvas-cart-item-name {
    font-weight: 600;
    font-size: 0.9rem;
}
.offcanvas-cart-item-price {
    font-size: 0.8rem;
    color: #6c757d;
}
.offcanvas-cart-item-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.offcanvas-cart-total {
    border-top: 2px solid #0d6efd;
    padding-top: 1rem;
    margin-top: 1rem;
    font-size: 1.2rem;
    font-weight: 700;
    color: #0d6efd;
}

/* Botão flutuante da sacola (padrão, para product_details.php) */
.floating-cart-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 70px; /* Mantém 70px para product_details.php */
    height: 70px; /* Mantém 70px para product_details.php */
    border-radius: 50%;
    background-color: #0d6efd;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.2);
    border: none;
    cursor: pointer;
    z-index: 1030;
    transition: background-color 0.2s ease-in-out;
}
.floating-cart-btn:hover {
    background-color: #0b5ed7;
}
.floating-cart-btn i {
    font-size: 1.75rem; /* Mantém 1.75rem para product_details.php */
    line-height: 1;
}

/* Estilos específicos para o botão flutuante da sacola na index.php (desktop) */
.page-index .floating-cart-btn {
    width: 80px !important; /* Aumentado para 80px */
    height: 80px !important; /* Aumentado para 80px */
}
.page-index .floating-cart-btn i {
    font-size: 2rem !important; /* DOBRO do tamanho atual (1.75rem * 2) */
}


/* Badge de contagem de itens na sacola */
.cart-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: #dc3545;
    color: white;
    border-radius: 50%;
    padding: 0.2em 0.5em;
    font-size: 0.7rem;
    line-height: 1;
    min-width: 1.5em;
    text-align: center;
    box-shadow: 0 0 0 2px white;
}

/* Offcanvas - Controles de quantidade */
.offcanvas-cart-item-controls .quantity-control {
    width: 100px;
    display: flex;
    align-items: center;
}
.offcanvas-cart-item-controls .quantity-control .btn {
    padding: 0.2rem 0.5rem;
    font-size: 0.8rem;
    height: auto;
    line-height: 1;
}
.offcanvas-cart-item-controls .quantity-control .input-qty {
    text-align: center;
    -moz-appearance: none;
    appearance: none;
    padding: 0.2rem 0.1rem;
    height: auto;
    line-height: 1;
    font-size: 0.9rem;
}
.offcanvas-cart-item-controls .quantity-control .input-qty::-webkit-outer-spin-button,
.offcanvas-cart-item-controls .quantity-control .input-qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.offcanvas-cart-item-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    flex-shrink: 0;
}
.offcanvas-cart-item-controls .btn-remove-item {
    font-size: 0.9rem;
    padding: 0.4rem 0.6rem;
    margin-top: 0.2rem;
}


/* ============================================================================== */
/* ESTILOS PARA list_menu.php (CARDÁPIO EM LISTA) */
/* ============================================================================== */
.product-list-section {
    width: 100%;
}
.product-list-item {
  display: flex; /* Garante que a imagem e o texto fiquem lado a lado */
  align-items: center;
  margin-bottom: 1rem;
  border: 1px solid var(--bs-gray-200); /* Borda sutil para o item da lista */
  border-radius: 0.75rem;
  overflow: hidden; /* Garante que tudo dentro respeite o border-radius */
}
.product-list-item .row.g-0 { /* A row interna precisa ser flex para os cols */
  width: 100%;
  display: flex;
  align-items: center;
}

.product-list-item-image-wrapper {
  position: relative;
  width: 150px; /* Tamanho fixo da imagem (desktop) */
  height: 150px;
  flex-shrink: 0; /* Impede que a imagem encolha */
  border-radius: 0.5rem; /* Bordas levemente arredondadas */
  overflow: hidden;
  border: 1px solid #dee2e6; /* Moldura */
  margin-right: 1rem; /* Espaçamento entre imagem e texto */
}
.product-list-item-img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Recorta a imagem para preencher o container */
  display: block; /* Remove espaço extra abaixo da imagem */
}

/* Conteúdo do texto na lista */
.product-list-item .card-body {
    padding: 1rem;
}
.product-list-item-title {
  font-size: 1.3rem; /* Ligeiramente maior */
  font-weight: 700; /* Negrito */
  color: #343a40;
  flex-grow: 1; /* Permite que o título ocupe o espaço */
  margin-right: 1rem; /* Espaço antes do valor */
}
.product-list-item-value {
  font-size: 1.8rem; /* Maior que o título */
  font-weight: 700;
  color: #0d6efd;
  white-space: nowrap; /* Evita que o valor quebre linha */
  display: flex; /* Para alinhar as partes do preço */
  align-items: baseline;
  gap: 0.1rem; /* Pequeno espaço entre o inteiro e o decimal/símbolo */
}
.product-list-item-value-integer {
  font-size: 1.5em; /* Parte inteira maior que a decimal (1.5x o tamanho base do .product-list-item-value) */
}
.product-list-item-value-decimal,
.product-list-item-value-symbol {
  font-size: 0.8em; /* Parte decimal e símbolo menores */
  vertical-align: super; /* Alinha o decimal e símbolo mais ao topo */
}
.product-list-item-description {
  font-style: italic;
  color: #6c757d; /* Tom cinzento */
  font-size: 0.95rem; /* Ajuste para ser legível */
}
.product-list-item .add-to-cart-btn {
  font-size: 0.9rem;
  padding: 0.5rem 0.8rem;
  margin-top: 0.8rem;
}

/* Badges na lista (list_menu.php) */
.product-badges-top-left-list{
  position: absolute;
  top: 5px;
  left: 5px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  z-index: 2;
}
.product-badges-right-list{
  position: absolute;
  top: 5px;
  right: 5px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  z-index: 2;
}
.product-badge-list{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.8rem;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.product-badge-icon-list{
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 0.9rem;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}


/* ============================================================================== */
/* RESPONSIVIDADE (DESKTOP) */
/* ============================================================================== */
@media (min-width: 992px) { /* breakpoint lg do Bootstrap e maiores */
    /* 5 produtos por linha em desktop */
    .product-grid-section .row > * {
        width: 20%;
        flex: 0 0 auto;
    }
}

/* DESKTOP: limitar o bloco da imagem e impedir que ocupe toda a col-lg-6 */
@media (min-width: 992px) {
  .product-image-section {
    /* Desativa o hack de aspect ratio no desktop e deixa o bloco "encolher" */
    padding-bottom: 0 !important;
    height: auto !important;
    display: flex !important;
    align-items: flex-start;
    justify-content: flex-start;
  }
  .product-image-section img {
    /* A imagem não preenche toda a coluna; fica contida à esquerda */
    position: static !important;
    width: 100%;
    height: auto !important;
    max-width: 520px; /* ajuste fino do limite visual */
    object-fit: contain;
  }
}

/* Compatibilidade: defina também a propriedade padrão 'appearance' */
.quantity-control input[type="number"] {
  width: 50px !important;
  max-width: 50px !important;
  text-align: center;
  appearance: textfield;        /* padrão */
  -moz-appearance: textfield;   /* Firefox */
}

/* Remover spinners nos navegadores WebKit */
.quantity-control input[type="number"]::-webkit-inner-spin-button,
.quantity-control input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ---- Overrides product_detail (desktop) ---- */

/* Bordas arredondadas e contenção da imagem */
.product-image-section {
  border-radius: 1rem !important;
  overflow: hidden !important;
}
.product-image-section img {
  border-radius: 1rem !important;
}

/* Desktop: remover aspect-ratio fixo e limitar largura da imagem */
@media (min-width: 992px) {
  .product-image-section {
    padding-bottom: 0 !important;
    height: auto !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
  }
  .product-image-section img {
    position: static !important;
    width: 100%;
    height: auto !important;
    max-width: 520px; /* ajuste conforme o layout */
    object-fit: contain;
  }
}

/* Quantidade: layout em linha (- 1 +), largura do input 50px e compatibilidade */
.quantity-control {
  display: inline-flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 6px !important;
  width: 150px !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.quantity-control .btn-qty-minus,
.quantity-control .btn-qty-plus {
  flex: 0 0 40px !important;
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.quantity-control input[type="number"] {
  flex: 0 0 50px !important;
  width: 50px !important;
  max-width: 50px !important;
  min-width: 50px !important;
  text-align: center !important;
  appearance: textfield;        /* padrão */
  -moz-appearance: textfield;   /* Firefox */
}
.quantity-control input[type="number"]::-webkit-inner-spin-button,
.quantity-control input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Espaçamento do botão "Voltar ao Menu" no topo */
.product-detail-wrapper {
  margin-top: 2rem !important; /* garante respiro no topo do wrapper */
}
.product-detail-wrapper > a.btn {
  margin-top: 0.75rem !important; /* respiro extra só para o botão */
}

/* Quantidade: alinhar em linha (- 1 +) e manter espaçamento antes do botão */
.quantity-control {
  display: inline-flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 6px !important;
  width: 150px !important;
  max-width: none !important;
  margin: 1rem 0 1.25rem !important; /* espaço vertical restaurado */
}
.quantity-control .btn-qty-minus,
.quantity-control .btn-qty-plus {
  flex: 0 0 40px !important;
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
#addToCartBtn {
  margin-top: 0.75rem !important; /* separa do seletor de quantidade */
}

/* Quantidade: largura máxima 50px e compatibilidade de aparência */
.quantity-control input[type="number"] {
  flex: 0 0 50px !important;
  width: 50px !important;
  max-width: 50px !important;
  min-width: 50px !important;
  text-align: center !important;
  appearance: textfield;        /* padrão */
  -moz-appearance: textfield;   /* Firefox */
}
.quantity-control input[type="number"]::-webkit-inner-spin-button,
.quantity-control input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Destaque do "Preço Total" e valor */
.checkout-section .text-muted.fw-semibold {
  font-size: 1.125rem !important; /* um pouco maior */
  font-weight: 700 !important;
  color: #343a40 !important;
}
.total-price-section {
  color: #0d6efd !important; /* azul padrão */
  font-weight: 800 !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 0.15rem !important;
}
.total-price-section .price-symbol {
  font-size: 1rem !important;
}
.total-price-section .price-int {
  font-size: 2.2rem !important; /* inteiro bem maior */
}
.total-price-section .price-dec {
  font-size: 1.15rem !important; /* decimal menor */
  vertical-align: super !important;
}

/* Bordas arredondadas na imagem do produto e contenção */
.product-image-section {
  border-radius: 1rem !important;
  overflow: hidden !important; /* garante que a imagem respeite o raio */
}
.product-image-section img {
  border-radius: 1rem !important;
}

/* Desktop: remover aspect-ratio fixo e limitar largura da imagem à esquerda */
@media (min-width: 992px) {
  .product-image-section {
    padding-bottom: 0 !important;
    height: auto !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
  }
  .product-image-section img {
    position: static !important;
    width: 100%;
    height: auto !important;
    max-width: 520px; /* ajuste conforme seu layout */
    object-fit: contain;
  }
}

/* Desktop: aumentar o preço em 50% para maior evidência */
@media (min-width: 992px) {
  .total-price-section {
    white-space: nowrap !important; /* evita quebra de linha */
  }
  .total-price-section .price-symbol {
    font-size: 1.5rem !important;   /* +50% (antes ~1rem) */
  }
  .total-price-section .price-int {
    font-size: 3.3rem !important;   /* +50% (antes ~2.2rem) */
  }
  .total-price-section .price-dec {
    font-size: 1.725rem !important; /* +50% (antes ~1.15rem) */
  }
}

/* ===== VARIAÇÕES: colapsadas por grupo no mobile; sempre visíveis no desktop ===== */
@media (min-width: 992px) {
  .mv-collapse {
    display: block !important;   /* ignora o estado do collapse no desktop */
    height: auto !important;
    visibility: visible !important;
  }
}

/* ============================================================================== */
/* AJUSTES ESPECÍFICOS PARA product_detail.php - SEÇÃO DE VARIAÇÕES (DESKTOP) */
/* Adicionar ao final do assets/css/estilo.css */
/* ============================================================================== */

/* Fundo branco e sem bordas/sombras para o grupo de variações no desktop */
.product-detail-wrapper .variation-group {
    background-color: #fff !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border: 1px solid #eee !important; /* Adiciona uma borda sutil para definição */
}

/* Título do grupo de variações */
.product-detail-wrapper .variation-group h5.fw-semibold {
    color: #212529 !important; /* Texto mais evidente (preto quase total) */
    font-weight: 700 !important; /* Negrito */
    font-size: 1.25rem !important; /* Tamanho ajustado para desktop */
    margin-bottom: 1rem !important; /* Garante espaçamento adequado */
}

/* Labels das opções de variação */
.product-detail-wrapper .variation-option .form-check-label {
    color: #212529 !important; /* Texto mais evidente */
    font-weight: 500 !important; /* Semi-negrito */
    font-size: 1.15rem !important; /* Tamanho ajustado para desktop */
}

/* Estilos para o checkbox em si */
.product-detail-wrapper .variation-option .form-check-input {
    border: 2px solid #6c757d !important; /* Borda um pouco mais escura para contraste */
}

/* Estilos para o checkbox marcado */
.product-detail-wrapper .variation-option .form-check-input:checked {
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
}

/* ============================================================================== */
/* AJUSTES ESPECÍFICOS PARA product_detail.php - SEÇÃO DE VARIAÇÕES (MOBILE) */
/* Adicionar ao final do assets/css/estilo.css, dentro da media query de mobile */
/* ============================================================================== */
@media (max-width: 768px) {
    /* Mantém o fundo cinza para mobile, como estava OK antes */
    .product-detail-wrapper .variation-group {
        background-color: #f1f3f4 !important; /* Fundo cinza suave */
        border: none !important; /* Remove a borda no mobile */
        border-radius: 1rem !important; /* Mantém o border-radius no mobile */
        box-shadow: 0 2px 5px rgba(0,0,0,0.05) !important; /* Mantém a sombra no mobile */
    }

    /* Título do grupo de variações no mobile */
    .product-detail-wrapper .variation-group h5.fw-semibold {
        font-size: 1.45rem !important; /* Tamanho ajustado para mobile */
    }

    /* Labels das opções de variação no mobile */
    .product-detail-wrapper .variation-option .form-check-label {
        font-size: 1.35rem !important; /* Tamanho ajustado para mobile */
    }
}

/* ============================================================================== */
/* AJUSTES ESPECÍFICOS PARA product_detail.php - LARGURA DO INPUT DE QUANTIDADE (DESKTOP) */
/* Adicionar ao final do assets/css/estilo.css */
/* ============================================================================== */

/* Força a largura do input de quantidade no desktop */
.product-detail-wrapper .quantity-control input#productQuantity {
    width: 20px !important;
    max-width: 20px !important;
    flex: 0 0 20px !important; /* Garante que o flexbox não o estique */
}

/* Ajusta o max-width do container do controle de quantidade para acomodar */
.product-detail-wrapper .quantity-control {
    max-width: 150px !important; /* 50px (input) + 2*40px (botões) + 2*10px (gaps) = 150px */
}

/* ============================================================================== */
/* AJUSTE ESPECÍFICO PARA product_detail.php - BOTÕES DE QUANTIDADE NO MOBILE */
/* Adicionar ao final do assets/css/estilo.css */
/* ============================================================================== */

@media (max-width: 768px) {
    /* Garante que os botões de quantidade na página de detalhes sejam quadrados no mobile */
    .product-detail-wrapper .quantity-control button,
    .product-detail-wrapper .btn-qty-minus,
    .product-detail-wrapper .btn-qty-plus {
        border-radius: 0.25rem !important; /* Muda de oval (50%) para quadrado com leve arredondamento */
    }
}

/* ============================================================================== */
/* NOVOS ESTILOS PARA pos.php (ADICIONAR AO FINAL DO assets/css/estilo.css) */
/* ============================================================================== */

body {
    margin: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #343a40;
    overflow: hidden; /* Controla o overflow do body para o layout flex */
}

.pos-wrapper {
    display: flex;
    flex-direction: column; /* Layout principal em coluna: topo (salas) + restante */
    height: 100vh;
    overflow: hidden;
    background-color: #f8f9fa;
}

.pos-top-rooms-tabs {
    flex-shrink: 0; /* Não permite que a área de abas encolha */
    background-color: #343a40; /* Cor de fundo escura para as abas */
    border-bottom: 1px solid #dee2e6;
    padding: 0 1rem; /* Espaçamento lateral */
    overflow-x: auto; /* Permite scroll horizontal se muitas abas */
    white-space: nowrap; /* Impede que as abas quebrem linha */
    -webkit-overflow-scrolling: touch; /* Scroll suave no iOS */
    scrollbar-width: none; /* Esconde a scrollbar no Firefox */
}
.pos-top-rooms-tabs::-webkit-scrollbar {
    display: none; /* Esconde a scrollbar no WebKit */
}

.pos-top-rooms-tabs .nav-tabs {
    border-bottom: none; /* Remove a borda padrão do Bootstrap */
}
.pos-top-rooms-tabs .nav-item {
    flex-shrink: 0; /* Impede que os itens da aba encolham */
}
.pos-top-rooms-tabs .nav-link {
    color: rgba(255, 255, 255, 0.7); /* Texto claro para as abas inativas */
    border: none;
    border-radius: 0;
    padding: 0.75rem 1.25rem;
    transition: all 0.2s;
    font-weight: 500;
}
.pos-top-rooms-tabs .nav-link:hover {
    color: white;
    background-color: rgba(255, 255, 255, 0.1);
}
.pos-top-rooms-tabs .nav-link.active {
    background-color: #0d6efd; /* Fundo azul para a aba ativa */
    color: white;
    font-weight: bold;
    border-color: #0d6efd; /* Borda da aba ativa */
    border-bottom: none;
}

.pos-main-layout-area {
    flex-grow: 1; /* Ocupa o restante do espaço vertical */
    display: flex; /* Layout principal em linha: Área Central + Checkout */
    overflow: hidden; /* Esconde o overflow para as sub-áreas */
}

.pos-central-area {
    flex-grow: 1; /* Ocupa o máximo de espaço horizontal disponível */
    display: flex;
    flex-direction: column; /* Layout em coluna: Mesas + Categorias + Produtos */
    overflow: hidden;
}

.pos-tables-container {
    flex-shrink: 0; /* Não permite que a área das mesas encolha */
    height: 30vh; /* Altura fixa para as mesas (ajuste conforme necessário) */
    overflow-y: auto; /* Permite scroll vertical para as mesas */
    background-color: #e9ecef; /* Fundo para a área das mesas */
    border-bottom: 1px solid #dee2e6;
}

.pos-tables-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem; /* Espaçamento entre os cards */
    padding: 1rem;
    align-content: flex-start;
    /* Ajustado para acomodar 10 mesas por linha (aprox. 100px cada + gaps) */
    /* Remove a regra display: grid se estiver aqui, usamos flexbox para o layout principal */
}

.pos-table-card {
    width: 100px; /* Reduzido para caber 10 por linha no desktop */
    height: 100px; /* Mantém a proporção quadrada */
    border: 1px solid #0d6efd;
    border-radius: 0.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    background-color: white;
    color: #0d6efd;
    font-weight: bold;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    flex-shrink: 0; /* Garante que não encolha em layouts flexíveis */
}
.pos-table-card:hover {
    background-color: #0d6efd;
    color: white;
    transform: translateY(-3px);
}
.pos-table-card.active {
    background-color: #0d6efd;
    color: white;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
.pos-table-card i {
    font-size: 1.8rem; /* Ícone ajustado para caber melhor no card menor */
    margin-bottom: 0.25rem; /* Reduz a margem inferior do ícone */
}
.pos-table-card span {
    font-size: 0.85rem; /* Texto ajustado para caber melhor */
}


.pos-product-categories-carousel-wrapper {
    flex-shrink: 0;
    background-color: #f1f3f4; /* Fundo para o carrossel de categorias */
    border-bottom: 1px solid #dee2e6;
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
    position: relative; /* Para posicionar as setas */
}

.pos-product-categories-carousel {
    flex-grow: 1;
    display: flex;
    overflow-x: auto; /* Habilita o scroll horizontal */
    white-space: nowrap; /* Impede que os itens quebrem linha */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Esconde a scrollbar no Firefox */
    padding-bottom: 5px; /* Espaço para sombra da scrollbar invisível */
}
.pos-product-categories-carousel::-webkit-scrollbar {
    display: none; /* Esconde a scrollbar no WebKit */
}

.pos-product-categories-carousel .pos-category-item {
    flex-shrink: 0; /* Impede que os itens encolham */
    display: inline-block; /* Comportamento de bloco inline para scroll */
    padding: 0.6rem 1rem;
    margin-right: 0.5rem;
    border-radius: 0.25rem;
    color: #343a40; /* Texto escuro */
    text-decoration: none;
    transition: all 0.2s;
    background-color: #e9ecef; /* Fundo para itens de categoria */
    font-weight: 500;
}
.pos-product-categories-carousel .pos-category-item:hover {
    background-color: #dee2e6;
}
.pos-product-categories-carousel .pos-category-item.active {
    background-color: #0d6efd;
    color: white;
    font-weight: bold;
}

.pos-carousel-arrow {
    background-color: #0d6efd;
    color: white;
    border: none;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    flex-shrink: 0;
    border-radius: 0.25rem;
    margin: 0 0.25rem;
    transition: background-color 0.2s;
}
.pos-carousel-arrow:hover {
    background-color: #0b5ed7;
}


.pos-products-grid-container {
    flex-grow: 1;
    padding: 1rem;
    overflow-y: auto; /* Permite scroll vertical para os produtos */
    background-color: #f8f9fa;
}

#pos-products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); /* Grid responsivo */
    gap: 1rem;
}

.pos-product-card {
    display: flex;
    flex-direction: column; /* Ajustado para empilhar imagem e texto */
    align-items: center;
    padding: 0.75rem;
    background-color: white;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.pos-product-card:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    transform: translateY(-2px);
}
.pos-product-card img {
    width: 100%; /* Imagem ocupa a largura total do card */
    max-height: 120px; /* Limita a altura da imagem */
    object-fit: cover;
    border-radius: 0.25rem;
    margin-bottom: 0.5rem;
}
.pos-product-card-details {
    flex-grow: 1;
    width: 100%;
}
.pos-product-card-name {
    font-weight: bold;
    font-size: 1rem;
    margin-bottom: 0.25rem;
}
.pos-product-card-price {
    color: #0d6efd;
    font-weight: bold;
    font-size: 1.1rem;
}
.pos-order-details {
    width: 350px; /* Largura fixa para a sidebar de checkout */
    background-color: #fff;
    padding: 1rem;
    overflow-y: auto;
    flex-shrink: 0;
    border-left: 1px solid #dee2e6;
    display: flex;
    flex-direction: column;
}
.pos-order-details-header {
    flex-shrink: 0;
    border-bottom: 1px solid #eee;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
}
.pos-order-items {
    flex-grow: 1;
    overflow-y: auto;
    margin-bottom: 1rem;
}
.pos-order-footer {
    flex-shrink: 0;
    border-top: 1px solid #eee;
    padding-top: 1rem;
}
.pos-selected-order-item {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
}
.pos-selected-order-item-qty {
    font-weight: bold;
    margin-right: 0.5rem;
}
.pos-selected-order-item-name {
    flex-grow: 1;
}
.pos-selected-order-item-price {
    font-weight: bold;
    color: #0d6efd;
}
.pos-selected-order-item-actions button {
    margin-left: 5px;
}
.pos-single-order-wrapper.selected-for-adding {
    border: 2px solid #0d6efd !important;
    box-shadow: 0 0 8px rgba(13, 110, 253, 0.4) !important;
    background-color: #eaf3ff !important;
}
/* ============================================================================== */
/* MEDIA QUERIES PARA RESPONSIVIDADE DO POS */
/* ============================================================================== */
@media (max-width: 1200px) { /* Ajustes para telas menores (ex: tablets em landscape) */
    .pos-product-list {
        width: 250px; /* Diminui a largura da lista de produtos */
    }
    .pos-order-details {
        width: 300px; /* Diminui a largura da sidebar de checkout */
    }
    #pos-products-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); /* Produtos menores */
    }
    .pos-table-card {
        width: 120px;
        height: 100px;
    }
    .pos-table-card i {
        font-size: 1.8rem;
    }
}

/* ============================================================================== */
/* ESTILOS DO PONTO ZERO (MANTIDOS E SOBRESCRITOS ONDE NECESSÁRIO) */
/* ============================================================================== */

/* Mantenha todos os seus outros estilos que não foram diretamente afetados pelo POS aqui.
   As novas regras do POS usam seletores mais específicos e !important para garantir a prioridade.
   Por exemplo, as regras do offcanvas do seu ponto zero já estão incluídas no topo deste CSS.
*/

/* ============================================================================== */
/* AJUSTES EXTREMAMENTE AGRESSIVOS PARA pos.php - ITENS DO PEDIDO NO CHECKOUT */
/* Adicionar ao final do assets/css/estilo.css */
/* ============================================================================== */

/* Força o container de itens a ter um fluxo e visibilidade máxima */
.pos-order-details #pos-order-items { /* Seletor mais específico com ID */
    display: block !important; /* Garante que o container de itens tenha um fluxo normal */
    height: auto !important; /* Permite que a altura se ajuste ao conteúdo */
    min-height: 100px !important; /* Garante uma altura mínima visível para depuração */
    overflow-y: auto !important; /* Permite scroll vertical se muitos itens */
    visibility: visible !important; /* Garante visibilidade */
    opacity: 1 !important; /* Garante opacidade total */
    z-index: 9999 !important; /* Tenta forçar acima de tudo */
    position: relative !important; /* Garante que z-index funcione */
    background-color: #ffcccc !important; /* DEBUG: Fundo vermelho para ver a área */
    border: 3px solid red !important; /* DEBUG: Borda vermelha */
    padding: 1rem !important; /* Garante padding */
    box-sizing: border-box !important;
}

/* Garante que cada item individual do pedido seja visível e tenha layout flex */
.pos-order-details #pos-order-items .pos-selected-order-item { /* Seletor mais específico */
    display: flex !important; /* Força o display para flex */
    align-items: center !important;
    justify-content: space-between !important; /* Espaça os itens */
    background-color: #f0f8ff !important; /* DEBUG: Fundo azul claro para cada item */
    padding: 0.75rem !important;
    border-radius: 0.25rem !important;
    margin-bottom: 0.75rem !important; /* Mais espaçamento entre itens */
    color: #333 !important; /* Cor de texto padrão para garantir visibilidade */
    box-sizing: border-box !important;
    min-height: 60px !important; /* Garante uma altura mínima para cada item */
    flex-shrink: 0 !important;
    flex-grow: 1 !important; /* Permite que ocupe o espaço disponível */
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 9999 !important;
    position: relative !important;
    border: 1px solid green !important; /* DEBUG: Borda verde */
}

/* Garante que a imagem do item tenha tamanho e seja visível */
.pos-order-details #pos-order-items .pos-selected-order-item .pos-order-item-img {
    display: block !important;
    width: 60px !important; /* Aumentar um pouco a imagem */
    height: 60px !important;
    object-fit: cover !important;
    border-radius: 0.25rem !important;
    margin-right: 1rem !important; /* Mais margem */
    flex-shrink: 0 !important;
    border: 1px solid blue !important; /* DEBUG: Borda azul */
}

/* Garante que o texto dos itens seja visível e formatado */
.pos-order-details #pos-order-items .pos-selected-order-item span {
    color: #333 !important; /* Garante cor de texto visível */
    font-size: 1rem !important; /* Aumentar um pouco a fonte */
    line-height: 1.4 !important;
    white-space: normal !important;
    flex-shrink: 1 !important;
    min-width: 0 !important; /* Permite que o span encolha seu conteúdo */
    visibility: visible !important;
    opacity: 1 !important;
}

/* Garante que o nome do produto tenha espaço para crescer */
.pos-order-details #pos-order-items .pos-selected-order-item .pos-selected-order-item-name {
    flex-grow: 1 !important;
    margin-right: 0.5rem !important; /* Espaçamento antes do preço */
}

/* Garante que o preço fique à direita e não encolha */
.pos-order-details #pos-order-items .pos-selected-order-item .pos-selected-order-item-price {
    font-weight: bold !important;
    color: #0d6efd !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;
    font-size: 1.1rem !important; /* Aumentar um pouco a fonte */
}

/* Esconde a mensagem "Nenhum item no pedido." se houver itens (garante que não haja conflito) */
.pos-order-details #pos-order-items > p.text-muted.text-center {
    display: none !important;
}

/* ============================================================================== */
/* AJUSTES ADICIONAIS PARA TOTAL NO CHECKOUT DO POS */
/* ============================================================================== */
.pos-order-details .pos-order-footer h5.mb-0 {
    font-size: 1.4rem !important; /* Aumenta a fonte do "Total:" */
    font-weight: 600 !important;
    color: #343a40 !important;
}

.pos-order-details .pos-order-footer h4#pos-order-total {
    font-size: 2rem !important; /* Aumenta a fonte do valor total */
    font-weight: 800 !important;
    color: #0d6efd !important; /* Garante a cor azul */
}

/* ============================
   POS - LIMPEZA VISUAL (REMOVER DEBUG)
   Cole no FINAL do assets/css/estilo.css
   ============================ */

/* Sidebar do pedido */
.pos-order-details{
  background:#fff !important;
  border-left:1px solid #e9ecef !important;
  box-shadow:none !important;
}

/* Container de itens (remove vermelho/amarelo etc.) */
.pos-order-details #pos-order-items{
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  min-height: 120px !important;
  overflow-y: auto !important;
}

/* Item do pedido (remove verde/preto/azul etc.) */
.pos-order-details #pos-order-items .pos-selected-order-item{
  background: #ffffff !important;
  border: 1px solid #edf0f2 !important;
  border-radius: 12px !important;
  padding: 10px 12px !important;
  margin-bottom: 10px !important;
  box-shadow: 0 2px 8px rgba(16,24,40,0.06) !important;
  color: inherit !important;
}

/* Imagem do item */
.pos-order-details #pos-order-items .pos-order-item-img{
  width: 44px !important;
  height: 44px !important;
  border-radius: 10px !important;
  border: 1px solid #eef2f6 !important;
  background: #f8fafc !important;
  object-fit: cover !important;
  margin-right: 10px !important;
}

/* Tipografia do item */
.pos-order-details #pos-order-items .pos-selected-order-item-qty{
  font-weight: 700 !important;
  color: #0d6efd !important;
  margin-right: 8px !important;
}

.pos-order-details #pos-order-items .pos-selected-order-item-name{
  font-weight: 600 !important;
  color: #212529 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  max-width: 180px; /* ajuste fino */
}

.pos-order-details #pos-order-items .pos-selected-order-item-price{
  font-weight: 800 !important;
  color: #0d6efd !important;
  white-space: nowrap !important;
}

/* Remove qualquer debug aplicado em spans */
.pos-order-details #pos-order-items .pos-selected-order-item span{
  color: inherit !important;
  border: 0 !important;
}

/* Header do checkout */
.pos-order-details-header{
  border-bottom: 1px solid #eef2f6 !important;
}

/* Total mais clean */
.pos-order-details .pos-order-footer{
  border-top: 1px solid #eef2f6 !important;
}

.pos-order-details .pos-order-footer h5{
  color:#6c757d !important;
  font-weight:600 !important;
}

.pos-order-details #pos-order-total{
  font-weight: 900 !important;
}

/* Botões: padronizar visual (profissional) */
.pos-order-details .btn{
  border-radius: 12px !important;
}

/* Opcional: reduzir “cara de debug” caso algum estilo inline permaneça */
.pos-order-details *{
  outline: none !important;
}

/* =========================================================
   MESA_STATUS - GARANTIR ROLAGEM (OVERRIDE FORÇADO)
   Cole NO FINAL do assets/css/estilo.css para máxima prioridade.
   ========================================================= */
body.page-mesa-status,
html { /* Alvo: o body da página mesa_status E o elemento html */
  overflow-y: auto !important; /* Força a rolagem vertical */
  height: auto !important;     /* Permite que a altura se ajuste ao conteúdo */
  min-height: 100vh !important; /* Garante que ocupe pelo menos a altura da tela */
}

body.page-mesa-status {
  overflow-x: hidden !important; /* Apenas para garantir que não haja scroll horizontal indesejado */
}

body.page-mesa-status .order-status-wrapper {
  /* Garante que o container principal da página não restrinja a rolagem */
  height: auto !important;
  min-height: auto !important;
  overflow: visible !important; /* Permite que o conteúdo transborde este wrapper */
  display: block !important; /* Garante que não haja interferência de flexbox/grid que possa limitar a altura */
}
/* FIX flexbox: evita colapsos de altura em áreas com overflow */
.pos-central-area {
  min-height: 0;
}

.pos-main-layout-area {
  min-height: 0;
}

/* --- Estilo para as Variações como "Pílulas" (com checkboxes reais) --- */

/* Esconde o checkbox padrão de forma mais robusta (mantido) */
.form-check-pill-item .form-check-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    padding: 0;
    margin: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* Estilo para o label (a pílula) */
.variation-pill-label {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Mantém nome e preço separados */
    padding: 0.75rem 1rem; /* <<< MANTIDO: Padding interno da pílula */
    border: 1px solid #ced4da;
    border-radius: 0.5rem;
    background-color: #ffffff;
    color: #343a40;
    font-size: 1rem; /* Ajustado para 1rem */
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    user-select: none;
    margin-bottom: 0;
    width: 100%; /* Ocupa 100% da largura do seu pai (.form-check-pill-item) */
    box-sizing: border-box;
    min-height: 48px;
    text-align: left;
}

.variation-pill-label:hover {
    background-color: #f0f0f0;
    border-color: #adb5bd;
}

/* Estilo quando o checkbox associado está marcado */
.form-check-pill-item .form-check-input:checked + .variation-pill-label {
    background-color: #0d6efd;
    border-color: #0d6efd;
    color: #ffffff;
    font-weight: 600;
    box-shadow: 0 0.125rem 0.25rem rgba(13, 110, 253, 0.2);
}

/* Estilo para o texto dentro do label */
.variation-label-text {
    display: flex;
    align-items: center;
    flex-grow: 1; /* Permite que o texto ocupe o espaço disponível */
    white-space: normal; /* Permite que o texto quebre linha se for muito longo */
    min-width: 0; /* Garante que o texto possa encolher */
    /* NOVO: Ajustar espaçamento entre o texto e o preço, se necessário */
    margin-right: 0.5rem; 
}


.variation-pill-price {
    /* margin-left: 0.5rem; REMOVIDO: Agora o margin-right do .variation-label-text controla o espaço */
    color: #6c757d;
    font-weight: normal;
    flex-shrink: 0; /* Impede que o preço encolha */
    white-space: nowrap; /* Garante que o preço não quebre linha */
}

/* Ajusta o preço dentro da pílula selecionada */
.form-check-pill-item .form-check-input:checked + .variation-pill-label .variation-pill-price {
    color: #ffffff;
}

/* Controla a largura de cada pílula dentro do flex container */
.form-check-pill-item {
    flex: 1 1 100%; /* No mobile, ocupa 100% da largura */
    max-width: 100%;
}

/* Para telas médias (md breakpoint e acima, ex: tablets), duas colunas */
@media (min-width: 768px) {
    .form-check-pill-item {
        flex: 0 0 calc(50% - (var(--bs-gutter-x, 0.5rem) / 2)); /* Duas colunas com gap */
        max-width: calc(50% - (var(--bs-gutter-x, 0.5rem) / 2));
    }
}

/* Para telas grandes (lg breakpoint e acima, ex: desktops), pode ser ajustado se necessário */
@media (min-width: 992px) {
    .form-check-pill-item {
        flex: 0 0 calc(50% - (var(--bs-gutter-x, 0.5rem) / 2)); /* Mantém duas colunas no desktop */
        max-width: calc(50% - (var(--bs-gutter-x, 0.5rem) / 2));
    }
}

/* Ajustes para o botão de toggle no mobile (mantido) */
.mobile-variations-toggle button {
    font-weight: 600;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
}
.mobile-variations-toggle button::after {
    display: inline-block;
    margin-left: 0.5em;
    vertical-align: 0.255em;
    content: "";
    border-top: 0.3em solid;
    border-right: 0.3em solid transparent;
    border-bottom: 0;
    border-left: 0.3em solid transparent;
    transition: transform 0.2s ease-in-out;
}
.mobile-variations-toggle button[aria-expanded="true"]::after {
    transform: rotate(180deg);
}

/* FIX: input de quantidade não pode ficar com 20px (isso “mata” o controle) */
.product-detail-wrapper .quantity-control input#productQuantity {
    width: 50px !important;
    max-width: 50px !important;
    min-width: 50px !important;
    flex: 0 0 50px !important;
}

/* ✅ Cole no FINAL do assets/css/estilo.css (ou no <style> do kds.php) */
.kds-timer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  padding: 10px 12px;
  margin: 10px 0 12px; /* acima do botão */
  border: 1px solid rgba(255,255,255,0.12);
}
.kds-timer .kds-timer-time {
  font-weight: 900;
  font-size: 1.35rem;
  line-height: 1;
}
.kds-timer .kds-timer-label {
  margin-top: 4px;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

/* Em tempo: -02:00 até 10:00 */
.kds-timer--ok {
  background: #d1f7d6; /* verde claro */
  border-color: #b9efc1;
}
.kds-timer--ok .kds-timer-time,
.kds-timer--ok .kds-timer-label {
  color: #146c2e; /* verde escuro */
}

/* Atenção: 10:01 até 15:00 */
.kds-timer--warn {
  background: #fff3cd; /* amarelo claro */
  border-color: #ffe69c;
}
.kds-timer--warn .kds-timer-time,
.kds-timer--warn .kds-timer-label {
  color: #8a6d00; /* amarelo escuro */
}

/* Atrasado: > 15:00 */
.kds-timer--late {
  background: #f8d7da; /* vermelho claro */
  border-color: #f1aeb5;
}
.kds-timer--late .kds-timer-time,
.kds-timer--late .kds-timer-label {
  color: #8a1c24; /* vermelho escuro */
}

.kds-timer{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  padding:10px 12px;
  margin:10px 0 12px; /* fica logo acima do botão */
  border:1px solid rgba(255,255,255,0.12);
}
.kds-timer .kds-timer-time{ font-weight:900; font-size:1.35rem; line-height:1; }
.kds-timer .kds-timer-label{ margin-top:4px; font-size:0.85rem; font-weight:800; letter-spacing:0.02em; }

.kds-timer--ok{ background:#d1f7d6; border-color:#b9efc1; }
.kds-timer--ok .kds-timer-time, .kds-timer--ok .kds-timer-label{ color:#146c2e; }

.kds-timer--warn{ background:#fff3cd; border-color:#ffe69c; }
.kds-timer--warn .kds-timer-time, .kds-timer--warn .kds-timer-label{ color:#8a6d00; }

.kds-timer--late{ background:#f8d7da; border-color:#f1aeb5; }
.kds-timer--late .kds-timer-time, .kds-timer--late .kds-timer-label{ color:#8a1c24; }

/* ============================================================ */
/* FOOTER DO SITE                                                */
/* ============================================================ */
.site-footer {
    background-color: #212529 !important;
    color: #adb5bd;
    margin-top: 2rem;
}
.site-footer h6 {
    color: #f8f9fa;
}
.site-footer .footer-links li {
    margin-bottom: 0.4rem;
}
.site-footer .footer-links a {
    color: #adb5bd;
    text-decoration: none;
    transition: color 0.2s;
}
.site-footer .footer-links a:hover {
    color: #ffffff;
    text-decoration: underline;
}
.site-footer .footer-logo {
    filter: brightness(0) invert(1);
    opacity: 0.85;
}
.site-footer hr {
    opacity: 0.2;
}

/* ============================================================= */
/* MOBILE: Ajustes de layout e fontes para index.php e modal    */
/* DEVE SER O ÚLTIMO BLOCO DO FICHEIRO PARA MÁXIMA PRIORIDADE   */
/* ============================================================= */
@media (max-width: 991.98px) {
  /* --- Layout geral da página index.php no mobile --- */
  body.page-index .customer-menu-wrapper {
    height: auto !important;
    min-height: 100vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  body.page-index .menu-left-section {
    padding: 0.6rem !important; /* Padding geral menor */
    height: auto !important;
    overflow-y: visible !important; /* Permite o scroll do body */
  }
  body.page-index .menu-content-wrapper {
    margin: 0 auto;
    max-width: 100%;
  }

  /* --- Cabeçalho/Banner do restaurante --- */
  .page-index .menu-restaurante-header {
    min-height: 110px !important;
    padding: 8px !important;
    margin-bottom: 0.5rem !important;
    border-radius: 12px !important;
  }
  .page-index .menu-header-logo-circle {
    width: 80px !important;
    height: 80px !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important;
  }

  /* --- Barra "Você está navegando pela ementa da loja:" --- */
  .page-index .loja-context-bar {
    padding: 0.2rem 0 !important;
    margin-bottom: 0.5rem !important;
    gap: 0.3rem !important;
    border-bottom: 1px solid var(--bs-gray-300) !important;
  }
  .page-index .loja-context-bar .text-muted.small {
    font-size: 0.7rem !important;
  }
  .page-index .loja-context-bar .btn {
    font-size: 0.6rem !important;
    padding: 0.2rem 0.4rem !important;
  }
  .page-index .loja-whatsapp-btn {
      margin-left: 0.4rem !important;
  }


  /* --- Título "Categorias" --- */
  .page-index h2.h5.fw-bold.mb-3 {
    font-size: 1.0rem !important;
    margin-bottom: 0.4rem !important;
    margin-top: 1rem !important;
  }

  /* --- Carrossel de categorias --- */
  .page-index .category-carousel {
    margin-bottom: 0.8rem !important;
    padding-bottom: 5px !important; /* Espaço para scroll invisível */
  }
  .page-index .category-carousel-item {
    margin-right: 0.5rem !important;
    min-width: 60px !important;
    padding: 2px 1px !important;
  }
  .page-index .category-carousel-item img {
    width: 50px !important;
    height: 50px !important;
    margin-bottom: 0.2rem !important;
  }
  .page-index .category-carousel-item .category-name {
    font-size: 0.6rem !important;
    max-width: 60px !important;
  }

  /* --- Cards de produtos (3 por linha no mobile) --- */
  .page-index .product-grid-section .row > *,
  .page-index .product-grid-section .row > div {
    width: 33.333% !important;
    flex: 0 0 33.333% !important;
    max-width: 33.333% !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
  }
  .page-index .product-grid-section .row {
    --bs-gutter-x: 8px !important;
  }
  .page-index .product-card {
    border-radius: 0.5rem !important;
  }
  .page-index .product-card img {
    height: 100px !important;
    border-top-left-radius: 0.5rem !important;
    border-top-right-radius: 0.5rem !important;
  }
  .page-index .product-card-body {
    padding: 0.3rem !important;
  }
  .page-index .product-name {
    font-size: 0.75rem !important;
    line-height: 1.2 !important;
    margin-bottom: 0.1rem !important;
  }
  .page-index .product-description {
    font-size: 0.6rem !important;
    line-height: 1.3 !important;
    height: 2.2em !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    margin-bottom: 0.2rem !important;
  }
  .page-index .product-price {
    font-size: 0.9rem !important;
    margin-bottom: 0.4rem !important;
  }
  .page-index .add-to-cart-btn {
    font-size: 0.7rem !important;
    padding: 0.3rem 0.5rem !important;
    margin-top: 0.3rem !important;
  }
  .page-index .add-to-cart-btn i {
    font-size: 0.8em !important;
  }
  .page-index .product-badge {
    font-size: 0.55rem !important;
    padding: 2px 4px !important;
    gap: 3px !important;
  }
  .page-index .product-badge-icon {
    width: 20px !important;
    height: 20px !important;
    font-size: 0.55rem !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
  }

  /* --- Footer --- */
  .page-index .site-footer {
    margin-top: 1rem !important;
    padding: 1rem !important;
  }
  .page-index .site-footer h6 {
    font-size: 0.9rem !important;
    margin-bottom: 0.5rem !important;
  }
  .page-index .site-footer .footer-links a,
  .page-index .site-footer .text-muted.small {
    font-size: 0.7rem !important;
  }
  .page-index .site-footer .footer-logo {
    width: 100px !important;
  }
  .page-index .site-footer .footer-payment-img {
    max-width: 150px !important;
  }
  .page-index .site-footer hr {
    margin-top: 0.75rem !important;
    margin-bottom: 0.75rem !important;
  }

  /* --- Botão flutuante da sacola --- */
  .page-index .floating-cart-btn {
    width: 50px !important;
    height: 50px !important;
    bottom: 8px !important;
    right: 8px !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2) !important;
  }
  .page-index .floating-cart-btn i {
    font-size: 1.3rem !important;
  }
  .page-index .cart-badge {
    width: 22px !important;
    height: 22px !important;
    font-size: 0.7rem !important;
    top: -4px !important;
    right: -4px !important;
    padding: 0 !important;
  }
}

.table-sm.border-0 td {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    background-color: rgba(0,0,0,0.01) !important;
    font-size: 0.85rem;
}
.italic {
    font-style: italic;
}