/* ============================================
   ATOMS — Smallest UI primitives
   Buttons, pills, tags, icon buttons, links
   ============================================ */

/* --- Buttons --- */

.btn-primary,
.btn-secondary,
.action-button,
.clear-button,
.saved-card-remove {
  border: 0;
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: opacity var(--ease-default), border-color var(--ease-default), background var(--ease-default), color var(--ease-default);
}

.btn-primary,
.action-button.like {
  background: linear-gradient(180deg, #d1aa73, #b98f59);
  color: #161616;
}

.btn-secondary,
.clear-button,
.saved-card-remove,
.action-button.skip {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}

.btn-primary,
.btn-secondary,
.clear-button {
  min-height: 42px;
  padding: 0 var(--space-md);
  font-size: 0.92rem;
}

.btn-secondary:hover,
.clear-button:hover,
.saved-card-remove:hover,
.action-button.skip:hover {
  border-color: var(--accent);
}

/* --- Pills --- */

.header-pill,
.ghost-link,
.saved-count-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.015);
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.88rem;
}

.saved-count-pill {
  color: var(--text);
}

.ghost-link:hover,
.header-pill:hover,
.saved-count-pill:hover {
  border-color: var(--border-strong);
  color: var(--text);
}

/* --- Allergen Tags --- */

.allergen-tag {
  font-size: 0.6rem;
  padding: 1px 6px;
  border-radius: 3px;
  background: rgba(196, 149, 106, 0.12);
  color: #C4956A;
  border: 1px solid rgba(196, 149, 106, 0.25);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}

.allergen-tag-warn {
  background: rgba(199, 80, 80, 0.15);
  color: #c75050;
  border-color: rgba(199, 80, 80, 0.35);
}

/* --- Icon Buttons --- */

.saved-card-link,
.swipe-card-icon-button,
.saved-card-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(255, 255, 255, 0.015);
  color: rgba(231, 228, 220, 0.68);
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--ease-default), background var(--ease-default), color var(--ease-default);
}

.saved-card-link:hover,
.swipe-card-icon-button:hover,
.saved-card-remove:hover {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.028);
}

.swipe-card-icon-button {
  appearance: none;
}

.saved-card-link svg,
.swipe-card-icon-button svg,
.saved-card-remove svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-only {
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: var(--radius-md);
}

/* --- Eyebrow / Kicker text --- */

.swipe-card-eyebrow,
.saved-restaurant-card-kicker {
  margin: 0 0 var(--space-sm);
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* --- Price Badge --- */

.swipe-card-price,
.saved-restaurant-card-price {
  align-self: flex-start;
  padding: var(--space-sm) 11px;
  border-radius: var(--radius-full);
  background: rgba(217, 122, 73, 0.08);
  color: var(--accent);
  font-weight: 700;
  font-size: 0.8rem;
}

/* --- Reserve / Menu Links --- */

.detail-reserve-btn {
  display: block;
  padding: 10px 0;
  margin-bottom: var(--space-sm);
  color: var(--accent);
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  border: 1px solid var(--accent);
  border-radius: var(--radius-md);
}
.detail-reserve-btn:hover {
  background: rgba(200, 140, 60, 0.08);
}

.detail-menu-link {
  display: block;
  padding: var(--space-md) 0 var(--space-xs);
  color: var(--accent);
  font-size: 0.82rem;
  text-decoration: none;
  text-align: center;
}
.detail-menu-link:hover {
  text-decoration: underline;
}