/* ============================
  EXPANSÃO: Ver Dados do Pedido
  ============================*/

.resumo-compacto {
  background-color: #f8f9fa;
  padding: 10px;
  border-radius: 4px;
  margin-bottom: 10px;
}

.resumo-label {
  font-weight: bold;
  margin-right: 5px;
}

/* Botão Ver Dados do Pedido */

.ksl529f1b9 {
  padding: 2px 14px;
  background-color: #ffffff;
  color: #000000;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.5px;
  border: 1px solid #666;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  transition: all 0.25s ease;
}

.ksl529f1b9:hover {
  background-color: #222;
  border-color: #888;
  color: #eee;
}

.icone-toggle {
  margin-left: 6px;
  transition: transform 0.3s ease;
}

.texto-recolher {
  display: none;
}

.icone-toggle {
  margin-left: 8px;
  transition: transform 0.3s;
}

.ksl529f1b9.expandido .texto-expandir {
  display: none;
}

.ksl529f1b9.expandido .texto-recolher {
  display: inline;
}

.ksl529f1b9.expandido .icone-toggle {
  transform: rotate(180deg);
}

/* Área expansível com detalhes */
.ticket-detalhes {
  display: none;
  background-color: #fdfdfd; /* Usando o tom mais neutro */
  border: 1px solid #ddd; /* Padrão consistente */
  border-radius: 10px; /* Valor maior, visualmente mais suave */
  padding: 20px; /* Valor maior para maior legibilidade */
  margin-top: 12px;
  font-size: 14px;
  color: #333;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); /* Sombra sutil */
}

.ticket-detalhes.ativo {
  display: block;
  max-width: 550px;
}

.detalhes-conteudo {
  line-height: 1.5;
}

.detalhe-imagem a {
  color: #0066cc;
  text-decoration: underline;
}
/*fim*/

/* ===============================
removidos do html
================================== */
.produto-item {
  margin-bottom: 18px;
  padding: 12px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
  position: relative;
}

.produto-container {
  display: flex;
  gap: 16px;
}

/* Definições movidas para carrinho-base.css para evitar duplicação */
/* ===============================
          xxxxxx
================================== */
/* ============================ */
/* 💡 DETALHE DO PEDIDO VISUAL */
/* ============================ */

.ticket-detalhes .resumo-linha:last-child {
  border-bottom: none;
}

.ticket-detalhes .resumo-label {
  font-weight: bold;
  color: #111;
}

/* ====== Container de imagens agrupadas ====== */
.ksl4bc091f {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 14px;
  margin-top: 16px;
}

/* ============================ */
/* 📱 Mobile Responsiveness */
/* ============================ */
@media (max-width: 600px) {
  .ticket-detalhes {
    padding: 16px;
    font-size: 13px;
  }

  .ticket-detalhes .resumo-linha {
    padding: 6px 0;
    font-size: 13px;
  }

  .ksl4bc091f {
    grid-template-columns: 1fr 1fr;
  }

  .ver-imagem-popup {
    max-width: 100%;
  }

  .produto-container {
    flex-direction: row;
    align-items: center;
    text-align: center;
  }

  .produto-img {
    margin-bottom: 10px;
  }

  .ksl9138a01 {
    width: 100%;
  }
}

/* ======= Estilo da Tabela Rx ======= */
.resumo-rx {
  margin-top: 14px;
}

.resumo-rx-header {
  margin-bottom: 6px;
  font-size: 15px;
  font-weight: bold;
  color: #333;
}

.icone-rx {
  font-size: 14px;
  margin-left: 4px;
  color: #0071a1;
}

.tabela-rx {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin-top: 4px;
}

.tabela-rx th,
.tabela-rx td {
  padding: 6px 10px;
  border: 1px solid #ddd;
  text-align: center;
}

.tabela-rx th {
  background-color: #f1f1f1;
  font-weight: bold;
  color: #0071a1;
}

.tabela-rx td:first-child {
  background-color: #f9f9f9;
  font-weight: bold;
  color: #333;
}

/* Espaçamento entre blocos no resumo */
.ticket-detalhes > div:not(:last-child) {
  margin-bottom: 12px;
}

/* ============================
  xxxxxxxxxxxxxxxxxxxxxxxxxx
  ============================*/
/* === PATCH: Limpeza e Padronização Visual === */

/* === COMPACTAÇÃO DA ÁREA DE RECEITA === */

/* Espaçamento inferior da tabela da prescrição */
.ticket-detalhes .tabela-rx {
  margin-bottom: 8px;
}

/* Remove margens automáticas entre a tabela e linhas extras */
.ticket-detalhes .resumo-rx + .resumo-linha {
  margin-top: 6px;
}

/* Compacta espaço antes das imagens */
.ksl4bc091f {
  margin-top: 12px !important;
}

/* === MINIATURA DE RECEITA PADRONIZADA === */
.detalhe-imagem {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-top: 0;
}

.detalhe-imagem .resumo-label {
  font-size: 13px;
  font-weight: 600;
  color: #0071a1;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.detalhe-imagem .ver-imagem-popup {
  width: 90px;
  height: 90px;
  object-fit: cover;
  object-position: center;
  border-radius: 6px;
  border: 1px solid #ccc;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease;
}

.detalhe-imagem .ver-imagem-popup:hover {
  transform: scale(1.05);
  border-color: #0071a1;
  box-shadow: 0 4px 12px rgba(0, 113, 161, 0.25);
  cursor: zoom-in;
}

