﻿/* === Tlačítko s emoji === */


.emoji-button{
  background:#eee000;
  color:#111 !important;


  display: inline-flex;
  align-items: center;
  justify-content: center;


  gap: 12px;
  flex-wrap: wrap;         /* dovolí zalomení */
  row-gap: 10px;           /* mezera mezi řádky při zalomení */


  /* defaultně na střed */
  margin: 0 auto;
  width: fit-content;      /* ať to není přes celou šířku */
  max-width: 100%;


  padding: 24px 26px;
  border-radius: 999px;


  text-decoration: none !important;


  font-family: inherit;
  font-size: 16px !important;
  font-weight: 600;
  line-height: 1.25;       /* lepší čitelnost při wrapu */


  box-shadow: 0 2px 6px rgba(0,0,0,.08);


  /* chování textu */
  white-space: normal;     /* umožní zalomení */
  text-align: center;
}


/* Emoji/ikona */
.emoji-button__icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
}


/* Text */
.emoji-button__text{
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}


/* tučné uvnitř textu */
.emoji-button__text strong,
.emoji-button__text b{
  font-weight: 800;
}


/* hover/active */
.emoji-button:hover{
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0,0,0,.10);
}


.emoji-button:active{
  transform: translateY(0px);
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}


/* focus */
.emoji-button:focus-visible{
  outline: 3px solid rgba(17,17,17,.22);
  outline-offset: 3px;
}


/* Mobil: o trochu menší padding, ale větší row-gap (ať se řádky nelepí) */
@media (max-width: 520px){
  .emoji-button{
    padding: 22px 20px;
    gap: 10px;
    row-gap: 12px;       /* víc místa mezi řádky při zalomení */
    line-height: 1.3;
  }
}