:root {
    --color-primary: #FF5733;
    --color-secondary: #3366CC;
    --color-highlight: #3344EE;
    --color-text: #444;
    --color-background: #fff;
    --color-element-background: #f0f0f0;
    --color-muted-text: #888;
    --color-starts: #ffb900;
}

/* Reset básico */
body, h1, h2, ul, li, p { 
    margin: 0;
    padding: 0;
}

a { color: var(--color-primary); text-decoration: none; }

body, p {
    font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, "Roboto", "Helvetica", "Arial", "Ubuntu", sans-serif;
    line-height: 160%;
    color: var(--color-text);
    font-size: 17px;
}

body { background-color: var(--color-background); }

h1, h2 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", "Ubuntu", "Cantarell", "DejaVu Sans", "Helvetica", "Arial", sans-serif; font-weight: 700; }

h3 { font-weight: 600; font-size: 1.15em; }

h2 a { color: inherit; }
h3 a { color: inherit; }
h3 a:hover { color: var(--color-primary); text-decoration: underline; }

/* Cabeçalho */
header {
    background-color: var(--color-secondary);
    color: #fff;    
    justify-content: space-between;
    align-items: center;
    padding: 1.5em;
    color: #fff;
    position: relative;  /* Adicionado para conter o submenu dropdown */
    margin: 0px auto;
    text-align: center;
}

main {
    margin: 0px auto;
    margin-bottom: 2em;
    max-width: 1200px;
}

#logo a {
    color: #fff;
    text-decoration: none;
    font-size: 3em;
    line-height: 100%;
    letter-spacing: -0.75px;
    text-shadow: 0.1em 0.1em 0em rgba(0,0,0,0.5);
    font-family: "Segoe UI", "SF Pro Display", "Helvetica Neue", "Ubuntu", "Cantarell", "DejaVu Sans", "Helvetica", "Arial", sans-serif; font-weight: 700;
}

#title { padding: 3em 1em 3em 1em; text-align: center; max-width: 1200px; margin: 0px auto; }
#title h1 { font-size: 2.7em;  margin-bottom: 0.2em; color: var(--color-primary); }
#title h1 i { color: var(--color-text); }
#title div { min-width: 40%; max-width: 1000px; margin: 0px auto; }
#title p { font-size: 1.2em; }

/* style.css */
.text-muted { color: var(--color-muted-text); }

.search-result {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px; /* Espaço entre as caixas */
}

.container { display: flex;  flex-direction: column; flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 45%;
    background: #f9f9f9; border-radius: 10px; padding: 10px; justify-content: space-between; }

.container h2, .container p { margin: 0; }
.parte-superior { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 30px; }
.icone img { width: 96px; height: 96px; }
.texto-e-avaliacao { text-align: left; }
.star { color: var(--color-starts); }
.parte-inferior { text-align: left; }

.pagination { margin: 20px; padding: 20px; }
.pagination > ul { list-style-type: none; display: flex; justify-content: center; /* Centraliza a paginação */ padding: 0; }

.pagination > ul > li { margin: 0 5px; }

.pagination > ul > li > a { text-decoration: none; color: #000; display: block; padding: 5px 10px; border: 1px solid #ddd; border-radius: 5px; transition: background-color 0.3s, color 0.3s; background-color: #f9f9f9; cursor: pointer; }

.pagination > ul > li > a.current { cursor: default; background: white; color: #ddd }
.pagination > ul > li > a:hover:not(.current) { background-color: #ddd; color: #333; }

/* plugin page */
main.plugins {
    border: 1px solid silver; 
}
.banner { width:100%; max-width: 1200px; margin: 0px auto;  }
.banner img { width:100%; }

main.plugin .header { display: flex; justify-content: space-between; margin: 20px 0px 10px 0px; gap: 20px; }
main.plugin .header .detail { display: flex; gap: 10px; align-items: center; }
main.plugin .header .logo { max-width: 96px;  }
main.plugin .header .logo img { width: 96px; height: 96px;  }

main.plugin .information { display: flex; flex-direction: row-reverse; gap: 30px; }

main.plugin .content { width: auto; }
main.plugin .meta { min-width: 350px; }
main.plugin .meta ul {  }
main.plugin .meta ul li { list-style: none; display: flex; flex-direction: row; justify-content: space-between; border-bottom: 1px solid #eee; padding: 10px 0px;}
main.plugin .meta ul li:last-child { border-bottom: none; }
main.plugin .content.description { display:flex; flex-direction: column-reverse; }
 
main.plugin .content p { margin: 1rem 0; }
main.plugin .content ul { margin: 0 0 1.5em 1.5em; padding: 0; }
main.plugin .content li { text-align: -webkit-match-parent; }

main.plugin .download  {
    line-height: 1.953125rem;
    height: 1.953125rem;
    padding: 0 1rem;
    background: #0085ba;
    border: 1px solid;
    border-color: #0073aa #006799 #006799;
    box-shadow: 0 1px 0 #006799;
    color: #fff;
    text-decoration: none;
    text-shadow: 0 -1px 1px #006799, 1px 0 1px #006799, 0 1px 1px #006799, -1px 0 1px #006799;
    vertical-align: top;
    border-radius: 3px;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
    margin: 0;
    white-space: nowrap;
}

main.plugin .screenshots {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px; 
}

@media screen and (max-width: 960px) {
  main.plugin .screenshots {
    grid-template-columns: 1fr; 
  }
}
main.plugin .screenshots-title {
    margin: 20px 0px;
}
main.plugin .screenshot {
  padding: 10px;
}

main.plugin .screenshot img {
  max-width: 100%; 
  height: auto;
}


.tags { text-align: right; }

.tag { 
    background: #eee;
    border-radius: 2px;
    color: #000;
    display: inline-block;
    font-size: 13px;
    margin: 2px;
    max-width: 95%;
    overflow: hidden;
    padding: 3px 6px;
    position: relative;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: auto;
    text-align: right;
}

@media (max-width: 800px) {
    main.plugin .header { flex-direction: column; }
    main.plugin .download { float: right; }
}

@media (max-width: 960px) {
    main.plugin .information { flex-direction: column; gap: 10px; }
}
@media (max-width: 1080px) {
    #logo a { font-size: 2em; }
}

@media (max-width: 1200px) {
    main.plugin .screenshots { max-width: 100% };
    .container { flex-basis: 100%; }
    main { margin-left: 20px; margin-right: 20px; }
}