Widget:AddonsStyle

<style> body {

   margin: 0;
   padding: 0;
   height: 100vh; /* Garante que o body ocupe toda a altura da tela */
   display: flex;
   justify-content: center; /* Centraliza o conteúdo horizontalmente */
   align-items: center; /* Centraliza o conteúdo verticalmente */
   background-color: #f4f4f4; /* Fundo suave */

}

.input-group {

   margin-bottom: 1em;
   position: relative;
   width: 100%;
   max-width: 400px; /* Largura máxima do input */
   text-align: center;

}

1. imageSearch {

   width: 100%; /* Faz o input ocupar toda a largura disponível */
   padding: 12px 15px;
   font-size: 18px;
   border-radius: 14px;
   border: 1px solid #ccc;
   background-color: #f9f9f9;
   transition: all 0.3s ease;

}

1. imageSearch:focus {

   border-color: #007bff;
   background-color: #f2e8f8;
   outline: none;

}

1. dropdown {

   position: absolute;
   top: 100%; /* Coloca o dropdown abaixo do input */
   left: 0;
   width: 100%; /* Faz o dropdown ter a mesma largura do input */
   max-height: 300px;
   overflow-y: auto;
   background-color: white;
   border-radius: 14px;
   border: 1px solid #ccc;
   display: none; /* Inicialmente invisível */
   box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
   z-index: 10;

}

.dropdown-item {

   padding: 10px;
   cursor: pointer;
   display: flex;
   align-items: center;

}

.dropdown-item:hover {

   background-color: #f1f1f1;

}

.dropdown-item img {

   margin-right: 10px;

}

.image-container {

   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;

}

.image-item {

   margin-bottom: 1em;
   text-align: center;

}

.image-item img {

   display: block;
   margin: 0 auto;

}

.variations-container {

   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   margin-top: 1em;

}

.variation-item {

   width: 35%;
   box-sizing: border-box;
   margin: 5px;
   text-align: center;
   border: 1px solid;
   padding: 10px;

}

.variation-item img {

   display: block;
   margin: 0 auto 10px;

}

.swap-button {

   margin-top: 10px;
   cursor: pointer;
   width: 15px;
   height: 15px;
   background: url('https://wiki.pokexgames.com/images/f/fb/SwapButtonAddons.png') no-repeat center;
   background-size: contain;
   display: block;
   margin: 0 auto;

}

</style>