/* ==========================================================================
   spend.css — "How to Spend" tab
   Mobile: donut ring on nav icon | Tablet+: horizontal progress bar
   ========================================================================== */

.spend-card {
  position: relative;
  width: var(--card-width); max-width: 100%;
  padding: 20px 20px 24px;
  border-radius: 30px;
  border-bottom: 1px solid var(--card-border);
  background: linear-gradient(180deg, var(--card-grad-top) 0%, var(--card-grad-bottom) 100%);
  isolation: isolate;
  margin-inline: auto;
  transition: width 0.4s var(--ease-out);
}
/* Glow overlay clipped to card shape */
.spend-card::before {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit; overflow: hidden;
  background: radial-gradient(ellipse 70% 60% at 25% 80%, rgba(123,111,240,0.5) 0%, transparent 70%),
              radial-gradient(ellipse 60% 80% at 80% 0%, rgba(81,40,215,0.4) 0%, transparent 60%);
  mix-blend-mode: plus-lighter; opacity: 0.5;
  pointer-events: none; z-index: 0;
}

/* ---- Icon nav ---- */
.spend-nav {
  position: relative; z-index: 1;
  display: flex; align-items: flex-start;
  gap: 4px;
  padding: 6px 4px 16px;
  border-bottom: 0.5px solid rgba(255,255,255,0.15);
  margin-bottom: 20px;
  overflow-x: auto; overflow-y: visible;
  flex-wrap: nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: default;
  /* Gradient fade mask — soft edges on mobile scroll */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}
.spend-nav::-webkit-scrollbar { display: none; }

.spend-nav__item {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  flex: 0 0 auto; min-width: 56px;
  cursor: pointer; padding: 4px 6px;
  transition: opacity 0.2s var(--ease-out);
}
.spend-nav__item:hover { opacity: 0.85; }

/* Icon wrapper — sized to hold icon + ring */
.spend-nav__icon-wrap {
  position: relative;
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
}

.spend-nav__icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.04);
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.3s var(--ease-out), background 0.3s var(--ease-out);
}
.spend-nav__icon svg { width: 22px; height: 22px; }

/* Active state — hide border, ring takes over */
.spend-nav__item.is-active .spend-nav__icon {
  border-color: transparent;
  background: rgba(255,255,255,0.08);
}

/* ---- Donut progress ring (mobile only) ---- */
.spend-nav__ring {
  position: absolute;
  top: 50%; left: 50%;
  width: 48px; height: 48px;
  transform: translate(-50%, -50%) rotate(-90deg);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s var(--ease-out);
}
.spend-nav__item.is-active .spend-nav__ring { opacity: 1; }

.ring-track {
  fill: none; stroke: rgba(255,255,255,0.06); stroke-width: 2;
}
.ring-fill {
  fill: none;
  /* Subtle white — doesn't compete with content */
  stroke: rgba(255,255,255,0.2);
  stroke-width: 2.5;
  stroke-linecap: round;
}

