/* =========================================================
   1) Design Tokens (CSS Variables)
   --------------------------------------------------------- */
:root{
  --bg:#FFF6FA;
  --panel:#ffffff;
  --ink:#3d2a32;
  --muted:#8c6f7a;

  --brand:#f8a1c4;
  --brand-soft:#ffe3ef;
  --brand-strong:#f072a6;

  --ring:rgba(240,114,166,.35);
  --radius:16px;
}


/* =========================================================
   2) Base / Typography
   --------------------------------------------------------- */
body{
  background:var(--bg);
  color:var(--ink);
}

.text-muted{
  color:var(--muted)!important;
}


/* =========================================================
   3) Layout Containers
   --------------------------------------------------------- */
.content{
  max-width:720px;
  margin:auto;
  background:var(--panel);
  border-radius:var(--radius);
  padding:2rem;
  box-shadow:0 4px 14px rgba(0,0,0,.05);
}


/* =========================================================
   4) Header / Navigation
   --------------------------------------------------------- */
.header-mini{
  background:var(--brand-soft);
  border-bottom:1px solid #f8d4e1;
}

.chip{
  font-size:.75rem;
  padding:.25rem .5rem;
  background:var(--brand);
  color:#fff;
  border-radius:999px;
}


/* =========================================================
   5) Footer Notes
   --------------------------------------------------------- */
.garden-note{
  font-size:.8rem;
  line-height:1.35;
  color:var(--muted);
  margin-top:.25rem;
}


/* =========================================================
   6) Water Counter — Wrapper
   --------------------------------------------------------- */
.water-counter{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  margin-top:.5rem;

  background:#fff;
  border-radius:999px;
  padding:.35rem .6rem;
  box-shadow:0 2px 10px rgba(0,0,0,.06);

  position:relative; /* for ripple/drop positioning */
}

/* Tooltip (from data-tip) */
.water-counter::after{
  content:attr(data-tip);
  position:absolute;
  left:50%;
  bottom:115%;
  transform:translateX(-50%) translateY(6px);

  background:var(--ink);
  color:#fff;
  font-size:.72rem;
  padding:.25rem .45rem;
  border-radius:6px;
  white-space:nowrap;

  opacity:0;
  pointer-events:none;
  transition:opacity .15s ease, transform .15s ease;
  box-shadow:0 2px 8px rgba(0,0,0,.15);
}

.water-counter:hover::after{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}


/* =========================================================
   7) Water Counter — Button
   --------------------------------------------------------- */
.water-btn{
  display:inline-flex;
  align-items:center;
  gap:.35rem;

  border:0;
  background:transparent;
  padding:.2rem .3rem;
  border-radius:999px;

  color:var(--brand-strong);
  cursor:pointer;
  line-height:1;

  transition:transform .15s ease, background-color .15s ease, color .15s ease;

  position:relative; /* for ripple/drop elements */
  overflow:visible;
}

.water-btn:hover{
  transform:translateY(-1px);
  background:rgba(240,114,166,.08);
}

.water-btn[aria-pressed="true"]{
  color:#c04e85;
  cursor:default;
}

.water-btn.watered{
  opacity:.9;
  transform:translateY(1px);
}

/* Label + Count */
.water-label{ font-size:.8rem; }

.water-count{
  min-width:1.5rem;
  text-align:right;
  font-variant-numeric:tabular-nums;
}


/* =========================================================
   8) Water Counter — Click FX (JS-inserted elements)
   --------------------------------------------------------- */
/* Ripple */
.ripple-circle{
  position:absolute;
  inset:0;
  margin:auto;
  width:36px;
  height:36px;
  border-radius:50%;
  background:rgba(240,114,166,.22);
  transform:scale(0);
  animation:ripple .45s ease-out forwards;
  pointer-events:none;
}

/* Rising drop */
.drop{
  position:absolute;
  left:50%;
  top:0;
  transform:translateX(-50%);
  width:8px;
  height:12px;
  border-radius:50% 50% 60% 60%;
  background:var(--brand-strong);
  opacity:0.9;
  animation:dropUp .6s ease-out forwards;
}


/* =========================================================
   9) Animations
   --------------------------------------------------------- */
@keyframes ripple{
  to{
    transform:scale(2.2);
    opacity:0;
  }
}

@keyframes dropUp{
  0%{
    transform:translate(-50%, 6px) scale(.9);
    opacity:.95;
  }
  70%{
    transform:translate(-50%, -16px) scale(1);
    opacity:.8;
  }
  100%{
    transform:translate(-50%, -26px) scale(.9);
    opacity:0;
  }
}


/* =========================================================
   10) Accessibility / Motion
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .water-btn{ transition:none; }
  .water-counter::after{ transition:none; }
}