/* ============================================================================
   Balloon Button — Central de Elementos Visuais · Tudodoes
   ----------------------------------------------------------------------------
   Botão estilo "balão" (par de triângulos: outer = borda, inner = fundo) com
   profundidade 3D (border-bottom mais grossa que recolhe no :active).

   Como usar:
     <link rel="stylesheet" href="<?= BASE_PATH ?>/assets/buttons/balloon.css">
     <button class="balloon-btn balloon-btn--arrow-bottom"
             style="--bb-bg:#7A3BED; --bb-border:#6020D6; --bb-arrow-pos:18%;">
       Iniciar
     </button>

   Ou via helper PHP:
     balloon_button('Iniciar', ['arrow_side'=>'bottom','arrow_pos'=>'25%']);

   Variáveis CSS editáveis pela página (5 únicas):
     --bb-bg        cor de fundo                 (ex: #7A3BED)
     --bb-border    cor do contorno              (auto-derivada se omitida)
     --bb-text      cor do texto                 (default: #fff)
     --bb-arrow-pos posição da setinha na borda  (ex: 18%, 50%, 90%, 20px)

   Classes modificadoras:
     .balloon-btn--arrow-top
     .balloon-btn--arrow-right
     .balloon-btn--arrow-bottom
     .balloon-btn--arrow-left
     .balloon-btn--pixel          fonte pixelada (Silkscreen / Press Start 2P)
     .balloon-btn--sm             tamanho pequeno
     .balloon-btn--lg             tamanho grande
     .balloon-btn--tag            variante tag (laterais pill, escala menor)
     .balloon-btn--gradient       fundo com gradiente (top claro, bottom escuro)
     .balloon-btn--chanfro-light  chanfro claro na diagonal inferior-direita
     .balloon-btn--chanfro-dark   chanfro escuro na diagonal inferior-direita
                                  (ambos invertem para diagonal superior-esquerda
                                   ao clicar — efeito de tecla pressionada)

   Presets de cor (paleta oficial do layout — escolha UM):
     .balloon-btn--white          branco com contorno cinza, texto escuro
     .balloon-btn--purple         roxo com letra branca (default)
     .balloon-btn--blue           azul com letra branca
     .balloon-btn--gold           amarelo/ouro com letra branca
     .balloon-btn--dark           cinza escuro com borda preta, letra branca

   Sem nenhuma .balloon-btn--arrow-* → botão sem setinha (só o balão).
   ============================================================================ */

.balloon-btn {
  /* ─── API pública (sobrescreva via inline style ou classe da página) ─── */
  --bb-bg: #7A3BED;
  --bb-border: color-mix(in oklab, var(--bb-bg), black 18%);
  --bb-text: #fff;
  --bb-arrow-pos: 50%;

  /* ─── Internos (ajustados por --sm/--lg) ─── */
  --bb-radius: 6px;
  --bb-pad-y: 8px;
  --bb-pad-x: 18px;
  --bb-font-size: 14px;
  --bb-border-w: 3px;
  --bb-border-bottom-w: 6px;
  --bb-border-bottom-w-active: 3px;
  --bb-press: 3px;

  --bb-arrow-out:   14px;  /* extensão (altura) do triângulo externo */
  --bb-arrow-in:    12px;  /* extensão do triângulo interno */
  --bb-arrow-half:  10px;  /* meia base do externo (20px total)   */
  --bb-arrow-half-i: 7px;  /* meia base do interno (14px total)   */
  --bb-arrow-gap:    5px;  /* recuo do interno em relação ao externo */

  /* Gradiente — top mais claro, bottom mais escuro (mas nunca passa do contorno) */
  --bb-gradient-top:    color-mix(in oklab, var(--bb-bg), white 22%);
  --bb-gradient-bottom: color-mix(in oklab, var(--bb-bg), var(--bb-border) 35%);

  /* Chanfro — espessura fixa do text-shadow */
  --bb-chanfro-w: 2px;

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: var(--bb-pad-y) var(--bb-pad-x);
  border-radius: var(--bb-radius);
  border: var(--bb-border-w) solid var(--bb-border);
  border-bottom-width: var(--bb-border-bottom-w);
  cursor: pointer;
  background: var(--bb-bg);
  color: var(--bb-text);
  font: 700 var(--bb-font-size)/1 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
  transition: transform .08s ease, filter .12s ease,
              border-bottom-width .08s ease, margin-bottom .08s ease;
  -webkit-tap-highlight-color: transparent;
}

