/**
 * Components
 *
 * Shared UI components for extension pages.
 *
 * Loaded after base.css. Never injected into LinkedIn: the picker uses the
 * .linkgif- classes in content.css. A component moves here once a second page
 * uses it.
 *
 *   .logo            The wordmark. Pair with one size: --xs, --sm, --base, --lg, --xl.
 *   .card            A content block. Title with .section-title, explain with .subtitle.
 *   .step            One pane of a multi-step flow. Starts .hidden, one shown at a time.
 *   .input           Any text field.
 *   .btn             Any button. Pair with exactly one variant:
 *     --primary        The main action. One per view.
 *     --secondary      A lower-emphasis action next to the primary.
 *     --accent         A paid-plan action.
 *     --ghost          Cancel, back, log out.
 *     --danger         Confirms a destruction. Only inside its confirmation.
 *                    Loading state: .btn__text and .btn__loading[hidden] children.
 *   .link-btn        A button that reads as a text link.
 *   .plan-badge      The user's plan. Pair with --free, --trial, --pro or --lifetime.
 *   .error-message   An inline error. Starts .hidden, carries role="alert".
 */

/* ================================================
   Logo
================================================ */

.logo {
  height: auto;
  margin-inline: auto;
}

.logo--xs {
  width: 40px;
}

.logo--sm {
  width: 80px;
}

.logo--base {
  width: 120px;
}

.logo--lg {
  width: 160px;
}

.logo--xl {
  width: 200px;
}

/* ================================================
   Card
================================================ */

.card {
  display: flex;
  flex-direction: column;
  gap: var(--linkgif-space-4);

  padding: var(--linkgif-card-padding);

  border: var(--linkgif-card-border);
  border-radius: var(--linkgif-card-radius);
  background: var(--linkgif-card-background);
}

.section-title {
  color: var(--linkgif-text-primary);

  font-size: var(--linkgif-font-size-xl);
  font-weight: var(--linkgif-font-weight-semibold);
}

.subtitle {
  color: var(--linkgif-text-muted);

  font-size: var(--linkgif-font-size-sm);
  line-height: var(--linkgif-line-height-base);
}

/* ================================================
   Step
================================================ */

.step {
  display: flex;
  flex-direction: column;
  gap: var(--linkgif-space-4);

  animation: step-fade-in var(--linkgif-duration-slow) var(--linkgif-ease-out);
}

