/* ============================================================
   RESERVA MESA — Redesign da listagem /restaurantes/ (Fase 2)
   Nort Marketing · CSS-only por cima do plugin reserva-mesa v1.0.1
   Enfileirar DEPOIS de filters.css e restaurantes.css.
   Nenhum ID ou classe renomeado. Comportamento 100% intocado.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@600;700;800;900&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --rm-bordo:#5C0407;
  --rm-bordo-deep:#420305;
  --rm-bordo-light:#7A1016;
  --rm-gold:#C8B687;
  --rm-gold-strong:#B89A5F;
  --rm-gold-soft:#E4D7B8;
  --rm-cream:#FAF7F2;
  --rm-cream-2:#F3EDE2;
  --rm-dark:#1C1310;
  --rm-ink:#2B211C;
  --rm-ink-soft:#6B5F57;
  --rm-font-display:'Archivo',sans-serif;
  --rm-font-body:'Inter',sans-serif;
  --rm-ease:cubic-bezier(.22,.8,.3,1);
  --rm-shadow:0 18px 40px rgba(28,19,16,.14);
  --rm-shadow-soft:0 8px 24px rgba(28,19,16,.08);
}

/* ================= FILTROS ================= */
body .reserva-mesa-filtros{
  background:#FFFFFF;
  border:1px solid rgba(28,19,16,.08);
  border-radius:22px;
  padding:26px 26px 24px;
  box-shadow:var(--rm-shadow-soft);
  margin-bottom:38px;
}
body .reserva-mesa-filtros-row{gap:18px}
body .reserva-mesa-filtro{gap:8px}

/* Painel reordenado: CIDADE é a informação mais importante.
   Ordem visual: Estado → Cidade → Data → Categoria → Por página → botões */
body.rm-lt-on .reserva-mesa-filtros-row>*{order:9}
body.rm-lt-on .reserva-mesa-filtro:nth-child(3){order:1}
body.rm-lt-on .reserva-mesa-filtro:nth-child(4){order:2}
body.rm-lt-on .reserva-mesa-filtro:nth-child(1){order:3}
body.rm-lt-on .reserva-mesa-filtro:nth-child(5){order:4}
body.rm-lt-on .reserva-mesa-filtro:nth-child(6){order:5}
/* Busca duplicada (a topbar já tem a busca) */
body.rm-lt-on .reserva-mesa-filtro:nth-child(2){display:none}
/* Realce do bloco Estado + Cidade */
body.rm-lt-on .reserva-mesa-filtro:nth-child(3),
body.rm-lt-on .reserva-mesa-filtro:nth-child(4){
  background:var(--rm-cream);
  border:1.5px solid rgba(92,4,7,.22);
  border-radius:14px;
  padding:12px 14px;
}
body.rm-lt-on .reserva-mesa-filtro:nth-child(4){border-color:rgba(92,4,7,.45)}
body.rm-lt-on .reserva-mesa-filtro:nth-child(4) label::after{
  content:" (importante)";
  font-size:.62rem;
  letter-spacing:.04em;
  color:var(--rm-gold-strong);
}
.rm-flash{animation:rm-flash-anim 1.6s ease}
@keyframes rm-flash-anim{0%,100%{box-shadow:none}25%,60%{box-shadow:0 0 0 4px rgba(200,182,135,.6)}}
body .reserva-mesa-filtro label{
  font-family:var(--rm-font-display);
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--rm-bordo);
}
body .reserva-mesa-select,
body .reserva-mesa-input{
  font-family:var(--rm-font-body);
  font-size:.95rem;
  color:var(--rm-ink);
  padding:12px 14px;
  border:1.5px solid rgba(28,19,16,.14);
  border-radius:12px;
  background:#FFFFFF;
}
body .reserva-mesa-select:hover,
body .reserva-mesa-input:hover{border-color:rgba(92,4,7,.45)}
body .reserva-mesa-select:focus,
body .reserva-mesa-input:focus{
  border-color:var(--rm-bordo);
  box-shadow:0 0 0 3px rgba(200,182,135,.35);
}
body .reserva-mesa-input::placeholder{color:rgba(107,95,87,.7)}
body .reserva-mesa-select:disabled{background:var(--rm-cream-2);opacity:.6}
body .reserva-mesa-btn-filtrar{
  font-family:var(--rm-font-display);
  font-size:.8rem;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#FAF7F2;
  background:linear-gradient(135deg,var(--rm-bordo),var(--rm-bordo-light));
  border-radius:999px;
  padding:13px 24px;
  box-shadow:0 10px 24px rgba(92,4,7,.28);
  transition:transform .25s var(--rm-ease),box-shadow .25s;
}
body .reserva-mesa-btn-filtrar:hover{
  background:linear-gradient(135deg,var(--rm-bordo-deep),var(--rm-bordo));
  transform:translateY(-2px);
  box-shadow:0 14px 30px rgba(92,4,7,.38);
}
body .reserva-mesa-btn-filtrar:focus-visible{outline:3px solid var(--rm-gold);outline-offset:2px}
body .reserva-mesa-btn-filtrar:hover,
body .reserva-mesa-btn-filtrar:focus{background:linear-gradient(135deg,var(--rm-bordo-deep),var(--rm-bordo)) !important;color:#FAF7F2 !important}
body .reserva-mesa-btn-limpar{
  font-family:var(--rm-font-display);
  font-size:.8rem;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--rm-bordo);
  background:transparent;
  border:2px solid rgba(92,4,7,.28);
  border-radius:999px;
  padding:11px 22px;
  transition:transform .25s var(--rm-ease),border-color .25s,background .25s;
}
body .reserva-mesa-btn-limpar:hover{
  background:rgba(92,4,7,.05);
  border-color:var(--rm-bordo);
  transform:translateY(-2px);
}
body .reserva-mesa-btn-limpar:focus-visible{outline:3px solid var(--rm-gold);outline-offset:2px}
body .reserva-mesa-btn-limpar:hover,
body .reserva-mesa-btn-limpar:focus{background:rgba(92,4,7,.05) !important;color:var(--rm-bordo) !important}

