/* Frends / Gratitude UI (Create Activity) — subtle and modern */

.gratitude-group{
  margin-top: 10px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}

.gratitude-label{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-bottom: 10px;
}

.gratitude-label span{
  font-weight: 800;
  color: var(--text-primary);
}

.gratitude-label small{
  font-size: 12px;
  color: var(--text-secondary);
}

.gratitude-switch{
  display:flex;
  align-items:center;
  gap:10px;
  user-select:none;
}

.gratitude-switch input{ display:none; }

.switch-ui{
  width: 44px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  position: relative;
  flex: 0 0 auto;
  transition: background .18s ease, border-color .18s ease;
}

.switch-ui::after{
  content:"";
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  position:absolute;
  top: 50%;
  left: 3px;
  transform: translateY(-50%);
  transition: transform .18s ease;
}

.gratitude-switch input:checked + .switch-ui{
  background: linear-gradient(135deg, rgba(59,130,246,.85), rgba(39,224,193,.85));
  border-color: transparent;
}

.gratitude-switch input:checked + .switch-ui::after{
  transform: translate(18px, -50%);
}

.switch-text{
  font-weight: 700;
  color: var(--text-primary);
}

.gratitude-amount{
  margin-top: 10px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.gratitude-chip{
  border-radius: 999px;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  font-weight: 800;
  cursor:pointer;
}

.gratitude-chip.active{
  background: linear-gradient(135deg, rgba(255,138,61,.90), rgba(39,224,193,.85));
  border-color: transparent;
  color:#08131f;
}

@media (max-width: 768px){
  .gratitude-group{ padding: 10px; }
}