/* fees.css — a tabela de fees por produto do cadastro de empresa.
 *
 * Recorte das linhas 195-208 do monolito.
 *
 * A media query no fim e parte do componente: abaixo de 768px a tabela deixa
 * de ser grade de 6 colunas e vira cartao empilhado. Por isso ela mora aqui,
 * e nao num arquivo de responsividade separado.
 */

.fees-block { margin-bottom: 18px; border: 1px solid var(--border); border-radius: 10px; overflow: hidden }
.fees-block-title {
  background: var(--bg3); padding: 8px 12px;
  font-size: 12px; font-weight: 700; color: var(--text);
  text-transform: uppercase; letter-spacing: .05em;
  border-bottom: 1px solid var(--border);
}
.fees-block-body { padding: 10px 12px }

.fees-header {
  display: grid; grid-template-columns: 2fr 70px 1fr 1fr 70px 32px; gap: 8px;
  padding: 4px 0; font-size: 10px; color: var(--text3);
  text-transform: uppercase; letter-spacing: .05em; font-weight: 600;
  border-bottom: 1px solid var(--border); margin-bottom: 6px;
}
.fees-row {
  display: grid; grid-template-columns: 2fr 70px 1fr 1fr 70px 32px; gap: 8px;
  align-items: center; margin-bottom: 6px;
}
.fees-row input, .fees-row select {
  background: var(--bg); border: 1px solid var(--border); color: var(--text);
  padding: 7px 9px; border-radius: 6px; font-size: 13px;
  font-family: inherit; width: 100%; box-sizing: border-box;
}
.fees-row .fee-unico-cell { grid-column: 3/5; display: flex; align-items: center; gap: 6px }
.fees-row .fee-unico-cell input { flex: 1 }
.fees-row .fee-unico-tag { font-size: 10px; color: var(--text3); white-space: nowrap }

.fee-modo-btn {
  background: var(--bg); border: 1px solid var(--border); color: var(--text3);
  border-radius: 6px; cursor: pointer; font-size: 11px;
  font-family: inherit; padding: 7px 4px; transition: .15s;
}
.fee-modo-btn:hover { border-color: var(--petroleo); color: var(--text) }

.btn-add-fee {
  background: transparent; border: 1px dashed var(--border2);
  color: var(--petroleo-text); padding: 7px; width: 100%;
  border-radius: 7px; cursor: pointer; font-size: 12px;
  font-family: inherit; margin-top: 4px; transition: all .15s;
}
.btn-add-fee:hover { border-color: var(--petroleo); background: var(--bg3) }

/* ------------------------------------------------------------------- mobile */

@media (max-width: 768px) {
  .fees-header { display: none }
  .fees-row {
    grid-template-columns: 1fr 1fr; gap: 6px; padding: 10px;
    background: var(--bg3); border: 1px solid var(--border);
    border-radius: 8px; margin-bottom: 8px;
  }
  .fees-row select:first-child { grid-column: 1/-1 }
  .fees-row .fee-unico-cell { grid-column: 1/-1 }
}