/*
 * components.css — shared UI primitives used on 2+ pages.
 *   - .dash-card + dash-card-*    (account dashboard, admin, any card surface)
 *   - .badge + badge-*            (status pills)
 *   - .alert + alert-*            (banner messages)
 *   - .purchase-btns / .purchase-btn / purchase-btn-* (CTA buttons used on
 *     the account card and product pages)
 *
 * Page-specific rules stay inline in each page's <style> block so conditional
 * / PHP-generated CSS can reference page-scoped state. This file is loaded
 * AFTER tokens.css and BEFORE the page's inline styles.
 */

/* ─── Dash Card surfaces ─── */
.dash-card {
  background: rgba(0, 255, 255, 0.03);
  border: 1px solid rgba(0, 255, 255, 0.12);
  border-radius: 4px;
  padding: 20px;
  margin-bottom: 12px;
  position: relative;
}

.dash-card-label {
  font-size: 0.62rem;
  color: rgba(0, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 4px;
}

.dash-card-value {
  font-size: 0.9rem;
  color: var(--white);
  font-weight: 500;
}

.dash-card-value-sm {
  font-size: 0.78rem;
  color: var(--steel);
}

/* ─── Status Badges ─── */
.badge {
  display: inline-block;
  font-size: 0.6rem;
  padding: 3px 10px;
  border-radius: 2px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
}

.badge-active   { background: rgba( 52, 211, 153, 0.15); color: var(--green);  border: 1px solid rgba( 52, 211, 153, 0.3); }
.badge-expired  { background: rgba(255,  68,  68, 0.1);  color: var(--red);    border: 1px solid rgba(255,  68,  68, 0.2); }
.badge-canceled { background: rgba(240, 225,  48, 0.1);  color: var(--yellow); border: 1px solid rgba(240, 225,  48, 0.2); }
.badge-trial    { background: rgba(  0, 255, 255, 0.1);  color: var(--cyan);   border: 1px solid rgba(  0, 255, 255, 0.2); }
.badge-free     { background: rgba( 52, 211, 153, 0.15); color: var(--green);  border: 1px solid rgba( 52, 211, 153, 0.3); min-width: 46px; text-align: center; }

/* ─── Alert banners ─── */
.alert {
  padding: 12px 16px;
  border-radius: 4px;
  font-size: 0.75rem;
  margin-bottom: 20px;
}

.alert-success {
  background: rgba(52, 211, 153, 0.1);
  border: 1px solid rgba(52, 211, 153, 0.3);
  color: var(--green);
}

.alert-info {
  background: rgba(0, 255, 255, 0.05);
  border: 1px solid rgba(0, 255, 255, 0.15);
  color: var(--cyan);
}

/* ─── Purchase / CTA Buttons ─── */
.purchase-btns {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.purchase-btn {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.58rem;
  padding: 5px 10px;
  border: 1px solid rgba(0, 255, 255, 0.25);
  border-radius: 2px;
  /* Subtle cyan tint so the button reads as "filled" like the
     FREEMIUM/LICENSED badges, not as an outlined ghost. Hover darkens
     further. */
  background: rgba(0, 255, 255, 0.08);
  color: var(--cyan);
  cursor: pointer;
  text-decoration: none;
  letter-spacing: 0.04em;
  transition: background 0.2s, box-shadow 0.2s;
  min-width: 72px;
  text-align: center;
  box-sizing: border-box;
}

.purchase-btn:hover {
  background: rgba(0, 255, 255, 0.18);
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.15);
}

.purchase-btn-free {
  border-color: rgba(52, 211, 153, 0.3);
  background: rgba(52, 211, 153, 0.08);
  color: var(--green);
  cursor: default;
}

.purchase-btn-free:hover {
  background: rgba(52, 211, 153, 0.08);
  box-shadow: none;
}

/* Danger variant (used by the DELETE button on the account card). */
.purchase-btn-danger {
  border-color: rgba(255, 68, 68, 0.3);
  background: rgba(255, 68, 68, 0.05);
  color: rgba(255, 68, 68, 0.75);
}

.purchase-btn-danger:hover {
  background: rgba(255, 68, 68, 0.14);
  box-shadow: 0 0 10px rgba(255, 68, 68, 0.18);
  color: var(--red);
  border-color: var(--red);
}