@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
}

.container{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
}
main {
  flex: 1 0 auto;
  padding: 0.35em;
}
.bottom{
  border-top: 2px black solid;
  flex-shrink: 0;
}
section, nav, footer{
  max-width: 800px;
  width: 100%;
  padding-inline: 0.5rem;
}
.navegation{
  border-bottom: 2px black solid;
}
a{
  font-weight: 600;
  text-decoration: none;
}
button, .btn, .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px black solid;
  border-radius: 35px;
  padding-inline: 1em;
  padding-block: 0.5em;
  margin-block: 0.25em;
  font-weight: 600;
  font-size: 12pt;
  text-decoration: none;
  color: #000;
  background-color:gainsboro;
  &:hover{
    transform: scale(1.05);
  }
  &:disabled{
    opacity: 50%;
    &:hover{
      transform: none;
    }
  }
  & span{
    margin-inline: 0.25em;
  }
}
.w-100{
  width: 100%;
}
.rounded{
  width: 50px;
  height: 50px;
  border-radius: 25px;
}
.fixed-nav{
  max-width: none;
  border-top: 2px black solid;
  background-color: aliceblue;
  position: sticky;
  bottom: 0;
}
.fixed-nav ul{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1em;
  padding: 0.5em;
  height: 70px;
  list-style: none;
}

nav{
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: last baseline;
  padding-top: 0.25rem;
}
nav p{
  font-weight: 700;
}
nav form{
  margin:0;
}
nav a {
  @media screen and (max-width: 512px) {
    flex-basis: 100%;
  }
}
nav a h1{
  -webkit-text-stroke: 0;
  -webkit-text-fill-color: black;
}
form menu{
  margin-block: 1em;
  display: flex;
  justify-content: flex-end;
  gap: 1em;
  & *{
    width: 100%;
  }
}
.lists {
  display: flex;
  flex-direction: column;
  margin: 0.25rem;
  gap: 0.25em;
}
.lists h2 {
  border-bottom: 2px solid black;
}
/* ===== BASE REUTILIZÁVEL ===== */
.data-card {
  width: 100%;
  border: 2px solid #000;
  border-radius: 15px;
  margin-bottom: 1em;
  padding: 0.5em;
  background: #fff;
}

.data-card tbody {
  display: flex;
  flex-direction: column;
  gap: 0.4em;
  width: 100%;
}

.data-card tr {
  display: flex;
  width: 100%;
  align-items: center;
  flex-wrap: wrap;
}

.data-card td:first-child {
  flex: 0 0 45%;
  font-weight: 600;
  white-space: nowrap;
}

.data-card td:last-child {
  flex: 1;
  text-align: right;
  justify-content: flex-end;
  word-break: break-word;
}
/* Detalhar Sorteio */
.raffle-options{
  display: flex;
  gap: 0.5rem;
  & a{
    width: 100%;
  }
}
.raffle-detail {
  margin: auto;
  padding: 0.5rem;
}
.raffle-table{
  margin-top: 0.5em;
}

.header {
  border-bottom: 2px solid black;
  margin-bottom: 1rem;
}

.raffle-meta {
  color: #666;
}

.raffle-summary {
  display: flex;
  gap: 1rem;
  margin: 1rem 0;
}

.summary-box {
  flex: 1;
  padding: 1rem;
  background: #f5f5f5;
  border-radius: 25px;
  text-align: center;
}

.summary-box .label {
  display: block;
  font-size: 12pt;
  color: #666;
}

.summary-box .value {
  font-size: 28pt;
  font-weight: bold;
}

.raffle-numbers {
  margin: 1rem 0;
}

.numbers-list {
  background: #f5f5f5;
  padding: 0.5em 1em;
  border-radius: 25px;
  font-family: monospace;
}
/* ===== RAFFLE ===== */
.raffle-item tr:last-child td {
  flex: 1;
  text-align: center;
}

.raffle-actions {
  display: flex;
  gap: 0.5em;
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* ===== TICKET ===== */
.ticket-table {
  margin-bottom: 0.75em;
}
.ticket-actions {
  display: flex;
  gap: 0.5em;
  flex-wrap: wrap;
}

.numbers {
  display: flex;
  gap: 0.3em;
  flex-wrap: wrap;
}

.number-badge {
  padding: 0.2em 0.5em;
  border-radius: 8px;
  font-weight: bold;
  background: #eee;
}
.ticket-search {
  display: flex;
  width: 100%;
  gap: 1em;
  margin-block: 0.5em;
}
.sellers-grid {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.seller-card {
  width: 48.5%;
  border: 2px solid black;
  border-radius: 18px;
  padding: 0.75rem;
  transition: transform 0.15s ease;
}

.seller-card:hover {
  transform: scale(1.01);
}

.seller-name {
  margin-bottom: 10px;
  font-weight: 600;
}



.pagination{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1em;
  position: sticky;
  bottom: 70px;
  padding-block: 0.5em;
  border-top: black 2px solid;
  background-color: white;
}


fieldset {
  border: 1px solid black;
  border-radius: 25px+0.5em;
  padding: 0.5em
}
legend {
  margin-left: 0.5em;
  padding-inline: 1em;
  font-weight: 600;
}
form p, form .field{
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  flex-direction: column;
  margin-block: 0.35em;
}
form p label, .field label{
  flex-basis: 100%;
}
form p input, .field input{
  width: 100%;
  margin-block: 0.25em;
}
form button[type="submit"]{
  width: 100%;
}
label{
  display: inline-flex;
  align-items: center;
}
input[type=checkbox] {
  appearance: none;
  width: 0.65em;
  padding: 0.65em;
  margin-right: 0.5em;
  background-color: #fff;
  &:checked{
    background-color: lightgreen;
  }
}
input{
  border: 2px solid black;
  border-radius: 25px;
  padding-inline: 1em;
  padding-block: 0.5em;
}
button, .btn, .buttom, input{
  &:focus{
    outline: none;
    border: 2px solid lightseagreen;
  }
}

.input-group{
  display: flex;
  width: 100%;
}
.input-group input{
  border-radius: 25px 0 0 25px;
  border-right: none;
}
.input-group button{
  border-radius: 0 25px 25px 0;
  &:hover{
    transform:scale(1);
  }
}
.is-required, .field-errors{
  list-style: none;
  color: red;
}
.help-text{
  list-style: none;
}
nav h1{
  font-size: 1.2rem;
}
s
#numbers-wrapper{
  display: flex;
  align-items: center;
  width: 100%;
  flex-direction: column;
}
.number-field input{
  font-size: 14pt;
  width: 40%;
  border-right: none;
  border-radius: 25px 0 0 25px;
}


.number-field button{
  font-size: 14pt;
  border-radius: 0 25px 25px 0;
}

.bottom {
  margin-top: 2rem;
  padding: 1rem 0;
  border-top: 2px solid black;
  background: #fafafa;
}

.footer-content {
  max-width: 1100px;
  margin: auto;
  padding: 0 1rem;

  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: space-between;
  align-items: center;

  font-size: 0.9rem;
  color: #555;
}

.footer a {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
}

.footer a:hover {
  text-decoration: underline;
}

.footer-links {
  display: flex;
  gap: 0.5rem;
}

/* mobile */
@media (max-width: 600px) {
  .footer-content {
    flex-direction: column;
    text-align: center;
  }
}