/**
 * COBERMINAS — CSS Funcionalidades Avançadas v2.0
 */

/* ═══════════════════════════════════════════
   1. LIGHTBOX COM WATERMARK
═══════════════════════════════════════════ */
#cbm-lightbox { display:none; position:fixed; inset:0; z-index:99999; align-items:center; justify-content:center; }
#cbm-lightbox.open { display:flex; }
#cbm-lb-backdrop { position:absolute; inset:0; background:rgba(4,10,24,.93); backdrop-filter:blur(6px); }
#cbm-lb-wrap { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; max-width:96vw; max-height:96vh; gap:10px; }
#cbm-lb-img-box { position:relative; display:flex; align-items:center; justify-content:center; max-width:90vw; max-height:82vh; border-radius:12px; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.7); user-select:none; -webkit-user-select:none; -moz-user-select:none; }
#cbm-lb-img { display:block; max-width:90vw; max-height:80vh; width:auto; height:auto; object-fit:contain; transition:opacity .3s; pointer-events:none; -webkit-user-drag:none; -webkit-user-select:none; user-select:none; }
/* Watermark central — logo + site */
#cbm-lb-watermark { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; pointer-events:none; z-index:10; }
#cbm-lb-logo { width:clamp(100px,22vw,200px); height:auto; opacity:.38; filter:drop-shadow(0 2px 10px rgba(0,0,0,.7)); -webkit-user-drag:none; pointer-events:none; }
#cbm-lb-wm-text { font-size:clamp(.7rem,1.8vw,1rem); color:rgba(255,255,255,.40); font-weight:800; letter-spacing:.15em; text-transform:uppercase; margin-top:6px; pointer-events:none; text-shadow:0 1px 4px rgba(0,0,0,.8); }
/* Grade de marca d’água repetida sobre toda a imagem */
#cbm-lb-wm-grid { position:absolute; inset:0; z-index:9; pointer-events:none;
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 60px,
    rgba(255,255,255,.045) 60px,
    rgba(255,255,255,.045) 61px
  );
}
#cbm-lb-wm-grid::after { content:'coberminas.com.br     coberminas.com.br     coberminas.com.br'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:.6rem; font-weight:700; letter-spacing:.2em; color:rgba(255,255,255,.12); text-transform:uppercase; word-break:break-all; overflow:hidden; pointer-events:none; }
#cbm-lb-counter { position:absolute; top:10px; right:12px; z-index:20; background:rgba(0,0,0,.65); backdrop-filter:blur(4px); border-radius:20px; padding:4px 12px; pointer-events:none; }
#cbm-lb-num { color:#fff; font-size:.78rem; font-weight:700; letter-spacing:.05em; white-space:nowrap; }
#cbm-lb-caption { color:rgba(255,255,255,.8); font-size:.85rem; text-align:center; max-width:80vw; font-weight:500; min-height:1.2em; }
#cbm-lb-close { position:absolute; top:-44px; right:0; background:rgba(255,255,255,.12); border:none; color:#fff; width:36px; height:36px; border-radius:50%; cursor:pointer; font-size:1rem; display:flex; align-items:center; justify-content:center; transition:background .2s; z-index:20; }
#cbm-lb-close:hover { background:rgba(255,255,255,.3); }
#cbm-lb-prev, #cbm-lb-next { position:fixed; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.12); border:none; color:#fff; width:44px; height:44px; border-radius:50%; cursor:pointer; font-size:1rem; display:flex; align-items:center; justify-content:center; transition:background .2s, transform .2s; z-index:20; }
#cbm-lb-prev { left:12px; }
#cbm-lb-next { right:12px; }
#cbm-lb-prev:hover, #cbm-lb-next:hover { background:rgba(255,122,43,.75); transform:translateY(-50%) scale(1.1); }
#cbm-lb-loader { position:absolute; inset:0; display:none; align-items:center; justify-content:center; background:rgba(4,10,24,.6); color:#ff7a2b; font-size:2rem; z-index:15; }
@media(max-width:600px){ #cbm-lb-prev{left:4px} #cbm-lb-next{right:4px} #cbm-lb-img{max-height:70vh} }

/* ── Proteção de print: oculta todo conteúdo ao imprimir ── */
@media print {
  body > *:not(#cbm-print-block) { display:none !important; }
  #cbm-print-block {
    display:flex !important; align-items:center; justify-content:center;
    height:100vh; flex-direction:column; gap:16px;
    font-family:sans-serif; color:#0a2d52;
  }
}

/* ── Proteção nas miniaturas do portfólio ── */
.cbm-card-slide,
.gallery-img,
.cbm-ast-thumb,
img.gallery-thumb {
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
}
/* Permite clique apenas no container, não na imagem diretamente */
.cbm-card-slideshow,
.gallery-card,
.portfolio-card { pointer-events: auto; cursor: pointer; }

/* Sobreposição invisível que bloqueia clique direto na imagem */
.cbm-img-shield {
  position: absolute; inset: 0; z-index: 5;
  background: transparent; cursor: pointer;
}

/* ════════════════════════════════════════════
   2. BARRA INFERIOR FIXA
   2. BARRA INFERIOR FIXA
═══════════════════════════════════════════ */
/* Espaço: barra serviços (58px) + padding extra */
body { padding-bottom: 70px; }
/* whatsapp-fab e voice-button removidos — Léo centraliza toda interação */

#cbm-service-bar { position:fixed; bottom:0; left:0; right:0; z-index:9560; background:linear-gradient(135deg,#061f44,#0a2d52); border-top:2px solid rgba(255,122,43,.5); box-shadow:0 -4px 20px rgba(0,0,0,.4); transition:transform .3s; }
#cbm-service-bar.collapsed { transform:translateY(calc(100% - 24px)); }
#cbm-sb-inner { display:flex; align-items:center; gap:2px; overflow-x:auto; padding:6px 48px 6px 8px; scrollbar-width:none; }
#cbm-sb-inner::-webkit-scrollbar { display:none; }
.cbm-sb-item { display:flex; flex-direction:column; align-items:center; min-width:58px; padding:5px 6px; border-radius:8px; text-decoration:none; color:rgba(255,255,255,.7); transition:background .2s, color .2s, transform .15s; cursor:pointer; flex-shrink:0; }
.cbm-sb-item:hover, .cbm-sb-item.active { background:rgba(255,122,43,.18); color:#ff7a2b; transform:translateY(-2px); }
.cbm-sb-emoji { font-size:1.2rem; line-height:1; margin-bottom:2px; }
.cbm-sb-label { font-size:.6rem; font-weight:600; text-transform:uppercase; letter-spacing:.04em; white-space:nowrap; }
#cbm-sb-toggle { position:absolute; right:8px; top:50%; transform:translateY(-50%); background:rgba(255,122,43,.2); border:1px solid rgba(255,122,43,.4); color:#ff7a2b; width:30px; height:30px; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:.75rem; transition:background .2s; }
#cbm-sb-toggle:hover { background:rgba(255,122,43,.4); }


/* ═══════════════════════════════════════════
   3. PLAYER DE MÚSICA — REMOVIDO
═══════════════════════════════════════════ */
/* Música de fundo removida a pedido do cliente */
#cbm-music-wrap,
#cbm-music-toggle,
#cbm-music-panel { display: none !important; }


/* ═══════════════════════════════════════════
   4. MASCOTE LEÃO + CHAT (ESQUERDA)
═══════════════════════════════════════════ */

/* cbm-lion SVG removido — substituído pelo LeoMascot PNG em js/leo.js */
#cbm-lion { display: none !important; }

/* ── SVG do Leão ── */
#cbm-lion-mascot {
  position: relative;
  cursor: pointer;
  width: 80px;
  height: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  filter: drop-shadow(0 4px 16px rgba(0,0,0,.35));
  transition: transform .25s cubic-bezier(.34,1.56,.64,1);
  user-select: none;
}
#cbm-lion-mascot:hover {
  transform: scale(1.1) translateY(-6px);
}
#cbm-lion-mascot.chat-open {
  transform: scale(1.05);
}