@keyframes step-fade-in {
  from {
    opacity: 0;
    transform: translateY(var(--linkgif-space-2));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ================================================
   Text field
================================================ */

.input {
  width: 100%;
  height: var(--linkgif-input-height);
  padding: 0 var(--linkgif-input-padding-inline);

  border: var(--linkgif-border);
  border-radius: var(--linkgif-input-radius);
  background: var(--linkgif-input-background);
  color: var(--linkgif-text-primary);

  font-size: var(--linkgif-font-size-sm);

  transition: border-color var(--linkgif-transition-fast);
}

.input::placeholder {
  color: var(--linkgif-text-faint);
}

.input:hover {
  border-color: var(--linkgif-border-color-hover);
}

.input:focus-visible {
  border-color: var(--linkgif-accent);
  outline: none;
}

/* ================================================
   Button
================================================ */

.btn {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--linkgif-space-2);

  width: 100%;
  padding: var(--linkgif-button-padding);

  border: var(--linkgif-border-width-base) var(--linkgif-border-style) transparent;
  border-radius: var(--linkgif-button-radius);

  font-weight: var(--linkgif-button-font-weight);

  cursor: pointer;
  transition:
    background var(--linkgif-transition-fast),
    border-color var(--linkgif-transition-fast),
    color var(--linkgif-transition-fast);
}

.btn__loading svg {
  display: block;

  width: var(--linkgif-icon-base);
  height: var(--linkgif-icon-base);

  animation: spinner-rotate var(--linkgif-duration-slow) linear infinite;
}

@keyframes spinner-rotate {
  to {
    transform: rotate(360deg);
  }
}

.btn--primary {
  background: var(--linkgif-accent-strong);
  color: var(--linkgif-text-on-accent);
}

.btn--primary:hover:not(:disabled) {
  background: var(--linkgif-accent-strong-hover);
}

.btn--secondary {
  border-color: var(--linkgif-border-color-accent);
  background: var(--linkgif-background-accent);
  color: var(--linkgif-accent);
}

.btn--secondary:hover:not(:disabled) {
  border-color: var(--linkgif-accent);
  background: var(--linkgif-background-accent-hover);
}

.btn--accent {
  background: var(--linkgif-pro);
  color: var(--linkgif-text-on-accent);
}

.btn--accent:hover:not(:disabled) {
  background: var(--linkgif-pro-hover);
}

.btn--ghost {
  border-color: var(--linkgif-border-color);
  background: var(--linkgif-background-elevated);
  color: var(--linkgif-text-muted);
}

.btn--ghost:hover:not(:disabled) {
  border-color: var(--linkgif-border-color-hover);
  color: var(--linkgif-text-primary);
}

.btn--danger {
  background: var(--linkgif-error-strong);
  color: var(--linkgif-text-on-accent);
}

.btn--danger:hover:not(:disabled) {
  background: var(--linkgif-error-strong-hover);
}

.btn:focus-visible {
  outline: var(--linkgif-focus-ring);
  outline-offset: var(--linkgif-focus-ring-offset);
}

.btn:disabled {
  border-color: transparent;
  background: var(--linkgif-background-disabled);
  color: var(--linkgif-text-muted);

  cursor: not-allowed;
}

/* ================================================
   Link button
================================================ */

.link-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--linkgif-space-2);

  padding: 0;

  border: none;
  background: none;
  color: var(--linkgif-accent);

  text-decoration: underline;
  text-underline-offset: var(--linkgif-underline-offset);

  cursor: pointer;
  transition: color var(--linkgif-transition-fast);
}

.link-btn svg {
  flex-shrink: 0;

  width: var(--linkgif-icon-base);
  height: var(--linkgif-icon-base);
}

.link-btn:hover:not(:disabled) {
  color: var(--linkgif-accent-hover);
}

.link-btn:focus-visible {
  border-radius: var(--linkgif-radius-sm);
  outline: var(--linkgif-focus-ring);
  outline-offset: var(--linkgif-focus-ring-offset);
}

.link-btn:disabled {
  color: var(--linkgif-text-faint);

  text-decoration: none;

  cursor: not-allowed;
}

/* ================================================
   Plan badge
================================================ */

.plan-badge {
  display: inline-block;

  padding: var(--linkgif-space-1) var(--linkgif-space-3);

  border-radius: var(--linkgif-radius-full);

  font-size: var(--linkgif-font-size-xs);
  font-weight: var(--linkgif-font-weight-semibold);
  letter-spacing: var(--linkgif-letter-spacing-wide);
  text-transform: uppercase;
}

.plan-badge--free {
  background: var(--linkgif-background-disabled);
  color: var(--linkgif-text-muted);
}

.plan-badge--trial {
  background: none;
  box-shadow: inset 0 0 0 var(--linkgif-border-width-base) var(--linkgif-accent);
  color: var(--linkgif-accent);
}

.plan-badge--pro {
  background: var(--linkgif-accent);
  color: var(--linkgif-text-on-accent);
}

.plan-badge--lifetime {
  background: var(--linkgif-pro);
  color: var(--linkgif-text-on-accent);
}

/* ================================================
   Error message
================================================ */

.error-message {
  padding: var(--linkgif-space-3) var(--linkgif-space-4);

  border: var(--linkgif-border-width-base) var(--linkgif-border-style) var(--linkgif-error);
  border-radius: var(--linkgif-radius-base);
  background: var(--linkgif-background-elevated);
  color: var(--linkgif-error);

  text-align: center;
}