@import url("tokens.css");

/* ==========================================================================
   Botões — padrão Circuit UI do site institucional SumUp
   48px · raio 12px · borda 1px · padding 0 24px · SumUp Narrow 600 17px / 22px
   Variantes:
     .btn / .btn-dark → preto (padrão do projeto)
     .btn-primary     → amarelo (destaque: ação principal, direcionamento para cadastro)
     .btn-secondary   → contorno preto (apoio ao primário)
     .btn-gray        → cinza (neutro, menor peso)
   Pares permitidos: contorno + amarelo · contorno + preto
   Tamanho: .btn-sm (40px · raio 10px)
   Aliases: .btn-yellow = primary · .btn-black = dark · .btn-outline = secondary · .btn-white = gray
   ========================================================================== */
/* :where() mantém especificidade de .btn para as variantes abaixo sobrescreverem as variáveis em <a>/<input> */
.btn, :where(button, a, input[type="submit"], input[type="button"]).btn {
  --btn-bg: var(--btn-dark-bg);
  --btn-bg-hover: var(--btn-dark-bg-hover);
  --btn-bg-pressed: var(--btn-dark-bg-pressed);
  --btn-fg: var(--btn-dark-fg);
  --btn-bd: transparent;
  box-sizing: border-box;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  height: var(--btn-h);
  min-height: var(--btn-h);
  padding: 0 var(--btn-px);
  border: var(--btn-border-w) solid var(--btn-bd) !important;
  border-radius: var(--btn-radius);
  background: var(--btn-bg) !important;
  color: var(--btn-fg) !important;
  font-family: var(--font-body);
  font-size: var(--btn-fs);
  font-weight: var(--btn-fw);
  line-height: var(--btn-lh);
  letter-spacing: 0;
  text-align: center;
  text-transform: none;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  box-shadow: none;
  animation: none;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.btn:hover:not(:disabled):not(.disabled) {
  background: var(--btn-bg-hover) !important;
  color: var(--btn-fg) !important;
  text-decoration: none;
  transform: none;
}

.btn:active:not(:disabled):not(.disabled) {
  background: var(--btn-bg-pressed) !important;
}

.btn:focus-visible {
  outline: none;
  box-shadow: var(--btn-focus-ring) !important;
}

/* Destaque — amarelo */
.btn-primary, .btn-yellow, .btn-orange {
  --btn-bg: var(--btn-yellow-bg);
  --btn-bg-hover: var(--btn-yellow-bg-hover);
  --btn-bg-pressed: var(--btn-yellow-bg-pressed);
  --btn-fg: var(--btn-yellow-fg);
  --btn-bd: transparent;
}

/* Padrão — preto */
.btn-dark, .btn-black {
  --btn-bg: var(--btn-dark-bg);
  --btn-bg-hover: var(--btn-dark-bg-hover);
  --btn-bg-pressed: var(--btn-dark-bg-pressed);
  --btn-fg: var(--btn-dark-fg);
  --btn-bd: transparent;
}

/* Secundário — contorno preto */
.btn-secondary, .btn-outline {
  --btn-bg: var(--btn-outline-bg);
  --btn-bg-hover: var(--btn-outline-bg-hover);
  --btn-bg-pressed: var(--btn-outline-bg-pressed);
  --btn-fg: var(--btn-outline-fg);
  --btn-bd: var(--btn-outline-border);
}

/* Neutro — cinza */
.btn-gray, .btn-white {
  --btn-bg: var(--btn-gray);
  --btn-bg-hover: var(--btn-gray-hover);
  --btn-bg-pressed: var(--btn-gray-pressed);
  --btn-fg: var(--btn-ink);
  --btn-bd: transparent;
}

.btn-sm {
  height: var(--btn-h-sm);
  min-height: var(--btn-h-sm);
  padding: 0 var(--btn-px-sm);
  border-radius: var(--btn-radius-sm);
  font-size: var(--btn-fs-sm);
  line-height: 20px;
}

/* Desabilitado */
.btn:disabled,
.btn.disabled {
  --btn-bg: var(--btn-disabled-bg);
  --btn-fg: var(--btn-disabled-fg);
  --btn-bd: transparent;
  opacity: 1;
  cursor: not-allowed;
  transform: none;
  box-shadow: none !important;
}

.btn-secondary:disabled,
.btn-secondary.disabled,
.btn-outline:disabled,
.btn-outline.disabled {
  --btn-bg: transparent;
  --btn-bd: var(--btn-disabled-border);
}

.form-control, select.form-control {
  width: 100%;
  min-height: 48px;
  padding: 1.2rem 1.2rem;
  border: 1px solid rgba(0, 0, 0, 0.25) !important;
  border-radius: 6px !important;
  background: var(--color-input-bg) !important;
  color: var(--color-text-dark) !important;
  font-family: var(--font-body);
  font-size: 1.5rem;
}

.form-control::placeholder {
  color: var(--sumup-ink-subtle);
  opacity: 1;
}

select.form-control:has(option.option-placeholder:checked),
select.form-control:invalid {
  color: var(--sumup-ink-subtle);
}

select.form-control option {
  color: var(--color-text-dark);
}

select.form-control option.option-placeholder {
  color: var(--sumup-ink-subtle);
}

.form-control:focus {
  border-color: var(--sumup-ink) !important;
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 3px var(--sumup-ink), 0 0 0 5px rgba(255, 97, 242, 0.4) !important;
  outline: none;
}

label.error {
  display: block;
  color: var(--color-error-soft);
  font-size: 1.2rem;
  margin-top: 0.2rem;
}

.form-check {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  column-gap: 1rem;
  row-gap: 0.2rem;
  margin-bottom: 1.2rem;
  padding-left: 0;
  text-align: left;
}

.form-check .form-check-input {
  float: none;
  margin-left: 0;
}

.form-check label, .custom-control-label {
  font-size: 1.3rem;
  line-height: 1.45;
  color: var(--color-text-muted);
}

.sumup-optin .form-check-input {
  width: 1.8rem; height: 1.8rem;
  margin-top: 0.2rem;
  accent-color: var(--color-primary);
}

.senha-regras {
  margin: var(--space-1) 0 var(--space-2);
  padding: var(--space-2);
  border-radius: var(--radius-input);
  background: rgba(30, 28, 28, 0.12);
  font-size: 1.25rem;
}

.senha-regra { display: flex; align-items: center; gap: 0.8rem; margin: 0.4rem 0; color: var(--color-text-soft); }
.senha-regra.is-ok { color: var(--color-success-soft); }

/* Receita foundation para tabelas globais */
.table,
table.table {
  --bs-table-bg: #ffffff;
  --bs-table-striped-bg: #fffdea;
  --bs-table-hover-bg: var(--sumup-pink-soft);
  --bs-table-border-color: var(--color-border);
  color: var(--color-text);
  border-radius: var(--radius-table, 1.5rem);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
}

.table-responsive,
.table-wrap,
.sumup-table-wrap,
[class*="table-wrap"] {
  border-radius: var(--radius-table, 1.5rem);
  overflow: hidden;
}

.table thead th:first-child {
  border-top-left-radius: var(--radius-table, 1.5rem);
}

.table thead th:last-child {
  border-top-right-radius: var(--radius-table, 1.5rem);
}

.table:not(:has(thead)) tbody tr:first-child td:first-child {
  border-top-left-radius: var(--radius-table, 1.5rem);
}

.table:not(:has(thead)) tbody tr:first-child td:last-child {
  border-top-right-radius: var(--radius-table, 1.5rem);
}

.table tbody tr:last-child td:first-child {
  border-bottom-left-radius: var(--radius-table, 1.5rem);
}

.table tbody tr:last-child td:last-child {
  border-bottom-right-radius: var(--radius-table, 1.5rem);
}

.table thead th {
  border-bottom-color: var(--color-border-strong);
  color: var(--color-primary-dark);
  font-family: var(--font-ui);
  font-weight: 700;
}