/* ============ PAINEL DE FILTROS ATRÁS DO BOTÃO "FILTROS" ============
   Quando o bloco do topo (rm-lt) está ativo, o painel original fica
   recolhido e abre pelo botão. Sem o bloco, nada muda. */
body.rm-lt-on .reserva-mesa-filtros{display:none}
body.rm-lt-on.rm-lt-filtros-open .reserva-mesa-filtros{display:block;animation:rm-lt-drop .35s var(--rm-ease)}
@keyframes rm-lt-drop{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  body.rm-lt-on.rm-lt-filtros-open .reserva-mesa-filtros{animation:none}
}

/* ================= TÍTULO DA PÁGINA ================= */
body .elementor-2218 .elementor-heading-title{
  font-family:var(--rm-font-display) !important;
  font-weight:800 !important;
  letter-spacing:-.01em;
  color:var(--rm-bordo) !important;
}
/* Menos ar entre o cabeçalho do site e o título (era 80px) */
body .elementor-element-3f3e552a>.e-con-inner{padding-top:28px !important}
@media (max-width:640px){
  body .elementor-element-3f3e552a>.e-con-inner{padding-top:16px !important}
}

/* Mata o hover rosa dos links (cor global do tema Elementor) */
body .elementor-2218 a:hover,
body .elementor-2218 a:focus,
body .elementor-2218 a:active,
body .reserva-mesa-restaurantes a:hover,
body .reserva-mesa-restaurantes a:focus{color:inherit !important}
body .reserva-mesa-horario-badge.disponivel:hover{color:#FAF7F2 !important}
body .reserva-mesa-pagination-link:hover{color:var(--rm-bordo) !important}
body .reserva-mesa-card-title,
body .reserva-mesa-card-title span{color:var(--rm-bordo) !important}

/* ================= LISTA / CARDS (grid e-commerce) ================= */
body .reserva-mesa-lista{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:start}
body .reserva-mesa-card-lista{
  position:relative;
  flex-direction:column;
  background:#FFFFFF;
  border:1px solid rgba(28,19,16,.08);
  border-radius:20px;
  box-shadow:var(--rm-shadow-soft);
  transition:transform .3s var(--rm-ease),box-shadow .3s var(--rm-ease),border-color .3s;
}
body .reserva-mesa-card-lista:hover{
  transform:translateY(-4px);
  box-shadow:var(--rm-shadow);
  border-color:rgba(200,182,135,.55);
}
body .reserva-mesa-card-lista.indisponivel{opacity:.55}

/* Foto no topo do card (e-commerce) */
/* No card vertical, quem estica para igualar alturas é o card-right (o card-left
   herdava flex:1 do layout horizontal antigo e empurrava o logo p/ longe da foto) */
body .reserva-mesa-card-left{padding:0;max-width:100%;width:100%;display:flex;flex-direction:column;line-height:0;flex:0 0 auto}
body .reserva-mesa-card-lista .reserva-mesa-card-right{flex:1 1 auto}
body .reserva-mesa-carousel{border-radius:0;height:190px;min-height:190px;background:var(--rm-cream-2)}
body .reserva-mesa-carousel-item{height:190px;background:var(--rm-cream-2)}
body .reserva-mesa-carousel .owl-nav button{
  width:34px;height:34px;
  background:rgba(20,10,8,.55) !important;
  backdrop-filter:blur(3px);
}
body .reserva-mesa-carousel .owl-nav button:hover{background:rgba(92,4,7,.85) !important}
/* Dots SOBRE a foto (libera o espaço abaixo p/ o logo sobreposto) */
body .reserva-mesa-carousel{position:relative}
body .reserva-mesa-carousel .owl-dots{
  position:absolute;
  bottom:8px;left:0;right:0;
  margin:0;
  display:flex;justify-content:center;gap:2px;
  z-index:4;
  pointer-events:auto;
}
body .reserva-mesa-carousel .owl-dots .owl-dot span{
  width:5px !important;height:5px !important;
  margin:2px !important;
  background:rgba(255,255,255,.45);
  border:1px solid rgba(255,255,255,.75);
}
body .reserva-mesa-carousel .owl-dot.active span,
body .reserva-mesa-carousel .owl-dot:hover span{background:var(--rm-gold)}

/* Conteúdo do card (padding-bottom reserva o rodapé do botão Ver oferta;
   SEM position:relative — o badge % e o botão ancoram no card inteiro) */
/* padding-bottom reserva, de baixo p/ cima: aviso (30) + botão (44) + margem
   + faixa do cupom (50). Rodapé fixo: cupom → margem → botão → aviso cinza. */
/* Rodapé reserva só o que é PINNED no fundo: botão + aviso. O cupom agora
   FLUI depois dos horários (JS moveu p/ card-right), então sua margem é
   sempre a mesma — não depende do nº de horários. */
body .reserva-mesa-card-right{position:static;border-left:0;border-top:0;padding:12px 18px 100px;display:flex;flex-direction:column}
/* content-logo NUNCA quebra (o bug: nome longo empurrava a meta p/ baixo do
   logo). min-width:0 deixa o nome truncar na coluna em vez de quebrar a linha. */
body .reserva-mesa-card-right-content-logo{gap:12px;margin-bottom:8px;align-items:flex-start;flex-wrap:nowrap}
body .reserva-mesa-card-right-content-title{min-width:0;display:flex;flex-direction:column}
body .reserva-mesa-card-right-content-logo:hover{opacity:1}
/* Logo maior, sobrepondo a foto (pedido Felipe 21/07) */
body .reserva-mesa-logo{
  width:76px;height:76px;
  margin-top:-46px;
  position:relative;
  z-index:5;
  border:3px solid #FFFFFF;
  border-radius:50%;
  overflow:hidden;
  background:#FFFFFF;
  box-shadow:0 8px 20px rgba(28,19,16,.22);
  flex:none;
}
body .reserva-mesa-logo img{width:100%;height:100%;object-fit:cover}

/* Nome: SEMPRE 2 linhas reservadas (min-height) e no máx. 2 (clamp). Assim
   nome curto e nome longo ocupam a MESMA altura → tudo abaixo fica alinhado
   entre os cards, seja qual for o nome. Era d-flex (Bootstrap) → block. */
body .reserva-mesa-card-title{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  font-family:var(--rm-font-display);
  font-size:1rem;
  font-weight:800;
  letter-spacing:.01em;
  line-height:1.25;
  min-height:2.5em;      /* 2 linhas */
  min-width:0;
  margin:0;
}
body .reserva-mesa-card-title,
body .text-primary{color:var(--rm-bordo) !important}

/* ===== FAIXA DO CUPOM (fluxo, depois dos horários) =====
   O JS moveu o .price p/ card-right. Aqui ele é um bloco centrado em 3 níveis:
   rótulo "Compre o cupom por" → VALOR grande → microtexto do mecanismo.
   margin-top:auto empurra a faixa (e o resto) p/ o fim do espaço livre, mas
   como os horários vêm logo acima, o respiro fica entre nome e horários. */
body .reserva-mesa-card-lista .price{
  order:5;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1px;
  margin:14px 0 0;
  padding:10px 12px;
  background:var(--rm-cream);
  border:1.5px dashed rgba(200,182,135,.95);
  border-radius:13px;
  font-family:var(--rm-font-body);
  font-size:1.45rem;          /* o VALOR (número) */
  font-weight:900;
  color:var(--rm-bordo);
  line-height:1.05;
  text-transform:none;
  text-align:center;
}
/* rótulo (nível 1) */
body .reserva-mesa-card-lista .price::before{
  content:"Compre o cupom por";
  display:inline-flex;align-items:center;gap:6px;
  padding-left:20px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%235C0407'%3E%3Cpath d='M2 9.6V6.5A2.5 2.5 0 0 1 4.5 4h15A2.5 2.5 0 0 1 22 6.5v3.1a2.6 2.6 0 0 0 0 4.8v3.1a2.5 2.5 0 0 1-2.5 2.5h-15A2.5 2.5 0 0 1 2 17.5v-3.1a2.6 2.6 0 0 0 0-4.8Zm14.2-2.1-8.4 9h1.9l8.4-9Zm-7.6 1.2a1.2 1.2 0 1 0 0 2.4 1.2 1.2 0 0 0 0-2.4Zm6.8 5.4a1.2 1.2 0 1 0 0 2.4 1.2 1.2 0 0 0 0-2.4Z'/%3E%3C/svg%3E") left center/15px 15px no-repeat;
  font-weight:600;font-size:.74rem;color:var(--rm-ink-soft);
  text-transform:none;white-space:nowrap;
  margin-bottom:1px;
}
/* valor: "R$" + número na MESMA linha (nível 2) */
body .reserva-mesa-card-lista .price .rm-valor{display:inline-flex;align-items:baseline;gap:3px;justify-content:center}
body .reserva-mesa-card-lista .price small{font-size:.6em;font-weight:800}
/* microtexto (nível 3) — mecanismo que mata a objeção "preço divergente" */
body .reserva-mesa-card-lista .price::after{
  content:"desconto na conta · consumo à parte";
  font-weight:500;font-size:.46em;letter-spacing:.01em;line-height:1.25;
  color:var(--rm-ink-soft);text-transform:none;
  margin-top:3px;
}

/* Avaliação */
body .reserva-mesa-avaliacao{gap:8px;margin:4px 0 2px}
body .reserva-mesa-stars .fa-solid{color:var(--rm-gold-strong)}
body .reserva-mesa-stars i{font-size:11px}
body .reserva-mesa-nota-numero{color:var(--rm-ink);font-family:var(--rm-font-body);font-size:.8rem}
/* O banco não envia a contagem de avaliações; o texto sai como "- avaliações" órfão */
body .reserva-mesa-rating{display:none}

/* Badge % de desconto: SOBRE a foto (bordô, menos dourado) */
body .reserva-mesa-info-item{color:var(--rm-ink-soft);font-family:var(--rm-font-body);font-size:.78rem}
body .reserva-mesa-icon-contrato{
  position:absolute;
  top:12px;
  left:12px;
  z-index:6;
  width:auto;
  height:auto;
  padding:6px 12px;
  background:var(--rm-bordo);
  color:#FAF7F2;
  font-family:var(--rm-font-display);
  font-weight:900;
  font-size:.78rem;
  letter-spacing:.03em;
  border-radius:999px;
  box-shadow:0 6px 16px rgba(0,0,0,.28);
}
body .reserva-mesa-icon-contrato::after{content:" OFF";font-size:.66rem;margin-left:2px}
body .reserva-mesa-info-item .reserva-mesa-icon{color:rgba(107,95,87,.65);font-size:.95em}

/* Botão do card (bordô, pseudo-elemento no link real do card, posicionado no
   rodapé — DEPOIS dos horários). Rótulo honesto: o clique abre a página do
   restaurante, onde a compra acontece (decisão Felipe 22/07) */
body .reserva-mesa-card-right-content-logo{position:static}
body .reserva-mesa-card-right-content-logo::after{
  content:"Ver cupom e horários";
  position:absolute;
  left:18px;
  right:18px;
  bottom:44px;
  text-align:center;
  padding:11px 16px;
  background:linear-gradient(135deg,var(--rm-bordo),var(--rm-bordo-light));
  color:#FAF7F2;
  font-family:var(--rm-font-display);
  font-weight:800;
  font-size:.78rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  border-radius:999px;
  box-shadow:0 8px 18px rgba(92,4,7,.22);
  transition:transform .25s var(--rm-ease),box-shadow .25s;
}
body .reserva-mesa-card-right-content-logo:hover::after{
  transform:translateY(-2px);
  box-shadow:0 12px 24px rgba(92,4,7,.34);
}

/* Aviso cinza-claro DEPOIS do botão (só desktop; no mobile some).
   Só o UNIVERSAL: "até 4 pessoas por mesa" (regra da plataforma). O que muda
   por restaurante — % e exclusões tipo "bebidas e sobremesas" — NÃO entra aqui;
   fica nas Observações de cada restaurante, exibidas na página do detalhe
   (decisão Felipe 23/07: desconto muda por restaurante). */
body .reserva-mesa-card-lista::after{
  content:"Cupom válido para até 4 pessoas por mesa";
  position:absolute;
  left:18px;right:18px;bottom:14px;
  text-align:center;
  font-family:var(--rm-font-body);
  font-size:.68rem;
  line-height:1.35;
  font-weight:500;
  color:var(--rm-ink-soft);
}

/* ============ MODO CATEGORIA: GRID DE CARDS COMPLETOS ============
   Com uma categoria escolhida (body.rm-cardfull, ligado pelo bloco do topo),
   a lista vira vitrine: cards grandes no formato do mockup do cliente.
   Em "Todas" valem as fileiras horizontais (bloco rm-lt).
   Regra de conteúdo: nada de texto fixo sobre o que entra ou não no desconto
   ("todo o cardápio", "bebidas e sobremesas") — isso varia por restaurante e
   já vem do campo Observações do próprio restaurante na página de detalhe. */
body.rm-cardfull .reserva-mesa-lista{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:26px;
}
body.rm-cardfull .reserva-mesa-card-lista{min-width:0;max-width:100%;width:100%;border-radius:26px}
body.rm-cardfull .reserva-mesa-carousel,
body.rm-cardfull .reserva-mesa-carousel-item{height:230px;min-height:230px}
body.rm-cardfull .reserva-mesa-icon-contrato{
  top:16px;left:16px;
  padding:9px 16px;
  border-radius:16px;
  font-size:1.05rem;
}
body.rm-cardfull .reserva-mesa-icon-contrato::after{font-size:.72rem}
body.rm-cardfull .reserva-mesa-logo{width:92px;height:92px;margin-top:-54px}
/* rodapé reserva só o PINNED: botão + aviso 1 linha (cupom flui após horários) */
body.rm-cardfull .reserva-mesa-card-right{padding:14px 20px 104px}
/* Logo CENTRALIZADO com nome, categoria e nota (pedido Felipe 22/07):
   coluna centrada — logo no topo, depois nome/nota/categoria centrados. */
body.rm-cardfull .reserva-mesa-card-right-content-logo{flex-direction:column;align-items:center;gap:10px;flex-wrap:nowrap}
body.rm-cardfull .reserva-mesa-card-right-content-title{align-items:center;text-align:center;width:100%}
/* Nome sem altura fixa (min-height:0 anula o reserve de 2 linhas da base):
   1 linha fica compacto (nota logo abaixo), 2 linhas empurram a nota p/ baixo
   (clamp em 2 evita 3+). Espaço nome→nota enxuto. */
body.rm-cardfull .reserva-mesa-card-title{font-size:1.4rem;line-height:1.2;text-align:center;margin:0;min-height:0}
body.rm-cardfull .reserva-mesa-avaliacao{gap:10px;justify-content:center;margin:6px 0 0}
body.rm-cardfull .reserva-mesa-info-item{justify-content:center}
body.rm-cardfull .reserva-mesa-stars i{font-size:14px}
body.rm-cardfull .reserva-mesa-nota-numero{font-size:1rem;font-weight:700}
body.rm-cardfull .reserva-mesa-info-item{font-size:.9rem}
/* endereço fica na página do restaurante (decisão Felipe 22/07) */
body.rm-cardfull .reserva-mesa-endereco{display:none}
body.rm-cardfull .reserva-mesa-horarios-container{margin-top:16px;padding-top:14px}
body.rm-cardfull .rm-lt-datatag{font-size:.85rem;margin-bottom:10px}
body.rm-cardfull .reserva-mesa-horarios-badges{max-height:none;flex-wrap:wrap;gap:9px}
body.rm-cardfull .reserva-mesa-horario-badge{font-size:.9rem;padding:8px 18px}
/* faixa do cupom (fluxo): valor maior nos cards grandes */
body.rm-cardfull .price{
  margin-top:16px;padding:14px 16px;border-radius:16px;border-width:2px;font-size:2rem;
}
body.rm-cardfull .price::before{font-size:.9rem;padding-left:26px;background-size:19px 19px}
body.rm-cardfull .reserva-mesa-card-right-content-logo::after{
  left:20px;right:20px;bottom:46px;
  padding:15px 18px;
  font-size:.92rem;
}
/* aviso cinza um pouco maior nos cards grandes de categoria */
body.rm-cardfull .reserva-mesa-card-lista::after{
  left:20px;right:20px;bottom:15px;
  font-size:.74rem;
}
@media (max-width:900px){
  body.rm-cardfull .reserva-mesa-lista{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  /* mobile: sem aviso → rodapé reserva só o botão */
  body.rm-cardfull .reserva-mesa-card-right{padding:14px 16px 78px}
  body.rm-cardfull .reserva-mesa-card-title{font-size:1.28rem}
  body.rm-cardfull .price{font-size:1.7rem}
  body.rm-cardfull .reserva-mesa-card-right-content-logo::after{bottom:16px}
  body.rm-cardfull .reserva-mesa-card-lista::after{display:none}
}

/* Endereço: fora da listagem (decisão Felipe 22/07) — o lugar dele é a página
   do restaurante, junto do "como chegar". Regras mantidas caso volte. */
body .reserva-mesa-endereco{display:none}
body .reserva-mesa-endereco{color:var(--rm-ink-soft);font-size:.78em;font-family:var(--rm-font-body);margin-top:10px}
body .reserva-mesa-endereco .reserva-mesa-icon{color:rgba(92,4,7,.55);font-size:.9em}
body .reserva-mesa-endereco b{color:var(--rm-ink);font-weight:600}
body .reserva-mesa-endereco>span:last-child{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* Horários: discretos, abaixo do Ver oferta (decisão Felipe 21/07) */
body .reserva-mesa-horarios-container{
  margin-top:14px;
  padding-top:14px;
  border-top:1px dashed rgba(28,19,16,.12);
}
body .reserva-mesa-horarios-badges{gap:6px;max-height:56px;overflow:hidden}
body .reserva-mesa-horario-badge{
  font-family:var(--rm-font-body);
  font-size:.72rem;
  font-weight:600;
  padding:4px 11px;
  border-width:1.5px;
  border-radius:999px;
}
body .reserva-mesa-horario-badge.disponivel{
  background:transparent;
  border-color:rgba(92,4,7,.35);
  color:var(--rm-bordo);
}
body .reserva-mesa-horario-badge.disponivel:hover{
  background:var(--rm-bordo);
  border-color:var(--rm-bordo);
  color:#FAF7F2;
  transform:translateY(-1px);
  box-shadow:0 6px 14px rgba(92,4,7,.3);
}
body .reserva-mesa-horario-badge.indisponivel{
  background:var(--rm-cream-2);
  border-color:transparent;
  color:rgba(107,95,87,.6);
  opacity:1;
}

/* Estados vazio/erro */
body .reserva-mesa-error,
body .reserva-mesa-empty{
  background:var(--rm-cream);
  color:var(--rm-bordo);
  border:1px solid rgba(200,182,135,.6);
  border-radius:16px;
  padding:22px;
  font-family:var(--rm-font-body);
}

/* ================= PAGINAÇÃO ================= */
body .reserva-mesa-pagination{background:transparent;padding:26px 0 0}
body .reserva-mesa-pagination-info{color:var(--rm-ink-soft);font-family:var(--rm-font-body);font-weight:500}
body .reserva-mesa-pagination-link{
  font-family:var(--rm-font-display);
  font-weight:700;
  color:var(--rm-ink);
  background:#FFFFFF;
  border:1.5px solid rgba(28,19,16,.12);
  border-radius:12px;
  padding:9px 14px;
  min-width:42px;
}
body .reserva-mesa-pagination-link:hover{
  background:var(--rm-cream);
  border-color:var(--rm-bordo);
  color:var(--rm-bordo);
}
body .reserva-mesa-pagination-link.current{
  background:linear-gradient(135deg,var(--rm-bordo),var(--rm-bordo-light));
  border-color:transparent;
  color:#FAF7F2;
}
body .reserva-mesa-pagination-dots{color:var(--rm-ink-soft)}

/* ================= LIGHTBOX ================= */
body .rm-lightbox-overlay{background:rgba(16,7,6,.95)}
body .rm-lightbox-image{border-radius:12px}
body .rm-lightbox-counter{
  background:rgba(92,4,7,.85);
  font-family:var(--rm-font-body);
}
body .rm-lightbox-prev,
body .rm-lightbox-next{
  background:rgba(92,4,7,.55);
  border-radius:12px;
}
body .rm-lightbox-prev:hover,
body .rm-lightbox-next:hover{background:rgba(92,4,7,.9)}

/* ================= RESPONSIVO ================= */
@media (max-width:1100px){
  body .reserva-mesa-lista{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:768px){
  body .reserva-mesa-filtros{padding:20px 18px 18px;border-radius:18px}
}
@media (max-width:640px){
  body .reserva-mesa-lista{grid-template-columns:1fr;gap:18px}
  body .reserva-mesa-carousel{height:200px;min-height:200px}
  body .reserva-mesa-carousel-item{height:200px}
}

@media (prefers-reduced-motion:reduce){
  body .reserva-mesa-card-lista,
  body .reserva-mesa-btn-filtrar,
  body .reserva-mesa-btn-limpar,
  body .reserva-mesa-horario-badge{transition:none}
}