.balloon-btn:hover  { filter: brightness(1.06); }
.balloon-btn:active {
  transform: translateY(var(--bb-press));
  border-bottom-width: var(--bb-border-bottom-w-active);
  /* Compensa o espaço perdido pelo border-bottom: layout box mantém a altura
     total — o que está abaixo do botão NÃO se move durante o click. */
  margin-bottom: var(--bb-press);
}
.balloon-btn:focus-visible {
  outline: 2px solid var(--bb-border);
  outline-offset: 3px;
}
.balloon-btn:disabled,
.balloon-btn[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: .55;
  filter: grayscale(.3);
}

/* Ícones (PNG / SVG / qualquer <img>) dentro do botão — escalam com o font-size */
.balloon-btn > img,
.balloon-btn > svg {
  height: 1.2em;
  width: auto;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
  pointer-events: none;
}

/* ─── Fonte pixelada (Silkscreen / Press Start 2P) ───────────────────────── */
/* Default: weight 400 (regular). Pixel art com weight 700 fica visualmente
   pesado demais, especialmente em texto curto. Adicione --pixel-bold pra
   forçar weight 700 quando quiser destaque extra. */
.balloon-btn--pixel {
  font-family: 'Silkscreen', 'Press Start 2P', 'Courier New', monospace;
  font-weight: 400;
  letter-spacing: .02em;
}

.balloon-btn--pixel.balloon-btn--pixel-bold,
.balloon-btn--pixel-bold {
  font-weight: 700;
}

/* ============================================================================
   Presets de cor — paleta oficial do layout
   ----------------------------------------------------------------------------
   Escolha UM. Pode ser sobrescrito por --bb-bg/--bb-border/--bb-text inline.
   ============================================================================ */

.balloon-btn--white {
  --bb-bg:     #FFFFFF;
  --bb-border: #DAD6E8;
  --bb-text:   #1A1730;
}

.balloon-btn--purple {
  --bb-bg:     #7A3BED;
  --bb-border: #6020D6;
  --bb-text:   #FFFFFF;
}

.balloon-btn--blue {
  --bb-bg:     #4DA8FF;
  --bb-border: #1D4ED8;
  --bb-text:   #FFFFFF;
}

.balloon-btn--gold {
  --bb-bg:     #F5B400;
  --bb-border: #B97800;
  --bb-text:   #FFFFFF;
}

.balloon-btn--dark {
  --bb-bg:     #2A2A2E;
  --bb-border: #000000;
  --bb-text:   #FFFFFF;
}

/* ============================================================================
   Modificador --gradient — interior recebe degradê vertical
   ----------------------------------------------------------------------------
   Top: --bb-bg + 22% white  (mais claro / brilhante)
   Mid: --bb-bg               (cor base no meio)
   Bot: --bb-bg + 35% border  (mais escuro, sempre menor que o contorno)
   Os triângulos internos da setinha em top/bottom acompanham a ponta do
   gradiente para parecer um todo só.
   ============================================================================ */

.balloon-btn--gradient {
  background:
    linear-gradient(to bottom,
      var(--bb-gradient-top)    0%,
      var(--bb-bg)             55%,
      var(--bb-gradient-bottom) 100%);
}

.balloon-btn--gradient.balloon-btn--arrow-bottom::before {
  border-top-color: var(--bb-gradient-bottom);
}
.balloon-btn--gradient.balloon-btn--arrow-top::before {
  border-bottom-color: var(--bb-gradient-top);
}
/* Setinha lateral (left/right) bate na cor do meio = --bb-bg, sem override. */

