/* =========================================================
   AQUAG · COMPONENTES
   Peças reutilizáveis de interface: cartões, botões, campos,
   selos de status e a logomarca redonda do cabeçalho.
   ========================================================= */

.card-modern {
  background: #1e293b;
  border: 1px solid rgba(148, 163, 184, .08);
  border-radius: 1rem;
}

.btn {
  border-radius: .6rem;
  padding: .65rem 1rem;
  font-size: .85rem;
  font-weight: 700;
  transition: .15s;
}

.btn:hover {
  opacity: .9;
}

.input {
  width: 100%;
  border-radius: .65rem;
  border: 1px solid #475569;
  background: #0f172a;
  color: white;
  padding: .65rem .8rem;
  font-size: .875rem;
  outline: none;
  box-sizing: border-box;
}

.input:focus {
  border-color: #f59e0b;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, .15);
}

/*
  Sem isso, um <select> usa a aparência nativa do navegador (que tem sua
  própria altura/preenchimento internos), então mesmo com a mesma classe
  .input ele acaba mais alto que um <input> comum — foi o que deixava o
  campo "Forma de pagamento" com tamanho diferente dos campos de data ao
  lado. Com appearance:none o select passa a obedecer o mesmo padding/
  altura de qualquer outro campo; a setinha é recriada à mão.
*/
select.input {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .75rem center;
  padding-right: 2.2rem;
}

.status {
  display: inline-flex;
  align-items: center;
  padding: .22rem .55rem;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 700;
}

.mobile-logo {
  width: 46px;
  height: 46px;
  border-radius: 999px;
  object-fit: contain !important;
  object-position: center;
  display: block;
  image-rendering: auto;
  border: 2px solid rgba(245, 158, 11, .7);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
  background: rgba(15, 23, 42, .55);
}

.mobile-nav-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
}