/* ==========================================================
   Reusable components — buttons, badges, ratings, tags, etc.
   Every landing section is built by composing these blocks.
   ========================================================== */

/* ------------------------- Button ------------------------- */
.btn {
  --btn-bg: var(--color-accent);
  --btn-fg: var(--color-text-on-accent);
  --btn-bg-hover: var(--color-accent-hover);
  --btn-border: transparent;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: 0.75em 1.35em;
  font-weight: 700;
  font-size: var(--fs-m);
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1px solid var(--btn-border);
  border-radius: var(--radius-m);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
  will-change: transform;
}
.btn:hover {
  background: var(--btn-bg-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-accent-strong);
  color: var(--btn-fg);
}
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: none; box-shadow: var(--shadow-accent-glow); }

.btn--secondary {
  --btn-bg: transparent;
  --btn-fg: var(--color-text);
  --btn-bg-hover: var(--color-surface-2);
  --btn-border: var(--color-border-strong);
}
.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--color-text-muted);
  --btn-bg-hover: var(--color-surface);
  --btn-border: transparent;
}
.btn--gold {
  --btn-bg: var(--color-gold);
  --btn-fg: #1a1400;
  --btn-bg-hover: #f0d078;
}
.btn--sm { padding: 0.55em 1em; font-size: var(--fs-s); }
.btn--lg { padding: 1em 1.75em; font-size: var(--fs-l); }
.btn--block { display: flex; width: 100%; }

.btn__icon { width: 1em; height: 1em; }

/* Alias for the plugin/API button naming */
.cs-btn,
.cs-btn--primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: 0.75em 1.35em;
  font-weight: 700;
  font-size: var(--fs-m);
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--color-text-on-accent);
  background: var(--color-accent);
  border: 1px solid transparent;
  border-radius: var(--radius-m);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.cs-btn:hover,
.cs-btn--primary:hover {
  background: var(--color-accent-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-accent-strong);
  color: var(--color-text-on-accent);
}
.cs-btn:active,
.cs-btn--primary:active { transform: translateY(0); }
.cs-btn:focus-visible,
.cs-btn--primary:focus-visible { outline: none; box-shadow: var(--shadow-accent-glow); }

/* ------------------------- Badge / Tag ------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.25em 0.65em;
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  background: var(--color-surface-2);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  line-height: 1;
}
.badge--accent { background: var(--color-accent-soft); color: var(--color-accent); border-color: transparent; }
.badge--gold { background: rgba(232, 196, 102, 0.12); color: var(--color-gold); border-color: transparent; }
.badge--danger { background: rgba(229, 72, 77, 0.12); color: var(--color-danger); border-color: transparent; }

.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.3em 0.6em;
  border-radius: var(--radius-s);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
  border: 1px solid var(--color-border);
}
.tag::before {
  content: "";
  width: 0.4em; height: 0.4em;
  border-radius: 50%;
  background: var(--color-accent);
  flex: none;
}

/* ------------------------- Rating (stars + numeric) ------------------------- */
.rating {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-size: var(--fs-s);
  color: var(--color-text-muted);
}
.rating__stars {
  --star-pct: 100%;
  position: relative;
  display: inline-block;
  font-family: Arial, sans-serif;
  font-size: 1em;
  line-height: 1;
  color: var(--color-border-strong);
  letter-spacing: 0.05em;
}
.rating__stars::before { content: "★★★★★"; }
.rating__stars::after {
  content: "★★★★★";
  position: absolute; inset: 0;
  color: var(--color-accent);
  overflow: hidden;
  width: var(--star-pct);
}
.rating__value {
  font-weight: 700;
  color: var(--color-text);
}
.rating__count { color: var(--color-text-dim); font-size: var(--fs-xs); }

/* ------------------------- Card (base) ------------------------- */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-l);
  padding: var(--space-l);
  transition: border-color var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.card--hover:hover {
  border-color: var(--color-border-strong);
  transform: translateY(-2px);
  box-shadow: var(--shadow-m);
}

/* ------------------------- Avatar ------------------------- */
.avatar {
  display: inline-block;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-surface-2);
  flex: none;
}
.avatar--sm { width: 2em; height: 2em; }
.avatar--md { width: 3em; height: 3em; }
.avatar--lg { width: 5em; height: 5em; }
.avatar--xl { width: 7em; height: 7em; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ------------------------- Payment icons ------------------------- */
.payments {
  display: inline-flex;
  gap: 0.35em;
  align-items: center;
  flex-wrap: wrap;
}
.payment-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25em 0.5em;
  min-width: 2.5em;
  height: 1.6em;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-s);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
}

/* ------------------------- Divider / decorative ------------------------- */
.hr-accent {
  height: 2px;
  width: 3em;
  background: var(--color-accent);
  border: 0;
  border-radius: var(--radius-pill);
  margin: var(--space-m) 0;
}

/* ------------------------- Social icons ------------------------- */
.social {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  list-style: none;
  padding: 0;
  margin: 0;
}
.social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25em;
  height: 2.25em;
  border-radius: 50%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.social a:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
  transform: translateY(-1px);
}
.social svg { width: 1em; height: 1em; }

/* ------------------------- Chips (filter row) ------------------------- */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  list-style: none;
  padding: 0; margin: 0;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.55em 1em;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  color: var(--color-text-muted);
  font-size: var(--fs-s);
  font-weight: 500;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.chip:hover {
  color: var(--color-text);
  border-color: var(--color-border-strong);
}
.chip.is-active {
  color: var(--color-text-on-accent);
  background: var(--color-accent);
  border-color: var(--color-accent);
}
.chip__count {
  font-size: 0.85em;
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
}

/* ------------------------- Copy field (bonus code) ------------------------- */
.copy-field {
  display: inline-flex;
  align-items: stretch;
  border: 1px dashed var(--color-accent);
  border-radius: var(--radius-m);
  background: var(--color-accent-soft);
  overflow: hidden;
  max-width: 100%;
}
.copy-field__value {
  padding: 0.75em 1em;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--fs-m);
  color: var(--color-accent);
  letter-spacing: 0.05em;
  background: transparent;
  border: 0;
  min-width: 0;
  user-select: all;
}
.copy-field__btn {
  padding: 0.75em 1em;
  background: var(--color-accent);
  color: var(--color-text-on-accent);
  border: 0;
  font-weight: 700;
  font-size: var(--fs-s);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
}
.copy-field__btn:hover { background: var(--color-accent-hover); }
.copy-field__btn::before {
  content: "";
  width: 0.9em; height: 0.9em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='13' height='13' rx='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='13' height='13' rx='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E") center / contain no-repeat;
}