/* variáveis de estilo para serem usadas na aplicação */
:root {
  --bg-primary-gray: #f2f3f4; /* cor de fundo cinza */
  --bg-secondary-white: #ffff; /* cor de fundo branca */
  --bg-tertiary: #D67EBF;
  --bg-quaternary: #e0e0e0;
  --bg-quinary: #232321;

  --bg-bagde-red: #ff6b6b;

  --text-color-gray: #333; /* cor do texto cinza */
  --text-color-pink: #D67EBF; /* cor do texto rosa */
  --text-color-white: #ffff; /* cor do texto branca */
  --text-color-gray-100: #ccc;
  --text-color-black: #000000;
  
  --icon-primary: #232321;
  --icon-secondary: #D67EBF;

  --primary-color: #D67EBF;
  
  --border-color-white: #ffffff;
  --border-color-pink: #D67EBF;
  --shadow: 0px 4px 12px rgba(0, 0, 0, 0.1); /* sombra dos elementos */
}

/* config abaixo para realizar um reset do css */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Inter', sans-serif;
  background-color: var(--bg-primary-gray);
  color: var(--text-color-gray);

  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body::-webkit-scrollbar {
  width: 12px; /* width of the entire scrollbar */
}

body::-webkit-scrollbar-track {
  background: rgb(255, 253, 249); /* color of the tracking area */
}

body::-webkit-scrollbar-thumb {
  background-color: rgb(186, 41, 179); /* color of the scroll thumb */
  border-radius: 8px; /* roundness of the scroll thumb */
  border: 2px solid var(--bg-tertiary); /* creates padding around scroll thumb */
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
}

input {
  font-family: inherit;
}

a {
  text-decoration: none;
  color: inherit;
}

#robbu-whatsapp-button {
    display: flex;
    position: fixed;
    background: #25d366;
    bottom: 25px;
    border-radius: 50%;
    width: 64px;
    height: 64px;
    box-shadow: 2px 2px 12px rgba(22,124,60,.2);
    transition: .4s;
    align-items: center;
    justify-content: center
}

#robbu-whatsapp-button>.rwb-tooltip {
    position: absolute;
    bottom: 100%;
    margin-bottom: 20px;
    border-radius: 4px;
    padding: 15px;
    color: #2d2d2d;
    font-size: 16px;
    white-space: nowrap;
    box-shadow: 2px 2px 12px rgba(0,0,0,.2);
    opacity: 0;
    transition: .4s;
    pointer-events: none;
    background-color: white;
}

#robbu-whatsapp-button>.rwb-tooltip:after {
    display: block;
    content: "";
    position: absolute;
    top: 85%;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 7px 0 7px;
    border-color: #fff transparent transparent transparent;
    transition: .4s
}

#robbu-whatsapp-button.left {
    left: 25px
}

#robbu-whatsapp-button.left>.rwb-tooltip {
    left: 0;
    transform: translateX(-10%)
}

#robbu-whatsapp-button.left>.rwb-tooltip:after {
    left: 23px
}

#robbu-whatsapp-button:not(.left) {
    right: 25px
}

#robbu-whatsapp-button:not(.left)>.rwb-tooltip {
    right: 0;
    transform: translateX(10%)
}

#robbu-whatsapp-button:not(.left)>.rwb-tooltip:after {
    right: 23px
}

#robbu-whatsapp-button>img {
    display: block;
    width: 34px;
    height: 34px
}

#robbu-whatsapp-button:hover {
    background: #21bd5c;
    box-shadow: 3px 3px 12px rgba(14,81,39,.4)
}

#robbu-whatsapp-button:hover>.rwb-tooltip {
    opacity: 1;
    transform: translateX(0)
}

#robbu-whatsapp-button:hover>.rwb-tooltip:after {
    top: 100%;
    transition-delay: .4s
}