/* Cleareaze portal — scoped so theme styles interfere less */
.cleareaze-portal {
  --cleareaze-portal-max: 32rem;
}

.cleareaze-portal .cleareaze-portal__inner {
  max-width: var(--cleareaze-portal-max);
  margin-inline: auto;
  width: 100%;
}

.cleareaze-portal .cleareaze-portal__status {
  font-size: 0.875rem;
}

.cleareaze-portal .cleareaze-portal__status.is-muted {
  color: #6c757d;
}

.cleareaze-portal .cleareaze-portal__status.is-ok {
  color: #198754;
}

.cleareaze-portal .cleareaze-portal__status.is-error {
  color: #dc3545;
}

/* Align inputs, textareas, and selects with theme preset variables (overrides Bootstrap defaults). */
.cleareaze-portal .form-control,
.cleareaze-portal .form-select {
  background-color: var(--wp--preset--color--ti-bg);
  border: 2px solid var(--wp--preset--color--ti-fg);
  border-radius: 5px;
  color: var(--wp--preset--color--ti-fg);
  font-size: var(--wp--preset--font-size--normal);
}

.cleareaze-portal .form-control:focus,
.cleareaze-portal .form-select:focus {
  background-color: var(--wp--preset--color--ti-bg);
  border-color: var(--wp--preset--color--ti-fg);
  color: var(--wp--preset--color--ti-fg);
  box-shadow: none;
  outline: 2px solid var(--wp--preset--color--ti-fg);
  outline-offset: 2px;
}

.cleareaze-portal .form-control::placeholder {
  color: var(--wp--preset--color--ti-fg);
  opacity: 0.65;
}

/* Buttons: match theme accent primary; outline secondary black 2px; semibold labels */
.cleareaze-portal .btn {
  font-weight: 600;
  font-size: var(--wp--preset--font-size--normal);
  padding-top: 0.65em;
  padding-right: 1em;
  padding-bottom: 0.65em;
  padding-left: 1em;
}

.cleareaze-portal .btn.btn-primary {
  --bs-btn-bg: var(--wp--preset--color--ti-accent);
  --bs-btn-border-color: var(--wp--preset--color--ti-accent);
  --bs-btn-color: var(--wp--preset--color--ti-bg);
  --bs-btn-hover-bg: var(--wp--preset--color--ti-accent);
  --bs-btn-hover-border-color: var(--wp--preset--color--ti-accent);
  --bs-btn-hover-color: var(--wp--preset--color--ti-bg);
  --bs-btn-active-bg: var(--wp--preset--color--ti-accent);
  --bs-btn-active-border-color: var(--wp--preset--color--ti-accent);
  --bs-btn-active-color: var(--wp--preset--color--ti-bg);
  --bs-btn-disabled-bg: var(--wp--preset--color--ti-accent);
  --bs-btn-disabled-border-color: var(--wp--preset--color--ti-accent);
  background-color: var(--wp--preset--color--ti-accent);
  border-color: var(--wp--preset--color--ti-accent);
  color: var(--wp--preset--color--ti-bg);
}

.cleareaze-portal .btn.btn-primary:hover,
.cleareaze-portal .btn.btn-primary:focus-visible {
  filter: brightness(0.94);
}

.cleareaze-portal .btn.btn-primary:focus-visible {
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--wp--preset--color--ti-accent) 35%, transparent);
}

.cleareaze-portal .btn.btn-outline-secondary {
  --bs-btn-border-width: 2px;
  --bs-btn-color: #000;
  --bs-btn-border-color: #000;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: rgba(0, 0, 0, 0.06);
  --bs-btn-hover-border-color: #000;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: rgba(0, 0, 0, 0.1);
  --bs-btn-active-border-color: #000;
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-border-color: #000;
  border-width: 2px;
  border-color: #000;
  color: #000;
  background-color: transparent;
}

.cleareaze-portal .btn.btn-outline-secondary:focus-visible {
  box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.2);
}