/* ============================================================================
   Modificador --chanfro — bevel direcional NA LETRA (text-shadow)
   ----------------------------------------------------------------------------
   Default: sombra na diagonal inferior-direita da fonte (letra parece "saltar").
   :active: sombra inverte para superior-esquerda (letra parece "afundar").
   Espessura fixa: 2px (não escala com o tamanho — mantém o chanfro consistente).
   ============================================================================ */

.balloon-btn--chanfro-light { --bb-chanfro-color: rgba(255, 255, 255, 0.70); }
.balloon-btn--chanfro-dark  { --bb-chanfro-color: rgba(0,   0,   0,   0.55); }

.balloon-btn--chanfro-light,
.balloon-btn--chanfro-dark {
  text-shadow:
    var(--bb-chanfro-w)
    var(--bb-chanfro-w)
    0
    var(--bb-chanfro-color);
}

.balloon-btn--chanfro-light:active,
.balloon-btn--chanfro-dark:active {
  text-shadow:
    calc(var(--bb-chanfro-w) * -1)
    calc(var(--bb-chanfro-w) * -1)
    0
    var(--bb-chanfro-color);
}

/* ─── Tamanhos ───────────────────────────────────────────────────────────── */
.balloon-btn--sm {
  --bb-pad-y: 6px;
  --bb-pad-x: 12px;
  --bb-font-size: 12.5px;
  --bb-border-w: 2px;
  --bb-border-bottom-w: 4px;
  --bb-border-bottom-w-active: 2px;
  --bb-press: 2px;

  --bb-arrow-out:   10px;
  --bb-arrow-in:     8px;
  --bb-arrow-half:   6px;
  --bb-arrow-half-i: 5px;
  --bb-arrow-gap:    4px;

}

.balloon-btn--lg {
  --bb-pad-y: 12px;
  --bb-pad-x: 22px;
  --bb-font-size: 16px;
  --bb-border-w: 4px;
  --bb-border-bottom-w: 8px;
  --bb-border-bottom-w-active: 4px;
  --bb-press: 4px;

  --bb-arrow-out:   19px;
  --bb-arrow-in:    17px;
  --bb-arrow-half:  12px;
  --bb-arrow-half-i:10px;
  --bb-arrow-gap:    6px;
}

/* ============================================================================
   Variante TAG — mesma estrutura do botão, laterais 100% arredondadas (pill)
   ----------------------------------------------------------------------------
   Tag é menor que botão em todos os tamanhos (sm bem mininha, lg discreto).
   ============================================================================ */

.balloon-btn--tag {
  --bb-radius: 999px;
  /* tamanho default da tag (md) — mais enxuto que o botão md */
  --bb-pad-y: 5px;
  --bb-pad-x: 14px;
  --bb-font-size: 12px;
  --bb-border-w: 2px;
  --bb-border-bottom-w: 4px;
  --bb-border-bottom-w-active: 2px;
  --bb-press: 2px;

  --bb-arrow-out:   10px;
  --bb-arrow-in:     9px;
  --bb-arrow-half:   7px;
  --bb-arrow-half-i: 5px;
  --bb-arrow-gap:    3px;
}

.balloon-btn--tag.balloon-btn--sm {
  --bb-pad-y: 3px;
  --bb-pad-x: 10px;
  --bb-font-size: 10px;
  --bb-border-w: 1.5px;
  --bb-border-bottom-w: 3px;
  --bb-border-bottom-w-active: 1.5px;
  --bb-press: 1.5px;

  --bb-arrow-out:   8px;
  --bb-arrow-in:    7px;
  --bb-arrow-half:  5px;
  --bb-arrow-half-i:4px;
  --bb-arrow-gap:   3px;

}

.balloon-btn--tag.balloon-btn--lg {
  --bb-pad-y: 7px;
  --bb-pad-x: 18px;
  --bb-font-size: 13.5px;
  --bb-border-w: 2.5px;
  --bb-border-bottom-w: 5px;
  --bb-border-bottom-w-active: 2.5px;
  --bb-press: 2.5px;

  --bb-arrow-out:   13px;
  --bb-arrow-in:    11px;
  --bb-arrow-half:   9px;
  --bb-arrow-half-i: 7px;
  --bb-arrow-gap:    4px;
}