/* SVG do leão em si */
#cbm-lion-svg {
  width: 80px;
  height: 100px;
  overflow: visible;
}

/* Animações do leão */
@keyframes lionBounce {
  0%  { transform: scaleY(1) translateY(0); }
  30% { transform: scaleY(.9) translateY(4px); }
  60% { transform: scaleY(1.12) translateY(-8px); }
  80% { transform: scaleY(.96) translateY(2px); }
  100%{ transform: scaleY(1) translateY(0); }
}
@keyframes tailWag {
  0%,100%{ transform: rotate(10deg) translateX(0); }
  50%    { transform: rotate(-20deg) translateX(-4px); }
}
@keyframes pawWave {
  0%,100%{ transform: rotate(-5deg); }
  50%    { transform: rotate(25deg) translateY(-4px); }
}
@keyframes eyeBlink {
  0%,90%,100%{ scaleY: 1; }
  95%        { scaleY: 0; }
}
@keyframes lionFloat {
  0%,100%{ transform: translateY(0); }
  50%    { transform: translateY(-5px); }
}

#cbm-lion-mascot .lion-body-g {
  animation: lionFloat 3s ease-in-out infinite;
  transform-origin: center bottom;
}
#cbm-lion-mascot:hover .lion-body-g {
  animation: lionBounce .5s ease forwards;
}
#cbm-lion-mascot .lion-tail {
  animation: tailWag 1.4s ease-in-out infinite;
  transform-origin: 12px 55px;
}
#cbm-lion-mascot .lion-paw-r {
  animation: pawWave 2s ease-in-out infinite;
  transform-origin: 56px 72px;
}

