/**
 * FAL Badge System (Shared across app and website)
 * Namespaced with fal- prefix to avoid collisions
 * All CSS variables have fallbacks for website compatibility
 */

/* ========================================
   BASE BADGE CLASS
   ======================================== */

.fal-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  font-family: var(--font-family-base, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 6px 12px;
}

/* ========================================
   BADGE VARIANTS
   ======================================== */

.fal-badge--founding {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  color: #000;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(251, 191, 36, 0.3);
}

.fal-badge--founding::before {
  content: "⭐";
  font-size: 0.875rem;
}

.fal-badge--beta {
  background: rgba(59, 130, 246, 0.1);
  color: #2563eb;
  font-weight: 700;
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.fal-badge--live {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.3);
  padding: 4px 10px;
}

.fal-badge--coming-soon {
  background: rgba(148, 163, 184, 0.1);
  color: #64748b;
  border: 1px dashed rgba(148, 163, 184, 0.4);
  padding: 4px 10px;
}

/* Inline badge placement helper */
.fal-badge--inline {
  margin-left: 8px;
}

/* ========================================
   FOUNDING MEMBER BUTTON STYLE
   ======================================== */

.btn-founding-member,
.btn.btn-founding-member {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  color: #000;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  box-shadow: 0 4px 12px rgba(251, 191, 36, 0.3);
  border: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.btn-founding-member:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(251, 191, 36, 0.4);
  filter: brightness(1.05);
}

.btn-founding-member:active {
  transform: translateY(0);
}

/* ========================================
   HERO BADGE CONTAINER
   ======================================== */

.hero-beta-badge {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  justify-content: flex-start;
}

@media (max-width: 767px) {
  .hero-beta-badge {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ========================================
   DISCOUNT TEASER (TEXT ONLY, NO PRICES)
   ======================================== */

.discount-teaser {
  margin-top: 12px;
  font-size: var(--font-size-base, 1rem);
  color: var(--color-muted-dark, #64748b);
  font-family: var(--font-family-base, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);
  text-align: center;
  font-weight: var(--font-weight-medium, 500);
}

.discount-teaser strong {
  color: var(--color-accent, #2563eb);
  font-weight: var(--font-weight-bold, 700);
  font-size: var(--font-size-lg, 1.125rem);
  display: inline-block;
  padding: 2px 6px;
  background: rgba(37, 99, 235, 0.1);
  border-radius: 4px;
}

/* ========================================
   TRUST LINE (Near subscribe CTA)
   ======================================== */

.trust-line {
  margin-top: 8px;
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-muted, #9ca3af);
  font-family: var(--font-family-base, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);
  text-align: center;
}

.trust-line a {
  color: var(--color-accent, #2563eb);
  text-decoration: none;
}

.trust-line a:hover {
  text-decoration: underline;
}

/* ========================================
   HERO FEATURES LINE
   ======================================== */

.home-hero-features {
  margin: 0 0 var(--spacing-xl, 16px) 0;
  font-size: var(--font-size-base, 1rem);
  color: var(--color-muted-dark, #64748b);
  font-family: var(--font-family-base, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);
  line-height: var(--line-height-relaxed, 1.6);
}

.home-hero-signin {
  margin: var(--spacing-md, 8px) 0 0 0;
  text-align: center;
  font-size: var(--font-size-sm, 0.875rem);
}

.home-hero-signin a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  background: #ffffff;
  color: #3c4043;
  border: 1px solid #dadce0;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  font-family: "Google Sans", Roboto, Arial, sans-serif;
  text-decoration: none;
  box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
  transition: box-shadow 0.2s ease;
  cursor: pointer;
}

.home-hero-signin a:hover {
  box-shadow: 0 1px 3px 0 rgba(60, 64, 67, 0.3), 0 4px 8px 3px rgba(60, 64, 67, 0.15);
  text-decoration: none;
}

.home-hero-signin a:active {
  box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
}

/* Google icon (using SVG data URI) */
.home-hero-signin a::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%234285F4' d='M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z'/%3E%3Cpath fill='%2334A853' d='M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z'/%3E%3Cpath fill='%23FBBC05' d='M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z'/%3E%3Cpath fill='%23EA4335' d='M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}