/* ==========================================================================
   The Scents - shared interface pieces
   Components used by more than one surface. They started in dexie-account.css
   and moved here when the category listing needed them too - a second copy is
   the one that gets missed.
   Loaded on every page.
   ========================================================================== */

/* ---------- the primary button ------------------------------------------ */
.dx-authbtn {
  display: block; width: 100%; text-align: center;
  background: var(--ink); border: 1px solid var(--ink); color: var(--accent-ink);
  border-radius: var(--radius);
  font-size: 12px; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; padding: 15px 20px;
  cursor: pointer; text-decoration: none;
  transition: background .16s, color .16s;
}
.dx-authbtn:hover { background: transparent; color: var(--ink); }
.dx-authbtn--ghost { background: transparent; color: var(--ink); border-color: var(--rule-2); }
.dx-authbtn--ghost:hover { background: var(--ink); border-color: var(--ink); color: var(--accent-ink); }

/* ---------- listing furniture ------------------------------------------- */
/* --- pagination strip, shared by the list and the history --- */
.dx-pager {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 10px;
  margin-bottom: 56px;
}
.dx-pager__count { font-size: 12px; color: var(--ink-3); }
.dx-pager .pagination { margin: 0; }

/* --- empty state --- */
.dx-empty {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 56px 24px;
  text-align: center;
  margin-bottom: 56px;
}
/* Font Awesome gives the icon its own width, so display:block alone leaves it
   sitting at the left edge of a centred panel. auto margins centre it. */
.dx-empty i { font-size: 26px; color: var(--rule-2); display: block; width: auto; margin: 0 auto 14px; }
.dx-empty p { font-size: 14px; color: var(--ink-2); margin: 0 0 20px; }

/* (b) .dx-authbtn is a full-width block, which is right in a form and wrong
   as the single call to action in a centred empty state. */
.dx-empty .dx-authbtn {
  display: inline-block;
  width: auto;
  padding: 13px 32px;
}