/* ==========================================================================
   components.css — reusable UI pieces
   --------------------------------------------------------------------------
   Self-contained widgets that could appear anywhere on the page:
   buttons, pills, cards, badges, chips, the language toggle.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Buttons
   .btn.primary — solid lime, main call to action
   .btn.ghost   — outlined, secondary action
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 26px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.98rem;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
}

.btn.primary {
  background: var(--accent);
  color: #07150e;
  box-shadow: 0 8px 30px rgba(79, 168, 124, 0.25);
}

.btn.primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 38px rgba(79, 168, 124, 0.4);
}

.btn.ghost {
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--line);
  color: var(--text);
}

.btn.ghost:hover {
  transform: translateY(-2px);
  border-color: rgba(207, 226, 214, 0.3);
}

/* --------------------------------------------------------------------------
   Status pill — "Launching soon in Ethiopia" (with pulsing dot)
   -------------------------------------------------------------------------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--accent);
  background: rgba(79, 168, 124, 0.08);
  border: 1px solid rgba(79, 168, 124, 0.25);
  padding: 8px 16px;
  border-radius: 999px;
  margin-bottom: 24px;
}

.pill .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
  animation: pulse 2s infinite; /* keyframes in animations.css */
}

/* --------------------------------------------------------------------------
   Language toggle (EN / አማ) — wired up in assets/js/language.js
   The active button gets .on, applied by JS.
   -------------------------------------------------------------------------- */
.lang-toggle {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.03);
  flex-shrink: 0;
}

.lang-toggle button {
  font: inherit;
  font-weight: 700;
  font-size: 0.78rem;
  padding: 6px 13px;
  background: transparent;
  color: var(--muted);
  border: none;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.lang-toggle button[data-lang="am"] {
  font-family: 'Noto Sans Ethiopic', sans-serif;
}

.lang-toggle button.on {
  background: var(--accent);
  color: #07150e;
}

/* --------------------------------------------------------------------------
   Hero animation stage + floating status cards
   .stage wraps the inline SVG scene; .float-card overlays notifications.
   -------------------------------------------------------------------------- */
.stage {
  position: relative;
  border-radius: 26px;
  border: 1px solid var(--line);
  overflow: hidden;
  background: radial-gradient(120% 100% at 50% 0%, #111611, #080b09);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}

.stage svg {
  display: block;
  width: 100%;
  height: auto;
}

.float-card {
  position: absolute;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 13px;
  border-radius: 14px;
  background: rgba(17, 23, 19, 0.82);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
}

.float-card .fc-ic {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.float-card .fc-t {
  font-family: 'Sora';
  font-weight: 600;
  font-size: 0.8rem;
  line-height: 1.2;
}

.float-card .fc-s {
  font-size: 0.7rem;
  color: var(--muted);
}

/* Positioned opposite each other; staggered float animation. */
.float-card.f1 {
  top: 16px;
  left: 14px;
  animation: floaty 6s ease-in-out infinite;
}

.float-card.f2 {
  top: 16px;
  right: 14px;
  animation: floaty 6s ease-in-out infinite 1.8s;
}

/* --------------------------------------------------------------------------
   Illustration card — frames each app's SVG animation
   .olive = Customer section, .teal = Courier section
   -------------------------------------------------------------------------- */
.anim-card {
  position: relative;
  border-radius: 26px;
  border: 1px solid var(--line);
  overflow: hidden;
  padding: 8px;
}

.anim-card.olive {
  background: radial-gradient(120% 120% at 30% 20%, rgba(45, 107, 77, 0.35), rgba(8, 11, 9, 0.4));
}

.anim-card.teal {
  background: radial-gradient(120% 120% at 70% 20%, rgba(107, 82, 24, 0.4), rgba(8, 11, 9, 0.4));
}

.anim-card svg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 20px;
}

/* --------------------------------------------------------------------------
   Feature checklist (used in both app sections)
   Tick colour follows the section accent.
   -------------------------------------------------------------------------- */
.flist {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 13px;
  margin-bottom: 26px;
}

.flist li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.98rem;
}

.flist li .ck {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: rgba(79, 168, 124, 0.12);
  border: 1px solid rgba(79, 168, 124, 0.25);
}

.flist li .ck svg {
  width: 14px;
  height: 14px;
  stroke: var(--accent);
}

/* Courier section (.rev) uses the mint accent instead of lime. */
.app-row.rev .flist li .ck {
  background: rgba(212, 169, 78, 0.12);
  border-color: rgba(212, 169, 78, 0.25);
}

.app-row.rev .flist li .ck svg {
  stroke: var(--accent-2);
}

/* --------------------------------------------------------------------------
   Google Play badge (non-clickable placeholder until the apps ship)
   Swap the wrapper to <a href="..."> once store listings are live.
   -------------------------------------------------------------------------- */
.play-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 13px 22px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  cursor: default;
  transition: border-color 0.2s, transform 0.2s, background 0.2s;
}

.play-badge:hover {
  border-color: rgba(79, 168, 124, 0.4);
  transform: translateY(-2px);
  background: rgba(79, 168, 124, 0.05);
}

.play-badge .tri {
  width: 24px;
  height: 26px;
  flex-shrink: 0;
}

.play-badge .pb-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  text-align: left;
}

.play-badge .pb-text small {
  font-size: 0.64rem;
  color: var(--muted-2);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.play-badge .pb-text span {
  font-family: 'Sora';
  font-size: 0.98rem;
  font-weight: 600;
}

.play-badge .soon-flag {
  margin-left: 4px;
  font-size: 0.64rem;
  font-weight: 700;
  color: var(--accent);
  background: rgba(79, 168, 124, 0.12);
  border: 1px solid rgba(79, 168, 124, 0.25);
  padding: 4px 9px;
  border-radius: 999px;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Numbered step card ("How it works")
   -------------------------------------------------------------------------- */
.step {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 26px;
}

.step .num {
  font-family: 'Sora';
  font-weight: 800;
  font-size: 2.4rem;
  color: rgba(79, 168, 124, 0.18);
  line-height: 1;
  margin-bottom: 12px;
}

.step h4 {
  font-family: 'Sora';
  font-size: 1.05rem;
  margin-bottom: 8px;
}

.step p {
  color: var(--muted);
  font-size: 0.9rem;
}

/* --------------------------------------------------------------------------
   Feature tile ("Local by design")
   -------------------------------------------------------------------------- */
.feat {
  display: flex;
  gap: 14px;
  padding: 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
}

.feat .fi {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: rgba(212, 169, 78, 0.09);
  display: grid;
  place-items: center;
}

.feat .fi svg {
  width: 22px;
  height: 22px;
  stroke: var(--accent-2);
}

.feat h4 {
  font-family: 'Sora';
  font-size: 1rem;
  margin-bottom: 4px;
}

.feat p {
  color: var(--muted);
  font-size: 0.88rem;
}

/* --------------------------------------------------------------------------
   Contact chips (email / website)
   -------------------------------------------------------------------------- */
.contact-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 20px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
  font-size: 0.92rem;
  transition: border-color 0.2s, transform 0.2s;
}

.contact-chip:hover {
  border-color: rgba(79, 168, 124, 0.4);
  transform: translateY(-2px);
}

.contact-chip svg {
  width: 17px;
  height: 17px;
  stroke: var(--accent);
}