/* ESTILOS DA CALCULADORA DE ARBITRAGEM — responsivo.
   Reaproveita as variáveis de styles.css (cores, fontes, tema escuro). */

.arb__container {
  grid-template-columns: 1fr;
  align-items: start;
}

/* ---- Formulário ---- */
.arb__form {
  background-color: var(--container-color);
  border-radius: 0.75rem;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
  padding: 1.5rem;
}

.arb__grupo {
  margin-bottom: 1.75rem;
}
.arb__grupo:last-of-type { margin-bottom: 0; }

.arb__grupo-titulo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--normal-font-size);
  font-weight: var(--font-semi-bold);
  color: var(--first-color);
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--first-color-lighter);
}

.arb__campos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.arb__campo {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.arb__campo--full { grid-column: 1 / -1; }

.arb__label {
  font-size: var(--smaller-font-size);
  font-weight: var(--font-medium);
  color: var(--title-color);
}
.arb__hint { color: var(--text-color-light); font-weight: 400; }

.arb__input {
  width: 100%;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--first-color-lighter);
  border-radius: 0.5rem;
  background-color: var(--body-color);
  color: var(--text-color);
  font-family: var(--body-font);
  font-size: var(--normal-font-size);
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.arb__input:focus {
  border-color: var(--first-color);
  box-shadow: 0 0 0 3px hsla(var(--hue-color), 69%, 61%, 0.15);
}

/* ---- Resultado ---- */
.arb__resultado {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background-color: var(--container-color);
  border-radius: 0.75rem;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
  padding: 1.25rem 1.5rem;
}
/* Botão do WhatsApp ocupa a largura do card (não estica na vertical) */
.arb__resultado > .arb__btn { width: 100%; flex: 0 0 auto; }

.arb__resumo {
  display: flex;
  flex-direction: column;
}

.arb__linha {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0;
  border-bottom: 1px dashed var(--container-color-alt);
  font-size: var(--small-font-size);
}
.arb__linha:last-child { border-bottom: none; }
.arb__linha span { color: var(--text-color); }
.arb__linha strong { color: var(--title-color); white-space: nowrap; }

.arb__linha--total {
  margin-top: 0.5rem;
  padding-top: 0.85rem;
  border-top: 2px solid var(--first-color-lighter);
  border-bottom: none;
  font-size: var(--h3-font-size);
}
.arb__linha--total span { font-weight: var(--font-semi-bold); color: var(--title-color); }
.arb__linha--total strong { color: var(--first-color); }

/* ---- Recibo ---- */
.arb__recibo-box {
  background-color: var(--container-color);
  border-radius: 0.75rem;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
  padding: 1.25rem 1.5rem;
}
.arb__recibo-titulo {
  font-size: var(--normal-font-size);
  font-weight: var(--font-semi-bold);
  color: var(--title-color);
  margin-bottom: 0.75rem;
}
.arb__recibo {
  width: 100%;
  min-height: 220px;
  resize: vertical;
  padding: 1rem;
  border: 1px dashed var(--first-color-lighter);
  border-radius: 0.5rem;
  background-color: var(--body-color);
  color: var(--text-color);
  font-family: "Courier New", monospace;
  font-size: 0.9rem;
  line-height: 1.6;
  white-space: pre;
  outline: none;
}

.arb__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1rem;
}
.arb__btn {
  flex: 1;
  min-width: 140px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.8rem 1rem;
  border: none;
  border-radius: 0.5rem;
  font-family: var(--body-font);
  font-size: var(--small-font-size);
  font-weight: var(--font-semi-bold);
  cursor: pointer;
  transition: filter 0.2s ease, background-color 0.2s ease;
}
.arb__btn--copiar { background-color: var(--first-color); color: #fff; }
.arb__btn--copiar:hover { background-color: var(--first-color-alt); }
.arb__btn--whatsapp { background-color: #25D366; color: #fff; }
.arb__btn--whatsapp:hover { filter: brightness(0.95); }

.arb__nota {
  font-size: var(--smaller-font-size);
  color: var(--text-color-light);
  text-align: center;
  margin-top: 1.5rem;
}

/* ---- Botão PDF (tabela oficial) ---- */
.arb__topo { text-align: center; margin-bottom: 1.75rem; }
.arb__pdf-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.25rem;
  border-radius: 0.5rem;
  background-color: #c0392b;
  color: #fff;
  font-size: var(--small-font-size);
  font-weight: var(--font-semi-bold);
  transition: filter 0.2s ease, transform 0.2s ease;
}
.arb__pdf-btn:hover { filter: brightness(0.95); transform: translateY(-2px); }

/* ---- Quadras por dia ---- */
.arb__dias { display: flex; flex-direction: column; gap: 0.6rem; }
.arb__dias-vazio { font-size: var(--small-font-size); color: var(--text-color-light); }

.arb__dia {
  display: grid;
  grid-template-columns: 4.6rem 1fr auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  background-color: var(--container-color-alt);
  border-radius: 0.5rem;
}
.arb__dia-data {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  font-weight: var(--font-semi-bold);
  color: var(--first-color);
}
.arb__dia-dow {
  font-size: var(--smaller-font-size);
  font-weight: var(--font-medium);
  color: var(--text-color-light);
}
.arb__dia-campo { display: flex; align-items: center; gap: 0.5rem; }
.arb__dia-cap { font-size: var(--smaller-font-size); color: var(--text-color-light); }
.arb__dia-quadras { width: 5rem; padding: 0.45rem 0.5rem; }
.arb__dia-aux {
  font-size: var(--small-font-size);
  font-weight: var(--font-medium);
  color: var(--title-color);
  white-space: nowrap;
}
.arb__dia-extra {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.3rem;
}
.arb__dia-ag {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--smaller-font-size);
  color: var(--text-color-light);
  white-space: nowrap;
  cursor: pointer;
}
.arb__dia-ag input {
  width: 1rem;
  height: 1rem;
  accent-color: var(--first-color);
  cursor: pointer;
}
.arb__dia--sem-aux .arb__dia-aux { opacity: 0.55; font-style: italic; }
.arb__dia--sem-aux .arb__dia-quadras { opacity: 0.5; }
.arb__alim-sel { padding: 0.45rem 0.5rem; min-width: 0; }