/* ============================================================================
   Setinha — par de triângulos (outer = borda, inner = fundo)
   ============================================================================ */

.balloon-btn[class*="balloon-btn--arrow-"]::before,
.balloon-btn[class*="balloon-btn--arrow-"]::after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* ── Embaixo (default no cronometro) ─────────────────────────────────────── */
.balloon-btn--arrow-bottom::after {
  bottom: calc(var(--bb-arrow-out) * -1);
  left: var(--bb-arrow-pos);
  transform: translateX(-50%);
  border-left:  var(--bb-arrow-half) solid transparent;
  border-right: var(--bb-arrow-half) solid transparent;
  border-top:   var(--bb-arrow-out)  solid var(--bb-border);
}
.balloon-btn--arrow-bottom::before {
  bottom: calc(var(--bb-arrow-out) * -1 + var(--bb-arrow-gap));
  left: var(--bb-arrow-pos);
  transform: translateX(-50%);
  border-left:  var(--bb-arrow-half-i) solid transparent;
  border-right: var(--bb-arrow-half-i) solid transparent;
  border-top:   var(--bb-arrow-in)     solid var(--bb-bg);
  z-index: 1;
}

/* ── Em cima ─────────────────────────────────────────────────────────────── */
.balloon-btn--arrow-top::after {
  top: calc(var(--bb-arrow-out) * -1);
  left: var(--bb-arrow-pos);
  transform: translateX(-50%);
  border-left:   var(--bb-arrow-half) solid transparent;
  border-right:  var(--bb-arrow-half) solid transparent;
  border-bottom: var(--bb-arrow-out)  solid var(--bb-border);
}
.balloon-btn--arrow-top::before {
  top: calc(var(--bb-arrow-out) * -1 + var(--bb-arrow-gap));
  left: var(--bb-arrow-pos);
  transform: translateX(-50%);
  border-left:   var(--bb-arrow-half-i) solid transparent;
  border-right:  var(--bb-arrow-half-i) solid transparent;
  border-bottom: var(--bb-arrow-in)     solid var(--bb-bg);
  z-index: 1;
}

/* ── Esquerda ────────────────────────────────────────────────────────────── */
.balloon-btn--arrow-left::after {
  left: calc(var(--bb-arrow-out) * -1);
  top: var(--bb-arrow-pos);
  transform: translateY(-50%);
  border-top:    var(--bb-arrow-half) solid transparent;
  border-bottom: var(--bb-arrow-half) solid transparent;
  border-right:  var(--bb-arrow-out)  solid var(--bb-border);
}
.balloon-btn--arrow-left::before {
  left: calc(var(--bb-arrow-out) * -1 + var(--bb-arrow-gap));
  top: var(--bb-arrow-pos);
  transform: translateY(-50%);
  border-top:    var(--bb-arrow-half-i) solid transparent;
  border-bottom: var(--bb-arrow-half-i) solid transparent;
  border-right:  var(--bb-arrow-in)     solid var(--bb-bg);
  z-index: 1;
}

/* ── Direita ─────────────────────────────────────────────────────────────── */
.balloon-btn--arrow-right::after {
  right: calc(var(--bb-arrow-out) * -1);
  top: var(--bb-arrow-pos);
  transform: translateY(-50%);
  border-top:    var(--bb-arrow-half) solid transparent;
  border-bottom: var(--bb-arrow-half) solid transparent;
  border-left:   var(--bb-arrow-out)  solid var(--bb-border);
}
.balloon-btn--arrow-right::before {
  right: calc(var(--bb-arrow-out) * -1 + var(--bb-arrow-gap));
  top: var(--bb-arrow-pos);
  transform: translateY(-50%);
  border-top:    var(--bb-arrow-half-i) solid transparent;
  border-bottom: var(--bb-arrow-half-i) solid transparent;
  border-left:   var(--bb-arrow-in)     solid var(--bb-bg);
  z-index: 1;
}