/* ── Primary button ── */
.button {
  color: white;
  background-color: var(--primary);
  border: var(--size-1) solid var(--primary);
  border-radius: var(--size-4);
  padding: var(--size-5) var(--size-7);
  font-weight: bold;
  font-size: 1rem;
  font-family: 'Lato', sans-serif;
  box-shadow: var(--shadow);
  margin: var(--size-3);
  outline: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--size-5);
  text-decoration: none;
  transition: background-color 0.15s, border-color 0.15s;
}
.button:hover  { background-color: var(--primary-dark);   border-color: var(--primary-dark); }
.button:active { background-color: var(--primary-darker); border-color: var(--primary-darker); }
.button.disabled,
.button:disabled { background-color: var(--accent); border-color: var(--accent); cursor: not-allowed; }
.button:focus {
  box-shadow: 0 0 var(--size-4) var(--primary);
  border-color: var(--primary);
  outline: none;
}

/* ── Secondary (outline) button ── */
.button.secondary {
  color: var(--primary);
  background-color: white;
}
.button.secondary:hover  { background-color: #EBEEEF; }
.button.secondary:active { background-color: #EBEEEF; border-color: var(--primary-darker); color: var(--primary-darker); }
.button.secondary.disabled,
.button.secondary:disabled { border-color: var(--accent); color: var(--accent); background-color: white; }

/* ── Transparent button ── */
.button.transparent {
  color: var(--primary);
  background-color: transparent;
  border-color: transparent;
  box-shadow: none;
}
.button.transparent:hover  { color: var(--primary-dark); }
.button.transparent:active { color: var(--primary-darker); }
.button.transparent.disabled { color: var(--accent); }

/* ── Icon-only button ── */
.button.icon-only { padding-left: 0; padding-right: 0; }

/* FA icon right margin in filled buttons */
.button:not(.transparent) .fas,
.button:not(.transparent) .fal,
.button:not(.transparent) .far { margin-right: var(--size-5); }

/* ── Text input ── */
.text-input-container { margin: var(--size-3); display: flex; }
.text-input {
  flex: 1;
  padding: var(--size-5);
  background-color: var(--primary-faded);
  border: var(--size-1) solid var(--accent-faded);
  border-radius: var(--size-4);
  resize: vertical;
  display: block;
  outline: none;
  font-family: 'Lato', sans-serif;
  font-size: 1rem;
  color: #444444;
}
.text-input:focus {
  box-shadow: 0 0 var(--size-4) var(--primary);
  border-color: var(--primary);
}
.text-input::placeholder { color: var(--accent); }

/* ── Combobox ── */
.combobox-container { position: relative; display: flex; }
.combobox { display: block; cursor: pointer; flex: 1; outline: none; }
ul.combobox-list {
  border-radius: var(--size-4);
  max-height: 50vh;
  overflow: scroll;
  overflow-x: hidden;
}
li.combobox-list-item { font-size: 1rem; font-style: normal; font-weight: normal; }

/* ── Shared focus ── */
.text-input:focus,
.button:focus,
.combobox:focus {
  box-shadow: 0 0 var(--size-4) var(--primary);
  border-color: var(--primary);
}