/* ============ Screen: pot detail (regular + savings variant) ============ */

/* ---------- Detail bar ---------- */
.pot-detailbar { padding-bottom: 4px; }
.pot-detailbar .detailbar__title { font-weight: 800; }
.pot-back { color: var(--color-link); }
.pot-gear { background: transparent; color: var(--color-link); }
.pot-gear svg { width: 26px; height: 26px; }

/* ---------- Hero illustration carousel ---------- */
/* Proportions from the screenshots: centred ~182px card, next pot's card
   peeking ~48px from the right edge with a wide gap between slides. */
.pot-hero { margin: 22px -16px 0; }
.pot-hero__scroll {
  display: flex;
  gap: 76px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 4px calc(50% - 91px);
  scrollbar-width: none;
}
.pot-hero__scroll::-webkit-scrollbar { display: none; }
.pot-hero__slide {
  position: relative;
  flex: none;
  width: 182px;
  height: 182px;
  border-radius: 24px;
  scroll-snap-align: center;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: 0;
}

/* Scene backgrounds (per pot.scene) */
.pot-scene--pig  { background: #1A2830; }
.pot-scene--jar  { background: linear-gradient(155deg, #38294B 0%, #252641 45%, #1B2534 100%); }
.pot-scene--car  { background: linear-gradient(160deg, #33294A 0%, #243043 60%, #1B2A38 100%); }
.pot-scene--palm { background: linear-gradient(160deg, #1F3B40 0%, #152730 100%); }
.pot-scene--money{ background: linear-gradient(160deg, #2C2142 0%, #1B2532 100%); }
.pot-scene--rain { background: linear-gradient(160deg, #253649 0%, #16222E 100%); }

.pot-scene__emoji {
  font-size: 76px;
  line-height: 1;
  z-index: 1;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.35));
}
.pot-scene--pig .pot-scene__emoji { margin-top: 30px; }
.pot-scene--jar .pot-scene__emoji { font-size: 90px; }
.pot-scene--rain .pot-scene__emoji { margin-top: 22px; }

/* Lime coin dropping into the piggy bank */
.pot-scene__coin {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #B5D63C;
  display: grid;
  place-items: center;
  z-index: 2;
}
.pot-scene__coin svg { width: 28px; height: 28px; color: #93B424; }

.pot-scene__shadow {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  width: 104px;
  height: 18px;
  border-radius: 50%;
  background: rgba(9, 52, 60, 0.55);
  filter: blur(2px);
}
.pot-scene__trees {
  position: absolute;
  top: 30px;
  font-size: 30px;
  letter-spacing: -11px;
  opacity: 0.9;
}
.pot-scene__cloud {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 30px;
  opacity: 0.9;
}

/* ---------- Balance ---------- */
.pot-balance { text-align: center; margin-top: 30px; }
.pot-balance .amount { font-size: var(--text-4xl); letter-spacing: -0.02em; }
.pot-balance__aer {
  color: var(--color-success);
  font-weight: 600;
  font-size: 16px;
  margin-top: 6px;
}

/* ---------- Withdraw / Add money ---------- */
.pot-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 26px 0 28px;
}
.pot-actions .pill { padding: 0 22px; }
.pot-actions__withdraw svg { color: var(--color-link); }
.pot-actions__withdraw svg path { stroke: var(--color-surface-raised); }
.pot-actions__add svg { color: #fff; }
.pot-actions__add svg path { stroke: var(--color-primary); }

/* ---------- Cards (hub rhythm from screenshots: ~24px gaps, bigger headers) ---------- */
.pot-upsell, .pot-activity, .pot-sched, .pot-details { margin-bottom: 22px; }
.pot-activity .card__header,
.pot-sched .card__header,
.pot-details .card__header { font-size: 19px; }

/* ---------- Upsell card (savings variant) ---------- */
.pot-upsell__header { font-size: 20px; align-items: flex-start; gap: 12px; }
.pot-upsell__dots {
  color: var(--color-link);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 2px;
  flex: none;
  padding-top: 3px;
}
.pot-upsell__body {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  padding-top: 6px;
}
.pot-upsell__copy {
  color: var(--color-text-muted);
  font-size: 16.5px;
  line-height: 1.45;
  max-width: 230px;
}
.pot-upsell__btn { margin-top: 18px; padding: 0 24px; }
.pot-upsell__btn svg { width: 17px; height: 17px; color: #fff; }
.pot-upsell__art { position: relative; width: 104px; height: 100px; }
.pot-upsell__can {
  position: absolute;
  top: -4px;
  right: 4px;
  font-size: 40px;
  transform: scaleX(-1) rotate(18deg);
}
.pot-upsell__plant { position: absolute; bottom: 0; left: 4px; font-size: 52px; }

/* ---------- Activity ---------- */
.pot-actrow { padding: 14px 0; }
.pot-act__ring {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, #8EE3F8 0%, #7EE787 55%, #C792EA 100%);
  display: grid;
  place-items: center;
}
.pot-act__avatar {
  width: 36px;
  height: 36px;
  border: none;
  background: #0D1A22;
  font-size: 12.5px;
}
.pot-actrow .row__amount { font-size: 20px; }
.pot-activity .card__link { font-size: 17px; padding-top: 14px; }

/* Divider under the last activity row, before "See all" (inset to text edge) */
.pot-rows--endline > :last-child { position: relative; }
.pot-rows--endline > :last-child::after {
  content: "";
  position: absolute;
  left: 56px;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--color-border);
}

/* ---------- Scheduled payments ---------- */
.pot-sched .card__header { margin-bottom: 4px; }
.pot-sched__setup { font-size: 16px; }
.pot-dashed-sq {
  width: 42px;
  height: 42px;
  border: 1.5px dashed #2E4A59;
  border-radius: 12px;
}

/* ---------- Pot details ---------- */
.pot-details__val {
  color: var(--color-text-muted);
  font-size: var(--text-base);
  text-align: right;
}

/* ---------- Add money / Withdraw sheet ---------- */
.pot-sheet__amountwrap { position: relative; margin: 4px 0 14px; }
.pot-sheet__cur {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 700;
  font-size: 20px;
  color: var(--color-text-muted);
  pointer-events: none;
}
.pot-sheet__field {
  padding-left: 38px;
  font-size: 22px;
  font-weight: 700;
  background: var(--color-surface);
}
.pot-sheet__chips { display: flex; gap: 10px; margin-bottom: 16px; }
.pot-sheet__chip {
  flex: 1;
  height: 44px;
  border-radius: var(--radius-full);
  background: var(--color-surface);
  font-weight: 700;
  font-size: var(--text-base);
  transition: transform 120ms ease;
}
.pot-sheet__chip:active { transform: scale(0.96); }
.pot-sheet__error {
  color: var(--color-error);
  font-size: 14px;
  font-weight: 600;
  margin: -6px 0 12px;
}