.spend-nav__label {
  font-size: 10px; line-height: 13px;
  font-weight: var(--fw-medium);
  color: rgba(255,255,255,0.5);
  text-align: center; white-space: nowrap;
  transition: color 0.3s var(--ease-out);
}
.spend-nav__item.is-active .spend-nav__label { color: #fff; }

/* ---- Content ---- */
.spend-content { position: relative; z-index: 1; }

.spend-content__body {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 14px; align-items: center;
  opacity: 1; transform: translateY(0);
  transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}
.spend-content__body.is-exiting { opacity: 0; transform: translateY(6px); }

.spend-content__app-icon {
  grid-row: 1 / -1; grid-column: 1;
  width: 48px; height: 48px; border-radius: 12px;
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  transition: background 0.4s var(--ease-out);
}
.spend-content__app-icon svg { width: 100%; height: 100%; padding: 25%; }

.spend-content__text {
  grid-row: 1 / -1; grid-column: 2;
  display: flex; flex-direction: column; gap: 6px;
}
.spend-content__title { font-size: 20px; line-height: 24px; font-weight: var(--fw-bold); color: #fff; }
.spend-content__desc { font-size: 14px; line-height: 20px; font-weight: var(--fw-regular); color: rgba(255,255,255,0.65); max-width: 300px; }
.spend-content__desc a { color: var(--color-accent-green); text-decoration: underline; text-underline-offset: 2px; }

/* ---- Horizontal progress bar — hidden on mobile, shown on tablet+ ---- */
.spend-progress {
  display: none;
  position: relative; z-index: 1;
  width: 15%; height: 2px;
  background: rgba(255,255,255,0.08);
  border-radius: 2px;
  margin-top: 20px;
  margin-inline: auto;
  overflow: hidden;
}
.spend-progress__fill {
  height: 100%; width: 0%;
  background: rgba(255,255,255,0.25);
  border-radius: 2px; will-change: width;
}

/* ---- Bullets ---- */
.spend-features {
  display: flex; flex-direction: column; gap: 16px;
  max-width: 32rem; margin-inline: auto; margin-top: 2rem;
}
.spend-features .features__item { font-size: 12px; line-height: 16px; font-weight: var(--fw-semibold); color: rgba(255,255,255,0.75); }
.spend-features .fc-icon-sm { width: 24px; height: 24px; }

/* ---- Tablet ---- */
@media (min-width: 48rem) {
  .spend-card { padding: 24px 28px 28px; border-radius: 36px; }
  .spend-nav { flex-wrap: nowrap; justify-content: space-around; overflow: visible; gap: 0; margin-bottom: 24px; padding-bottom: 20px;
    -webkit-mask-image: none; mask-image: none; /* no fade mask — nav fits */ }
  .spend-nav__item { min-width: 68px; padding: 4px 8px; }
  .spend-nav__icon-wrap { width: 52px; height: 52px; }
  .spend-nav__icon { width: 52px; height: 52px; }
  .spend-nav__icon svg { width: 24px; height: 24px; }
  /* Hide donut ring — white border instead */
  .spend-nav__ring { display: none; }
  .spend-nav__item.is-active .spend-nav__icon { border-color: #fff; background: rgba(255,255,255,0.1); }
  .spend-nav__label { font-size: 11px; line-height: 15px; }
  /* Show horizontal bar */
  .spend-progress { display: block; margin-top: 24px; }

  .spend-content__body { display: flex; flex-direction: row; align-items: flex-start; gap: 20px; }
  .spend-content__app-icon { width: 64px; height: 64px; border-radius: 16px; grid-row: auto; grid-column: auto; }
  .spend-content__app-icon svg { width: 100%; height: 100%; padding: 20%; }
  .spend-content__text { grid-row: auto; grid-column: auto; gap: 10px; }
  .spend-content__title { font-size: 24px; line-height: 28px; }
  .spend-content__desc { font-size: 15px; line-height: 22px; max-width: 380px; }
  .spend-features .features__item { font-size: 14px; line-height: 20px; }
  .spend-features .fc-icon-sm { width: 28px; height: 28px; }
}

/* ---- Desktop ---- */
@media (min-width: 64rem) {
  .spend-card { max-width: 640px; padding: 28px 36px 32px; border-radius: 40px; }
  .spend-nav__item { min-width: auto; flex: 1; }
  .spend-nav__icon-wrap { width: 56px; height: 56px; }
  .spend-nav__icon { width: 56px; height: 56px; }
  .spend-nav__icon svg { width: 28px; height: 28px; }
  .spend-nav__ring { display: none; }
  .spend-nav__item.is-active .spend-nav__icon { border-color: #fff; background: rgba(255,255,255,0.1); }
  .spend-nav__label { font-size: 12px; line-height: 16px; }
  .spend-nav { margin-bottom: 28px; padding-bottom: 24px; }
  .spend-progress { margin-top: 28px; }

  .spend-content__body { gap: 24px; }
  .spend-content__app-icon { width: 72px; height: 72px; border-radius: 18px; }
  .spend-content__title { font-size: 28px; }
  .spend-content__desc { font-size: 16px; line-height: 24px; max-width: 440px; }
  .spend-features { display: none; }
}