/* Badge LEO */
#cbm-lion-badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg,#ff7a2b,#e85d04);
  color: #fff;
  font-size: .52rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 10px;
  letter-spacing: .07em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  z-index: 5;
}

/* Bubble de convite — abre para a direita */
#cbm-lion-bubble {
  position: absolute;
  bottom: 68px;
  left: 88px;
  background: #fff;
  border-radius: 12px 12px 12px 0;
  padding: 8px 14px;
  font-size: .78rem;
  font-weight: 600;
  color: #1e293b;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0,0,0,.15);
  border: 1px solid #e2e8f0;
  transition: opacity .3s, transform .3s;
  pointer-events: none;
  z-index: 1;
}
#cbm-lion-bubble::before {
  content: '';
  position: absolute;
  left: -7px;
  bottom: 12px;
  border: 7px solid transparent;
  border-right-color: #fff;
}
#cbm-lion-bubble.hidden {
  opacity: 0;
  transform: translateX(-8px);
}

/* ── Painel do Chat — abre para a direita do leão ── */
#cbm-lion-panel {
  display: none;
  flex-direction: column;
  width: 320px;
  max-height: 520px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 16px 48px rgba(0,0,0,.25);
  overflow: hidden;
  border: 1px solid rgba(10,45,82,.1);
  position: fixed;
  left: 100px;
  bottom: 170px;
  z-index: 9490;
}
#cbm-lion-panel.open { display:flex; }

#cbm-lion-header { display:flex; align-items:center; gap:10px; padding:12px 14px; background:linear-gradient(135deg,#061f44,#0a2d52); color:#fff; }
#cbm-lion-header strong { display:block; font-size:.88rem; }
#cbm-lion-header small { color:rgba(255,255,255,.6); font-size:.7rem; }
#cbm-lion-avatar { font-size:1.8rem; line-height:1; flex-shrink:0; }

.cbm-ast-ctrl { background:rgba(255,255,255,.15); border:none; color:#fff; width:28px; height:28px; border-radius:50%; cursor:pointer; font-size:.78rem; display:flex; align-items:center; justify-content:center; transition:background .2s; }
.cbm-ast-ctrl:hover { background:rgba(255,255,255,.35); }

/* Tela de pré-registro (nome + telefone) */
#cbm-lion-preform {
  padding: 16px 14px;
  background: linear-gradient(180deg, #f0f4ff 0%, #fff 100%);
  border-bottom: 1px solid #e2e8f0;
}
#cbm-lion-preform p {
  font-size: .82rem;
  color: #334155;
  margin-bottom: 10px;
  line-height: 1.5;
}
#cbm-lion-preform input {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: .82rem;
  margin-bottom: 8px;
  outline: none;
  transition: border .2s;
  box-sizing: border-box;
}
#cbm-lion-preform input:focus { border-color: #ff7a2b; }
#cbm-preform-btn {
  width: 100%;
  background: linear-gradient(135deg,#ff7a2b,#e85d04);
  border: none;
  color: #fff;
  border-radius: 8px;
  padding: 9px;
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
  transition: filter .2s;
}
#cbm-preform-btn:hover { filter: brightness(1.1); }

