/*
 * Purpose: Button and badge components. Teal is the functional action colour;
 * lime is reserved for small accents and is never a default CTA.
 */

.rh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  min-height: var(--touch-target);
  padding: var(--space-12) var(--space-24);
  border-radius: var(--r-button);
  font-size: var(--fs-button);
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

.rh-btn:hover {
  text-decoration: none;
}

.rh-btn:disabled,
.rh-btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Primary - the single dominant action on a page. */
.rh-btn--primary {
  background-color: var(--rh-teal);
  color: var(--rh-text-inverse);
}

.rh-btn--primary:hover:not(:disabled) {
  background-color: var(--rh-teal-hover);
  color: var(--rh-text-inverse);
}

.rh-btn--primary:active:not(:disabled) {
  background-color: var(--rh-teal-active);
}

/* Secondary - a bordered action of equal importance but lower emphasis. */
.rh-btn--secondary {
  background-color: var(--rh-white);
  color: var(--rh-text-primary);
  border-color: var(--rh-border-strong);
}

.rh-btn--secondary:hover:not(:disabled) {
  border-color: var(--rh-teal);
  color: var(--rh-teal);
}

/* Dark - for use on light surfaces where teal would compete. */
.rh-btn--dark {
  background-color: var(--rh-dark);
  color: var(--rh-text-inverse);
}

.rh-btn--dark:hover:not(:disabled) {
  background-color: var(--rh-dark-hover);
  color: var(--rh-text-inverse);
}

/* Inverse - for use on dark sections. */
.rh-btn--inverse {
  background-color: var(--rh-white);
  color: var(--rh-dark);
}

.rh-btn--inverse:hover:not(:disabled) {
  background-color: var(--rh-surface);
  color: var(--rh-dark);
}

.rh-btn--ghost {
  background-color: transparent;
  color: var(--rh-text-primary);
}

.rh-btn--ghost:hover:not(:disabled) {
  background-color: var(--rh-surface);
}

.rh-section--dark .rh-btn--ghost {
  color: var(--rh-text-inverse);
  border-color: rgba(255, 255, 255, 0.32);
}

.rh-section--dark .rh-btn--ghost:hover:not(:disabled) {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--rh-text-inverse);
}

/* Sizes */
.rh-btn--sm {
  min-height: 36px;
  padding: var(--space-8) var(--space-16);
  font-size: var(--fs-small);
}

.rh-btn--lg {
  min-height: 56px;
  padding: var(--space-16) var(--space-32);
  font-size: var(--fs-body-lg);
}

.rh-btn--block {
  width: 100%;
}

.rh-btn .rh-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

/* Icon-only control. Always carries an aria-label. */
.rh-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--touch-target);
  height: var(--touch-target);
  border-radius: var(--r-button);
  color: var(--rh-text-primary);
  background-color: transparent;
  border: 1px solid transparent;
  transition: background-color var(--dur-fast) var(--ease-out);
}

.rh-icon-btn:hover {
  background-color: var(--rh-surface);
}

.rh-icon-btn--bordered {
  border-color: var(--rh-border);
  background-color: var(--rh-white);
}

/* --------------------------------------------------------------- BADGES */

.rh-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-12);
  border-radius: var(--r-pill);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  line-height: 1.4;
  white-space: nowrap;
}

.rh-badge .rh-icon {
  width: 14px;
  height: 14px;
}

.rh-badge--verified {
  background-color: var(--rh-teal-light);
  color: var(--rh-teal);
}

/*
 * The weaker of the two trust badges - the owner is identity checked, the
 * listing is not verified. It is deliberately quieter than rh-badge--verified
 * so the two are not read as the same claim at a glance.
 */
.rh-badge--owner-verified {
  background-color: var(--rh-white);
  border: 1px solid var(--rh-teal);
  color: var(--rh-teal);
}

.rh-badge--featured {
  background-color: var(--rh-lime-light);
  color: var(--rh-lime-text);
}

.rh-badge--fresh {
  background-color: rgba(25, 134, 92, 0.1);
  color: var(--rh-success);
}

.rh-badge--ageing {
  background-color: rgba(200, 135, 25, 0.12);
  color: var(--rh-warning-text);
}

.rh-badge--stale {
  background-color: var(--rh-surface-alt);
  color: var(--rh-text-secondary);
}

.rh-badge--demo {
  background-color: var(--rh-dark);
  color: var(--rh-text-inverse);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.rh-badge--neutral {
  background-color: var(--rh-surface);
  color: var(--rh-text-secondary);
}

/* Small pill used for facts such as "2 beds free". */
.rh-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-12);
  border: 1px solid var(--rh-border);
  border-radius: var(--r-pill);
  font-size: var(--fs-caption);
  color: var(--rh-text-secondary);
  background-color: var(--rh-white);
}

.rh-pill .rh-icon {
  width: 14px;
  height: 14px;
}

/* ----------------------------------------------------------- QUICK FILTERS

   Pill filter chips. Used by the place directories and by the operations
   screens, so they must be here rather than in a page stylesheet - they lived
   in pages/place.css, which never loads on /operations/, and the owner
   application status filters were rendering as bare links because of it.
   -------------------------------------------------------------------------- */

.rh-quick-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}

.rh-quick-filter {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  min-height: var(--touch-target);
  padding: var(--space-8) var(--space-16);
  border: 1px solid var(--rh-border-input);
  border-radius: var(--r-pill);
  background-color: var(--rh-white);
  color: var(--rh-text-primary);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
}

.rh-quick-filter:hover {
  border-color: var(--rh-teal);
  background-color: var(--rh-teal-light);
  color: var(--rh-teal);
  text-decoration: none;
}

/*
 * Selected, not shouting.
 *
 * Every selected state on the site used to be a solid teal pill. Six of them on
 * a page turns the brand colour into a series of blocks and leaves nothing for
 * the one action that actually matters. A tint with teal text reads just as
 * clearly as "this one is on" and lets the primary button be the loudest thing
 * on the screen again.
 *
 * --rh-teal-12 with teal text measures 5.16:1, so it passes as normal body text.
 */
.rh-quick-filter.is-active {
  border-color: var(--rh-teal-20);
  background-color: var(--rh-teal-12);
  color: var(--rh-teal);
  font-weight: var(--fw-semibold);
}

.rh-quick-filter__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding-inline: var(--space-4);
  border-radius: var(--r-pill);
  background-color: var(--rh-surface);
  color: var(--rh-text-secondary);
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
}

.rh-quick-filter:hover .rh-quick-filter__count {
  background-color: var(--rh-white);
}

.rh-quick-filter.is-active .rh-quick-filter__count {
  background-color: var(--rh-white);
  color: var(--rh-teal);
}