.ticket-detalhes .resumo-linha {
  margin-bottom: 4px;
  padding: 2px 0;
  font-size: 14px;
  line-height: 1.5;
  border-bottom: 1px dashed #ddd;
}

.ticket-wrapper {
  overflow: hidden;
  transition: height 0.3s ease;
  width: 500px;
}
/* ======= Botão Remover Produto (Discreto no canto) ======= */

.remover-produto-form {
  position: absolute;
  top: 8px;
  right: 12px;
  z-index: 10;
  margin: 0;
}

.remover-produto-btn {
  background: none;
  border: none;
  font-size: 13px;
  font-weight: 500;
  color: #999;
  text-decoration: underline;
  cursor: pointer;
  padding: 2px 6px;
  transition: color 0.2s ease, text-decoration 0.2s ease;
}

.remover-produto-btn:hover {
  color: #d00;
  text-decoration: none;
}

.ksl1b5c839 {
  color: #8f8f8f;
}

/* ===============================
   Estilo Unificado: Botões + Input
   =============================== */
.quantidade-produto {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
  gap: 0px;
  flex-wrap: wrap;
  border: 1px solid #ccc;
  border-radius: 6px;
  overflow: hidden;
  width: max-content;
  padding: 0 4px;
  position: relative;
}

/* Oculta os botões durante a atualização */
.quantidade-produto.atualizando .btn-qtd {
  visibility: hidden;
}

/* Botões - e + */
.btn-qtd {
  background-color: transparent;
  color: #0073aa;
  font-weight: bold;
  font-size: 18px;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.btn-qtd:hover {
  background-color: #f0f0f0;
}

.btn-qtd:disabled {
  color: #ccc;
  cursor: not-allowed;
}

/* ===============================
   Estilo do Input
   =============================== */
.input-qtd {
  width: 42px;
  height: 36px;
  text-align: center;
  font-size: 16px;
  border: none;
  outline: none;
  background-color: white;
}

/* Remove setinhas Chrome, Safari, Edge */
.input-qtd::-webkit-inner-spin-button,
.input-qtd::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Remove setinhas Firefox */
.input-qtd[type="number"] {
  -moz-appearance: textfield;
}

/* ===============================
   Feedback Visual: Atualizando
   =============================== */
.feedback-atualizando {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  color: #999;
  font-style: italic;
  animation: fadeBlink 1.2s ease-in-out infinite;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  top: 50%;
  transform: translate(-50%, -50%);
  display: none;
}

.quantidade-produto.atualizando .feedback-atualizando {
  display: block;
}
.quantidade-produto.atualizando .input-qtd {
  visibility: hidden;
}

/* ===============================
   Responsivo (mobile)
   =============================== */
@media screen and (max-width: 540px) {
  .quantidade-produto {
    gap: 0px;
    width: 105px !important;
    display: inline-flex !important;
  }

  .btn-qtd {
    width: 28px;
    height: 32px;
    font-size: 16px;
  }

  .input-qtd {
    width: 38px;
    height: 32px;
    font-size: 15px;
  }

  .feedback-atualizando {
    font-size: 11px;
  }
}

/* ==== BOTÕES DE VER IMAGEM NO DETALHE DO PEDIDO ==== */
.ticket-detalhes .ver-imagem-botao {
  display: inline-block;
  padding: 6px 10px;
  margin-top: 6px;
  margin-bottom: 4px;
  font-size: 13px;
  background-color: #0071a1;
  color: #fff;
  border-radius: 6px;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.ticket-detalhes .ver-imagem-botao:hover {
  background-color: #005b84;
  text-decoration: none;
}

.ticket-detalhes .resumo-linha a {
  margin-left: 6px;
}

/* minicart*/

.woocommerce-mini-cart-item .mini-detalhes {
  background: #ffffff;
  border: 1px solid #ccc;
  padding: 10px;
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.4;
  border-radius: 5px;
}

.woocommerce-mini-cart-item .mini-detalhes table.tabela-rx {
  width: 100%;
  border-collapse: collapse;
  margin-top: 5px;
}

.woocommerce-mini-cart-item .mini-detalhes table.tabela-rx th,
.woocommerce-mini-cart-item .mini-detalhes table.tabela-rx td {
  border: 1px solid #ccc;
  padding: 5px;
  text-align: center;
}

.woocommerce-mini-cart-item .mini-imagens {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.woocommerce-mini-cart-item .mini-imagens div {
  text-align: center;
}

.woocommerce-mini-cart-item .mini-imagens img {
  max-width: 80px;
  border-radius: 4px;
  border: 1px solid #ddd;
}

.woocommerce-mini-cart-item button.mini-toggle-detalhes {
  padding: 2px 14px;
  background-color: #ffffff;
  color: #000000;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.5px;
  border: 1px solid #666;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  transition: all 0.25s ease;
}

.woocommerce-mini-cart-item button.mini-toggle-detalhes :hover {
  background-color: #000000;
  color: #ffffff;
}
.woocommerce-mini-cart-item .variation {
  width: 100%;
  margin-left: 0 !important;
  padding-left: 0 !important;
  box-sizing: border-box;
}

.woocommerce-mini-cart-item dl.variation dt,
.woocommerce-mini-cart-item dl.variation dd {
  display: block;
  width: 100%;
  clear: both;
}

.logged-in.admin-bar #shop-cart-sidebar {
  width: 450px !important;
}

.cart-sidebar-content .mini_cart_item {
  padding-left: 84px !important;
}