#cbm-lion-msgs { flex:1; overflow-y:auto; padding:12px; display:flex; flex-direction:column; gap:8px; background:#f7f9fc; }
.cbm-ast-msg { display:flex; flex-direction:column; }
.cbm-ast-msg.bot { align-items:flex-start; }
.cbm-ast-msg.user { align-items:flex-end; }
.cbm-ast-bubble { max-width:90%; padding:8px 12px; border-radius:12px; font-size:.82rem; line-height:1.55; }
.cbm-ast-msg.bot .cbm-ast-bubble { background:#fff; color:#1e293b; border-bottom-left-radius:3px; box-shadow:0 1px 4px rgba(0,0,0,.08); }
.cbm-ast-msg.user .cbm-ast-bubble { background:linear-gradient(135deg,#0a2d52,#1a5fa8); color:#fff; border-bottom-right-radius:3px; }

.cbm-ast-gallery { display:flex; gap:6px; margin-top:8px; flex-wrap:wrap; }
.cbm-ast-thumb { width:70px; height:70px; object-fit:cover; border-radius:8px; cursor:pointer; transition:transform .18s, box-shadow .18s, border .18s; border:2px solid transparent; }
.cbm-ast-thumb:hover { transform:scale(1.08); box-shadow:0 3px 12px rgba(255,122,43,.4); border-color:#ff7a2b; }

#cbm-lion-opts { padding:8px 12px; display:flex; flex-direction:column; gap:5px; background:#fff; border-top:1px solid #f0f0f0; max-height:200px; overflow-y:auto; }
.cbm-ast-opt { background:#f1f5f9; border:1px solid #e2e8f0; border-radius:8px; padding:8px 12px; text-align:left; cursor:pointer; font-size:.8rem; color:#1e293b; transition:all .18s; font-weight:500; }
.cbm-ast-opt:hover { background:#fff3eb; border-color:#ff7a2b; transform:translateX(3px); }
.cbm-ast-opt.primary { background:linear-gradient(135deg,#25d366,#128c4a); color:#fff; border:none; text-align:center; }
.cbm-ast-opt.primary:hover { filter:brightness(1.1); transform:none; }

#cbm-lion-input-wrap { display:flex; gap:6px; padding:8px 12px; background:#fff; border-top:1px solid #f0f0f0; }
#cbm-lion-input { flex:1; border:1px solid #e2e8f0; border-radius:8px; padding:8px 10px; font-size:.82rem; outline:none; transition:border .2s; }
#cbm-lion-input:focus { border-color:#ff7a2b; }
#cbm-lion-send { background:linear-gradient(135deg,#ff7a2b,#e85d04); border:none; color:#fff; width:36px; height:36px; border-radius:8px; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:.9rem; transition:filter .2s; }
#cbm-lion-send:hover { filter:brightness(1.1); }

#cbm-lion-footer { padding:8px 12px; background:#f7f9fc; border-top:1px solid #f0f0f0; }
#cbm-lion-wa { display:flex; align-items:center; justify-content:center; gap:6px; text-decoration:none; color:#128c4a; font-size:.78rem; font-weight:700; padding:6px; border-radius:8px; transition:background .2s; }
#cbm-lion-wa:hover { background:#e8faf0; }

/* Responsive */
@media(max-width:540px){
  #cbm-lion-panel { width:calc(100vw - 24px); left:12px; bottom:200px; }
  #cbm-lion { left:8px; bottom:170px; }
  #cbm-lion-bubble { left:90px; font-size:.72rem; }
}
@media(max-width:360px){
  #cbm-lion-panel { width: calc(100vw - 16px); left: 8px; }
}


/* ═══════════════════════════════════════════
   5. MINI SLIDESHOW NOS CARDS DE SERVIÇO
═══════════════════════════════════════════ */
.service-card-header { position:relative !important; overflow:hidden; }

.cbm-card-slideshow { position:absolute; inset:0; z-index:0; }
.cbm-card-slide { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1s ease; }
.cbm-card-slide.active { opacity:1; }
/* Overlay escuro sobre foto para manter legibilidade */
.cbm-card-slideshow::after { content:''; position:absolute; inset:0; background:rgba(0,0,0,.38); z-index:1; pointer-events:none; }

/* Faz emoji ficar na frente do slideshow */
.category-bg, .service-icon-large { position:relative !important; z-index:2 !important; }

.cbm-magnify-btn { position:absolute; top:10px; right:10px; background:rgba(255,255,255,.18); border:2px solid rgba(255,255,255,.35); color:#fff; width:36px; height:36px; border-radius:50%; cursor:pointer; font-size:.9rem; display:flex; align-items:center; justify-content:center; transition:all .2s; z-index:10; backdrop-filter:blur(4px); }
.cbm-magnify-btn:hover { background:rgba(255,122,43,.8); border-color:rgba(255,122,43,1); transform:scale(1.15); }


/* ═══════════════════════════════════════════
   6. MODAL DO BLOG (Ler mais)
═══════════════════════════════════════════ */
#cbm-blog-modal { display:none; position:fixed; inset:0; z-index:99990; align-items:flex-start; justify-content:center; padding:2vh 16px; overflow-y:auto; }
#cbm-blog-modal.open { display:flex; }
#cbm-blog-modal-bg { position:fixed; inset:0; background:rgba(4,10,24,.85); backdrop-filter:blur(6px); }
#cbm-blog-modal-box { position:relative; background:#fff; border-radius:16px; width:100%; max-width:680px; box-shadow:0 20px 60px rgba(0,0,0,.3); overflow:hidden; z-index:1; animation:slideUp .3s ease; }
@keyframes slideUp { from{transform:translateY(30px);opacity:0} to{transform:translateY(0);opacity:1} }
#cbm-blog-modal-header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:20px 24px; background:linear-gradient(135deg,#061f44,#0a2d52); }
#cbm-blog-modal-header h2 { color:#fff; font-size:1.05rem; line-height:1.4; margin:0; }
#cbm-blog-modal-header button { background:rgba(255,255,255,.15); border:none; color:#fff; width:32px; height:32px; border-radius:50%; cursor:pointer; font-size:1rem; flex-shrink:0; display:flex; align-items:center; justify-content:center; transition:background .2s; }
#cbm-blog-modal-header button:hover { background:rgba(255,255,255,.3); }
#cbm-blog-modal-content { padding:24px; color:#334155; line-height:1.75; font-size:.9rem; }
#cbm-blog-modal-content h3 { color:#0a2d52; font-size:1rem; margin:1.5rem 0 .5rem; }
#cbm-blog-modal-content h4 { color:#1a5fa8; font-size:.92rem; margin:1.2rem 0 .4rem; }
#cbm-blog-modal-content ul { padding-left:1.2rem; margin:.5rem 0 1rem; }
#cbm-blog-modal-content li { margin-bottom:.3rem; }
#cbm-blog-modal-content p { margin-bottom:.8rem; }
#cbm-blog-modal-footer { display:flex; gap:12px; padding:16px 24px; background:#f7f9fc; border-top:1px solid #e2e8f0; flex-wrap:wrap; }


/* ═══════════════════════════════════════════
   7. GALERIA — CURSOR + HOVER
═══════════════════════════════════════════ */
.gallery-item { cursor:pointer; position:relative; transition:transform .2s, box-shadow .2s; }
.gallery-item:hover { transform:scale(1.03); box-shadow:0 8px 28px rgba(0,0,0,.25) !important; }
.gallery-item::after { content:'🔍'; position:absolute; top:8px; right:8px; background:rgba(0,0,0,.55); border-radius:50%; width:28px; height:28px; display:flex; align-items:center; justify-content:center; font-size:.85rem; opacity:0; transition:opacity .2s; pointer-events:none; z-index:5; }
.gallery-item:hover::after { opacity:1; }