/* ---- Checkbox ---- */
.arb__check {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  font-size: var(--small-font-size);
  color: var(--title-color);
}
.arb__check input { width: 1.1rem; height: 1.1rem; accent-color: var(--first-color); cursor: pointer; }

/* ---- Botão Google Maps ---- */
.arb__maps-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1rem;
  border: 1px solid var(--first-color);
  border-radius: 0.5rem;
  background: transparent;
  color: var(--first-color);
  font-family: var(--body-font);
  font-size: var(--small-font-size);
  font-weight: var(--font-medium);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.arb__maps-btn:hover { background-color: var(--first-color); color: #fff; }

/* ---- Recibo fixo ---- */
.arb__recibo-fixo {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  padding: 0.85rem 1rem;
  background-color: var(--container-color-alt);
  border-radius: 0.5rem;
  font-size: var(--small-font-size);
  color: var(--text-color);
}
.arb__recibo-fixo strong { color: var(--title-color); }

/* ---- Responsividade ---- */
@media screen and (min-width: 768px) {
  .arb__container {
    grid-template-columns: 1fr 1fr;
    column-gap: 2rem;
  }
  /* Card do total acompanha o scroll enquanto o formulário é preenchido */
  .arb__resultado {
    position: sticky;
    top: 5rem;
    align-self: start;
  }
}

@media screen and (max-width: 480px) {
  .arb__campos { grid-template-columns: 1fr; }
  .arb__form, .arb__resultado { padding: 1.1rem; }
  .arb__btn { min-width: 100%; }
}